:root {
  --pico-primary: #8b5cf6;
  --pico-primary-hover: #7c3aed;
  --pico-primary-background: #8b5cf6;
  --pico-primary-hover-background: #7c3aed;
  --pico-primary-border: #8b5cf6;
  --pico-primary-hover-border: #7c3aed;
  --pico-primary-focus: rgba(139,92,246,.25);
  --pico-primary-inverse: #fff;
  --pico-border-radius: 1.25rem;
  --pico-font-family: 'Nunito', sans-serif;
  --c-purple: rgba(139,92,246,.14);
  --c-mint:   rgba(16,185,129,.14);
  --correct:   #059669; --correct-bg:   rgba(16,185,129,.16);
  --incorrect: #dc2626; --incorrect-bg: rgba(239,68,68,.13);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

body, button, input, select, textarea { font-family: 'Nunito', sans-serif; }

/* ── Layout ── */
.builder-main {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1.25rem 7rem;
}

/* ── Header ── */
.builder-header { text-align: center; margin-bottom: 2.5rem; }
.app-title {
  font-size: 2.4rem; font-weight: 900; letter-spacing: -.03em; margin-bottom: .25rem;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.builder-subtitle { color: var(--pico-muted-color); font-size: .95rem; margin: 0; }
.builder-subtitle a { color: var(--pico-primary); }

/* ── Buttons ── */
button {
  border-radius: 50em !important;
  font-weight: 700;
  transition: transform .15s var(--spring), box-shadow .15s ease, background-color .2s, opacity .2s !important;
}
button:disabled { opacity: .4; cursor: not-allowed; }
button:not(.secondary):not(.outline):not(.contrast):not(.icon-btn):not(.remove-btn):not(.tag-remove):not(.add-variant-btn):not(.item-remove-btn) {
  box-shadow: 0 5px 0 #6d28d9, 0 8px 18px rgba(139,92,246,.25) !important;
}
button:not(.secondary):not(.outline):not(.contrast):not(.icon-btn):not(.remove-btn):not(.tag-remove):not(.add-variant-btn):not(.item-remove-btn):not(:disabled):hover {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 10px 0 #6d28d9, 0 16px 28px rgba(139,92,246,.38) !important;
}
button:not(.secondary):not(.outline):not(.contrast):not(.icon-btn):not(.remove-btn):not(.tag-remove):not(.add-variant-btn):not(.item-remove-btn):not(:disabled):active {
  transform: translateY(3px) scale(.97) !important;
  box-shadow: 0 1px 0 #6d28d9 !important;
}
button.secondary:not(.outline):not(:disabled):hover  { transform: translateY(-2px) scale(1.03) !important; }
button.secondary:not(.outline):not(:disabled):active { transform: translateY(1px)  scale(.97)  !important; }
button.outline:not(:disabled):hover  { transform: scale(1.06) !important; }
button.outline:not(:disabled):active { transform: scale(.93)  !important; }

/* ── Section titles ── */
.section-title { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: var(--pico-muted-color); margin-bottom: .6rem; }

/* ── Meta card ── */
.meta-section { margin-bottom: 2rem; }
.meta-card { padding: 1.5rem; border-radius: var(--pico-border-radius); }
.meta-card > * + * { margin-top: .85rem; }

/* ── Form rows ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }

/* ── Field labels ── */
.field-label { display: flex; flex-direction: column; gap: .25rem; font-weight: 700; font-size: .95rem; }
.field-label input, .field-label select, .field-label textarea { margin-bottom: 0 !important; }
.field-hint { font-size: .78rem; color: var(--pico-muted-color); font-weight: 600; margin: 0; }
.req { color: var(--pico-primary); }
.field-with-id { display: flex; flex-direction: column; gap: .2rem; }

/* ── Tag input ── */
.tag-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: .45rem .75rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-form-element-background-color);
  min-height: 2.75rem;
  cursor: text;
  transition: border-color .2s, box-shadow .2s;
}
.tag-wrap:focus-within {
  border-color: var(--pico-primary);
  box-shadow: 0 0 0 3px var(--pico-primary-focus);
}
.tag-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--c-purple); color: var(--pico-primary);
  font-size: .8rem; font-weight: 800;
  padding: .2rem .55rem .2rem .65rem; border-radius: 50em;
  line-height: 1;
}
.tag-remove {
  all: unset; cursor: pointer;
  font-size: 1rem; line-height: 1; opacity: .65;
  width: 1rem; height: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.tag-remove:hover { opacity: 1; }
.tag-input {
  all: unset;
  flex: 1; min-width: 100px;
  font-size: .9rem; font-family: 'Nunito', sans-serif;
  color: var(--pico-color);
}

/* ── Items section ── */
.items-section { margin-bottom: 1.5rem; }
.items-header { display: flex; align-items: center; margin-bottom: .85rem; }
.items-header h2 { margin: 0; font-size: 1.2rem; }
.item-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem;
  background: var(--c-purple); color: var(--pico-primary);
  border-radius: 50em; font-size: .78rem; font-weight: 900; margin-left: .5rem;
}

/* ── Empty state ── */
.empty-items {
  text-align: center; padding: 2.5rem 1rem;
  border: 2px dashed var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius); margin-bottom: 1rem;
}
.empty-items p { margin: 0; font-weight: 700; }
.empty-items .muted { color: var(--pico-muted-color); font-size: .9rem; margin-top: .35rem; font-weight: 600; }

