styles.css

/* Flashcard Browser View Styles */

/* ========== UTILITY CLASSES ========== */
.no-transition {
  transition: none !important;
}

.flashly-system-prompt-textarea {
  width: 100%;
}

/* ========== ICON SIZE STANDARDS ========== */
:root {
  --icon-size-sm: 16px;    /* Small icons in buttons */
  --icon-size-md: 20px;    /* Medium icons in headers */
  --icon-size-lg: 24px;    /* Large icons in prominent places */
  --icon-size-xl: 48px;    /* Extra large for special displays */
  --icon-size-empty: 64px; /* Empty state icons */
}

.flashcard-browser-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

/* ========== DECK LIST VIEW ========== */

.deck-list-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  overflow-y: auto;
}

.deck-list-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--background-modifier-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deck-list-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.deck-list-title {
  margin: 0;
  font-size: 1.5em;
  font-weight: 600;
  color: var(--text-normal);
}

.deck-list-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.deck-header-btn {
  padding: 8px 16px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 2px solid var(--background-modifier-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.deck-header-btn:hover {
  background: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
  transform: translateY(-1px);
}

.deck-header-btn:active {
  transform: translateY(0);
}

.deck-btn-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-btn-icon svg {
  width: 100%;
  height: 100%;
}

.deck-btn-text {
  white-space: nowrap;
}

/* Scan button - highlighted style */
.deck-scan-btn {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.deck-scan-btn:hover {
  background: var(--interactive-accent-hover);
  border-color: var(--interactive-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--interactive-accent-rgb), 0.3);
}

.deck-list-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9em;
  color: var(--text-muted);
  align-items: center;
}

.deck-refresh-btn {
  padding: 6px 12px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2em;
  transition: all 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.deck-refresh-btn svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.deck-refresh-btn:hover {
  background: var(--interactive-accent-hover);
  transform: scale(1.1);
}

/* Deck Search */
.deck-search-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.deck-search {
  flex: 1;
  min-width: 200px;
}

.deck-search-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 6px;
  color: var(--text-normal);
  font-size: 0.95em;
  transition: border-color 0.2s;
}

.deck-search-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 3px rgba(var(--interactive-accent-rgb), 0.1);
}

.deck-search-input::placeholder {
  color: var(--text-muted);
}

.deck-sort {
  display: flex;
  align-items: center;
  gap: 6px;
}

.deck-sort-label {
  font-size: 0.9em;
  color: var(--text-muted);
  white-space: nowrap;
}

.deck-sort-select {
  /* Ensure the selected text and native arrow aren’t clipped */
  box-sizing: border-box;
  height: 36px;
  line-height: 1.2;
  padding: 8px 28px 8px 12px; /* extra right padding for arrow */
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 6px;
  color: var(--text-normal);
  font-size: 0.9em;
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 150px;
  white-space: nowrap; /* keep label on one line */
  overflow: visible;   /* avoid inner clipping on some engines */
}

.deck-sort-select:hover {
  border-color: var(--interactive-accent);
}

.deck-sort-select:focus {
  outline: none;
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 3px rgba(var(--interactive-accent-rgb), 0.1);
}

/* Deck Tabs */
.deck-tabs-container {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 8px;
}

.deck-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.deck-tab:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.deck-tab.is-active {
  color: var(--interactive-accent);
  background: rgba(var(--interactive-accent-rgb), 0.1);
}

.deck-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--interactive-accent);
  border-radius: 3px 3px 0 0;
}

.deck-tab-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-tab-icon svg {
  width: 100%;
  height: 100%;
}

.deck-tab-label {
  font-size: 0.95em;
}

.deck-tab-count {
  font-size: 0.75em;
  background: var(--background-modifier-border);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 1.5em;
  text-align: center;
}

.deck-tab.is-active .deck-tab-count {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}

/* Deck Grid */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
  flex: 1;
  min-height: 0;
}

/* Deck Card */
.deck-card {
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 230px;
  position: relative;
  overflow: visible;
}

.deck-card:hover {
  border-color: var(--interactive-accent);
  background: var(--background-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.deck-card:active {
  transform: translateY(0);
}

.deck-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.deck-icon {
  font-size: 1.5em;
  line-height: 1;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--interactive-accent);
}

.deck-icon svg {
  width: 100%;
  height: 100%;
}

.deck-name {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-normal);
  flex: 1;
  word-break: break-word;
}

.deck-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
}

.deck-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.deck-stat-value {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--interactive-accent);
  line-height: 1.2;
}

.deck-stat-label {
  font-size: 0.8em;
  color: var(--text-muted);
  margin-top: 2px;
}

.deck-last-studied {
  font-size: 0.85em;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0;
}

.deck-study-btn {
  width: 100%;
  padding: 10px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 600;
  transition: all 0.2s;
  margin-top: auto;
}

.deck-study-btn:hover {
  background: var(--interactive-accent-hover);
  transform: scale(1.02);
}

.deck-study-btn:active {
  transform: scale(0.98);
}

.deck-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 10;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.deck-card:hover .deck-card-actions {
  opacity: 1;
}

.deck-action-btn {
  width: 34px;
  height: 34px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.deck-action-btn:hover {
  background: var(--background-modifier-hover) !important;
  color: var(--interactive-accent) !important;
  border-color: var(--interactive-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.deck-action-btn:active {
  transform: translateY(0);
}

.deck-action-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-action-icon svg {
  width: 100%;
  height: 100%;
}

.deck-action-btn.is-starred {
  color: #f59e0b !important; /* amber-500 */
  border-color: rgba(245, 158, 11, 0.4) !important;
  background: rgba(245, 158, 11, 0.05) !important;
}

.deck-action-btn.is-starred svg {
  fill: #f59e0b;
}

.deck-action-btn.is-archived {
  color: #ef4444 !important; /* red-500 */
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

.deck-action-btn.is-archived svg {
  fill: rgba(239, 68, 68, 0.1);
}

/* Archived deck card state */
.is-archived-deck {
  opacity: 0.7;
  filter: grayscale(0.8);
  border-style: dashed;
}

.is-archived-deck:hover {
  filter: grayscale(0.3);
  opacity: 0.9;
}

/* Header button active state */
.deck-header-btn.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

/* Starred indicator in card header */
.deck-star-icon {
  color: #eab308;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.deck-star-icon svg {
  width: 100%;
  height: 100%;
  fill: #eab308;
}

/* ========== CARD VIEW ========== */

.card-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  overflow-y: auto;
}

/* Card View Header */
.card-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--background-modifier-border);
}

.back-to-decks-btn {
  padding: 8px 14px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.back-to-decks-btn:hover {
  background: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
  transform: translateX(-2px);
}

.deck-title {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--text-normal);
  flex: 1;
}

.card-refresh-btn {
  padding: 6px 12px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2em;
  transition: all 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.card-refresh-btn svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.card-refresh-btn:hover {
  background: var(--interactive-accent-hover);
  transform: scale(1.1);
}

/* Card Sort */
.card-sort-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.card-sort {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-sort-label {
  font-size: 0.9em;
  color: var(--text-muted);
  white-space: nowrap;
}

.card-sort-select {
  box-sizing: border-box;
  height: 36px;
  line-height: 1.2;
  padding: 8px 28px 8px 12px;
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 6px;
  color: var(--text-normal);
  font-size: 0.9em;
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 180px;
  white-space: nowrap;
  overflow: visible;
}

.card-sort-select:hover {
  border-color: var(--interactive-accent);
}

.card-sort-select:focus {
  outline: none;
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 3px rgba(var(--interactive-accent-rgb), 0.1);
}

/* Card Progress */
.card-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--background-secondary);
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 0.9em;
}

.card-counter {
  font-weight: 600;
  color: var(--text-normal);
}

.cards-due {
  color: var(--text-muted);
}

/* Card Display */
.card-display {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  min-height: 250px;
  perspective: 1200px; /* Enable 3D perspective for flip effect */
  perspective-origin: center;
}

/* Card flip container */
.card-container {
  width: 100%;
  max-width: 600px;
  height: 100%;
  min-height: 300px;
  position: relative;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
}

/* Add will-change only during animation for GPU acceleration */
.card-inner.animating {
  will-change: transform;
}

.card-inner.flipped {
  transform: rotateY(180deg);
}

/* Card faces (front and back) */
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 300px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  box-sizing: border-box;
  transition: box-shadow 0.3s, border-color 0.3s;
  /* Layout containment for performance */
  contain: layout style paint;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
}

