.creator-body {
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.creator-bar { flex: 0 0 auto; }

.creator-bar .app-actions { flex-wrap: wrap; row-gap: 8px; }

.save-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 7px 14px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.save-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b9b7c9;
}

.save-state[data-state="dirty"] { color: #a5501f; background: #fff4ec; border-color: rgba(255, 138, 61, 0.3); }
.save-state[data-state="dirty"] .save-state-dot { background: var(--brand-orange); box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.14); }
.save-state[data-state="saving"] { color: var(--brand-purple-deep); background: var(--brand-lavender); border-color: rgba(91, 61, 246, 0.24); }
.save-state[data-state="saving"] .save-state-dot { background: var(--brand-purple); box-shadow: 0 0 0 4px rgba(91, 61, 246, 0.14); }
.save-state[data-state="saved"] { color: var(--brand-teal-deep); background: #e2fbf7; border-color: rgba(20, 200, 184, 0.26); }
.save-state[data-state="saved"] .save-state-dot { background: var(--brand-teal); box-shadow: 0 0 0 4px rgba(20, 200, 184, 0.14); }
.save-state[data-state="error"] { color: var(--danger); background: #fdeef1; border-color: rgba(195, 61, 80, 0.26); }
.save-state[data-state="error"] .save-state-dot { background: var(--danger); }

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 6px 16px 6px 7px;
  color: var(--text-primary);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

.account-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #7559ff, #4b2bdd);
  font-size: 15px;
  font-weight: 900;
}

.creator-save { width: auto; min-height: 50px; padding: 12px 24px; font-size: 15px; box-shadow: 0 12px 22px rgba(91, 61, 246, 0.22); }

.creator-main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(16px, 1.4vw, 26px) clamp(20px, 2vw, 38px) clamp(18px, 1.6vw, 30px);
  display: grid;
  grid-template-columns: minmax(300px, 344px) minmax(0, 1fr);
  gap: clamp(16px, 1.4vw, 24px);
  align-items: stretch;
}

.creator-library {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.3vw, 22px);
  background: rgba(255, 255, 255, 0.93);
}

.library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.library-head h1 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -0.02em; }

