:root {
    --bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    --text: #b0d4ff;
    --text-muted: #b0d4ff;
    --text-bright: #e4e4e4;
    --primary: #40c4ff;
    --primary-glow: rgba(64, 196, 255, 0.35);
    --accent: #a78bfa;
    --card: rgba(20, 25, 45, 0.82);
    --border: rgba(100, 180, 255, 0.18);
    --shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    --nav-link: #ffffff;
    --white: #ffffff;
    --black: #000000;

    --surface-dark: #211a29;
    --surface-darker: #0f0c29;
    --card-heading: #e0e0ff;
    --item-bg-muted: rgba(64, 196, 255, 0.12);
    --item-bg-hover: rgba(64, 196, 255, 0.4);

    --header-bg: #051741;
    --header-bg-dark: #041233;
    --nav-dropdown-grad: linear-gradient(to bottom, #051741, #041233);
    --header-line: #ffffff;
    --header-after: rgba(255, 255, 255, 0.5);
    --header-nav: rgba(255, 255, 255, 0.08);

    --scrollbar-bg: #0f0c29;
    --scrollbar-thumb: #1e1b41;
    --scrollbar-hover: #5967ff;

    --btn-grad-start: #3a9eff;
    --btn-grad-end: #7a5aff;
    --name-background: #2b064d;
    --name-background1: hsl(268, 69%, 47%);
    --skills-before: #202049;
    --skills-before1: #2e2e50;
}

.light-theme {
    --bg-gradient: linear-gradient(135deg, #f0f4f8, #e2e8f0, #d1d9e6);
    --text: #1e293b;
    --text-muted: #334155;
    --text-bright: #1e293b;
    --primary: #0056b3;
    --primary-glow: rgba(0, 86, 179, 0.15);
    --accent: #553c9a;
    --card: rgba(255, 255, 255, 0.9);
    --border: rgba(0, 86, 179, 0.15);
    --shadow: 0 12px 48px rgba(0, 0, 0, 0.08);
    --nav-link: #000000;

    --surface-dark: #ffffff;
    --surface-darker: #f8fafc;
    --card-heading: #1e293b;
    --item-bg-muted: rgba(0, 86, 179, 0.08);
    --item-bg-hover: rgba(0, 86, 179, 0.2);

    --header-bg: #ffffff;
    --header-bg-dark: #f8fafc;
    --nav-dropdown-grad: linear-gradient(to bottom, #ffffff, #f1f5f9);
    --header-line: #0056b3;
    --header-after: rgba(0, 86, 179, 0.2);
    --header-nav: rgba(0, 0, 0, 0.05);

    --scrollbar-bg: #f1f5f9;
    --scrollbar-thumb: #cbd5e0;
    --scrollbar-hover: #0056b3;

    --btn-grad-start: #0056b3;
    --btn-grad-end: #553c9a;
    --name-background: #0056b3;
    --name-background1: #553c9a;
    --skills-before: #e2e8f0;
    --skills-before1: #cbd5e0;
}


.section-sidebar {
  position: fixed;
  z-index: 1000;
  top: 40%;
  left: 24px;
  transform: translateY(-50%);
  user-select: none;
  touch-action: none;
  transition: all 0.3s ease;
}

.sidebar-inner {
  background: var(--card);
  backdrop-filter: blur(14px) saturate(160%);
  border-radius: 16px;
  padding: 1.4rem 1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: default;
  min-width: 180px;
}

.drag-handle {
  text-align: center;
  font-size: 1.1rem;
  color: var(--primary); 
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
}

.drag-handle:hover {
  color: var(--accent);
}

.mobile-bottom-nav {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: var(--card);
  backdrop-filter: blur(16px);
  border-radius: 999px;
  padding: 8px 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  gap: 10px;
  max-width: 90vw;
  overflow-x: auto;
  scrollbar-width: none;
}

.mobile-bottom-nav::-webkit-scrollbar { 
  display: none; 
}

.mobile-pill {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--item-bg-muted);
  color: var(--text-muted);
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}

.mobile-pill:hover,
.mobile-pill.active {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 12px var(--primary-glow);
}

.light-theme {
  --item-bg-muted: rgba(0, 86, 179, 0.1);
  --text-muted: #334155;
}








/* --- Sidebar Links & Interaction --- */

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--text-muted); 
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
}