.card-face:hover {
  border-color: var(--interactive-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Keep old card-content class for backward compatibility if referenced elsewhere */
.card-content {
  width: 100%;
  max-width: 600px;
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-content:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.card-text {
  font-size: 1.2em;
  line-height: 1.6;
  color: var(--text-normal);
  text-align: left;
  min-height: 80px;
  width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Custom scrollbar for card text */
.card-text::-webkit-scrollbar {
  width: 8px;
}

.card-text::-webkit-scrollbar-track {
  background: var(--background-secondary);
  border-radius: 4px;
}

.card-text::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 4px;
  transition: background 0.2s;
}

.card-text::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Markdown content styling in flashcards */
.card-text * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  box-sizing: border-box;
}

.card-text p {
  margin: 0.5em 0;
}

.card-text p:first-child {
  margin-top: 0;
}

.card-text p:last-child {
  margin-bottom: 0;
}

.card-text strong,
.card-text b {
  font-weight: 700;
  color: var(--text-normal);
}

.card-text em,
.card-text i {
  font-style: italic;
}

.card-text pre {
  background: var(--code-background);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  margin: 12px 0;
}

.card-text code {
  background: var(--code-background);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-monospace);
  font-size: 0.9em;
}

.card-text pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.card-text img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-text ul,
.card-text ol {
  margin: 8px 0;
  padding-left: 24px;
}

.card-text li {
  margin: 4px 0;
}

.card-text blockquote {
  border-left: 3px solid var(--interactive-accent);
  padding-left: 16px;
  margin: 12px 0;
  color: var(--text-muted);
  font-style: italic;
}

.card-text table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
}

.card-text th,
.card-text td {
  border: 1px solid var(--background-modifier-border);
  padding: 8px;
  text-align: left;
}

.card-text th {
  background: var(--background-secondary);
  font-weight: 600;
}

.card-text h1,
.card-text h2,
.card-text h3,
.card-text h4,
.card-text h5,
.card-text h6 {
  margin: 16px 0 8px 0;
  font-weight: 600;
}

.card-text h1 { font-size: 1.6em; }
.card-text h2 { font-size: 1.4em; }
.card-text h3 { font-size: 1.2em; }
.card-text h4 { font-size: 1.1em; }
.card-text h5 { font-size: 1em; }
.card-text h6 { font-size: 0.95em; }

.flip-btn {
  padding: 12px 24px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 600;
  transition: all 0.2s;
  align-self: center;
}

.flip-btn:hover {
  background: var(--interactive-accent-hover);
  transform: scale(1.05);
}

.flip-btn:active {
  transform: scale(0.98);
}

