/* Rekenheld page styles — light theme afgeleid van Schoolbaas.nl huisstijl.
   Tokens komen uit css/brand.css. Laad brand.css altijd vóór dit bestand. */

*{box-sizing:border-box}

body{
  margin:0;
  height:100vh;
  overflow:hidden;
  padding:0;
  /* fonts + base background staan in brand.css */
}

.app{
  width:100%;
  height:100vh;
  display:grid;
  grid-template-columns: 32% 1fr;
  gap:0;
  padding:0;
}
@media (max-width: 900px){
  .app{ grid-template-columns:1fr; height:auto; }
}

.card{
  background:#fff;
  border-right: 1px solid var(--ring-subtle);
  box-shadow: 0 0 60px -20px rgba(15,23,42,.08);
  overflow-y:auto;
  overflow-x:hidden;
  height:100vh;
}
.card.left{ border-radius:0; }
.card.left .pad{ padding-bottom:40px; }
.card.right{
  border:none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(196,181,253,.45) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  padding:0;
}

.pad{padding:20px}

h1{
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  margin:0 0 6px 0;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
}
.sub{ color:var(--ink-muted); font-size:13px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.pill{
  background:#fff;
  border:1px solid var(--ring-subtle);
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  display:inline-flex;
  gap:8px;
  align-items:center;
  box-shadow: var(--shadow-chip);
}
.pill b{ color: var(--brand-700); font-weight:700; }

.big{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:46px;
  letter-spacing:-.02em;
  font-weight:800;
  margin:8px 0 6px 0;
  line-height:1.0;
  color:var(--ink);
}

.equation{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.eq{
  background: var(--cream-warm);
  border: 1px solid var(--ring-subtle);
  border-radius: 18px;
  padding:16px 18px;
  min-height:78px;
  width:100%;
}

.inputWrap{
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:center;
  flex-wrap:wrap;
}
input[type="text"]{
  width:min(220px, 100%);
  padding:14px 16px;
  border-radius:14px;
  border:1.5px solid var(--ring-soft);
  background:#fff;
  color:var(--ink);
  font-size:18px;
  font-weight:600;
  outline:none;
  font-family:inherit;
  transition: border-color .2s, box-shadow .2s;
}
input[type="text"]:focus{
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(196,181,253,.35);
}

button{
  border:none;
  border-radius:999px;
  padding:13px 22px;
  font-size:15px;
  cursor:pointer;
  color:#fff;
  font-weight:600;
  font-family:inherit;
  background: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform .2s, background .2s, box-shadow .2s;
}
button:hover{
  background: var(--brand-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}
button.secondary{
  background:#fff;
  color: var(--ink);
  border:1px solid var(--ring-soft);
  box-shadow:none;
  font-weight:600;
}
button.secondary:hover{
  background: var(--cream-deep);
  border-color: var(--ring-strong);
  box-shadow:none;
  transform:none;
}
button:active{transform: translateY(1px)}

#saveSettingsBtn:hover{
  transform: scale(1.02);
  box-shadow: var(--shadow-glow);
}
#saveSettingsBtn:active{ transform: scale(0.98); }

.msg{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--ring-subtle);
  background:#fff;
  color: var(--ink-muted);
  font-size:14px;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
}
.msg.good{ border-color: rgba(16,185,129,.35); background:#ECFDF5; color:#047857; }
.msg.bad{  border-color: rgba(239,68,68,.30);  background:#FEF2F2; color:#B91C1C; }

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.panelTitle{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-weight:800;
  margin:0 0 8px 0;
  color:var(--ink);
}

.opt{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--ring-subtle);
  background: var(--cream-warm);
}
.opt label{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  color:var(--ink-soft); font-size:14px; font-weight:500;
}
.opt input[type="checkbox"]{ transform: scale(1.15); accent-color: var(--brand-600); }

select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--ring-soft);
  background:#fff;
  color: var(--ink);
  outline:none;
  font-family:inherit;
  font-size:14px;
}

.stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.stat{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--ring-subtle);
  background:#fff;
  box-shadow: var(--shadow-soft);
}
.stat .k{
  color:var(--ink-muted);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.stat .v{
  font-size:20px;
  font-weight:800;
  margin-top:4px;
  color:var(--brand-700);
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
}

.small{font-size:12px; color:var(--ink-muted)}

.badgeRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.badge{
  padding:7px 12px;
  border-radius:999px;
  border:1px dashed var(--ring-soft);
  background: var(--cream-warm);
  color: var(--ink-muted);
  font-size:12px;
  font-weight:600;
}
.badge.on{
  border-style:solid;
  background: var(--brand-100);
  border-color: var(--brand-200);
  color: var(--brand-800);
}

.footerBtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.sparkle{
  position: fixed;
  pointer-events:none;
  inset:0;
  overflow:hidden;
}
.sparkle span{
  position:absolute;
  font-size:16px;
  animation: pop 900ms ease-out forwards;
  opacity:0;
}
@keyframes pop{
  0%{transform: translateY(0) scale(.8); opacity:0}
  20%{opacity:1}
  100%{transform: translateY(-80px) scale(1.2); opacity:0}
}

/* World grid (kid's village) — keep playful colors but harmonised */
.worldSection{margin-top:16px}
.worldGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:3px;
  margin-top:10px;
  padding:16px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(186,230,253,.40) 0%, rgba(167,243,208,.30) 50%, rgba(34,139,34,.20) 100%);
  border: 2px solid rgba(124,58,237,.18);
  min-height:400px;
  max-height:500px;
  overflow-y:auto;
  box-shadow: inset 0 2px 12px rgba(15,23,42,.08);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
@media (max-width: 600px){
  .worldGrid{ grid-template-columns: repeat(8, 1fr); gap:2px; padding:8px; }
  .gridCell{font-size:18px}
}
.gridCell{
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid rgba(11,17,32,.10);
  background: linear-gradient(135deg, rgba(167,243,208,.6) 0%, rgba(34,197,94,.5) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  cursor:pointer;
  transition: all 150ms;
  position:relative;
  box-shadow:
    inset -1px -1px 3px rgba(0,0,0,.10),
    inset 1px 1px 2px rgba(255,255,255,.5),
    0 1px 2px rgba(15,23,42,.05);
}
.gridCell:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    inset -1px -1px 3px rgba(0,0,0,.10),
    inset 1px 1px 2px rgba(255,255,255,.6),
    0 4px 8px rgba(124,58,237,.30);
  border-color: rgba(124,58,237,.45);
}
.gridCell:active{ transform: translateY(0) scale(0.98); }
.gridCell.filled{
  background: linear-gradient(135deg, rgba(180,83,9,.6) 0%, rgba(120,53,15,.7) 100%);
  border-color: rgba(11,17,32,.30);
  box-shadow:
    inset -2px -2px 4px rgba(0,0,0,.30),
    inset 2px 2px 3px rgba(255,255,255,.15),
    0 3px 6px rgba(15,23,42,.10);
}
.gridCell.filled:hover{
  background: linear-gradient(135deg, rgba(180,83,9,.7) 0%, rgba(120,53,15,.8) 100%);
}
.removeBtn{
  position:absolute;
  top:-4px;
  right:-4px;
  width:20px;
  height:20px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--coral-400), var(--coral-600));
  color:#fff;
  font-size:12px;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-weight:900;
  box-shadow: 0 2px 8px rgba(244,63,94,.4);
  transition: transform 100ms;
  padding:0;
}
.removeBtn:hover{ transform: scale(1.1); }
.gridCell.filled:hover .removeBtn{display:flex}

.worldTitle{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:16px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
}

