/* =========================
   AeonOS – Main CSS Stylesheet
   ========================= */

   @import url("colors.css");
   @import url("memory-details.css");

   /* Core Reset */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     scroll-behavior: smooth;
   }
   
   body {
     font-family: 'Inter', 'Segoe UI', sans-serif;
     background-color: var(--aeon-deep);
     color: white;
     line-height: 1.6;
   }
   
   h1, h2, h3, h4 {
     font-weight: 700;
   }
   
   p {
     font-size: 1rem;
     color: var(--gray-soft);
   }
   
   section {
     padding: 6rem 1.5rem;
   }
   
   /* Hero */
   header {
     background-size: cover;
     background-position: center;
     position: relative;
     height: 100vh;
     text-align: center;
   }
   
   header::before {
     content: '';
     position: absolute;
     inset: 0;
     /*background: rgba(0, 0, 0, 0.6);*/
     z-index: 1;
   }
   
   header > * {
     position: relative;
     z-index: 2;
   }
   
   /* Navigation */
   nav {
     background-color: var(--aeon-ink);
     padding: 1rem;
     text-align: center;
   }
   
   nav a {
     color: white;
     margin: 0 1rem;
     text-decoration: none;
     transition: color 0.3s ease;
   }
   
   nav a:hover {
     color: var(--aeon-glow);
   }
   
   /* Section Titles */
   h2 {
     font-size: 2.5rem;
     margin-bottom: 1rem;
   }
   
   /* Buttons */
   a.button, .button {
     display: inline-block;
     border: 1px solid white;
     padding: 0.75rem 1.5rem;
     border-radius: 6px;
     color: white;
     text-decoration: none;
     transition: background 0.3s, color 0.3s;
   }
   
   a.button:hover, .button:hover {
     background: white;
     color: black;
   }
   
   /* Footer */
   footer {
     background-color: var(--black);
     color: white;
     padding: 3rem 1.5rem;
     text-align: center;
   }
   
   footer p {
     color: var(--gray-soft);
     font-size: 0.9rem;
     margin-top: 0.5rem;
   }
   
   /* Utility */
   .text-glow {
     color: var(--aeon-glow);
   }
   .italic {
     font-style: italic;
   }
   .text-muted {
     color: var(--gray-muted);
   }

   html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#loading-overlay {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #000;
  transition: opacity 1.2s cubic-bezier(.22,1,.36,1), visibility 1.2s cubic-bezier(.22,1,.36,1);
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

body.loaded {
  overflow: auto;
}

