.tabs { display: inline-flex; gap: .3rem; padding: .3rem; background: var(--m-surface); border-radius: var(--m-r-sm); max-width: 100%; }
.tab {
  padding: .55em 1.2em;
  border: 0;
  border-radius: calc(var(--m-r-sm) - 1px);
  background: transparent;
  color: var(--m-fg-3);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: color var(--m-dur), background var(--m-dur);
}
.tab:hover { color: var(--m-fg); }
.tab.selected { background: var(--m-bg); color: var(--m-fg); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tabs-line { display: flex; background: none; padding: 0; border-radius: 0; border-bottom: 2px solid var(--m-border); width: auto; }
.tabs-line .tab { border-radius: 0; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.tabs-line .tab.selected { background: transparent; box-shadow: none; color: var(--m-primary); border-bottom-color: var(--m-primary); }
.tabs-v { flex-direction: column; align-items: stretch; }
.tabs-line.tabs-v {
  border-bottom: 0;
  border-left: 2px solid var(--m-border);
}
.tabs-line.tabs-v .tab {
  margin-bottom: 0;
  margin-left: -2px;
  border-bottom: 0;
  border-left: 2px solid transparent;
  text-align: left;
  justify-content: flex-start;
}
.tabs-line.tabs-v .tab.selected {
  border-bottom-color: transparent;
  border-left-color: var(--m-primary);
}