/* ── Book flip animation ─────────────────────────────────── */
.book {
    width: 80vw;
    max-width: 1300px;
    height: 40vw;
    max-height: 650px;
    position: relative;
    -webkit-perspective: 1500px;
    perspective: 1500px;
    /* Een paar krappe, lichtgekleurde box-shadows (met een dun donker randje)
       gestapeld vóór de bestaande zachte drop-shadow suggereren de dikte van
       opeengestapelde pagina's die net onder het boek vandaan piepen — zonder
       dat is het alleen een platte rechthoek met een schaduw eronder. */
    box-shadow:
        3px 3px 0 0 #f2f2f2, 3px 3px 0 1px #d8d8d8,
        6px 6px 0 0 #f2f2f2, 6px 6px 0 1px #d8d8d8,
        9px 9px 0 0 #f2f2f2, 9px 9px 0 1px #d8d8d8,
        10px 10px 5px 0px rgba(0, 0, 0, 0.25);
    /* perspective triggert op zichzelf al een nieuwe stacking context, dus de
       z-index-waarden van .book .page hieronder golden alleen TEN OPZICHTE VAN
       ELKAAR, binnen .book — niet t.o.v. de navigatieknoppen daarbuiten. Zonder
       een eigen z-index hier bepaalt de DOM-volgorde de tekenvolgorde tussen
       .book en .btns, en kon een gehoverde knop (Bootstrap zet daar z-index:1
       op) alsnog over de flip-animatie heen clippen. Met een z-index hier wint
       .book altijd, ongeacht de knoppen-state. */
    z-index: 10;
}
.book .page {
    position: absolute;
    top: 0;
    width: 50%;
    padding: min(4vw, 65px);
    height: 100%;
    color: #3b3b3b;
    font-size: min(2vw, 32.5px);
    -webkit-transition: -webkit-transform .8s ease;
    transition: transform .8s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    text-align: center;
    overflow: hidden;
}
.book .page.left  { left: 0; -webkit-transform-origin: right; transform-origin: right; overflow-wrap: break-word; }
.book .page.right { right: 0; -webkit-transform-origin: left; transform-origin: left; }
/* Dieptesuggestie bij de vouw (waar .page.left en .page.right samenkomen):
   een gewone box-shadow zit altijd rond de HELE box, dus ook langs de
   boven-/onder-/buitenrand van het boek — daarom hier i.p.v. box-shadow een
   gradient op een ::before, precies zo breed als de vouw diep moet lijken,
   die als enige aan de kant van de vouw (overflow:hidden op .book .page
   knipt 'm daar netjes af) naar transparant uitvaagt. Voor .page.left is dat
   de rechterrand, voor .page.right de linkerrand. */
.book .page.left::before,
.book .page.right::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(4vw, 20px);
    pointer-events: none;
    z-index: 1;
}
.book .page.left::before {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
}
.book .page.right::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0));
}
.book .page.current { z-index: 2; }
.book .current.right.page.turn  { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
.book .current.left.page.turn   { -webkit-transform: rotateY(180deg);  transform: rotateY(180deg); }
.book .next.left.page           { -webkit-transform: rotateY(180deg);  transform: rotateY(180deg); }
.book .next.left.page.turn      { -webkit-transform: rotateY(0deg);    transform: rotateY(0deg); }
.book .prev.right.page          { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
.book .prev.right.page.turn     { -webkit-transform: rotateY(0deg);    transform: rotateY(0deg); }

.btns { text-align: center; width: 600px; margin: 20px 0; }
/* Navigatieknoppen zijn nu icoontjes i.p.v. tekst, dus geen vaste breedte meer
   nodig — gewoon laten meebewegen met de padding van .btn. */
#book_direction_btn_group .btn { width: 2.75rem; }
/* pointer-events:none i.p.v. alleen cursor:default, want dat laatste voorkomt
   niet dat de :hover-stijl van .btn-outline-secondary nog steeds toepast.
   Dezelfde breedte als de knoppen hierboven voorkomt dat de rij verspringt
   zodra het paginanummer van 1 naar 2 cijfers gaat (of terug). */
#book_page_indicator { cursor: default; pointer-events: none; width: 2.75rem; }
#book_page_indicator[disabled] { opacity: .65; }
/* Alleen relevant terwijl de cover getoond wordt, maar blijft ook in de
   book-weergave gewoon in de flow staan (enkel visibility:hidden, niet
   display:none) — anders verspringen cover-switch-btn en de navigatieknoppen
   elke keer dat je de cover opent/sluit, omdat .btns gecentreerd is op een
   vaste breedte. */
#toggle_crop_marks_btn { width: 2.75rem; margin-right: .5rem; }

/* ── Snijranden aan/uit ──────────────────────────────────────────────── */
.cover.hide-crop-marks::after,
.cover.hide-crop-marks::before { display: none; }
/* Oog dicht = zien hoe de cover er gedrukt uitziet: dan ook geen "nog geen
   illustratie"-tekst en knoppen op een lege cover, alleen het witte vlak. */
.cover.hide-crop-marks .page-canvas-empty,
.book.is-voorbeeld .page-canvas-empty { display: none; }
/* !important: book_editor.js zet de hint met jQuery .show() inline op display:block */
.book.is-voorbeeld #hint_click_text { display: none !important; }

#canvas {
    height: 600px;
    width: 600px;
    background-color: #ffffff;
    cursor: default;
    border: 1px solid black;
}
img { max-width: 100%; }

.book-image-selector { cursor: pointer; }

.page-item {
    display: inline-block;
    position: absolute;
    margin: 0;
    cursor: pointer;
    /* outline i.p.v. border: telt niet mee in de layout-box, dus beïnvloedt
       de breedte/hoogte niet die rescalePageItems() bijhoudt (een border zou,
       door de globale box-sizing:border-box reset, bij elke resize-cyclus
       4px van de bijgehouden grootte laten "weglekken" — vandaar de bug
       waarbij stickers bij herhaald in-/uitzoomen van het scherm steeds
       kleiner werden). */
    outline: 2px dashed transparent;
    outline-offset: -2px;
}
/* Bewust GEEN overflow:hidden op tekst-stickers: (1) de draaiknop
   (ui-rotatable-handle) steekt buiten de box en werd anders afgeknipt,
   (2) html2canvas' tekstmeting wijkt net af van de browser waardoor het
   einde van de tekst in de export afgeknipt werd, en (3) uithalen van
   sierlettertypen mogen buiten de (randloze) box vallen. De box volgt de
   tekst toch al strak via sizeTextPageItem + de font-hoogteverhouding. */
.page-item .ui-resizable-handle,
.page-item .ui-rotatable-handle  { display: none !important; }
.page-item:hover .ui-resizable-handle,
.page-item.selected .ui-resizable-handle { display: block !important; }
.page-item:hover .ui-rotatable-handle,
.page-item.selected .ui-rotatable-handle { display: block !important; background-color: #2d2d2d; }
.page-item:hover,
.page-item.selected { outline-color: lightgrey; }

.list-group-item        { cursor: grab; }
.list-group-item:active { cursor: grabbing; }
/* De knoppen staan (in de HTML) vóór deze tekst en zijn float:right — daardoor
   krimpt dit blok (via overflow:hidden, dat ook een nieuwe block formatting
   context opent) automatisch tot de ruimte die naast de knoppen overblijft,
   i.p.v. dat lange tekst de knoppen omlaag duwt. white-space:nowrap +
   text-overflow:ellipsis knipt de tekst dan netjes af met "...". */
.list-group-item .layer-label {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.asColorPicker-dropdown { max-width: 260px !important; }
.flipped-img { transform: scale(-1, 1) !important; }
.apply-font  { overflow-wrap: break-word; }

/* ── Editor layout ───────────────────────────────────────── */
/* vh (niet vw!): de sectie moet binnen de schermHOOGTE passen. Met vw werd
   de pagina op brede/lage schermen hoger dan het venster en dus scrollbaar,
   met lege ruimte onder de sectie. */
.editor-section { margin-top: 4rem; overflow: hidden; }

.book-controls  { width: 80vw; margin: 1.6vw auto .75rem; text-align: center; }
/* Vaste breedte i.p.v. fit-content: "Bekijk Cover" en "Sluit Cover" zijn niet
   even lang, dus met fit-content verspringt de hele knoppenrij bij elke klik. */
.cover-switch-btn { width: 9rem; }
/* Bewust géén min-width op de kaart: de rijen erin hebben flex-wrap, dus bij
   een te klein venster breken de groepen naar een volgende regel — een
   min-width (fit-content) zou de kaart breed houden en dat wrappen juist
   tegenhouden. */
.settings-card  { width: 80vw; max-width: 1300px; margin: .75rem auto 0; border-radius: .75rem !important; }

/* Settings toolbar helpers */
.settings-label { display: block; font-size: .72rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
/* Voor bijzinnen in een settings-label, zoals "(Optioneel)": lichter en minder zwaar */
.settings-label-muted { color: #b0b6c0; font-weight: 500; }
.format-label   { display: inline-flex; flex-direction: row; align-items: center; gap: .5rem; padding: .5rem .75rem; line-height: 1.3; overflow: hidden; white-space: normal; }
.format-label-text { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }
.product-img    { max-height: 3.5rem; max-width: 100%; width: auto; height: auto; }

/* ── Book text ───────────────────────────────────────────── */
.book-text-center {
    font-family: 'Kalam', cursive;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#hint_click_text {
    display: none;
    font-size: min(1.2vw, 19.5px);
    position: absolute;
    bottom: 1rem;
    margin: auto;
    left: 0;
    right: 0;
}

.placeholder-inner { height: 100%; cursor: pointer; }

/* Schaal-wrapper om boek + cover: de scale zelf (en de bijpassende hoogte)
   zet rescaleBookArea() in book_editor.js; hier alleen het schaal-anker —
   vanaf de bovenkant, horizontaal gecentreerd, zodat het boek onder de
   knoppenrij blijft hangen en het menu omhoog kan schuiven. */
#book_scale_wrap { transform-origin: top center; }

/* ── Cover ───────────────────────────────────────────────── */
.cover {
    margin: auto;
    background-color: white;
    width: 80vw;
    max-width: 1300px;
    height: 40vw;
    max-height: 650px;
    position: relative;
    perspective: 1500px;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.25);
    display: none;
}
.cover::after {
    content: '';
    position: absolute;
    inset: 7% 3.5%;
    border: 2px dashed #448c74;
    pointer-events: none;
    z-index: 10;
}
.cover::before {
    content: 'LET OP: GESCHATTE SNIJRANDEN';
    position: absolute;
    top: 3%;
    left: 3%;
    font-size: 16px;
    color: #448c74;
    pointer-events: none;
    z-index: 11;
    line-height: 1;
}
/* Verhoudingen 1-op-1 met het drukbestand (templates/book/cover.html):
   achterkant 49,375% + rug 1,25% + voorkant 49,375%. Op de 80vw-cover is de
   rug dus 1vw (1,25% van 80vw; cap 16.25px = 1,25% van 1300px). De kolommen
   hoeven niet exact gezet: het zijn .col's (flex-basis 0) die de restruimte
   gelijk verdelen, dus elk automatisch 39,5vw = 49,375%. */
.cover-col          { height: min(40vw, 650px); padding-right: 0; position: relative; overflow: hidden; }
.cover-front-col    { height: min(40vw, 650px); padding-left: 0; position: relative; overflow: hidden; }
/* 3D-rug: het boek "ligt op z'n buik", dus de rug is een verhoogde, ronde
   richel. Twee ingrediënten: (1) een slagschaduw aan weerszijden die over de
   voor- en achterkant valt (iets sterker rechts, passend bij de
   licht-van-linksboven van de bestaande .cover-schaduw), waardoor de rug
   bóven de covers lijkt te liggen; (2) op ::after een cilinder-shading —
   donkere flanken, lichte kern — die de ronding suggereert. z-index 2 zodat
   rug + schaduw over de halftoon-strips van de buurkolommen heen tekenen.
   Alleen visueel; verhoudingen (1,25% rugbreedte) blijven exact print. */
.cover-spine {
    height: min(40vw, 650px);
    max-width: min(1vw, 16.25px) !important;
    padding: 0;
    position: relative;
    z-index: 2;
}
/* De richel is visueel breder dan de rug-div: ::after steekt aan beide
   kanten uit over de covers heen (negatieve inset), zodat het 3D-effect
   breder oogt zonder de (print-correcte) rugbreedte zelf aan te raken.
   De slagschaduw zit daarom ook hier en niet op de div. */
.cover-spine::after {
    content: '';
    position: absolute;
    inset: 0 calc(-1 * min(.14vw, 2.3px));
    pointer-events: none;
    box-shadow:
        min(.12vw, 2px) 0 min(.45vw, 7px) rgba(0, 0, 0, .18),
        calc(-1 * min(.09vw, 1.5px)) 0 min(.45vw, 7px) rgba(0, 0, 0, .12);
    background: linear-gradient(to right,
        rgba(47, 55, 66, .16) 0%,
        rgba(47, 55, 66, .06) 22%,
        rgba(255, 255, 255, .35) 46%,
        rgba(255, 255, 255, .35) 54%,
        rgba(47, 55, 66, .07) 78%,
        rgba(47, 55, 66, .18) 100%);
}
.cover-image-wrapper { height: 100%; width: 100%; margin: auto; }

/* Zelfde halftoon-overgang naar de witte rug als op de gedrukte cover
   (templates/book/cover.html gebruikt exact dezelfde PNG's): witte dots die
   dichtlopen richting de rug. Strips zijn even breed als de rug
   (.cover-spine), dus de totale overgangszone incl. rug is 3x de rugbreedte
   — daarmee is de preview een eerlijke representatie van het drukwerk.
   background-size 100% auto (i.p.v. 100% 100%): de PNG is 1:42, de strip op
   scherm 1:25 — meestretchen zou de dots tot ovalen vervormen; de hoogte
   mag gewoon afkappen want het patroon is verticaal uniform. */
.cover-col::before,
.cover-front-col::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(1vw, 16.25px); /* altijd gelijk aan de rugbreedte (.cover-spine) */
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}
.cover-col::before {
    right: 0;
    background-image: url('https://mynovelist.s3.amazonaws.com/media/cover_fold_dots_left.png');
}
.cover-front-col::before {
    left: 0;
    background-image: url('https://mynovelist.s3.amazonaws.com/media/cover_fold_dots_right.png');
}
.cover-image-hint   { font-size: 1rem !important; top: 80%; cursor: pointer; }
.cover-logo         { width: min(6.4vw, 104px); height: min(6.4vw, 104px); }

/* Gebaseerd op de uiteindelijke print-opmaak (templates/book/cover.html): daar
   staat de titel in een apart wrapper-element dat centreert + de writing-mode
   zet, en een <p> eronder met alleen typografie. Hier op één element gecombineerd,
   want de editor heeft geen aparte wrapper-div. letter-spacing is een em-waarde
   (i.p.v. de letterlijke 1mm uit het printdocument) omdat de font-size hier
   responsive/vw-gebaseerd is: 1mm t.o.v. de 4.4mm print-fontsize ≈ 0.23em, en
   met em schaalt de tracking netjes mee i.p.v. bij een klein scherm relatief
   te breed te worden. */
#book_title_placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* boven de cilinder-shading van .cover-spine::after, anders vervagen de letters */
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    margin: 0;
    /* Zelfde verhouding als print: 4,4mm font op 478mm breedte = 0,92% van de
       cover → 0.74vw van 80vw (cap: 12px bij de 1300px-cover). Groter zou uit
       de (nu print-correcte, smallere) rug steken. */
    font-size: min(.74vw, 12px);
    /* Print heeft letter-spacing 1mm op een 4,4mm-font = 0.227em; als em
       schaalt hij hier automatisch mee met de responsive font-size. */
    letter-spacing: .227em;
    line-height: 1.25;
    font-family: "Helvetica", "Arial", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Beide lettertype-dropdowns klappen naar bóven uit: ze staan onderin de
   settings-kaart en .editor-section heeft overflow:hidden, dus een naar
   beneden uitklappende lijst valt buiten de sectie en wordt afgeknipt.
   Boven de knop (richting het boek/de cover) is ruimte genoeg. z-index
   boven de kaart-inhoud zodat de lijst over de andere opties heen tekent. */
#font-picker ul {
    top: auto;
    bottom: 100%;
    z-index: 5;
}

#back_cover_credits {
    position: absolute;
    width: min(6.4vw, 104px);
    height: min(6.4vw, 104px);
    text-align: center;
    cursor: pointer;
    top: 20%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    left: calc(min(16vw, 260px)*1.1);
}

/* ── Book format ─────────────────────────────────────────── */
.product-img { height: 5rem; }

/* ── Image modal ─────────────────────────────────────────── */

.gallery-img    { background-color: whitesmoke; }
/* Placeholder-formaat zolang een lazy afbeelding (data-src, zie
   initGalleryLazyLoad) nog niet geladen is: zonder dit klapt een src-loze
   <img> dicht naar 0px hoogte, waardoor álle kaarten tegelijk "in beeld"
   zouden zijn en de observer alsnog alles in één keer zou laden. Vierkant
   is het juiste formaat: AI-generaties zijn dat altijd al en uploads gaan
   door de vierkante cropper. */
.gallery-img[data-src] { width: 100%; aspect-ratio: 1 / 1; }
/* Lege staat van de galerij: uitnodiging om te beginnen i.p.v. een
   placeholder-plaatje. Gestileerd als "drop zone" (gestippelde rand). */
.gallery-empty-state {
    padding: 4rem 2rem;
    border: 2px dashed #d7dde2;
    border-radius: 1rem;
    text-align: center;
    color: #858c97;
}
.gallery-empty-state i { display: block; font-size: 3rem; color: #b4bbc3; margin-bottom: 1rem; }
.gallery-empty-state h5 { color: #576071; margin-bottom: .5rem; }
.gallery-empty-state p { max-width: 34rem; margin: 0 auto; font-size: .95rem; line-height: 1.6; }
.quality-badge  { position: absolute; bottom: 10px; left: 10px; display: none; }
.gallery-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-in-out;
}
.zoom-effect-wrapper:hover .gallery-delete-btn {
    opacity: 1;
    pointer-events: auto;
}
/* Toont bij welke boekpagina een AI-gegenereerde galerij-afbeelding hoort
   (alleen aanwezig op afbeeldingen die uit een pagina-job komen, niet op
   uploads of personage-sheets). */
.illu-page-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 255, 255, .85);
    color: #2f4a3f;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 50rem;
    pointer-events: none;
}
/* Afbeeldingen die bij de OPENSTAANDE pagina horen: pill in de primaire
   sitekleur zodat ze direct opvallen (gezet in updateGalleryPagePills()). */
.illu-page-pill-current {
    background: #448c74;
    color: #fff;
    box-shadow: 0 .15rem .4rem rgba(56, 111, 91, .35);
}

/* ── Illustration editor ─────────────────────────────────── */

.output           { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.layers-hint      { color: #858c97; }

.illus-divider { margin: 1.1rem 0 .9rem; border-color: #e3e9ef; opacity: 1; }

/* Sticker-zoekveld */
.sticker-search-group { padding: 0; margin-bottom: .75rem; }
.sticker-search-group .form-control { border-color: #e3e9ef; }
.sticker-search-group .form-control:focus { border-color: #448c74; box-shadow: none; }

/* Thema's: wrappende chips die de resterende kolomhoogte vullen (eigen
   scroll). De ids/het toon-verberg-gedrag (#sticker_themes <-> #sticker_row,
   via jQuery .show()/.hide()) is ongewijzigd. */
#sticker_themes { flex: 1 1 auto; min-height: 0; }
.sticker-themes-col { height: 100%; }
.sticker-theme-row {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-content: flex-start;
    padding-right: .25rem;
}
.theme-btn {
    background: #fff;
    border: 1px solid #e3e9ef;
    color: #576071;
    border-radius: 2rem;
    padding: .3rem .8rem;
    font-size: .8rem;
    line-height: 1.2;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.theme-btn:hover { border-color: #448c74; background: #f0f7f4; color: #2f4a3f; }

/* Stickers van het gekozen thema: kopregel (hint + sluitkruisje) met
   daaronder de scrollende stickerlijst. */
.sticker-row { display: none; flex: 1 1 auto; min-height: 0; }
.sticker-row-head { display: flex; align-items: center; justify-content: space-between; }
.sticker-hint { font-style: normal; font-size: .78rem; color: #858c97; }
.sticker-row-head .btn-close { font-size: .7rem; }
.sticker-by-theme { overflow-y: auto; height: calc(100% - 2.2rem); }
.sticker-by-theme .col-4 { padding: .3rem; }
.sticker-by-theme img {
    width: 100%;
    background: #f7f9fc;
    border: 1px solid #e3e9ef;
    border-radius: .6rem;
    padding: .35rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sticker-by-theme img:hover { border-color: #448c74; box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .06); }

#background_color { width: 5rem; }
/* Alleen zichtbaar (via updatePPIWarning) zolang er een afbeelding onder de
   350 PPI op het canvas staat — en dan als echte waarschuwing in rood. */
#PPI_text         { color: #ed5050; display: none; }

/* ── Tekst-sticker modal ─────────────────────────────────── */

#page_layers      { overflow-y: scroll; height: 40vw; }

/* ── Toast ───────────────────────────────────────────────── */
.editor-toast { position: fixed; top: 6rem; right: 6rem; z-index: 1100; }

/* Stapel voor de AI-pagina-toasts: meerdere pagina's kunnen nu tegelijk
   afronden, dus dit is geen los toast-element meer maar een kolom die er
   zoveel kan tonen als er tegelijk klaar/mislukt zijn. De kinderen zelf
   krijgen geen eigen position (dat doet .editor-toast-stack al). */
.editor-toast-stack { display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }

/* Blijvende "er loopt nog iets op de achtergrond"-indicator (i.t.t. de
   toasts hierboven, die zichzelf na een tijdje verbergen) — linksonder,
   zodat 'ie nooit met de toasts rechtsboven overlapt. */
.illu-bg-progress {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid rgba(68, 140, 116, .25);
    color: #2f4a3f;
    border-radius: 50rem;
    padding: .5rem 1.1rem .5rem .65rem;
    font-size: .85rem;
    font-weight: 500;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
    cursor: pointer;
}
.illu-bg-progress .spinner-border { width: 1rem; height: 1rem; color: #448c74; }

/* ── book_check.html specific ───────────────────────────── */
/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/* Email / phone icon padding */
.input-icon-lg  { padding-left: 2.5rem; }
.input-icon-sm  { padding-left: 1.8rem; }
.input-uppercase { text-transform: uppercase; }
/* Alleen wat je typt in hoofdletters, niet de placeholder ("Postcode") */
.input-uppercase::placeholder { text-transform: none; }

/* Price row */
.price-tax  { font-size: small !important; }

/* ── AI illustratie-generatie ─────────────────────────────────────────── */

.illu-ribbon {
    position: absolute;
    top: -0.65rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: linear-gradient(135deg, #55a68a, #386f5b);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 50rem;
    box-shadow: 0 .2rem .5rem rgba(56, 111, 91, .35);
    z-index: 2;
}
.illu-ribbon i { font-size: .75rem; }

.illu-credits-chip {
    background: #f0f7f4;
    color: #386f5b;
    border: 1px solid rgba(68, 140, 116, .3);
    font-weight: 600;
    padding: .4rem .8rem;
}
/* Zelfde afmetingen als .illu-credits-chip hierboven, zodat de knop ernaast
   in de header niet kleiner (of groter) oogt dan de credits-pill. */
.illu-buy-credits-header-btn { padding: .4rem .8rem; font-size: .75rem; line-height: 1; }
/* Exact even hoog: het plusicoontje (15px) maakte de knop anders 3px hoger
   dan de pill. Vaste hoogte, inhoud verticaal gecentreerd. */
.illu-credits-chip,
.illu-buy-credits-header-btn { display: inline-flex; align-items: center; height: 1.75rem; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.illu-buy-credits-header-btn i { line-height: 1; }

.illu-section-inner { max-width: 900px; margin: 0 auto; }
.illu-hint { font-size: 0.85rem; color: #858c97; line-height: 1.5; }

/* Ruimte tussen stap 2/3 en de stap erboven: zonder dit las alles als één
   doorlopende tekst zodra een volgende stap verscheen. */
.illu-step-block { margin-top: 6rem; }

/* Genummerde stap-headers (1/2, of een icoon voor de latere stappen) */
.illu-step-title { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1.75rem; }
.illu-step-title h5 { margin-bottom: .2rem; }

.illu-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #f0f7f4;
    color: #386f5b;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}
.illu-step-number i { font-size: 1rem; }

/* Stijlkeuze: grid i.p.v. flex, schaalt zelf mee naar minder kolommen op smalle schermen */
.illu-style-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.85rem;
}
.illu-style-btn {
    display: flex;
    flex-direction: column;
    border: 2px solid #e3e9ef;
    border-radius: 1rem;
    background: #fff;
    padding: .5rem;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    color: #576071;
    overflow: hidden;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
/* Per-stijl voorbeeldrenders (zelfde stilleven in elke stijl, gegenereerd
   met dezelfde stijlprompts als de boekillustraties) — zie
   STYLE_PREVIEW_IMAGES in ai_illustrations.js. */
.illu-style-preview {
    display: block;
    aspect-ratio: 1;
    border-radius: .6rem;
    background: #f6f9fc;
    margin-bottom: .6rem;
    overflow: hidden;
}
/* Volvlakse stijlrenders (geen padding/contain meer: dat was voor de oude
   sticker-plaatjes met witruimte eromheen). */
.illu-style-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.illu-style-label { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.illu-style-label i { font-size: 1.1rem; color: #448c74; }
.illu-style-btn:hover { border-color: #a9cbbe; transform: translateY(-1px); }
.illu-style-btn.selected { border-color: #448c74; background: #f0f7f4; color: #2f4a3f; box-shadow: 0 .2rem .5rem rgba(68, 140, 116, .15); }

/* Afgeronde stappen vervagen zodat de focus op de huidige stap ligt; hover
   (of focus in een veld, voor toetsenbordgebruik) haalt de vervaging weg
   zodat de stap gewoon bruikbaar blijft. */
.illu-step-faded { opacity: .45; transition: opacity .2s ease; }
.illu-step-faded:hover,
.illu-step-faded:focus-within { opacity: 1; }

/* Zodra stap 2 in beeld komt heeft de stijlkeuze de aandacht niet meer nodig
   en wordt de rij ongeveer half zo hoog, zodat de volgende stap beter
   zichtbaar is. Alleen de hoogte krimpt: het grid (en dus de breedte van de
   knoppen) blijft hetzelfde, de vierkante preview wordt een liggend
   uitsnede-frame van vaste hoogte. */
.illu-style-row.compact .illu-style-btn { padding: .35rem .5rem; }
.illu-style-row.compact .illu-style-preview { aspect-ratio: auto; height: 3.75rem; margin-bottom: .35rem; }
/* object-position: top — de verkleinde (liggende) uitsnede knipt zo alleen
   de onderkant van het vierkante voorbeeld af i.p.v. boven én onder. */
.illu-style-row.compact .illu-style-preview img { object-position: top; }

.illu-char-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: linear-gradient(160deg, #55a68a, #386f5b);
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.illu-cta-btn { padding: .65rem 1.75rem; font-size: 1rem; }

.illu-char-mini {
    /* De kaartjes zijn geen bootstrap .col-*, maar .row > * forceert
       width:100% op ELK direct kind, col-class of niet — zonder deze
       override zou elk kaartje dus de volle breedte van de rij opeisen.
       (Gelijke specificiteit als .row > *, maar later in de cascade, dus dit
       wint sowieso — ook buiten .illu-characters-row-mini om, voor het geval
       er een personage bewerkt wordt en de rij dus terugvalt op gewoon
       wrappen i.p.v. de niet-wrappende mini-modus.) */
    width: auto;
    max-width: none;
    /* Staat een mini-kaartje op dezelfde flex-regel als een volle
       edit-kaart (bewerken van één personage terwijl de rest mini is), dan
       zou het anders meestrekken naar de hoogte van die veel hogere kaart. */
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    border: 1px solid #e3e9ef;
    border-radius: 50rem;
    padding: .35rem .9rem .35rem .35rem;
    background: #fff;
}
.illu-char-mini-img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f6f9fc; }
.illu-char-mini-name { font-weight: 600; font-size: .9rem; }
.illu-char-mini-badge { display: inline-flex; align-items: center; color: #2f9e6f; font-size: .95rem; }
.illu-char-mini-edit { border: none; background: none; color: #9099a6; padding: .2rem; line-height: 1; cursor: pointer; }
.illu-char-mini-edit:hover { color: #448c74; }


/* Iets meer lucht tussen de onderdelen binnen de stappen van de AI-modal:
   de labels boven de blokken in stap 3 en de acties onder de kaarten in
   stap 2 stonden er strak tegenaan, waardoor het geheel druk oogde. */
#ai_generate_section .settings-label { margin-top: .5rem; margin-bottom: .5rem; }
#ai_characters_row { margin-bottom: .75rem; }

/* Onopvallende onthul-knop voor de personage-keuze: leest als een tekstlink,
   niet als actieknop — de meeste gebruikers hoeven hier niets te kiezen.
   Bovenaan uitgelijnd (op dezelfde hoogte als het "Extra aanwijzingen"-label
   ernaast) en rechts in de kolom. */
/* Mini-sluitknopje naast "Wie staan er op deze pagina?": klapt de keuze weer
   in en geeft de regie terug aan het model (characters_explicit -> false). */
.illu-close-characters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .35rem;
    padding: 0;
    border: 1px solid #d7dde2;
    border-radius: 50%;
    background: #fff;
    color: #858c97;
    font-size: .55rem;
    line-height: 1;
    cursor: pointer;
    vertical-align: text-bottom;
    transition: color .15s ease, border-color .15s ease;
}
.illu-close-characters:hover { color: #448c74; border-color: #a9cbbe; }

/* Personage-chips om te selecteren wie er op de pagina staat */
.illu-char-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e3e9ef;
    border-radius: 50rem;
    padding: 0.3rem 0.9rem 0.3rem 0.3rem;
    margin: 0 0.4rem 0.4rem 0;
    cursor: pointer;
    font-weight: 500;
    transition: border-color .15s ease, background-color .15s ease;
}
.illu-char-check:hover { border-color: #a9cbbe; }
.illu-char-check.checked { border-color: #448c74; background: #f0f7f4; color: #2f4a3f; }
.illu-char-check img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.illu-running-info {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #f0f7f4;
    border: 1px solid rgba(68, 140, 116, .25);
    color: #2f4a3f;
    border-radius: .75rem;
    padding: .85rem 1rem;
    font-size: .9rem;
    line-height: 1.5;
}
.illu-running-info .spinner-border { color: #448c74; flex-shrink: 0; }

.illu-buy-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #fff;
    border: 1px solid rgba(68, 140, 116, .3);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
.illu-buy-box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #f0f7f4;
    color: #448c74;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.illu-buy-box-body { flex: 1 1 auto; min-width: 0; }

/* ── Credits-popup ("Genereer voor alle pagina's" met te weinig credits) ──
   Compacte conversie-popup: gradient-icoon, voortgangsbalkje dat toont hoe
   ver je credits reiken, en een uitgelicht aanbod-kader met badge. */
.illu-credits-popup {
    border: 0;
    border-radius: 1.25rem;
    padding: 2.25rem 1.75rem 1.5rem;
    text-align: center;
    box-shadow: 0 1rem 3rem rgba(18, 21, 25, .18);
}
.illu-credits-popup-close { position: absolute; top: 1rem; right: 1rem; z-index: 1; }

.illu-credits-popup-title { color: #2f4a3f; font-weight: 700; margin-bottom: .4rem; }
/* nowrap: de zin moet op één regel blijven (dialog is daarvoor verbreed naar
   35rem); op smalle schermen laten we 'm wél gewoon wrappen i.p.v. overlopen. */
.illu-credits-popup-sub { color: #576071; font-size: .95rem; margin-bottom: 1rem; white-space: nowrap; }
@media (max-width: 575.98px) {
    .illu-credits-popup-sub { white-space: normal; }
}
.illu-credits-progress {
    height: 8px;
    max-width: 15rem;
    margin: 0 auto 1.75rem;
    background: #edf1f5;
    border-radius: 4px;
    overflow: hidden;
}
.illu-credits-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #55a68a, #386f5b);
    border-radius: 4px;
    transition: width .5s ease;
}
.illu-credits-offer {
    position: relative;
    background: #f0f7f4;
    border: 1px solid rgba(68, 140, 116, .3);
    border-radius: 1rem;
    padding: 1.4rem 1.25rem .9rem;
    margin-bottom: 1.25rem;
}
.illu-credits-offer-badge {
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    background: linear-gradient(135deg, #55a68a, #386f5b);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .25rem .7rem;
    border-radius: 50rem;
    box-shadow: 0 .2rem .5rem rgba(56, 111, 91, .35);
}
.illu-credits-offer-amount { font-size: 1.2rem; font-weight: 700; color: #2f4a3f; margin-bottom: .35rem; }
.illu-credits-offer-price { font-weight: 600; color: #448c74; }
.illu-credits-offer p { font-size: .85rem; color: #6b7f77; line-height: 1.55; margin: 0; }
.illu-credits-popup-later {
    display: block;
    margin: .35rem auto 0;
    border: 0;
    background: none;
    color: #858c97;
    font-size: .9rem;
}
.illu-credits-popup-later:hover { color: #576071; }

/* Waarschuwing bij het bewerken van stijl/personages (setup-stap): iets
   wordt opnieuw gegenereerd en dat kan credits kosten. */
.illu-setup-warning {
    background: #fdf6ec;
    border: 1px solid #f0d9a8;
    color: #7a5b1e;
    border-radius: .75rem;
    padding: .9rem 1rem;
}
.illu-setup-warning i { color: #d9a441; }

/* ── Mobiel (de mobile_warning_modal is te sluiten, dus dit blijft nodig) ── */
@media (max-width: 767.98px) {
    
    
    .illu-style-row { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .illu-style-btn { padding: .75rem .35rem; font-size: .8rem; }
    
    
    .illu-cta-btn, #ai_buy_btn { width: 100%; }
    .illu-buy-box { flex-direction: column; align-items: stretch; text-align: center; }
    .illu-buy-box-icon { margin: 0 auto; }
    
    
}

@media (max-width: 420px) {
    .illu-style-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Editor: stage, rail + paneel, pagina-canvas ───────────────────────────
   Boekmaat: het boek krijgt zijn maat via --book-w (gezet door
   rescaleBookArea in book_editor.js; geen scale-transform, want jQuery UI
   (slepen/resizen op de pagina) rekent in schermpixels en zou dan niet meer
   1:1 volgen). Alle vw-maten binnen het boek staan daarom hieronder op
   --bvw (1 "boek-vw" = 1/80 van de boekbreedte). De regels hierboven zijn
   de basis (boek, cover, galerij, AI-onderdelen); wat hieronder staat gaat
   daar overheen. De controlepagina (book_check.html) gebruikt dezelfde
   .book-editor-opmaak, zonder rail en paneel. */

.book-editor {
    --book-w: 960px;
    --bvw: calc(var(--book-w) / 80);
    --panel-w: 24rem;
    --rail-w: 5.5rem;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ── Stage: boek op de volle breedte, rail + paneel als overlay rechts ──
   Het boek staat gecentreerd op dezelfde as als de settings-kaart eronder.
   Rail en paneel hangen absoluut rechts, op de hoogte van de bovenkant van
   het boek (--book-top, gezet door rescaleBookArea). Komt het paneel in de
   weg, dan schuift het boek (én de kaart, via --book-shift) naar links
   zover er ruimte is, en wordt pas daarna kleiner (--book-w). */
.book-editor .editor-stage {
    position: relative;
    padding: 1.75rem 1.5rem 0;
    --book-top: 0px;
    --book-h: 400px;
}
.book-editor { --book-shift: 0px; }
.editor-book-col {
    display: flex;
    flex-direction: column;
}
.book-editor .book-controls { width: auto; margin: 0 auto 1.25rem; }
.editor-book-stage {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.book-editor #book_scale_wrap { transform-origin: top left; will-change: transform; }
/* Settings-kaart direct onder het boek, vaste marge ertussen (blijft op
   zijn plek als het boek voor het paneel opzij schuift). */
.book-editor .settings-card { margin-top: 1.5rem; }
.book-editor.editor-section { padding-bottom: 1.5rem; }

/* ── Boek op --book-w ────────────────────────────────────── */
.book-editor .book {
    width: var(--book-w);
    max-width: none;
    height: calc(var(--book-w) / 2);
    max-height: none;
}
.book-editor .book .page {
    padding: min(calc(4 * var(--bvw)), 65px);
    font-size: min(calc(2 * var(--bvw)), 32.5px);
}
.book-editor .book .page.left::before,
.book-editor .book .page.right::before { width: min(calc(4 * var(--bvw)), 20px); }
.book-editor #hint_click_text { font-size: min(calc(1.2 * var(--bvw)), 19.5px); }
/* ── Tekst van de linkerpagina bewerken ────────────────────
   Het tekstvak vult de pagina (binnen de paginamarge, met ruimte voor de
   actiebalk onderaan) in hetzelfde lettertype, dezelfde grootte en
   uitlijning als de gewone tekst; alleen een zachte stippellijn laat zien
   dat je aan het bewerken bent. De actiebalk zweeft onderaan de pagina. */
.book-editor .book-text-style.is-editing {
    position: absolute;
    top: min(calc(4 * var(--bvw)), 65px);
    left: min(calc(4 * var(--bvw)), 65px);
    right: min(calc(4 * var(--bvw)), 65px);
    bottom: calc(min(calc(4 * var(--bvw)), 65px) + 3.25rem);
    transform: none;
    display: flex;
}
.book-editor #book_text_area {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding: .3em .4em;
    border: 0;
    border-radius: .5rem;
    background: rgba(68, 140, 116, .04);
    outline: 2px dashed rgba(68, 140, 116, .45);
    outline-offset: 4px;
    box-shadow: none;
    resize: none;
    overflow-y: auto;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    color: inherit;
    transition: outline-color .15s ease, background-color .15s ease;
}
.book-editor #book_text_area:focus { outline-color: #448c74; background: rgba(68, 140, 116, .07); }
.book-text-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: min(calc(1.6 * var(--bvw)), 26px);
    display: flex;
    justify-content: center;
    gap: .5rem;
    z-index: 5;
    pointer-events: none;
}
.book-text-actions .btn { pointer-events: auto; font-size: .85rem; padding: .4rem 1.1rem; box-shadow: 0 .35rem 1rem rgba(18, 21, 25, .12); }
.book-editor #book_text_save_button { display: inline-flex; align-items: center; }
.book-text-actions.is-entering { opacity: 0; }
/* De rechterpagina is het canvas: geen tekst-centrering, wel een eigen
   stacking context zodat de lagen (z-index 99+) binnen de pagina blijven. */
.book-editor .book .page.right { text-align: left; isolation: isolate; }

/* ── Cover op --book-w (zelfde reden als het boek: slepen 1:1) ──────── */
.book-editor .cover { margin: 0 auto; width: var(--book-w); max-width: none; height: calc(var(--book-w) / 2); max-height: none; }
.book-editor .cover-col, .book-editor .cover-front-col, .book-editor .cover-spine { height: calc(var(--book-w) / 2); }
.book-editor .cover-spine { max-width: min(var(--bvw), 16.25px) !important; }
.book-editor .cover-col::before, .book-editor .cover-front-col::before { width: min(var(--bvw), 16.25px); }
.book-editor .cover-logo { width: min(calc(6.4 * var(--bvw)), 104px); height: min(calc(6.4 * var(--bvw)), 104px); }
.book-editor #back_cover_credits { width: min(calc(6.4 * var(--bvw)), 104px); height: min(calc(6.4 * var(--bvw)), 104px); left: calc(min(calc(16 * var(--bvw)), 260px) * 1.1); z-index: 2600; }
.book-editor #book_title_placeholder { font-size: min(calc(.74 * var(--bvw)), 12px); }
/* Snijranden en het label erbij blijven boven de lagen (z-index 99+) liggen */
.book-editor .cover::after { z-index: 2500; }
.book-editor .cover::before { z-index: 2501; }

/* Coverkant als canvas: vlak tot de rand (geen eigen stippellijn, de
   snijrand-overlay van .cover is de grens). */
.book-editor .cover-image-wrapper { overflow: hidden; }
.page-canvas.cover-canvas.has-items { outline: none; }

/* ── Pagina-canvas ───────────────────────────────────────── */
/* De rechterpagina heeft geen padding meer: de afbeeldingsmarge
   (image_padding, --page-pad) zit als inset op het canvas. Zo is de hele
   pagina het sleepgebied (containment = de pagina) en mogen lagen tot de
   echte paginarand; de pagina zelf knipt af. Buiten de stippellijn ligt
   het witte masker hieronder. */
.book-editor .book .page.right { --page-pad: 4%; padding: 0; }
.book-editor .book .page.right .page-canvas {
    position: absolute;
    inset: var(--page-pad);
    width: auto;
    height: auto;
}
.page-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
}
/* Wit doorschijnend "gat"-masker: dekt de marge af, laat het canvas vrij.
   Boven de lagen (z 99+), onder de "we tekenen…"-overlay (3000). */
.page-canvas-mask {
    --pp: var(--page-pad);
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .75);
    clip-path: polygon(
        evenodd,
        0 0, 100% 0, 100% 100%, 0 100%, 0 0,
        var(--pp) var(--pp),
        var(--pp) calc(100% - var(--pp)),
        calc(100% - var(--pp)) calc(100% - var(--pp)),
        calc(100% - var(--pp)) var(--pp),
        var(--pp) var(--pp)
    );
    pointer-events: none;
    z-index: 500;
}
.page-canvas-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
/* Stippellijn = drukgebied; alleen zichtbaar zodra er lagen op de pagina
   staan (dan is het relevant dat de marge wordt afgeknipt). */
.page-canvas.has-items { outline: 1.5px dashed rgba(68, 140, 116, .65); outline-offset: -1px; }
/* Label in de marge boven de stippellijn, bóven het masker (z 500) zodat
   het niet vervaagt; past in de 4%-marge (±22px op een pagina van 550px). */
.page-canvas-note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: .2rem;
    text-align: center;
    font-size: min(calc(.85 * var(--bvw)), 12px);
    color: #448c74;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 600;
    transition: opacity .2s ease;
}
.page-canvas.has-items .page-canvas-note { opacity: 1; }
.page-canvas .quality-badge { bottom: .5rem; left: .5rem; z-index: 2000; }

/* Lege pagina: uitnodiging met de twee logische vervolgacties, direct op
   de pagina zelf i.p.v. achter een modal. */
.page-canvas-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    color: #858c97;
    background: #f7f9fc;
    cursor: default;
}
.page-canvas-empty > i { font-size: min(calc(4 * var(--bvw)), 56px); color: #b4bbc3; }
.page-canvas-empty p { margin: 0 0 .5rem; font-size: min(calc(1.3 * var(--bvw)), 18px); font-weight: 500; color: #576071; }
.page-canvas-empty-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.page-canvas-empty-actions .btn { font-size: min(calc(1.1 * var(--bvw)), 15px); }

/* "We tekenen deze pagina": overlay zolang er een AI-job voor deze pagina loopt */
.page-canvas-generating {
    position: absolute;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(6px);
    color: #2f4a3f;
    font-size: min(calc(1.3 * var(--bvw)), 18px);
    font-weight: 500;
    pointer-events: none;
}
.page-canvas-generating .spinner-border { color: #448c74; }

/* Nieuw gezette achtergrond/laag komt even "binnen" (spring vanuit JS zet
   transform/opacity; dit is alleen de startstand). */
.page-canvas-bg.is-entering,
.page-item.is-entering { opacity: 0; }

/* Geselecteerd item: zelfde outline als hover, iets duidelijker */
.book-editor .page-item.selected { outline-color: #448c74; }
/* Laag in de lagenlijst die hoort bij het geselecteerde item */
.editor-layers .list-group-item.active-layer { border-color: #448c74; background: #f0f7f4; }

/* Cover: aangeklikte kant (expliciete keuze) — alleen een klein label,
   geen kader. Het label staat 3 seconden en vervaagt dan; bij een klik op
   de andere kant komt het daar opnieuw (nieuw pseudo-element = nieuwe animatie). */
.book-editor .cover-image-wrapper { cursor: pointer; }
.book-editor .cover-image-wrapper.cover-target::after {
    content: 'Hier komt je volgende foto';
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    background: #448c74;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .75rem;
    border-radius: 50rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2600;
    animation: cover-target-label 3.3s ease forwards;
}
@keyframes cover-target-label {
    0%, 91% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

/* ── Rail: zwevend wit kaartje (zoals bij Greetz, maar rechts) ── */
.editor-rail {
    position: absolute;
    top: var(--book-top);
    right: 1.5rem;
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .5rem .4rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(18, 21, 25, .10), 0 0 0 1px rgba(18, 21, 25, .04);
    z-index: 20;
}
.editor-rail-btn {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .55rem .2rem .45rem;
    border: 0;
    background: transparent;
    border-radius: .8rem;
    color: #576071;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Reactie op pointer-down (niet pas op release): korte, directe
       feedback. */
    transition: transform 100ms ease-out, color .15s ease;
}
.editor-rail-btn:active { transform: scale(.94); }
.editor-rail-btn:focus-visible { outline: 2px solid #448c74; outline-offset: 2px; }
.editor-rail-icon {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    font-size: 1.3rem;
    color: #2f3742;
    transition: background-color .15s ease, color .15s ease;
}
.editor-rail-btn:hover .editor-rail-icon { background: #f3f6f9; }
.editor-rail-btn.active { color: #2f4a3f; }
.editor-rail-btn.active .editor-rail-icon { background: #448c74; color: #fff; }
/* AI: gradient-tegel, zodat de aanbevolen route meteen opvalt */
.editor-rail-btn-ai .editor-rail-icon { background: linear-gradient(160deg, #55a68a, #386f5b); color: #fff; }
.editor-rail-btn-ai:hover .editor-rail-icon { background: linear-gradient(160deg, #5fb496, #3f7d67); }
.editor-rail-btn-ai.active .editor-rail-icon { box-shadow: 0 0 0 3px rgba(68, 140, 116, .25); }
.editor-rail-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em; /* kleine tekst: iets positieve tracking */
    line-height: 1.1;
    white-space: nowrap;
}
.editor-rail-sep { height: 1px; margin: .3rem .5rem; background: #e3e9ef; }
/* Tools die alleen op pagina's werken, in cover-modus */
.editor-rail-btn[disabled] { opacity: .35; cursor: not-allowed; }
.editor-rail-btn[disabled]:active { transform: none; }
.editor-rail-count {
    position: absolute;
    top: -.3rem;
    right: -.3rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .3rem;
    border-radius: 50rem;
    background: #448c74;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.editor-rail-btn.active .editor-rail-count { background: #2f4a3f; }
/* Zachte achtergrond-pil die met een spring (JS) naar de actieve knop
   schuift: één element i.p.v. per-knop achtergrond, zodat de beweging de
   richting van de keuze laat zien. */
.editor-rail-indicator {
    position: absolute;
    left: .4rem;
    right: .4rem;
    top: 0;
    height: 0;
    border-radius: .8rem;
    background: rgba(68, 140, 116, .10);
    opacity: 0;
    pointer-events: none;
    will-change: transform;
}

/* ── Paneel: schuift open vanaf de rail ───────────────────── */
.editor-panel {
    position: absolute;
    top: var(--book-top);
    right: calc(1.5rem + var(--rail-w) + .75rem);
    width: 0;             /* animatie via JS-spring; bepaalt waar het boek voor wijkt */
    /* Zo hoog als de inhoud, maar nooit voorbij de onderkant van het venster
       (--panel-max, JS); een kort paneel (Tekst) eindigt dus bij zijn inhoud. */
    height: var(--panel-max, var(--book-h));
    z-index: 19;
    /* Geen overflow:hidden: de inhoud materialiseert via transform/opacity
       en de schaduw van het kaartje mag buiten de box vallen. */
}
/* Zwevend kaartje, net als de rail: zo hoog als de inhoud, maximaal de
   hoogte van het boek (dan scrollt de body). De inhoud hangt rechts (aan
   de railkant) op vaste breedte en materialiseert van daaruit (schaal +
   opacity vanuit de JS-spring, transform-origin aan de railkant): bij
   openen komt hij vanaf de rail tevoorschijn, bij sluiten verdwijnt hij
   dezelfde kant op. */
.editor-panel-inner {
    position: absolute;
    top: 0;
    right: 0;
    max-height: 100%;
    width: var(--panel-w);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgba(18, 21, 25, .10), 0 0 0 1px rgba(255, 255, 255, .6) inset;
    opacity: 0;           /* via JS mee met de breedte */
    transform-origin: right center;
    will-change: opacity, transform;
    /* Scrollende body (lange panelen zoals AI) binnen de ronde hoeken houden */
    overflow: hidden;
}
.editor-panel-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1rem .7rem 1.4rem;
    border-bottom: 1px solid rgba(227, 233, 239, .9);
    flex-shrink: 0;
}
.editor-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em; /* koppen: licht negatieve tracking */
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor-panel-header-extra { display: none; align-items: center; gap: .4rem; flex-shrink: 0; }
.editor-panel-header-extra.show { display: flex; }
.editor-panel-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #858c97;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease, transform 100ms ease-out;
}
.editor-panel-close:hover { background: #f3f6f9; color: #2f3742; }
.editor-panel-close:active { transform: scale(.9); }
.editor-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.4rem 1.1rem;
    display: flex;
    flex-direction: column;
    /* Zachte rand bovenaan waar de inhoud onder de header doorscrolt */
    mask-image: linear-gradient(to bottom, transparent 0, #000 .6rem, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 .6rem, #000 100%);
}
.editor-panel-section { display: none; }
.editor-panel-section.active { display: block; }
.editor-panel-section-flex.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* ── Paneel: AI (de 3 stappen in een smalle kolom) ─────────── */
.book-editor .illu-section-inner { max-width: none; }
.book-editor .illu-step-block { margin-top: 2.5rem; }
.book-editor .illu-step-title { margin-bottom: 1rem; gap: .65rem; }
.book-editor .illu-step-title h5 { font-size: 1rem; }
.book-editor .illu-style-row { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.book-editor .illu-style-row.compact { grid-template-columns: repeat(3, 1fr); }
.book-editor .illu-style-row.compact .illu-style-label { font-size: .8rem; }
.book-editor #ai_characters_row > .col-md-6 { width: 100%; }

.book-editor .illu-cta-btn { width: 100%; padding: .6rem 1rem; font-size: .95rem; }

/* ── Paneel: AI, algemeen (huisstijl: groen #448c74, radius 1rem,
   koppen gewicht 600, kleine uppercase-labels) ───────────────────────── */
.book-editor .illu-step-title {
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid #eef2f5;
}
.book-editor .illu-step-title h5 { margin: 0; font-size: 1rem; font-weight: 600; color: #2f3742; letter-spacing: -.005em; }
.book-editor .illu-step-number {
    width: 1.9rem;
    height: 1.9rem;
    font-size: .85rem;
    background: linear-gradient(160deg, #55a68a, #386f5b);
    color: #fff;
    box-shadow: 0 .2rem .5rem rgba(56, 111, 91, .3);
}
.book-editor .illu-step-block { margin-top: 2rem; }
.book-editor .illu-step-faded .illu-step-number { background: #d7dde2; box-shadow: none; }
.book-editor .illu-style-btn { border-radius: .9rem; border-width: 1.5px; box-shadow: 0 .15rem .5rem rgba(18, 21, 25, .04); }
.book-editor .illu-style-btn.selected { box-shadow: 0 0 0 3px rgba(68, 140, 116, .15); }
.book-editor .illu-char-mini { border-width: 1.5px; box-shadow: 0 .15rem .5rem rgba(18, 21, 25, .04); }
.book-editor .illu-cta-btn { font-weight: 600; box-shadow: 0 .35rem 1rem rgba(56, 111, 91, .22); }
.book-editor .illu-credits-chip { border-radius: 50rem; }

/* ── Paneel: AI, stap 2 (raster van personages) ─────────── */
.aiv-char-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
/* Ingeklapt (alles goedgekeurd): dezelfde twee kolommen, met compacte kaartjes */
.aiv-char-grid.aiv-char-grid-mini { gap: .6rem; }
.aiv-char-grid-mini .illu-char-mini { width: 100%; min-width: 0; align-self: stretch; }
/* Lange namen lopen door naar een tweede regel i.p.v. direct afgeknipt te worden */
.aiv-char-grid-mini .illu-char-mini-name {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
    line-height: 1.2;
    text-align: left;
}
/* Vinkje en potlood: zelfde vierkant vakje, zelfde icoongrootte, beide
   verticaal gecentreerd, zodat ze precies op één lijn staan. */
.aiv-char-grid-mini .illu-char-mini-badge,
.aiv-char-grid-mini .illu-char-mini-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    font-size: .95rem;
    line-height: 1;
}
.aiv-char-grid-mini .illu-char-mini-badge i,
.aiv-char-grid-mini .illu-char-mini-edit i { display: block; line-height: 1; }
/* Vinkje altijd, potlood pas bij hover of toetsenbordfocus. Verborgen neemt
   het potlood geen ruimte in (breedte 0, de flex-gap teruggenomen), zodat de
   naam die ruimte krijgt; focusbaar blijft het wel. Alleen op apparaten met
   hover: op touch blijft het potlood gewoon staan. */
@media (hover: hover) {
    .aiv-char-grid-mini .illu-char-mini-edit {
        width: 0;
        margin-left: -.5rem;
        overflow: hidden;
        opacity: 0;
        transition: opacity .15s ease;
    }
    .aiv-char-grid-mini .illu-char-mini:hover .illu-char-mini-edit,
    .aiv-char-grid-mini .illu-char-mini-edit:focus-visible { width: 1.25rem; margin-left: 0; opacity: 1; }
}
.aiv-char-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem .75rem .85rem;
    background: #fff;
    border: 1.5px solid #e3e9ef;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 .15rem .5rem rgba(18, 21, 25, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.aiv-char-card:hover { border-color: #d3ddd8; box-shadow: 0 .35rem .9rem rgba(18, 21, 25, .07); }
.aiv-char-circle {
    width: 5.25rem;
    height: 5.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7f4;
    color: #448c74;
    overflow: hidden;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 2px rgba(68, 140, 116, .18);
}
.aiv-char-circle.is-empty { background: linear-gradient(160deg, #f0f7f4, #e3efe9); }
.aiv-char-circle.is-empty span { color: #8fbfab; }
.aiv-char-circle.has-image { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(68, 140, 116, .35); }
.aiv-char-circle.is-generating .spinner-border { width: 2rem; height: 2rem; color: #448c74; }
.aiv-char-circle.is-failed { background: #fdf3f2; color: #c0554b; font-size: 1.6rem; }
.aiv-char-circle.has-image img { width: 100%; height: 100%; object-fit: cover; }
.aiv-char-name { font-weight: 700; font-size: .95rem; color: #2f3742; }
.aiv-char-actions { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2rem; }
.aiv-char-status { font-size: .78rem; color: #858c97; line-height: 1.3; }
.aiv-char-icon-btn {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1px solid #e3e9ef;
    background: #fff;
    color: #576071;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform 100ms ease-out;
}
.aiv-char-icon-btn:hover { background: #f0f7f4; border-color: #a9cbbe; color: #2f4a3f; }
.aiv-char-icon-btn:active { transform: scale(.92); }
.aiv-char-icon-btn-ok { background: #448c74; border-color: #448c74; color: #fff; }
.aiv-char-icon-btn-ok:hover { background: #3a7a64; border-color: #3a7a64; color: #fff; }
/* "Toevoegen": zelfde kaart als de personages, met een plus in het rondje */
.aiv-char-circle.is-add {
    border: 0;
    background: linear-gradient(160deg, #f0f7f4, #e3efe9);
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color .15s ease, transform 100ms ease-out;
}
.aiv-char-circle.is-add:hover { background: #e3efe9; }
.aiv-char-circle.is-add:active { transform: scale(.94); }
/* Zelfde kaartje als de personages, met een plus waar de afbeelding staat */
.aiv-char-mini-add { color: #2f3742; font: inherit; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform 100ms ease-out; }
.aiv-char-mini-add:hover { background: #f0f7f4; border-color: #a9cbbe; }
.aiv-char-mini-add:active { transform: scale(.97); }
.aiv-char-mini-plus { display: inline-flex; align-items: center; justify-content: center; background: #f0f7f4; color: #448c74; }

/* ── Personalisatiescherm ─────────────────────────────────── */
.aiv-char-head { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; padding-bottom: .65rem; border-bottom: 1px solid #eef2f5; }
.aiv-attr-group + .aiv-attr-group { padding-top: .6rem; border-top: 1px solid #f1f4f7; }
#ai_character_footer { margin-top: .5rem; padding-top: .8rem; border-top: 1px solid #eef2f5; }
.aiv-char-head h5 { font-weight: 700; letter-spacing: -.01em; }
.aiv-char-back {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: #f3f6f9;
    color: #2f3742;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, transform 100ms ease-out;
}
.aiv-char-back:hover { background: #e3e9ef; }
.aiv-char-back:active { transform: scale(.9); }
#ai_character_name_input { flex: 1; min-width: 0; font-weight: 700; }
/* Geslacht van een nieuw mens-personage */
.aiv-gender-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.aiv-gender-btn {
    padding: .35rem .85rem;
    border: 1.5px solid #e3e9ef;
    border-radius: 50rem;
    background: #fff;
    color: #2f3742;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, transform 100ms ease-out;
}
.aiv-gender-btn:hover { border-color: #a9cbbe; background: #f0f7f4; }
.aiv-gender-btn:active { transform: scale(.96); }
.aiv-gender-btn.active { border-color: #448c74; background: #448c74; color: #fff; }
/* Drie typekaarten; na de keuze (is-compact) klappen ze in tot chips */
.aiv-type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.aiv-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .6rem .4rem;
    border: 2px solid #e3e9ef;
    border-radius: .9rem;
    background: #fff;
    color: #576071;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform 100ms ease-out, padding .25s ease;
}
.aiv-type-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .6rem; background: #f6f9fc; transition: width .25s ease, height .25s ease; }
.aiv-type-card:hover { border-color: #a9cbbe; }
.aiv-type-card:active { transform: scale(.97); }
.aiv-type-card.active { border-color: #448c74; background: #f0f7f4; color: #2f4a3f; box-shadow: 0 0 0 3px rgba(68, 140, 116, .15); }
.aiv-type-cards.is-compact .aiv-type-card { flex-direction: row; justify-content: center; gap: .4rem; padding: .3rem .6rem; border-radius: 2rem; font-size: .78rem; }
.aiv-type-cards.is-compact .aiv-type-card img { width: 1.6rem; height: 1.6rem; aspect-ratio: auto; border-radius: 50%; }
.aiv-attr-group { margin-bottom: .7rem; }
.aiv-attr-group .settings-label { margin-bottom: .3rem; }
.aiv-swatches .editor-swatch { width: 1.9rem; height: 1.9rem; }
/* Voorbeeldafbeeldingen per optie (gegenereerd met generate_attribute_previews) */
/* 5 per rij en krap, zodat de lange lijsten (13 haarstijlen) niet te veel scroll geven */
.aiv-option-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.aiv-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .25rem .15rem .3rem;
    border: 2px solid #e3e9ef;
    border-radius: .7rem;
    background: #fff;
    color: #576071;
    font-size: .64rem;
    line-height: 1.1;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, transform 100ms ease-out;
}
.aiv-option img, .aiv-option-none { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .45rem; background: #f6f9fc; }
.aiv-option-none { display: flex; align-items: center; justify-content: center; color: #b4bbc3; font-size: 1.3rem; }
.aiv-option-imgonly { padding: .2rem; }
.aiv-option:hover { border-color: #a9cbbe; }
.aiv-option:active { transform: scale(.96); }
.aiv-option.active { border-color: #448c74; background: #f0f7f4; color: #2f4a3f; box-shadow: 0 0 0 2px rgba(68, 140, 116, .15); }
.aiv-swatches .editor-swatch-custom, .aiv-swatches .editor-swatch-custom .asColorPicker-trigger { width: 1.9rem; height: 1.9rem; }

/* ── Stap 3: kaarten ───────────────────────────────────────── */
/* Twee kaarten naast elkaar (Nieuwe / Update); zonder "Update" vult
   "Nieuwe" de rij (is-single-only). "Alles" staat eronder over de volle
   breedte en draagt zijn uitleg in de kaart zelf als hij uitstaat. */
.aiv-mode-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.aiv-mode-cards.is-single-only .aiv-mode-card[data-mode="single"] { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; text-align: left; padding: .75rem .9rem; }
.aiv-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .9rem .6rem .8rem;
    border: 1.5px solid #e3e9ef;
    border-radius: 1rem;
    background: #fff;
    color: #2f3742;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 .15rem .5rem rgba(18, 21, 25, .04);
    transition: border-color .15s ease, background-color .15s ease, transform 100ms ease-out, box-shadow .15s ease;
}
.aiv-mode-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.aiv-mode-card b { font-size: .88rem; line-height: 1.2; letter-spacing: -.005em; }
.aiv-mode-sub { font-size: .72rem; color: #858c97; }
.aiv-mode-reason { font-size: .72rem; color: #7a5b1e; line-height: 1.35; }
.aiv-mode-card-wide { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; text-align: left; gap: .75rem; padding: .7rem .9rem; }
.aiv-mode-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .8rem;
    background: linear-gradient(160deg, #55a68a, #386f5b);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 .25rem .6rem rgba(56, 111, 91, .25);
}
.aiv-mode-card:hover { border-color: #a9cbbe; box-shadow: 0 .35rem .9rem rgba(18, 21, 25, .08); }
.aiv-mode-card:active { transform: scale(.97); }
.aiv-mode-card.active { border-color: #448c74; background: #f0f7f4; box-shadow: 0 0 0 3px rgba(68, 140, 116, .15); }
/* Aanbevolen (= "Alle afbeeldingen" zolang beschikbaar): lint en een zachte achtergrond, geen groene rand */
.aiv-mode-card { position: relative; overflow: visible; }
.aiv-mode-card.is-recommended { background: linear-gradient(180deg, #f6fbf9, #fff 60%); }
.aiv-mode-ribbon { top: -.65rem; right: .75rem; }
.aiv-mode-card.is-disabled, .aiv-mode-card:disabled { cursor: not-allowed; box-shadow: none; transform: none; background: #fbfcfd; border-style: dashed; color: #858c97; }
.aiv-mode-card.is-disabled .aiv-mode-icon { background: #d7dde2; box-shadow: none; }
/* Het formulier hangt als uitklapkaart onder de gekozen kaart */
.aiv-mode-form {
    margin-top: .6rem;
    padding: 1rem 1rem .9rem;
    border: 1.5px solid #c9e0d7;
    border-radius: 1rem;
    background: linear-gradient(180deg, #f6fbf9, #fff 40%);
}
.aiv-mode-form .settings-label { margin-top: .25rem; }
.aiv-mode-form .form-control { background: #fff; }
.aiv-mode-form .illu-cta-btn { margin-top: .25rem; }

/* ── Vergroten (zoom-overlay) ─────────────────────────────── */
.aiv-zoom { position: fixed; inset: 0; z-index: 1300; visibility: hidden; --p: 0; --maat: min(70vh, 70vw, 640px); --verschuif: 0px; }
/* Met de knoppenbalk eronder: iets kleiner en iets omhoog, zodat alles in beeld past */
.aiv-zoom.heeft-acties { --maat: min(60vh, 70vw, 560px); --verschuif: -2.75rem; }
.aiv-zoom-backdrop { position: absolute; inset: 0; background: rgba(18, 21, 25, calc(.55 * var(--p))); backdrop-filter: blur(calc(6px * var(--p))); }
.aiv-zoom-img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--maat);
    height: var(--maat);
    margin: calc(-1 * var(--maat) / 2 + var(--verschuif)) 0 0 calc(-1 * var(--maat) / 2);
    border-radius: 1.25rem;
    object-fit: cover;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
    opacity: 0;
    will-change: transform, opacity;
    cursor: zoom-out;
}

/* Knoppenbalk onder het vergrote personage: komt mee op dezelfde vering als
   het beeld (--p van 0 naar 1), een fractie later en van iets lager. */
.aiv-zoom-acties {
    position: absolute; left: 50%; top: calc(50% + var(--maat) / 2 + var(--verschuif) + 1.1rem);
    display: flex; flex-direction: column; align-items: center; gap: .7rem;
    opacity: clamp(0, calc(var(--p) * 2 - 1), 1);
    transform: translate(-50%, calc((1 - var(--p)) * 14px));
}
.aiv-zoom-naam { color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.aiv-zoom-knoppen { display: flex; gap: .6rem; }
.aiv-zoom-knoppen .btn { font-weight: 600; padding: .55rem 1.25rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .2); transition: transform .1s ease-out, background-color .15s ease; }
.aiv-zoom-knoppen .btn:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
    .aiv-zoom-acties { transform: translateX(-50%); }
    .aiv-zoom-knoppen .btn:active { transform: none; }
}

/* ── Paneel: Foto's ───────────────────────────────────────── */
.editor-upload-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    margin-bottom: 1rem;
    border: 1.5px dashed #c9d5cf;
    border-radius: .9rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform 100ms ease-out;
}
.editor-upload-card:hover { border-color: #448c74; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06); }
.editor-upload-card:active { transform: scale(.985); }
.editor-upload-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .7rem;
    background: #f0f7f4;
    color: #448c74;
    font-size: 1.15rem;
}
.editor-upload-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.editor-upload-text b { font-size: .9rem; color: #2f3742; }
.editor-upload-text span { font-size: .78rem; color: #858c97; }
.editor-gallery-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.editor-sort-btn { font-size: .72rem; padding: .25rem .65rem; }
.editor-gallery .gallery-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.editor-gallery .zoom-effect-wrapper { cursor: pointer; }
.editor-gallery .illu-page-pill { top: 6px; left: 6px; font-size: .62rem; padding: .15rem .5rem; }
.editor-gallery .gallery-delete-btn { top: 6px; right: 6px; }
.gallery-layer-btn {
    position: absolute;
    right: 6px;
    bottom: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-in-out;
}
.zoom-effect-wrapper:hover .gallery-layer-btn { opacity: 1; pointer-events: auto; }
/* ── Paginakiezer (klik op het paginanummer) ──────────────── */
.book-editor #book_page_indicator { pointer-events: auto; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform 100ms ease-out; }
.book-editor #book_page_indicator:hover { background: #f0f7f4; color: #2f4a3f; }
.book-editor #book_page_indicator:active { transform: scale(.94); }
.book-editor #book_page_indicator[aria-expanded="true"] { background: #448c74; color: #fff; border-color: #448c74; }
.book-editor #book_page_indicator[disabled] { pointer-events: none; }
.editor-page-picker {
    position: fixed;
    z-index: 1200;
    padding: .5rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius: .9rem;
    box-shadow: 0 .75rem 2rem rgba(18, 21, 25, .16), 0 0 0 1px rgba(18, 21, 25, .05);
    transform-origin: 50% 0;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}
.editor-page-picker-grid { display: grid; grid-template-columns: repeat(4, 2.4rem); gap: .35rem; }
.editor-page-picker-btn {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #e3e9ef;
    border-radius: .65rem;
    background: #fff;
    color: #2f3742;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform 100ms ease-out;
}
.editor-page-picker-btn:hover { background: #f0f7f4; border-color: #a9cbbe; }
.editor-page-picker-btn:active { transform: scale(.92); }
.editor-page-picker-btn.is-current { background: #448c74; border-color: #448c74; color: #fff; }
@media (prefers-reduced-transparency: reduce) {
    .editor-page-picker { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Plusje blijft zichtbaar zolang zijn menu open staat */
.zoom-effect-wrapper .gallery-layer-btn.is-open { opacity: 1; pointer-events: auto; }
/* Keuzemenu bij het plusje: bloeit op vanuit de knop (origin rechtsonder) */
.editor-gallery-menu {
    position: fixed;
    z-index: 1200;
    min-width: 15rem;
    padding: .4rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius: .9rem;
    box-shadow: 0 .75rem 2rem rgba(18, 21, 25, .16), 0 0 0 1px rgba(18, 21, 25, .05);
    transform-origin: 100% 100%;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}
.editor-gallery-menu-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .55rem .65rem;
    border: 0;
    border-radius: .6rem;
    background: transparent;
    text-align: left;
    color: #2f3742;
    cursor: pointer;
    transition: background-color .12s ease, transform 100ms ease-out;
}
.editor-gallery-menu-item:hover { background: #f0f7f4; }
.editor-gallery-menu-item:active { transform: scale(.97); }
.editor-gallery-menu-item > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.editor-gallery-menu-item b { font-size: .9rem; }
.editor-gallery-menu-item small { font-size: .74rem; color: #858c97; }
.editor-gallery-menu-icon {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    background: #f0f7f4;
    color: #448c74;
    font-size: 1rem;
}
@media (prefers-reduced-transparency: reduce) {
    .editor-gallery-menu { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.editor-gallery-empty { padding: 2rem 1rem; }
.editor-gallery-empty i { font-size: 2.25rem; margin-bottom: .5rem; }
.editor-gallery-empty h5 { font-size: 1rem; }
.editor-gallery-empty p { font-size: .85rem; }
.book-editor .gallery .book-image-selector { padding-left: .25rem; padding-right: .25rem; }

/* ── Paneel: Stickers ─────────────────────────────────────── */
.book-editor #sticker_themes { flex: 1 1 auto; min-height: 0; }
.book-editor .sticker-theme-row { height: auto; max-height: 24rem; }
.book-editor .sticker-by-theme { height: auto; max-height: 24rem; }
.book-editor .sticker-by-theme .col-4 { padding: .2rem; }

/* ── Paneel: Tekst ────────────────────────────────────────── */
/* Compact genoeg om zonder scrollen in het paneel te passen (paneel is
   maximaal zo hoog als het boek): kleiner voorbeeld, krappe labels. */
.editor-text-panel .settings-label { margin: .65rem 0 .3rem; }
.editor-text-panel .settings-label:first-of-type { margin-top: .85rem; }
/* Voorbeeld als een stukje "papier": witte kaart met zachte schaduw, de
   tekst in het gekozen lettertype en de gekozen kleur. */
.editor-text-preview {
    padding: .7rem 1rem;
    min-height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 .25rem .9rem rgba(18, 21, 25, .06), 0 0 0 1px rgba(18, 21, 25, .05);
    font-size: 1.6rem;
    line-height: 1.15;
    word-break: break-word;
    color: #000;
    transition: color .15s ease;
}
/* Leeg: alleen een klein, gedempt label "Voorbeeld" (geen invoerveld-look) */
.editor-text-preview.is-placeholder { color: #b0b6c0; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-family: inherit !important; }
.editor-text-actions { margin-top: .85rem; }
.editor-text-swatches .editor-swatch, .editor-text-swatches .editor-swatch-custom, .editor-text-swatches .editor-swatch-custom .asColorPicker-trigger { width: 1.9rem; height: 1.9rem; }
.editor-text-actions .btn-link { margin-top: .15rem; padding: .25rem; font-size: .85rem; }
.book-editor #text_value { font-size: 1rem; padding: .5rem .85rem; }
/* De FontPicker-dropdown (zelfde component als onder het boek) klapt hier
   naar beneden uit; de panel-body scrollt mee. Breedte = paneelbreedte. */
.editor-text-fontpicker #font-picker-textlayer { width: 100%; }
.editor-text-fontpicker #font-picker-textlayer .dropdown-button { width: 100%; }
/* Ingeklapt houdt de plugin de lijst op max-height 0; alleen open (.expanded) hoger dan de standaard 200px. */
.editor-text-fontpicker #font-picker-textlayer.expanded ul { max-height: 16rem; }

.editor-text-swatches { align-items: center; }
/* Eigen-kleur-knop: de asColorPicker-trigger als swatch met een
   kleurenwiel-achtergrond, zodat 'ie tussen de andere swatches past. */
.editor-swatch-custom { position: relative; width: 2.1rem; height: 2.1rem; }
.editor-swatch-custom .asColorPicker-wrap { position: absolute; inset: 0; }
.editor-swatch-custom .asColorPicker-trigger {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 0;
    padding: 0;
    overflow: hidden;
    background: conic-gradient(#f44, #fa0, #ff4, #4d4, #4cf, #44f, #f4f, #f44);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
    cursor: pointer;
}
.editor-swatch-custom .asColorPicker-trigger span { display: none; }
.editor-swatch-custom.active .asColorPicker-trigger { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 2px #fff, 0 0 0 4px #448c74; }

/* ── Vraagteken-uitleg (tooltip) naast koppen ─────────────── */
.editor-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .35rem;
    padding: 0;
    border: 1px solid #c9d5cf;
    border-radius: 50%;
    background: #fff;
    color: #858c97;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
    transition: color .15s ease, border-color .15s ease, transform 100ms ease-out;
}
.editor-help:hover { color: #448c74; border-color: #448c74; }
.editor-help:active { transform: scale(.9); }
.book-editor .tooltip-inner { max-width: 18rem; text-align: left; font-size: .8rem; line-height: 1.5; padding: .6rem .8rem; }

/* ── Paneel: Achtergrond ──────────────────────────────────── */
.editor-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.editor-swatch {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: transform 100ms ease-out, box-shadow .15s ease;
}
.editor-swatch:hover { transform: scale(1.08); }
.editor-swatch:active { transform: scale(.94); }
.editor-swatch.active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 2px #fff, 0 0 0 4px #448c74; }
/* Kleurkeuze geblokkeerd (achtergrondafbeelding aanwezig) */
.editor-swatches.is-disabled { opacity: .4; pointer-events: none; }
.editor-swatches.is-disabled .editor-swatch, .editor-swatches.is-disabled .editor-swatch-custom .asColorPicker-trigger { cursor: not-allowed; }
/* Hex-invoer in de kleurkiezer-popup (mode 'complex') in de huisstijl */
.asColorPicker-dropdown .asColorPicker-hex { font-family: "Roboto Mono", monospace; font-size: .8rem; border: 1px solid #e3e9ef; border-radius: .4rem; padding: .25rem .5rem; }
.editor-bg-image-box {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid #e3e9ef;
    border-radius: .9rem;
    background: #fff;
}
.editor-bg-image-thumb { width: 4rem; height: 4rem; border-radius: .6rem; object-fit: cover; flex-shrink: 0; background: #f6f9fc; }
.editor-bg-image-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }

/* ── Paneel: Lagen ────────────────────────────────────────── */
.book-editor #page_layers { overflow-y: visible; height: auto; }
.editor-layers .list-group-item { font-size: .85rem; padding: .5rem .75rem; }
.editor-layers .list-group-item .btn-sm { padding: .2rem .45rem; }
.editor-layers-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #858c97;
    font-size: .85rem;
    border: 2px dashed #d7dde2;
    border-radius: .9rem;
}
.editor-layers-empty i { font-size: 1.75rem; color: #b4bbc3; }
.editor-layers-empty.show { display: flex; }

/* ── Verminderde beweging / transparantie ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .editor-rail-btn, .editor-rail-btn:active, .editor-swatch:hover, .editor-swatch:active,
    .editor-upload-card:active, .editor-panel-close:active { transform: none; transition: none; }
    .editor-panel-inner { transition: opacity 200ms ease; }
}
@media (prefers-reduced-transparency: reduce) {
    .editor-panel-inner { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .page-canvas-generating { backdrop-filter: none; background: rgba(255, 255, 255, .95); }
}

/* ── Controlepagina (book_check.html) ────────────────────────
   Zelfde boek en cover als de editor, maar alleen-lezen: geen klik-cursor,
   en een lege pagina is een rustige melding (zonder actieknoppen). */
.book-check .book .page,
.book-check .cover-image-wrapper { cursor: default; }
.book-check .page-canvas-empty { background: #f7f9fc; }

/* ── Leesniveau en tekst die niet past ───────────────────────
   --tekst-schaal (1, 1,25 of 1,4) komt uit het leesniveau (applyLeesniveau
   in book_editor.js); de drukstraat schaalt de letter op dezelfde manier. */
.book-editor .book .page.left .book-text-style { font-size: calc(1em * var(--tekst-schaal, 1)); }
.book-text-overflow {
    position: absolute;
    left: 50%;
    top: min(calc(1.2 * var(--bvw, 12px)), 18px);
    transform: translateX(-50%);
    z-index: 6;
    max-width: 90%;
    padding: .3rem .8rem;
    border-radius: 50rem;
    background: #fdf6ec;
    border: 1px solid #f0d9a8;
    color: #7a5b1e;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
}
.book-text-overflow .btn-link { color: #7a5b1e; font-size: .8rem; font-weight: 700; vertical-align: baseline; }

/* ── "Genereer tekst opnieuw" ─────────────────────────────── */
.regen-modal .modal-content { border: 0; border-radius: 1.1rem; }
.regen-modal .modal-header { border-bottom: 1px solid #eef2f5; padding: 1.1rem 1.5rem; }
.regen-modal .modal-title { font-weight: 700; }
.regen-modal .modal-body { padding: 1.5rem; }
.regen-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.regen-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    padding: 1rem;
    text-align: left;
    background: #fff;
    border: 1.5px solid #e3e9ef;
    border-radius: 1rem;
    color: #2f3742;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform 100ms ease-out;
}
.regen-card:hover { border-color: #a9cbbe; box-shadow: 0 .35rem .9rem rgba(18, 21, 25, .07); color: #2f3742; }
.regen-card:active { transform: scale(.98); }
.regen-card.active { border-color: #448c74; box-shadow: 0 0 0 3px rgba(68, 140, 116, .15); }
.regen-card.disabled { opacity: .5; pointer-events: none; }
.regen-card b { font-size: .95rem; }
.regen-card small { color: #6b7280; font-size: .8rem; line-height: 1.35; }
.regen-card-icon { width: 2.2rem; height: 2.2rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; background: #f0f7f4; color: #448c74; font-size: 1.05rem; }
.regen-form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #eef2f5; }
.regen-form textarea { border-radius: .75rem; }
.regen-level { margin-top: 1rem; }
.regen-level-chips { display: flex; gap: .4rem; margin-bottom: .35rem; }
.regen-chip { border: 1.5px solid #e3e9ef; background: #fff; border-radius: 50rem; padding: .3rem .9rem; font-size: .85rem; font-weight: 600; color: #2f3742; }
.regen-chip.active { border-color: #448c74; background: #448c74; color: #fff; }
.regen-note { font-size: .82rem; color: #6b7280; margin: .5rem 0 0; }
.regen-warn { color: #9a6a12; }
.regen-busy { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; color: #2f4a3f; font-weight: 600; }
@media (max-width: 767.98px) { .regen-cards { grid-template-columns: minmax(0, 1fr); } }

/* ── AI stap 2: "Jouw personages" en "Gevonden in je verhaal" ── */
.aiv-block-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.aiv-char-desc { font-size: .75rem; color: #858c97; line-height: 1.3; margin-top: -.25rem; }
.aiv-found-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .7rem; margin-top: .1rem; }
.aiv-link-btn { border: 0; background: none; padding: 0; font-size: .75rem; font-weight: 600; color: #858c97; }
.aiv-link-btn:hover { color: #2f4a3f; text-decoration: underline; }
.aiv-merge-select { font-size: .8rem; border-radius: .6rem; max-width: 100%; }
.aiv-scanning { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; font-size: .85rem; color: #576071; }
.aiv-scanning .spinner-border { color: #448c74; }
.aiv-step2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.aiv-cost-hint { flex-basis: 100%; font-size: .78rem; color: #9a6a12; }

/* ── Paneel: AI, stap 2 (chips) ─────────────────────────────
   Personages en voorwerpen als compacte chips in twee kolommen. De status is
   in één oogopslag te lezen:
   - nog te maken: stippelrand, lichte achtergrond, potlood of doosje en
     "Nog maken"; een leeg personage is als geheel een knop;
   - bezig/mislukt: rondje of driehoekje met een korte regel;
   - klaar: volle rand, het voorbeeld en een vinkje om goed te keuren;
   - goedgekeurd: groene rand en een vinkje op het avatar.
   Beweging volgens de Apple-richtlijnen: feedback direct bij indrukken,
   kritisch gedempt (geen doorschieten), alleen bij een echte statuswissel
   (.is-veranderd), en bij prefers-reduced-motion alleen overvloeien. */
.aiv-chip {
    --chip-bg: #fff;  /* achtergrond, ook onder het hover-laagje */
    position: relative; font: inherit; color: #2f3742; text-align: left;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .1s ease-out;
}
.aiv-chip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.aiv-chip-text .illu-char-mini-name { flex: none; width: 100%; }
.aiv-chip-tag { font-size: .68rem; font-weight: 600; color: #6b7280; line-height: 1.2; margin-top: .1rem; }

/* Nog te maken: duidelijk "leeg" */
.aiv-chip.is-none { --chip-bg: #fafcfb; border-style: dashed; border-color: #c9d6cf; background: var(--chip-bg); box-shadow: none; }
.aiv-chip.is-none .aiv-chip-tag { color: #448c74; }
.aiv-chip-leeg { display: inline-flex; align-items: center; justify-content: center; background: #f0f7f4; color: #448c74; font-size: .9rem; }
/* Klaar en goedgekeurd: "gemaakt" */
.aiv-chip.is-ready { border-color: #cfe3da; }
.aiv-chip.is-approved { --chip-bg: #f7fbf9; border-color: #a9d3c0; background: var(--chip-bg); }
.aiv-chip.is-approved .aiv-chip-tag { color: #2f9e6f; }
.aiv-chip.is-failed { border-color: #f3c7c5; }
.aiv-chip.is-failed .aiv-chip-tag { color: #c0392b; }
.aiv-chip-state { display: inline-flex; align-items: center; justify-content: center; color: #448c74; background: #f0f7f4; }
.aiv-chip-state.is-failed { color: #d9534f; background: #fdf0ef; }
.aiv-chip-zoom { position: relative; border: 0; padding: 0; background: none; border-radius: 50%; flex-shrink: 0; cursor: zoom-in; line-height: 0; }
.aiv-chip-badge {
    position: absolute; right: -.2rem; bottom: -.2rem; width: 1rem; height: 1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: #2f9e6f; color: #fff;
    font-size: .55rem; box-shadow: 0 0 0 2px #fff;
}

/* Knoppen in de chip */
.aiv-chip-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%; border: 1.5px solid transparent;
    background: transparent; color: #9099a6; font-size: .8rem; line-height: 1; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, transform .1s ease-out;
}
.aiv-chip-btn i { display: block; line-height: 1; }
.aiv-chip-btn:active { transform: scale(.88); }
.aiv-chip-redo:hover { color: #448c74; background: #f0f7f4; }
.aiv-chip-remove { font-size: .65rem; }
.aiv-chip-remove:hover { color: #d9534f; background: #fdf0ef; }

/* Toevoegen: bewust uitgegrijsd, maar wel bruikbaar */
.aiv-chip-add { border-style: dashed; border-color: #dfe5ea; background: transparent; box-shadow: none; color: #9099a6; cursor: pointer; }
.aiv-chip-add .aiv-chip-leeg { background: #f3f5f7; color: #9099a6; }
.aiv-chip-add .illu-char-mini-name { font-weight: 600; }

/* Hover en indrukken (alleen op apparaten met hover; op touch staan de knoppen er gewoon) */
@media (hover: hover) {
    .aiv-chip.is-klikbaar, .aiv-chip-add { cursor: pointer; }
    .aiv-chip.is-klikbaar:hover { --chip-bg: #f0f7f4; border-color: #8fbfab; background: var(--chip-bg); box-shadow: 0 .25rem .75rem rgba(56, 111, 91, .12); }
    .aiv-chip.is-klikbaar.is-approved:hover { --chip-bg: #eef7f2; }
    .aiv-chip-add:hover { border-color: #b9c6bf; color: #448c74; background: #fafcfb; }
    .aiv-chip-add:hover .aiv-chip-leeg { background: #f0f7f4; color: #448c74; }
    .aiv-chip.is-ready:hover, .aiv-chip.is-approved:hover, .aiv-chip.is-failed:hover { box-shadow: 0 .25rem .75rem rgba(18, 21, 25, .08); }
    /* Opnieuw maken en verwijderen: een laagje over de rechterrand, met een
       zachte overgang in de chipkleur, pas zichtbaar bij hover of focus. Het
       neemt geen plek in de rij in, dus de tekst verspringt nooit. */
    .aiv-chip-zweef {
        position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
        display: flex; align-items: center; gap: .1rem; padding-left: 1rem; border-radius: 50rem;
        background: linear-gradient(90deg, transparent, var(--chip-bg) .9rem);
        opacity: 0; pointer-events: none; transition: opacity .15s ease;
    }
    .aiv-chip:hover .aiv-chip-zweef, .aiv-chip-zweef:focus-within, .aiv-chip.is-failed .aiv-chip-zweef { opacity: 1; pointer-events: auto; }
    .aiv-chip-zoom img { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
    .aiv-chip-zoom:hover img { transform: scale(1.08); }
}
.aiv-chip.is-klikbaar:active, .aiv-chip-add:active { transform: scale(.97); }

/* Statuswissel: het nieuwe voorbeeld "materialiseert" (schaal en dekking samen,
   kritisch gedempt), goedkeuren laat het vinkje opkomen, bezig ademt rustig. */
.aiv-chip.is-veranderd .illu-char-mini-img, .aiv-chip.is-veranderd .aiv-chip-zoom img { animation: aiv-materialiseer .42s cubic-bezier(.2, .9, .3, 1) both; }
.aiv-chip.is-veranderd .aiv-chip-badge { animation: aiv-materialiseer .32s .12s cubic-bezier(.2, .9, .3, 1) both; }
.aiv-chip.is-veranderd { animation: aiv-chip-in .42s cubic-bezier(.2, .9, .3, 1) both; }
.aiv-chip-state.is-bezig { animation: aiv-adem 1.6s ease-in-out infinite; }
@keyframes aiv-materialiseer { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes aiv-chip-in { from { background-color: #e6f2ec; } }
@keyframes aiv-adem { 50% { background-color: #dcece4; } }
@media (prefers-reduced-motion: reduce) {
    .aiv-chip, .aiv-chip-btn, .aiv-chip-zoom img { transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; }
    .aiv-chip.is-klikbaar:active, .aiv-chip-add:active, .aiv-chip-btn:active, .aiv-chip-zoom:hover img { transform: none; }
    .aiv-chip.is-veranderd, .aiv-chip.is-veranderd .illu-char-mini-img, .aiv-chip.is-veranderd .aiv-chip-zoom img,
    .aiv-chip.is-veranderd .aiv-chip-badge { animation: aiv-overvloei .25s ease both; }
    .aiv-chip-state.is-bezig { animation: none; }
}
@keyframes aiv-overvloei { from { opacity: 0; } to { opacity: 1; } }

/* Meldingen in het AI-paneel komen zacht in beeld (dekking en een paar pixels
   omhoog, kritisch gedempt), op de plek van de actie die ze veroorzaakte. */
.illu-setup-warning.is-nieuw { animation: aiv-melding-in .32s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes aiv-melding-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .illu-setup-warning.is-nieuw { animation: aiv-overvloei .2s ease both; }
}

/* Voorwerp toevoegen of opnieuw maken: alleen naam en extra details */
#ai_character_view.is-voorwerp .aiv-alleen-personage,
#ai_character_view.is-voorwerp #ai_character_gender,
#ai_character_view.is-voorwerp #ai_attr_fields { display: none !important; }
#ai_character_view.is-voorwerp #ai_character_footer { margin-top: 1rem; }

/* ── Paneel: AI, stappen in- en uitklappen ───────────────────
   De kop is de knop (met een pijltje dat meedraait); ingeklapt toont hij een
   samenvatting. De inhoud veert in hoogte (Spring in ai_illustrations.js) en
   vervaagt mee; de kop krijgt bij hover een lichte achtergrond. */
.aiv-stap-kop { cursor: pointer; border-radius: .9rem; margin: -.4rem -.5rem .6rem; padding: .4rem .5rem; align-items: center !important;
    transition: background-color .15s ease; -webkit-tap-highlight-color: transparent; }
.aiv-stap-kop:focus-visible { outline: 2px solid #448c74; outline-offset: 2px; }
.aiv-stap-kop:active { background: #eef4f1; }
.aiv-stap-kop-tekst { flex: 1; min-width: 0; }
.aiv-stap-pijl { color: #9099a6; font-size: 1rem; transition: transform .3s cubic-bezier(.2, .9, .3, 1), color .15s ease; }
.aiv-stap.is-ingeklapt .aiv-stap-pijl { transform: rotate(-90deg); }
.aiv-stap-samenvatting { display: none; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: #448c74; margin-top: .15rem; }
.aiv-stap.is-ingeklapt .aiv-stap-samenvatting { display: flex; }
.aiv-stap.is-ingeklapt .illu-step-number { background: #e3eee9; color: #448c74; box-shadow: none; }
/* Voltooide stap: titel uitgegrijsd (de samenvatting blijft groen); bij hover weer donker */
.book-editor .aiv-stap.is-voltooid .illu-step-title h5 { color: #8a939d; transition: color .15s ease; }
@media (hover: hover) {
    .book-editor .aiv-stap.is-voltooid .aiv-stap-kop:hover h5 { color: #2f3742; }
}
/* Ingeklapt is alleen de kop over: minder ruimte eronder en tot de volgende stap */
.aiv-stap.is-ingeklapt .aiv-stap-kop { margin-bottom: 0; }
.book-editor .aiv-stap.is-ingeklapt + .illu-step-block { margin-top: .75rem; }
.aiv-stap-inhoud { transition: opacity .22s ease; }
.aiv-stap.is-ingeklapt .aiv-stap-inhoud { opacity: 0; }
@media (hover: hover) {
    .aiv-stap-kop:hover { background: #f4f8f6; }
    .aiv-stap-kop:hover .aiv-stap-pijl { color: #448c74; }
}
@media (prefers-reduced-motion: reduce) {
    .aiv-stap-pijl, .aiv-stap-inhoud { transition: none; }
}

/* Ingeklapte stappen, minimalistisch: één rustige regel per stap (vinkje +
   korte samenvatting), samen in één lichtgrijs blok. Titel, ?-knopje en
   nummer komen terug zodra je de stap openklapt; de pijl alleen bij hover. */
.book-editor .aiv-stap.is-ingeklapt .aiv-stap-kop {
    margin: 0; padding: .55rem .8rem; border-radius: 0; background: #f6f8f9; gap: .6rem !important;
}
.book-editor .aiv-stap.is-ingeklapt .aiv-stap-kop h5 { display: none; }
.book-editor .aiv-stap.is-ingeklapt .illu-step-number {
    width: 1.15rem; height: 1.15rem; min-width: 1.15rem; font-size: 0; box-shadow: none;
    background: #dcebe4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23448c74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.book-editor .aiv-stap.is-ingeklapt .aiv-stap-samenvatting { margin: 0; font-size: .82rem; font-weight: 600; color: #5f6b76; }
.book-editor .aiv-stap.is-ingeklapt .aiv-stap-pijl { opacity: 0; font-size: .85rem; transition: opacity .15s ease, transform .3s cubic-bezier(.2, .9, .3, 1); }
/* Twee ingeklapte stappen direct onder elkaar vormen één blok met afgeronde hoeken */
.book-editor .aiv-stap.is-ingeklapt + .aiv-stap.is-ingeklapt { margin-top: 1px !important; }
.book-editor .aiv-stap.is-ingeklapt:not(.is-ingeklapt + .is-ingeklapt) .aiv-stap-kop { border-top-left-radius: .8rem; border-top-right-radius: .8rem; }
.book-editor .aiv-stap.is-ingeklapt:not(:has(+ .aiv-stap.is-ingeklapt)) .aiv-stap-kop { border-bottom-left-radius: .8rem; border-bottom-right-radius: .8rem; }
@media (hover: hover) {
    .book-editor .aiv-stap.is-ingeklapt .aiv-stap-kop:hover { background: #eef3f1; }
    .book-editor .aiv-stap.is-ingeklapt .aiv-stap-kop:hover .aiv-stap-pijl { opacity: 1; }
    .book-editor .aiv-stap.is-ingeklapt .aiv-stap-kop:hover .aiv-stap-samenvatting { color: #2f3742; }
}
.book-editor .aiv-stap.is-ingeklapt .aiv-stap-kop:focus-visible .aiv-stap-pijl { opacity: 1; }

/* Kop van een stap: open en ingeklapt exact dezelfde maat en positie (zelfde
   binnenruimte, minimale hoogte, rondje van 1,75rem op dezelfde plek), zodat
   er bij in- en uitklappen niets verspringt; alleen de inhoud (titel of
   samenvatting) en de achtergrond wisselen. Stap 3 heeft dezelfde kop. */
.book-editor .aiv-stap .aiv-stap-kop,
.book-editor #ai_generate_section .illu-step-title {
    min-height: 2.9rem; margin: 0 0 .75rem; padding: .5rem .8rem; gap: .7rem !important;
    border: 0; border-radius: .8rem; align-items: center !important; box-sizing: border-box;
}
.book-editor .aiv-stap.is-ingeklapt .aiv-stap-kop { margin-bottom: 0; padding: .5rem .8rem; }
.book-editor .aiv-stap .illu-step-number,
.book-editor #ai_generate_section .illu-step-number { width: 1.75rem; height: 1.75rem; min-width: 1.75rem; }
.book-editor .aiv-stap.is-ingeklapt .illu-step-number { width: 1.75rem; height: 1.75rem; min-width: 1.75rem; background-size: 55%; }
.book-editor .aiv-stap .aiv-stap-kop h5,
.book-editor #ai_generate_section .illu-step-title h5 { font-size: .95rem; line-height: 1.3; }
.book-editor .aiv-stap.is-ingeklapt .aiv-stap-samenvatting { font-size: .95rem; line-height: 1.3; }
/* Ruimte tussen stappen veert mee i.p.v. te verspringen */
.book-editor .aiv-stap, .book-editor #ai_generate_section { transition: margin-top .3s cubic-bezier(.2, .9, .3, 1); }
@media (prefers-reduced-motion: reduce) {
    .book-editor .aiv-stap, .book-editor #ai_generate_section { transition: none; }
}

/* "Afbeelding voor deze pagina": de kaart is de knop (klik = genereren), met
   rechts een tandwiel. Geen drukeffect op de hele kaart: alleen de kop en het
   tandwiel reageren, elk op zichzelf. */
.aiv-kaart-pagina { cursor: default; padding: .45rem .5rem .45rem .45rem !important; gap: .35rem !important; align-items: center !important; }
.aiv-kaart-pagina:active { transform: none !important; }
.aiv-kaart-pagina.is-inactief { cursor: pointer; }
.aiv-kaart-kop { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; text-align: left; cursor: pointer;
    padding: .3rem .45rem .3rem .3rem; border-radius: .7rem; transition: background-color .15s ease, transform .1s ease-out; }
.aiv-kaart-kop:focus-visible { outline: 2px solid #448c74; outline-offset: 2px; }
.aiv-kaart-kop:active { transform: scale(.98); background: #e6f2ec; }
.aiv-kaart-kop .aiv-mode-icon { transition: transform .2s cubic-bezier(.2, .9, .3, 1); }
@media (hover: hover) {
    .aiv-kaart-kop:hover { background: #f0f7f4; }
    .aiv-kaart-kop:hover .aiv-mode-icon { transform: scale(1.06); }
}
.aiv-kaart-pagina.is-bezig .aiv-kaart-kop { cursor: default; opacity: .6; pointer-events: none; }

/* Tandwiel; het stipje betekent: deze pagina heeft een eigen prompt of keuze */
.aiv-kaart-instellingen {
    position: relative; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    border: 1px solid transparent; background: transparent; color: #858c97; font-size: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease-out;
}
.aiv-kaart-instellingen i { transition: transform .35s cubic-bezier(.2, .9, .3, 1); }
.aiv-kaart-instellingen:active { transform: scale(.92); }
.aiv-kaart-instellingen:focus-visible { outline: 2px solid #448c74; outline-offset: 2px; }
.aiv-kaart-instellingen.is-open { background: #f0f7f4; border-color: #cfe3da; color: #448c74; }
.aiv-kaart-instellingen.is-open i { transform: rotate(60deg); }
@media (hover: hover) { .aiv-kaart-instellingen:hover { background: #f0f7f4; color: #448c74; } }
.aiv-instellingen-stip { position: absolute; top: .35rem; right: .35rem; width: .45rem; height: .45rem; border-radius: 50%;
    background: #448c74; box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform .2s cubic-bezier(.2, .9, .3, 1); }
.aiv-kaart-instellingen.heeft-instelling .aiv-instellingen-stip { transform: scale(1); }

/* Mini-popup onder de kaart. Hoogte via grid-rows (0fr -> 1fr) zodat de
   kaarten eronder meeschuiven; de inhoud groeit vanuit het tandwiel
   (rechtsboven) en kan halverwege worden teruggedraaid. */
.aiv-instellingen { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .32s cubic-bezier(.2, .9, .3, 1), margin-top .32s cubic-bezier(.2, .9, .3, 1); }
.aiv-instellingen.is-open { grid-template-rows: 1fr; }
.aiv-instellingen-binnen { min-height: 0; overflow: hidden; padding: 0 .1rem; margin: 0 -.1rem; }
.aiv-instellingen-kaart {
    position: relative; margin: .45rem 0 .35rem; padding: .7rem .8rem .8rem; text-align: left;
    border: 1px solid #e3e9ef; border-radius: .9rem; background: #fff; box-shadow: 0 .3rem .9rem rgba(18, 21, 25, .07);
    opacity: 0; transform: scale(.94); transform-origin: calc(100% - 1.4rem) 0;
    transition: opacity .2s ease, transform .32s cubic-bezier(.2, .9, .3, 1);
}
/* Pijltje naar het tandwiel */
.aiv-instellingen-kaart::before { content: ""; position: absolute; top: -.4rem; right: 1.05rem; width: .75rem; height: .75rem;
    background: #fff; border-left: 1px solid #e3e9ef; border-top: 1px solid #e3e9ef; transform: rotate(45deg); border-radius: .15rem 0 0 0; }
.aiv-instellingen.is-open .aiv-instellingen-kaart { opacity: 1; transform: none; }
.aiv-instellingen .settings-label { display: block; margin-bottom: .4rem; }
.aiv-instellingen #ai_character_checks { margin-bottom: .35rem; }
.aiv-instellingen .illu-char-check { font-size: .8rem; padding: .2rem .7rem .2rem .2rem; gap: .4rem; }
.aiv-instellingen .illu-char-check img { width: 22px; height: 22px; }
.aiv-instellingen-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9aa1ab; }
.aiv-instellingen .form-control { background: #fff; }
@media (prefers-reduced-motion: reduce) {
    .aiv-kaart-kop:active, .aiv-kaart-kop:hover .aiv-mode-icon, .aiv-kaart-instellingen:active,
    .aiv-kaart-instellingen.is-open i, .aiv-instellingen-kaart { transform: none; }
    .aiv-instellingen, .aiv-instellingen-stip { transition: none; }
}

/* ── AI-paneel: kleur ──────────────────────────────────────────────
   Groen is alleen voor wat je aandacht moet trekken: de aanbevolen kaart
   ("Alle afbeeldingen", of "Afbeelding voor deze pagina" als die niet kan,
   .is-primair). Al het andere (credits, vinkjes, stapnummers, overige
   kaarticonen, het tandwiel, de actieve rail-knop) is neutraal grijs. */
.book-editor .illu-credits-chip { background: #f3f5f7; color: #4b5563; border-color: #e3e7eb; }
.book-editor .illu-buy-credits-header-btn { color: #4b5563; border-color: #dfe3e8; background: #fff; }
@media (hover: hover) {
    .book-editor .illu-buy-credits-header-btn:hover { color: #2f3742; border-color: #c9cfd6; background: #f3f5f7; }
}
.book-editor .illu-step-number { background: #eef1f4; color: #2f3742; box-shadow: none; }
.book-editor .aiv-stap.is-ingeklapt .illu-step-number {
    background: #e6eaee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%237b8591' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.aiv-stap-kop:active { background: #eef1f4; }
@media (hover: hover) {
    .aiv-stap-kop:hover { background: #f3f5f7; }
    .aiv-stap-kop:hover .aiv-stap-pijl { color: #4b5563; }
}
.aiv-mode-card .aiv-mode-icon { background: #f0f2f5; color: #4b5563; box-shadow: none; }
.aiv-mode-card.is-recommended .aiv-mode-icon,
.aiv-kaart-pagina.is-primair .aiv-mode-icon { background: linear-gradient(160deg, #55a68a, #386f5b); color: #fff; box-shadow: 0 .25rem .6rem rgba(56, 111, 91, .25); }
.aiv-mode-card:hover { border-color: #d3d9df; }
.aiv-mode-card.is-recommended:hover { border-color: #a9cbbe; }
.aiv-mode-card.active { border-color: #9aa3ad; background: #f6f7f9; box-shadow: 0 0 0 3px rgba(47, 55, 66, .08); }
.aiv-kaart-kop:active { background: #eceff2; }
@media (hover: hover) { .aiv-kaart-kop:hover { background: #f3f5f7; } }
.aiv-kaart-pagina.is-primair .aiv-kaart-kop:active { background: #e6f2ec; }
@media (hover: hover) { .aiv-kaart-pagina.is-primair .aiv-kaart-kop:hover { background: #f0f7f4; } }
.aiv-kaart-instellingen.is-open { background: #eef1f4; border-color: #e0e4e9; color: #2f3742; }
@media (hover: hover) { .aiv-kaart-instellingen:hover { background: #f3f5f7; color: #2f3742; } }
.aiv-instellingen-stip { background: #2f3742; }
.aiv-instellingen .illu-char-check.checked { border-color: #9aa3ad; background: #f3f5f7; color: #2f3742; }
@media (hover: hover) { .aiv-instellingen .illu-char-check:hover { border-color: #c9cfd6; } }
/* Rail: de actieve knop is neutraal (het open paneel zegt al waar je bent); alleen
   de AI-knop lokt groen zolang zijn paneel dicht is */
.editor-rail-btn.active { color: #2f3742; }
.editor-rail-btn.active .editor-rail-icon,
.editor-rail-btn-ai.active .editor-rail-icon { background: #e6eaee; color: #2f3742; box-shadow: none; }
.editor-rail-btn.active .editor-rail-count { background: #2f3742; }

/* Stap 3, volgorde: "Afbeelding voor deze pagina" (+ popup), "Update" (+ formulier), dan "Alle afbeeldingen" */
.aiv-mode-cards > .aiv-mode-form { grid-column: 1 / -1; margin: 0; border-color: #e3e7eb; background: #fff; }
/* Gelijke ruimte tussen de kaarten: geen rij-gap (die telde aan beide kanten
   van de ingeklapte popup mee, 2x zo veel ruimte onder de eerste kaart) maar
   een marge boven elke kaart; de ingeklapte popup neemt zo geen ruimte in. */
.aiv-mode-cards { row-gap: 0; }
.aiv-mode-cards > .aiv-mode-card:not(:first-child),
.aiv-mode-cards > .aiv-mode-form { margin-top: .6rem; }
.aiv-mode-cards > .aiv-mode-card[data-mode="all"].is-recommended { margin-top: 1.15rem; }   /* plus ruimte voor het lint */

/* Stap 3, nog niet bevestigd: "Bevestig je e-mailadres en krijg N credits".
   Neutraal als er nog credits zijn (bonus); groen icoon als het de enige weg
   is (is-primair), volgens de kleurregel van het AI-paneel. */
.aiv-bevestig { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .6rem; padding: .8rem .9rem;
    border: 1.5px solid #e3e9ef; border-radius: 1rem; background: #fff; text-align: left; }
.aiv-bevestig-icoon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: .8rem; background: #f0f2f5; color: #4b5563;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.aiv-bevestig.is-primair .aiv-bevestig-icoon { background: linear-gradient(160deg, #55a68a, #386f5b); color: #fff; box-shadow: 0 .25rem .6rem rgba(56, 111, 91, .25); }
.aiv-bevestig-tekst { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.aiv-bevestig-tekst b { font-size: .88rem; line-height: 1.25; color: #2f3742; }
.aiv-bevestig-tekst small { font-size: .75rem; line-height: 1.4; color: #6b7280; overflow-wrap: anywhere; }
.aiv-bevestig-knop { align-self: flex-start; margin-top: .2rem; padding: .3rem .8rem; border-radius: 50rem; border: 1px solid #dfe3e8;
    background: #fff; color: #2f3742; font-size: .78rem; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease-out; }
.aiv-bevestig-knop:active { transform: scale(.96); }
.aiv-bevestig-knop:disabled { opacity: .5; cursor: default; transform: none; }
.aiv-bevestig-knop:focus-visible { outline: 2px solid #448c74; outline-offset: 2px; }
@media (hover: hover) { .aiv-bevestig-knop:not(:disabled):hover { background: #f3f5f7; border-color: #c9cfd6; } }
.aiv-bevestig-melding:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .aiv-bevestig-knop:active { transform: none; } }

/* Lege cover (nog geen beeld): wit, zodat hij loskomt van de grijswitte
   sectie-achtergrond (#f6f9fc); ook de lege-staat-laag ("nog geen illustratie")
   is op de cover wit. Een gekozen beeld of achtergrondkleur ligt eroverheen. */
.book-editor .cover-image-wrapper,
.book-editor .cover-canvas .page-canvas-empty { background-color: #fff; }