/* ── Item card ── */
.item-card {
  padding: 1rem 1.25rem; margin-bottom: .65rem;
  border-radius: var(--pico-border-radius);
  transition: box-shadow .2s;
  cursor: pointer;
}
.item-card:focus-within { box-shadow: 0 0 0 2px rgba(139,92,246,.35); }
.item-card--collapsed:hover { box-shadow: 0 0 0 2px rgba(139,92,246,.2); }

.item-header {
  display: flex; align-items: center; gap: .55rem;
  cursor: pointer; user-select: none;
}
.item-header:hover .item-preview { color: var(--pico-color); }
.item-num { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: var(--pico-muted-color); flex-shrink: 0; }
.item-preview { flex: 1; font-size: .88rem; font-weight: 700; color: var(--pico-muted-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ready-dot { width: .55rem; height: .55rem; border-radius: 50em; flex-shrink: 0; }
.ready-dot--ok { background: #059669; }
.ready-dot--no { background: #f59e0b; }

.collapse-arrow { font-size: .7rem; color: var(--pico-muted-color); flex-shrink: 0; transition: transform .2s var(--spring); }
.collapse-arrow--open { transform: rotate(-180deg); }

.item-body { display: flex; flex-direction: column; gap: .75rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--pico-muted-border-color); animation: fade-in .15s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.item-remove-btn {
  all: unset; cursor: pointer;
  font-size: .85rem; font-weight: 900;
  color: var(--incorrect); opacity: .45;
  flex-shrink: 0; line-height: 1;
  transition: opacity .15s;
}
.item-remove-btn:hover { opacity: 1; }

/* ── ID preview ── */
.id-preview { font-size: .73rem; color: var(--pico-muted-color); font-family: monospace; letter-spacing: .01em; }

/* ── Answer chips ── */
.answer-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .82rem; font-weight: 800;
  padding: .2rem .5rem .2rem .65rem; border-radius: 50em; line-height: 1;
}
.answer-chip--main    { background: var(--c-purple); color: var(--pico-primary); }
.answer-chip--variant { background: var(--pico-muted-border-color); color: var(--pico-muted-color); }

/* ── Add notes button ── */
.add-notes-btn {
  align-self: flex-start;
  font-size: .82rem !important; padding: .25rem .85rem !important;
  box-shadow: none !important;
}

/* ── Add item ── */
.add-item-btn {
  width: 100%; padding: .85rem !important;
  font-size: 1rem; margin-top: .25rem;
}

/* ── Footer ── */
.builder-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: center; gap: .85rem;
  padding: .85rem 1.25rem;
  background: var(--pico-card-background-color);
  border-top: 1px solid var(--pico-muted-border-color);
  backdrop-filter: blur(12px);
  z-index: 50;
}
.footer-btn { min-width: 155px; }

/* ── Toast ── */
@keyframes toast-in  { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; } }
.toast {
  position: fixed; bottom: 7rem; left: 50%; transform: translateX(-50%);
  background: #059669; color: #fff;
  font-size: .88rem; font-weight: 800;
  padding: .55rem 1.2rem; border-radius: 50em;
  pointer-events: none; z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  animation: toast-in .25s var(--spring) both, toast-out .3s 2.5s both;
  white-space: nowrap;
}
.toast--err { background: #dc2626; }

/* ── Draft actions ── */
.draft-actions { display: flex; gap: .6rem; margin-top: .75rem; }
.draft-actions button { flex: 1; }

/* ── Next steps modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: fade-in .2s ease;
}
.modal-card {
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
  padding: 1.75rem; max-width: 400px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  animation: float-in .25s var(--spring);
}
.modal-card h3 { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 900; }
.modal-card > p { color: var(--pico-muted-color); font-size: .92rem; margin: 0 0 .65rem; }
.modal-card ol { padding-left: 1.2rem; margin: 0 0 .75rem; display: flex; flex-direction: column; gap: .35rem; }
.modal-card ol li { font-size: .92rem; color: var(--pico-muted-color); }
.modal-card ol li a { color: var(--pico-primary); text-decoration: none; font-weight: 700; }
.modal-card ol li a:hover { text-decoration: underline; }
.modal-card code { font-size: .82rem; background: var(--pico-muted-border-color); padding: .1rem .35rem; border-radius: .35rem; }
.modal-card button { width: 100%; margin-top: .25rem; }
.modal-alt { font-size: .82rem !important; }

/* ── Guidelines ── */
.guidelines-details { margin-bottom: 2rem; border-radius: var(--pico-border-radius); overflow: hidden; }
.guidelines-details > summary {
  list-style: none; -webkit-appearance: none;
  padding: .8rem 1.1rem; font-weight: 800; font-size: .9rem; cursor: pointer;
  background: var(--pico-card-background-color);
  border: 2px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  display: flex; align-items: center; justify-content: space-between;
  transition: background .15s;
}
.guidelines-details > summary::marker,
.guidelines-details > summary::-webkit-details-marker { display: none; }
.guidelines-details > summary::after { content: '▾'; transition: transform .2s var(--spring); }
.guidelines-details[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.guidelines-details[open] > summary::after { transform: rotate(-180deg); }
.guidelines-details > summary:hover { background: var(--c-purple); }
.guidelines-body {
  padding: 1rem 1.25rem;
  border: 2px solid var(--pico-muted-border-color); border-top: none;
  border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.guidelines-body ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .55rem; }
.guidelines-body li { font-size: .9rem; color: var(--pico-muted-color); line-height: 1.5; }
.guidelines-body li strong { color: var(--pico-color); }