/* Scoped under #libraryModalNew – uses app theme variables */

/* Theme: inherit app presets + accent offset shades + region vars (dark default) */
#libraryModalNew {
  --libnew-bg: var(--bg-primary);
  --libnew-surface: var(--bg-secondary);
  --libnew-surface-elevated: var(--surface-elevated);
  --libnew-border: var(--border-default);
  --libnew-border-subtle: var(--border-subtle);
  --libnew-text: var(--text-primary);
  --libnew-text-secondary: var(--text-secondary);
  --libnew-text-muted: var(--text-tertiary);
  --libnew-accent: var(--accent-purple);
  --libnew-accent-glow: var(--accent-purple-glow);
  /* Accent offset shades */
  --libnew-accent-tint-5: color-mix(in srgb, var(--accent-purple) 5%, transparent);
  --libnew-accent-tint-10: color-mix(in srgb, var(--accent-purple) 10%, transparent);
  --libnew-accent-tint-15: color-mix(in srgb, var(--accent-purple) 15%, transparent);
  --libnew-accent-border-20: color-mix(in srgb, var(--accent-purple) 20%, transparent);
  --libnew-accent-border-35: color-mix(in srgb, var(--accent-purple) 35%, transparent);
  --libnew-accent-border-50: color-mix(in srgb, var(--accent-purple) 50%, transparent);
  /* Region-specific */
  --libnew-header-bg: color-mix(in srgb, var(--accent-purple) 14%, var(--bg-secondary));
  --libnew-header-border: var(--border-default);
  --libnew-content-bg: var(--bg-primary);
  --libnew-input-bg: var(--surface-elevated);
  --libnew-input-border: var(--border-default);
  --libnew-strip-bg: var(--libnew-accent-tint-5);
  --libnew-strip-border: var(--libnew-accent-border-20);
  /* Cards/rows: use semantic theme variables for real color depth */
  --libnew-card-bg: var(--bg-secondary);
  --libnew-card-border: var(--border-default);
  --libnew-card-hover-bg: var(--surface-elevated);
  --libnew-card-hover-border: var(--libnew-accent-border-35);
  --libnew-elevated-bg: var(--surface-elevated);
  --libnew-search-bg: var(--surface-hover);
  /* New Folder empty card: darker gray (dark mode) */
  --libnew-newfolder-bg: color-mix(in srgb, var(--bg-secondary) 85%, black);
  --libnew-newfolder-border: var(--libnew-border-subtle);
  --libnew-newfolder-hover-border: var(--libnew-accent-border-35);
  --libnew-quizzer-bg: var(--bg-secondary);
  --libnew-quizzer-border: var(--border-default);
  --libnew-dropdown-bg: var(--surface-elevated);
  /* Color offset variants for more variety (see .cursor/rules/color-offset.mdc) */
  --libnew-elevated: color-mix(in srgb, var(--libnew-bg) calc(100% + var(--offset-light)), white);
  --libnew-divider: color-mix(in srgb, var(--libnew-bg) calc(100% + var(--offset-dark)), black);
  --libnew-accent-muted: color-mix(in srgb, var(--libnew-accent) var(--offset-muted), var(--libnew-bg));
  --libnew-accent-tint-overlay: rgba(var(--accent-purple-rgb), 0.08);
  font-family: var(--font-family, 'Lexend', sans-serif);
}

