:root {
  
  --bg-page: #f5f7fa;
  --bg-tint: rgba(56, 189, 248, 0.05);
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: #fafbfc;
  --text-main: #1a202c;
  --text-soft: #718096;
  --text-muted: #a0aec0;
  --line: rgba(226, 232, 240, 0.8);
  --line-strong: rgba(203, 213, 225, 0.9);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  
  
  --sidebar-width: 240px;
  --sidebar-bg: #ffffff;
  --sidebar-text: #1a202c;
  --sidebar-soft: #718096;
  --sidebar-border: rgba(226, 232, 240, 0.8);
  --sidebar-hover: rgba(0, 0, 0, 0.04);
  
  
  --year-1-bg: #ff6b35;
  --year-1-text: #ffffff;
  --year-2-bg: #2196f3;
  --year-2-text: #ffffff;
  --year-3-bg: #10b981;
  --year-3-text: #ffffff;
  --year-4-bg: #9333ea;
  --year-4-text: #ffffff;
  --year-5-bg: #ec4899;
  --year-5-text: #ffffff;
  --year-6-bg: #06b6d4;
  --year-6-text: #ffffff;
  
  
  --planner-icon-bg: #ff6b35;
  --drives-icon-bg: #2196f3;
  --pratique-icon-bg: #10b981;
  --sources-icon-bg: #f59e0b;
  --residanat-icon-bg: #8b5cf6;
  
  
  --stat-bg: #ffffff;
  --stat-border: rgba(226, 232, 240, 0.8);
  --stat-text: #1a202c;
  --stat-value: #1a202c;
  --stat-label: #718096;
  
  
  --total-bg: #2563eb;
  --total-text: #ffffff;
  
  
  --count-bg-light: rgba(245, 158, 11, 0.1);
  --count-text-light: #f59e0b;
  --count-bg-blue: rgba(37, 99, 235, 0.1);
  --count-text-blue: #2563eb;
}

[data-theme="dark"] {
  
  --bg-page: #0a1628;
  --bg-tint: rgba(37, 99, 235, 0.08);
  --surface: rgba(15, 32, 56, 0.4);
  --surface-solid: #0f2038;
  --surface-soft: #0d1829;
  --text-main: #e2e8f0;
  --text-soft: #94a3b8;
  --text-muted: #64748b;
  --line: rgba(51, 65, 85, 0.5);
  --line-strong: rgba(71, 85, 105, 0.7);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  
  
  --sidebar-bg: #0d1829;
  --sidebar-text: #e2e8f0;
  --sidebar-soft: #94a3b8;
  --sidebar-border: rgba(51, 65, 85, 0.5);
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  
  
  --year-1-bg: #ff6b35;
  --year-2-bg: #2196f3;
  --year-3-bg: #10b981;
  --year-4-bg: #9333ea;
  --year-5-bg: #ec4899;
  --year-6-bg: #06b6d4;
  
  
  --planner-icon-bg: #ff6b35;
  --drives-icon-bg: #2196f3;
  --pratique-icon-bg: #10b981;
  --sources-icon-bg: #f59e0b;
  --residanat-icon-bg: #8b5cf6;
  
  
  --stat-bg: rgba(15, 32, 56, 0.4);
  --stat-border: rgba(51, 65, 85, 0.5);
  --stat-text: #e2e8f0;
  --stat-value: #e2e8f0;
  --stat-label: #94a3b8;
  
  
  --total-bg: #2563eb;
  --total-text: #ffffff;
  
  
  --count-bg-light: rgba(245, 158, 11, 0.15);
  --count-text-light: #fbbf24;
  --count-bg-blue: rgba(37, 99, 235, 0.15);
  --count-text-blue: #60a5fa;
}



body {
  background: var(--bg-page);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.layout {
  background: var(--bg-page);
}


#module-app {
  visibility: hidden;
  opacity: 0;
}

#module-app.loaded {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}


.top-navbar {
  display: none !important;
}



.sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: none !important;
}

.sidebar-brand-card,
.sidebar-account-card {
  background: transparent !important;
  border: none !important;
  margin-bottom: 8px !important;
}


