.tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      border-bottom: 1px solid #e6e6e6;
      margin-bottom: 1rem;
      padding: 0;
      list-style: none;
    }

    .tab {
	  padding: 0.5rem 1rem;
	  cursor: pointer;
	  margin-bottom: -1px;
	  border: 1px solid transparent;
	  border-bottom: none;
	  transition: background 0.3s;
	}
    .tab:hover,
    .tab:focus {
      background: #e0e0e0;
      color: #111;
    }
    .tab[aria-selected="true"] {
      background: #fff;
      border: 1px solid #ccc;
      border-bottom-color: #fff;
      color: #000;
      font-weight: 600;
    }

    .tab-panel {
      display: none;
      padding: 1rem 0;
    }
    .tab-panel[data-active="true"] {
      display: block;
    }

    /* ---- Responsive behavior ---- */
    .tab-select {
      display: none;
      margin-bottom: 1rem;
      width: 100%;
    }

    @media (max-width: 600px) {
      .tabs {
        display: none;
      }
      .tab-select {
        display: block;
      }
    }