/* ==========================================================================
   skinTabs.css — tab "Preview Skin | Edit Skin" di puncak Skin Editor.
   ========================================================================== */

.skin-tabs {
  display: inline-flex;
  justify-self: start;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--wb-rule, var(--border-subtle));
  border-radius: 12px;
  background: var(--wb-panel, var(--bg-surface));
}

.skin-tabs__tab {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--wb-ink-muted, var(--text-muted));
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.skin-tabs__tab:hover {
  color: var(--wb-ink, var(--text-primary));
}

.skin-tabs__tab.is-active {
  color: var(--wb-ink, var(--text-primary));
  background: var(--wb-panel-raised, var(--bg-hover));
  box-shadow: inset 0 -2px 0 var(--wb-signal, var(--accent));
}

/* Tab mengisi satu baris penuh di atas panggung dan kartu. */
@media (min-width: 980px) {
  .skin-editor {
    grid-template-areas:
      "tabs tabs"
      "preview setup";
  }
  .skin-editor > .skin-tabs { grid-area: tabs; }
}