.sidebar-account-avatar,
.sidebar-brand-logo,
.sidebar-brand-logo-shell {
  border: none !important;
  box-shadow: none !important;
}

.sidebar-brand-name,
.sidebar-account-name {
  color: var(--sidebar-text) !important;
}

.sidebar-brand-subtitle {
  color: var(--sidebar-soft) !important;
}


.sidebar-brand-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  border: none !important;
  box-shadow: none !important;
}


.sidebar-account-avatar {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
}


.sidebar-brand-logo-shell {
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar-account-link {
  background: var(--sidebar-hover);
  color: var(--sidebar-soft) !important;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.sidebar-account-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text) !important;
  transform: translateX(2px);
}


.sidebar-tool-btn {
  background: var(--sidebar-hover) !important;
  border: 1px solid var(--sidebar-border) !important;
  color: var(--sidebar-text) !important;
  transition: all 0.2s ease;
}

.sidebar-tool-btn:hover {
  background: var(--sidebar-hover) !important;
  border-color: var(--sidebar-text) !important;
  transform: scale(1.05);
}



.sidebar-pages-header {
  color: var(--sidebar-text) !important;
  background: transparent !important;
}

.sidebar-pages-header:hover {
  background: var(--sidebar-hover) !important;
}

.sidebar-page-link {
  color: var(--sidebar-soft) !important;
  background: transparent !important;
  transition: all 0.2s ease;
}

.sidebar-page-link:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text) !important;
}

.sidebar-page-link span:first-child i {
  color: var(--sidebar-text) !important;
}



.sidebar-year-badge {
  font-weight: 800 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.7rem !important;
}


.sidebar-year[style*="--year-start:01"] .sidebar-year-badge {
  background: var(--year-1-bg) !important;
  color: var(--year-1-text) !important;
}


.sidebar-year[style*="--year-start:02"] .sidebar-year-badge {
  background: var(--year-2-bg) !important;
  color: var(--year-2-text) !important;
}


.sidebar-year[style*="--year-start:03"] .sidebar-year-badge {
  background: var(--year-3-bg) !important;
  color: var(--year-3-text) !important;
}


.sidebar-year[style*="--year-start:04"] .sidebar-year-badge {
  background: var(--year-4-bg) !important;
  color: var(--year-4-text) !important;
}


.sidebar-year[style*="--year-start:05"] .sidebar-year-badge {
  background: var(--year-5-bg) !important;
  color: var(--year-5-text) !important;
}


.sidebar-year[style*="--year-start:06"] .sidebar-year-badge {
  background: var(--year-6-bg) !important;
  color: var(--year-6-text) !important;
}

.sidebar-year-title {
  color: var(--sidebar-text) !important;
}

.sidebar-year-count {
  background: var(--sidebar-hover);
  color: var(--sidebar-soft) !important;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem !important;
}

.sidebar-year {
  border-bottom: 1px solid var(--sidebar-border) !important;
}



.sidebar-module-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease;
}

.sidebar-module-link:hover {
  background: var(--sidebar-hover) !important;
  border-color: var(--sidebar-border) !important;
  transform: translateX(2px);
}

.sidebar-module-link.active {
  background: var(--sidebar-hover) !important;
  border-color: var(--sidebar-text) !important;
}

.sidebar-module-link span {
  color: #000000 !important;
}


[data-theme="dark"] .sidebar-module-link span {
  color: #e2e8f0 !important;
}



.hero {
  background: transparent !important;
  border: none !important;
}


.hero-icon {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.hero-main {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}
  align-items: center !important;
  gap: 16px !important;
}

.hero-chip {
  background: var(--surface) !important;
  color: var(--text-soft) !important;
  border: 1px solid var(--line) !important;
}


.search-input,
.hero-search-input {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-main) !important;
}

.search-input::placeholder,
.hero-search-input::placeholder {
  color: var(--text-soft) !important;
}

.search-input:focus,
.hero-search-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}



.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: space-between;
}

.hero-stat-item {
  background: var(--stat-bg) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  flex: 1 1 auto;
  min-width: 65px;
  max-width: 100px;
}

.hero-stat-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-1) !important;
}


.hero-stat-icon {
  display: none !important;
}

.hero-stat-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

