.flu-nav-toggler {
      position: relative;
      width: var(--navbar-control-size);
      height: var(--navbar-control-size);
      padding: 0;
      border-radius: var(--navbar-control-radius);
      background: rgba(187, 134, 252, 0.06);
      border: 1px solid rgba(187, 134, 252, 0.12);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
      transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .flu-nav-toggler:hover {
      background: rgba(187, 134, 252, 0.14);
      border-color: rgba(187, 134, 252, 0.35);
      color: #d4b4ff;
    }

    .flu-nav-toggler i {
      font-size: var(--navbar-control-icon-size);
      color: inherit;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .flu-nav-toggler:hover i {
      filter: none;
    }

    .flu-bars {
      position: relative;
      width: 18px;
      height: 14px;
      display: inline-block;
    }

    .flu-bars-line {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: currentColor;
      transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.15s ease, top 0.22s ease;
    }

    .flu-bars-line:nth-child(1) { top: 0; }
    .flu-bars-line:nth-child(2) { top: 6px; }
    .flu-bars-line:nth-child(3) { top: 12px; }

    .flu-nav-toggler.is-active .flu-bars-line:nth-child(1) {
      top: 6px;
      transform: rotate(45deg);
    }

    .flu-nav-toggler.is-active .flu-bars-line:nth-child(2) {
      opacity: 0;
    }

    .flu-nav-toggler.is-active .flu-bars-line:nth-child(3) {
      top: 6px;
      transform: rotate(-45deg);
    }

    /* Light mode overrides */
    html.light-mode .flu-nav-toggler {
      color: var(--brand-color-light, #E1306C) !important;
      background: rgba(225, 48, 108, 0.05);
      border-color: rgba(225, 48, 108, 0.15);
    }

    html.light-mode .flu-nav-toggler:hover {
      background: rgba(225, 48, 108, 0.12);
      border-color: rgba(225, 48, 108, 0.35);
      color: #be123c !important;
    }

    html.light-mode .flu-nav-toggler i {
      color: inherit !important;
    }

    html.light-mode .flu-nav-toggler:hover i {
      color: inherit !important;
    }

    /* Accessibility focus — matches notif-bell */
    .flu-nav-toggler:focus {
      box-shadow: none !important;
      outline: none;
    }