/* Card Navigation */
.card-navigation {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.nav-btn {
  padding: 10px 24px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 2px solid var(--background-modifier-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 600;
  transition: all 0.2s;
  min-width: 120px;
}

.nav-btn:hover:not(:disabled) {
  background: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
  transform: translateY(-1px);
}

.nav-btn:active:not(:disabled) {
  transform: translateY(0);
}

.nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Card Actions */
.card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-btn {
  padding: 8px 16px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.2s;
}

.open-btn:hover {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.delete-btn:hover {
  background: var(--text-error);
  color: var(--text-on-accent);
  border-color: var(--text-error);
}

/* ========== EMPTY STATE ========== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
}

/* Override height for deck list empty state to prevent blocking interactions */
.deck-list-empty-state {
  height: auto !important;
  min-height: 80px !important;
  max-height: 120px !important;
  justify-content: flex-start !important;
  padding: 16px 32px !important;
  margin-top: 350px !important;
  flex: 0 0 auto !important;
}

.empty-icon {
  font-size: 1.5em;
  margin-bottom: 8px;
  opacity: 0.5;
}

.empty-title {
  font-size: 0.95em;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-normal);
}

.empty-message {
  font-size: 0.8em;
  max-width: 350px;
  line-height: 1.3;
}

/* ========== MOBILE RESPONSIVE ========== */

@media (max-width: 768px) {
  .deck-grid {
    grid-template-columns: 1fr;
  }

  .card-view-header {
    flex-wrap: wrap;
  }

  .card-content {
    padding: 20px;
  }

  .card-text {
    font-size: 1.1em;
    max-height: 250px;
  }

  .card-face {
    padding: 20px;
  }

  .card-navigation {
    flex-direction: column;
  }

  .nav-btn {
    width: 100%;
  }

  .card-actions {
    flex-direction: column;
    width: 100%;
  }

  .action-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .deck-list-view,
  .card-view {
    padding: 12px;
  }
  
  .deck-card {
    padding: 12px;
  }
  
  .card-content {
    padding: 16px;
  }
}

/* Header */
.browser-header {
  padding: 16px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.browser-statistics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.stat-item {
  text-align: center;
  padding: 8px;
  background: var(--background-secondary);
  border-radius: 4px;
}

.stat-value {
  font-size: 1.5em;
  font-weight: 600;
  color: var(--text-normal);
}

.stat-label {
  font-size: 0.85em;
  color: var(--text-muted);
  margin-top: 4px;
}

.browser-refresh-btn {
  width: 100%;
  padding: 8px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.2s;
}

.browser-refresh-btn:hover {
  background: var(--interactive-accent-hover);
}

/* Filters */
.browser-filters-container {
  padding: 0 16px 16px 16px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.browser-search {
  margin-bottom: 8px;
}

.browser-search-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  color: var(--text-normal);
  font-size: 0.9em;
}

.browser-search-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.browser-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.browser-filter-select,
.browser-sort-select {
  flex: 1;
  min-width: 100px;
  padding: 6px 8px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  color: var(--text-normal);
  font-size: 0.85em;
  cursor: pointer;
}

.browser-filter-select:hover,
.browser-sort-select:hover {
  border-color: var(--interactive-accent);
}

.browser-clear-filters-btn {
  padding: 6px 12px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s;
}

.browser-clear-filters-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

/* Card List */
.card-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.flashcard-item {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.flashcard-item:hover {
  background: var(--background-secondary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.flashcard-item.selected {
  border-color: var(--interactive-accent);
  background: var(--background-secondary);
}

.flashcard-front {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 500;
}

.card-icon {
  font-size: 1.2em;
}

.card-question {
  flex: 1;
  color: var(--text-normal);
}

.flashcard-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.deck-badge {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 500;
}

.due-date,
.card-status {
  padding: 2px 6px;
  background: var(--background-secondary);
  border-radius: 3px;
  font-size: 0.85em;
}

.flashcard-actions {
  display: flex;
  gap: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.flashcard-item:hover .flashcard-actions {
  opacity: 1;
}

.open-note-btn,
.delete-card-btn {
  padding: 4px 12px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s;
}

.open-note-btn:hover {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.delete-card-btn:hover {
  background: var(--text-error);
  color: var(--text-on-accent);
  border-color: var(--text-error);
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
}

.empty-icon {
  font-size: 4em;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-title {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-normal);
}

.empty-message {
  font-size: 0.9em;
  max-width: 300px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .browser-statistics {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .browser-filters {
    flex-direction: column;
  }
  
  .browser-filter-select,
  .browser-sort-select {
    width: 100%;
  }
}

/* ========== REVIEW MODAL ========== */

.flashly-review-modal {
  padding: 28px;
  max-width: 900px;
  margin: 0 auto;
  overflow-x: hidden !important;
  overflow-y: auto;
  box-sizing: border-box;
  width: 100%;
}

/* Ensure modal content el doesn't overflow */
.modal.flashly-review-modal,
.modal-container:has(.flashly-review-modal) {
  overflow-x: hidden !important;
}

.modal-content:has(.flashly-review-modal) {
  overflow-x: hidden !important;
  max-width: 100%;
}

.flashly-review-title {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.5em;
  font-weight: 600;
  color: var(--text-normal);
  text-align: center;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Ensure all elements in review modal respect container width */
.flashly-review-modal * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Card Container with improved styling and 3D perspective */
.flashly-card-container {
  perspective: 1200px; /* Enable 3D space */
  perspective-origin: center;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 200px;
  position: relative;
}

/* Card inner - rotates for flip effect */
.flashly-card-inner {
  position: relative;
  width: 100%;
  height: 60vh;
  max-height: 60vh;
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
}

/* Add will-change only during animation for GPU acceleration */
.flashly-card-inner.animating {
  will-change: transform;
}

/* Flipped state */
.flashly-card-inner.flipped {
  transform: rotateY(180deg);
}

/* Card faces (front and back) */
.flashly-card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 60vh;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px solid var(--background-modifier-border);
  border-radius: 12px;
  background: var(--background-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s;
  /* Remove contain paint to fix border visibility */
  contain: layout style;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Clickable card styling */
.flashly-card-clickable {
  cursor: pointer;
  pointer-events: auto;
}

.flashly-card-clickable:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  border-color: var(--interactive-accent);
}

.flashly-card-clickable:active .flashly-card-content {
  transform: scale(0.99);
}

/* Front face (question) */
.flashly-card-front {
  transform: rotateY(0deg);
}

/* Back face (answer) - pre-rotated 180 degrees */
.flashly-card-back {
  transform: rotateY(180deg);
}

/* Card content wrapper with scrolling for large content */
.flashly-card-content {
  padding: 32px;
  height: 100%;
  max-height: calc(60vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
}

/* Improved scrollbar for card content */
.flashly-card-content::-webkit-scrollbar {
  width: 8px;
}

.flashly-card-content::-webkit-scrollbar-track {
  background: var(--background-secondary);
  border-radius: 4px;
}

.flashly-card-content::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 4px;
  transition: background 0.2s;
}

.flashly-card-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
/* Markdown content styling in review modal cards */
.flashly-card-content p {
  margin: 0.5em 0;
}

.flashly-card-content p {
  margin: 0.5em 0;
}

.flashly-card-content pre {
  background: var(--code-background);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  margin: 12px 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.flashly-card-content code {
  background: var(--code-background);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-monospace);
  font-size: 0.9em;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.flashly-card-content pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.flashly-card-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.flashly-card-content audio {
  width: 100%;
  max-width: 100%;
  margin: 8px 0;
}

.flashly-review-modal audio,
.card-face audio {
  width: 100%;
  margin: 8px 0;
}

.flashly-card-content ul,
.flashly-card-content ol {
  margin: 8px 0;
  padding-left: 24px;
}

.flashly-card-content li {
  margin: 4px 0;
}

.flashly-card-content blockquote {
  border-left: 3px solid var(--interactive-accent);
  padding-left: 16px;
  margin: 12px 0;
  color: var(--text-muted);
  font-style: italic;
}

.flashly-card-content table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
  table-layout: fixed;
  overflow-wrap: break-word;
}

.flashly-card-content th,
.flashly-card-content td {
  border: 1px solid var(--background-modifier-border);
  padding: 8px;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.flashly-card-content th {
  background: var(--background-secondary);
  font-weight: 600;
}

.flashly-card-content h1,
.flashly-card-content h2,
.flashly-card-content h3,
.flashly-card-content h4,
.flashly-card-content h5,
.flashly-card-content h6 {
  margin: 16px 0 8px 0;
  font-weight: 600;
}

.flashly-card-content h1 { font-size: 1.4em; }
.flashly-card-content h2 { font-size: 1.3em; }
.flashly-card-content h3 { font-size: 1.2em; }
.flashly-card-content h4 { font-size: 1.1em; }
.flashly-card-content h5 { font-size: 1em; }
.flashly-card-content h6 { font-size: 0.95em; }

/* Rating Buttons Container - Modern horizontal layout */
.flashly-rating-container {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
}

/* Rating Buttons - Modern design with consistent styling */
.flashly-rating-btn {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 100%;
  padding: 14px 12px;
  border: 2px solid var(--background-modifier-border);
  border-radius: 8px;
  background: var(--background-secondary);
  color: var(--text-normal);
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  transition: all 0.2s ease;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.flashly-rating-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.flashly-rating-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Rating button color coding - Modern bold colors */
.flashly-rating-btn[data-rating="again"] {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.flashly-rating-btn[data-rating="again"]:hover {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.flashly-rating-btn[data-rating="hard"] {
  border-color: #f39c12;
  background: rgba(243, 156, 18, 0.1);
}

.flashly-rating-btn[data-rating="hard"]:hover {
  background: #f39c12;
  color: white;
  border-color: #f39c12;
}

.flashly-rating-btn[data-rating="good"] {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
}

.flashly-rating-btn[data-rating="good"]:hover {
  background: #2ecc71;
  color: white;
  border-color: #2ecc71;
}

.flashly-rating-btn[data-rating="easy"] {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.1);
}

.flashly-rating-btn[data-rating="easy"]:hover {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

/* Session Progress */
.flashly-session-progress {
  margin-top: 24px;
  padding: 16px;
  background: var(--background-secondary);
  border-radius: 8px;
  font-size: 0.95em;
  color: var(--text-muted);
  text-align: center;
  font-weight: 500;
}

/* Summary Screen */
.flashly-summary-container {
  text-align: center;
  padding: 48px 24px;
  animation: fadeIn 0.4s ease-in-out;
}

.flashly-summary-container h2 {
  margin-bottom: 16px;
  font-size: 1.8em;
  font-weight: 700;
  color: var(--text-normal);
}

.flashly-summary-container p {
  font-size: 1.1em;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.flashly-summary-container ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flashly-summary-container li {
  padding: 12px 20px;
  background: var(--background-secondary);
  border-radius: 8px;
  color: var(--text-normal);
  font-size: 1em;
  font-weight: 500;
}

/* Mobile Responsive for Review Modal */
@media (max-width: 768px) {
  .flashly-review-modal {
    padding: 16px;
  }

  .flashly-card-inner {
    max-height: 60vh;
  }

  .flashly-card-content {
    padding: 20px;
    font-size: 1em;
  }

  .flashly-card-face {
    padding: 20px;
  }

  .flashly-rating-container {
    gap: 8px;
  }

  .flashly-rating-btn {
    min-width: 100px;
    padding: 14px 10px;
    font-size: 0.85em;
  }
}

/* ========== STATISTICS VIEW ========== */

.flashly-statistics-view {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 20px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--background-primary);
  box-sizing: border-box !important;
}

/* Stats Header */
.stats-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--background-modifier-border);
}

.stats-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-title {
  margin: 0;
  font-size: 1.6em;
  font-weight: 700;
  color: var(--text-normal);
}

.stats-refresh-btn {
  padding: 8px 12px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2em;
  transition: all 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.stats-refresh-btn svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.stats-refresh-btn:hover {
  background: var(--interactive-accent-hover);
  transform: scale(1.1);
}

/* Overview Cards */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stats-overview-card {
  background: var(--background-secondary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-overview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--interactive-accent);
}

.stats-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.stats-card-icon svg {
  width: 100%;
  height: 100%;
}

.stats-card-content {
  flex: 1;
}

.stats-card-value {
  font-size: 2em;
  font-weight: 700;
  color: var(--text-normal);
  line-height: 1.2;
}

.stats-card-label {
  font-size: 0.9em;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Color variants for overview cards */
.stats-color-blue .stats-card-icon {
  color: #3498db;
}

.stats-color-orange .stats-card-icon {
  color: #f39c12;
}

.stats-color-green .stats-card-icon {
  color: #2ecc71;
}

.stats-color-purple .stats-card-icon {
  color: #9b59b6;
}

/* Stats Section */
.stats-section {
  margin-bottom: 32px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 12px;
  padding: 24px;
}

.stats-section-title {
  margin: 0 0 20px 0;
  font-size: 1.3em;
  font-weight: 600;
  color: var(--text-normal);
}

.stats-empty-message {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
  font-size: 0.95em;
}

/* Deck Breakdown */
.stats-deck-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-deck-item {
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s;
}

.stats-deck-item-clickable {
  cursor: pointer;
}

.stats-deck-item-clickable:hover {
  border-color: var(--interactive-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.stats-deck-item-clickable:active {
  transform: translateY(0);
}

.stats-deck-item:hover {
  border-color: var(--interactive-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stats-deck-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.stats-deck-icon {
  font-size: 1.2em;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--interactive-accent);
}

.stats-deck-icon svg {
  width: 100%;
  height: 100%;
}

.stats-deck-name {
  flex: 1;
  font-weight: 600;
  font-size: 1.1em;
  color: var(--text-normal);
}

.stats-deck-total {
  font-weight: 700;
  font-size: 1.3em;
  color: var(--interactive-accent);
}

.stats-deck-details {
  margin-bottom: 12px;
}

.stats-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stats-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.85em;
  font-weight: 500;
}

.stats-pill-green {
  background: rgba(46, 204, 113, 0.15);
  color: #27ae60;
}

.stats-pill-orange {
  background: rgba(243, 156, 18, 0.15);
  color: #e67e22;
}

.stats-pill-blue {
  background: rgba(52, 152, 219, 0.15);
  color: #2980b9;
}

.stats-pill-label {
  color: var(--text-muted);
}

.stats-pill-value {
  font-weight: 700;
}

/* Progress Bar */
.stats-progress-bar {
  display: flex;
  height: 8px;
  background: var(--background-modifier-border);
  border-radius: 4px;
  overflow: hidden;
}

.stats-progress-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.stats-progress-new {
  background: #2ecc71;
}

.stats-progress-learning {
  background: #f39c12;
}

.stats-progress-review {
  background: #3498db;
}

/* Review Activity Heatmap */
.stats-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12px, 1fr));
  gap: 4px;
  margin-bottom: 12px;
  max-width: 100%;
}

.stats-activity-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--background-modifier-border);
  transition: all 0.2s;
  cursor: pointer;
}

.stats-activity-cell:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.stats-activity-intensity-0 {
  background: var(--background-modifier-border);
}

.stats-activity-intensity-1 {
  background: rgba(46, 204, 113, 0.25);
}

.stats-activity-intensity-2 {
  background: rgba(46, 204, 113, 0.5);
}

.stats-activity-intensity-3 {
  background: rgba(46, 204, 113, 0.75);
}

.stats-activity-intensity-4 {
  background: rgba(46, 204, 113, 1);
}

.stats-activity-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  color: var(--text-muted);
}

.stats-legend-label {
  padding: 0 8px;
}

/* Card Distribution */
.stats-distribution-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-distribution-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-distribution-label {
  min-width: 120px;
  font-weight: 500;
  color: var(--text-normal);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-distribution-count {
  font-size: 0.9em;
  color: var(--text-muted);
}

.stats-distribution-bar-container {
  flex: 1;
  height: 24px;
  background: var(--background-modifier-border);
  border-radius: 12px;
  overflow: hidden;
}

.stats-distribution-bar {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s ease;
  width: var(--bar-width, 0%);
}

.stats-bar-new {
  background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.stats-bar-learning {
  background: linear-gradient(90deg, #f39c12, #e67e22);
}

.stats-bar-review {
  background: linear-gradient(90deg, #3498db, #2980b9);
}

.stats-bar-relearning {
  background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.stats-distribution-percentage {
  min-width: 50px;
  text-align: right;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.9em;
}

/* Quiz Statistics */
.stats-quiz-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stats-quiz-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--background-secondary);
  border-radius: 8px;
  border-left: 3px solid var(--interactive-accent);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stats-quiz-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-subsection-title {
  font-size: 1em;
  font-weight: 600;
  color: var(--text-normal);
  margin: 20px 0 12px 0;
}

.stats-quiz-history {
  margin-bottom: 24px;
}

.stats-quiz-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-quiz-item {
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  transition: border-color 0.2s;
}

.stats-quiz-item:hover {
  border-color: var(--interactive-accent);
}

.stats-quiz-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stats-quiz-item-title {
  font-weight: 600;
  color: var(--text-normal);
  font-size: 0.95em;
}

.stats-quiz-item-score {
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9em;
  background: var(--background-primary);
}

.stats-score-excellent {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1) !important;
}

.stats-score-good {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1) !important;
}

.stats-score-fair {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1) !important;
}

.stats-score-poor {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1) !important;
}

.stats-quiz-item-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85em;
  color: var(--text-muted);
}

.stats-quiz-details-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.stats-quiz-detail {
  color: var(--text-muted);
}

.stats-quiz-badge {
  padding: 2px 8px;
  background: var(--background-primary);
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: 500;
}

.stats-quiz-time {
  color: var(--text-faint);
  font-size: 0.9em;
}

.stats-quiz-types {
  margin-top: 20px;
}

.stats-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.stats-type-card {
  padding: 16px;
  background: var(--background-secondary);
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
}

.stats-type-name {
  font-weight: 600;
  font-size: 0.95em;
  color: var(--text-normal);
  margin-bottom: 10px;
}

.stats-type-accuracy-bar {
  height: 8px;
  background: var(--background-primary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.stats-type-accuracy-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  width: var(--accuracy-width, 0%);
}

.stats-accuracy-high {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.stats-accuracy-medium {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.stats-accuracy-low {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.stats-type-stats {
  font-size: 0.9em;
  color: var(--text-muted);
  font-weight: 500;
}

/* Mobile Responsive for Statistics */
@media (max-width: 768px) {
  .flashly-statistics-view {
    padding: 12px;
  }

  .stats-overview {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stats-overview-card {
    padding: 16px;
  }

  .stats-card-icon {
    width: 32px;
    height: 32px;
  }

  .stats-section {
    padding: 16px;
  }

  .stats-activity-grid {
    grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));
    gap: 3px;
  }

  .stats-distribution-label {
    min-width: 100px;
    font-size: 0.9em;
  }

  .stats-quiz-overview {
    grid-template-columns: 1fr;
  }

  .stats-type-grid {
    grid-template-columns: 1fr;
  }

  .stats-quiz-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .stats-quiz-item-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ========== STATUS BAR ========== */

.flashly-status-bar-due {
  cursor: pointer;
  font-weight: 600;
  color: var(--interactive-accent);
  transition: opacity 0.2s;
}

.flashly-status-bar-due:hover {
  opacity: 0.8;
}

/* ========== QUIZ VIEW ========== */

.flashly-quiz-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Empty State */
.quiz-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-muted);
}

.quiz-empty-icon {
  font-size: 4em;
  margin-bottom: 16px;
  opacity: 0.5;
  width: var(--icon-size-empty);
  height: var(--icon-size-empty);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.quiz-empty-icon svg {
  width: 100%;
  height: 100%;
}

.quiz-empty-title {
  font-size: 1.3em;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-normal);
}

.quiz-empty-message {
  font-size: 0.95em;
  max-width: 350px;
}

/* Quiz Header */
.quiz-header {
  margin-bottom: 24px;
}

.quiz-title {
  margin: 0;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--text-normal);
}

/* Progress Bar */
.quiz-progress {
  margin-bottom: 32px;
}

.quiz-progress-bar {
  height: 8px;
  background: var(--background-modifier-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--interactive-accent), var(--interactive-accent-hover));
  transition: width 0.3s ease;
  width: var(--progress-width, 0%);
}

.quiz-progress-text {
  text-align: center;
  font-size: 0.9em;
  color: var(--text-muted);
  font-weight: 500;
}

/* Question Container */
.quiz-question-container {
  background: var(--background-secondary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 24px;
  min-height: 300px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  overflow-y: visible;
}

.quiz-question-container:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  border-color: var(--interactive-accent);
}

.quiz-type-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 16px;
}

.quiz-type-multiple-choice {
  background: rgba(52, 152, 219, 0.15);
  color: #2980b9;
}

.quiz-type-fill-blank {
  background: rgba(46, 204, 113, 0.15);
  color: #27ae60;
}

.quiz-type-true-false {
  background: rgba(243, 156, 18, 0.15);
  color: #e67e22;
}

.quiz-type-match {
  background: rgba(155, 89, 182, 0.16);
  color: #8e44ad;
}

.quiz-question-prompt {
  font-size: 1.2em;
  line-height: 1.6;
  color: var(--text-normal);
  font-weight: 500;
  margin-bottom: 24px;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}

.quiz-prompt-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  white-space: normal;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.6;
}

/* Markdown content in quiz prompts */
.quiz-prompt-content * {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.quiz-prompt-content p {
  margin: 0.5em 0;
  max-width: 100%;
}

.quiz-prompt-content p:first-child {
  margin-top: 0;
}

.quiz-prompt-content p:last-child {
  margin-bottom: 0;
}

.quiz-prompt-content strong,
.quiz-prompt-content b {
  font-weight: 700;
  color: var(--text-normal);
}

.quiz-prompt-content em,
.quiz-prompt-content i {
  font-style: italic;
}

.quiz-prompt-content code {
  background: var(--code-background);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-monospace);
  font-size: 0.85em;
  word-break: break-all;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: inline;
  max-width: 100%;
  box-sizing: border-box;
}

.quiz-prompt-content pre {
  background: var(--code-background);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  margin: 12px 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.quiz-prompt-content pre code {
  background: transparent;
  padding: 0;
  word-break: normal;
  white-space: pre;
  overflow-wrap: normal;
  display: block;
}

.quiz-prompt-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 12px 0;
}

.quiz-prompt-content ul,
.quiz-prompt-content ol {
  margin: 8px 0;
  padding-left: 24px;
  max-width: 100%;
}

.quiz-prompt-content li {
  margin: 4px 0;
  max-width: 100%;
}

.quiz-prompt-content blockquote {
  border-left: 3px solid var(--interactive-accent);
  padding-left: 16px;
  margin: 12px 0;
  color: var(--text-muted);
  max-width: 100%;
}

.quiz-prompt-content table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
  display: block;
  overflow-x: auto;
}

.quiz-prompt-content th,
.quiz-prompt-content td {
  border: 1px solid var(--background-modifier-border);
  padding: 8px;
  text-align: left;
}

.quiz-prompt-content th {
  background: var(--background-secondary);
  font-weight: 600;
}

/* Answer Area */
.quiz-answer-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Custom scrollbar styling for answer area */
.quiz-answer-area::-webkit-scrollbar {
  width: 8px;
}

.quiz-answer-area::-webkit-scrollbar-track {
  background: var(--background-secondary);
  border-radius: 4px;
}

.quiz-answer-area::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 4px;
  transition: background 0.2s;
}

.quiz-answer-area::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Scroll indicator shadow - appears at bottom when scrollable */
.quiz-answer-area::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, transparent, var(--background-secondary));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  margin-top: -20px;
  z-index: 1;
}

/* Show scroll indicator when content overflows */
.quiz-answer-area.has-scroll::after {
  opacity: 0.6;
}

.quiz-option-btn {
  width: 100%;
  padding: 16px 20px;
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 8px;
  color: var(--text-normal);
  font-size: 1em;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  min-height: fit-content;
}

.quiz-option-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  white-space: normal;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
}

/* Markdown content in quiz options */
.quiz-option-content * {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  box-sizing: border-box;
}

.quiz-option-content p {
  margin: 0;
  max-width: 100%;
}

.quiz-option-content p:first-child {
  margin-top: 0;
}

.quiz-option-content p:last-child {
  margin-bottom: 0;
}

.quiz-match-instructions {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 0.95em;
  text-align: center;
}

.quiz-match-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  perspective: 1000px;
  min-height: 400px;
  padding: 10px;
}

.quiz-match-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1.2;
  padding: 12px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  color: var(--text-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  user-select: none;
  overflow: hidden;
}

.quiz-match-item:hover:not(.quiz-match-item-matched) {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--interactive-accent);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.quiz-match-item-selected {
  border-color: var(--interactive-accent);
  background: var(--background-primary-alt);
  box-shadow: 0 0 0 3px rgba(var(--interactive-accent-rgb), 0.2), 0 8px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px) scale(1.02);
}

.quiz-match-item-matched {
  animation: match-success 0.5s ease forwards;
  pointer-events: none;
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.quiz-match-item-incorrect {
  animation: match-fail 0.4s ease;
  border-color: #f44336;
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

@keyframes match-success {
  0% { transform: scale(1.05); }
  50% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; visibility: hidden; }
}

@keyframes match-fail {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.quiz-match-item-content {
  line-height: 1.4;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.95em;
}

/* Hide columns/titles in redesigned layout */
.quiz-match-column-title {
  display: none;
}

.quiz-match-column {
  display: contents;
}

.quiz-match-pairs {
  display: none; /* Redesigned Match doesn't need a summary list */
}
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  background: var(--background-primary);
}

.quiz-match-pair-term,
.quiz-match-pair-definition {
  font-weight: 600;
}

.quiz-match-pair-arrow {
  color: var(--text-muted);
}

.quiz-match-remove-btn {
  margin-left: auto;
  padding: 6px 10px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-normal);
}

.quiz-match-remove-btn:hover {
  border-color: var(--interactive-accent);
}

.quiz-match-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.quiz-match-empty {
  color: var(--text-muted);
  font-style: italic;
}

.quiz-option-content strong,
.quiz-option-content b {
  font-weight: 700;
  color: var(--text-normal);
}

.quiz-option-content em,
.quiz-option-content i {
  font-style: italic;
}

.quiz-option-content code {
  background: var(--code-background);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-monospace);
  font-size: 0.9em;
  word-break: break-all;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: inline;
  max-width: 100%;
  box-sizing: border-box;
}

.quiz-option-content pre {
  background: var(--code-background);
  border-radius: 4px;
  padding: 8px;
  overflow-x: auto;
  margin: 8px 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.quiz-option-content pre code {
  background: transparent;
  padding: 0;
  word-break: normal;
  white-space: pre;
  overflow-wrap: normal;
  display: block;
}

.quiz-option-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 8px 0;
}

.quiz-option-content table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin: 8px 0;
  display: block;
  overflow-x: auto;
}

.quiz-option-content th,
.quiz-option-content td {
  border: 1px solid var(--background-modifier-border);
  padding: 6px;
  text-align: left;
}

.quiz-option-content th {
  background: var(--background-secondary);
  font-weight: 600;
}

.quiz-option-btn:hover {
  border-color: var(--interactive-accent);
  background: var(--background-modifier-hover);
}

.quiz-option-selected {
  border-color: var(--interactive-accent);
  background: rgba(var(--interactive-accent-rgb), 0.1);
  font-weight: 600;
}

.quiz-option-tf {
  font-weight: 600;
  font-size: 1.1em;
}

.quiz-input {
  width: 100%;
  padding: 16px 20px;
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 8px;
  color: var(--text-normal);
  font-size: 1.1em;
  transition: border-color 0.2s;
}

.quiz-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 3px rgba(var(--interactive-accent-rgb), 0.1);
}

/* Navigation */
.quiz-navigation {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.quiz-nav-btn {
  padding: 12px 32px;
  background: var(--background-secondary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 8px;
  color: var(--text-normal);
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.quiz-nav-btn:hover {
  background: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
  transform: translateY(-2px);
}

.quiz-nav-primary {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.quiz-nav-primary:hover {
  background: var(--interactive-accent-hover);
}

/* Results */
.quiz-results-container {
  max-width: 800px;
  margin: 0 auto;
}

.quiz-score-card {
  background: var(--background-secondary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;
  margin-bottom: 32px;
}

.quiz-results-title {
  font-size: 2em;
  font-weight: 700;
  margin: 0 0 24px 0;
  color: var(--text-normal);
}

.quiz-score-display {
  margin-bottom: 16px;
}

.quiz-score-value {
  font-size: 4em;
  font-weight: 700;
  color: var(--interactive-accent);
  line-height: 1;
}

.quiz-score-label {
  font-size: 1.2em;
  color: var(--text-muted);
  margin-top: 8px;
}

.quiz-performance-message {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--text-normal);
  margin-top: 16px;
}

/* Review Section */
.quiz-review-section {
  margin-bottom: 32px;
}

.quiz-review-title {
  font-size: 1.3em;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-normal);
}

.quiz-review-question {
  background: var(--background-primary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
}

.quiz-review-correct {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.05);
}

.quiz-review-incorrect {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.05);
}

.quiz-review-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.quiz-review-number {
  font-weight: 700;
  color: var(--text-muted);
}

.quiz-review-prompt {
  flex: 1;
  color: var(--text-normal);
}

.quiz-review-icon {
  font-size: 1.2em;
  font-weight: 700;
}

.quiz-review-correct .quiz-review-icon {
  color: #2ecc71;
}

.quiz-review-incorrect .quiz-review-icon {
  color: #e74c3c;
}

.quiz-answer-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--background-modifier-border);
}

.quiz-your-answer,
.quiz-correct-answer {
  margin-bottom: 8px;
  font-size: 0.95em;
}

.quiz-answer-label {
  font-weight: 600;
  color: var(--text-muted);
}

.quiz-explanation {
  margin-top: 12px;
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  font-size: 0.9em;
  color: var(--text-muted);
}