/* Light mode: same vars, light presets */
body.light-mode #libraryModalNew,
[data-theme="light"] #libraryModalNew {
  --libnew-bg: var(--bg-primary-light);
  --libnew-surface: var(--bg-secondary-light);
  --libnew-surface-elevated: var(--surface-elevated-light);
  --libnew-border: var(--border-default-light);
  --libnew-border-subtle: var(--border-subtle-light);
  --libnew-text: var(--text-primary-light);
  --libnew-text-secondary: var(--text-secondary-light);
  --libnew-text-muted: var(--text-tertiary-light);
  --libnew-accent: var(--accent-purple-light-mode);
  --libnew-accent-glow: var(--accent-purple-glow-light);
  --libnew-accent-tint-5: color-mix(in srgb, var(--accent-purple-light-mode) 5%, transparent);
  --libnew-accent-tint-10: color-mix(in srgb, var(--accent-purple-light-mode) 10%, transparent);
  --libnew-accent-tint-15: color-mix(in srgb, var(--accent-purple-light-mode) 15%, transparent);
  --libnew-accent-border-20: color-mix(in srgb, var(--accent-purple-light-mode) 20%, transparent);
  --libnew-accent-border-35: color-mix(in srgb, var(--accent-purple-light-mode) 35%, transparent);
  --libnew-accent-border-50: color-mix(in srgb, var(--accent-purple-light-mode) 50%, transparent);
  --libnew-header-bg: color-mix(in srgb, var(--accent-purple-light-mode) 10%, var(--bg-secondary-light));
  --libnew-header-border: var(--border-default-light);
  --libnew-content-bg: var(--bg-primary-light);
  --libnew-input-bg: var(--surface-elevated-light);
  --libnew-input-border: var(--border-default-light);
  --libnew-strip-bg: var(--libnew-accent-tint-5);
  --libnew-strip-border: var(--libnew-accent-border-20);
  --libnew-card-bg: var(--bg-secondary-light);
  --libnew-card-border: var(--border-default-light);
  --libnew-card-hover-bg: var(--surface-hover-light);
  --libnew-card-hover-border: var(--libnew-accent-border-35);
  --libnew-elevated-bg: var(--surface-elevated-light);
  --libnew-search-bg: var(--surface-elevated-light);
  /* New Folder empty card: light gray (light mode) */
  --libnew-newfolder-bg: color-mix(in srgb, var(--bg-secondary-light) 70%, var(--border-subtle-light));
  --libnew-newfolder-border: var(--libnew-border-subtle);
  --libnew-newfolder-hover-border: var(--libnew-accent-border-35);
  --libnew-quizzer-bg: var(--bg-secondary-light);
  --libnew-quizzer-border: var(--border-default-light);
  --libnew-dropdown-bg: var(--surface-elevated-light);
  --libnew-elevated: color-mix(in srgb, var(--libnew-bg) calc(100% + var(--offset-light)), white);
  --libnew-divider: color-mix(in srgb, var(--libnew-bg) calc(100% + var(--offset-dark)), black);
  --libnew-accent-muted: color-mix(in srgb, var(--libnew-accent) var(--offset-muted), var(--libnew-bg));
  --libnew-accent-tint-overlay: rgba(var(--accent-purple-rgb), 0.08);
}

/* Overlay: same behaviour as #libraryModal – hidden by default, .show to open */
#libraryModalNew {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 20px;
  background: transparent;
  backdrop-filter: blur(0);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.33, 1, 0.68, 1),
              backdrop-filter 0.3s cubic-bezier(0.33, 1, 0.68, 1),
              background 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}
#libraryModalNew.show {
  opacity: 1;
  background: color-mix(in srgb, var(--libnew-bg) 35%, transparent);
  backdrop-filter: blur(12px) saturate(180%);
  pointer-events: auto;
}

/* Custom scrollbar (from library_new.html style block) */
#libraryModalNew .custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
#libraryModalNew .custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
#libraryModalNew .custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--libnew-border);
  border-radius: 10px;
}
#libraryModalNew .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--libnew-border) 80%, var(--libnew-accent));
}

/* Button classes from library_new (replacing @apply with plain CSS) */
#libraryModalNew .primary {
  background: var(--libnew-accent);
  color: white;
  transition: opacity 0.2s;
}
#libraryModalNew .primary:hover {
  opacity: 0.9;
}
#libraryModalNew .createMindmap {
  background: var(--createMindmap, #10b981);
  color: white;
  transition: background 0.2s;
}
#libraryModalNew .createMindmap:hover {
  background: color-mix(in srgb, var(--createMindmap, #10b981) 85%, black);
}
#libraryModalNew .danger {
  background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
  color: var(--danger, #f87171);
  border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 25%, transparent);
  transition: background 0.2s;
}
#libraryModalNew .danger:hover {
  background: color-mix(in srgb, var(--danger, #ef4444) 22%, transparent);
}
#libraryModalNew .folder-expanded {
  border: 2px solid var(--libnew-accent) !important;
  background: var(--libnew-accent-tint-10);
  box-shadow: 0 0 0 1px var(--libnew-accent-border-20);
}

