:root {
  --primary: #FF5722;
  --secondary: #1976D2;
  --accent: #FFD600;
  --green: #2E7D32;
  --purple: #7B1FA2;
  --bg: #F0F4F9;
  --text: #0F172A;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Fredoka', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}

/* PENCIL DRAWING & OPENING PADLOCK SPLASH SCREEN ANIMATIONS */
@keyframes drawPath {
  0% { stroke-dashoffset: 300; }
  70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* The crayon traces the padlock (0-42%), rises to the keyhole and goes in
   (42-64%), then turns like a key (64-86%) and stays put while it unlocks. */
@keyframes crayonKey {
  0%   { transform: translate(30px, 28px) rotate(-35deg); }
  12%  { transform: translate(50px, 9px)  rotate(0deg); }
  24%  { transform: translate(71px, 28px) rotate(35deg); }
  33%  { transform: translate(80px, 55px) rotate(20deg); }
  41%  { transform: translate(58px, 89px) rotate(5deg); }
  48%  { transform: translate(28px, 86px) rotate(-18deg); }
  58%  { transform: translate(50px, 63px) rotate(0deg); }
  66%  { transform: translate(50px, 63px) rotate(0deg); }
  86%  { transform: translate(50px, 63px) rotate(115deg); }
  100% { transform: translate(50px, 63px) rotate(115deg); }
}

@keyframes openPadlockShackle {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-16px) rotate(-25deg); }
}

@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 214, 0, 0.4)); }
  50% { filter: drop-shadow(0 0 25px rgba(255, 214, 0, 0.9)); }
}

@keyframes fillSplash {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes revealFill {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

@keyframes fadeInKeyhole {
  from { opacity: 0; }
  to { opacity: 1; }
}

.padlock-svg-path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawPath 1.4s forwards ease-in-out;
}

/* The shackle is drawn early (with the body), then springs open only after the
   crayon has turned the key (delayed). Two animations on different properties
   (stroke-dashoffset vs transform) compose. */
.padlock-shackle-anim {
  transform-origin: 30px 48px;
  animation: drawPath 1.4s forwards ease-in-out,
             openPadlockShackle 0.6s 2.8s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.crayon-key {
  transform-origin: 0 0; /* the crayon's tip sits at the group origin (0,0) */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  animation: crayonKey 3.3s forwards ease-in-out;
}

/* The lock body's outline is drawn by the crayon (drawPath); its white fill
   only fades in once the outline is traced, so nothing looks pre-drawn. */
.padlock-body-anim {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  fill-opacity: 0;
  animation: drawPath 1.4s forwards ease-in-out,
             revealFill 0.4s 1.05s forwards ease-out;
}

/* The keyhole appears only after the body has been drawn. */
.keyhole-anim {
  opacity: 0;
  animation: fadeInKeyhole 0.35s 1.4s forwards ease-out;
}

/* SEARCH SECTION */
.search-container {
  max-width: 980px;
  margin: 0 auto 16px;
  padding: 0 16px;
  width: 100%;
}

.search-box-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.search-box {
  background: white;
  border-radius: 50px;
  padding: 8px 16px 8px 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border: 4px solid var(--accent);
  flex: 1;
  /* Keep the bar wide (wraps to its own row on phones); the input inside has
     min-width:0 so long text scrolls within the pill. */
  min-width: 260px;
}

.search-box input,
.search-box textarea {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 1.3rem;
  font-family: 'Fredoka', sans-serif;
  color: var(--text);
  background: transparent;
}
/* Chat-style multiline search: wraps and grows in height (JS sets the height to
   fit the text), so the whole request is always visible — no horizontal scroll. */
.search-box textarea {
  resize: none;
  overflow-y: auto;
  max-height: 120px;   /* ~4 lines, then it scrolls */
  line-height: 1.35;
  padding: 4px 0;
}

.clear-search-btn {
  background: #E2E8F0;
  color: #64748B;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.clear-search-btn:hover {
  background: #FF1744;
  color: white;
  transform: scale(1.15);
}

/* BIG ICON BUTTONS */
.icon-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid white;
  font-size: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
}

.icon-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}

.fav-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #FFD600;
  color: #0F172A;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* AGE SELECTOR BAR */
.age-selector-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  background: white;
  padding: 8px 18px;
  border-radius: 35px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  border: 2px solid #E2E8F0;
  flex-wrap: wrap;
}

.age-label {
  font-weight: 700;
  font-size: 1.1rem;
  color: #334155;
}

