/* =====================
   Quest / gamification
===================== */
.quest-card{
  background: var(--card-bg);
  border-radius: var(--radius-big);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  margin: 10px 0 14px;
}

/* Level + Glimmerbos naast elkaar (50/50 in landscape) */
.quest-split{ display:flex; flex-direction: column; gap:12px; }
.quest-left, .quest-right{ flex: 1 1 0; min-width: 0; }
.quest-right{ padding: 10px 12px; border-radius: 18px; background: rgba(0,0,0,0.04); }
body.night .quest-right{ background: rgba(255,255,255,0.06); }

body.is-landscape .quest-split{ flex-direction: row; align-items: stretch; }

/* Default: 2 kolommen (Level + Glimmerbos) */
body.is-landscape .quest-left, body.is-landscape .quest-right{ width: 50%; }

/* Als samen-missie actief is: 3 kolommen (1/3 elk) */
body.is-landscape .quest-split.has-mission .quest-left,
body.is-landscape .quest-split.has-mission .quest-right,
body.is-landscape .quest-split.has-mission .quest-mission{ width: 33.333%; }

.quest-mission{ flex: 1 1 0; min-width: 0; }
.quest-mission .mission-card{ margin-top: 0; height: 100%; align-items: center; }

.quest-top{ display:flex; gap:12px; align-items:center; }
.quest-mascot{ font-size: 38px; width: 48px; height: 48px; display:flex; align-items:center; justify-content:center; border-radius: 16px; background: var(--accent-soft); }
.quest-meta{ flex:1; }
.quest-level{ font-weight: 800; }
.quest-level-title{ color: var(--accent-dark); }
.quest-bar{ height: 10px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow:hidden; margin: 6px 0 4px; }
body.night .quest-bar{ background: rgba(255,255,255,0.10); }
.quest-bar-fill{ height:100%; background: var(--accent); }
.quest-sub{ font-size: 0.8rem; color: var(--text-soft); }
.quest-streak{ text-align:right; font-weight: 900; }
.quest-streak-small{ font-size: 0.75rem; color: var(--text-soft); font-weight: 700; }
.quest-bubble{ margin-top: 10px; padding: 10px 12px; border-radius: 18px; background: var(--accent-soft); }
.quest-story{ margin-top: 10px; }
.quest-story-title{ font-weight: 900; }
.quest-story-text{ font-size: 0.9rem; color: var(--text-soft); margin-top: 2px; }
.quest-story-bar{ height: 8px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow:hidden; margin-top: 8px; }
body.night .quest-story-bar{ background: rgba(255,255,255,0.10); }
.quest-story-fill{ height:100%; background: var(--accent-dark); }

.mission-card{ margin-top: 12px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,0.6); border: 2px dashed rgba(0,0,0,0.12); display:flex; gap:10px; align-items:center; }
body.night .mission-card{ background: rgba(0,0,0,0.20); border-color: rgba(255,255,255,0.18); }
.mission-left{ flex:1; }
.mission-title{ font-weight: 900; }
.mission-text{ margin-top: 2px; }
.mission-reward{ font-size: 0.8rem; color: var(--text-soft); margin-top: 4px; }
.mission-btn{ border: none; border-radius: 16px; padding: 10px 12px; font-weight: 900; background: var(--accent); color: white; box-shadow: var(--shadow-soft); cursor:pointer; }
.mission-card.done .mission-btn{ background: rgba(0,0,0,0.25); cursor: default; }
.mission-btn:disabled{ opacity: 0.7; }