/* Overlay: dim only so app remains visible behind modal (not full black screen) */
#libraryModalNew .fixed.inset-0 {
  background: color-mix(in srgb, var(--libnew-bg) 28%, transparent) !important;
}
#libraryModalNew #libraryModalNewInner {
  position: relative;
  background: var(--libnew-surface);
  border: 1px solid var(--libnew-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
#libraryModalNew header.libnew-header,
#libraryModalNew header {
  background: var(--libnew-header-bg);
  border-bottom: 1px solid var(--libnew-header-border);
  padding: 1.5rem 1.5rem 1rem;
}
#libraryModalNew .libnew-title { color: var(--libnew-text); font-size: 1.5rem; }
#libraryModalNew .libnew-header-icon { color: var(--libnew-accent); font-size: 1.875rem; }
#libraryModalNew .libnew-close-btn {
  padding: 0.375rem;
  background: transparent;
  border: none;
  color: var(--libnew-text);
  cursor: pointer;
}
#libraryModalNew .libnew-close-btn:hover { background: var(--surface-hover, var(--libnew-card-hover-bg)); }
#libraryModalNew .libnew-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--libnew-text-muted);
  font-size: 1rem;
  pointer-events: none;
}
#libraryModalNew .libnew-search-input { padding: 0.5rem 1rem 0.5rem 2.5rem; font-size: 0.875rem; }
#libraryModalNew .libnew-pdf-strip,
#libraryModalNew #libraryNewPdfCountStrip {
  padding: 0.5rem 1.5rem;
  background: var(--libnew-strip-bg);
  border-bottom: 1px solid var(--libnew-strip-border);
}
#libraryModalNew .libnew-strip-icon { font-size: 0.75rem; color: var(--libnew-accent); }
#libraryModalNew .libnew-strip-text { font-size: 11px; font-weight: 600; color: var(--libnew-text); }
#libraryModalNew .libnew-strip-text #libraryNewPdfCountText { color: var(--libnew-accent); }
#libraryModalNew .libnew-limit-link { font-size: 10px; font-weight: 700; color: var(--libnew-accent); text-transform: uppercase; letter-spacing: 0.05em; }
#libraryModalNew .libnew-limit-link:hover { text-decoration: underline; }
#libraryModalNew #libraryNewPdfCountStrip.libnew-strip-full {
  background: color-mix(in srgb, var(--libnew-accent) 12%, var(--libnew-strip-bg));
  border-bottom-color: color-mix(in srgb, var(--libnew-accent) 40%, var(--libnew-strip-border));
}
#libraryModalNew #libraryNewPdfCountStrip.libnew-strip-full .libnew-strip-text #libraryNewPdfCountText { font-weight: 700; }
#libraryModalNew #libraryNewPdfCountStrip.libnew-strip-full .libnew-limit-link { color: var(--libnew-accent); font-weight: 800; }
#libraryModalNew .libnew-main-content { padding: 1.5rem; }
#libraryModalNew .libnew-new-folder-icon { color: var(--libnew-text-muted); font-size: 1.5rem; }
#libraryModalNew .libnew-new-folder-btn:hover .libnew-new-folder-icon { color: var(--libnew-accent); }
#libraryModalNew .libnew-new-folder-label { font-size: 0.75rem; font-weight: 500; color: var(--libnew-text-muted); }
#libraryModalNew .libnew-new-folder-btn:hover .libnew-new-folder-label { color: var(--libnew-text); }
#libraryModalNew #libraryFoldersNewSection .libnew-expanded-files-wrap { margin-top: 1rem; margin-left: 1.5rem; padding-left: 1.5rem; border-left: 2px solid var(--libnew-accent-border-20); }
#libraryModalNew .libnew-expand-icon { color: var(--libnew-accent); }
#libraryModalNew .libnew-active-badge { padding: 0.125rem 0.5rem; background: var(--libnew-accent-tint-10); color: var(--libnew-accent); border-radius: 0.25rem; }
#libraryModalNew .libnew-expand-summary-box { padding: 0.75rem; background: var(--libnew-surface-elevated); border: 1px solid var(--libnew-border); border-radius: 0.5rem; color: var(--libnew-text-muted); }
#libraryModalNew .libnew-expand-cards-box { padding: 0.75rem; background: var(--libnew-surface-elevated); border: 1px solid var(--libnew-border); border-radius: 0.5rem; }
#libraryModalNew .libraryFileActions { border-top: 1px solid var(--libnew-accent-border-20); }
#libraryModalNew .libnew-empty-message { color: var(--libnew-text-muted); }
#libraryModalNew .libnew-file-name { color: var(--libnew-text); }
#libraryModalNew .libnew-file-name-block { gap: 0.125rem; }
#libraryModalNew .libnew-file-folder-subtitle { color: var(--libnew-text-muted); font-weight: 500; }
#libraryModalNew .libnew-quizzer-card-count { font-size: 10px; color: var(--libnew-text-muted); white-space: nowrap; flex-shrink: 0; }
#libraryModalNew .libnew-quizzer-aside { padding: 1.5rem; background: var(--libnew-quizzer-bg); }
#libraryModalNew .libnew-quizzer-desc { color: var(--libnew-text-muted); }
#libraryModalNew .libnew-quizzer-label { color: var(--libnew-text); }
#libraryModalNew .libnew-quizzer-option { padding: 0.75rem; background: var(--libnew-surface-elevated); border: 1px solid var(--libnew-border); }
#libraryModalNew .libnew-quizzer-option:hover { border-color: var(--libnew-accent-border-35); }
#libraryModalNew .libnew-quizzer-radio { accent-color: var(--libnew-accent); }
#libraryModalNew .libnew-quizzer-input { background: var(--libnew-card-bg); border: 1px solid var(--libnew-border); padding: 0.25rem 0.5rem; color: var(--libnew-text); }
#libraryModalNew .libnew-quizzer-start { background: var(--libnew-accent); color: #fff; padding: 1rem; }
#libraryModalNew .libnew-quizzer-start:hover { background: color-mix(in srgb, var(--libnew-accent) 90%, black); }
#libraryModalNew .libnew-quizzer-field-label { color: var(--libnew-text-muted); }
#libraryModalNew .libnew-quizzer-difficulty { padding: 0.25rem; background: var(--libnew-surface-elevated); border: 1px solid var(--libnew-border); }
#libraryModalNew .libnew-quizzer-range { background: var(--libnew-border); }
#libraryModalNew .libnew-quizzer-select { padding: 0.625rem 0.75rem 0.625rem 2.5rem; background: var(--libnew-surface-elevated); border: 1px solid var(--libnew-border); color: var(--libnew-text); }
#libraryModalNew .libnew-quizzer-coming-soon-wrap { border-top: 1px solid var(--libnew-border); }
#libraryModalNew .libnew-quizzer-coming-soon-overlay { background: color-mix(in srgb, var(--libnew-bg) 80%, transparent); backdrop-filter: blur(8px); color: var(--libnew-text-muted); }
/* Primary CTA (Quiz): bold accent, white text, prominent padding */
#libraryModalNew .libnew-btn-primary,
#libraryModalNew #libraryModalNewOpenQuizzer {
  background: var(--libnew-accent) !important;
  color: #fff !important;
  border: 1px solid var(--libnew-accent-border-50) !important;
  padding: 10px 20px !important;
}
#libraryModalNew .libnew-btn-primary:hover,
#libraryModalNew #libraryModalNewOpenQuizzer:hover {
  background: color-mix(in srgb, var(--libnew-accent) 88%, black) !important;
  color: #fff !important;
}
/* Ghost/outline button (Import): transparent, 1px border */
#libraryModalNew .libnew-btn-ghost,
#libraryModalNew #libraryModalNewImportBtn {
  background: transparent !important;
  color: var(--libnew-text) !important;
  border: 1px solid var(--libnew-border) !important;
  padding: 8px 16px !important;
}
#libraryModalNew .libnew-btn-ghost:hover,
#libraryModalNew #libraryModalNewImportBtn:hover {
  background: var(--libnew-card-hover-bg) !important;
  border-color: var(--libnew-accent-border-35) !important;
}
/* New Folder card: darker gray (dark) / light gray (light), theme compatible */
#libraryModalNew .libnew-new-folder-btn {
  background: var(--libnew-newfolder-bg) !important;
  border-color: var(--libnew-newfolder-border) !important;
}
#libraryModalNew .libnew-new-folder-btn:hover {
  background: var(--libnew-card-hover-bg) !important;
  border-color: var(--libnew-newfolder-hover-border) !important;
}
/* Folder header "+" add button: accent, theme compatible */
#libraryModalNew .libnew-folder-add-btn {
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  background: var(--libnew-accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--libnew-accent-glow) !important;
}
#libraryModalNew .libnew-folder-add-btn:hover {
  background: color-mix(in srgb, var(--libnew-accent) 88%, black) !important;
  color: #fff !important;
  transform: scale(1.05);
}
/* Search match highlight */
#libraryModalNew .libnew-folder-file-list .libnew-lecture-row mark,
#libraryModalNew .libnew-lectures-list mark {
  background: var(--libnew-accent-tint-15);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
