/* ==========================================================================
   KRM Prints · Album Designer
   Huisstijl: navy & cognac op warm wit · Albert Sans + Cormorant Garamond
   ========================================================================== */

*,
*::before,
*::after{ box-sizing:border-box; }

:root{
  --strip-h:100px;
  /* merkkleuren */
  --navy:#1F2A44;
  --navy-ink:#141B2D;
  --cognac:#9A5B2E;
  --cognac-light:#D9A57A;
  --camel:#D6B48C;
  --warm-white:#F7F3EC;

  /* licht thema */
  --bg:#F7F3EC;
  --surface:#FFFFFF;
  --surface-2:#FBF8F3;
  --surface-3:#F2ECE3;
  --workspace:#E8E2D8;
  --border:#E6DED2;
  --border-strong:#D2C6B5;
  --text:#141B2D;
  --text-2:#3D4659;
  --muted:#5F6676;
  --primary:#1F2A44;
  --primary-hover:#2B3A5C;
  --on-primary:#F7F3EC;
  --accent:#9A5B2E;
  --accent-hover:#844B22;
  --accent-soft:#F4E7DA;
  --on-accent:#FFFFFF;
  --danger:#B42318;
  --danger-soft:#FBEAE8;
  --success:#2F6B4F;
  --focus:#9A5B2E;
  --slot:#1F2A44;
  --shadow-sm:0 1px 2px rgba(20,27,45,.06), 0 1px 3px rgba(20,27,45,.06);
  --shadow-md:0 4px 12px rgba(20,27,45,.08), 0 1px 3px rgba(20,27,45,.06);
  --shadow-lg:0 18px 50px rgba(20,27,45,.18), 0 4px 12px rgba(20,27,45,.08);
  --page-shadow:0 1px 2px rgba(20,27,45,.10), 0 14px 34px rgba(20,27,45,.16);

  --radius-sm:8px;
  --radius:10px;
  --radius-lg:14px;
  --font-sans:'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --topbar-h:60px;
  --spreadbar-h:52px;
}

body.theme-dark{
  --bg:#0F1524;
  --surface:#172036;
  --surface-2:#1B2540;
  --surface-3:#24304D;
  --workspace:#0B101C;
  --border:#2A3654;
  --border-strong:#3B4A6C;
  --text:#F3EEE6;
  --text-2:#D3D8E2;
  --muted:#A4ACBC;
  --primary:#D9A57A;
  --primary-hover:#E4B88F;
  --on-primary:#141B2D;
  --accent:#D9A57A;
  --accent-hover:#E4B88F;
  --accent-soft:#2C2A33;
  --on-accent:#141B2D;
  --danger:#F08A7E;
  --danger-soft:#3A2128;
  --success:#7CC2A0;
  --focus:#D9A57A;
  --slot:#C9D2E3;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 14px rgba(0,0,0,.35);
  --shadow-lg:0 22px 60px rgba(0,0,0,.55);
  --page-shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.55);
  color-scheme:dark;
}

html, body{ height:100%; }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.4;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

button, input, select, textarea{ font:inherit; color:inherit; }

.hidden{ display:none !important; }

.sr-only,
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* ---------- iconen ---------- */
.icon{
  width:18px; height:18px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-sm{ width:15px; height:15px; }
.icon-lg{ width:24px; height:24px; }
.icon-xl{ width:40px; height:40px; stroke-width:1.5; }

/* ==========================================================================
   KNOPPEN
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:36px;
  padding:0 14px;
  border-radius:var(--radius);
  border:1px solid transparent;
  background:var(--surface);
  color:var(--text);
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  flex:0 0 auto;
}
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.btn-primary{ background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-sm); }
.btn-primary:hover:not(:disabled){ background:var(--primary-hover); }

.btn-accent{ background:var(--accent); color:var(--on-accent); }
.btn-accent:hover:not(:disabled){ background:var(--accent-hover); }

.btn-ghost{ background:transparent; color:var(--text-2); }
.btn-ghost:hover:not(:disabled){ background:var(--surface-3); color:var(--text); }

.btn-soft{ background:var(--surface-3); color:var(--text); }
.btn-soft:hover:not(:disabled){ background:var(--border); }

.btn-accent-soft{ background:var(--accent-soft); color:var(--accent); }
.btn-accent-soft:hover:not(:disabled){ background:var(--accent); color:var(--on-accent); }
body.theme-dark .btn-accent-soft{ color:var(--cognac-light); }
body.theme-dark .btn-accent-soft:hover:not(:disabled){ color:var(--on-accent); }

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  padding:0;
  border:0;
  border-radius:var(--radius);
  background:transparent;
  color:var(--text-2);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
  flex:0 0 auto;
}
.icon-btn:hover:not(:disabled){ background:var(--surface-3); color:var(--text); }
.icon-btn:disabled{ opacity:.35; cursor:not-allowed; }

.icon-btn-danger:hover:not(:disabled){ background:var(--danger-soft); color:var(--danger); }

/* ==========================================================================
   MERK
   ========================================================================== */
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--primary);
  line-height:1;
  user-select:none;
}
body:not(.theme-dark) .brand{ color:var(--navy); }
.brand-krm{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:27px;
  letter-spacing:.01em;
  color:inherit;
}
body.theme-dark .brand-krm{ color:var(--warm-white); }
.brand-bar{
  width:2px; height:24px;
  background:var(--cognac);
  display:block;
}
body.theme-dark .brand-bar{ background:var(--cognac-light); }
.brand-prints{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.16em;
  color:#4A5468;
}
body.theme-dark .brand-prints{ color:#C9CFDB; }

/* extra tokens voor de nieuwe indeling */
:root{
  --panel-w:340px;
  --layoutbar-h:80px;
  --spreadbar-h:56px;
  --cell:#EAE2D6;
  --hand-on:#DDD4C7;
}
body.theme-dark{
  --cell:#202A44;
  --hand-on:#3B4A6C;
}

.icon-xs{ width:13px; height:13px; stroke-width:2.2; }
.icon-accent{ color:var(--accent); }
body.theme-dark .icon-accent{ color:var(--cognac-light); }

/* ==========================================================================
   BOVENBALK
   ========================================================================== */
#topbar{
  height:var(--topbar-h);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px 0 20px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:relative;
  z-index:40;
}
.brand-app{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:4px 10px 4px 14px;
  border-left:1px solid var(--border);
  margin-left:8px;
  white-space:nowrap;
}
.project-chip{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-left:10px;
  height:42px;
  padding:0 12px 0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  cursor:pointer;
  max-width:440px;
  min-width:0;
  flex:0 1 auto;
  transition:border-color .15s ease, background-color .15s ease;
}
.project-chip:hover,
.project-chip[aria-expanded="true"]{ border-color:var(--border-strong); background:var(--surface); }
.project-chip > .icon{ color:var(--muted); transition:transform .15s ease; }
.project-chip[aria-expanded="true"] > .icon{ transform:rotate(180deg); }
.project-chip-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  text-align:left;
}
#projectSummaryName{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:230px;
}
#projectSummaryMeta{ font-size:12px; color:var(--muted); white-space:nowrap; }
.project-chip-count{
  font-size:12px;
  font-weight:600;
  color:var(--accent);
  background:var(--accent-soft);
  padding:3px 9px;
  border-radius:999px;
  white-space:nowrap;
}
body.theme-dark .project-chip-count{ color:var(--cognac-light); }
.topbar-spacer{ flex:1 1 auto; }
.topbar-divider{ width:1px; height:24px; background:var(--border); margin:0 6px; }
.history-controls{ display:flex; gap:2px; }

#loadProjectInput,
#introLoadProjectInput,
#upload,
#wizardUpload{ display:none; }

