/* Candy Chaos — procedural HSL candy clash · modern grid layout · body.skin-candy-chaos */

body.skin-candy-chaos {
  --cc-h1: 8;
  --cc-h2: 52;
  --cc-h3: 142;
  --cc-h4: 208;
  --cc-h5: 286;
  --cc-h6: 334;
  --cc-accent-h: 8;
  --cc-bg: hsl(var(--cc-h5) 88% 93%);
  --cc-fg: hsl(var(--cc-h2) 55% 14%);
  --cc-a: hsl(var(--cc-accent-h) 100% 48%);
  --cc-b: hsl(var(--cc-h3) 100% 40%);
  --cc-c: hsl(var(--cc-h4) 95% 52%);
  --cc-d: hsl(var(--cc-h6) 100% 58%);
  --cc-e: hsl(var(--cc-h1) 95% 55%);
  --cc-border: hsl(var(--cc-h1) 85% 32%);
  --cc-panel: hsl(0 0% 100% / 0.92);
  --cc-touch: 44px;

  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cc-fg);
  background-color: var(--cc-bg);
  background-image:
    url("/skins/candy-confetti.svg"),
    linear-gradient(135deg, hsl(var(--cc-h6) 90% 88%) 0%, transparent 40%),
    linear-gradient(225deg, hsl(var(--cc-h3) 85% 85%) 0%, transparent 35%),
    linear-gradient(45deg, hsl(var(--cc-h4) 80% 90%) 0%, transparent 30%);
  background-size: 32px 32px, auto, auto, auto;
}

body.skin-candy-chaos::before {
  content: "🍬 CANDY CHAOS — couleurs procédurales · grille · gros boutons · bordures nettes 🍬";
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: hsl(0 0% 100%);
  padding: 8px 10px;
  background: linear-gradient(
    90deg,
    hsl(var(--cc-h1) 100% 50%),
    hsl(var(--cc-h3) 100% 45%),
    hsl(var(--cc-h4) 100% 50%),
    hsl(var(--cc-h6) 100% 55%),
    hsl(var(--cc-h1) 100% 50%)
  );
  background-size: 300% 100%;
  animation: cc-stripe 8s linear infinite;
  border-bottom: 3px solid var(--cc-border);
}

@keyframes cc-stripe {
  to { background-position: 300% 0; }
}

body.skin-candy-chaos .skin-toggle {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  min-height: var(--cc-touch);
  min-width: 7rem;
  padding: 8px 16px;
  border: 3px solid var(--cc-border);
  border-radius: 10px;
  background: hsl(var(--cc-h6) 100% 75%);
  color: var(--cc-fg);
  box-shadow: 3px 3px 0 var(--cc-a);
}

body.skin-candy-chaos .skin-toggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--cc-b);
}

body.skin-candy-chaos .skin-toggle[aria-pressed="true"] {
  background: var(--cc-a);
  color: hsl(0 0% 100%);
  border-color: hsl(var(--cc-accent-h) 80% 30%);
}

body.skin-candy-chaos .skin-toggle[data-skin="candy-chaos"] {
  background: linear-gradient(135deg, var(--cc-d), var(--cc-c), var(--cc-b));
  color: hsl(0 0% 100%);
  text-shadow: 0 1px 2px hsl(0 0% 0% / 0.3);
}

/* ——— IdeaPit ——— */
body.skin-candy-chaos main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 56rem;
  margin: 12px auto;
  padding: 14px;
  background: var(--cc-panel);
  border: 3px solid var(--cc-border);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--cc-c), 10px 10px 0 var(--cc-d);
}

body.skin-candy-chaos .page-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  background: linear-gradient(135deg, hsl(var(--cc-h6) 80% 88%), hsl(var(--cc-h4) 75% 85%));
  border: 3px solid var(--cc-border);
  border-radius: 12px;
}

body.skin-candy-chaos h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cc-a);
  text-shadow: 2px 2px 0 var(--cc-d);
}

body.skin-candy-chaos .hint {
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--cc-h4) 55% 25%);
  background: hsl(var(--cc-h2) 70% 90%);
  border: 2px solid var(--cc-border);
  border-radius: 10px;
}

body.skin-candy-chaos h2 {
  margin: 0 0 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(0 0% 100%);
  background: linear-gradient(90deg, var(--cc-b), var(--cc-a), var(--cc-c));
  border: 2px solid var(--cc-border);
  border-radius: 8px;
}