#libraryModalNew .border-border-muted {
  border-color: var(--libnew-border);
}
/* Search: elevated bg (between base and cards), visible placeholder */
#libraryModalNew input[id="libraryGlobalSearch"] {
  background: var(--libnew-search-bg) !important;
  border: 1px solid var(--libnew-border-subtle) !important;
  color: var(--libnew-text);
}
#libraryModalNew input[id="libraryGlobalSearch"]::placeholder {
  color: var(--libnew-text-muted);
}
#libraryModalNew input[id="libraryGlobalSearch"]:focus {
  border-color: var(--libnew-accent);
  box-shadow: 0 0 0 3px var(--libnew-accent-glow);
  outline: none;
}
/* Section headings: distinct hierarchy, clear spacing */
#libraryModalNew .libnew-section {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--libnew-border-subtle);
}
#libraryModalNew .libnew-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
#libraryModalNew .libnew-section-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--libnew-text-muted);
  margin: 0 0 14px 0;
}
/* Quizzer hint: prominent, centered */
#libraryModalNew .libnew-quizzer-hint {
  background: var(--libnew-accent-tint-10);
  border-bottom: 1px solid var(--libnew-accent-border-20);
  padding: 0.75rem 1.5rem;
  color: var(--libnew-text);
}
#libraryModalNew .libnew-quizzer-hint span {
  color: var(--libnew-accent);
}
#libraryModalNew #libraryPdfCountStrip {
  background: var(--libnew-strip-bg);
  border-bottom: 1px solid var(--libnew-strip-border);
}
#libraryModalNew .flex-1.overflow-y-auto {
  background: var(--libnew-content-bg);
}