.hero-stat-value {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  font-family: 'MV Boli', 'Comic Sans MS', cursive !important;
  color: var(--stat-value) !important;
  line-height: 1 !important;
  text-align: center !important;
}

.hero-stat-label {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  color: var(--stat-label) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  margin-top: 2px !important;
  white-space: nowrap;
}


.hero-stat-item-highlight,
.hero-stat-item:last-child {
  background: var(--total-bg) !important;
  border-color: var(--total-bg) !important;
}

.hero-stat-item-highlight .hero-stat-value,
.hero-stat-item:last-child .hero-stat-value {
  color: var(--total-text) !important;
}

.hero-stat-item-highlight .hero-stat-label,
.hero-stat-item:last-child .hero-stat-label {
  color: rgba(255, 255, 255, 0.9) !important;
}


@media (max-width: 768px) {
  .hero-stats {
    gap: 6px;
  }
  
  .hero-stat-item {
    flex: 1 1 calc(25% - 6px);
    min-width: 70px;
    max-width: none;
    padding: 6px 8px !important;
  }
  
  .hero-stat-value {
    font-size: 1.2rem !important;
  }
  
  .hero-stat-label {
    font-size: 0.6rem !important;
  }
}



.lesson-group,
.group-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  transition: all 0.2s ease;
}

.lesson-group:hover,
.group-card:hover {
  box-shadow: var(--shadow-2) !important;
}

.group-header {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
}

.group-title {
  color: var(--text-main) !important;
  font-weight: 700 !important;
}

.group-subtitle {
  color: var(--text-soft) !important;
}


.group-index {
  width: 64px !important;
  height: 40px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
  padding: 8px !important;
}

.group-index i {
  font-size: 1.2rem !important;
  color: white !important;
}


.lesson-group,
.group-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}


.lesson-group:has(.group-title:contains("Générale")) .group-index,
[data-section="generale"] .group-index {
  background: #667eea !important;
}


.lesson-group:has(.group-title:contains("Planner")) .group-index,
[data-section="planner"] .group-index {
  background: var(--planner-icon-bg) !important;
}


.lesson-group:has(.group-title:contains("Drives")) .group-index,
[data-section="drives"] .group-index {
  background: var(--drives-icon-bg) !important;
}


.lesson-group:has(.group-title:contains("Pratique")) .group-index,
[data-section="pratique"] .group-index {
  background: var(--pratique-icon-bg) !important;
}


.lesson-group:has(.group-title:contains("sources")) .group-index,
[data-section="sources"] .group-index {
  background: var(--sources-icon-bg) !important;
}


.lesson-group:has(.group-title:contains("Résidanat")) .group-index,
[data-section="residanat"] .group-index {
  background: var(--residanat-icon-bg) !important;
}


.group-count {
  background: var(--count-bg-light) !important;
  color: var(--count-text-light) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}



.content {
  background: var(--bg-page) !important;
}



.mobile-bottom-nav {
  background: var(--sidebar-bg) !important;
  border-top: 1px solid var(--sidebar-border) !important;
}

.mobile-bottom-btn {
  color: var(--sidebar-soft) !important;
  transition: all 0.2s ease;
}

.mobile-bottom-btn:hover {
  color: var(--sidebar-text) !important;
  background: var(--sidebar-hover) !important;
}











.hero {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}


.hero,
.hero-inner,
.hero-main,
.hero-stats {
  position: relative !important;
}





.hero-stat-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
}

.hero-stat-icon i {
  color: var(--text-soft) !important;
}


.group-index {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
}

.group-index i {
  color: white !important;
}






.hero-icon {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
}


