/* ═══════════════════════════════════════════════
   Classicalia — Constellation Theme
   Shared style for all vocab / practice / test pages
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ── base ── */
body {
  background: linear-gradient(155deg, #080c1f 0%, #0d1433 50%, #090d22 100%) !important;
  background-attachment: fixed !important;
  color: #e0e4f0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── constellation canvas ── */
#constellation-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* ── nav bar ── */
.cv-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  background: rgba(8,12,31,0.85);
  backdrop-filter: blur(12px);
}
.cv-nav-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.cv-nav-logo {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0066ff !important;
  text-decoration: none;
  transition: opacity 0.15s;
}
.cv-nav-logo:hover { opacity: 0.8; }
.cv-nav-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.12);
}
.cv-nav-crumb {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 0.38rem;
}
.cv-crumb-link {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.13s;
}
.cv-crumb-link:hover { color: rgba(255,255,255,0.8); }
.cv-crumb-sep { color: rgba(255,255,255,0.18); }
.cv-crumb-cur { color: rgba(255,255,255,0.75); font-weight: 500; }
.cv-nav-right {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.cv-nav-btn {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  padding: 0.36rem 0.78rem;
  border-radius: 7px;
  text-decoration: none;
  transition: color 0.13s, background 0.13s;
}
.cv-nav-btn:hover { color: white; background: rgba(255,255,255,0.08); }
.cv-nav-btn-p {
  background: #0066ff !important;
  color: white !important;
  font-weight: 600 !important;
  margin-left: 0.2rem;
  box-shadow: 0 2px 14px rgba(0,102,255,0.5);
}
.cv-nav-btn-p:hover { background: #1a74ff !important; }

/* ── hide old header (JS replaces it, but just in case) ── */
header { display: none !important; }

/* ── main containers ── */
.main-container, .dashboard-container {
  position: relative;
  z-index: 1;
  max-width: 1100px !important;
  padding: 1.5rem 2rem 3rem !important;
}

/* ── grid layout ── */
.dashboard-grid {
  gap: 1.5rem !important;
}

/* ── glass panels ── */
.setup-panel, .quiz-area, .quiz-card, .results-panel, .results-box,
.widget, .panel, .search-panel, .test-area,
.grammar-table-container, .score-box, .completion-stats,
.task-mode-banner, .stat-group, .exclude-mastered-option,
.results-section, .print-section {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 13px !important;
  color: #e0e4f0 !important;
  box-shadow: none !important;
}

/* ── word display ── */
.word-display {
  background: rgba(255,255,255,0.02) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 13px 13px 0 0 !important;
}
.latin-word, .stem-display {
  color: #5e9fff !important;
  font-family: 'Lora', Georgia, serif !important;
}
.word-info, .word-chapter {
  color: rgba(255,255,255,0.4) !important;
}
.word-english {
  color: rgba(255,255,255,0.6) !important;
}

/* ── headings ── */
h1, h2, h3, h4, h5, h6 {
  color: white !important;
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic;
  letter-spacing: -0.02em;
}
.setup-panel h2, .results-header, .completion-title, .nav-title {
  color: white !important;
}

/* ── text ── */
p, .subtitle, .empty-description, .author, .header-author,
.stat-label, .review-reason, .test-info, .student-info-field,
.modal-body p, .completion-message, .card-desc, .quiz-content p {
  color: rgba(255,255,255,0.5) !important;
}
.stat-value, .completion-stat-value, .score-display, .results-score,
.results-count {
  color: #5e9fff !important;
}
.completion-stat-label {
  color: rgba(255,255,255,0.35) !important;
}
label, .control-group label, .checkbox-label, .checkbox-text {
  color: rgba(255,255,255,0.55) !important;
}
.mastered-count {
  color: #5ecb8a !important;
}

/* ── form controls ── */
.form-control, input[type="text"], input[type="number"],
input[type="search"], input[type="email"], textarea, select,
.search-input, .answer-input, .ending-input, .full-word-input,
.control-group select, .control-group input,
.limit-input-wrapper input, .filter-group select, .filter-group input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  color: white !important;
  font-family: 'Inter', sans-serif !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus,
.search-input:focus, .answer-input:focus {
  border-color: #0066ff !important;
  box-shadow: 0 0 0 3px rgba(0,102,255,0.2) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,0.25) !important;
}
select option {
  background: #0d1433 !important;
  color: white !important;
}

/* ── primary buttons ── */
.btn, .btn-primary, .start-practice-btn, .start-test-btn {
  background: #0066ff !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(0,102,255,0.4) !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
}
.btn:hover, .btn-primary:hover, .start-practice-btn:hover:not(:disabled),
.start-test-btn:hover:not(:disabled) {
  background: #1a74ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(0,102,255,0.5) !important;
}
.btn:disabled, .start-practice-btn:disabled, .start-test-btn:disabled {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.3) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ── success button ── */
.btn-success {
  background: #10b981 !important;
  box-shadow: 0 2px 12px rgba(16,185,129,0.4) !important;
}
.btn-success:hover {
  background: #059669 !important;
  box-shadow: 0 4px 18px rgba(16,185,129,0.5) !important;
}

/* ── warning button ── */
.btn-warning {
  background: #f59e0b !important;
  box-shadow: 0 2px 12px rgba(245,158,11,0.4) !important;
}

/* ── secondary / ghost buttons ── */
.btn-secondary, .btn-nav, .reset-btn, .clear-btn, .back-btn,
.free-practice-btn, .print-btn, .print-blank-btn, .btn-class-test {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .btn-nav:hover, .reset-btn:hover, .clear-btn:hover,
.back-btn:hover, .free-practice-btn:hover, .print-btn:hover, .btn-class-test:hover {
  background: rgba(255,255,255,0.12) !important;
  color: white !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* ── mark / tricky buttons ── */
.mark-btn, .tricky-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.5) !important;
}
.mark-btn:hover, .tricky-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
}

