nav.tabs { gap: 4px; padding: 3px; }
  nav.tabs a { padding: 10px 11px; font-size: var(--fs-base); }
  nav.tabs a[data-tab="dashboard"] { margin-left: 6px; }
  .dgoal-strip-wrap { margin: 0 4px; padding: 0; }
  .dgoal-strip { gap: 9px; }
  .dgoal-pill { padding: 5px 13px; gap: 2px; }
  .dgoal-pill .dgoal-fl { font-size: var(--fs-2xl); }
  .dgoal-pill .dgoal-v { font-size: var(--fs-sm); }
   
  .dgoal-pill .dgoal-v { display: inline-block; min-width: 5.4ch; text-align: center; font-variant-numeric: tabular-nums; }

   
  @media (max-width: 1219px) {
    header { flex-wrap: wrap; row-gap: 8px; }
     
    .header-right { flex: 1 1 100%; min-width: 0; }
    nav.tabs {
       
      flex: 1 1 auto; min-width: 0; overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;  
       
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
      mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }
    nav.tabs::-webkit-scrollbar { display: none; }
    nav.tabs a { flex: 0 0 auto; white-space: nowrap; }
  }

   
  @media (min-width: 1220px) {
    .dgoal-strip-wrap {
      flex-shrink: 0;
       
      padding: 0 30px;
    }
    .header-right {
       
      flex: 0 1 auto; min-width: 0;
    }
    nav.tabs {
       
      flex: 0 0 auto; min-width: 0; overflow: visible;
      -webkit-mask-image: none; mask-image: none;
    }
    header { flex-wrap: wrap; row-gap: 8px; }
  }
   
  @media (min-width: 1220px) {
    .dgoal-strip-wrap { padding: 0 2px; margin: 0; }
     
    .dgoal-strip { gap: 5px; transform: translateX(-47px); }
    .dgoal-pill { padding: 5px 5px; }
     
    nav.tabs { gap: 2px; padding: 2px; }
    nav.tabs a { padding: 10px 4px; }
  }