.tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0.5rem 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tab {
  border: 0;
  background: transparent;
  color: var(--muted, #9bb4c4);
  padding: 0.65rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--text, #e8f1f5); }

.tab.active {
  color: var(--accent, #3db8a6);
  border-bottom-color: var(--accent, #3db8a6);
  font-weight: 600;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabIn 0.2s ease; }

@keyframes tabIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}