/* =====================
   Pride page
===================== */
.pride-wrapper{ padding: 16px; }
.pride-hero{ display:flex; gap:12px; align-items:center; background: var(--card-bg); border-radius: var(--radius-big); box-shadow: var(--shadow-soft); padding: 14px; }
.pride-mascot{ font-size: 46px; width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; border-radius: 20px; background: var(--accent-soft); }
.pride-hero-text h2{ margin: 0 0 4px; }
.pride-level{ font-weight: 900; }
.pride-streak{ margin-top: 6px; color: var(--text-soft); }
.pride-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 780px){ .pride-grid{ grid-template-columns: 1fr 1fr; } }
.pride-card{ background: var(--card-bg); border-radius: var(--radius-big); box-shadow: var(--shadow-soft); padding: 14px; margin-top: 12px; }
.pride-card-title{ font-weight: 900; margin-bottom: 8px; }
.pride-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pride-stat{ padding: 10px; border-radius: 16px; background: rgba(0,0,0,0.04); }
body.night .pride-stat{ background: rgba(255,255,255,0.06); }
.pride-list{ margin: 0; padding-left: 18px; }

/* =====================
   Achievements (medailles)
===================== */
.achv-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width: 900px){ .achv-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.achv-card{ border: none; width:100%; text-align:left; border-radius: 18px; padding: 12px; background: rgba(0,0,0,0.04); cursor:pointer; box-shadow: var(--shadow-soft); }
body.night .achv-card{ background: rgba(255,255,255,0.06); }
.achv-card.unlocked{ background: rgba(194,107,255,0.14); }
body.night .achv-card.unlocked{ background: rgba(194,107,255,0.20); }
.achv-emoji{ font-size: 30px; line-height: 1; }
.achv-title{ font-weight: 900; margin-top: 8px; }
.achv-desc{ font-size: .85rem; color: var(--text-soft); margin-top: 4px; min-height: 34px; }
.achv-tier{ margin-top: 10px; font-weight: 900; opacity:.85; font-size: .85rem; }

/* Popup */
.achv-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.45); display:none; align-items:center; justify-content:center; z-index: 9999; }
.achv-overlay.open{ display:flex; }
.achv-modal{ width: min(520px, 92vw); border-radius: 22px; background: var(--card-bg); color: var(--text); padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); position:relative; overflow:hidden; }
.achv-modal .big{ font-size: 58px; line-height: 1; margin: 8px 0; }
.achv-modal h3{ margin: 0 0 6px 0; font-weight: 900; }
.achv-modal p{ margin: 0; color: var(--text-soft); }
.achv-pill{ display:inline-flex; gap:8px; align-items:center; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,0.05); font-weight: 900; margin-top: 12px; }
body.night .achv-pill{ background: rgba(255,255,255,0.08); }
.achv-actions{ display:flex; justify-content:flex-end; margin-top: 14px; }
.achv-close{ border: none; border-radius: 16px; padding: 10px 14px; font-weight: 900; background: var(--accent); color: white; cursor:pointer; box-shadow: var(--shadow-soft); }
.achv-confetti{ position:absolute; inset: -20px; pointer-events:none; }
.achv-confetti i{ position:absolute; top:-12px; width:10px; height:14px; border-radius: 3px; opacity:.95; animation: achvFall 1.6s linear forwards; }
@keyframes achvFall{ to { transform: translateY(560px) rotate(420deg); opacity: 1; } }
.custom-row{ display:flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.custom-row label{ display:flex; flex-direction: column; gap: 6px; font-weight: 700; }
.custom-row input, .custom-row select{ border-radius: 14px; border: 2px solid rgba(0,0,0,0.10); padding: 10px 12px; background: transparent; color: var(--text); }
body.night .custom-row input, body.night .custom-row select{ border-color: rgba(255,255,255,0.18); }
.btn{ border: none; border-radius: 16px; padding: 10px 14px; font-weight: 900; background: var(--accent); color: white; cursor:pointer; box-shadow: var(--shadow-soft); }

/* echte pagina */
.book-page {
position: absolute;
inset: 0;
padding: 18px;
z-index: 1;
background: radial-gradient(circle at 30% 20%, rgba(255,242,214,0.9), rgba(255,255,255,0.85));
/* ✅ voorkomt layout glitches als ergens flip-classes op page zouden komen */
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform, opacity;
}

body.night .book-page {
background: rgba(255,255,255,0.05);
}

.book-page .paper {
position: absolute;
inset: 16px;
border-radius: 22px;
background: rgba(255,255,255,0.75);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

body.night .book-page .paper {
background: rgba(255,255,255,0.06);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* gaatjes links alsof ring/boek */
.book-page .holes {
position: absolute;
left: 18px;
top: 28px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0,0,0,0.10);
box-shadow: 0 34px 0 rgba(0,0,0,0.10), 0 68px 0 rgba(0,0,0,0.10), 0 102px 0 rgba(0,0,0,0.10), 0 136px 0 rgba(0,0,0,0.10);
opacity: 0.55;
z-index: 3;
}

body.night .book-page .holes {
background: rgba(255,255,255,0.12);
box-shadow: 0 34px 0 rgba(255,255,255,0.12), 0 68px 0 rgba(255,255,255,0.12), 0 102px 0 rgba(255,255,255,0.12), 0 136px 0 rgba(255,255,255,0.12);
}

.book-stickers {
position: absolute;
inset: 0;
z-index: 5;
/* ✅ voorkomt dat stickers “mee schalen” bij 3D flip glitches */
transform-style: preserve-3d;
backface-visibility: hidden;
}

/* sticker op pagina (random plek) */
.book-sticker {
position: absolute;
width: 150px;
height: 150px;
border-radius: 20px;
display: grid;
place-items: center;
background: rgba(194,107,255,0.18);
box-shadow: 0 10px 18px rgba(0,0,0,0.10);
transform: translate(-50%, -50%);
overflow: hidden;
/* ✅ rendering stabiliteit */
will-change: transform, opacity;
backface-visibility: hidden;
}

.book-sticker .sticker-card {
width: 100%;
height: 100%;
border-radius: 20px;
background: rgba(255,255,255,0.55);
display: grid;
place-items: center;
position: relative;
padding: 12px;
}

body.night .book-sticker .sticker-card {
background: rgba(255,255,255,0.06);
}

.book-sticker .sticker-inner {
text-align: center;
display: grid;
gap: 6px;
}

.book-sticker .sticker-name {
font-size: 0.95rem;
font-weight: 800;
}

.book-sticker .sticker-icon {
font-size: 2.2rem;
line-height: 1;
}

.book-sticker.sticker-locked {
filter: grayscale(1);
opacity: 0.35;
}

.book-nav {
display: flex;
align-items: center;
gap: 10px;
}

.book-page-indicator {
font-weight: 700;
font-size: 0.9rem;
color: var(--text-soft);
}

/* =========================
STICKERBOEK - OPEN BOEK + PAGE FLIP (CLEAN)
========================= */

/* De container waar jouw JS in rendert (id="stickerBook") */
#stickerBook {
position: relative;
width: min(840px, 96vw);
height: min(540px, 65vh);
margin: 10px auto 0;
border-radius: 26px;
box-shadow: 0 18px 40px rgba(0,0,0,0.14);
overflow: hidden;
background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.90));
border: 1px solid rgba(0,0,0,0.06);
/* ✅ 3D flip stabiliteit */
perspective: 1000px;
}