/* Utility overrides – map to region/role vars (see plan table) */
#libraryModalNew .bg-surface { background-color: var(--libnew-surface-elevated); }
#libraryModalNew .bg-background-dark\/40,
#libraryModalNew .bg-background-dark\/50 { background-color: var(--libnew-card-bg); }
#libraryModalNew .bg-background-dark\/60 { background-color: var(--libnew-quizzer-bg); }
#libraryModalNew .bg-primary { background-color: var(--libnew-accent); }
#libraryModalNew .bg-primary\/5 { background-color: var(--libnew-accent-tint-5); }
#libraryModalNew .bg-primary\/10 { background-color: var(--libnew-accent-tint-10); }
#libraryModalNew .bg-border-muted { background-color: var(--libnew-border); }
#libraryModalNew .border-border-muted { border-color: var(--libnew-card-border) !important; }
#libraryModalNew .text-primary { color: var(--libnew-accent); }
#libraryModalNew .text-slate-300 { color: var(--text-secondary); }
#libraryModalNew .text-slate-400 { color: var(--libnew-text-muted); }
#libraryModalNew .text-slate-500 { color: var(--text-tertiary); }
#libraryModalNew .text-slate-600 { color: var(--text-tertiary); }
#libraryModalNew h1, #libraryModalNew h2, #libraryModalNew h3, #libraryModalNew h4,
#libraryModalNew p, #libraryModalNew span:not(.material-symbols-outlined) { color: inherit; }

/* Close button: match library_new.html – icon visible, same hover */
#libraryModalNew #libraryModalNewClose {
  color: var(--libnew-text);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 6px;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
}
#libraryModalNew #libraryModalNewClose:hover {
  background: var(--surface-hover);
  color: var(--libnew-text);
}
#libraryModalNew #libraryModalNewClose .material-symbols-outlined {
  font-size: 24px;
}

/* Quizzer sidebar: in flow – pushes library left when open; fully hidden when closed */
#libraryModalNew #libraryModalNewQuizzerSettings {
  flex-shrink: 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
  border-left: none;
  background: transparent;
  transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
}
#libraryModalNew #libraryModalNewInner.libnew-quizzer-open #libraryModalNewQuizzerSettings {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  padding: 1.5rem;
  overflow-y: auto;
  background: var(--libnew-quizzer-bg);
  border-left: 1px solid var(--libnew-quizzer-border);
}