.shop{margin-top:12px}
.shopCategories{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.categoryTab{
  padding:8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ring-subtle);
  background:#fff;
  color: var(--ink-soft);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition: all 200ms;
  font-family:inherit;
  box-shadow:none;
}
.categoryTab:hover{ background: var(--cream-deep); }
.categoryTab.active{
  background: var(--brand-100);
  color: var(--brand-800);
  border-color: var(--brand-300);
  font-weight:700;
}
.categoryTab.locked{ opacity:.4; cursor:not-allowed; }

.shopItems{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap:10px;
}
.shopItem{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ring-subtle);
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition: all 200ms;
  position:relative;
  box-shadow: var(--shadow-soft);
}
.shopItem:hover{
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.shopItem.selected{
  background: var(--brand-50);
  border: 2px solid var(--brand-500);
  box-shadow: 0 0 0 4px rgba(196,181,253,.30);
}
.shopItem.locked{ opacity:.35; cursor:not-allowed; }
.shopItem.locked:hover{ transform:none; box-shadow:var(--shadow-soft); }
.shopItemEmoji{font-size:32px}
.shopItemName{font-size:11px; color:var(--ink-muted); font-weight:500;}
.shopItemCost{
  font-size:12px;
  font-weight:700;
  color: var(--good-700);
  display:flex;
  align-items:center;
  gap:4px;
}

.newBadge{
  position:absolute;
  top:-6px;
  right:-6px;
  background: var(--coral-500);
  color:#fff;
  font-size:9px;
  font-weight:900;
  padding:2px 6px;
  border-radius:999px;
  animation: pulse 2s infinite;
}
.tab .newBadge{
  position:relative; top:0; right:0;
  margin-left:6px;
  display:inline-block;
}
@keyframes pulse{
  0%, 100%{transform: scale(1)}
  50%{transform: scale(1.1)}
}

.inventoryCount{
  position:absolute;
  bottom:6px;
  right:6px;
  background: var(--ink);
  color:#fff;
  font-size:10px;
  font-weight:800;
  padding:2px 6px;
  border-radius:999px;
  min-width:18px;
  text-align:center;
}

.worldEmpty{
  grid-column: 1/-1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--ink-muted);
  font-size:14px;
  padding:40px 20px;
}
.worldEmpty .big{font-size:48px; margin:0}

.tabBar{
  display:flex;
  gap:8px;
  margin-bottom:12px;
  border-bottom:1px solid var(--ring-subtle);
  padding-bottom:8px;
}
.tab{
  padding:10px 16px;
  border-radius: 12px 12px 0 0;
  background: transparent;
  color: var(--ink-muted);
  border:1px solid transparent;
  border-bottom:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  transition: all 200ms;
}
.tab:hover{ background: var(--cream-deep); }
.tab.active{
  background: var(--brand-50);
  color: var(--brand-700);
  border-color: var(--brand-200);
}
.tabContent{display:none}
.tabContent.active{display:block}
.modalTabContent{display:none}
.modalTabContent.active{display:block}

/* Stickervel styling */
.stickerPage{
  background: transparent;
  border-radius:0;
  padding:32px;
  box-shadow:none;
  height:100%;
  overflow-y:auto;
}
.stickerPageTitle{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:32px;
  font-weight:800;
  color: var(--ink);
  margin:0 0 8px 0;
  text-align:center;
  letter-spacing:-.02em;
}
.stickerPageSub{
  text-align:center;
  color: var(--ink-muted);
  font-size:15px;
  margin-bottom:28px;
}
.stickerGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  margin-bottom:30px;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width: 900px){
  .stickerGrid{ grid-template-columns: repeat(2, 1fr); gap:16px; }
}
.stickerSlot{
  aspect-ratio:1;
  border:3px dashed rgba(11,17,32,.15);
  border-radius:20px;
  background: var(--cream-warm);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition: all 300ms;
  overflow:hidden;
  min-height:200px;
}
.stickerSlot.locked{
  background: var(--cream-deep);
}
.stickerSlot.unlocked{
  border-style:solid;
  border-color: var(--brand-300);
  background:#fff;
  box-shadow: var(--shadow-soft);
  cursor:pointer;
}
.stickerSlot.unlocked:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-glow);
  border-color: var(--brand-500);
}
.stickerSlot img{
  width:85%;
  height:85%;
  object-fit:contain;
  transition: transform 200ms;
}
.stickerSlot.unlocked img:hover{ transform: scale(1.05); }
.stickerNumber{
  position:absolute;
  top:10px;
  left:10px;
  background: var(--ink);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  box-shadow: var(--shadow-soft);
}
.stickerLock{
  font-size:64px;
  opacity:.20;
}
.newStickerBadge{
  position:absolute;
  top:-8px;
  right:-8px;
  background: linear-gradient(135deg, var(--coral-400), var(--coral-600));
  color:#fff;
  font-size:10px;
  font-weight:900;
  padding:5px 10px;
  border-radius:999px;
  box-shadow: 0 4px 12px rgba(244,63,94,.4);
  animation: bounce 1s infinite;
}
@keyframes bounce{
  0%, 100%{transform: translateY(0)}
  50%{transform: translateY(-4px)}
}

