/* ── TABS MOTEUR ── */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  padding: 10px 6px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: all .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.tab.active { background: var(--green); color: #fff; font-weight: 600; }
.tab:hover:not(.active) { background: var(--accent); color: var(--text); }

/* ── PANELS ── */
.panel { display: none; animation: fadeUp .22s ease; }
.panel.active { display: block; }

/* ── AUTH TABS ── */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg-top);
}

.auth-tab {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, box-shadow .15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active { color: var(--green); font-weight: 600; border-bottom-color: var(--green); }

.auth-panel { display: none; }
.auth-panel.active { display: block; }