/* File list container: consistent gap between rows */
#libraryModalNew .libnew-lectures-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Lecture row: card bg/border, padding, hover, expanded */
#libraryModalNew .libnew-lecture-row {
  background: var(--libnew-card-bg);
  border: 1px solid var(--libnew-card-border);
  padding: 14px 16px !important;
  gap: 16px;
  border-bottom: 1px solid var(--libnew-border-subtle);
}
#libraryModalNew .libnew-lectures-list > .libnew-lecture-row-wrapper:last-child .libnew-lecture-row {
  border-bottom: none;
}
#libraryModalNew .libnew-lecture-row:hover {
  background: var(--libnew-card-hover-bg);
  border-color: var(--libnew-card-hover-border);
}
/* Quizzer mode: selected lecture row */
#libraryModalNew .libnew-lecture-row.libnew-quizzer-row-selected {
  background: var(--libnew-accent-tint-10);
  border-color: var(--libnew-accent-border-50);
}
#libraryModalNew .libraryFileContent {
  display: block;
  background: var(--libnew-accent-tint-10);
  color: var(--libnew-text);
  min-height: 120px;
}
#libraryModalNew .libnew-lecture-row.libnew-collapsed .libraryFileContent { display: none; }
/* Expanded: row stays one horizontal line; only .libnew-expand-wrap extends below */
#libraryModalNew .libnew-lecture-row-wrapper {
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  min-width: 0;
}
#libraryModalNew .libnew-lecture-row.libnew-expanded {
  flex-direction: row;
  flex-wrap: nowrap;
  background: var(--libnew-accent-tint-10);
  border-color: var(--libnew-accent-border-35);
  width: 100%;
  min-width: 0;
}
/* Injected expanded block – extension below only */
#libraryModalNew .libnew-expand-wrap {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 1rem;
  background: var(--libnew-accent-tint-10);
  border-top: 1px solid var(--libnew-accent-border-20);
  box-sizing: border-box;
}
#libraryModalNew .libnew-expand-wrap-inner {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#libraryModalNew .libnew-expand-summary {
  display: block;
  padding: 0.6rem 0.75rem;
  background: var(--libnew-surface-elevated);
  border: 1px solid var(--libnew-border);
  border-radius: 0.5rem;
  color: var(--libnew-text-muted);
  font-size: 12px;
  line-height: 1.45;
  max-height: 100px;
  overflow-y: auto;
}
#libraryModalNew .libnew-expand-summary h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--libnew-text-muted);
  margin: 0 0 0.25rem 0;
}
#libraryModalNew .libnew-expand-summary p { margin: 0; }
#libraryModalNew .libnew-expand-cards {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  background: var(--libnew-surface-elevated);
  border: 1px solid var(--libnew-border);
  border-radius: 0.5rem;
  gap: 0.35rem;
  width: fit-content;
}
#libraryModalNew .libnew-expand-cards .num { font-size: 1.1rem; font-weight: 700; color: var(--libnew-accent); }
#libraryModalNew .libnew-expand-cards .label { font-size: 9px; text-transform: uppercase; color: var(--libnew-text-muted); }
#libraryModalNew .libnew-expand-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--libnew-accent-border-20);
  flex-wrap: wrap;
}
#libraryModalNew .libnew-expand-actions button {
  padding: 0.45rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  flex: 0 1 auto;
  min-width: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
#libraryModalNew .libnew-expand-actions .btn-open { background: var(--libnew-accent); color: var(--text-on-accent, #fff); }
#libraryModalNew .libnew-expand-actions .btn-mindmap { background: var(--createMindmap, #10b981); color: #fff; }
#libraryModalNew .libnew-expand-actions .libnew-expand-btn-mindmap { opacity: 0.4; cursor: not-allowed; }
#libraryModalNew .libnew-expand-actions .btn-delete { background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent); color: var(--danger, #f87171); border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 35%, transparent); }

/* Quizzer panel: “More options coming soon” – blurred content behind overlay */
#libraryModalNew #libnewQuizzerComingSoonWrap {
  min-height: 220px;
}
#libraryModalNew .libnew-quizzer-coming-soon-content {
  filter: blur(5px);
  opacity: 0.85;
}
#libraryModalNew .libnew-quizzer-coming-soon-overlay {
  pointer-events: auto;
}

/* Priority 3: dropdowns – one open at a time, Stitch-style */
#libraryModalNew .libnew-dropdown {
  position: absolute;
  z-index: 100;
  min-width: 160px;
  padding: 6px 0;
  background: var(--libnew-dropdown-bg);
  border: 1px solid var(--libnew-border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
#libraryModalNew .libnew-dropdown.libnew-dropdown-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#libraryModalNew .libnew-dropdown button,
#libraryModalNew .libnew-dropdown .libnew-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--libnew-text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
#libraryModalNew .libnew-dropdown button:hover,
#libraryModalNew .libnew-dropdown .libnew-dropdown-item:hover {
  background: var(--surface-hover);
}
#libraryModalNew .libnew-dropdown .libnew-dropdown-item.danger { color: var(--danger, #f87171); }
#libraryModalNew .libnew-dropdown .libnew-dropdown-divider { height: 1px; background: var(--libnew-border); margin: 4px 0; }
#libraryModalNew .libnew-shake {
  animation: libnew-shake 0.4s ease;
}
@keyframes libnew-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
#libraryModalNew .libnew-expanded-files-wrap {
  margin-top: 1rem;
  margin-left: 1.5rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--libnew-accent-border-20);
}
#libraryModalNew .libnew-expanded-files-wrap.hidden { display: none !important; }
/* Row action buttons: same background as row, part of the card visually */
#libraryModalNew .libnew-fav-btn,
#libraryModalNew .libnew-lecture-row .more-vert,
#libraryModalNew .libnew-lecture-row .expand-btn {
  background: var(--libnew-card-hover-bg);
  border: none;
  color: var(--libnew-text-muted);
  cursor: pointer;
  padding: 10px 12px;
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}
#libraryModalNew .libnew-fav-btn:hover,
#libraryModalNew .libnew-lecture-row .more-vert:hover,
#libraryModalNew .libnew-lecture-row .expand-btn:hover {
  background: var(--libnew-card-bg);
  color: var(--libnew-text);
}
#libraryModalNew .libnew-fav-btn.libnew-fav-filled {
  color: var(--libnew-accent);
}