.loader-logo-main {
  display: block;
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  min-width: 120px;
  min-height: 120px;
  max-width: 300px;
  max-height: 300px;
  filter: drop-shadow(0 0 64px #56b6c9cc) drop-shadow(0 0 32px #00afc2a1);
  animation: logo-pulse 1.7s ease-in-out infinite alternate;
  background: transparent;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(.22,1,.36,1), filter 0.3s;
  margin: 0;
}

.loader-logo-main.logo-fadein {
  opacity: 1;
}

   #loading-overlay.hide {
     opacity: 0;
     pointer-events: none;
     transition: opacity 1.2s cubic-bezier(.22,1,.36,1), visibility 1.2s cubic-bezier(.22,1,.36,1);
   }

   .loader-logo-main {
     display: block;
     position: relative;
     max-width: 30vw;
     max-height: 30vh;
     width: 100%;
     height: auto;
     min-width: 120px;
     min-height: 120px;
     max-width: 300px;
     max-height: 300px;
     margin: auto;
     filter: drop-shadow(0 0 64px #56b6c9cc) drop-shadow(0 0 32px #00afc2a1);
     animation: logo-pulse 1.7s ease-in-out infinite alternate;
     background: transparent;
     border-radius: 20px;
     transition: filter 0.3s, transform 5s cubic-bezier(.22,1,.36,1);
     transform: scale(1);
   }

   .loader-logo-main.logo-grow {
     animation: none !important;
     transform: scale(1.5);
     transition: transform 5s cubic-bezier(.22,1,.36,1), filter 0.3s;
   }

   @keyframes logo-pulse {
     0% { transform: scale(1); filter: drop-shadow(0 0 64px #56b6c9cc) drop-shadow(0 0 32px #00afc2a1); }
     100% { transform: scale(1.09); filter: drop-shadow(0 0 96px #56b6c9ff) drop-shadow(0 0 48px #00afc2ff); }
   }

   /* Settings UI Styles */
   .settings-bar {
       position: absolute;
       bottom: 20px;
       left: 70px;
       z-index: 1000;
       background: rgba(0, 0, 0, 0.5);
       padding: 8px;
       border-radius: 20px;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s ease, visibility 0.3s ease;
   }

   .settings-bar.active {
       opacity: 1;
       visibility: visible;
   }

   .settings-gear {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: rgba(86, 182, 201, 0.1);
       border: 2px solid rgba(86, 182, 201, 0.5);
       color: #56B6C9;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .settings-gear:hover {
       background: rgba(86, 182, 201, 0.2);
   }

   .setting-item {
       position: relative;
       width: 32px;
       height: 32px;
       cursor: pointer;
       border-radius: 50%;
       background: rgba(86, 182, 201, 0.1);
       border: 1px solid rgba(86, 182, 201, 0.3);
       transition: all 0.2s ease;
   }

   .setting-item:hover {
       background: rgba(86, 182, 201, 0.2);
   }

   .setting-item.active {
       background: rgba(86, 182, 201, 0.3);
       border-color: rgba(86, 182, 201, 0.5);
   }

   .settings-slider-container {
       position: absolute;
       bottom: 100%;
       left: 50%;
       transform: translateX(-50%);
       margin-bottom: 10px;
       background: rgba(0, 0, 0, 0.5);
       padding: 8px;
       border-radius: 10px;
       height: 120px;
       display: block;
       align-items: center;
   }

   .settings-slider {
       -webkit-appearance: none;
       appearance: none;
       height: 100px;
       width: 4px;
       background: rgba(86, 182, 201, 0.3);
       border-radius: 2px;
       outline: none;
       writing-mode: bt-lr;
       -webkit-appearance: slider-vertical;
   }

   .settings-slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
       width: 12px;
       height: 12px;
       background: #56B6C9;
       border-radius: 50%;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .settings-slider::-webkit-slider-thumb:hover {
       transform: scale(1.2);
       box-shadow: 0 0 8px rgba(86, 182, 201, 0.4);
   }

   .settings-slider::-moz-range-thumb {
       width: 12px;
       height: 12px;
       background: #56B6C9;
       border-radius: 50%;
       cursor: pointer;
       border: none;
       transition: all 0.2s ease;
   }

   .slider-value {
       color: #56B6C9;
       font-size: 12px;
       margin-top: 8px;
       text-align: center;
   }

   .settings-button {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: rgba(86, 182, 201, 0.1);
       border: 2px solid rgba(86, 182, 201, 0.5);
       color: #56B6C9;
       cursor: pointer;
       transition: all 0.3s ease;
       position: relative;
       padding: 0;
       font-size: 16px;
   }

   .settings-button:hover {
       background: rgba(86, 182, 201, 0.2);
   }

   .settings-button.active {
       background: rgba(86, 182, 201, 0.3) !important;
       border-color: rgba(86, 182, 201, 0.5);
       box-shadow: 0 0 8px rgba(86, 182, 201, 0.4);
   }

   .has-active-slider .settings-button {
       background: rgba(86, 182, 201, 0.3);
       border-color: rgba(86, 182, 201, 0.5);
   }

   .settings-section {
       margin-bottom: 15px;
   }

   .settings-section h3 {
       color: #56B6C9;
       font-size: 14px;
       margin-bottom: 8px;
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   .settings-item {
       margin-bottom: 5px;
       position: relative;
   }

   [data-tooltip] {
       position: relative;
   }

   [data-tooltip]:before {
       content: '';
       position: absolute;
       bottom: 100%;
       left: 50%;
       transform: translateX(-50%);
       padding: 4px 8px;
       background: rgba(0, 0, 0, 0.8);
       color: white;
       font-size: 12px;
       white-space: nowrap;
       border-radius: 4px;
       pointer-events: none;
       opacity: 0;
       transition: opacity 0.2s ease;
   }

   [data-tooltip]:hover:before {
       opacity: 1;
   }

   /* Connection Tooltip */
   .connection-tooltip {
       position: fixed;
       background: rgba(0, 0, 0, 0.8);
       color: #fff;
       padding: 10px;
       border-radius: 4px;
       font-size: 14px;
       pointer-events: none;
       opacity: 0;
       transition: opacity 0.2s;
       z-index: 1000;
       min-width: 200px;
       border: 1px solid rgba(255, 255, 255, 0.2);
       backdrop-filter: blur(5px);
   }

   .connection-tooltip.visible {
       opacity: 1;
       pointer-events: auto;  
   }

   .connection-tooltip .title {
       font-size: 16px;
       font-weight: bold;
       margin-bottom: 8px;
       color: #00ffff;
   }

   .connection-tooltip .info {
       margin: 4px 0;
       color: #ffffff;
   }

   .connection-tooltip .strength {
       margin-top: 8px;
       color: #00ff99;
   }

   .connection-tooltip .close-btn {
       position: absolute;
       top: 5px;
       right: 8px;
       cursor: pointer;
       font-size: 20px;
       color: rgba(255, 255, 255, 0.7);
       transition: color 0.2s;
   }

   .connection-tooltip .close-btn:hover {
       color: white;
   }

   .memory-tooltip {
       position: fixed;
       background: rgba(20, 20, 20, 0.9);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 4px;
       padding: 8px 12px;
       font-size: 14px;
       color: #fff;
       pointer-events: none;
       z-index: 1000;
       backdrop-filter: blur(4px);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   }

   .memory-tooltip .tooltip-type {
       font-weight: bold;
       margin-bottom: 4px;
       text-transform: uppercase;
       font-size: 12px;
   }

   .memory-tooltip .tooltip-type.logos { color: #64B5F6; }
   .memory-tooltip .tooltip-type.pathos { color: #FF7043; }
   .memory-tooltip .tooltip-type.aeon { color: #81C784; }

   /* Tooltip */
   .tooltip {
       position: fixed;
       background: rgba(44, 30, 92, 0.95);
       color: #fff;
       padding: 8px 12px;
       border-radius: 6px;
       font-size: 14px;
       pointer-events: none;
       z-index: 1000;
       backdrop-filter: blur(8px);
       border: 1px solid rgba(186, 85, 211, 0.3);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
                   0 2px 4px rgba(186, 85, 211, 0.1);
       transform: translate(-50%, -100%);
       margin-top: -10px;
       white-space: nowrap;
       transition: opacity 0.2s ease;
   }

   .tooltip::after {
       content: '';
       position: absolute;
       bottom: -5px;
       left: 50%;
       transform: translateX(-50%);
       width: 0;
       height: 0;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       border-top: 5px solid rgba(44, 30, 92, 0.95);
   }

   /* Connection Details Panel */
   .connection-details-panel {
       position: fixed;
       top: 20px;
       right: 20px;
       width: 300px;
       background: rgba(30, 30, 30, 0.95);
       border-radius: 8px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
       color: #fff;
       z-index: 1000;
       backdrop-filter: blur(8px);
       border: 1px solid rgba(255, 255, 255, 0.1);
   }

   .loader-glass {
       background: rgba(30, 41, 59, 0.45);
       border-radius: 32px;
       box-shadow: 0 12px 56px 0 rgba(80,200,255,0.22), 0 2px 18px 0 rgba(0,0,0,0.18), 0 0 25px 4px #00afc2a8;
       padding: 54px 54px 38px 54px;
       gap: 24px;
       border: 3.5px solid rgba(86,182,201,0.32);
       min-width: 340px;
       position: relative;
       animation: floaty 2.5s ease-in-out infinite alternate;
   }

   .loader-logo {
       display: block;
       margin: 0 auto 8px auto;
       max-width: 110px;
       max-height: 110px;
       filter: drop-shadow(0 0 32px #56b6c9cc) drop-shadow(0 0 12px #00afc2a1);
       animation: logo-pulse 1.7s ease-in-out infinite alternate;
       border-radius: 18px;
       background: transparent;
       transition: filter 0.3s;
   }

   @keyframes logo-pulse {
       0% { transform: scale(1); filter: drop-shadow(0 0 32px #56b6c9cc) drop-shadow(0 0 12px #00afc2a1); }
       100% { transform: scale(1.08); filter: drop-shadow(0 0 48px #56b6c9ff) drop-shadow(0 0 24px #00afc2ff); }
   }

   .details-header {
       padding: 15px 20px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       display: block;
       justify-content: space-between;
       align-items: center;
   }

   .details-header h3 {
       margin: 0;
       font-size: 18px;
       font-weight: 500;
   }

   .details-header.logos { background: linear-gradient(to right, rgba(100, 181, 246, 0.2), transparent); }
   .details-header.pathos { background: linear-gradient(to right, rgba(255, 112, 67, 0.2), transparent); }
   .details-header.aeon { background: linear-gradient(to right, rgba(129, 199, 132, 0.2), transparent); }

   .close-button {
       background: none;
       border: none;
       color: rgba(255, 255, 255, 0.6);
       font-size: 24px;
       cursor: pointer;
       padding: 0 4px;
   }

   .close-button:hover {
       color: #fff;
   }

   .details-content {
       padding: 15px 20px;
   }

   .detail-section {
       margin-bottom: 20px;
   }

   .detail-section h4 {
       margin: 0 0 10px 0;
       font-size: 14px;
       color: rgba(255, 255, 255, 0.7);
       font-weight: normal;
   }

   .detail-row {
       display: block;
       margin-bottom: 8px;
       font-size: 14px;
   }

   .detail-row span:first-child {
       color: rgba(255, 255, 255, 0.6);
   }

   .strength-bar {
       height: 4px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 2px;
       overflow: visible;
       margin-top: 8px;
   }

   .strength-fill {
       height: 100%;
       background: linear-gradient(to right, #64B5F6, #81C784);
       transition: width 0.3s ease;
   }

   /* Connection Toggle Buttons */
   .connection-toggles {
       position: fixed;
       right: 20px;
       top: 50%;
       transform: translateY(-50%);
       display: block;
       gap: 10px;
       z-index: 1000;
   }

   .connection-toggle {
       padding: 8px 16px;
       border: 2px solid rgba(255, 255, 255, 0.2);
       background: rgba(0, 0, 0, 0.6);
       color: white;
       border-radius: 20px;
       cursor: pointer;
       transition: all 0.3s ease;
       font-family: 'Orbitron', sans-serif;
       min-width: 100px;
       text-align: center;
   }

   .connection-toggle:hover {
       background: rgba(255, 255, 255, 0.1);
   }

   .connection-toggle.active {
       border-color: rgba(255, 255, 255, 0.8);
       background: rgba(255, 255, 255, 0.2);
   }

   .label-toggle.connection-toggle.setting-item {
    border: 2px solid #00AFC2 !important;
}
.label-toggle.connection-toggle.setting-item.active {
    border: 2px solid #00AFC2 !important;
}


.label-toggle.connection-toggle.setting-item.active {
    border: 2px solid #00AFC2 !important;
}

   /* Specific colors for each type */
   #toggle-aeon.active {
       border-color: #6C4AB6;
       box-shadow: 0 0 10px rgba(108, 74, 182, 0.3);
   }

   #toggle-logos.active {
       border-color: #00CFFF;
       box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
   }

   #toggle-pathos.active {
       border-color: #A0006D;
       box-shadow: 0 0 10px rgba(160, 0, 109, 0.3);
   }

   /* Filter Bar and Controls */
   .memory-controls {
       padding: 1rem;
       position: sticky;
       top: 0;
       z-index: 100;
       background: transparent;
   }

   .filter-bar {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       padding: 8px;
       display: block;
       gap: 8px;
       align-items: center;
       background: rgba(13, 17, 23, 0.95);
       backdrop-filter: blur(10px);
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }

   .filter-bar::before {
       content: '';
       position: absolute;
       top: -1px;
       left: -1px;
       right: -1px;
       bottom: -1px;
       background: linear-gradient(45deg, 
           rgba(186, 85, 211, 0.4),
           transparent 40%,
           transparent 60%,
           rgba(186, 85, 211, 0.4));
       border-radius: 12px;
       z-index: -1;
       animation: shimmer 4s infinite linear;
   }

   .filter-bar::after {
       content: '';
       position: absolute;
       top: -2px;
       left: -2px;
       right: -2px;
       bottom: -2px;
       background: linear-gradient(-45deg, 
           rgba(186, 85, 211, 0.1),
           transparent 40%,
           transparent 60%,
           rgba(186, 85, 211, 0.1));
       border-radius: 13px;
       z-index: -2;
       filter: blur(4px);
       animation: shimmer 4s infinite linear reverse;
   }

   @keyframes shimmer {
       0% {
           opacity: 0.3;
           transform: scale(1);
       }
       50% {
           opacity: 0.5;
           transform: scale(1.01);
       }
       100% {
           opacity: 0.3;
           transform: scale(1);
       }
   }

   .filter-group {
       position: relative;
       display: inline-block;
   }

   .filter-btn {
       display: block;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem;
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.15);
       border-radius: 6px;
       color: rgba(255, 255, 255, 0.9);
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       height: 32px;
       min-width: 32px;
       justify-content: center;
       position: relative;
       overflow: visible;
   }

   .filter-btn::after {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(186, 85, 211, 0.1) 0%, transparent 70%);
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .filter-btn:hover {
       background: rgba(255, 255, 255, 0.12);
       border-color: rgba(186, 85, 211, 0.4);
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(186, 85, 211, 0.2);
   }

   .filter-btn:hover::after {
       opacity: 1;
   }

   .filter-btn.active {
       background: rgba(186, 85, 211, 0.25);
       border-color: rgba(186, 85, 211, 0.6);
       box-shadow: 0 0 15px rgba(186, 85, 211, 0.3),
                   inset 0 0 8px rgba(186, 85, 211, 0.2);
   }

   /* Filter Button Icons */
   .filter-btn i {
       font-size: 1.1rem;
       transition: all 0.2s ease;
   }

   /* Icon Colors */
   .filter-btn[data-control="type"] i {
       background: linear-gradient(45deg, #FFD700, #FFA500);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
   }

   .filter-btn[data-control="scores"] i {
       background: linear-gradient(45deg, #00CED1, #4169E1);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       filter: drop-shadow(0 0 2px rgba(0, 206, 209, 0.5));
   }

   .filter-btn[data-control="emotional"] i {
       background: linear-gradient(45deg, #FF69B4, #FF1493);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       filter: drop-shadow(0 0 2px rgba(255, 105, 180, 0.5));
   }

   .filter-btn[data-control="connections"] i {
       background: linear-gradient(45deg, #9370DB, #4B0082);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       filter: drop-shadow(0 0 2px rgba(147, 112, 219, 0.5));
   }

   .filter-btn[data-control="date"] i {
       background: linear-gradient(45deg, #4B0082, #9400D3);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       filter: drop-shadow(0 0 2px rgba(148, 0, 211, 0.5));
   }

   .filter-btn[data-control="search"] i {
       background: linear-gradient(45deg, #20B2AA, #48D1CC);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       filter: drop-shadow(0 0 2px rgba(32, 178, 170, 0.5));
   }

   /* Unified Hover Effect */
   .filter-btn:hover i {
       filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
       transform: scale(1.1);
   }

   /* Panel Styles */
   .filter-panel {
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       margin-top: 8px;
       min-width: 160px;
       background: rgba(20, 21, 23, 0.95);
       backdrop-filter: blur(12px);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 8px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
       z-index: 1000;
       display: none;
       max-height: calc(100vh - 100px); /* Prevent going off bottom of screen */
       overflow-y: auto;
   }

   .filter-panel {
       max-width: calc(100vw - 20px);
   }

   .filter-group:last-child .filter-panel {
       left: auto;
       right: 0;
       transform: none;
   }

   .filter-group:first-child .filter-panel {
       left: 0;
       transform: none;
   }

   .filter-panel.active {
       display: block;
   }

   .filter-panel::-webkit-scrollbar {
       width: 4px;
   }

   .filter-panel::-webkit-scrollbar-track {
       background: rgba(255, 255, 255, 0.05);
   }

   .filter-panel::-webkit-scrollbar-thumb {
       background: rgba(255, 255, 255, 0.2);
       border-radius: 2px;
   }

   /* Compact Form Controls */
   .compact-select,
   .compact-input {
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 4px;
       color: white;
       padding: 0.5rem;
       width: 100%;
   }

   .compact-select {
       cursor: pointer;
   }

   .compact-select option {
       background: rgba(44, 30, 92, 0.95);
       color: white;
       padding: 0.5rem;
   }

   .compact-input[type="date"] {
       min-width: 130px;
   }

   .compact-input[type="email"]::placeholder {
    color: #fff !important;
    opacity: 1;
}
input[type="email"]::-webkit-input-placeholder {
    color: #fff !important;
}
input[type="email"]::-moz-placeholder {
    color: #fff !important;
}
input[type="email"]:-ms-input-placeholder {
    color: #fff !important;
}
input[type="email"]::-ms-input-placeholder {
    color: #fff !important;
}

   /* Slider Controls */
   .compact-slider {
       width: 100%;
       height: 4px;
       -webkit-appearance: none;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 2px;
       outline: none;
       margin: 1rem 0;
   }

   .compact-slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: white;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .compact-slider::-webkit-slider-thumb:hover {
       transform: scale(1.2);
   }

   .compact-slider::-moz-range-thumb {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: white;
       cursor: pointer;
       transition: all 0.2s ease;
       border: none;
   }

   .compact-slider::-moz-range-thumb:hover {
       transform: scale(1.2);
   }

   /* Search Group */
   .search-group {
       margin-left: auto;
       position: relative;
       width: 200px;
   }

   .search-group .compact-input {
       width: 100%;
       padding: 0.5rem 2rem 0.5rem 0.75rem;
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 4px;
       color: white;
       height: 32px;
   }

   .search-group .filter-btn {
       position: absolute;
       right: 0;
       top: 0;
       border: none;
       background: transparent;
   }

   /* Dropdown Panels */
   .filter-panel {
       position: absolute;
       top: 100%;
       left: 0;
       background: rgba(44, 30, 92, 0.95);
       backdrop-filter: blur(20px);
       border: 1px solid rgba(186, 85, 211, 0.3);
       border-radius: 8px;
       padding: 0.75rem;
       min-width: 220px;
       display: none;
       z-index: 1000;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
                   0 4px 8px rgba(186, 85, 211, 0.2),
                   inset 0 0 12px rgba(186, 85, 211, 0.1);
       margin-top: 6px;
       transform-origin: top center;
   }

   .filter-panel::before {
       content: '';
       position: absolute;
       top: -6px;
       left: 50%;
       transform: translateX(-50%);
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
       border-bottom: 6px solid rgba(186, 85, 211, 0.3);
   }

   .filter-panel.active {
       display: block;
   }

   /* Scores Panel Styles */
   #scores-panel {
       position: fixed !important;
       top: 50px !important;
       left: 50px !important;
       transform: none !important;
       min-width: 260px;
       padding: 1.25rem;
       background: rgba(44, 30, 92, 0.95);
       backdrop-filter: blur(20px);
       border: 1px solid rgba(186, 85, 211, 0.3);
       border-radius: 8px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
                   0 4px 8px rgba(186, 85, 211, 0.2),
                   inset 0 0 12px rgba(186, 85, 211, 0.1);
       max-height: calc(100vh - 100px);
       overflow-y: auto;
   }

   #scores-panel::before {
       display: none;
   }

   .filter-btn[data-control="scores"] {
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(186, 85, 211, 0.3);
       position: relative;
       overflow: visible;
   }

   .filter-btn[data-control="scores"]::after {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(186, 85, 211, 0.1) 0%, transparent 70%);
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .filter-btn[data-control="scores"]:hover::after {
       opacity: 1;
   }

   .filter-btn[data-control="scores"]:hover {
       background: rgba(255, 255, 255, 0.12);
       border-color: rgba(186, 85, 211, 0.4);
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(186, 85, 211, 0.2);
   }

   .filter-btn[data-control="scores"].active {
       background: rgba(186, 85, 211, 0.25);
       border-color: rgba(186, 85, 211, 0.6);
       box-shadow: 0 0 15px rgba(186, 85, 211, 0.3),
                   inset 0 0 8px rgba(186, 85, 211, 0.2);
   }

   /* Memory Details Sidebar */
   .memory-sidebar {
       position: fixed;
       top: 0;
       right: -400px;
       width: 400px;
       height: 100vh;
       background: rgba(44, 30, 92, 0.95);
       backdrop-filter: blur(12px);
       border-left: 1px solid rgba(186, 85, 211, 0.2);
       padding: 2rem;
       overflow-y: auto;
       transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 1000;
       box-shadow: -4px 0 30px rgba(0, 0, 0, 0.3);
   }

   .memory-sidebar.visible {
       right: 0;
   }

   .memory-header {
       margin-bottom: 2rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid rgba(186, 85, 211, 0.2);
   }

   .memory-header h2 {
       font-size: 1.5rem;
       font-weight: 600;
       color: var(--aeon-lavender);
       margin-bottom: 0.5rem;
   }

   .memory-type-badge {
       display: inline-block;
       padding: 0.25rem 0.75rem;
       background: rgba(186, 85, 211, 0.2);
       border: 1px solid rgba(186, 85, 211, 0.3);
       border-radius: 1rem;
       font-size: 0.875rem;
       color: var(--aeon-lavender);
       margin-right: 1rem;
   }

   .memory-date {
       font-size: 0.875rem;
       color: rgba(255, 255, 255, 0.6);
   }

   .memory-scores {
       margin-bottom: 2rem;
   }

   .score-item {
       display: block;
       padding: 0.5rem 0;
       border-bottom: 1px solid rgba(186, 85, 211, 0.1);
   }

   .score-item label {
       color: rgba(255, 255, 255, 0.7);
       font-size: 0.875rem;
   }

   .score-item span {
       color: var(--aeon-lavender);
       font-weight: 500;
   }

   .connections-section {
       margin-bottom: 2rem;
   }

   .connections-section h3 {
       font-size: 1.25rem;
       color: var(--aeon-lavender);
       margin-bottom: 1rem;
   }

   .connections-list {
       max-height: 300px;
       overflow-y: auto;
   }

   .connection-item {
       background: rgba(186, 85, 211, 0.1);
       border: 1px solid rgba(186, 85, 211, 0.2);
       border-radius: 0.5rem;
       padding: 1rem;
       margin-bottom: 0.75rem;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .connection-item:hover {
       background: rgba(186, 85, 211, 0.15);
       border-color: rgba(186, 85, 211, 0.3);
       transform: translateX(5px);
   }

   .connection-header {
       display: block;
       margin-bottom: 0.5rem;
   }

   .connection-header .direction {
       color: var(--aeon-lavender);
       margin-right: 0.5rem;
       font-weight: bold;
   }

   .connection-header .connected-node {
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
   }

   .connection-type {
       color: var(--aeon-lavender);
       font-size: 0.875rem;
       margin-bottom: 0.25rem;
   }

   .connection-reason {
       color: rgba(255, 255, 255, 0.7);
       font-size: 0.875rem;
       font-style: italic;
       margin-bottom: 0.25rem;
   }

   .connection-weight {
       color: rgba(255, 255, 255, 0.6);
       font-size: 0.75rem;
   }

   .no-connections {
       text-align: center;
       color: rgba(255, 255, 255, 0.5);
       font-style: italic;
       padding: 1rem;
   }

   /* Aeon Summary and Logos Trace sections */
   .aeon-summary,
   .logos-trace {
       margin-top: 2rem;
       padding-top: 2rem;
       border-top: 1px solid rgba(186, 85, 211, 0.2);
   }

   .aeon-summary h3,
   .logos-trace h3 {
       font-size: 1.25rem;
       color: var(--aeon-lavender);
       margin-bottom: 1rem;
   }

   .summary-item,
   .trace-item {
       margin-bottom: 0.75rem;
   }

   .summary-item label,
   .trace-item label {
       display: block;
       color: rgba(255, 255, 255, 0.7);
       font-size: 0.875rem;
       margin-bottom: 0.25rem;
   }

   .summary-item span,
   .trace-item span {
       display: block;
       color: rgba(255, 255, 255, 0.9);
   }

   #logical-steps,
   #counterpoints {
       list-style: none;
       padding-left: 1rem;
   }

   #logical-steps li,
   #counterpoints li {
       position: relative;
       padding-left: 1rem;
       margin-bottom: 0.5rem;
       color: rgba(255, 255, 255, 0.9);
   }

   #logical-steps li::before,
   #counterpoints li::before {
       content: '•';
       position: absolute;
       left: 0;
       color: var(--aeon-lavender);
   }

   /* Scrollbar styling */
   .memory-sidebar::-webkit-scrollbar {
       width: 6px;
   }

   .memory-sidebar::-webkit-scrollbar-track {
       background: rgba(0, 0, 0, 0.2);
   }

   .memory-sidebar::-webkit-scrollbar-thumb {
       background: rgba(186, 85, 211, 0.3);
       border-radius: 3px;
   }

   .memory-sidebar::-webkit-scrollbar-thumb:hover {
       background: rgba(186, 85, 211, 0.5);
   }

   /* Related Memories Section */
   .related-memories {
       margin-top: 2rem;
       padding-top: 2rem;
       border-top: 1px solid rgba(186, 85, 211, 0.2);
   }

   .related-memories h3 {
       font-size: 1.25rem;
       color: var(--aeon-lavender);
       margin-bottom: 1rem;
   }

   .memories-list {
       max-height: 300px;
       overflow-y: auto;
   }

   .memory-item {
       background: rgba(186, 85, 211, 0.1);
       border: 1px solid rgba(186, 85, 211, 0.2);
       border-radius: 0.5rem;
       padding: 1rem;
       margin-bottom: 0.75rem;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .memory-item:hover {
       background: rgba(186, 85, 211, 0.15);
       border-color: rgba(186, 85, 211, 0.3);
       transform: translateX(5px);
   }

   .memory-connection {
       display: block;
       gap: 0.5rem;
   }

   .connection-header {
       display: block;
       margin-bottom: 0.5rem;
   }

   .connection-header .direction {
       color: var(--aeon-lavender);
       font-weight: bold;
   }

   .connection-header .connected-title {
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
   }

   .connection-details {
       display: block;
       gap: 0.25rem;
       padding-left: 1.5rem;
   }

   .connection-details .relationship {
       color: var(--aeon-lavender);
       font-size: 0.875rem;
   }

   .connection-details .reason {
       color: rgba(255, 255, 255, 0.7);
       font-size: 0.875rem;
       font-style: italic;
   }

   .connection-details .weight {
       color: rgba(255, 255, 255, 0.6);
       font-size: 0.75rem;
   }

   .no-connections {
       text-align: center;
       color: rgba(255, 255, 255, 0.5);
       font-style: italic;
       padding: 1rem;
   }

   /* Scrollbar styling for memories list */
   .memories-list::-webkit-scrollbar {
       width: 6px;
   }

   .memories-list::-webkit-scrollbar-track {
       background: rgba(0, 0, 0, 0.2);
   }

   .memories-list::-webkit-scrollbar-thumb {
       background: rgba(186, 85, 211, 0.3);
       border-radius: 3px;
   }

   .memories-list::-webkit-scrollbar-thumb:hover {
       background: rgba(186, 85, 211, 0.5);
   }

   /* Memory Links */
   .memory-links {
       display: block;
       gap: 1rem;
       margin-top: 1rem;
   }

   .memory-link-item {
       background: rgba(0, 0, 0, 0.3);
       border-radius: 8px;
       padding: 1rem;
       border: 1px solid rgba(255, 255, 255, 0.1);
   }

   .link-header {
       display: block;
       margin-bottom: 0.5rem;
   }

   .link-type {
       padding: 0.25rem 0.75rem;
       border-radius: 4px;
       font-size: 0.875rem;
   }

   .link-title {
       font-weight: 500;
       color: #fff;
   }

   .link-details {
       margin-top: 0.5rem;
   }

   .link-reasoning {
       font-size: 0.875rem;
       color: rgba(255, 255, 255, 0.8);
       line-height: 1.5;
       padding: 0.5rem;
       background: rgba(255, 255, 255, 0.05);
       border-radius: 4px;
   }

   /* Memory Links Styling */
   .memory-links {
       display: block;
       gap: 1rem;
       padding: 1rem;
   }

   .memory-link-item {
       background: rgba(0, 0, 0, 0.3);
       border-radius: 8px;
       padding: 1rem;
       border: 1px solid rgba(255, 255, 255, 0.1);
   }

   .link-header {
       display: block;
       margin-bottom: 0.5rem;
   }

   .link-type {
       padding: 0.25rem 0.75rem;
       border-radius: 4px;
       font-size: 0.875rem;
       font-weight: 600;
   }

   .link-type.logos {
       background: rgba(64, 156, 255, 0.2);
       color: #409cff;
   }

   .link-type.pathos {
       background: rgba(255, 82, 82, 0.2);
       color: #ff5252;
   }

   .link-type.aeon {
       background: rgba(156, 39, 176, 0.2);
       color: #9c27b0;
   }

   .link-type.thread {
       background: rgba(76, 175, 80, 0.2);
       color: #4caf50;
   }

   .link-title {
       font-weight: 500;
       color: rgba(255, 255, 255, 0.9);
   }

   .link-details {
       margin-top: 0.5rem;
   }

   .link-reasoning {
       font-size: 0.875rem;
       color: rgba(255, 255, 255, 0.7);
       line-height: 1.5;
       padding: 0.5rem;
       background: rgba(255, 255, 255, 0.05);
       border-radius: 4px;
   }

   .no-connections {
       text-align: center;
       color: rgba(255, 255, 255, 0.5);
       padding: 1rem;
   }