/* ---------- album aanpassen (popover) ---------- */
.popover{
  position:fixed;
  z-index:60;
  width:380px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 16px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  animation:popIn .14s ease-out;
}
@keyframes popIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.popover-title{ font-size:15px; margin-bottom:4px; }
.popover-note{ margin:2px 0 0; font-size:12px; color:var(--muted); line-height:1.4; }
.popover-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

.field-label{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-2);
}
.label-note{
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}
.text-input{
  height:40px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  font-size:15px;
  color:var(--text);
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.text-input:hover{ border-color:var(--border-strong); }
.text-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* formaatknoppen (startscherm en popover) */
.format-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:1fr;
  gap:6px;
}
.format-option{
  min-height:44px;
  padding:0 4px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-2);
  font-size:14px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.format-option:hover{ border-color:var(--border-strong); color:var(--text); }
.format-option[aria-checked="true"]{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent);
}
body.theme-dark .format-option[aria-checked="true"]{ color:var(--cognac-light); }
.format-grid--compact .format-option{ min-height:34px; font-size:12.5px; border-radius:8px; }
/* sliders algemeen */
input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  height:20px;
  background:transparent;
  cursor:pointer;
  accent-color:var(--accent);
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:var(--border-strong);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px; height:16px;
  margin-top:-6px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--accent);
  box-shadow:var(--shadow-sm);
}
input[type=range]::-moz-range-track{ height:4px; border-radius:999px; background:var(--border-strong); }
input[type=range]::-moz-range-thumb{
  width:12px; height:12px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--accent);
}

/* selects */
select{
  height:32px;
  padding:0 30px 0 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background-color:var(--surface);
  color:var(--text);
  font-size:13px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6676' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
select:hover{ border-color:var(--border-strong); }
body.theme-dark select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A4ACBC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.btn-order{
  background:var(--cognac);
  color:#FFFFFF;
  box-shadow:0 4px 12px rgba(154,91,46,.28);
}
.btn-order:hover:not(:disabled){ background:#844B22; }
body.theme-dark .btn-order{ background:var(--cognac-light); color:var(--navy-ink); }
body.theme-dark .btn-order:hover:not(:disabled){ background:#E4B88F; }
.btn-block{ width:100%; height:40px; }

/* ==========================================================================
   INDELING: foto's links, designer rechts
   ========================================================================== */
#appBody{
  flex:1 1 auto;
  min-height:0;
  display:flex;
}

/* ---------- fotopaneel ---------- */
#photoPanel{
  position:relative;
  width:var(--panel-w);
  flex:0 0 var(--panel-w);
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  z-index:20;
}
.panel-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px 8px;
  min-height:52px;
}
.panel-head strong{ font-size:15px; }
.count-pill{
  font-size:11px;
  font-weight:700;
  color:var(--accent);
  background:var(--accent-soft);
  padding:1px 8px;
  border-radius:999px;
  font-variant-numeric:tabular-nums;
}
body.theme-dark .count-pill{ color:var(--cognac-light); }
.panel-filters{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 16px 12px;
}
.chip-group{ display:flex; gap:6px; flex:1 1 auto; min-width:0; flex-wrap:nowrap; }
.chip{
  height:30px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover{ border-color:var(--border-strong); color:var(--text); }
.chip.active{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.select-compact{ height:30px; padding:0 26px 0 9px; font-size:12px; border-radius:999px; background-position:right 8px center; flex:0 0 auto; }

.photo-grid{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 16px 16px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  align-content:start;
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
.photo-grid.has-empty{ display:flex; }
.thumbWrapper{
  position:relative;
  aspect-ratio:1;
  border-radius:8px;
  background:var(--cell);
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  transition:box-shadow .15s ease;
  content-visibility:auto;
  contain-intrinsic-size:auto 96px;
}
.thumbWrapper:hover{ box-shadow:0 0 0 2px var(--accent); }
.thumbWrapper:active{ cursor:grabbing; }
.thumb{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  border-radius:2px;
  pointer-events:auto;
  transition:opacity .15s ease;
  -webkit-user-drag:element;
}
.thumbWrapper.used .thumb{ opacity:.5; }
.thumbWrapper.used:hover .thumb{ opacity:1; }
.thumbWrapper.dragging{ opacity:.4; }
.thumbWrapper .spread-tag{
  position:absolute;
  top:5px; left:5px;
  max-width:calc(100% - 10px);
  overflow:hidden;
  text-overflow:ellipsis;
  padding:1px 7px;
  border-radius:999px;
  background:var(--navy);
  color:var(--warm-white);
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.library-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  width:100%;
  padding:40px 16px;
  color:var(--muted);
}
.library-empty-text{ font-size:13px; color:var(--muted); line-height:1.5; }
.library-empty-text strong{ color:var(--text-2); }

.panel-foot{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 16px 16px;
  border-top:1px solid var(--border);
}
.panel-hint{ font-size:12px; color:var(--muted); line-height:1.4; }
.import-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-2);
}
/* terugslepen naar het paneel = van de spread halen */
.panel-drop-hint{
  position:absolute;
  inset:8px;
  z-index:5;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:2px dashed var(--accent);
  border-radius:14px;
  background:color-mix(in srgb, var(--surface) 88%, var(--accent));
  color:var(--accent);
  font-size:13.5px;
  font-weight:600;
  text-align:center;
  padding:20px;
  pointer-events:none;
}
body.dragging-frame #photoPanel .panel-drop-hint{ display:flex; background:transparent; border-color:var(--border-strong); }
body.dragging-frame #photoPanel .panel-drop-hint > *{ visibility:hidden; }
body.dragging-frame #photoPanel.remove-target .panel-drop-hint{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--surface) 88%, var(--accent));
}
body.dragging-frame #photoPanel.remove-target .panel-drop-hint > *{ visibility:visible; }
#photoPanel.file-over{ box-shadow:inset 0 0 0 2px var(--accent); }

/* ---------- designer ---------- */
#designer{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* layoutbalk bovenaan */
#layoutBar{
  height:var(--layoutbar-h);
  flex:0 0 auto;
  display:flex;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.bar-head{
  width:150px;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:0 12px 0 20px;
  border-right:1px solid var(--border);
}
.bar-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-2);
}
.layout-count{
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:-5px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.mini-btn{
  width:22px; height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.mini-btn:hover:not(:disabled){ background:var(--surface-3); color:var(--text); }
.mini-btn:disabled{ opacity:.3; cursor:default; }
.layout-track{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
.layout-track::-webkit-scrollbar{ height:6px; }
.layout-track::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:999px; }
.layout-tile{
  position:relative;
  flex:0 0 auto;
  height:44px;
  aspect-ratio:var(--page-ratio, 606 / 206);
  max-width:150px;
  padding:0;
  border:0;
  border-radius:2px;
  overflow:hidden;
  background:#FFFFFF;
  box-shadow:0 0 0 1px var(--border), 0 1px 2px rgba(20,27,45,.06);
  cursor:pointer;
  transition:box-shadow .15s ease, transform .15s ease;
}
.layout-tile:hover{ box-shadow:0 0 0 1px var(--border-strong), 0 4px 10px rgba(20,27,45,.14); transform:translateY(-1px); }
.layout-tile.active{ box-shadow:0 0 0 2px var(--accent), 0 4px 10px rgba(20,27,45,.14); }
.layout-tile::after{
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  width:1px;
  background:rgba(255,255,255,.85);
  z-index:2;
}
.layout-cell{
  position:absolute;
  overflow:hidden;
  background:var(--navy);
  opacity:.84;
  box-shadow:inset 0 0 0 1px #FFFFFF;
}
.layout-cell img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.layout-tile.has-photos .layout-cell{ opacity:1; background:#D8D0C4; }
.layout-empty{
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
}

/* ---------- werkruimte ---------- */
#workspaceWrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  background:var(--workspace);
}
#workspace{
  --s:1;
  --inv:1;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  align-items:safe center;
  justify-content:center;
  justify-content:safe center;
  gap:28px;
  padding:16px 20px 16px;
  overflow:auto;
  overscroll-behavior:contain;
}
#workspace.view-2v{ flex-direction:column; gap:22px; }
/* vier spreads: 1 en 2 onder elkaar links, 3 en 4 rechts */
#workspace.view-4{
  display:grid;
  grid-template-rows:repeat(2, max-content);
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  place-content:safe center;
  gap:20px 36px;
}
#workspace::-webkit-scrollbar{ width:10px; height:10px; }
#workspace::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }

.canvasWrapper{
  position:relative;
  flex:0 0 auto;
  display:none;
  flex-direction:column;
  gap:10px;
}
.canvasWrapper.is-visible{ display:flex; }
.canvasWrapper.is-new{ animation:spreadIn .22s ease-out; }
@keyframes spreadIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
.spreadLabel{
  display:flex;
  align-items:center;
  gap:8px;
  height:18px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  user-select:none;
}
.spreadLabel::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--border-strong);
}
.spreadLabel .spread-meta{
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
.canvasWrapper.active .spreadLabel{ color:var(--accent); }
.canvasWrapper.active .spreadLabel::before{ background:var(--accent); }
body.theme-dark .canvasWrapper.active .spreadLabel{ color:var(--cognac-light); }
body.theme-dark .canvasWrapper.active .spreadLabel::before{ background:var(--cognac-light); }

.canvasStage{
  position:relative;
  box-shadow:var(--page-shadow);
  outline:2px solid transparent;
  outline-offset:6px;
  transition:outline-color .15s ease;
}
#workspace:not(.view-1) .canvasWrapper:not(.active) .canvasStage:hover{ outline-color:var(--border-strong); cursor:pointer; }
#workspace:not(.view-1) .canvasWrapper.active .canvasStage{ outline-color:var(--accent); }
.canvas{
  position:absolute;
  left:0; top:0;
  background:#ffffff;
  transform-origin:0 0;
}
.cutline{
  position:absolute;
  top:3px; left:3px; right:3px; bottom:3px;
  border:calc(1px * var(--inv)) dashed rgba(180,35,24,.32);
  pointer-events:none;
  z-index:50;
}
.fold{
  position:absolute;
  left:50%; top:0;
  width:calc(1px * var(--inv));
  height:100%;
  background:rgba(20,27,45,.22);
  pointer-events:none;
  transform:translateX(-50%);
  z-index:50;
}

.empty-state{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--muted);
  text-align:center;
}
.empty-state strong{ font-size:16px; color:var(--text); }

/* weergave + zoom rechtsonder */
.view-controls,
.zoom-controls{
  display:flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  flex:0 0 auto;
}
.zoom-controls,
.view-controls{ width:146px; }
.view-btn{ flex:1 1 0; }
.zoom-level{ flex:1 1 auto; }
.view-btn{
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.view-btn:hover{ color:var(--text); background:var(--surface-3); }
.view-btn.active{ background:var(--surface-3); color:var(--text); }
.icon-view{ width:18px; height:16px; stroke-width:1.7; }
.zoom-step{
  width:30px; height:28px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-2);
  font-size:16px;
  cursor:pointer;
}
.zoom-step:hover{ background:var(--surface-3); color:var(--text); }
.zoom-level{
  min-width:50px;
  height:28px;
  border:0;
  border-radius:8px;
  background:transparent;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--text-2);
  cursor:pointer;
}
.zoom-level:hover{ background:var(--surface-3); color:var(--text); }

/* ==========================================================================
   FOTOKADERS
   ========================================================================== */
.photo-frame{
  position:absolute;
  overflow:visible;
  cursor:grab;
  z-index:1;
}
.photo-frame:active{ cursor:grabbing; }
.photo-frame.selected-frame{ z-index:20; }
.frame-clip{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#ECE6DC;
}
.photo-frame img{
  position:absolute;
  top:0; left:0;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.photo-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 calc(1px * var(--inv)) transparent;
  transition:box-shadow .12s ease;
  z-index:4;
}
.photo-frame:hover::after{ box-shadow:inset 0 0 0 calc(1.5px * var(--inv)) rgba(154,91,46,.7); }
.photo-frame.selected-frame::after{ box-shadow:inset 0 0 0 calc(3px * var(--inv)) var(--cognac); }

/* leeg vak */
.photo-frame.placeholder{ cursor:pointer; }
.photo-frame.placeholder .frame-clip{
  background:
    repeating-linear-gradient(135deg, rgba(31,42,68,.045) 0 calc(6px * var(--inv)), transparent calc(6px * var(--inv)) calc(12px * var(--inv))),
    #F1ECE4;
}
.photo-frame.placeholder::after{ box-shadow:inset 0 0 0 calc(1px * var(--inv)) rgba(31,42,68,.28); }
.placeholder-fill{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(6px * var(--inv));
  padding:calc(8px * var(--inv));
  color:#5F6676;
  text-align:center;
  font-size:calc(11.5px * var(--inv));
  font-weight:600;
  line-height:1.3;
  pointer-events:none;
}
.placeholder-fill svg{
  width:calc(22px * var(--inv));
  height:calc(22px * var(--inv));
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
}