body.night #stickerBook {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
}

/* ✅ FIX: bookPages moet een overlay stage zijn */
#bookPages{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}

/* rug/spine */
#stickerBook::before {
content:"";
position:absolute;
top:0; bottom:0;
left:50%;
width:16px;
transform:translateX(-50%);
background: linear-gradient(
  90deg,
  rgba(0,0,0,0.12),
  rgba(255,255,255,0.18),
  rgba(0,0,0,0.12)
);
opacity:0.45;
pointer-events:none;
z-index: 4;
}

/* Als je pijlen gebruikt met IDs bookPrevBtn/bookNextBtn */
#bookPrevBtn, #bookNextBtn {
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:30;
width:44px;
height:64px;
border-radius:999px;
border:none;
cursor:pointer;
font-size:28px;
font-weight:900;
background: rgba(255,255,255,0.72);
box-shadow: 0 10px 22px rgba(0,0,0,0.18);
color:#333;
}
body.night #bookPrevBtn,
body.night #bookNextBtn {
background: rgba(255,255,255,0.10);
color:#fff;
}
#bookPrevBtn { left:10px; }
#bookNextBtn { right:10px; }
#bookPrevBtn:disabled,
#bookNextBtn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }

/* Spread (open boek) */
#stickerBook .book-spread {
position:absolute;
inset:0;
display:grid;
grid-template-columns: 1fr 1fr;
gap:0;