/* ── progress bar ── */
.progress-bar, .stats-bar {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
.progress-fill {
  background: linear-gradient(90deg, #0066ff, #5e9fff) !important;
  border-radius: 20px !important;
}

/* ── tabs ── */
.tabs {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
.tab-btn {
  color: rgba(255,255,255,0.4) !important;
  border-color: transparent !important;
  background: transparent !important;
  font-weight: 500 !important;
}
.tab-btn:hover { color: rgba(255,255,255,0.75) !important; }
.tab-btn.active {
  color: #5e9fff !important;
  border-bottom: 2px solid #0066ff !important;
  background: transparent !important;
}

/* ── feedback ── */
.feedback {
  border-radius: 10px !important;
}

/* ── exclude mastered ── */
.exclude-mastered-option {
  background: rgba(16,185,129,0.06) !important;
  border-color: rgba(16,185,129,0.15) !important;
}

/* ── sidebars: hide for clean standardised layout ── */
.left-sidebar {
  display: none !important;
}
.right-sidebar {
  display: none !important;
}
/* make main content fill the full width when sidebars are hidden */
.dashboard-grid {
  grid-template-columns: 1fr !important;
}
.dashboard-container {
  display: block !important;
}

/* ── tables (grammar, test) ── */
.grammar-table, .test-table {
  border-collapse: collapse !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.grammar-table th, .test-table th {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  font-weight: 600 !important;
}
.grammar-table td, .test-table td {
  background: rgba(255,255,255,0.015) !important;
  color: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}
.case-label {
  color: rgba(255,255,255,0.4) !important;
}

/* ── word results ── */
.word-result {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
}
.word-result:hover {
  background: rgba(255,255,255,0.06) !important;
}
.word-latin, .field-value {
  color: rgba(255,255,255,0.8) !important;
}

/* ── empty state ── */
.empty-state {
  color: rgba(255,255,255,0.3) !important;
}
.empty-icon { opacity: 0.4 !important; }
.empty-title { color: rgba(255,255,255,0.5) !important; }

/* ── tracking indicator ── */
.tracking-indicator {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.35) !important;
  border-radius: 8px !important;
}

/* ── modal ── */
.modal {
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(6px) !important;
}
.modal-content, .modal-box {
  background: #0d1433 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 18px !important;
  color: white !important;
}
.modal-header, .modal-footer {
  border-color: rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
.modal-header h2 { color: white !important; }
.close {
  color: rgba(255,255,255,0.35) !important;
  background: none !important;
}
.close:hover {
  color: white !important;
  background: rgba(255,255,255,0.08) !important;
}
.contact-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
}
.contact-label { color: white !important; }
.contact-value { color: rgba(255,255,255,0.45) !important; }

/* ── loading spinner ── */
.loading-spinner {
  border-color: rgba(255,255,255,0.08) !important;
  border-top-color: #5e9fff !important;
}

/* ── catch-all: force dark on any remaining white panels ── */
.main-content, .back-link {
  background: transparent !important;
  color: rgba(255,255,255,0.5) !important;
}
.back-link:hover {
  color: white !important;
}
.logo a {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #0066ff !important;
  color: #0066ff !important;
}

/* ── nuclear: override ALL remaining light backgrounds ── */
.word-result, .word-result:hover, .word-list-card, .vocab-item, .vocab-item:hover,
.vocab-display, .vocab-info, .word-display, .word-answer-display,
.word-header, .word-row:hover,
.history-card, .history-round, .history-round-header:hover,
.trend-card, .stat-box, .score-message,
.chapter-panel, .chapter-info, .chapter-btn, .length-btn,
.direction-option:hover:not(.active), .mode-option:hover:not(.active),
.set-info, .setup-description,
.loading-state, .print-controls,
.test-header, .test-table thead, .test-table th,
.test-table tbody tr, .test-table tbody tr:hover,
.test-table tr:hover:not(.correct):not(.incorrect),
.progress-section, .results-table tbody tr:hover,
.limit-suffix, .model-word-info, .word-count-badge,
.contact-info, .contact-item a:hover, .contact-label, .contact-value,
.modal-signature p:last-child, .btn-outline,
.answer-input:disabled {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.7) !important;
}

/* transparent variants (don't need background) */
.word-info, .word-english, .word-chapter,
.chapter-info, .set-info strong, .limit-suffix,
.setup-description, .score-message, .test-info, .test-header h2,
.loading-state, .panel h2, .print-section h4,
.search-panel h2, .results-count, .results-header,
.widget h3, .widget p, .widget li, .empty-description, .empty-state h3,
.completion-message, .btn-nav, .history-answer, .history-correct,
.contact-label, .contact-value, .modal-signature p:last-child {
  background: transparent !important;
}

/* feedback states - keep their semantic colours but darken */
.feedback-incorrect, .incorrect, .review-reason.struggling,
.word-input.incorrect, .ending-input.incorrect, .full-word-input.incorrect,
.mc-option.incorrect, .round-score.poor {
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #fca5a5 !important;
}
.correct .feedback-icon, .correct, .ending-input.correct,
.full-word-input.correct, .word-input.correct, .mc-option.correct,
.test-area.marked .correct {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.3) !important;
  color: #6ee7b7 !important;
}
.test-area.marked .incorrect {
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #fca5a5 !important;
}
.feedback-revealed {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.3) !important;
  color: #fcd34d !important;
}