/* Results Actions */
.quiz-results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.quiz-action-btn {
  padding: 12px 32px;
  background: var(--background-secondary);
  border: 2px solid var(--background-modifier-border);
  border-radius: 8px;
  color: var(--text-normal);
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.quiz-action-btn:hover {
  background: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
  transform: translateY(-2px);
}

.quiz-btn-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-btn-icon svg {
  width: 100%;
  height: 100%;
}

.quiz-btn-primary {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.quiz-btn-primary:hover {
  background: var(--interactive-accent-hover);
}

/* Keyboard Shortcuts Hint */
.quiz-keyboard-hints {
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--background-secondary);
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  text-align: center;
  font-size: 0.85em;
  color: var(--text-muted);
}

.quiz-hint-label {
  font-weight: 600;
  color: var(--text-normal);
  margin-right: 8px;
}

.quiz-hint-separator {
  color: var(--text-faint);
  margin: 0 4px;
}

.quiz-hint-item {
  color: var(--text-muted);
  font-family: var(--font-monospace);
  background: var(--background-primary);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Mobile Responsive for Quiz */
@media (max-width: 768px) {
  .flashly-quiz-view {
    padding: 16px;
  }

  .quiz-question-container {
    padding: 20px;
  }

  .quiz-question-prompt {
    font-size: 1.1em;
  }

  .quiz-answer-area {
    max-height: 300px;
  }

  .quiz-navigation,
  .quiz-results-actions {
    flex-direction: column;
  }

  .quiz-nav-btn,
  .quiz-action-btn {
    width: 100%;
  }

  .quiz-score-value {
    font-size: 3em;
  }
}

/* ========== GENERATE QUIZ MODAL ========== */

.flashly-generate-quiz-modal {
  padding: 20px;
}

/* ========== QUIZ HISTORY VIEW ========== */

.flashly-quiz-history-view {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 20px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.quiz-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--background-modifier-border);
}

.quiz-history-title {
  margin: 0;
  font-size: 1.5em;
  color: var(--text-normal);
}

.quiz-history-refresh-btn {
  padding: 8px 16px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2em;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.quiz-history-refresh-btn svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.quiz-history-refresh-btn:hover {
  background: var(--interactive-accent);
  border-color: var(--interactive-accent);
}

/* Empty state */
.quiz-history-empty {
  text-align: center;
  padding: 60px 20px;
}

.quiz-history-empty-icon {
  font-size: 4em;
  margin-bottom: 16px;
  width: var(--icon-size-empty);
  height: var(--icon-size-empty);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-muted);
  opacity: 0.5;
}

.quiz-history-empty-icon svg {
  width: 100%;
  height: 100%;
}

.quiz-history-empty-title {
  font-size: 1.5em;
  margin-bottom: 12px;
  color: var(--text-normal);
}

.quiz-history-empty-message {
  color: var(--text-muted);
  margin-bottom: 24px;
}

.quiz-history-empty-btn {
  padding: 12px 24px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.quiz-history-empty-btn:hover {
  background: var(--interactive-accent-hover);
}

/* Controls */
.quiz-history-controls {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--background-secondary);
  border-radius: 8px;
}

.quiz-history-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quiz-history-control-label {
  font-weight: 600;
  color: var(--text-normal);
  font-size: 0.9em;
}

.quiz-history-select {
  padding: 6px 12px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  color: var(--text-normal);
  cursor: pointer;
  font-size: 0.9em;
}

.quiz-history-select:hover {
  border-color: var(--interactive-accent);
}

/* Summary */
.quiz-history-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.quiz-history-summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--background-secondary);
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
  transition: transform 0.2s;
}

.quiz-history-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.quiz-summary-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-summary-icon svg {
  width: 100%;
  height: 100%;
}

.quiz-summary-content {
  flex: 1;
}

.quiz-summary-value {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--text-normal);
  line-height: 1.2;
}

.quiz-summary-label {
  font-size: 0.85em;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Quiz list */
.quiz-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-history-card {
  padding: 20px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.quiz-history-card:hover {
  border-color: var(--interactive-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Card header */
.quiz-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}

.quiz-card-title-section {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.quiz-card-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-normal);
}

.quiz-card-badge {
  padding: 4px 10px;
  background: var(--background-primary);
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
  white-space: nowrap;
}

.quiz-card-score {
  padding: 8px 16px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1.1em;
  background: var(--background-primary);
}

/* Card details */
.quiz-card-details {
  margin-bottom: 16px;
}

.quiz-card-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.quiz-card-detail {
  font-size: 0.9em;
  color: var(--text-muted);
  padding: 6px 12px;
  background: var(--background-primary);
  border-radius: 6px;
}

/* Card actions */
.quiz-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quiz-card-btn {
  padding: 8px 16px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  color: var(--text-normal);
  font-size: 0.9em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.quiz-card-btn:hover {
  border-color: var(--interactive-accent);
  background: var(--background-secondary);
}

.quiz-card-btn-primary {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.quiz-card-btn-primary:hover {
  background: var(--interactive-accent-hover);
  border-color: var(--interactive-accent-hover);
}

.quiz-card-btn-danger {
  color: #ef4444;
}

.quiz-card-btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

/* Export quiz modal */
.flashly-export-quiz-modal {
  padding: 20px;
}

.flashly-export-quiz-modal h2 {
  margin-bottom: 12px;
  color: var(--text-normal);
}

.flashly-export-quiz-modal p {
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 0.9em;
}

.quiz-export-input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 20px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  color: var(--text-normal);
  font-size: 0.95em;
  font-family: var(--font-monospace);
}

.quiz-export-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.1);
}

/* Confirm delete modal */
.flashly-confirm-delete-modal {
  padding: 20px;
}

.flashly-confirm-delete-modal h2 {
  margin-bottom: 16px;
  color: var(--text-normal);
}

.flashly-confirm-delete-modal p {
  margin-bottom: 24px;
  color: var(--text-muted);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .flashly-quiz-history-view {
    padding: 16px;
  }

  .quiz-history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .quiz-history-controls {
    flex-direction: column;
    gap: 12px;
  }

  .quiz-history-summary {
    grid-template-columns: 1fr;
  }

  .quiz-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .quiz-card-details-grid {
    grid-template-columns: 1fr;
  }

  .quiz-card-actions {
    flex-direction: column;
  }

  .quiz-card-btn {
    width: 100%;
  }
}

.flashly-generate-quiz-modal h2 {
  margin-top: 0;
  margin-bottom: 20px;
}

.flashly-generate-quiz-modal h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-normal);
}

.quiz-warning {
  padding: 12px 16px;
  background: rgba(243, 156, 18, 0.1);
  border: 1px solid rgba(243, 156, 18, 0.3);
  border-radius: 6px;
  margin: 12px 0;
  color: var(--text-normal);
  font-size: 0.9em;
}

/* Deck selection */
.quiz-deck-selection {
  margin-top: 12px;
  margin-bottom: 16px;
}

.quiz-deck-search-container {
  margin-bottom: 12px;
}

.quiz-deck-search-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.95em;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  transition: border-color 0.2s;
}

.quiz-deck-search-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.quiz-deck-search-input::placeholder {
  color: var(--text-muted);
}

.quiz-deck-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.quiz-deck-control-btn {
  padding: 6px 12px;
  font-size: 0.9em;
  background: var(--interactive-normal);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.quiz-deck-control-btn:hover {
  background: var(--interactive-hover);
}

.quiz-deck-list {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 8px;
  background: var(--background-secondary);
}

.quiz-deck-list::-webkit-scrollbar {
  width: 8px;
}

.quiz-deck-list::-webkit-scrollbar-track {
  background: var(--background-secondary);
  border-radius: 4px;
}

.quiz-deck-list::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 4px;
}

.quiz-deck-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.quiz-deck-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s;
  cursor: pointer;
}