/* doel tijdens slepen: wisselen, vullen of vervangen */
.photo-frame.swap-source{ opacity:.35; }
.photo-frame.swap-target::after,
.photo-frame.drop-target::after{
  box-shadow:inset 0 0 0 calc(3px * var(--inv)) var(--cognac);
  background:rgba(154,91,46,.18);
}
.swap-badge{
  position:absolute;
  left:50%; top:50%;
  z-index:6;
  width:calc(36px * var(--inv));
  height:calc(36px * var(--inv));
  transform:translate(-50%, -50%);
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#FFFFFF;
  color:var(--cognac);
  box-shadow:0 calc(2px * var(--inv)) calc(8px * var(--inv)) rgba(20,27,45,.25);
  pointer-events:none;
}
.swap-badge svg{
  width:calc(18px * var(--inv));
  height:calc(18px * var(--inv));
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.photo-frame.swap-target .swap-badge{ display:flex; }
.swap-ghost{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  transform:translate(-50%, -50%);
  border-radius:6px;
  overflow:hidden;
  opacity:.9;
  box-shadow:var(--shadow-lg);
  border:2px solid var(--cognac);
  background:#000;
}
.swap-ghost img{ width:100%; height:100%; object-fit:cover; display:block; }
body.dragging-frame,
body.dragging-frame *{ cursor:grabbing !important; }

/* pil op de geselecteerde foto: handje, −, +, passend */

.photo-frame.panning,
.photo-frame.panning:active{ cursor:move; }

/* tijdens export geen hulplijnen */
body.exporting .cutline,
body.exporting .fold{ display:none !important; }

/* ==========================================================================
   SPREAD-OPTIES
   ========================================================================== */
.spreadbar{
  height:var(--spreadbar-h);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px 0 20px;
  background:var(--surface);
  border-top:1px solid var(--border);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  position:relative;
  z-index:22;
}
.spreadbar::-webkit-scrollbar{ display:none; }
.bar-label{
  flex:0 0 auto;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  padding-right:12px;
  margin-right:4px;
  border-right:1px solid var(--border);
  white-space:nowrap;
}
body.theme-dark .bar-label{ color:var(--cognac-light); }
.nav-btn{
  width:42px; height:42px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--border-strong);
  border-radius:12px;
  background:var(--surface);
  color:var(--primary);
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.nav-btn .icon{ width:24px; height:24px; stroke-width:2.4; }
.nav-btn:hover:not(:disabled){ background:var(--surface-3); border-color:var(--primary); }
.nav-btn:disabled{ opacity:.35; cursor:default; }
.sb-title{
  display:flex;
  align-items:baseline;
  gap:5px;
  min-width:62px;
  justify-content:center;
  white-space:nowrap;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}
#activeSpreadNumber{ font-weight:700; color:var(--text); }
.sb-of{ color:var(--muted); }
.sb-add{ padding:0 12px 0 10px; }
.sb-add .icon{ stroke-width:2.2; }
.sb-divider{ width:1px; height:26px; background:var(--border); margin:0 6px; flex:0 0 auto; }
.sb-spacer{ flex:1 1 auto; min-width:8px; }
.sb-slider{
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 10px;
  border-radius:var(--radius);
  background:var(--surface-2);
  border:1px solid var(--border);
  flex:0 0 auto;
}
.sb-slider-label{ font-size:12.5px; font-weight:600; color:var(--text-2); white-space:nowrap; }
.sb-slider output{
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  min-width:36px;
}
.sb-slider input[type=range]{ width:72px; }
.sb-color{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:36px;
  padding:0 10px 0 8px;
  border-radius:var(--radius);
  background:var(--surface-2);
  border:1px solid var(--border);
  font-size:12.5px;
  font-weight:600;
  color:var(--text-2);
  cursor:pointer;
  flex:0 0 auto;
}
.sb-color input[type=color],
.color-box input[type=color]{
  width:22px; height:22px;
  padding:0;
  border:1px solid var(--border-strong);
  border-radius:50%;
  background:none;
  cursor:pointer;
  overflow:hidden;
  flex:0 0 auto;
}
.sb-color input[type=color]::-webkit-color-swatch-wrapper,
.color-box input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
.sb-color input[type=color]::-webkit-color-swatch,
.color-box input[type=color]::-webkit-color-swatch{ border:0; border-radius:50%; }
.sb-color input[type=color]::-moz-color-swatch,
.color-box input[type=color]::-moz-color-swatch{ border:0; border-radius:50%; }
.spreadbar.is-empty .sb-control{ opacity:.4; pointer-events:none; }
/* ==========================================================================
   OVERZICHT — alle spreads als miniaturen (klikken, slepen, toevoegen)
   ========================================================================== */
.spread-strip{
  --tile-h:calc(var(--strip-h) - 50px);
  flex:0 0 auto;
  /* vaste hoogte: geen verspringende werkruimte als de schuifbalk verschijnt */
  height:var(--strip-h);
  display:flex;
  align-items:stretch;
  background:var(--surface-2);
  border-top:1px solid var(--border);
  position:relative;
  z-index:21;
}
.strip-head{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  width:116px;
  padding:0 14px 0 20px;
  border-right:1px solid var(--border);
}
.strip-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-2);
}
.strip-count{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.strip-track{
  --page-ratio:606 / 206;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:9px 20px 14px 16px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
.strip-track::-webkit-scrollbar{ height:6px; }
.strip-track::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:999px; }
.strip-track::-webkit-scrollbar-track{ background:transparent; }

.strip-tile{
  position:relative;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:3px 3px 0;
  border-radius:6px;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  outline:none;
}
.strip-page{
  position:relative;
  display:block;
  height:var(--tile-h);
  aspect-ratio:var(--page-ratio);
  border-radius:2px;
  overflow:hidden;
  background:#FFFFFF;
  box-shadow:0 0 0 1px var(--border), 0 1px 2px rgba(20,27,45,.08);
  transition:box-shadow .15s ease, transform .15s ease;
}
.strip-page::after{
  /* vouw */
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  width:1px;
  background:rgba(20,27,45,.16);
  z-index:3;
  pointer-events:none;
}
.strip-frame{
  position:absolute;
  overflow:hidden;
  background:#E7E0D5;
}
.strip-frame img{
  position:absolute;
  display:block;
  max-width:none;
  pointer-events:none;
  -webkit-user-drag:none;
}
.strip-frame.is-empty{
  background:
    repeating-linear-gradient(135deg, rgba(31,42,68,.10) 0 2px, transparent 2px 5px),
    #EFE9E0;
  box-shadow:inset 0 0 0 1px rgba(31,42,68,.16);
}
.strip-blank{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  color:#8A8F9C;
  pointer-events:none;
}
.strip-num{
  font-size:12.5px;
  font-weight:700;
  color:var(--text-2);
  line-height:1;
  font-variant-numeric:tabular-nums;
  transition:color .15s ease;
}
.strip-tile:hover .strip-page{
  box-shadow:0 0 0 1px var(--border-strong), 0 4px 10px rgba(20,27,45,.16);
  transform:translateY(-1px);
}
.strip-tile:hover .strip-num{ color:var(--text-2); }
.strip-tile.active .strip-page{ box-shadow:0 0 0 2px var(--accent), 0 4px 12px rgba(20,27,45,.18); }
.strip-tile.active .strip-num{ color:var(--accent); }
body.theme-dark .strip-tile.active .strip-num{ color:var(--cognac-light); }
.strip-tile:focus-visible{ box-shadow:0 0 0 2px var(--focus); }
.strip-tile.dragging{ opacity:.35; }

/* invoegpositie tijdens het slepen van een spread */
.strip-tile.drop-before::before,
.strip-tile.drop-after::after{
  content:"";
  position:absolute;
  top:0;
  height:calc(var(--tile-h) + 6px);
  width:3px;
  border-radius:3px;
  background:var(--accent);
}
.strip-tile.drop-before::before{ left:-9px; }
.strip-tile.drop-after::after{ right:-9px; }

/* foto uit de bibliotheek op een spread slepen */
.strip-tile.photo-over .strip-page{ box-shadow:0 0 0 2px var(--accent), 0 4px 12px rgba(20,27,45,.18); transform:translateY(-2px); }
.strip-tile.photo-over .strip-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  background:color-mix(in srgb, var(--cognac) 26%, transparent);
}
.strip-tile.just-added .strip-page{ animation:stripPulse .7s ease-out; }
@keyframes stripPulse{
  0%{ box-shadow:0 0 0 2px var(--accent), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
  100%{ box-shadow:0 0 0 2px var(--accent), 0 0 0 10px transparent; }
}

.strip-add{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:var(--tile-h);
  margin-top:3px;
  padding:0 14px;
  border:0;
  border-radius:8px;
  /* Blijft rechts in beeld als er meer spreads zijn dan er passen. */
  position:sticky;
  right:0;
  z-index:5;
  background:transparent;
  color:var(--muted);
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:color .15s ease;
}
/* zachte overgang over de spreads die eronder doorschuiven */
.strip-add::before{
  content:"";
  position:absolute;
  top:-14px; bottom:-22px;
  left:-36px; right:-24px;
  z-index:-1;
  background:linear-gradient(to right, transparent, var(--surface-2) 30px);
  pointer-events:none;
}
/* de knop zelf: gestippelde tegel */
.strip-add::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border:1.5px dashed var(--border-strong);
  border-radius:8px;
  background:var(--surface-2);
  transition:border-color .15s ease, background-color .15s ease;
}
.strip-add:hover{ color:var(--accent); }
.strip-add:hover::after{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
body.theme-dark .strip-add:hover{ color:var(--cognac-light); }
.strip-add .icon{ stroke-width:2.2; }
.strip-empty{
  align-self:center;
  margin-top:-4px;
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
}

/* ==========================================================================
   STARTSCHERM (één stap)
   ========================================================================== */
.start-screen{
  position:fixed;
  inset:0;
  z-index:600;
  background:var(--bg);
}
.start-card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.start-head{
  height:var(--topbar-h);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px 0 20px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.start-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}
.start-content{
  width:min(1240px, 100%);
  margin:0 auto;
  padding:22px 48px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.eyebrow{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
body.theme-dark .eyebrow{ color:var(--cognac-light); }
.start-title{
  margin:0;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:32px;
  line-height:1.05;
}
.start-top{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
  gap:40px;
  align-items:stretch;
}
.start-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.start-col--photos{ gap:10px; container-type:inline-size; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field--grow{ flex:1 1 auto; }
.field--grow .format-grid{ flex:1 1 auto; }

.upload-zone{
  height:64px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  position:relative;
  border:1.5px dashed var(--border-strong);
  border-radius:16px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.upload-zone:hover,
.upload-zone.drag-over{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.upload-icon{
  width:36px; height:36px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--accent);
  color:#FFFFFF;
}
.upload-icon .icon{ width:18px; height:18px; stroke-width:2.2; }
.upload-text{ display:flex; flex-direction:column; min-width:0; }
.upload-text strong{ font-size:15px; }
.upload-text span{ font-size:12.5px; color:var(--muted); }
.upload-progress{
  position:absolute;
  left:18px; right:18px; bottom:7px;
}
.upload-progress .progress-bar{ height:3px; }

.start-thumbs{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:6px;
  align-content:start;
}
.start-thumbs.expanded{
  max-height:calc((100cqw - 66px) / 12 * 4 + 18px);
  overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin;
}
.start-thumbs.is-empty{ display:none; }
.start-thumb{
  position:relative;
  aspect-ratio:1;
  padding:4px;
  border-radius:8px;
  background:var(--cell);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:box-shadow .15s ease;
}
.start-thumb img{
  display:block;
  max-width:100%;
  max-height:100%;
  border-radius:2px;
}
.start-thumb:hover{ box-shadow:0 0 0 2px var(--accent); }
.thumb-x{
  position:absolute;
  top:50%; left:50%;
  width:28px; height:28px;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(20,27,45,.75);
  color:#FFFFFF;
  cursor:pointer;
  opacity:0;
  transition:opacity .12s ease, background-color .12s ease;
}
.thumb-x .icon{ width:13px; height:13px; stroke-width:2.6; }
.start-thumb:hover .thumb-x,
.thumb-x:focus-visible{ opacity:1; }
.thumb-x:hover{ background:var(--danger); }
.start-more{
  aspect-ratio:1;
  border:0;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.start-more:hover{ color:var(--accent); box-shadow:0 0 0 2px var(--accent); }

.start-modes{
  padding:12px 14px 14px;
  border-radius:16px;
  background:var(--surface-3);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mode-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
}
.mode-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.mode-card--style{ cursor:default; }
.mode-card[data-mode]:hover{ border-color:var(--border-strong); }
.mode-card.active{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.mode-head{ display:flex; align-items:center; gap:8px; }
.mode-head strong{ font-size:15px; }
.mode-sub{ font-size:12px; color:var(--muted); }
.radio-dot{
  width:18px; height:18px;
  flex:0 0 auto;
  border-radius:50%;
  border:1.5px solid var(--border-strong);
  transition:border .15s ease;
}
.mode-card.active .radio-dot{ border:5px solid var(--accent); }
.mode-text{ font-size:13px; color:var(--muted); line-height:1.45; }
.mode-note{ font-size:12.5px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
body.theme-dark .mode-note{ color:var(--cognac-light); }
.stepper-row{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.stepper-label{ font-size:13px; color:var(--text-2); }
.stepper{
  display:flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
}
.stepper-btn{
  width:36px; height:36px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--primary);
  font-size:18px;
  cursor:pointer;
}
.stepper-btn:hover:not(:disabled){ background:var(--surface-3); }
.stepper-btn:disabled{ opacity:.3; cursor:default; }
.stepper-value{
  min-width:40px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.style-row{
  display:grid;
  grid-template-columns:82px minmax(0, 1fr);
  align-items:center;
  gap:8px;
}
.style-label{ font-size:12.5px; font-weight:600; color:var(--text-2); }
.range-box{
  display:flex;
  align-items:center;
  gap:4px;
  height:32px;
  padding:0 8px 0 2px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  min-width:0;
}
.range-box input[type=range]{ flex:1 1 auto; min-width:0; }
.range-step{
  width:26px; height:26px;
  flex:0 0 auto;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-2);
  font-size:16px;
  cursor:pointer;
}
.range-step:hover{ background:var(--surface-3); color:var(--text); }
.range-box output{
  min-width:40px;
  text-align:right;
  font-size:13px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.color-box{
  display:flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 6px 0 6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  font-size:13px;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.color-box input[type=color]{ width:26px; height:26px; }

.start-foot{
  height:84px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 28px;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.start-summary{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.btn-cta{
  height:54px;
  padding:0 30px;
  gap:12px;
  border-radius:14px;
  background:var(--cognac);
  color:#FFFFFF;
  font-size:16.5px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(154,91,46,.35);
}
.btn-cta .icon{ width:20px; height:20px; stroke-width:2.4; transition:transform .15s ease; }
.btn-cta:hover:not(:disabled){ background:#844B22; }
.btn-cta:hover:not(:disabled) .icon{ transform:translateX(3px); }
.btn-cta:disabled{ opacity:.45; box-shadow:none; }
body.theme-dark .btn-cta{ background:var(--cognac-light); color:var(--navy-ink); }

/* ==========================================================================
   FLIPBOOK (album bekijken)
   ========================================================================== */
.flipbook{
  position:fixed;
  inset:0;
  z-index:650;
  display:flex;
  flex-direction:column;
  background:var(--workspace);
}
.flip-head{
  height:var(--topbar-h);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px 0 20px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.flip-titles{
  display:flex;
  flex-direction:column;
  margin-left:14px;
  padding-left:14px;
  border-left:1px solid var(--border);
  min-width:0;
}
.flip-titles strong{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flip-titles span{ font-size:12px; color:var(--muted); }
.flip-main{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  padding:24px;
}
.flip-nav{
  width:56px; height:56px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--border-strong);
  border-radius:50%;
  background:var(--surface);
  color:var(--primary);
  cursor:pointer;
  transition:opacity .15s ease, background-color .15s ease;
}
.flip-nav .icon{ width:26px; height:26px; stroke-width:2.2; }
.flip-nav:hover:not(:disabled){ background:var(--surface-3); }
.flip-nav:disabled{ opacity:.3; cursor:default; }
.flip-book{
  position:relative;
  perspective:2600px;
  flex:0 0 auto;
}
.flip-page{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  overflow:hidden;
  z-index:1;
}
.flip-shadow{
  position:absolute;
  top:0; bottom:0; left:0; right:0;
  box-shadow:0 30px 60px rgba(20,27,45,.24), 0 4px 12px rgba(20,27,45,.12);
  z-index:0;
  transition:left .7s cubic-bezier(.4,.1,.25,1), right .7s cubic-bezier(.4,.1,.25,1);
}
.flip-shadow.right-only{ left:50%; }
.flip-shadow.left-only{ right:50%; }
.flip-page.left{ left:0; }
.flip-page.right{ left:50%; }
/* layflat: geen schaduw langs de vouw */
.flip-spread{
  position:absolute;
  top:0;
  width:200%;
  height:100%;
}
.flip-page.left .flip-spread,
.flip-face.left-half .flip-spread{ left:0; }
.flip-page.right .flip-spread,
.flip-face.right-half .flip-spread{ left:-100%; }
.flip-frame{ position:absolute; overflow:hidden; }
.flip-frame img{ position:absolute; display:block; max-width:none; }
.flip-sheet{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  transform-style:preserve-3d;
  z-index:5;
}
.flip-sheet.next{ left:50%; transform-origin:left center; animation:flipNext .7s cubic-bezier(.4,.1,.25,1) forwards; }
.flip-sheet.prev{ left:0; transform-origin:right center; animation:flipPrev .7s cubic-bezier(.4,.1,.25,1) forwards; }
.flip-face{
  position:absolute;
  inset:0;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.flip-face.back{ transform:rotateY(180deg); }
@keyframes flipNext{ from{ transform:rotateY(0deg); } to{ transform:rotateY(-180deg); } }
@keyframes flipPrev{ from{ transform:rotateY(0deg); } to{ transform:rotateY(180deg); } }
.flip-foot{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:0 24px 22px;
  min-width:0;
}
.flip-label{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.flip-thumbs{
  display:flex;
  gap:10px;
  max-width:100%;
  overflow-x:auto;
  padding:3px 3px 6px;
  scrollbar-width:thin;
}
.flip-thumb{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.flip-thumb-page{
  position:relative;
  display:block;
  height:30px;
  border-radius:1px;
  overflow:hidden;
  background:#FFFFFF;
  box-shadow:0 0 0 1px var(--border-strong);
}
.flip-thumb.active{ color:var(--accent); }
.flip-thumb.active .flip-thumb-page{ box-shadow:0 0 0 2px var(--accent); }
body.theme-dark .flip-thumb.active{ color:var(--cognac-light); }
/* ==========================================================================
   VOORTGANG, MELDINGEN, SLEPEN
   ========================================================================== */
.spinner{
  width:14px; height:14px;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  animation:spin .8s linear infinite;
  flex:0 0 auto;
  opacity:.8;
}
.spinner-lg{ width:28px; height:28px; border-width:3px; color:var(--accent); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.progress-bar{
  display:block;
  width:100%;
  height:6px;
  border-radius:999px;
  background:var(--surface-3);
  overflow:hidden;
}
.progress-bar i{
  display:block;
  height:100%;
  width:0%;
  border-radius:inherit;
  background:var(--accent);
  transition:width .2s ease;
}

.busy-overlay{
  position:fixed;
  inset:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(20,27,45,.5);
  backdrop-filter:blur(3px);
}
.busy-card{
  width:min(380px, calc(100vw - 32px));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:28px 28px 24px;
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  text-align:center;
}
#busyTitle,
#confirmTitle{ font-family:var(--font-serif); font-size:24px; font-weight:600; line-height:1.15; }
#confirmText{ font-size:14px; color:var(--text-2); line-height:1.5; }
.confirm-card{ align-items:stretch; text-align:left; gap:12px; }
.confirm-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.preview-notice{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 16px;
  background:var(--accent-soft);
  color:var(--text-2);
  font-size:12.5px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
#busyText{ font-size:13.5px; color:var(--muted); min-height:1.4em; }
.busy-card .progress-bar{ margin-top:6px; }

.toast-host{
  position:fixed;
  right:20px;
  bottom:calc(var(--spreadbar-h) + var(--strip-h) + 16px);
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  pointer-events:none;
}
body.overlay-open .toast-host{
  top:auto;
  right:auto;
  left:50%;
  bottom:104px;
  transform:translateX(-50%);
  align-items:center;
}
.toast{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(560px, calc(100vw - 32px));
  padding:11px 14px 11px 16px;
  border-radius:12px;
  background:var(--navy-ink);
  color:var(--warm-white);
  font-size:13.5px;
  font-weight:500;
  box-shadow:var(--shadow-lg);
  pointer-events:auto;
  animation:toastIn .2s ease-out;
}
body.theme-dark .toast{ background:#F3EEE6; color:var(--navy-ink); }
.toast .icon{ color:var(--cognac-light); }
body.theme-dark .toast .icon{ color:var(--cognac); }
.toast.toast-error .icon{ color:#F08A7E; }
body.theme-dark .toast.toast-error .icon{ color:#B42318; }
.toast-action{
  margin-left:4px;
  padding:5px 10px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.12);
  color:inherit;
  font-weight:700;
  cursor:pointer;
}
body.theme-dark .toast-action{ background:rgba(20,27,45,.08); }
.toast-action:hover{ background:rgba(255,255,255,.2); }
.toast.leaving{ opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.drop-overlay{
  position:fixed;
  inset:0;
  z-index:800;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(20,27,45,.45);
  pointer-events:none;
}
.drop-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:34px 46px;
  border:2px dashed var(--cognac-light);
  border-radius:20px;
  background:var(--surface);
  color:var(--accent);
  box-shadow:var(--shadow-lg);
}
.drop-card strong{ font-size:16px; color:var(--text); }

/* scrollbars */
.photo-grid::-webkit-scrollbar,
.start-scroll::-webkit-scrollbar,
.start-thumbs::-webkit-scrollbar{ width:10px; height:10px; }
.photo-grid::-webkit-scrollbar-thumb,
.start-scroll::-webkit-scrollbar-thumb,
.start-thumbs::-webkit-scrollbar-thumb{
  background:var(--border-strong);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:padding-box;
}

/* ==========================================================================
   KLEINERE SCHERMEN
   ========================================================================== */
@media (max-width:1520px){
  #topbar .brand-app{ display:none; }
}
@media (max-width:1440px){
  :root{ --panel-w:310px; }
  .spreadbar{ gap:6px; padding-left:16px; }
  .sb-slider input[type=range]{ width:54px; }
  .sb-slider{ gap:6px; padding:0 8px; }
  .sb-color .btn-text{ display:none; }
  .sb-color{ padding:0 4px 0 8px; }
}
@media (max-width:1320px){
  :root{ --panel-w:290px; }
  .chip-group{ gap:5px; }
  .chip{ padding:0 9px; }
  .sb-slider input[type=range]{ width:44px; }
  .bar-label{ padding-right:10px; margin-right:2px; }
  .brand-app{ display:none; }
  .sb-color .btn-text{ display:none; }
  .sb-color{ padding:0 4px 0 8px; }
  #topbar .btn-ghost .btn-text{ display:none; }
  #topbar .btn-ghost{ width:36px; padding:0; }
}
@media (max-width:1200px){
  :root{ --panel-w:270px; }
  .chip{ padding:0 9px; font-size:12px; }
  .bar-label{ display:none; }
  .sb-add .btn-text{ display:none; }
  .sb-add{ width:36px; padding:0; }
}
@media (max-width:1180px){
  .view-controls, .zoom-controls{ width:auto; }
  .view-btn{ width:28px; }
  .zoom-level{ min-width:44px; }
  #viewDesignBtn .btn-text{ display:none; }
  #viewDesignBtn{ width:40px; padding:0; }
}
@media (max-width:1080px){
  .sb-slider-label{ display:none; }
  .project-chip-count{ display:none; }
  .photo-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bar-head{ width:124px; padding-left:14px; }
  .chip-group{ gap:4px; }
  .chip{ padding:0 8px; font-size:11.5px; }
}
@media (max-width:1000px){
  .start-content{ padding:20px 24px 24px; }
  .start-top{ grid-template-columns:minmax(0, 1fr); gap:20px; }
  .mode-grid{ grid-template-columns:minmax(0, 1fr); }
  .start-thumbs{ grid-template-columns:repeat(8, minmax(0, 1fr)); }
  .start-thumbs.expanded{ max-height:calc((100cqw - 42px) / 8 * 4 + 18px); }
  .flip-main{ gap:12px; }
  .flip-nav{ width:44px; height:44px; }
}
@media (max-height:760px){
  :root{ --strip-h:90px; --layoutbar-h:68px; }
  .layout-tile{ height:38px; }
}
@media (max-width:860px){
  .brand-prints, .brand-bar{ display:none; }
  #appBody{ flex-direction:column; }
  #photoPanel{ width:auto; flex:0 0 220px; border-right:0; border-bottom:1px solid var(--border); }
  .photo-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .panel-hint{ display:none; }
  .strip-head{ width:auto; padding:0 12px 0 16px; }
  .strip-count{ display:none; }
  #topbar .btn-order .btn-text{ display:none; }
  #topbar .btn-order{ width:40px; padding:0; }
  .start-foot{ padding:0 16px; }
  .start-summary{ display:none; }
}
@media (max-width:600px){
  #topbar{ gap:2px; padding:0 8px 0 12px; }
  .brand-krm{ font-size:22px; }
  .project-chip{ margin-left:6px; padding:0 8px; gap:6px; flex:0 1 auto; }
  .project-chip > .icon{ display:none; }
  #projectSummaryName{ max-width:96px; }
  .topbar-divider{ display:none; }
  .history-controls .icon-btn, #topbar .icon-btn, #topbar .btn{ width:32px; height:32px; }
  .popover{ left:8px !important; right:8px; width:auto; }
  .start-content{ padding:16px; }
  .start-thumbs{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .strip-head{ display:none; }
  .bar-head{ display:none; }
  .flip-nav{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

.canvasStage.drop-over{ outline:2px dashed var(--accent) !important; outline-offset:6px; }

body.flip-open .toast-host{
  top:calc(var(--topbar-h) + 14px);
  bottom:auto;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  align-items:center;
}

/* HEX-kleurcode naast de kleurkiezer */
.hex-input{
  width:76px;
  height:26px;
  padding:0 6px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
  text-transform:uppercase;
  color:var(--text);
}
.hex-input:hover{ border-color:var(--border); background:var(--surface); }
.hex-input:focus{ outline:none; border-color:var(--accent); background:var(--surface); }
.hex-input.invalid{ border-color:var(--danger); }
.color-box .hex-input{ flex:1 1 auto; width:auto; min-width:0; font-size:13px; }
.sb-color label{ cursor:default; }

/* boek: verschuift naar het midden als het dicht is */
.flip-book{ transition:transform .7s cubic-bezier(.4,.1,.25,1); }
.flip-book.no-anim{ transition:none; }
.flip-page.is-blank{ visibility:hidden; box-shadow:none; }
.flip-page.is-cover{ border-radius:2px 4px 4px 2px; }
.flip-page.left.is-cover{ border-radius:4px 2px 2px 4px; }
.flip-cover{
  container-type:size;
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    #1F2A44;
  color:#F7F3EC;
  text-align:center;
  padding:8%;
}
.flip-cover--back{ justify-content:flex-end; padding-bottom:7%; }
.flip-cover-title{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:min(12cqw, 14cqh);
  line-height:1.1;
  letter-spacing:.01em;
}
.flip-cover-line{ width:12cqw; height:1px; background:#D9A57A; }
.flip-cover-mark{ font-size:max(5px, 3cqh); font-weight:600; letter-spacing:.24em; color:#D6B48C; opacity:.8; }

/* ==========================================================================
   OMSLAG EN SCHUTBLAD
   ========================================================================== */
.dialog-overlay{
  position:fixed;
  inset:0;
  z-index:700;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(20,27,45,.45);
  backdrop-filter:blur(2px);
}
.dialog-card{
  width:min(640px, 100%);
  max-height:calc(100vh - 32px);
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:18px 20px 18px;
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-lg);
}
.dialog-head{ display:flex; align-items:center; justify-content:space-between; }
.dialog-head strong{ font-size:17px; }
.dialog-section{ display:flex; flex-direction:column; gap:10px; }
.dialog-note{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.45; }
.dialog-actions{ display:flex; justify-content:flex-end; }
#coverUpload{ display:none; }
.cover-row{ display:flex; gap:18px; align-items:flex-start; }
.cover-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; flex:1 1 auto; }
.cover-preview{
  position:relative;
  flex:0 0 auto;
  width:280px;
  height:150px;
  border-radius:6px;
  overflow:hidden;
  background:var(--surface-3);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px var(--border);
}
.cover-preview img{ display:block; max-width:100%; max-height:100%; }
.cover-preview .flip-cover{ position:absolute; inset:0; }
.endpaper-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.endpaper-option{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:8px 8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  font-size:13px;
  font-weight:600;
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.endpaper-option:hover{ border-color:var(--border-strong); }
.endpaper-option[aria-checked="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); color:var(--text); }
.endpaper-swatch{ display:block; height:56px; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(20,27,45,.12); }

/* materialen (ook gebruikt in het boek) */
.ep-white{ background:#F8F6F1; }
.ep-black{ background:#1B1B1D; }
.ep-suede{
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(0,0,0,.07), transparent 55%),
    #8C7A69;
}
.ep-buckram{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    #2E3B55;
}
.flip-endpaper{ position:absolute; inset:0; }

/* omslag-tegel vooraan in het overzicht */

.flip-cover-img{ position:absolute; top:0; height:100%; max-width:none; }
@media (max-width:640px){
  .cover-row{ flex-direction:column; }
  .endpaper-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* schutblad-popover en -tegels */

/* fijne rillijn in het midden van een layflat spread */
.flip-crease{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:2px;
  margin-left:-1px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(to right, rgba(20,27,45,.16) 0 1px, rgba(255,255,255,.35) 1px 2px);
}

.flip-thumb-page.is-cover-single{ background:#1F2A44; box-shadow:0 0 0 1px #1F2A44; }
.flip-thumb-page.is-cover-single .flip-cover-title{ font-size:min(14cqw, 16cqh); }
.flip-thumb-page.is-endpaper-thumb::after{
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  width:1px;
  background:rgba(20,27,45,.16);
}
.flip-thumb.active .flip-thumb-page.is-cover-single{ box-shadow:0 0 0 2px var(--accent); }

/* ==========================================================================
   LIJNEN SCHUIVEN EN EIGEN LAYOUT
   ========================================================================== */
.seam-handle{
  position:absolute;
  z-index:30;
  display:none;
  align-items:center;
  justify-content:center;
}
.canvasWrapper.active .seam-handle{ display:flex; }
body.dragging-frame .seam-handle,
body.exporting .seam-handle{ display:none !important; }
.seam-handle.v{ width:calc(14px * var(--inv)); transform:translateX(-50%); cursor:ew-resize; }
.seam-handle.h{ height:calc(14px * var(--inv)); transform:translateY(-50%); cursor:ns-resize; }
.seam-handle::before{
  content:"";
  position:absolute;
  background:var(--cognac);
  opacity:0;
  transition:opacity .12s ease;
}
.seam-handle.v::before{ top:0; bottom:0; left:50%; width:calc(3px * var(--inv)); transform:translateX(-50%); }
.seam-handle.h::before{ left:0; right:0; top:50%; height:calc(3px * var(--inv)); transform:translateY(-50%); }
.seam-knob{
  position:relative;
  width:calc(24px * var(--inv));
  height:calc(24px * var(--inv));
  border-radius:50%;
  background:#FFFFFF;
  color:var(--cognac);
  box-shadow:0 calc(1px * var(--inv)) calc(5px * var(--inv)) rgba(20,27,45,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:calc(13px * var(--inv));
  font-weight:700;
  opacity:0;
  transition:opacity .12s ease;
  pointer-events:none;
}
.seam-handle:hover::before,
.seam-handle.active::before,
.seam-handle:hover .seam-knob,
.seam-handle.active .seam-knob{ opacity:1; }
body.dragging-seam-v, body.dragging-seam-v *{ cursor:ew-resize !important; }
body.dragging-seam-h, body.dragging-seam-h *{ cursor:ns-resize !important; }

/* eigen layout */
.photo-frame.is-free{ cursor:move; }
.photo-frame.is-free:active{ cursor:move; }
.free-handle{
  position:absolute;
  z-index:9;
  width:calc(12px * var(--inv));
  height:calc(12px * var(--inv));
  border-radius:50%;
  background:#FFFFFF;
  border:calc(2px * var(--inv)) solid var(--cognac);
  box-shadow:0 calc(1px * var(--inv)) calc(4px * var(--inv)) rgba(20,27,45,.3);
  display:none;
}
.free-handle.t, .free-handle.b{ width:calc(22px * var(--inv)); height:calc(8px * var(--inv)); border-radius:calc(4px * var(--inv)); left:50%; transform:translateX(-50%); cursor:ns-resize; }
.free-handle.l, .free-handle.r{ width:calc(8px * var(--inv)); height:calc(22px * var(--inv)); border-radius:calc(4px * var(--inv)); top:50%; transform:translateY(-50%); cursor:ew-resize; }
.free-handle.t{ top:calc(-4px * var(--inv)); }
.free-handle.b{ bottom:calc(-4px * var(--inv)); }
.free-handle.l{ left:calc(-4px * var(--inv)); }
.free-handle.r{ right:calc(-4px * var(--inv)); }
.free-handle.tl{ left:calc(-6px * var(--inv)); top:calc(-6px * var(--inv)); cursor:nwse-resize; }
.free-handle.tr{ right:calc(-6px * var(--inv)); top:calc(-6px * var(--inv)); cursor:nesw-resize; }
.free-handle.bl{ left:calc(-6px * var(--inv)); bottom:calc(-6px * var(--inv)); cursor:nesw-resize; }
.free-handle.br{ right:calc(-6px * var(--inv)); bottom:calc(-6px * var(--inv)); cursor:nwse-resize; }
.photo-frame.selected-frame .free-handle{ display:block; }
.photo-frame.is-free.panning .free-handle{ display:none; }
.free-guide{ position:absolute; z-index:40; background:var(--cognac-light); pointer-events:none; }
.free-guide.v{ top:0; bottom:0; width:calc(1px * var(--inv)); }
.free-guide.h{ left:0; right:0; height:calc(1px * var(--inv)); }
body.exporting .free-handle, body.exporting .free-guide{ display:none !important; }

.layout-own{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  height:44px;
  padding:0 12px;
  border:1.5px dashed var(--border-strong);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.layout-own:hover{ border-color:var(--accent); color:var(--accent); }
.layout-own.active{ border-style:solid; border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
body.theme-dark .layout-own.active, body.theme-dark .layout-own:hover{ color:var(--cognac-light); }
.sb-slider.is-off{ opacity:.45; }

/* ---------- fotobalk: klein, op de hoogte van het spreadlabel ---------- */
.photo-bar{
  position:absolute;
  z-index:30;
  display:flex;
  align-items:center;
  gap:0;
  height:24px;
  max-width:calc(100% - 16px);
  padding:1px 2px 1px 9px;
  border-radius:999px;
  background:var(--surface, #fff);
  border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(20,27,45,.10);
}
.photo-bar.hidden{ display:none; }
.photo-bar-name{
  min-width:0;
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:500;
  color:var(--muted);
  margin-right:2px;
}
.photo-bar button{
  flex:0 0 auto;
  width:22px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.photo-bar button:hover{ background:var(--accent-soft, rgba(31,42,68,.08)); }
.photo-bar svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.photo-bar .pill-sep{ flex:0 0 auto; width:1px; height:11px; margin:0 3px; background:var(--border-strong, #D2C6B5); }
.photo-bar .hand-btn[aria-pressed="true"]{ background:#1F2A44; color:#fff; }
body.theme-dark .photo-bar .hand-btn[aria-pressed="true"]{ background:#D6B48C; color:#141B2D; }
.photo-bar .bar-delete:hover{ background:rgba(180,40,40,.1); color:#B42828; }
@media (max-width:1180px){ .photo-bar-name, .photo-bar-name + .pill-sep{ display:none; } .photo-bar{ padding-left:2px; } }

/* altijd zichtbaar; actief (met rand) zodra er een foto is aangeklikt */
.photo-bar{ transition:border-color .15s, box-shadow .15s; }
.photo-bar button:disabled{ opacity:.35; cursor:default; }
.photo-bar button:disabled:hover{ background:transparent; color:var(--text); }
.photo-bar:not(.is-active){ box-shadow:none; background:transparent; }
.photo-bar.is-active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), 0 1px 4px rgba(20,27,45,.12); background:var(--surface); }
.photo-bar.is-active .photo-bar-name{ color:var(--text); }

/* spiegelknop rechts op de labelregel van de spread */
.spread-mirror{ margin-left:auto; display:inline-flex; gap:4px; }
.spread-mirror-btn.is-icon{ padding:0 6px; }
.spread-mirror-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:22px;
  margin-top:-2px;
  margin-bottom:-2px;
  padding:0 8px 0 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  font:inherit;
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
}
.spread-mirror-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.spread-mirror-btn:hover{ border-color:var(--accent); color:var(--accent); }
.canvasWrapper:not(.active) .spread-mirror-btn{ opacity:.6; }
@media (max-width:1180px){ .spread-mirror-btn span{ display:none; } .spread-mirror-btn{ padding:0 5px; } }

/* grepen laten aan de uiteinden 7px vrij: bij een T-kruising is de andere lijn
   dan ook te pakken (clip-path geldt ook voor het aanklikbare deel) */
.seam-handle.v{ clip-path:inset(calc(7px * var(--inv)) 0); }
.seam-handle.h{ clip-path:inset(0 calc(7px * var(--inv))); }

/* fotobalk zonder naam als de labelregel smal is */
.photo-bar.compact{ padding-left:2px; }
.photo-bar.compact .photo-bar-name,
.photo-bar.compact .photo-bar-name + .pill-sep{ display:none; }
/* smalle spreads (bijv. 4 in beeld): labelregel compacter */
.spreadLabel{ container-type:inline-size; }
@container (max-width: 560px){
  .spread-mirror-btn span{ display:none; }
  .spread-mirror-btn{ padding:0 6px; }
}
@container (max-width: 400px){
  .spreadLabel .spread-meta{ display:none; }
}

/* Eigen layout met een aangeklikte foto: lijngrepen even weg (hoeken pakken) */
.canvasWrapper.free-has-selection .seam-handle{ display:none !important; }

/* formaat als keuzelijst (startscherm en popover) */
.format-grid:has(.format-select){ display:block; }
.format-select{ width:100%; height:42px; font-size:15px; }
.format-grid--compact .format-select{ height:34px; font-size:13px; }
.format-select:disabled{ opacity:.7; cursor:not-allowed; }

/* opslaan in Mijn account: status naast de knop Opslaan */
.save-state{ font-size:12px; color:var(--muted); white-space:nowrap; }
.save-state[data-kind="ok"]{ color:var(--success); }
.save-state[data-kind="err"]{ color:var(--danger); font-weight:600; }
@media (max-width:1100px){ .save-state{ display:none; } }

/* heropenen uit Mijn account: foto's terugzoeken op de computer */
.relink{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px; background:rgba(20,27,45,.55); }
.relink-box{ width:min(560px, 100%); display:grid; gap:14px; padding:28px; border-radius:12px; background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg); }
.relink-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cognac); }
.relink-box h2{ margin:0; font:600 30px/1.1 "Cormorant Garamond", Georgia, serif; }
.relink-box p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.relink-btns, .relink-foot{ display:flex; gap:10px; flex-wrap:wrap; }
.relink-foot{ justify-content:space-between; margin-top:6px; }
.relink-bar{ height:8px; border-radius:4px; background:var(--border); overflow:hidden; }
.relink-bar i{ display:block; height:100%; width:0; background:var(--cognac); transition:width .3s; }
.relink-state{ color:var(--text) !important; font-weight:600; }