:root {
  --bg-left: #F7C8D8;
  --bg-right: #F4D44A;
  --surface: #FFF8F2;
  --accent: #F4D44A;
  --ink: #111111;
  --muted: #555555;
  --card: #FFFFFF;
}

/* ---------- AI Boost modal ---------- */
.boost-modal[hidden] { display: none; }
.boost-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.boost-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
  animation: boost-fade 150ms ease-out;
}
.boost-modal__panel {
  position: relative;
  background: var(--bg-left);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--border);
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: boost-pop 160ms ease-out;
}
@keyframes boost-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes boost-pop {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.boost-modal__eyebrow {
  align-self: flex-start;
  background: var(--card);
}
.boost-modal__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.boost-modal__body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.boost-modal__body p { margin: 0 0 12px; }
.boost-modal__body p:last-child { margin-bottom: 0; }
.boost-modal__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.boost-modal__btn {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  border: 3px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  color: var(--ink);
}
.boost-modal__btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--border);
}
.boost-modal__btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--border);
}
.boost-modal__btn--close { background: var(--card); }
.boost-modal__btn--next { background: var(--accent); }
.boost-modal.is-final .boost-modal__btn--next { display: none; }
.boost-modal.is-final .boost-modal__btn--close { background: var(--accent); }
body.boost-modal-open { overflow: hidden; }