.modal-content {
    background: var(--bg-dark) !important;
    border: 1.5px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg), 0 0 30px rgba(124, 58, 237, 0.1);
    color: var(--text-primary);
  }
  .modal-header {
    border-bottom: 1px solid var(--border-subtle) ;
    background: transparent ;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 ;
  }
  .modal-title { color: var(--text-primary) ; font-weight: 600; }
  .modal-body { 
    color: #ffffff;
    opacity: 1 ;
  }
  .modal-footer {
    border-top: 1px solid var(--border-subtle) ;
    background: transparent ;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) ;
  }
  .modal-backdrop { background-color: rgba(0,0,0,0.7) !important; }
  .btn-close { filter: invert(1) opacity(0.5); }
  .btn-close:hover { filter: invert(1) opacity(1); }
  
  /* ---- OFFCANVAS ---- */
  .offcanvas {
    background: var(--bg-dark) !important;
    border-right: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    transition: transform 0.3s ease-in-out !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.5) !important;
    width: 380px !important;
  }
  .offcanvas.offcanvas-start {
    transform: translateX(-100%);
  }
  .offcanvas.offcanvas-start.show,
  .offcanvas.offcanvas-start.showing {
    transform: translateX(0);
  }
  .offcanvas-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    background: transparent !important;
    padding: 1.25rem 1.5rem;
  }
  .offcanvas-title { color: var(--text-primary) !important; font-weight: 600; }
  .offcanvas-body {
    padding: 1.25rem 1.5rem;
  }
  .offcanvas-backdrop {
    background-color: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }