MAALOUFimad02/Machine_Learning_Training
0
1/* ═══════════════════════════════════════════════════════════════════════════2 ML PLATFORM — SHARED STYLES3 Formation Machine Learning Professionnelle4 Design: Dark Modern avec animations CSS5 ═══════════════════════════════════════════════════════════════════════════ */6 7@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');8 9/* ═══════════════════════════════════════════════════════════════════════════10 VARIABLES CSS11 ═══════════════════════════════════════════════════════════════════════════ */12:root {13 /* Couleurs principales */14 --primary: #6366f1;15 --primary-light: #818cf8;16 --primary-dark: #4f46e5;17 --secondary: #06b6d4;18 --accent: #f59e0b;19 --success: #10b981;20 --warning: #f97316;21 --danger: #ef4444;22 23 /* Couleurs de fond */24 --bg-primary: #0f0f1a;25 --bg-secondary: #1a1a2e;26 --bg-tertiary: #252542;27 --bg-card: #16162a;28 --bg-hover: #1e1e3a;29 30 /* Couleurs de texte */31 --text-primary: #f8fafc;32 --text-secondary: #94a3b8;33 --text-muted: #64748b;34 --text-accent: #818cf8;35 36 /* Bordures */37 --border-color: #2d2d4a;38 --border-light: #3d3d5c;39 40 /* Ombres */41 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);42 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);43 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);44 --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);45 --shadow-glow-strong: 0 0 40px rgba(99, 102, 241, 0.5);46 47 /* Rayons */48 --radius-sm: 6px;49 --radius-md: 10px;50 --radius-lg: 16px;51 --radius-xl: 24px;52 53 /* Transitions */54 --transition-fast: 0.15s ease;55 --transition-base: 0.25s ease;56 --transition-slow: 0.4s ease;57 58 /* Espacements */59 --space-xs: 0.25rem;60 --space-sm: 0.5rem;61 --space-md: 1rem;62 --space-lg: 1.5rem;63 --space-xl: 2rem;64 --space-2xl: 3rem;65 --space-3xl: 4rem;66 67 /* Sidebar */68 --sidebar-width: 280px;69 --navbar-height: 64px;70}71 72/* ═══════════════════════════════════════════════════════════════════════════73 RESET & BASE74 ═══════════════════════════════════════════════════════════════════════════ */75*, *::before, *::after {76 box-sizing: border-box;77 margin: 0;78 padding: 0;79}80 81html {82 scroll-behavior: smooth;83 font-size: 16px;84}85 86body {87 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;88 background: var(--bg-primary);89 color: var(--text-primary);90 line-height: 1.6;91 min-height: 100vh;92 overflow-x: hidden;93}94 95/* ═══════════════════════════════════════════════════════════════════════════96 ANIMATIONS KEYFRAMES97 ═══════════════════════════════════════════════════════════════════════════ */98@keyframes fadeIn {99 from { opacity: 0; }100 to { opacity: 1; }101}102 103@keyframes fadeInUp {104 from { 105 opacity: 0; 106 transform: translateY(30px); 107 }108 to { 109 opacity: 1; 110 transform: translateY(0); 111 }112}113 114@keyframes fadeInDown {115 from { 116 opacity: 0; 117 transform: translateY(-20px); 118 }119 to { 120 opacity: 1; 121 transform: translateY(0); 122 }123}124 125@keyframes fadeInLeft {126 from { 127 opacity: 0; 128 transform: translateX(-30px); 129 }130 to { 131 opacity: 1; 132 transform: translateX(0); 133 }134}135 136@keyframes fadeInRight {137 from { 138 opacity: 0; 139 transform: translateX(30px); 140 }141 to { 142 opacity: 1; 143 transform: translateX(0); 144 }145}146 147@keyframes scaleIn {148 from { 149 opacity: 0; 150 transform: scale(0.9); 151 }152 to { 153 opacity: 1; 154 transform: scale(1); 155 }156}157 158@keyframes slideInUp {159 from { 160 transform: translateY(100%); 161 }162 to { 163 transform: translateY(0); 164 }165}166 167@keyframes pulse {168 0%, 100% { 169 opacity: 1; 170 transform: scale(1);171 }172 50% { 173 opacity: 0.7; 174 transform: scale(1.05);175 }176}177 178@keyframes glow {179 0%, 100% { 180 box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 15px var(--primary);181 }182 50% { 183 box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary);184 }185}186 187@keyframes shimmer {188 0% { background-position: -200% 0; }189 100% { background-position: 200% 0; }190}191 192@keyframes float {193 0%, 100% { transform: translateY(0); }194 50% { transform: translateY(-10px); }195}196 197@keyframes rotate {198 from { transform: rotate(0deg); }199 to { transform: rotate(360deg); }200}201 202@keyframes bounce {203 0%, 100% { transform: translateY(0); }204 50% { transform: translateY(-5px); }205}206 207@keyframes typing {208 from { width: 0; }209 to { width: 100%; }210}211 212@keyframes blink {213 0%, 100% { opacity: 1; }214 50% { opacity: 0; }215}216 217@keyframes gradientShift {218 0% { background-position: 0% 50%; }219 50% { background-position: 100% 50%; }220 100% { background-position: 0% 50%; }221}222 223@keyframes particle {224 0% {225 transform: translateY(100vh) rotate(0deg);226 opacity: 0;227 }228 10% { opacity: 1; }229 90% { opacity: 1; }230 100% {231 transform: translateY(-100vh) rotate(720deg);232 opacity: 0;233 }234}235 236@keyframes wave {237 0%, 100% { transform: translateY(0); }238 25% { transform: translateY(-5px); }239 75% { transform: translateY(5px); }240}241 242@keyframes progress {243 from { width: 0; }244 to { width: var(--progress, 100%); }245}246 247/* ═══════════════════════════════════════════════════════════════════════════248 UTILITAIRES D'ANIMATION249 ═══════════════════════════════════════════════════════════════════════════ */250.animate-fade-in { animation: fadeIn 0.6s ease forwards; }251.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }252.animate-fade-in-down { animation: fadeInDown 0.5s ease forwards; }253.animate-fade-in-left { animation: fadeInLeft 0.5s ease forwards; }254.animate-fade-in-right { animation: fadeInRight 0.5s ease forwards; }255.animate-scale-in { animation: scaleIn 0.5s ease forwards; }256.animate-float { animation: float 3s ease-in-out infinite; }257.animate-pulse { animation: pulse 2s ease-in-out infinite; }258.animate-glow { animation: glow 2s ease-in-out infinite; }259.animate-bounce { animation: bounce 1s ease-in-out infinite; }260.animate-rotate { animation: rotate 2s linear infinite; }261 262/* Delays */263.delay-100 { animation-delay: 0.1s; }264.delay-200 { animation-delay: 0.2s; }265.delay-300 { animation-delay: 0.3s; }266.delay-400 { animation-delay: 0.4s; }267.delay-500 { animation-delay: 0.5s; }268.delay-600 { animation-delay: 0.6s; }269.delay-700 { animation-delay: 0.7s; }270.delay-800 { animation-delay: 0.8s; }271 272/* Initial states for scroll animations */273.scroll-animate {274 opacity: 0;275 transform: translateY(30px);276 transition: opacity 0.6s ease, transform 0.6s ease;277}278 279.scroll-animate.visible {280 opacity: 1;281 transform: translateY(0);282}283 284/* ═══════════════════════════════════════════════════════════════════════════285 NAVIGATION286 ═══════════════════════════════════════════════════════════════════════════ */287.navbar {288 position: fixed;289 top: 0;290 left: 0;291 right: 0;292 height: var(--navbar-height);293 background: rgba(15, 15, 26, 0.85);294 backdrop-filter: blur(20px);295 border-bottom: 1px solid var(--border-color);296 z-index: 1000;297 display: flex;298 align-items: center;299 justify-content: space-between;300 padding: 0 var(--space-xl);301 animation: fadeInDown 0.5s ease;302}303 304.navbar-brand {305 display: flex;306 align-items: center;307 gap: var(--space-sm);308 text-decoration: none;309 color: var(--text-primary);310 font-weight: 700;311 font-size: 1.1rem;312 transition: var(--transition-base);313}314 315.navbar-brand:hover {316 color: var(--primary-light);317}318 319.brand-logo {320 width: 36px;321 height: 36px;322 background: linear-gradient(135deg, var(--primary), var(--secondary));323 border-radius: var(--radius-md);324 display: flex;325 align-items: center;326 justify-content: center;327 font-size: 1.2rem;328 animation: float 3s ease-in-out infinite;329}330 331.navbar-nav {332 display: flex;333 align-items: center;334 gap: var(--space-xs);335}336 337.nav-link {338 display: flex;339 align-items: center;340 gap: var(--space-sm);341 padding: var(--space-sm) var(--space-md);342 color: var(--text-secondary);343 text-decoration: none;344 font-size: 0.9rem;345 font-weight: 500;346 border-radius: var(--radius-md);347 transition: all var(--transition-base);348 position: relative;349 overflow: hidden;350}351 352.nav-link::before {353 content: '';354 position: absolute;355 bottom: 0;356 left: 50%;357 width: 0;358 height: 2px;359 background: linear-gradient(90deg, var(--primary), var(--secondary));360 transition: all var(--transition-base);361 transform: translateX(-50%);362}363 364.nav-link:hover {365 color: var(--text-primary);366 background: var(--bg-hover);367}368 369.nav-link:hover::before {370 width: 60%;371}372 373.nav-link.active {374 color: var(--primary-light);375 background: rgba(99, 102, 241, 0.1);376}377 378.nav-link.active::before {379 width: 60%;380}381 382.nav-badge {383 display: flex;384 align-items: center;385 gap: var(--space-sm);386 padding: var(--space-xs) var(--space-md);387 background: rgba(16, 185, 129, 0.1);388 border: 1px solid rgba(16, 185, 129, 0.3);389 border-radius: 20px;390 font-size: 0.75rem;391 font-weight: 600;392 color: var(--success);393 font-family: 'JetBrains Mono', monospace;394}395 396.nav-badge .dot {397 width: 6px;398 height: 6px;399 background: var(--success);400 border-radius: 50%;401 animation: pulse 2s ease-in-out infinite;402}403 404/* ═══════════════════════════════════════════════════════════════════════════405 BOUTONS406 ═══════════════════════════════════════════════════════════════════════════ */407.btn {408 display: inline-flex;409 align-items: center;410 justify-content: center;411 gap: var(--space-sm);412 padding: var(--space-sm) var(--space-lg);413 font-family: 'Inter', sans-serif;414 font-size: 0.9rem;415 font-weight: 600;416 text-decoration: none;417 border: none;418 border-radius: var(--radius-md);419 cursor: pointer;420 transition: all var(--transition-base);421 position: relative;422 overflow: hidden;423}424 425.btn::before {426 content: '';427 position: absolute;428 top: 50%;429 left: 50%;430 width: 0;431 height: 0;432 background: rgba(255, 255, 255, 0.1);433 border-radius: 50%;434 transform: translate(-50%, -50%);435 transition: width 0.4s ease, height 0.4s ease;436}437 438.btn:hover::before {439 width: 200%;440 height: 200%;441}442 443.btn-primary {444 background: linear-gradient(135deg, var(--primary), var(--primary-dark));445 color: white;446 box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);447}448 449.btn-primary:hover {450 transform: translateY(-2px);451 box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);452}453 454.btn-secondary {455 background: var(--bg-tertiary);456 color: var(--text-primary);457 border: 1px solid var(--border-color);458}459 460.btn-secondary:hover {461 background: var(--bg-hover);462 border-color: var(--border-light);463 transform: translateY(-2px);464}465 466.btn-outline {467 background: transparent;468 color: var(--primary-light);469 border: 1px solid var(--primary);470}471 472.btn-outline:hover {473 background: rgba(99, 102, 241, 0.1);474 transform: translateY(-2px);475}476 477.btn-success {478 background: linear-gradient(135deg, var(--success), #059669);479 color: white;480 box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);481}482 483.btn-success:hover {484 transform: translateY(-2px);485 box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5);486}487 488.btn-lg {489 padding: var(--space-md) var(--space-xl);490 font-size: 1rem;491}492 493.btn-sm {494 padding: var(--space-xs) var(--space-md);495 font-size: 0.8rem;496}497 498/* ═══════════════════════════════════════════════════════════════════════════499 BADGES500 ═══════════════════════════════════════════════════════════════════════════ */501.badge {502 display: inline-flex;503 align-items: center;504 gap: var(--space-xs);505 padding: var(--space-xs) var(--space-sm);506 font-size: 0.7rem;507 font-weight: 600;508 text-transform: uppercase;509 letter-spacing: 0.5px;510 border-radius: var(--radius-sm);511 font-family: 'JetBrains Mono', monospace;512}513 514.badge-primary {515 background: rgba(99, 102, 241, 0.15);516 color: var(--primary-light);517 border: 1px solid rgba(99, 102, 241, 0.3);518}519 520.badge-secondary {521 background: rgba(6, 182, 212, 0.15);522 color: var(--secondary);523 border: 1px solid rgba(6, 182, 212, 0.3);524}525 526.badge-success {527 background: rgba(16, 185, 129, 0.15);528 color: var(--success);529 border: 1px solid rgba(16, 185, 129, 0.3);530}531 532.badge-warning {533 background: rgba(249, 115, 22, 0.15);534 color: var(--warning);535 border: 1px solid rgba(249, 115, 22, 0.3);536}537 538.badge-accent {539 background: rgba(245, 158, 11, 0.15);540 color: var(--accent);541 border: 1px solid rgba(245, 158, 11, 0.3);542}543 544/* ═══════════════════════════════════════════════════════════════════════════545 CARDS546 ═══════════════════════════════════════════════════════════════════════════ */547.card {548 background: var(--bg-card);549 border: 1px solid var(--border-color);550 border-radius: var(--radius-lg);551 padding: var(--space-xl);552 transition: all var(--transition-base);553 position: relative;554 overflow: hidden;555}556 557.card::before {558 content: '';559 position: absolute;560 top: 0;561 left: 0;562 right: 0;563 height: 3px;564 background: linear-gradient(90deg, var(--primary), var(--secondary));565 transform: scaleX(0);566 transition: transform var(--transition-base);567}568 569.card:hover {570 transform: translateY(-5px);571 border-color: var(--border-light);572 box-shadow: var(--shadow-lg), var(--shadow-glow);573}574 575.card:hover::before {576 transform: scaleX(1);577}578 579.card-icon {580 width: 50px;581 height: 50px;582 background: linear-gradient(135deg, var(--primary), var(--secondary));583 border-radius: var(--radius-md);584 display: flex;585 align-items: center;586 justify-content: center;587 font-size: 1.5rem;588 margin-bottom: var(--space-md);589 animation: float 3s ease-in-out infinite;590}591 592.card-title {593 font-size: 1.1rem;594 font-weight: 700;595 color: var(--text-primary);596 margin-bottom: var(--space-sm);597}598 599.card-text {600 font-size: 0.9rem;601 color: var(--text-secondary);602 line-height: 1.6;603}604 605/* ═══════════════════════════════════════════════════════════════════════════606 CALLOUTS / ALERTS607 ═══════════════════════════════════════════════════════════════════════════ */608.callout {609 display: flex;610 gap: var(--space-md);611 padding: var(--space-lg);612 border-radius: var(--radius-md);613 margin: var(--space-lg) 0;614 animation: fadeInUp 0.5s ease;615}616 617.callout-icon {618 font-size: 1.5rem;619 flex-shrink: 0;620}621 622.callout-content {623 flex: 1;624}625 626.callout-title {627 font-weight: 600;628 color: var(--text-primary);629 margin-bottom: var(--space-xs);630}631 632.callout-text {633 font-size: 0.9rem;634 color: var(--text-secondary);635}636 637.callout-info {638 background: rgba(99, 102, 241, 0.1);639 border: 1px solid rgba(99, 102, 241, 0.3);640}641 642.callout-success {643 background: rgba(16, 185, 129, 0.1);644 border: 1px solid rgba(16, 185, 129, 0.3);645}646 647.callout-warning {648 background: rgba(249, 115, 22, 0.1);649 border: 1px solid rgba(249, 115, 22, 0.3);650}651 652.callout-tip {653 background: rgba(245, 158, 11, 0.1);654 border: 1px solid rgba(245, 158, 11, 0.3);655}656 657/* ═══════════════════════════════════════════════════════════════════════════658 CODE BLOCKS659 ═══════════════════════════════════════════════════════════════════════════ */660.code-block {661 background: #0d0d15;662 border: 1px solid var(--border-color);663 border-radius: var(--radius-md);664 overflow: hidden;665 margin: var(--space-md) 0;666 animation: fadeInUp 0.5s ease;667}668 669.code-header {670 display: flex;671 align-items: center;672 justify-content: space-between;673 padding: var(--space-sm) var(--space-md);674 background: var(--bg-tertiary);675 border-bottom: 1px solid var(--border-color);676}677 678.code-dots {679 display: flex;680 gap: 6px;681}682 683.code-dot {684 width: 10px;685 height: 10px;686 border-radius: 50%;687}688 689.code-dot.red { background: #ff5f56; }690.code-dot.yellow { background: #ffbd2e; }691.code-dot.green { background: #27c93f; }692 693.code-lang {694 font-family: 'JetBrains Mono', monospace;695 font-size: 0.7rem;696 color: var(--text-muted);697 text-transform: uppercase;698 letter-spacing: 1px;699}700 701.code-block pre {702 padding: var(--space-md);703 overflow-x: auto;704 font-family: 'JetBrains Mono', monospace;705 font-size: 0.85rem;706 line-height: 1.7;707 color: #cdd6f4;708 margin: 0;709}710 711/* Syntax highlighting colors */712.code-keyword { color: #cba6f7; }713.code-function { color: #89b4fa; }714.code-string { color: #a6e3a1; }715.code-comment { color: #6c7086; font-style: italic; }716.code-number { color: #fab387; }717.code-class { color: #f38ba8; }718 719/* ═══════════════════════════════════════════════════════════════════════════720 TABLES721 ═══════════════════════════════════════════════════════════════════════════ */722.table-container {723 overflow-x: auto;724 border-radius: var(--radius-md);725 border: 1px solid var(--border-color);726 margin: var(--space-lg) 0;727}728 729table {730 width: 100%;731 border-collapse: collapse;732 font-size: 0.9rem;733}734 735th {736 background: var(--bg-tertiary);737 color: var(--text-secondary);738 font-family: 'JetBrains Mono', monospace;739 font-size: 0.75rem;740 font-weight: 600;741 text-transform: uppercase;742 letter-spacing: 0.5px;743 padding: var(--space-md);744 text-align: left;745 border-bottom: 1px solid var(--border-color);746}747 748td {749 padding: var(--space-md);750 border-bottom: 1px solid var(--border-color);751 color: var(--text-primary);752}753 754tr:hover td {755 background: var(--bg-hover);756}757 758tr:last-child td {759 border-bottom: none;760}761 762/* ═══════════════════════════════════════════════════════════════════════════763 FORMS764 ═══════════════════════════════════════════════════════════════════════════ */765.form-group {766 margin-bottom: var(--space-lg);767}768 769.form-label {770 display: block;771 font-size: 0.8rem;772 font-weight: 600;773 color: var(--text-secondary);774 text-transform: uppercase;775 letter-spacing: 0.5px;776 margin-bottom: var(--space-sm);777 font-family: 'JetBrains Mono', monospace;778}779 780.form-input,781.form-select,782.form-textarea {783 width: 100%;784 background: var(--bg-tertiary);785 border: 1px solid var(--border-color);786 border-radius: var(--radius-md);787 color: var(--text-primary);788 font-family: 'Inter', sans-serif;789 font-size: 0.95rem;790 padding: var(--space-sm) var(--space-md);791 transition: all var(--transition-base);792}793 794.form-input:focus,795.form-select:focus,796.form-textarea:focus {797 outline: none;798 border-color: var(--primary);799 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);800}801 802.form-input::placeholder,803.form-textarea::placeholder {804 color: var(--text-muted);805}806 807.form-textarea {808 min-height: 120px;809 resize: vertical;810}811 812/* ═══════════════════════════════════════════════════════════════════════════813 FOOTER814 ═══════════════════════════════════════════════════════════════════════════ */815.footer {816 background: var(--bg-secondary);817 border-top: 1px solid var(--border-color);818 padding: var(--space-2xl) var(--space-xl);819 text-align: center;820 margin-top: auto;821}822 823.footer-text {824 font-size: 0.85rem;825 color: var(--text-muted);826 font-family: 'JetBrains Mono', monospace;827}828 829.footer-brand {830 color: var(--primary-light);831 font-weight: 600;832}833 834/* ═══════════════════════════════════════════════════════════════════════════835 PARTICLES BACKGROUND (CSS only)836 ═══════════════════════════════════════════════════════════════════════════ */837.particles-container {838 position: fixed;839 top: 0;840 left: 0;841 width: 100%;842 height: 100%;843 pointer-events: none;844 overflow: hidden;845 z-index: 0;846}847 848.particle {849 position: absolute;850 width: 4px;851 height: 4px;852 background: var(--primary);853 border-radius: 50%;854 opacity: 0.3;855 animation: particle 15s linear infinite;856}857 858.particle:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; }859.particle:nth-child(2) { left: 20%; animation-duration: 18s; animation-delay: 2s; background: var(--secondary); }860.particle:nth-child(3) { left: 30%; animation-duration: 14s; animation-delay: 4s; }861.particle:nth-child(4) { left: 40%; animation-duration: 20s; animation-delay: 1s; background: var(--accent); }862.particle:nth-child(5) { left: 50%; animation-duration: 16s; animation-delay: 3s; }863.particle:nth-child(6) { left: 60%; animation-duration: 13s; animation-delay: 5s; background: var(--success); }864.particle:nth-child(7) { left: 70%; animation-duration: 19s; animation-delay: 2s; }865.particle:nth-child(8) { left: 80%; animation-duration: 15s; animation-delay: 4s; background: var(--secondary); }866.particle:nth-child(9) { left: 90%; animation-duration: 17s; animation-delay: 1s; }867 868/* ═══════════════════════════════════════════════════════════════════════════869 GRADIENT TEXT870 ═══════════════════════════════════════════════════════════════════════════ */871.gradient-text {872 background: linear-gradient(135deg, var(--primary-light), var(--secondary), var(--accent));873 background-size: 200% 200%;874 -webkit-background-clip: text;875 -webkit-text-fill-color: transparent;876 background-clip: text;877 animation: gradientShift 4s ease infinite;878}879 880/* ═══════════════════════════════════════════════════════════════════════════881 PAGE WRAPPER882 ═══════════════════════════════════════════════════════════════════════════ */883.page-wrapper {884 padding-top: var(--navbar-height);885 min-height: 100vh;886 display: flex;887 flex-direction: column;888 position: relative;889 z-index: 1;890}891 892/* ═══════════════════════════════════════════════════════════════════════════893 RESPONSIVE894 ═══════════════════════════════════════════════════════════════════════════ */895@media (max-width: 768px) {896 .navbar {897 padding: 0 var(--space-md);898 }899 900 .nav-link span:not(.nav-icon) {901 display: none;902 }903 904 .navbar-brand span {905 display: none;906 }907 908 .nav-badge {909 display: none;910 }911 912 :root {913 --sidebar-width: 0;914 }915}916 917/* ═══════════════════════════════════════════════════════════════════════════918 SCROLLBAR STYLING919 ═══════════════════════════════════════════════════════════════════════════ */920::-webkit-scrollbar {921 width: 8px;922 height: 8px;923}924 925::-webkit-scrollbar-track {926 background: var(--bg-secondary);927}928 929::-webkit-scrollbar-thumb {930 background: var(--border-light);931 border-radius: 4px;932}933 934::-webkit-scrollbar-thumb:hover {935 background: var(--primary);936}937 938/* ═══════════════════════════════════════════════════════════════════════════939 SELECTION940 ═══════════════════════════════════════════════════════════════════════════ */941::selection {942 background: rgba(99, 102, 241, 0.3);943 color: var(--text-primary);944}945