.icon-button {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.icon-button svg { width: 19px; height: 19px; }
.icon-button:hover { color: var(--brand-purple-deep); border-color: rgba(91, 61, 246, 0.34); background: var(--brand-lavender); }
.icon-button:active { transform: translateY(1px); }
.icon-button-danger:hover { color: var(--danger); border-color: rgba(195, 61, 80, 0.32); background: #fdeef1; }

.library-filter {
  margin-top: 14px;
  display: flex;
  gap: 6px;
  padding: 5px;
  background: rgba(237, 233, 255, 0.55);
  border-radius: 14px;
}

.filter-button {
  flex: 1;
  min-height: 36px;
  padding: 6px 8px;
  color: #565276;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.filter-button:hover { color: var(--brand-purple-deep); }
.filter-button.is-active { color: var(--brand-purple-deep); background: #fff; box-shadow: 0 6px 16px rgba(57, 39, 133, 0.12); }

.library-list {
  flex: 1;
  min-height: 0;
  margin-top: 14px;
  padding-right: 4px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.library-empty {
  margin: 26px 0;
  color: var(--text-secondary);
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
}

.library-row {
  width: 100%;
  padding: 12px 14px;
  display: grid;
  gap: 7px;
  text-align: left;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(227, 226, 239, 0.9);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.library-row:hover { border-color: rgba(91, 61, 246, 0.34); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(57, 39, 133, 0.08); }
.library-row.is-selected { border-color: rgba(91, 61, 246, 0.55); background: linear-gradient(135deg, rgba(237, 233, 255, 0.85), rgba(255, 255, 255, 0.96)); box-shadow: 0 14px 28px rgba(91, 61, 246, 0.14); }

.library-row-top { display: flex; align-items: center; gap: 8px; }
.library-row-title { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.library-row-meta { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 12.5px; font-weight: 750; }
.library-row-meta .room { color: var(--brand-purple-deep); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.library-row-meta .unsaved { color: #a5501f; }

.mini-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 850;
}

.mini-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mini-status[data-status="draft"] { color: #5b3df6; background: var(--brand-lavender); }
.mini-status[data-status="pending"] { color: var(--brand-teal-deep); background: #dcf9f5; }
.mini-status[data-status="active"] { color: #a5501f; background: #fff0e6; }
.mini-status[data-status="ended"] { color: #72540b; background: #fff5cf; }

.creator-workspace { min-width: 0; min-height: 0; display: flex; }

.empty-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: clamp(28px, 4vw, 64px);
  text-align: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(91, 61, 246, 0.07) 0 9rem, transparent 9.1rem),
    radial-gradient(circle at 88% 84%, rgba(20, 200, 184, 0.06) 0 11rem, transparent 11.1rem),
    rgba(255, 255, 255, 0.94);
}

.empty-workspace h2 { margin: 26px 0 0; font-size: clamp(26px, 2.1vw, 34px); letter-spacing: -0.03em; }
.empty-workspace p { max-width: 30em; margin: 12px auto 22px; color: var(--text-secondary); font-size: 15px; line-height: 1.75; }
.empty-workspace .button-primary { width: auto; min-width: 190px; min-height: 56px; font-size: 16px; }

.empty-visual { position: relative; width: 260px; height: 150px; }
.empty-card { position: absolute; display: grid; place-items: center; border-radius: 22px; box-shadow: 0 18px 34px rgba(57, 39, 133, 0.14); }
.empty-card-back { left: 8px; top: 20px; width: 190px; height: 96px; background: #dcf9f5; transform: rotate(-7deg); }
.empty-card-mid { left: 44px; top: 12px; width: 190px; height: 100px; background: #fff0e6; transform: rotate(4deg); }
.empty-card-front { left: 26px; top: 30px; width: 200px; height: 104px; color: #fff; background: linear-gradient(140deg, #6c4cff, #4622e2); }
.empty-card-front svg { width: 40px; height: 40px; stroke-width: 2.2; }

.resume-section { width: min(560px, 100%); margin-top: 30px; padding-top: 22px; border-top: 1px dashed rgba(222, 219, 234, 0.95); text-align: left; }
.resume-label { margin: 0 0 10px !important; color: var(--text-secondary); font-size: 12.5px !important; font-weight: 850; }
.resume-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; }

.editor {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1vw, 18px);
}

.editor-head {
  flex: 0 0 auto;
  padding: clamp(14px, 1.2vw, 20px) clamp(18px, 1.5vw, 26px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background:
    radial-gradient(circle at 92% -30%, rgba(91, 61, 246, 0.1) 0 8rem, transparent 8.1rem),
    rgba(255, 255, 255, 0.94);
}

.editor-title-field { flex: 1 1 320px; min-width: 0; }
.field-label { display: block; margin-bottom: 7px; color: var(--text-secondary); font-size: 13px; font-weight: 800; letter-spacing: 0.01em; }

.title-input {
  width: 100%;
  padding: 11px 0 9px;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--line);
  outline: none;
  font-size: clamp(21px, 1.7vw, 27px);
  font-weight: 900;
  letter-spacing: -0.025em;
  transition: border-color 160ms ease;
}

.title-input:hover { border-color: rgba(91, 61, 246, 0.3); }
.title-input:focus { border-color: var(--brand-purple); }
.title-input::placeholder { color: #a9a6bd; font-weight: 700; }

.editor-head-side { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 28px); flex-wrap: wrap; }
.editor-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; }
.editor-badges .question-type { color: var(--brand-purple-deep); background: var(--brand-lavender); }
.editor-badges .question-type strong { margin-left: 5px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.status-pill[data-status="draft"] { color: var(--brand-purple-deep); background: var(--brand-lavender); }
.status-pill[data-status="draft"]::before { background: var(--brand-purple); }
.lock-note { padding: 5px 12px; color: #a5501f; background: #fff0e6; border-radius: 999px; font-size: 12.5px; font-weight: 800; }

.advance-setting { display: grid; gap: 4px; }
.advance-setting .field-label { margin-bottom: 2px; }

.segment-group {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(237, 233, 255, 0.6);
  border-radius: 13px;
}

.segment {
  min-height: 32px;
  padding: 5px 12px;
  color: #565276;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.segment:hover { color: var(--brand-purple-deep); }
.segment.is-active { color: #fff; background: linear-gradient(135deg, #6547ff, #4b27ee); box-shadow: 0 8px 16px rgba(91, 61, 246, 0.24); }
.segment:disabled { cursor: not-allowed; opacity: 0.5; }

.editor-columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(12px, 1vw, 18px);
}

.question-column,
.editor-column {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.3vw, 22px);
  background: rgba(255, 255, 255, 0.94);
}

.column-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.column-head h2 { margin: 0; font-size: 17px; font-weight: 900; }

.count-chip {
  padding: 4px 11px;
  color: var(--brand-purple-deep);
  background: var(--brand-lavender);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 850;
}

.question-list {
  flex: 1;
  min-height: 0;
  margin: 14px 0 0;
  padding-right: 4px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 6px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(227, 226, 239, 0.92);
  border-radius: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.question-card:hover { border-color: rgba(91, 61, 246, 0.3); box-shadow: 0 10px 22px rgba(57, 39, 133, 0.07); }
.question-card.is-selected { border-color: rgba(91, 61, 246, 0.5); background: linear-gradient(135deg, rgba(237, 233, 255, 0.8), rgba(255, 255, 255, 0.97)); }
.question-card.is-dragging { opacity: 0.45; }
.question-card.is-drop-target { border-color: var(--brand-purple); box-shadow: 0 0 0 3px rgba(91, 61, 246, 0.16); }
.question-card.is-invalid { border-color: rgba(255, 138, 61, 0.55); }

.drag-handle {
  width: 30px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #b3b0c4;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: grab;
}

.drag-handle:hover { color: var(--brand-purple); background: var(--brand-lavender); }
.drag-handle svg { width: 18px; height: 18px; stroke-width: 2.6; }

.question-open {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 2px 0;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.question-index {
  position: absolute;
  left: 12px;
  top: -8px;
  min-width: 22px;
  padding: 1px 6px;
  color: #fff;
  background: var(--brand-purple);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.question-open-top { display: flex; align-items: center; gap: 8px; }
.type-chip { padding: 2px 9px; color: var(--brand-purple-deep); background: var(--brand-lavender); border-radius: 999px; font-size: 11.5px; font-weight: 850; white-space: nowrap; }
.question-open-meta { color: var(--text-secondary); font-size: 11.5px; font-weight: 750; white-space: nowrap; }

.question-prompt-preview {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-prompt-preview.is-empty { color: #a9a6bd; font-weight: 700; }

.question-row-actions { display: flex; align-items: center; gap: 2px; }
.row-button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #8f8ca6;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}

.row-button svg { width: 16px; height: 16px; stroke-width: 2.4; }
.row-button:hover { color: var(--brand-purple-deep); background: var(--brand-lavender); }
.row-button:disabled { opacity: 0.32; cursor: not-allowed; }
.row-button-danger:hover { color: var(--danger); background: #fdeef1; }

.type-picker { flex: 0 0 auto; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(222, 219, 234, 0.95); }
.type-picker-label { margin: 0 0 9px; color: var(--text-secondary); font-size: 12.5px; font-weight: 800; }
.type-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }

.type-button {
  padding: 10px 4px 9px;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #4b4866;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.type-button:hover { color: var(--brand-purple-deep); border-color: rgba(91, 61, 246, 0.4); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(91, 61, 246, 0.12); }

.type-glyph { position: relative; width: 30px; height: 22px; display: block; }
.type-glyph i { position: absolute; display: block; }

.type-glyph-single .glyph-radio { left: 3px; top: 4px; width: 13px; height: 13px; border: 2.2px solid var(--brand-purple); border-radius: 50%; }
.type-glyph-single .glyph-radio-dot { left: 7.6px; top: 8.6px; width: 4px; height: 4px; background: var(--brand-purple); border-radius: 50%; }
.type-glyph-multiple i { width: 5px; height: 5px; background: var(--brand-purple); border-radius: 50%; }
.type-glyph-multiple i:nth-child(1) { left: 3px; top: 3px; }
.type-glyph-multiple i:nth-child(2) { left: 12px; top: 3px; }
.type-glyph-multiple i:nth-child(3) { left: 3px; top: 12px; }
.type-glyph-multiple i:nth-child(4) { left: 12px; top: 12px; }
.type-glyph-boolean .glyph-check { left: 1px; top: 5px; width: 9px; height: 5px; border-left: 2.4px solid var(--brand-teal); border-bottom: 2.4px solid var(--brand-teal); transform: rotate(-45deg); }
.type-glyph-boolean .glyph-cross { left: 14px; top: 4px; width: 10px; height: 10px; }
.type-glyph-boolean .glyph-cross::before,
.type-glyph-boolean .glyph-cross::after { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 2.4px; background: var(--brand-orange); border-radius: 2px; }
.type-glyph-boolean .glyph-cross::before { transform: rotate(45deg); }
.type-glyph-boolean .glyph-cross::after { transform: rotate(-45deg); }
.type-glyph-sort i { width: 14px; height: 3px; background: var(--brand-purple); border-radius: 2px; }
.type-glyph-sort i:nth-child(1) { left: 3px; top: 4px; }
.type-glyph-sort i:nth-child(2) { left: 3px; top: 10px; width: 10px; }
.type-glyph-sort i:nth-child(3) { left: 3px; top: 16px; width: 6px; }
.type-glyph-fill .glyph-cursor { left: 5px; top: 3px; width: 2.4px; height: 12px; background: var(--brand-purple); }
.type-glyph-fill .glyph-underline { left: 2px; bottom: 3px; width: 20px; height: 2.4px; background: var(--brand-purple); border-radius: 2px; }

.fields-placeholder { flex: 1; display: grid; place-items: center; padding: 30px; color: var(--text-secondary); text-align: center; line-height: 1.75; }

#fields { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding-right: 4px; }

.fields-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fields-heading { min-width: 0; }
.fields-heading .question-type { margin-bottom: 8px; }
.fields-heading h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -0.02em; }
.fields-actions { display: flex; align-items: center; gap: 6px; }

.prompt-field { margin-top: 18px; }
.prompt-input {
  width: 100%;
  padding: 13px 15px;
  color: var(--text-primary);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 15px;
  outline: none;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.prompt-input::placeholder { color: #a9a6bd; font-weight: 650; }
.prompt-input:hover { border-color: rgba(91, 61, 246, 0.28); }
.prompt-input:focus { border-color: var(--brand-purple); box-shadow: 0 0 0 4px rgba(91, 61, 246, 0.1); }

.answer-block { margin-top: 22px; }
.answer-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.answer-hint { color: var(--text-secondary); font-size: 12.5px; font-weight: 750; }

.image-field { margin-top: 20px; }
.image-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.image-field .add-row-button { width: 100%; }

.image-preview {
  margin: 12px 0 0;
  padding: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-bg);
  border: 1.5px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
}

.image-preview img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 10px;
}

.image-actions { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.image-actions .chip-button { display: inline-flex; align-items: center; gap: 6px; }
.image-actions .chip-button svg { width: 15px; height: 15px; stroke-width: 2.6; }
.chip-button-danger { color: var(--danger); border-color: rgba(195, 61, 80, 0.34); }
.chip-button-danger:hover { color: #97283a; border-color: var(--danger); background: rgba(195, 61, 80, 0.08); }
.chip-button:disabled,
.add-row-button:disabled { opacity: 0.55; cursor: not-allowed; }

.question-thumb {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: cover;
  background: var(--brand-bg);
  border: 1.5px solid var(--line);
  border-radius: 11px;
}

.option-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.option-row {
  display: grid;
  grid-template-columns: 34px 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.97);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.option-row:hover { border-color: rgba(91, 61, 246, 0.26); }
.option-row.is-correct { border-color: var(--brand-teal); background: #f1fdfb; }
.option-row.is-input { grid-template-columns: 1fr auto; }
.option-row[data-type="ordering"] { user-select: none; }
.option-row[data-type="ordering"].is-dragging { position: relative; z-index: 2; cursor: grabbing; border-color: var(--brand-purple); background: #fff; box-shadow: 0 18px 34px rgba(57, 39, 133, 0.16); }
.option-row[data-type="ordering"].is-dragging .option-input { color: var(--text-secondary); cursor: grabbing; }

.drag-handle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #a9a6bd;
  background: rgba(237, 233, 255, 0.5);
  border: 1px solid rgba(91, 61, 246, 0.16);
  border-radius: 10px;
  cursor: grab;
  touch-action: none;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.drag-handle svg { width: 18px; height: 18px; stroke-width: 2.6; }
.drag-handle:hover { color: var(--brand-purple); border-color: rgba(91, 61, 246, 0.4); background: var(--brand-lavender); }
.drag-handle:active,
.drag-handle.is-grabbed { color: #fff; background: linear-gradient(135deg, #6547ff, #4b27ee); border-color: transparent; cursor: grabbing; }

.correct-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: transparent;
  background: #fff;
  border: 2px solid #d3d1e0;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.correct-toggle svg { width: 16px; height: 16px; stroke-width: 3.2; }
.correct-toggle:hover { border-color: var(--brand-teal); }
.correct-toggle.is-correct { color: #fff; background: var(--brand-teal); border-color: var(--brand-teal); }
.option-row[data-type="multiple_choice"] .correct-toggle { border-radius: 9px; }

.option-index { color: var(--brand-purple); font-size: 15px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }

.option-input,
.fill-input {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  font-weight: 700;
}

.option-input::placeholder,
.fill-input::placeholder { color: #a9a6bd; font-weight: 650; }
.option-input:focus,
.fill-input:focus { background: rgba(237, 233, 255, 0.5); }

.option-actions { display: flex; align-items: center; gap: 2px; }

.option-move { display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 160ms ease; }
.option-move.is-hidden { display: none; }
.option-row:hover .option-move,
.option-row:focus-within .option-move { opacity: 1; }

.add-row-button {
  margin-top: 10px;
  min-height: 42px;
  padding: 9px 18px;
  color: var(--brand-purple-deep);
  background: rgba(237, 233, 255, 0.62);
  border: 1px dashed rgba(91, 61, 246, 0.4);
  border-radius: 13px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.add-row-button:hover { background: var(--brand-lavender); border-color: var(--brand-purple); }

.boolean-row { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.boolean-option {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #4b4866;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 18px;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.boolean-option svg { width: 24px; height: 24px; stroke-width: 3; }
.boolean-option:hover { transform: translateY(-2px); border-color: rgba(91, 61, 246, 0.35); }
.boolean-option.is-correct { color: #063e39; background: #effcfa; border-color: var(--brand-teal); }
.boolean-option[data-value="false"].is-correct { color: #a5501f; background: #fff6f0; border-color: var(--brand-orange); }

.order-hint {
  margin-top: 12px;
  padding: 11px 14px;
  color: var(--brand-purple-deep);
  background: rgba(237, 233, 255, 0.55);
  border-radius: 13px;
  font-size: 13px;
  font-weight: 750;
}

.question-settings { margin-top: 24px; padding-top: 16px; border-top: 1px dashed rgba(222, 219, 234, 0.95); }
.question-settings summary { color: var(--text-secondary); font-size: 13.5px; font-weight: 850; cursor: pointer; }
.question-settings[open] summary { margin-bottom: 14px; color: var(--brand-purple-deep); }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.setting-field-wide { grid-column: 1 / -1; }
.duration-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.setting-input {
  width: 96px;
  padding: 9px 12px;
  color: var(--text-primary);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  outline: none;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.setting-input-wide { width: 100%; }
.setting-input:focus { border-color: var(--brand-purple); box-shadow: 0 0 0 4px rgba(91, 61, 246, 0.1); }
.unit { color: var(--text-secondary); font-size: 13px; font-weight: 800; }
.duration-presets { display: flex; gap: 5px; }

.chip-button {
  min-height: 34px;
  padding: 5px 12px;
  color: #565276;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 850;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.chip-button:hover { color: var(--brand-purple-deep); border-color: rgba(91, 61, 246, 0.4); background: var(--brand-lavender); }

.editor-footer {
  flex: 0 0 auto;
  padding: clamp(12px, 1vw, 16px) clamp(18px, 1.5vw, 26px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.94);
}

.editor-footer-hint { color: var(--text-secondary); font-size: 13px; font-weight: 750; }
.editor-footer-actions { display: flex; align-items: center; gap: 12px; }
.editor-footer .button-primary { width: auto; min-height: 52px; min-width: 172px; padding: 12px 26px; font-size: 15.5px; }

.button-danger {
  color: #fff;
  background: linear-gradient(135deg, #d1505f, #b32c3f);
  box-shadow: 0 12px 24px rgba(195, 61, 80, 0.22);
}

.button-danger:hover:not(:disabled) { box-shadow: 0 16px 30px rgba(195, 61, 80, 0.28); }

.link-button {
  padding: 0;
  color: var(--brand-purple-deep);
  background: transparent;
  border: 0;
  font-size: inherit;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.confirm-overlay {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(22, 21, 47, 0.42);
  backdrop-filter: blur(3px);
}

.confirm-dialog { width: min(460px, 100%); padding: 28px 30px 24px; }
.confirm-dialog h2 { margin: 0 0 10px; font-size: 21px; letter-spacing: -0.02em; }
.confirm-dialog p { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.7; }
.confirm-actions { margin-top: 24px; display: flex; justify-content: flex-end; gap: 10px; }
.confirm-actions .button { width: auto; min-width: 104px; }

.toast {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: 34px;
  padding: 12px 22px;
  color: #fff;
  background: rgba(22, 21, 47, 0.92);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 18px 36px rgba(22, 21, 47, 0.3);
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tone="error"] { background: rgba(179, 44, 63, 0.96); }
.toast[data-tone="success"] { background: rgba(8, 127, 117, 0.96); }

.library-list::-webkit-scrollbar,
.question-list::-webkit-scrollbar,
#fields::-webkit-scrollbar { width: 10px; }

.library-list::-webkit-scrollbar-thumb,
.question-list::-webkit-scrollbar-thumb,
#fields::-webkit-scrollbar-thumb { background: rgba(91, 61, 246, 0.22); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }

.type-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.type-picker-head .type-picker-label { margin: 0; }

.bulk-import-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
}

.pro-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f3e8ff, #ffe8c8);
  color: #7a3d00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.import-overlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(22, 21, 47, 0.48);
  backdrop-filter: blur(4px);
}

.import-dialog {
  width: min(720px, 100%);
  max-height: min(860px, calc(100dvh - 48px));
  overflow: auto;
  padding: 22px 24px 20px;
}

.import-dialog-wide { width: min(1120px, 100%); }

.import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.import-head h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.import-hint {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.65;
}

.import-source {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  background: #fff;
}

.import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.import-actions-sticky {
  position: sticky;
  bottom: -20px;
  padding: 12px 0 4px;
  background: linear-gradient(180deg, transparent, #fff 28%);
}

.import-error-text {
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

.import-loading,
.import-error,
.import-upgrade {
  padding: 28px 8px 18px;
  text-align: center;
}

.import-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid rgba(91, 61, 246, 0.18);
  border-top-color: var(--brand-purple);
  animation: import-spin 0.8s linear infinite;
}

@keyframes import-spin { to { transform: rotate(360deg); } }

.import-upgrade-title { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.import-upgrade-text { margin: 0 0 18px; color: var(--text-secondary); }

.import-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.import-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--brand-lavender);
  color: var(--brand-purple-deep);
  font-size: 12.5px;
  font-weight: 700;
}

.import-stat-warn {
  background: #fff4e8;
  color: #a5501f;
}

.import-columns {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
}

.import-source-pane,
.import-list-pane {
  min-width: 0;
}

.import-source-pane h3,
.import-list-pane h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
}

.import-source-readonly {
  margin: 0;
  max-height: 520px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafaff;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-primary);
}

.import-unparsed { margin-top: 12px; }
.import-unparsed h4 { margin: 0 0 8px; font-size: 12px; color: var(--danger); }
.import-unparsed-item {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fdeef1;
}
.import-unparsed-text { margin: 0 0 4px; font-size: 12.5px; white-space: pre-wrap; }
.import-unparsed-reason { margin: 0; font-size: 12px; color: var(--danger); font-weight: 700; }

.import-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

.import-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.import-card.is-selected { border-color: rgba(91, 61, 246, 0.35); box-shadow: 0 0 0 3px rgba(91, 61, 246, 0.08); }
.import-card.is-unsupported { opacity: 0.78; background: #f7f7fb; }

.import-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.import-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.import-card-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.button-small {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
}

.import-prompt {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

.import-options {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.import-options li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-secondary);
}

.import-option-label {
  display: inline-flex;
  min-width: 22px;
  justify-content: center;
  color: var(--brand-purple-deep);
  font-weight: 800;
}

.import-answer {
  margin: 10px 0 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
}

.import-answer span {
  color: var(--text-secondary);
  font-weight: 700;
}

.import-warning {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff4e8;
  color: #a5501f;
  font-size: 12px;
  font-weight: 700;
}

.import-editor {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.import-editor .field-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
}

.import-editor .option-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
}

@media (max-width: 1440px) {
  .creator-main { grid-template-columns: minmax(272px, 300px) minmax(0, 1fr); }
  .editor-columns { grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr); }
  .type-buttons { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .type-button { font-size: 11px; }
}

@media (max-height: 820px) {
  .creator-main { padding-top: 12px; padding-bottom: 12px; }
  .editor-head { padding-top: 12px; padding-bottom: 12px; }
  .save-state,
  .account-chip,
  .creator-save,
  .creator-bar .button { min-height: 42px; }
  .account-avatar { width: 30px; height: 30px; }
  .title-input { font-size: 20px; }
}

@media (max-width: 1180px) {
  .creator-main { grid-template-columns: minmax(250px, 276px) minmax(0, 1fr); }
  .editor-columns { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(190px, 0.62fr) minmax(0, 1fr); }
}