/* ✅ stacking + isolatie zodat spreads elkaar niet beïnvloeden */
isolation: isolate;
z-index: 2;

width: 100%;
height: 100%;
overflow: hidden;

/* ✅ 3D */
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform, opacity;
}

/* ✅ Oude spread tijdens animatie “uitzetten” */
#stickerBook .book-spread.flip-out-next,
#stickerBook .book-spread.flip-out-prev{
pointer-events: none;
z-index: 1;
}

/* Linker/rechter pagina */
#stickerBook .book-side {
position: relative;
margin: 16px;
border-radius: 22px;
background: radial-gradient(circle at 30% 20%, rgba(255,242,214,0.9), rgba(255,255,255,0.85));
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
overflow: hidden;

/* ✅ fixed sizing zodat stickers niet kunnen overlap-wrappen */
min-width: 0;
min-height: 0;

/* ✅ 3D stability */
transform-style: preserve-3d;
backface-visibility: hidden;
}

body.night #stickerBook .book-side {
background: rgba(255,255,255,0.05);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* gaatjes alleen links */
#stickerBook .book-side.left::before {
content:"";
position:absolute;
left: 14px;
top: 24px;
width:10px; height:10px;
border-radius:50%;
background: rgba(0,0,0,0.10);
box-shadow:
  0 34px 0 rgba(0,0,0,0.10),
  0 68px 0 rgba(0,0,0,0.10),
  0 102px 0 rgba(0,0,0,0.10),
  0 136px 0 rgba(0,0,0,0.10);
opacity:0.55;
pointer-events:none;
}

body.night #stickerBook .book-side.left::before {
background: rgba(255,255,255,0.12);
box-shadow:
  0 34px 0 rgba(255,255,255,0.12),
  0 68px 0 rgba(255,255,255,0.12),
  0 102px 0 rgba(255,255,255,0.12),
  0 136px 0 rgba(255,255,255,0.12);
}

/* SUPER BELANGRIJK:
 De laag waarop jouw JS left/top % plakt moet de hele pagina vullen */
#stickerBook .book-stickers {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 10;

/* ✅ voorkomt “stacking” glitches bij flip */
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform, opacity;
}

/* Sticker zelf */
#stickerBook .book-sticker {
position:absolute;
width: 150px;
height: 150px;
border-radius: 20px;
transform: translate(-50%, -50%);
box-shadow: 0 10px 18px rgba(0,0,0,0.10);
overflow: hidden;

/* ✅ rendering stabiliteit */
will-change: transform, opacity;
backface-visibility: hidden;
}

#stickerBook .book-sticker .sticker-card {
width:100%;
height:100%;
border-radius:20px;
background: rgba(255,255,255,0.55);
display:grid;
place-items:center;
position:relative;
padding: 12px;
}
body.night #stickerBook .book-sticker .sticker-card {
background: rgba(255,255,255,0.06);
}

#stickerBook .book-sticker .sticker-inner {
text-align:center;
display:grid;
gap:6px;
}

#stickerBook .book-sticker .sticker-name {
font-size:0.95rem;
font-weight:800;
}

#stickerBook .book-sticker .sticker-icon {
font-size:2.2rem;
line-height:1;
}