.sidebar-account-avatar {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


.sidebar-brand-logo-shell {
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.sidebar-brand-logo {
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


.sidebar-module-link img {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
}


.sidebar-year-badge {
  border-radius: 8px !important;
}




.hero-search-wrap,
.search-input-wrapper {
  position: relative !important;
}

.hero-search-wrap::before,
.search-input-wrapper::before {
  content: '\f002' !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-soft) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.hero-search-input,
.search-input {
  padding-left: 40px !important;
}




.file-item-wrapper {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.file-item-name {
  color: var(--text-main) !important;
}


.file-item-name {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: embed !important;
}

.file-action-btn {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--text-main) !important;
}

.file-action-btn:hover {
  background: var(--sidebar-hover) !important;
}

.file-action-open {
  background: var(--surface-soft) !important;
  color: var(--text-main) !important;
}

.file-action-download {
  background: var(--surface-soft) !important;
  color: var(--text-main) !important;
}

.file-action-copy {
  background: var(--surface-soft) !important;
  color: var(--text-main) !important;
}




.coming-soon-container,
div[style*="Coming Soon"] {
  border: none !important;
  box-shadow: none !important;
}


div:has(> div:contains("Coming Soon")),
div:has(> div:contains("Contenu bientôt disponible")) {
  border: none !important;
  box-shadow: none !important;
}




.file-item-name {
  color: var(--text-main) !important;
}


.file-item-name:is([data-colored], *) {
  
}







.lesson-title {
  color: var(--text-main) !important;
}

[data-theme="dark"] .lesson-title {
  color: #ffffff !important;
}



.top-navbar {
  background: var(--sidebar-bg) !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
}

.top-navbar-link {
  color: var(--sidebar-soft) !important;
}

.top-navbar-link:hover,
.top-navbar-link.active {
  color: var(--sidebar-text) !important;
}



.sidebar-cours-pns-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}



.sidebar-quote-section {
  transition: all 0.3s ease;
}

.sidebar-quote-section:hover {
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}





.sidebar-collapsed .sidebar-account-card {
  display: none !important;
}

.sidebar-collapsed .sidebar-quote-section {
  display: none !important;
}

.sidebar-collapsed .sidebar-account-links {
  display: none !important;
}


.sidebar-collapsed .sidebar-brand-card {
  margin-bottom: 12px !important;
}

.sidebar-collapsed .sidebar-brand-name {
  display: none !important;
}

.sidebar-collapsed .sidebar-brand-copy {
  display: none !important;
}


.sidebar-collapsed .sidebar-brand-head {
  justify-content: center !important;
}

.sidebar-collapsed .sidebar-brand-logo-shell {
  margin: 0 auto !important;
}


.sidebar-collapsed .sidebar-tools {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  flex-direction: column !important;
  gap: 4px !important;
}


.sidebar-collapsed .sidebar {
  width: 80px !important;
}


.sidebar-collapsed .sidebar-year-title {
  display: none !important;
}

.sidebar-collapsed .sidebar-year-count {
  display: none !important;
}

.sidebar-collapsed .sidebar-module-link span {
  display: none !important;
}


.sidebar-collapsed .sidebar-module-link {
  justify-content: center !important;
  padding: 8px !important;
}

.sidebar-collapsed .sidebar-module-link img {
  margin: 0 !important;
}


.sidebar-collapsed .sidebar-cours-pns-btn span {
  display: none !important;
}

.sidebar-collapsed .sidebar-cours-pns-btn {
  justify-content: center !important;
  padding: 12px !important;
}





.sidebar-open-btn {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 56px !important;
  height: 44px !important;
  margin: 8px auto !important;
  border-radius: 8px !important;
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text) !important;
  border: 1px solid var(--sidebar-border) !important;
  box-shadow: none !important;
  z-index: 1 !important;
  font-size: 1.2rem !important;
}


body:not(.sidebar-collapsed) .sidebar-open-btn {
  display: none !important;
}

body.sidebar-collapsed .sidebar-open-btn {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}


.sidebar-collapsed .sidebar-brand-card {
  order: 1 !important;
}

.sidebar-collapsed .sidebar-open-btn {
  order: 2 !important;
}

.sidebar-collapsed .sidebar-top {
  display: flex !important;
  flex-direction: column !important;
}



.sidebar-collapsed .sidebar-brand-logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
}

.sidebar-collapsed .sidebar-brand-logo-shell {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.sidebar-collapsed .sidebar-cours-pns-btn i {
  font-size: 1rem !important;
}



.mobile-bottom-nav {
  background: var(--sidebar-bg) !important;
  border-top: 1px solid var(--sidebar-border) !important;
}

.mobile-bottom-nav-track {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  gap: 12px !important;
}

.mobile-bottom-btn {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 6px 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--sidebar-soft) !important;
  font-size: 0.65rem !important;
  transition: all 0.2s ease !important;
  min-width: 0 !important;
}