.quiz-deck-item:hover {
  background: var(--background-modifier-hover);
}

.quiz-deck-item input[type="checkbox"] {
  margin-right: 10px;
  cursor: pointer;
}

.quiz-deck-label {
  flex: 1;
  font-weight: 500;
  color: var(--text-normal);
  cursor: pointer;
}

.quiz-deck-count {
  color: var(--text-muted);
  font-size: 0.9em;
  font-weight: normal;
}

.quiz-deck-no-results {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* Card Selection for AI Quiz Generation */
.quiz-card-selection {
  margin-top: 12px;
  margin-bottom: 16px;
}

.quiz-card-selection h4 {
  margin: 0 0 8px 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--text-normal);
}

.quiz-card-selection-desc {
  margin: 0 0 12px 0;
  font-size: 0.9em;
  color: var(--text-muted);
}

.quiz-card-search-container {
  margin-bottom: 12px;
}

.quiz-card-search-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.95em;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  transition: border-color 0.2s;
}

.quiz-card-search-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.quiz-card-search-input::placeholder {
  color: var(--text-muted);
}

.quiz-card-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.quiz-card-control-btn {
  padding: 6px 12px;
  font-size: 0.9em;
  background: var(--interactive-normal);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.quiz-card-control-btn:hover {
  background: var(--interactive-hover);
}

.quiz-card-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 8px;
  background: var(--background-secondary);
}

.quiz-card-list::-webkit-scrollbar {
  width: 8px;
}

.quiz-card-list::-webkit-scrollbar-track {
  background: var(--background-secondary);
  border-radius: 4px;
}

.quiz-card-list::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 4px;
}

.quiz-card-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.quiz-card-item {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  border-radius: 4px;
  transition: background 0.2s;
  cursor: pointer;
  gap: 10px;
}

.quiz-card-item:hover {
  background: var(--background-modifier-hover);
}

.quiz-card-item input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.quiz-card-label-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.quiz-card-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  min-width: 0;
}

.quiz-card-text {
  flex: 1;
  font-weight: 500;
  color: var(--text-normal);
  word-break: break-word;
  line-height: 1.4;
}

.quiz-card-deck {
  display: inline-block;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 500;
  align-self: flex-start;
}

.quiz-card-no-results {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* Export modal deck selection */
.export-deck-selection {
  margin-top: 12px;
  margin-bottom: 16px;
}

.export-deck-search-container {
  margin-bottom: 12px;
}

.export-deck-search-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.95em;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  transition: border-color 0.2s;
}

.export-deck-search-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.export-deck-search-input::placeholder {
  color: var(--text-muted);
}

.export-deck-no-results {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.hidden {
  display: none !important;
}

/* ========== TUTORIAL MODAL ========== */

.flashly-tutorial-modal {
  min-width: 500px;
  max-width: 600px;
}

.flashly-tutorial-step-content {
  padding: 20px;
  line-height: 1.6;
  font-size: 14px;
}

.flashly-tutorial-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.flashly-tutorial-icon {
  width: 24px;
  height: 24px;
  color: var(--interactive-accent);
  flex-shrink: 0;
}

.flashly-tutorial-icon svg {
  width: 100%;
  height: 100%;
}

.flashly-tutorial-title-row h3 {
  margin: 0;
  color: var(--text-normal);
  font-size: 1.3em;
}

.flashly-tutorial-step-content p {
  margin: 12px 0;
}

.flashly-tutorial-step-content ul,
.flashly-tutorial-step-content ol {
  margin: 12px 0;
  padding-left: 24px;
}

.flashly-tutorial-step-content li {
  margin: 6px 0;
}

.flashly-tutorial-step-content code {
  background: var(--code-background);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-monospace);
  font-size: 0.9em;
}

.flashly-tutorial-step-content kbd {
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: var(--font-monospace);
  font-size: 0.85em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.flashly-tutorial-step-content strong {
  font-weight: 600;
  color: var(--text-normal);
}

.flashly-tutorial-progress {
  text-align: center;
  margin-bottom: 15px;
  font-size: 12px;
  color: var(--text-muted);
}

.flashly-tutorial-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 10px;
}

.flashly-tutorial-buttons button {
  flex: 1;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 500;
  transition: all 0.2s;
}

.flashly-tutorial-buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.flashly-tutorial-skip {
  background: var(--background-secondary);
  color: var(--text-muted);
  border: 1px solid var(--background-modifier-border);
}

.flashly-tutorial-skip:hover:not(:disabled) {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.flashly-tutorial-image {
  text-align: center;
  margin: 15px 0;
}

.flashly-tutorial-image img {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
}

/* Mobile responsive for tutorial */
@media (max-width: 768px) {
  .flashly-tutorial-modal {
    min-width: unset;
    max-width: 95vw;
  }

  .flashly-tutorial-step-content {
    padding: 16px;
    font-size: 13px;
  }

  .flashly-tutorial-buttons {
    flex-direction: column;
  }

  .flashly-tutorial-buttons button {
    width: 100%;
  }
}

/* ========== LEARN MODE STYLES ========== */

/* Learn Mode Toggle */
.quiz-learn-mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.quiz-learn-mode-label {
  font-weight: 500;
  font-size: 14px;
}

.quiz-learn-mode-checkbox {
  width: 40px;
  height: 20px;
}

/* Learn Mode Feedback Cards */
.quiz-learn-feedback {
  margin: 20px 0;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quiz-learn-feedback-correct {
  background-color: var(--background-modifier-success);
  border-color: var(--text-success);
}

.quiz-learn-feedback-incorrect {
  background-color: var(--background-modifier-error);
  border-color: var(--text-error);
}

.quiz-learn-feedback-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

.quiz-learn-your-answer {
  margin: 8px 0;
  padding: 8px;
  background: var(--background-secondary);
  border-radius: 4px;
}

.quiz-learn-correct-answer {
  margin: 8px 0;
  padding: 8px;
  background: var(--background-primary-alt);
  border-radius: 4px;
  color: var(--text-success);
  font-weight: 500;
}

.quiz-learn-explanation {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--background-modifier-border);
}

.quiz-learn-explanation strong {
  display: block;
  margin-bottom: 6px;
}

.quiz-learn-explanation p {
  margin: 0;
  line-height: 1.6;
}

.quiz-learn-requeue-notice {
  margin-top: 12px;
  font-style: italic;
  opacity: 0.8;
  font-size: 13px;
}

/* Learn Mode Progress */
.quiz-progress-learn-mode {
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}

/* Learn Mode Badge */
.quiz-card-learn-mode-badge {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.quiz-learn-stats {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.quiz-learn-stats div {
  margin-bottom: 4px;
}

/* Review Modal */
.review-question-card {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
}

.review-question-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 600;
}

.review-correct {
  color: var(--text-success);
}

.review-incorrect {
  color: var(--text-error);
}

.review-question-prompt {
  margin-bottom: 6px;
}

.review-attempts {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ========== INFO BOX ========== */
.flashly-info-box {
  background-color: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.flashly-info-box p {
  margin: 0;
  color: var(--text-normal);
  font-size: 14px;
  line-height: 1.5;
}