.progressBar{
  background:#fff;
  border:1px solid var(--ring-subtle);
  border-radius:999px;
  height:40px;
  overflow:hidden;
  margin-bottom:32px;
  position:relative;
  box-shadow: inset 0 2px 6px rgba(15,23,42,.06);
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}
.progressFill{
  height:100%;
  background: linear-gradient(90deg, var(--brand-500), var(--coral-500));
  transition: width 500ms ease-out;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:16px;
  color:#fff;
  font-weight:700;
  font-size:15px;
}
.progressText{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  font-size:15px;
  font-weight:800;
  color: var(--ink);
  pointer-events:none;
}

/* Sticker Popup */
.stickerPopup{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(11,17,32,.55);
  backdrop-filter: blur(4px);
  z-index:2000;
  padding:40px;
  align-items:center;
  justify-content:center;
  animation: fadeIn 200ms;
}
.stickerPopup.show{ display:flex; }
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
.stickerPopupContent{
  background:#fff;
  border:1px solid var(--ring-subtle);
  border-radius:28px;
  padding:40px;
  max-width:90vw;
  max-height:90vh;
  overflow:auto;
  position:relative;
  box-shadow: var(--shadow-card);
  animation: scaleIn 300ms ease-out;
  display:flex;
  flex-direction:column;
  align-items:center;
}
@keyframes scaleIn{
  from{transform: scale(0.9); opacity:0}
  to{transform: scale(1); opacity:1}
}
.stickerPopupClose{
  position:absolute;
  top:16px;
  right:16px;
  width:44px;
  height:44px;
  border-radius:50%;
  background: var(--cream-deep);
  border:1px solid var(--ring-subtle);
  color: var(--ink);
  font-size:24px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: all 200ms;
  font-weight:600;
  line-height:1;
  z-index:10;
  box-shadow:none;
  padding:0;
}
.stickerPopupClose:hover{
  background:#fff;
  border-color: var(--ring-strong);
  transform: rotate(90deg);
}
.stickerPopupImage{
  width:100%;
  max-width:min(800px, 80vw);
  max-height:70vh;
  margin:0 auto;
  display:block;
  border-radius:16px;
  box-shadow: var(--shadow-card);
  object-fit:contain;
}
.stickerPopupNumber{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  text-align:center;
  font-size:24px;
  font-weight:800;
  color: var(--ink);
  margin-top:20px;
  margin-bottom:8px;
  letter-spacing:-.02em;
}
.stickerPopupName{
  text-align:center;
  font-size:16px;
  color: var(--ink-muted);
}