.age-btn {
  background: #F1F5F9;
  color: #475569;
  border: 2px solid #CBD5E1;
  padding: 8px 20px;
  border-radius: 20px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.age-btn:hover {
  transform: translateY(-2px);
  background: #E2E8F0;
}

.age-btn.active {
  background: var(--purple);
  color: white;
  border-color: var(--purple);
  box-shadow: 0 4px 12px rgba(123, 31, 162, 0.3);
}

/* DYNAMIC PROGRESS BOX FOR CREATION */
.gen-progress-box {
  display: none;
  margin-top: 16px;
  background: white;
  border: 4px solid #9D4EDD;
  border-radius: 24px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(157,78,221,0.25);
}

.gen-progress-box.active { display: block; }

.progress-bar-track {
  width: 100%;
  background: #E2E8F0;
  border-radius: 20px;
  height: 20px;
  overflow: hidden;
  border: 2px solid #CBD5E1;
  margin-top: 10px;
}

.progress-bar-fill {
  width: 10%;
  height: 100%;
  background: linear-gradient(90deg, #9D4EDD, #E91E63, #FF9800);
  transition: width 0.4s ease;
}

/* MAIN GALLERY */
main {
  max-width: 1250px;
  margin: 16px auto;
  padding: 0 16px;
  flex: 1;
  width: 100%;
}

.gallery-count {
  font-size: 1.25rem;
  color: #475569;
  margin-bottom: 16px;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/* GROUPING MODE SWITCH — same pill language as .age-btn, one size smaller */
.group-mode-switch {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.group-mode-btn {
  background: #F1F5F9;
  color: #475569;
  border: 2px solid #CBD5E1;
  padding: 6px 14px;
  border-radius: 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.group-mode-btn:hover {
  transform: translateY(-2px);
  background: #E2E8F0;
}

.group-mode-btn.active {
  background: var(--purple);
  color: white;
  border-color: var(--purple);
  box-shadow: 0 4px 12px rgba(123, 31, 162, 0.3);
}

@media (max-width: 480px) {
  .group-mode-switch { margin-left: 0; width: 100%; }
  .group-mode-btn { flex: 1; padding: 8px 10px; }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}

/* SUBJECT GROUPS — favorites + main gallery grouped by subject (see cluster.js) */
.subject-groups {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.subject-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #FFF3E0 0%, #F3E5F5 100%);
  border: 3px solid #E2E8F0;
  border-radius: 22px;
  user-select: none;
}

.subject-group.collapsible .subject-group-header {
  cursor: pointer;
}

.subject-group-label {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--purple);
  text-transform: capitalize;
}

.subject-group-count {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
  background: white;
  border-radius: 14px;
  padding: 2px 12px;
  border: 2px solid #E2E8F0;
  white-space: nowrap;
}

.subject-group-caret {
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--purple);
  transition: transform 0.2s ease;
}

.subject-group.collapsed .subject-group-caret {
  transform: rotate(-90deg);
}

.subject-group.collapsed .gallery-grid {
  display: none;
}

/* CARD DESIGN */
.card {
  background: white;
  border-radius: 28px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  border: 3px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 18px 36px rgba(255, 87, 34, 0.18);
  border-color: var(--primary);
}

.fav-heart-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #CBD5E1;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.fav-heart-btn.is-fav { background: #FFE4E6; border-color: #E91E63; }

.delete-card-btn {
  position: absolute;
  top: 14px;
  left: 66px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #CBD5E1;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, background 0.2s ease;
}

.delete-card-btn:hover {
  background: #FFE4E6;
  border-color: #FF1744;
  transform: scale(1.1);
}

.color-preview-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: white;
  border: 3px solid #FF9800;
  border-radius: 18px;
  padding: 4px;
  width: 105px;
  height: 125px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  overflow: hidden;
}

.color-preview-badge .badge-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #D97706;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.color-preview-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.card-img-wrap {
  width: 100%;
  height: 270px;
  background: #FFFFFF;
  border-radius: 20px;
  border: 2px dashed #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 8px;
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 14px 0 10px;
  color: var(--text);
  text-align: center;
}

.btn {
  width: 100%;
  border: none;
  padding: 12px;
  border-radius: 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-print {
  background: var(--green);
  color: white;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.btn-print:hover { background: #1B5E20; }

/* MODAL OVERLAY & CARD */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active { display: flex; }

.modal-card {
  background: white;
  border-radius: 32px;
  max-width: 900px;
  width: 100%;
  max-height: 94vh;
  overflow-y: auto;  /* scroll tall content (e.g. the modify options) on phones */
  display: flex;
  flex-direction: column;
  padding: 24px;
  position: relative;
}

.modal-close {
  position: fixed;  /* pinned to the screen corner so it's never clipped by
                       the card's scroll and stays reachable while scrolling */
  top: 14px;
  right: 14px;
  background: #FF1744;
  color: white;
  border: 4px solid white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(255, 23, 68, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.modal-close:hover {
  transform: scale(1.15);
  background: #D50000;
}

.modal-body {
  flex: 1;
  background: white;
  border: 3px solid #CBD5E1;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 450px;
  position: relative;
}

.modal-body img.main-print-img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.modal-color-corner {
  position: absolute;
  top: 16px;
  right: 16px;
  background: white;
  border: 4px solid #FF9800;
  border-radius: 22px;
  padding: 6px;
  width: 180px;
  height: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  z-index: 10;
}

.modal-color-corner .corner-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #D97706;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.modal-color-corner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
}

/* PHONE: the colour "Modèle" preview is a fixed-size absolute overlay that only
   clears the drawing thanks to wide desktop margins. On narrow screens the A4
   line art fills the full width, so the overlay lands on top of it. Drop it out
   of the corner and stack it under the drawing instead. (Screen only — the
   @media print corner keeps its own mm-based placement for the printed page.) */
@media (max-width: 640px) {
  .modal-body {
    flex-direction: column;
    gap: 12px;
  }
  .modal-color-corner {
    position: static;
    top: auto;
    right: auto;
    width: 120px;
    height: 145px;
    box-shadow: none;
  }
  /* Compact the modify modal so it fits a phone screen */
  .modal-card {
    padding: 18px 16px;
    border-radius: 24px;
  }
  .modify-opt-btn {
    padding: 12px !important;
  }
  .modify-opt-btn span:first-child {
    font-size: 2rem !important;
  }
  .modify-opt-btn span:last-child {
    font-size: 1.05rem !important;
  }
}

/* MODIFICATION OPTION BUTTONS IN MODAL */
.modify-opt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: 'Fredoka', sans-serif;
}

.modify-opt-btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

/* Advanced free-text modify: example chips */
.chip-btn {
  background: #F1F5F9;
  border: 2px solid #CBD5E1;
  border-radius: 14px;
  padding: 6px 12px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s ease;
}

.chip-btn:hover {
  background: #E2E8F0;
}

/* PRINT STYLES */
/* Everything here is PAGE-relative. We deliberately avoid position:fixed,
   height:100%, overflow:hidden and vh units: during interactive printing
   (window.print()) Chrome resolves those against the on-screen window, not the
   A4 page, which made the container taller than the page and pushed the bottom
   of the image off page 1 ("cut off at the bottom"). Plain page-flow + mm caps
   can't do that. */
@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
  }

  .search-container, main, footer, .modal-close, .modal-card > div:not(.modal-body), button, .version-badge {
    display: none !important;
  }

  .modal-overlay.active {
    position: static !important;
    background: white !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  .modal-card {
    position: static !important;
    display: block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    border: none !important;
  }

  .printable-area {
    position: relative !important;
    /* Keep the reference in page flow, in its own column. The fixed gap makes
       overlap impossible even when the source line art has unusual dimensions. */
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6mm !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10mm !important;
    box-sizing: border-box !important;
    background: white !important;
    border: none !important;
    text-align: center !important;
    page-break-inside: avoid !important;
  }

  .printable-area img.main-print-img {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    /* Fill the available line-art column and use most of the A4 height.
       max-height is pulled in from the 297mm edge to leave a safe margin so a
       printer's unprintable bottom edge can't clip the image. Aspect ratio is
       preserved (auto width/height), so it scales up to whichever fits. */
    max-width: 100% !important;
    max-height: 265mm !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .modal-color-corner {
    display: flex !important;
    position: static !important;
    flex: 0 0 42mm !important;
    width: 42mm !important;
    height: 54mm !important;
    box-sizing: border-box !important;
    border: 5px solid #FF9800 !important;
    box-shadow: none !important;
    background: white !important;
  }

  .modal-color-corner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }
}

/* VERSION MARKER (tiny, bottom-right; confirms which build is live) */
.version-badge {
  position: fixed;
  bottom: 6px;
  right: 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.65);
  padding: 2px 7px;
  border-radius: 8px;
  z-index: 4000;
  pointer-events: none;
}

/* FRIENDLY TOASTS (replace scary native alert dialogs) */
.toast-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3000;
  padding: 0 12px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border-radius: 22px;
  padding: 14px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  border: 4px solid #CBD5E1;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0F172A;
  max-width: 92vw;
  animation: toastIn 0.25s ease;
}

.toast .toast-emoji { font-size: 1.8rem; line-height: 1; }
.toast .toast-text { flex: 1; }

.toast .toast-action {
  border: none;
  border-radius: 16px;
  padding: 10px 16px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  background: #FFD600;
  color: #0F172A;
  white-space: nowrap;
}

.toast.toast-error { border-color: #FF1744; background: #FFF1F2; }
.toast.toast-success { border-color: #2E7D32; background: #F0FFF4; }

@keyframes toastIn {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* CARD DELETE — VISUAL TWO-STEP CONFIRM OVERLAY */
.card-delete-confirm {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 20;
  padding: 20px;
  text-align: center;
}

.card-delete-confirm .cdc-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0F172A;
}

.card-delete-confirm .cdc-btns { display: flex; gap: 16px; }

.card-delete-confirm button {
  border: none;
  border-radius: 22px;
  width: 78px;
  height: 78px;
  font-size: 2.3rem;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}

.card-delete-confirm button:hover { transform: scale(1.08); }
.card-delete-confirm .cdc-yes { background: #FFE4E6; border: 3px solid #FF1744; }
.card-delete-confirm .cdc-no { background: #E2E8F0; border: 3px solid #CBD5E1; }