body.skin-candy-chaos textarea,
body.skin-candy-chaos input {
  min-height: var(--cc-touch);
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  border: 3px solid var(--cc-border);
  border-radius: 10px;
  background: hsl(0 0% 100%);
}

body.skin-candy-chaos textarea {
  min-height: 5rem;
}

body.skin-candy-chaos button {
  min-height: var(--cc-touch);
  padding: 10px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid var(--cc-border);
  border-radius: 10px;
  background: var(--cc-d);
  color: var(--cc-fg);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--cc-border);
}

body.skin-candy-chaos button:hover {
  background: var(--cc-c);
}

body.skin-candy-chaos .capture-zone,
body.skin-candy-chaos .resurface-zone {
  padding: 14px;
  border: 3px solid var(--cc-border);
  border-radius: 12px;
  background: hsl(var(--cc-h5) 50% 96%);
}

body.skin-candy-chaos .capture-zone {
  border-color: var(--cc-a);
  box-shadow: inset 0 0 0 2px hsl(var(--cc-accent-h) 60% 70%);
}

body.skin-candy-chaos .resurface-zone {
  background: hsl(var(--cc-h3) 50% 94%);
  border-color: var(--cc-b);
}

body.skin-candy-chaos .filter-chip,
body.skin-candy-chaos .cloud-chip {
  min-height: 2rem;
  padding: 6px 12px;
  border: 2px solid var(--cc-border);
  border-radius: 999px;
  font-weight: 600;
}

body.skin-candy-chaos .tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 6px;
  padding: 8px;
  background: hsl(var(--cc-h4) 65% 86%);
  border: 3px solid var(--cc-border);
  border-radius: 10px;
}

body.skin-candy-chaos .tabs button {
  min-height: var(--cc-touch);
  padding: 10px 8px;
  font-weight: 700;
  border: 2px solid var(--cc-border);
  border-radius: 8px;
  background: hsl(0 0% 100%);
}

body.skin-candy-chaos .tabs button[aria-selected="true"] {
  background: var(--cc-a);
  color: hsl(0 0% 100%);
  border-color: hsl(var(--cc-accent-h) 70% 28%);
}

body.skin-candy-chaos .tab-badge {
  color: hsl(0 0% 100%);
  font-weight: 800;
}

body.skin-candy-chaos .idea-card {
  padding: 12px;
  margin-bottom: 6px;
  border: 2px solid hsl(var(--cc-h4) 50% 72%);
  border-radius: 10px;
  background: hsl(0 0% 100%);
}

body.skin-candy-chaos .idea-card.filter-match {
  border: 3px solid var(--cc-a);
  background: hsl(var(--cc-accent-h) 70% 95%);
  box-shadow: 3px 3px 0 var(--cc-d);
}

body.skin-candy-chaos .idea-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--cc-a);
}

body.skin-candy-chaos .counter {
  min-height: var(--cc-touch);
  padding: 8px;
  border: 3px solid var(--cc-border);
  border-radius: 10px;
  background: hsl(var(--cc-h6) 60% 92%);
  box-shadow: 2px 2px 0 var(--cc-e);
}

body.skin-candy-chaos .counter-palette-item {
  min-width: var(--cc-touch);
  min-height: var(--cc-touch);
  border: 2px solid var(--cc-border);
  border-radius: 8px;
}

body.skin-candy-chaos .cycle-zone {
  border-top: 3px solid var(--cc-border);
  padding-top: 12px;
}

body.skin-candy-chaos .cycle-column {
  border: 3px solid var(--cc-border);
  border-radius: 12px;
  padding: 10px;
  background: hsl(var(--cc-h2) 50% 94%);
}

body.skin-candy-chaos .cycle-card {
  padding: 10px;
  margin-bottom: 6px;
  border: 2px solid var(--cc-border);
  border-radius: 8px;
  background: hsl(0 0% 100%);
}

body.skin-candy-chaos .maturity-band {
  padding: 10px;
  border: 2px dashed var(--cc-c);
  border-radius: 10px;
  background: hsl(var(--cc-h4) 60% 92%);
}

body.skin-candy-chaos .status {
  font-weight: 600;
  color: hsl(var(--cc-h1) 70% 32%);
}

body.skin-candy-chaos a {
  color: hsl(var(--cc-h4) 90% 35%);
  font-weight: 700;
}