#stickerBook .book-sticker.sticker-locked {
filter: grayscale(1);
opacity: 0.35;
}

/* count badge */
#stickerBook .sticker-count {
position:absolute;
right:10px;
top:10px;
background: radial-gradient(circle at 30% 30%, #fff 0, #ffe082 35%, #ffca28 100%);
color: #4b2c00;
font-weight: 900;
padding: 6px 10px;
border-radius: 999px;
box-shadow: 0 8px 16px rgba(0,0,0,0.18);
border: 2px solid rgba(255,255,255,0.8);
}

/* --- page flip animaties --- */
/* ✅ Zet animatie op de spread (niet op losse stickers/pagina’s) */
#stickerBook .flip-out-next { animation: flipOutNext 420ms ease-in forwards; transform-origin: 50% 50%; }
#stickerBook .flip-in-next  { animation: flipInNext  420ms ease-out forwards; transform-origin: 50% 50%; }
#stickerBook .flip-out-prev { animation: flipOutPrev 420ms ease-in forwards; transform-origin: 50% 50%; }
#stickerBook .flip-in-prev  { animation: flipInPrev  420ms ease-out forwards; transform-origin: 50% 50%; }

@keyframes flipOutNext { from{ transform: rotateY(0deg); opacity:1; } to{ transform: rotateY(-35deg); opacity:0; } }
@keyframes flipInNext  { from{ transform: rotateY(35deg); opacity:0; } to{ transform: rotateY(0deg); opacity:1; } }
@keyframes flipOutPrev { from{ transform: rotateY(0deg); opacity:1; } to{ transform: rotateY(35deg); opacity:0; } }
@keyframes flipInPrev  { from{ transform: rotateY(-35deg); opacity:0; } to{ transform: rotateY(0deg); opacity:1; } }


/* =========================
ADMIN PAGINA (admin.html)
========================= */
body.admin-page {
min-height: 100vh;
overflow: auto;
}

body.admin-page header.admin-header {
padding: 16px 16px 10px;
gap: 14px;
background: transparent;
}

.admin-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}

.admin-header-left{
display:flex;
align-items:center;
gap:14px;
min-width: 280px;
}

.profile-pic{
width: 44px;
height: 44px;
border-radius: 999px;
background: var(--accent-soft);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-shadow: var(--shadow-soft);
}
.profile-pic span{ font-weight: 800; }
.profile-pic img{ width:100%; height:100%; object-fit: cover; }

.profile-pic.profile-pic-lg{
width: 56px;
height: 56px;
}

.points.admin-points{
display:flex;
flex-direction: column;
align-items:flex-end;
gap: 2px;
padding: 8px 12px;
border-radius: 16px;
background: var(--accent-soft);
box-shadow: var(--shadow-soft);
}
.points-label{ font-size: .8rem; color: var(--text-soft); }
.points-value{ font-size: 1.25rem; font-weight: 900; }

.admin-page-content{
padding: 0 16px 18px;
}

.admin-shell{
display:grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 14px;
align-items: start;
max-width: 1200px;
margin: 0 auto;
}

.admin-sidebar{
position: sticky;
top: 10px;
align-self: start;
padding: 12px;
border-radius: 18px;
background: var(--card-bg);
box-shadow: var(--shadow-soft);
border: 1px solid rgba(0,0,0,0.05);
}

body.night .admin-sidebar{
border-color: rgba(255,255,255,0.08);
}

.admin-sidebar-title{
font-weight: 900;
margin-bottom: 10px;
font-size: 1rem;
}

.admin-nav{
display:flex;
flex-direction: column;
gap: 8px;
}

.admin-nav-link{
border: none;
border-radius: 14px;
padding: 10px 12px;
background: var(--accent-soft);
color: var(--text);
text-align: left;
cursor: pointer;
transition: transform .08s ease, filter .12s ease;
}
.admin-nav-link:active{ transform: scale(0.99); }
.admin-nav-link.active{
background: var(--accent);
color: #fff;
}

