
    /* Note Le · Polished compact header | light-only, no JS changes */
    .nl-header {
      --nl-ink: #182440;
      --nl-purple: #595bf0;
      --nl-border: #e9ecf6;
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(255, 255, 255, .97);
      border-bottom: 1px solid var(--nl-border);
      box-shadow: 0 6px 26px rgba(37, 46, 100, .045);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }

    .nl-header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, #d9dcff 35%, #c6caff 65%, transparent);
      pointer-events: none;
    }

    .nl-bar {
      max-width: 1920px;
      min-height: 76px;
      margin: 0 auto;
      padding: 11px clamp(16px, 2.55vw, 46px);
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr) max-content;
      align-items: center;
      gap: clamp(16px, 2vw, 32px);
    }

    .nl-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .nl-header .nl-symbol {
      width: 45px;
      height: 45px;
      min-width: 45px;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      background: linear-gradient(145deg, #8585ff 0%, #5c5df4 46%, #484cdb 100%);
      box-shadow: 0 7px 16px rgba(77, 79, 220, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
      color: #fff;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -.085em;
    }

    .nl-symbol::before {
      content: "";
      position: absolute;
      width: 58px;
      height: 58px;
      right: -38px;
      top: -34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .22);
    }

    .nl-brand-name {
      font-size: 24px;
      line-height: 1.08;
      font-weight: 800;
      letter-spacing: -.085em;
      color: var(--nl-ink);
    }

    .nl-brand-name span {
      color: #6868f3
    }

    .nl-brand-desc {
      margin-top: 5px;
      font-size: 9px;
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: .1em;
      color: #9aa7bf;
    }

    .nl-workspace {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 9px;
      min-width: 0;
      width: 100%;
    }

    .nl-header .nl-projects {
      display: flex;
      align-items: center;
      flex: 1 1 0;
      width: 100%;
      min-width: 0;
      max-width: none;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      padding: 2px 1px;
      gap: 7px;
      scroll-padding-inline: 8px;
    }

    .nl-header .nl-projects .document-tab {
      min-width: 160px;
      max-width: 226px;
      min-height: 45px;
      padding: 3px 5px 3px 5px;
      border: 1px solid #e3e8f7;
      border-radius: 13px;
      background: #fbfcff;
      box-shadow: none;
      transition: background .18s, border-color .18s, box-shadow .18s;
    }

    .nl-header .nl-projects .document-tab:hover {
      background: #f7f8ff;
      border-color: #c9cdfc
    }

    .nl-header .nl-projects .document-tab.active {
      background: linear-gradient(115deg, #f3f3ff 0%, #f9faff 100%);
      border-color: #c5c9ff;
      box-shadow: 0 3px 12px rgba(92, 93, 230, .09), inset 3px 0 0 #6365f1;
    }

    .nl-header .nl-projects .document-tab-main {
      gap: 8px;
      padding: 4px 3px 4px 6px
    }

    .nl-header .nl-projects .document-tab-icon {
      width: 31px;
      height: 31px;
      border-radius: 9px;
      border: 1px solid #e4e6ff;
      background: #fff;
      color: #5b5feb;
    }

    .nl-header .nl-projects .document-tab-name {
      font-size: 11.5px;
      color: #26304f
    }

    .nl-header .nl-projects .document-tab-sub {
      font-size: 9px;
      color: #8996af
    }

    .nl-header .nl-projects .document-tab-delete {
      width: 29px;
      height: 30px;
      border-radius: 9px;
      color: #a5aec0;
    }

    .nl-header .nl-projects .document-tab-delete:hover {
      color: #d62e50;
      background: #ffecef;
    }

    .nl-header .nl-add {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 43px;
      height: 43px;
      padding: 0 15px;
      border-radius: 12px;
      flex: none;
      background: linear-gradient(135deg, #6668fb, #5457e8);
      color: white;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid #575ce9;
      box-shadow: 0 5px 13px rgba(85, 89, 235, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
      transition: transform .16s, box-shadow .16s, filter .16s;
    }

    .nl-header .nl-add:hover:not(:disabled) {
      transform: translateY(-1px);
      filter: brightness(1.045);
      box-shadow: 0 8px 16px rgba(85, 89, 235, .24);
    }

    .nl-header .nl-add svg {
      width: 17px;
      height: 17px
    }

    .nl-separator {
      width: 1px;
      height: 28px;
      flex: none;
      margin: 0 3px;
      background: #e7ebf5
    }

    .nl-views {
      display: flex;
      align-items: center;
      min-width: 0;
      flex: none
    }

    .nl-header .nl-views .view-tab-group {
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 4px;
      border-radius: 13px;
      background: #f2f4fa;
      border: 1px solid #e9ecf5;
    }

    .nl-header .nl-views .view-tab {
      min-height: 35px;
      padding: 0 12px;
      gap: 7px;
      border-radius: 10px;
      font-size: 11px;
      color: #8994aa;
      font-weight: 800;
    }

    .nl-header .nl-views .view-tab:hover:not(.active) {
      color: #4c5590;
      background: #e9edfa
    }

    .nl-header .nl-views .view-tab.active {
      background: #fff;
      color: #5559ec;
      box-shadow: 0 2px 9px rgba(45, 51, 113, .095);
    }

    .nl-header .nl-views .tab-count {
      padding: 2px 6px;
      border-radius: 6px;
      font-size: 10px;
      background: #e4e8f1;
      color: #77829b;
    }

    .nl-header .nl-views .view-tab.active .tab-count {
      background: #ebedff;
      color: #5659e8
    }

    .nl-batch {
      flex: none
    }

    .nl-header .nl-batch .nl-generate {
      min-height: 43px;
      height: 43px;
      padding: 0 14px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 800;
      gap: 8px;
      flex: none;
      color: #3e486a;
      background: white;
      border: 1px solid #dfe4f0;
      box-shadow: 0 2px 5px rgba(35, 49, 91, .025);
    }

    .nl-header .nl-batch .nl-generate:hover:not(:disabled) {
      background: #f8f8ff;
      border-color: #bfc5fa;
      color: #4e51df;
    }

    .nl-header .nl-batch .nl-generate svg {
      color: #6567eb;
      width: 16px;
      height: 16px
    }

    .nl-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      min-width: 0
    }

    .nl-header .nl-settings {
      min-height: 43px;
      height: 43px;
      padding: 0 15px;
      border-radius: 12px;
      border: 1px solid #ebedf6;
      background: #f6f7fb;
      color: #55617b;
      font-size: 11px;
      font-weight: 800;
      box-shadow: none;
      gap: 8px;
    }

    .nl-header .nl-settings:hover {
      background: #edf0fc;
      border-color: #dce1f8;
      color: #5154d8
    }

    .nl-right .header-jobs {
      white-space: nowrap;
      font-size: 10px
    }

    .nl-label-short,
    .nl-generate-short,
    .nl-generate-tiny {
      display: none
    }

    .nl-views.hidden,
    .nl-batch.hidden {
      display: none !important
    }

    /* The PDF tab row can scroll without enlarging the entire header. */
    .nl-projects::-webkit-scrollbar {
      display: none
    }

    @media (max-width:1460px) and (min-width:1181px) {
      .nl-bar {
        gap: 14px;
        padding-inline: 22px
      }

      .nl-brand-name {
        font-size: 22px
      }

      .nl-brand-desc {
        font-size: 8px
      }

      .nl-header .nl-projects {
        max-width: none
      }

      .nl-header .nl-views .view-tab {
        padding: 0 9px
      }

      .nl-header .nl-add {
        padding-inline: 12px
      }

      .nl-separator {
        margin-inline: 0
      }
    }

    @media (max-width:1180px) {
      .nl-bar {
        grid-template-columns: minmax(0, 1fr) max-content;
        gap: 7px 12px;
        padding: 9px 20px
      }

      .nl-brand {
        grid-column: 1;
        grid-row: 1
      }

      .nl-right {
        grid-column: 2;
        grid-row: 1
      }

      .nl-workspace {
        grid-column: 1/-1;
        grid-row: 2;
        justify-content: flex-start;
        gap: 8px
      }

      .nl-header .nl-projects {
        flex: 1 1 0;
        min-width: 0;
        max-width: none
      }

      .nl-bar {
        min-height: 0
      }
    }

    @media (max-width:650px) {
      .nl-bar {
        padding: 8px 13px;
        row-gap: 8px
      }

      .nl-brand {
        gap: 9px
      }

      .nl-header .nl-symbol {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 11px;
        font-size: 20px
      }

      .nl-brand-name {
        font-size: 21px
      }

      .nl-brand-desc {
        font-size: 7.2px;
        letter-spacing: .075em;
        margin-top: 3px
      }

      .nl-header .nl-settings {
        height: 36px;
        min-height: 36px;
        padding: 0 10px;
        font-size: 10px
      }

      .nl-right .header-jobs,
      .nl-separator {
        display: none
      }

      .nl-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'projects add' 'views batch';
        gap: 7px;
      }

      .nl-header .nl-projects {
        min-height: 39px;
        width: 100%;
        max-width: 100%;
        padding: 0
      }

      .nl-header .nl-projects .document-tab {
        min-height: 38px;
        min-width: 145px;
        max-width: 210px;
        padding: 2px 4px
      }

      .nl-header .nl-projects .document-tab-icon {
        height: 28px;
        width: 28px
      }

      .nl-header .nl-add {
        grid-area: add;
        min-height: 38px;
        height: 38px;
        padding: 0 11px;
        border-radius: 10px;
        font-size: 11px
      }

      .nl-views {
        grid-area: views;
        min-width: 0
      }

      .nl-header .nl-views .view-tab-group {
        gap: 1px;
        padding: 3px;
        border-radius: 11px
      }

      .nl-header .nl-views .view-tab {
        min-height: 31px;
        padding: 0 9px;
        font-size: 10px;
        gap: 5px
      }

      .nl-label-long,
      .nl-generate-long {
        display: none
      }

      .nl-label-short,
      .nl-generate-short {
        display: inline
      }

      .nl-batch {
        grid-area: batch;
        justify-self: end
      }

      .nl-header .nl-batch .nl-generate {
        height: 36px;
        min-height: 36px;
        padding: 0 10px;
        font-size: 10px;
        gap: 5px;
        border-radius: 10px
      }
    }

    @media (max-width:365px) {
      .nl-brand-desc {
        display: none
      }

      .nl-header .nl-settings {
        width: 36px;
        padding: 0;
        justify-content: center
      }

      .nl-settings-label {
        display: none
      }

      .nl-header .nl-views .view-tab {
        padding: 0 5px;
        font-size: 9px;
        gap: 3px
      }

      .nl-header .nl-views .view-tab svg {
        width: 13px;
        height: 13px
      }

      .nl-header .nl-views .tab-count {
        padding: 2px 4px
      }

      .nl-generate-short {
        display: none
      }

      .nl-generate-tiny {
        display: inline
      }

      .nl-header .nl-batch .nl-generate {
        padding: 0 8px
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .nl-header *,
      .nl-header *::before,
      .nl-header *::after {
        transition: none !important
      }
    }

    /* Multi-PDF switcher: always accessible, never clips into adjacent actions. */
    .nl-doc-switcher {
      display: flex;
      align-items: center;
      gap: 5px;
      flex: 1 1 0;
      min-width: 0;
      position: relative
    }

    .nl-header .nl-projects {
      scroll-behavior: smooth;
      overscroll-behavior-x: contain
    }

    .nl-tab-arrow {
      height: 34px;
      width: 25px;
      flex: 0 0 25px;
      display: grid;
      place-items: center;
      border: 1px solid #e5e8f6;
      border-radius: 9px;
      background: #fff;
      color: #6066c9;
      cursor: pointer;
      transition: background .15s, color .15s
    }

    .nl-tab-arrow:hover:not(:disabled) {
      background: #f0f1ff;
      color: #4145ba
    }

    .nl-tab-arrow:disabled {
      opacity: .27;
      cursor: default
    }

    .nl-tab-arrow svg {
      width: 14px;
      height: 14px
    }

    .nl-header .nl-workspace {
      min-width: 0
    }

    @media(max-width:650px) {
      .nl-doc-switcher {
        grid-area: projects;
        min-width: 0
      }

      .nl-tab-arrow {
        height: 30px;
        width: 22px;
        flex-basis: 22px
      }
    }
  