* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
  }

  html {
      scroll-behavior: smooth
  }

  body {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
      overflow-x: hidden
  }

  /* ===== DARK MODE ===== */
  .dark body {
      background: #060912;
      color: #e2e8f0
  }

  html:not(.dark) body {
      background: #f1f5f9;
      color: #1e293b
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
      width: 6px;
      height: 6px
  }

  .dark ::-webkit-scrollbar-track {
      background: #0a0e1a
  }

  .dark ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 3px
  }

  html:not(.dark) ::-webkit-scrollbar-track {
      background: #e2e8f0
  }

  html:not(.dark) ::-webkit-scrollbar-thumb {
      background: #94a3b8;
      border-radius: 3px
  }

  /* Glass */
  .dark .glass {
      background: rgba(17, 24, 39, 0.7);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .glass {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 0, 0, 0.08)
  }

  /* Sidebar - ALWAYS on top */
  .dark .sidebar-bg {
      background: rgba(6, 9, 18, 0.98);
      border-right: 1px solid rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .sidebar-bg {
      background: rgba(255, 255, 255, 0.98);
      border-right: 1px solid rgba(0, 0, 0, 0.08)
  }

  /* Text */
  .dark .text-heading {
      color: #ffffff
  }

  html:not(.dark) .text-heading {
      color: #0f172a
  }

  .dark .text-sub {
      color: #9ca3af
  }

  html:not(.dark) .text-sub {
      color: #64748b
  }

  .dark .text-muted {
      color: #6b7280
  }

  html:not(.dark) .text-muted {
      color: #94a3b8
  }

  .dark .text-body {
      color: #d1d5db
  }

  html:not(.dark) .text-body {
      color: #334155
  }

  /* Borders */
  .dark .border-theme {
      border-color: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .border-theme {
      border-color: rgba(0, 0, 0, 0.08)
  }

  /* Inputs */
  .dark .input-theme {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
      color: #e2e8f0
  }

  html:not(.dark) .input-theme {
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.1);
      color: #1e293b
  }

  /* Hover */
  .dark .hover-theme:hover {
      background: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .hover-theme:hover {
      background: rgba(0, 0, 0, 0.04)
  }

  /* Badge BG */
  .dark .badge-bg {
      background: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .badge-bg {
      background: rgba(0, 0, 0, 0.04)
  }

  /* Progress */
  .dark .progress-bg {
      background: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .progress-bg {
      background: rgba(0, 0, 0, 0.08)
  }

  /* Card hover */
  .dark .card-hover:hover {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(76, 110, 245, 0.3)
  }

  html:not(.dark) .card-hover:hover {
      background: rgba(76, 110, 245, 0.02);
      border-color: rgba(76, 110, 245, 0.2)
  }

  /* Gradient Border */
  .gradient-border {
      position: relative
  }

  .gradient-border::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(76, 110, 245, 0.3), rgba(32, 201, 151, 0.3));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none
  }

  html:not(.dark) .gradient-border::before {
      background: linear-gradient(135deg, rgba(76, 110, 245, 0.15), rgba(32, 201, 151, 0.15))
  }

  /* Glow */
  .dark .crypto-glow {
      box-shadow: 0 0 15px rgba(76, 110, 245, 0.15), 0 0 30px rgba(76, 110, 245, 0.05)
  }

  html:not(.dark) .crypto-glow {
      box-shadow: 0 4px 20px rgba(76, 110, 245, 0.08)
  }

  /* Cards */
  .stat-card {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
  }

  .stat-card:hover {
      transform: translateY(-4px)
  }

  .project-card {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
  }

  .project-card:hover {
      transform: translateY(-6px)
  }

  .dark .project-card:hover {
      box-shadow: 0 20px 60px rgba(76, 110, 245, 0.15)
  }

  html:not(.dark) .project-card:hover {
      box-shadow: 0 20px 60px rgba(76, 110, 245, 0.1)
  }

  /* Sidebar Links */
  .sidebar-link {
      transition: all 0.3s ease;
      position: relative
  }

  .sidebar-link::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 0;
      background: linear-gradient(180deg, #4c6ef5, #20c997);
      border-radius: 0 4px 4px 0;
      transition: height 0.3s ease
  }

  .sidebar-link:hover::before,
  .sidebar-link.active::before {
      height: 70%
  }

  .dark .sidebar-link.active {
      background: rgba(76, 110, 245, 0.1);
      color: #748ffc
  }

  html:not(.dark) .sidebar-link.active {
      background: rgba(76, 110, 245, 0.08);
      color: #4263eb
  }

  .dark .sidebar-link {
      color: #9ca3af
  }

  .dark .sidebar-link:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.05)
  }

  html:not(.dark) .sidebar-link {
      color: #64748b
  }

  html:not(.dark) .sidebar-link:hover {
      color: #0f172a;
      background: rgba(0, 0, 0, 0.04)
  }

  /* Page Loader */
  .page-loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.5s, visibility 0.5s
  }

  .dark .page-loader {
      background: #060912
  }

  html:not(.dark) .page-loader {
      background: #f1f5f9
  }

  .page-loader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none
  }

  .loader-ring {
      width: 50px;
      height: 50px;
      border: 3px solid rgba(76, 110, 245, 0.1);
      border-top-color: #4c6ef5;
      border-radius: 50%;
      animation: spin 1s linear infinite
  }

  @keyframes spin {
      to {
          transform: rotate(360deg)
      }
  }

  /* Toast */
  .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 10px
  }

  .toast {
      padding: 14px 20px;
      border-radius: 12px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      animation: slideDown 0.3s ease-out;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 280px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3)
  }

  .toast-success {
      background: linear-gradient(135deg, #059669, #10b981)
  }

  .toast-error {
      background: linear-gradient(135deg, #dc2626, #ef4444)
  }

  .toast-info {
      background: linear-gradient(135deg, #4263eb, #5c7cfa)
  }

  .toast-warning {
      background: linear-gradient(135deg, #d97706, #f59e0b)
  }

  /* Notification Badge */
  .notification-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 18px;
      height: 18px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: #fff
  }

  .dark .notification-badge {
      border: 2px solid #060912
  }

  html:not(.dark) .notification-badge {
      border: 2px solid #f1f5f9
  }

  /* Overlay */
  .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s
  }

  .overlay.active {
      opacity: 1;
      visibility: visible
  }

  /* Tooltip */
  .tooltip-custom {
      position: relative
  }

  .tooltip-custom::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(5px);
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s;
      pointer-events: none;
      z-index: 100
  }

  .dark .tooltip-custom::after {
      background: #1e293b;
      color: #e2e8f0
  }

  html:not(.dark) .tooltip-custom::after {
      background: #0f172a;
      color: #e2e8f0
  }

  .tooltip-custom:hover::after {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(-5px)
  }

  /* Marquee */
  .marquee-container {
      overflow: hidden;
      white-space: nowrap
  }

  .marquee-content {
      display: inline-flex;
      animation: marquee 40s linear infinite
  }

  @keyframes marquee {
      0% {
          transform: translateX(0)
      }

      100% {
          transform: translateX(-50%)
      }
  }

  .dark .ticker-bg {
      background: rgba(6, 9, 18, 0.5)
  }

  html:not(.dark) .ticker-bg {
      background: rgba(255, 255, 255, 0.5)
  }

  /* Filter Chip */
  .filter-chip {
      transition: all 0.3s ease
  }

  .dark .filter-chip {
      color: #6b7280
  }

  html:not(.dark) .filter-chip {
      color: #94a3b8
  }

  .filter-chip.active {
      background: rgba(76, 110, 245, 0.15) !important;
      color: #748ffc !important;
      border-color: rgba(76, 110, 245, 0.3) !important
  }

  .dark .filter-chip:hover:not(.active) {
      background: rgba(255, 255, 255, 0.05);
      color: #d1d5db
  }

  html:not(.dark) .filter-chip:hover:not(.active) {
      background: rgba(0, 0, 0, 0.04);
      color: #334155
  }

  /* View Toggle */
  .view-toggle .active {
      background: rgba(76, 110, 245, 0.15) !important;
      color: #748ffc !important
  }

  /* ===== KEY FIX: Z-INDEX HIERARCHY ===== */
  /* Banner = z-0 (lowest, just content) */
  /* Filter bar = z-10 (above banner) */
  /* Header = z-30 (above everything in main) */
  /* Sidebar = z-50 (always on top) */
  /* Modals/Overlays = z-50+ */

  .featured-banner {
      position: relative;
      z-index: 0;
      overflow: hidden
  }

  .filter-bar {
      position: relative;
      z-index: 10
  }

  .project-cards-section {
      position: relative;
      z-index: 5
  }

  .countdown-digit {
      font-variant-numeric: tabular-nums
  }