/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.7s linear infinite; }

/* ── Mobile Nav ── */
@media (max-width: 639px) {
  #nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0; right: 0;
    flex-direction: column;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem 1rem 1.25rem;
    gap: 0.25rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  #nav-links.open { display: flex; }
}

/* ── Grade Radio ── */
input[name="grade"]:checked + .grade-btn {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #7c3aed;
}

/* ── Upload drag-over ── */
.drag-over {
  border-color: #7c3aed !important;
  background: #f5f3ff !important;
}

/* ── FAQ answer ── */
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }
.faq-arrow { transition: transform 0.2s ease; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }

/* ── Markdown result content ── */
.prose-result { font-size: 0.925rem; line-height: 1.8; color: #334155; }
.prose-result p { margin-bottom: 0.75rem; }
.prose-result h1,.prose-result h2,.prose-result h3 {
  font-weight: 700; color: #1e293b; margin: 1.25rem 0 0.5rem;
}
.prose-result h1 { font-size: 1.2rem; }
.prose-result h2 { font-size: 1.1rem; }
.prose-result h3 { font-size: 1rem; }
.prose-result strong { color: #5b21b6; }
.prose-result ul,.prose-result ol { padding-left: 1.25rem; margin-bottom: 0.75rem; }
.prose-result li { margin-bottom: 0.3rem; list-style: disc; }
.prose-result ol li { list-style: decimal; }
.prose-result code {
  background: #f1f5f9; padding: 0.1em 0.4em;
  border-radius: 4px; font-size: 0.85em;
}
.prose-result blockquote {
  border-left: 3px solid #ddd6fe; padding-left: 1rem;
  color: #64748b; font-style: italic; margin: 0.75rem 0;
}

/* ── Gradient text helper ── */
.gradient-text {
  background: linear-gradient(135deg, #c4b5fd, #f9a8d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Tab active state ── */
.tab-btn.active {
  background: white;
  color: #7c3aed;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}