/* Expanded row: wrap below row, skeleton, error */
#libraryModalNew .libnew-lecture-row-wrapper { display: flex; flex-direction: column; gap: 0; }
#libraryModalNew .libnew-expand-wrap.hidden { display: none !important; }
#libraryModalNew .libnew-expand-skeleton { padding: 0.5rem 0; }
#libraryModalNew .libnew-skeleton-line { height: 12px; background: var(--surface-hover); border-radius: 4px; margin-bottom: 8px; max-width: 100%; }
#libraryModalNew .libnew-skeleton-line.short { max-width: 60%; }
#libraryModalNew .libnew-expand-error { padding: 0.5rem 0; color: var(--libnew-text-muted); }
#libraryModalNew .libnew-expand-retry { color: var(--libnew-accent); background: none; border: none; cursor: pointer; padding: 0.5rem 0.75rem; min-height: 44px; box-sizing: border-box; }
#libraryModalNew .libnew-expand-retry:hover { text-decoration: underline; }
#libraryModalNew .libnew-expanded-files-inner { margin-top: 0.5rem; margin-left: 1rem; padding-left: 1rem; border-left: 2px solid var(--libnew-accent-border-20); }
#libraryModalNew .libnew-dropdown-confirm-text { padding: 0.5rem 0.75rem; color: var(--libnew-text-muted); }
#libraryModalNew .libnew-dropdown .flex.gap-2 { padding: 0 0.75rem 0.75rem; }
#libraryModalNew .libnew-new-folder-input { padding: 0.375rem 0.5rem; background: var(--libnew-surface-elevated); border: 1px solid var(--libnew-border); color: var(--libnew-text); }
#libraryModalNew .libnew-new-folder-input:focus { outline: none; box-shadow: 0 0 0 2px var(--libnew-accent-glow); }
#libraryModalNew .libnew-new-folder-confirm { padding: 0.5rem 0.75rem; min-height: 44px; box-sizing: border-box; background: var(--libnew-accent); color: #fff; border: none; cursor: pointer; }
#libraryModalNew .libnew-new-folder-cancel { padding: 0.5rem 0.75rem; min-height: 44px; box-sizing: border-box; background: var(--libnew-border); color: var(--libnew-text); border: none; cursor: pointer; }
#libraryModalNew .libnew-new-folder-cancel:hover { background: var(--libnew-card-hover-bg); }
#libraryModalNew .libnew-folder-filter-input { padding: 0.5rem 0.75rem; background: var(--libnew-surface-elevated); border: 1px solid var(--libnew-border); color: var(--libnew-text); }
#libraryModalNew .libnew-folder-filter-input::placeholder { color: var(--libnew-text-muted); }
#libraryModalNew .libnew-folder-filter-input:focus { outline: none; box-shadow: 0 0 0 2px var(--libnew-accent-glow); }
#libraryModalNew .libnew-folder-add-empty { padding: 1rem 0; color: var(--libnew-text-muted); }
#libraryModalNew .libnew-expand-wrap-inner .libnew-expand-summary { margin-bottom: 0; }
#libraryModalNew .libnew-expand-wrap-inner .libnew-expand-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Search highlight */
#libraryModalNew mark { background: var(--libnew-accent); color: var(--libnew-bg); padding: 0 2px; border-radius: 0; }

