/* =====================================================================
   TABS
   ===================================================================== */
.tabbar{ display: flex; gap: 6px; overflow-x: auto; margin-bottom: var(--sp-4); padding-bottom: 2px; }
.tabbar button{
  white-space: nowrap; background: var(--card); border: 1px solid var(--line); color: var(--muted); flex-shrink: 0;
}
.tabbar button.active{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tabbar.main-tabbar button{ font-size: 1em; padding: 12px 18px; }

.subtabbar{ display: flex; gap: 6px; overflow-x: auto; margin-bottom: var(--sp-4); padding-bottom: 2px; }
.subtabbar button{
  white-space: nowrap; background: transparent; border: 1px solid transparent; color: var(--muted);
  flex-shrink: 0; padding: 8px 14px; font-size: .86em; border-radius: var(--r-full);
}
.subtabbar button.active{ background: var(--accent-wash); color: var(--accent); border-color: var(--accent-wash); }

.maintabpane{ display: none; }
.maintabpane.active{ display: block; }
.tabpane{ display: none; }
.tabpane.active{ display: block; }

.role-perm-tabbar{ display: flex; gap: 6px; margin: var(--sp-3) 0; }
.perm-role-btn{
  flex: 1; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px; font-weight: 700;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.perm-role-btn.active{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.role-perm-section{ margin-top: var(--sp-4); }
.role-perm-section:first-child{ margin-top: 0; }
.role-perm-section-title{
  font-size: .78em; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); padding: 4px 0; margin-bottom: 2px;
}