/* Thanh tab trên cùng + khung chuyển trang */

.tabbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  background: linear-gradient(90deg, #16002e 0%, #0d001e 100%);
  border-bottom: 1px solid #3a0060;
  flex-shrink: 0;
}

.tab-btn {
  position: relative;
  padding: 15px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8a8aa0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.tab-btn:hover { color: #ddd; }

.tab-btn.active {
  color: #cc66ff;
  border-bottom-color: #cc00ff;
}

/* Tài khoản: đẩy sang phải cùng thanh tab */
.acct-box {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}

.acct-email {
  color: #ddd;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-link {
  color: #cc66ff;
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
  font-family: inherit;
}

.acct-link:hover { color: #ee99ff; }

.acct-link.btn { background: none; border: none; cursor: pointer; padding: 0; }

/* Mỗi trang tab. Chỉ trang .active được hiện.
   #page-tools là flex row (panel trái + phải), nên dùng flex khi active. */
.tab-page { display: none; flex: 1; min-height: 0; }
.tab-page.active { display: flex; }