/* Folder cards: default card bg/border, hover, expanded – visible borders */
#libraryModalNew .libnew-folder-card,
#libraryModalNew [data-folder-name] {
  background: var(--libnew-card-bg) !important;
  border: 1px solid var(--libnew-card-border) !important;
  cursor: pointer;
  padding: 14px 16px;
  box-sizing: border-box;
}
#libraryModalNew .libnew-folder-card:hover,
#libraryModalNew [data-folder-name]:hover {
  background: var(--libnew-card-hover-bg) !important;
  border-color: var(--libnew-card-hover-border);
}
/* Folder card metadata: secondary when unselected, accent when expanded */
#libraryModalNew .libnew-folder-card .libnew-folder-meta,
#libraryModalNew [data-folder-name] .libnew-folder-meta {
  color: var(--libnew-text-muted);
}
#libraryModalNew .libnew-folder-card.folder-expanded .libnew-folder-meta,
#libraryModalNew [data-folder-name].folder-expanded .libnew-folder-meta {
  color: var(--libnew-accent);
}
/* Lecture row time / status labels – secondary for consistency */
#libraryModalNew .libnew-time-label {
  color: var(--libnew-text-muted);
}
/* Checkbox when checked (quizzer selection) */
#libraryModalNew input[type="checkbox"]:checked {
  accent-color: var(--libnew-accent);
  background-color: var(--libnew-accent);
}
#libraryModalNew [data-folder-name].folder-expanded {
  border: 2px solid var(--libnew-accent) !important;
  background: var(--libnew-accent-tint-10);
  box-shadow: 0 0 0 1px var(--libnew-accent-border-20);
}
/* New folder (dashed) – distinct from regular cards */
#libraryModalNew .libnew-new-folder-btn,
#libraryModalNew #libraryNewFolderCardsWrap button[class*="border-dashed"] {
  border: 2px dashed var(--libnew-newfolder-border) !important;
  background: var(--libnew-newfolder-bg) !important;
}
#libraryModalNew .libnew-new-folder-btn:hover,
#libraryModalNew #libraryNewFolderCardsWrap button[class*="border-dashed"]:hover {
  background: var(--libnew-accent-tint-5) !important;
  border-color: var(--libnew-accent-border-35) !important;
}

/* Folder cards container: consistent gap, uniform card size */
#libraryModalNew #libraryNewFolderCardsWrap {
  gap: 18px;
}
#libraryModalNew .libnew-folder-card {
  min-width: 180px;
  min-height: 110px;
}
/* Folder card drag (tab-style reorder) */
#libraryModalNew .libnew-folder-card { transition: transform 0.2s ease-out; }
#libraryModalNew .libnew-folder-card.libnew-folder-card-dragging { z-index: 10; opacity: 0.9; cursor: grabbing; }

/* Folder file list row drag (tab-style vertical reorder) */
#libraryModalNew .libnew-folder-file-list .libnew-lecture-row-wrapper { transition: transform 0.2s ease-out; }
#libraryModalNew .libnew-lecture-row-wrapper.libnew-file-dragging { z-index: 10; opacity: 0.9; cursor: grabbing; }

/* Drop target when dragging file from All Files onto folder card */
#libraryModalNew .libnew-folder-card.libnew-folder-drop-target,
#libraryModalNew [data-folder-name].libnew-folder-drop-target {
  box-shadow: 0 0 0 2px var(--libnew-accent);
  background: var(--libnew-accent-tint-15);
}

/* Use elevated surface for dropdown so it pops from background */
#libraryModalNew .libnew-dropdown-panel,
#libraryModalNew [class*="dropdown"] [role="menu"] {
  background: var(--libnew-elevated);
}

/* Secondary / muted accent button style (e.g. Cancel, secondary actions) */
#libraryModalNew .libnew-btn-secondary {
  background: var(--libnew-accent-muted);
  color: var(--libnew-text);
  border: 1px solid var(--libnew-border);
}
#libraryModalNew .libnew-btn-secondary:hover {
  background: color-mix(in srgb, var(--libnew-accent) 45%, var(--libnew-bg));
  border-color: var(--libnew-accent-border-35);
}

/* Divider using offset-dark for subtle separation */
#libraryModalNew .libnew-divider {
  border: none;
  border-top: 1px solid var(--libnew-divider);
  margin: 0.5rem 0;
}

/*
 * COLOR OFFSET EXAMPLES - Reference for component styling
 * These demonstrate how to use color-mix() for varied, theme-aware UIs.
 * See :root in frontend/index.html for --offset-light, --offset-dark, --offset-muted.
 */

/* Example: Elevated card in dark mode */
.card-elevated {
  background: color-mix(in srgb, var(--bg-primary) calc(100% + 8%), white);
  border: 1px solid var(--border-default);
}

/* Example: Hover state */
.interactive:hover {
  background: color-mix(in srgb, var(--bg-primary) calc(100% + 8%), white);
  cursor: pointer;
}

/* Example: Disabled/subtle state */
.disabled, [disabled] {
  background: color-mix(in srgb, var(--bg-primary) calc(100% - 8%), black);
  color: var(--text-tertiary);
  opacity: 0.6;
}

/* Example: Secondary button (muted accent) */
.btn-secondary {
  background: color-mix(in srgb, var(--accent-purple) 60%, var(--bg-primary));
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

/* Example: Primary button (bold accent) */
.btn-primary {
  background: var(--accent-purple);
  color: #fff;
}

/* Example: Accent tint background (requires --accent-purple-rgb on :root) */
.accent-tint {
  background: rgba(var(--accent-purple-rgb), 0.1);
}