.mobile-bottom-btn:hover,
.mobile-bottom-btn:active {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text) !important;
}

.mobile-bottom-btn i {
  font-size: 1.2rem !important;
  color: var(--sidebar-soft) !important;
}

.mobile-bottom-btn:hover i,
.mobile-bottom-btn:active i {
  color: var(--sidebar-text) !important;
}

.mobile-bottom-btn img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  opacity: 0.7 !important;
}

.mobile-bottom-btn:hover img,
.mobile-bottom-btn:active img {
  opacity: 1 !important;
}




.mobile-year-btn {
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  position: relative !important;
}


.mobile-year-btn[data-year="1"],
.mobile-year-btn[data-year="01"] {
  background: var(--year-1-bg) !important;
  color: var(--year-1-text) !important;
}


.mobile-year-btn[data-year="2"],
.mobile-year-btn[data-year="02"] {
  background: var(--year-2-bg) !important;
  color: var(--year-2-text) !important;
}


.mobile-year-btn[data-year="3"],
.mobile-year-btn[data-year="03"] {
  background: var(--year-3-bg) !important;
  color: var(--year-3-text) !important;
}


.mobile-year-btn[data-year="4"],
.mobile-year-btn[data-year="04"] {
  background: var(--year-4-bg) !important;
  color: var(--year-4-text) !important;
}


.mobile-year-btn[data-year="5"],
.mobile-year-btn[data-year="05"] {
  background: var(--year-5-bg) !important;
  color: var(--year-5-text) !important;
}


.mobile-year-btn[data-year="6"],
.mobile-year-btn[data-year="06"] {
  background: var(--year-6-bg) !important;
  color: var(--year-6-text) !important;
}

.mobile-year-btn.active {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.1) !important;
}



.mobile-modules-panel {
  position: fixed;
  bottom: 60px; 
  width: 2cm; 
  max-height: 60vh;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 43;
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
}

.mobile-modules-panel.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.mobile-modules-content {
  display: flex;
  flex-direction: column;
  gap: 10px; 
  padding: 10px; 
  overflow-y: auto;
  max-height: 60vh;
}


.mobile-modules-content::-webkit-scrollbar {
  width: 5px; 
}

.mobile-modules-content::-webkit-scrollbar-track {
  background: var(--sidebar-hover);
  border-radius: 2px;
}

.mobile-modules-content::-webkit-scrollbar-thumb {
  background: var(--sidebar-border);
  border-radius: 2px;
}

.mobile-modules-content::-webkit-scrollbar-thumb:hover {
  background: var(--sidebar-text);
}

.mobile-module-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 6px; 
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-border);
  border-radius: 10px; 
  transition: all 0.2s ease;
  text-decoration: none;
}

.mobile-module-item:hover,
.mobile-module-item:active {
  background: var(--sidebar-text);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-module-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px; 
}


@media (min-width: 981px) {
  .mobile-modules-panel {
    display: none !important;
  }
}


@media (max-width: 768px) {
  
  .author-prefix {
    display: none !important;
  }

  .file-item-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .file-item-name {
    flex: 1 !important;
    font-size: 0.65rem !important;
    text-align: left !important;
    direction: ltr !important;
    order: 1 !important;
  }

  .file-item-actions {
    display: flex !important;
    gap: 4px !important;
    order: 2 !important;
    flex-shrink: 0 !important;
  }

  .file-action-btn {
    padding: 6px !important;
    font-size: 0.75rem !important;
    min-width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .file-action-btn i {
    font-size: 0.75rem !important;
  }

  .file-action-btn span {
    display: none !important;
  }
}


@media (max-width: 980px) {
  
  .sidebar-open-btn {
    display: none !important;
  }
  
  
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-width) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 30 !important;
  }
  
  
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }
  
  
  body:not(.sidebar-collapsed) .sidebar-open-btn {
    display: none !important;
  }
  
  body.sidebar-collapsed .sidebar-open-btn {
    display: none !important;
  }
}