.admin-sidebar-footer{
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(0,0,0,0.06);
}
body.night .admin-sidebar-footer{
border-top-color: rgba(255,255,255,0.08);
}

.main-link-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 8px;
padding: 10px 12px;
border-radius: 14px;
background: var(--accent);
color: #fff;
text-decoration: none;
border: none;
cursor: pointer;
font-weight: 800;
box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}
.main-link-button:active{ transform: scale(0.99); }
.sidebar-main-button{
width: 100%;
}

.admin-main{
min-width: 0;
}

.admin-section-card{
background: var(--card-bg);
border-radius: 22px;
box-shadow: var(--shadow-soft);
padding: 14px;
margin-bottom: 14px;
border: 1px solid rgba(0,0,0,0.05);
}
body.night .admin-section-card{
border-color: rgba(255,255,255,0.08);
}

.admin-section-title{
margin: 0 0 4px;
font-size: 1.2rem;
}
.admin-section-subtitle{
margin: 0 0 12px;
color: var(--text-soft);
font-size: .9rem;
}

.admin-two-column{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}

.admin-two-column-narrow{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.admin-section{
padding: 10px;
border-radius: 16px;
background: rgba(0,0,0,0.02);
}
body.night .admin-section{
background: rgba(255,255,255,0.03);
}

.admin-field{
display:flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
}
.admin-field-label{
font-size: .85rem;
color: var(--text-soft);
}
.admin-field input[type="text"],
.admin-field input[type="number"],
.admin-field input[type="time"],
.admin-field select{
width: 100%;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(255,255,255,0.75);
color: var(--text);
}
body.night .admin-field input[type="text"],
body.night .admin-field input[type="number"],
body.night .admin-field input[type="time"],
body.night .admin-field select{
border-color: rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
}

.admin-icon-list{
display:flex;
flex-direction: column;
gap: 10px;
}

.admin-tasks-block{
margin-top: 10px;
}
.admin-tasks-header{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}

.admin-bottom-back{
display:none;
}

@media (max-width: 980px){
.admin-shell{
grid-template-columns: 1fr;
}
.admin-sidebar{
position: relative;
top: 0;
}
.admin-two-column,
.admin-two-column-narrow{
grid-template-columns: 1fr;
}
.admin-bottom-back{
display:block;
}
}
.book-sticker.sticker-empty {
opacity: 0.25;
filter: grayscale(1);
}

.book-sticker.sticker-owned {
opacity: 1;
filter: none;
}

.book-sticker.sticker-empty .sticker-count {
display: none;
}


/* =========================
   🛠 Admin Debug panel
   ========================= */
.admin-debug-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 8px 0 6px;
}
.admin-debug-pre{
  width: 100%;
  max-height: 360px;
  overflow:auto;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  line-height: 1.35;
}
.admin-debug-kv{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-top: 10px;
}
.admin-debug-row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.admin-debug-row .k{
  opacity: .85;
  font-weight: 700;
}
.admin-debug-row .v{
  opacity: .95;
  text-align:right;
}

/* Pride top layout */
.pride-top{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.pride-top .pride-hero{ flex: 1 1 320px; }
.pride-customizer{ flex: 1 1 420px; margin-top: 0; }
@media (min-width: 980px){ .pride-customizer{ max-width: 460px; } }
/* Make 'Maak het jouw planner' compact: theme + mascot + name inline */
.pride-customizer .custom-row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.pride-customizer .custom-row label{ min-width: 0; }
.pride-customizer .custom-row input,
.pride-customizer .custom-row select{
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
}
.pride-customizer #saveCustomizeBtn{ white-space: nowrap; padding: 10px 14px; border-radius: 16px; }

@media (max-width: 720px){
  .pride-customizer .custom-row{ grid-template-columns: 1fr; }
  .pride-customizer #saveCustomizeBtn{ width: 100%; }
}