/* Modal specific overrides for readability */
#settingsModal .panelTitle{ color: var(--ink); }
#settingsModal .sub{ color: var(--ink-muted); }
#settingsModal .opt{
  background: var(--cream-warm);
  border-color: var(--ring-subtle);
}
#settingsModal select,
#settingsModal input[type="text"]{
  background:#fff;
  color: var(--ink);
  border-color: var(--ring-soft);
}
#settingsModal .stat{
  background:#fff;
  border-color: var(--ring-subtle);
}
#settingsModal .badge{
  background: var(--cream-warm);
  border-color: var(--ring-soft);
  color: var(--ink-muted);
}
#settingsModal .badge.on{
  background: var(--brand-100);
  border-color: var(--brand-200);
  color: var(--brand-800);
}

/* Login modal */
.loginModal{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(196,181,253,.55) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.loginModal.hidden{display:none}
.loginBox{
  background:#fff;
  border:1px solid var(--ring-subtle);
  border-radius:28px;
  padding:48px 40px;
  max-width:440px;
  width:100%;
  box-shadow: var(--shadow-card);
}
.loginTitle{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:32px;
  font-weight:800;
  color: var(--ink);
  margin: 0 0 8px 0;
  text-align: center;
  letter-spacing:-.02em;
}
.loginSub{
  text-align: center;
  color: var(--ink-muted);
  font-size: 15px;
  margin-bottom: 32px;
}
.loginForm{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.loginForm input{
  width: 100%;
  padding: 14px 16px;
  border-radius:14px;
  border:1.5px solid var(--ring-soft);
  background: var(--cream-warm);
  color: var(--ink);
  font-size: 15px;
  outline: none;
  transition: all 200ms;
  font-family:inherit;
}
.loginForm input::placeholder{ color: var(--ink-subtle); }
.loginForm input:focus{
  border-color: var(--brand-500);
  background:#fff;
  box-shadow: 0 0 0 4px rgba(196,181,253,.35);
}
.loginForm button{
  width: 100%;
  padding: 14px 16px;
  border-radius:999px;
  border: none;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms;
  font-family:inherit;
  box-shadow: var(--shadow-soft);
}
.loginForm button:hover{
  transform: translateY(-1px);
  background: var(--brand-700);
  box-shadow: var(--shadow-glow);
}
.loginForm button:active{ transform: translateY(0); }
.loginForm button.secondary{
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--ring-soft);
  margin-top: 6px;
  box-shadow:none;
}
.loginForm button.secondary:hover{
  background: var(--cream-deep);
  color: var(--ink);
  box-shadow:none;
  transform:none;
}

.loginError{
  background: var(--bad-100);
  border: 1px solid rgba(239,68,68,.30);
  color: var(--bad-700);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  text-align: center;
  display: none;
}
.loginError.show{display:block}
.loginSuccess{
  background: var(--good-100);
  border: 1px solid rgba(16,185,129,.30);
  color: var(--good-700);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  text-align: center;
  display: none;
}
.loginSuccess.show{display:block}
.loginToggle{
  text-align: center;
  margin-top: 20px;
  color: var(--ink-muted);
  font-size: 14px;
}
.loginToggle a{
  color: var(--brand-700);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.loginToggle a:hover{ text-decoration: underline; }

.logoutBtn{
  position: fixed;
  top: 20px;
  right: 20px;
  background:#fff;
  border: 1px solid var(--ring-subtle);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight:600;
  cursor: pointer;
  z-index: 100;
  transition: all 200ms;
  box-shadow: var(--shadow-chip);
  font-family:inherit;
}
.logoutBtn:hover{
  background: var(--cream-deep);
  border-color: var(--ring-strong);
  transform: translateY(-1px);
}

.saveIndicator{
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--ink);
  color: white;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-card);
}
.saveIndicator.show{ display: flex; }
.saveIndicator.success{ background: var(--good-500); }
.saveIndicator.error{   background: var(--bad-500); }

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner{
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Back button (consistent met taalblad) */
.back-btn{
  position: fixed;
  top: 20px;
  left: 20px;
  background:#fff;
  border: 1px solid var(--ring-subtle);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 100;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-chip);
  font-family:inherit;
}
.back-btn:hover{
  background: var(--cream-deep);
  border-color: var(--ring-strong);
  transform: translateY(-1px);
}