.sidebar-link .dot {
  width: 10px;
  height: 10px;
  background: var(--primary); 
  border-radius: 50%;
  opacity: 0.35;
  transition: all 0.3s;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  color: var(--nav-link);
  background: var(--item-bg-muted);
  transform: translateX(4px);
}

.sidebar-link.active {
  color: var(--nav-link);
  background: var(--item-bg-hover);
  box-shadow: 0 0 16px var(--primary-glow);
}

.sidebar-link.active .dot {
  opacity: 1;
  transform: scale(1.5);
  box-shadow: 0 0 14px var(--primary-glow);
}

/* --- Dragging Effects --- */
.section-sidebar.dragging .sidebar-inner {
  box-shadow: 0 20px 60px var(--box-shadow1); 
  opacity: 0.92;
}

/* --- Performance Optimization --- */
.section-sidebar, 
.mobile-bottom-nav, 
.section-sidebar *, 
.mobile-bottom-nav * {
  transition: none; 
}











/* --- Large Desktop Styles --- */
@media (min-width: 1025px) {
  .section-sidebar {
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
  }

  .sidebar-inner {
    background: var(--card); 
    backdrop-filter: blur(14px) saturate(160%);
    border-radius: 16px;
    padding: 1.4rem 1rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    min-width: 180px;
  }

  .drag-handle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--primary); 
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
    cursor: move;
  }

  .drag-handle:hover {
    color: var(--accent);
  }

  .mobile-bottom-nav {
    display: none;
  }
}

/* --- Tablet / Small Desktop Styles --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .section-sidebar {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  .sidebar-inner {
    min-width: 160px;
    padding: 1.2rem 0.9rem;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .sidebar-link {
    font-size: 0.98rem;
    padding: 9px 14px;
    gap: 10px;
    color: var(--text-muted);
  }

  .sidebar-link .dot {
    width: 9px;
    height: 9px;
    background: var(--primary);
  }

  .drag-handle {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
  }
  
  .mobile-bottom-nav {
    display: none;
  }
}















@media (max-width: 767px) {
  .section-sidebar {
    display: none;
  }

  .mobile-bottom-nav {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    background: var(--card);
    backdrop-filter: blur(16px);
    border-radius: 999px;
    padding: 10px 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: flex;
    gap: 12px;
    max-width: 92vw;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    
    will-change: transform !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: pan-x !important;
  }

  .sidebar-link {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    pointer-events: auto !important;
  }

  .sidebar-link:active {
    transform: scale(0.95);
    opacity: 0.8;
    transition: transform 0.1s ease;
  }

  .mobile-bottom-nav::-webkit-scrollbar {
    display: none;
  }

  .mobile-pill {
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--item-bg-muted);
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
  }

  .mobile-pill:hover,
  .mobile-pill.active {
    background: var(--item-bg-hover);
    color: var(--nav-link); 
    transform: scale(1.08);
  }

  .mobile-pill.active {
    box-shadow: 0 0 16px var(--primary-glow);
  }
}







/* Small Phones Only (Ultra-Tight Layout) */
@media (max-width: 500px) {
  .mobile-bottom-nav {
    bottom: 10px;       
    padding: 4px 6px;   
    gap: 2px;           
    max-width: 98vw;    
    border-radius: 50px;

    will-change: transform !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: pan-x !important;
  }

  .mobile-pill {
    padding: 4px 8px;   
    font-size: 0.72rem; 
    font-weight: 600;   
    letter-spacing: -0.02em; 
    border-radius: 40px;
  }

  .mobile-pill:hover,
  .mobile-pill.active {
    transform: scale(1.02); 
    background: var(--item-bg-hover);
  }


  .sidebar-link {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  .sidebar-link:active {
    transform: scale(0.95);
    opacity: 0.8;
    transition: transform 0.1s ease;
  }
}