/* review reason badges */
.review-reason.tricky {
  background: rgba(245,158,11,0.12) !important;
  color: #fcd34d !important;
}
.review-reason.struggling {
  background: rgba(239,68,68,0.12) !important;
  color: #fca5a5 !important;
}

/* trend dots/streaks */
.trend-dot.correct { background: #10b981 !important; }
.trend-streak.improving { color: #10b981 !important; }
.trend-streak.mastered { color: #5e9fff !important; }
.trend-streak.struggling { color: #ef4444 !important; }

/* classification badges */
.classification-badge.domestic,
.classification-badge.legal,
.classification-badge.military,
.classification-badge.religious {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.5) !important;
}

/* round scores */
.round-score.ok {
  color: #fcd34d !important;
}

/* direction/mode options */
.direction-option, .mode-option, .chapter-btn, .length-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.6) !important;
}
.direction-option:hover, .mode-option:hover,
.chapter-btn:hover, .length-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: white !important;
}
.direction-option.active, .mode-option.active {
  background: rgba(0,102,255,0.15) !important;
  border-color: rgba(0,102,255,0.4) !important;
  color: #5e9fff !important;
}

/* tricky button active */
.tricky-btn.tricky-active {
  background: rgba(245,158,11,0.15) !important;
  border-color: rgba(245,158,11,0.3) !important;
  color: #fcd34d !important;
}

/* tracking indicator */
.tracking-indicator.not-tracking {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.3) !important;
}
.tracking-indicator.not-tracking .tracking-dot {
  background: rgba(255,255,255,0.2) !important;
}

/* btn-outline */
.btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.6) !important;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.08) !important;
  color: white !important;
}

/* borders catch-all */
.search-panel, .results-section, .print-section,
.test-area, .quiz-area, .quiz-card, .panel,
.setup-panel, .widget, .stat-group, .stat-box,
.grammar-table-container, .chapter-panel,
.history-card, .history-round, .trend-card,
.vocab-item, .word-list-card, .word-result,
.exclude-mastered-option, .score-box, .completion-stats,
.task-mode-banner, .results-box, .results-panel,
.progress-section, .answer-cell, .answer-space {
  border-color: rgba(255,255,255,0.08) !important;
}

/* text colour catch-all for any remaining dark text */
.search-panel h2, .panel h2, .setup-panel h2,
.test-header h2, .print-section h4,
.results-header, .completion-title,
.set-info strong, .word-header, .stat-value {
  color: white !important;
}
.results-count, .word-chapter, .word-info,
.limit-suffix, .setup-description, .chapter-info,
.score-message, .test-info, .loading-state,
.empty-description, .empty-state h3,
.widget p, .widget li, .widget h3, .btn-nav,
.model-word-info, .contact-value,
.history-answer, .completion-message {
  color: rgba(255,255,255,0.45) !important;
}

/* ── background shapes (from old design) ── */
.bg-shapes, .shape { display: none !important; }

/* ── info button (old style, keep functional) ── */
.info-btn, .global-info-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.5) !important;
  box-shadow: none !important;
}
.info-btn:hover, .global-info-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  color: white !important;
}

/* ── highlight color ── */
.highlight {
  background: rgba(0,102,255,0.15) !important;
  color: #5e9fff !important;
}

/* ── no-results ── */
.no-results {
  color: rgba(255,255,255,0.35) !important;
}

/* ── scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ── responsive ── */
@media(max-width:768px) {
  .cv-nav { padding: 0.85rem 1.25rem; }
  .cv-nav-crumb { display: none; }
  .main-container, .dashboard-container { padding: 1rem 1rem 2rem !important; }
  .dashboard-grid { grid-template-columns: 1fr !important; }
}

/* ── print: revert to light ── */
@media print {
  body { background: white !important; color: black !important; }
  .cv-nav, #constellation-bg { display: none !important; }
  .setup-panel, .quiz-area, .widget, .panel, .test-area,
  .grammar-table-container {
    background: white !important; border-color: #ddd !important; color: black !important;
  }
  h1, h2, h3, h4, h5, h6, .latin-word, .stat-value { color: black !important; }
}