header {
        background: var(--head);
        color: #fff;
        padding: 20px 24px;
        border-radius: var(--r);
        margin-bottom: var(--gap);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
      }
      header h1 {
        font-size: 20px;
        font-weight: 600;
      }
      header .sub {
        font-size: 12px;
        opacity: 0.75;
        margin-top: 2px;
        max-width: 640px;
      }
      .filters {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .filters label {
        font-size: 12px;
        opacity: 0.75;
      }
      .filters .f {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .filters select,
      .filters input[type="date"],
      .filters button {
        padding: 6px 10px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 13px;
        font-family: inherit;
      }
      .filters button {
        cursor: pointer;
      }
      .filters button:hover {
        background: rgba(255, 255, 255, 0.2);
      }
      .filters select option {
        background: var(--head);
        color: #fff;
      }
      .viewbar {
        margin-bottom: var(--gap);
        width: 100%;
      }
      .seg {
        display: flex;
        width: 100%;
        max-width: none;
        background: #e9ecef;
        border-radius: 12px;
        padding: 4px;
        gap: 4px;
      }
      .seg button {
        flex: 1 1 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        padding: 10px 12px;
        font: inherit;
        font-size: 14px;
        color: var(--tx2);
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .seg button.on {
        background: #fff;
        color: var(--tx);
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
      }
      .filters input[type="date"] {
        color-scheme: dark;
      }
      @media (max-width: 768px){
        header {
          flex-direction: column;
          align-items: stretch;
          padding: 14px;
          gap: 10px;
        }
        header > div {
          min-width: 0;
          max-width: 100%;
        }
        header h1 {
          font-size: 17px;
          line-height: 1.3;
          overflow-wrap: anywhere;
        }
        header .sub {
          font-size: 11px;
          max-width: 100%;
          overflow-wrap: anywhere;
        }
        .filters {
          width: 100%;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
        .filters .f {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 4px;
          min-width: 0;
        }
        .filters select,
        .filters input[type="date"],
        .filters button {
          width: 100%;
          min-width: 0;
          height: 40px;
        }
        .seg {
          max-width: none;
        }}

      @media print{
        .filters {
          display: none;
        }}