.notif-btn, .user-btn { position: relative; }

.notif-panel, .user-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  display: none;
}
.user-panel {
  display: block;  
  min-width: 244px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card, 0px);
  box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0,0,0,0.4));
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  pointer-events: none;
}
 
.notif-panel {
  width: 440px;
  max-width: calc(100vw - 24px);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card, 0px);
  box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0,0,0,0.4));
  overflow: hidden;
  padding: 0;
}
 
.notif-panel .p3-notif-panel {
  width: 100%;
  max-width: none;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
 
.notif-panel .p3-notif-all { display: none; }
 
.notif-panel > .p3-notif-head {
  padding: 12px 19px 9px;
  border-bottom: none;
}
 
.notif-panel .p3-notif-list {
  height: 372px;
  max-height: 372px;
  border-top: 1px solid var(--c-border-light);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}
 
.notif-panel .p3-notif-list::-webkit-scrollbar { width: 5px; }
.notif-panel .p3-notif-list::-webkit-scrollbar-track { background: transparent; margin: 0; }
.notif-panel .p3-notif-list::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; border: none; }
.notif-panel .p3-notif-list::-webkit-scrollbar-thumb:hover { background: var(--c-text-tertiary); }
 
.notif-panel .p3-notif-item { padding-right: 12px; }
.notif-panel .p3-notif-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.notif-panel.open { display: block; }
.user-panel.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
  pointer-events: auto;
}

 
.p3-notif-panel {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card, 0px);
  box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0,0,0,0.4));
  overflow: hidden;
}
.p3-notif-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-sm) 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-primary);
  border-bottom: 1px solid var(--c-border-light);
}
.p3-notif-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--c-danger, #EF4444);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.p3-notif-mark {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.p3-notif-mark:hover { color: var(--c-primary-text); border-color: var(--c-primary-text); }
.p3-notif-all {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-primary-text);
  text-decoration: none;
}
.p3-notif-mark + .p3-notif-all { margin-left: 0; }
.p3-notif-all:hover { text-decoration: underline; }

.p3-notif-list { max-height: 420px; overflow-y: auto; }
.p3-notif-item {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 12px;
  border-bottom: 1px solid var(--c-border-light);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.p3-notif-item:last-child { border-bottom: none; }
.p3-notif-item:hover { background: var(--c-hover); }
.p3-notif-item.unread { background: var(--c-primary-dim, rgba(59,130,246,.08)); }
.p3-notif-item.unread:hover { background: var(--c-bg-card-hover); }
.p3-notif-item.cross-role { opacity: .92; }

.p3-notif-ico {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--c-bg-card-alt);
  color: var(--c-text-secondary);
}
.p3-notif-ico svg { width: 16px; height: 16px; }
.p3-notif-ico.approval { background: var(--c-primary-dim, rgba(59,130,246,.14)); color: var(--c-primary-text); }
.p3-notif-ico.warning  { background: var(--c-warning-dim, rgba(245,158,11,.14)); color:var(--c-warning-text); }
.p3-notif-ico.comment  { background: var(--c-info-dim); color: var(--c-info); }

.p3-notif-body { flex: 1; min-width: 0; display: block; }
.p3-notif-row1 { display: flex; align-items: baseline; gap: 8px; }
.p3-notif-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p3-notif-time { flex: none; font-size: 12px; color: var(--c-text-muted, #5A6B80); }
.p3-notif-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-secondary);
}
.p3-notif-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.p3-notif-chain, .p3-notif-owner {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12px;
  line-height: 16px;
}
.p3-notif-chain { background: var(--c-bg-card-alt); color: var(--c-text-secondary); }
.p3-notif-owner { background: var(--c-warning-dim, rgba(245,158,11,.14)); color:var(--c-warning-text); }
.p3-notif-act { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--c-primary-text); }
 
.p3-notif-seed { background: rgba(148,163,184,.18); color: var(--c-text-muted, #5A6B80); border: 1px dashed rgba(148,163,184,.5); padding: 0 6px; border-radius: var(--radius-sm, 6px); font-size: 12px; line-height: 16px; }

.p3-notif-empty { padding: 26px 12px; text-align: center; color: var(--c-text-muted, #5A6B80); }
.p3-notif-empty-ico { display: inline-block; opacity: .5; }
.p3-notif-empty p { margin: 6px 0 0; font-size: 12px; }

.np-title {
  padding: 6px var(--sp-sm);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--c-text-secondary);
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: 4px;
}
.np-empty {
  padding: 18px var(--sp-sm);
  color: var(--c-text-muted, #5A6B80);
  font-size: 12px;
  text-align: center;
}

 
.np-seg {
  display: flex;
  gap: 0;
  margin: 0 12px 12px;
  padding: 3px;
  background: var(--c-bg-card-alt);
  border: 1px solid var(--c-border-light);
  border-radius: 6px;
}
.np-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
 
.np-tab + .np-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--c-border);
  transition: background .15s ease;
}
.np-tab.active::before,
.np-tab.active + .np-tab::before,
.np-tab:hover::before,
.np-tab:hover + .np-tab::before { background: transparent; }
.np-tab:hover { background: var(--c-hover); color: var(--c-primary-light); }
.np-tab.active { background: var(--c-primary); color: #fff; }
.np-tab-label { overflow: hidden; text-overflow: ellipsis; }
.np-tab-num { font-size: 12px; font-weight: 700; min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px; border-radius: 6px; background: var(--c-bg-card); color: var(--c-primary-dark); flex: 0 0 auto; }
.np-tab-num[hidden] { display: none; }
.np-tab.active .np-tab-num { background: rgba(255,255,255,.22); color: #fff; }
 
.np-more {
  display: block; padding: 11px; text-align: center;
  font-size: 12px; font-weight: 500; color: var(--c-primary-light);
  text-decoration: none; background: var(--c-bg-card-alt);
  border-top: 1px solid var(--c-border-light);
  border-radius: 0 0 var(--radius-card, 0px) var(--radius-card, 0px);
}
.np-more:hover { background: var(--c-hover); }
.up-item {
  display: block;
  padding: 8px var(--sp-sm);
  font-size: 14px;
  color: var(--c-text-secondary);
  text-decoration: none;
  border-radius: 6px;
  transition: all .15s ease;
}
.up-item:hover { background: var(--c-bg-card-hover); color: var(--c-primary-light); }

 
.user-panel { max-height: 72vh; overflow-y: auto; }
.up-menu-groups { padding: 4px 0; border-top: 1px solid var(--c-border-light); margin-top: 6px; }
.up-group { margin: 2px 0; }
.up-group-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font: inherit; text-align: left; color: var(--c-text-secondary); transition: background .15s ease, color .15s ease; }
.up-group-head:hover { background: var(--c-hover); color: var(--c-primary-light); }
.up-group-head:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.uf-label { flex: 1; font-size: 12px; font-weight: 500; }
.uf-count { font-size: 12px; color: var(--c-text-muted, #5A6B80); background: var(--c-bg-card-alt); border-radius: 6px; padding: 0 6px; line-height: 16px; }
.uf-chevron { width: 14px; height: 14px; transform: rotate(90deg); opacity: .6; display: inline-flex; transition: transform .15s ease; }
.uf-chevron svg { width: 14px; height: 14px; display: block; }
.up-group.open .uf-chevron { transform: rotate(-90deg); }
.up-group-body { display: none; padding: 2px 0 4px; }
.up-group.open .up-group-body { display: block; animation: upBodyIn .15s ease; }
@keyframes upBodyIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.up-logout { margin-top: 4px; border-top: 1px solid var(--c-border-light); color: #C0392B; }
.up-logout:hover { background: var(--c-danger-dim, rgba(239, 68, 68, .1)); color: #C0392B; }

 
.up-header { display: flex; align-items: center; gap: var(--sp-sm); margin: -8px -8px 6px; padding: 12px; border-bottom: 1px solid var(--c-border-light); }
.up-avatar { flex: none; width: 38px; height: 38px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-primary); color: #fff; font-size: 16px; font-weight: 600; }
.up-id { min-width: 0; }
.up-name { font-size: 14px; font-weight: 600; color: var(--c-text-primary); }
.up-role { font-size: 12px; color: var(--c-text-muted, #5A6B80); margin-top: 1px; }
 
a.up-header { text-decoration: none; cursor: pointer; transition: background .15s ease; }
a.up-header:hover { background: var(--c-hover); }
a.up-header:hover .up-name { color: var(--c-primary-light); }
a.up-header:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.up-header-cta {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; line-height: 1; color: var(--c-text-muted, #5A6B80);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
a.up-header:hover .up-header-cta,
a.up-header:focus-visible .up-header-cta { opacity: 1; transform: none; color: var(--c-primary-light); }
.up-header.is-current .up-header-cta { opacity: .65; transform: none; }
.up-header-cta svg { width: 12px; height: 12px; display: block; }

 
.up-roleswitch { padding: 4px 4px 8px; border-bottom: 1px solid var(--c-border-light); margin-bottom: 6px; }
.up-subhead { padding: 4px 8px 6px; font-size: 12px; font-weight: 600; color: var(--c-text-muted, #5A6B80); }
.up-rs-hint { padding: 2px 8px 0; font-size: 12px; color: var(--c-text-muted, #5A6B80); opacity: .8; }
.role-cat { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease; color: var(--c-text-secondary); }
.role-cat:hover { background: var(--c-hover); color: var(--c-primary-light); }
.rc-label { flex: 1; font-size: 12px; font-weight: 500; }
.rc-count { font-size: 12px; color: var(--c-text-muted, #5A6B80); background: var(--c-bg-card-alt); border-radius: 6px; padding: 0 6px; line-height: 16px; }
.role-cat .chevron { width: 14px; height: 14px; transform: rotate(180deg); opacity: .6; }

 
.role-flyout { position: fixed; z-index: 320; display: none; min-width: 220px; background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-card, 0px); box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0,0,0,0.4)); padding: 6px; }
.role-flyout.open { display: block; animation: rfIn .14s ease; }
@keyframes rfIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.rf-head { display: flex; align-items: baseline; gap: 6px; padding: 6px var(--sp-sm) 8px; font-size: 12px; font-weight: 600; color: var(--c-text-secondary); border-bottom: 1px solid var(--c-border-light); margin-bottom: 4px; }
.rf-sub { font-size: 12px; font-weight: 400; color: var(--c-text-muted, #5A6B80); }
.rf-item { display: flex; align-items: center; gap: var(--sp-sm); padding: 7px 8px; border-radius: 6px; text-decoration: none; color: var(--c-text-secondary); transition: background .15s ease; }
.rf-item:hover { background: var(--c-hover); }
.rf-item.active { background: var(--c-primary-dim, rgba(59,130,246,.1)); }
.rf-avatar { flex: none; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg-card-alt); color: var(--c-text-secondary); font-size: 12px; font-weight: 600; }
.rf-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rf-name { font-size: 12px; font-weight: 500; color: var(--c-text-primary); }
.rf-role { font-size: 12px; color: var(--c-text-muted, #5A6B80); }
.rf-check { flex: none; width: 16px; height: 16px; color: var(--c-primary-text); display: inline-flex; }
.rf-check svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .role-flyout.open { animation: none; }
  .user-panel, .user-panel.open { transition: none; }
  .np-tab { transition: none; }
  a.up-header, .up-header-cta { transition: none; }
  .up-header-cta { opacity: 1; transform: none; }
}

 
.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: flex; }
  .topbar-left .search-box { display: none; }
}

 
.topbar-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--c-text-primary, #0F172A);
  cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: -4px 0;
  transition: background .15s ease, opacity .15s ease;
}
.topbar-logo:hover { background: var(--c-hover, rgba(148, 163, 184, .12)); color: var(--c-text-primary, #0F172A); }
.topbar-logo span { font-size: 14px; font-weight: 600; white-space: nowrap; letter-spacing: .2px; color: var(--c-text-primary, #0F172A); -webkit-text-fill-color: currentColor; background: none; }
.topbar-logo:hover span { color: var(--c-text-primary, #0F172A); -webkit-text-fill-color: currentColor; background: none; }
.topbar-logo:active { opacity: .82; }
.topbar-logo:focus-visible { outline: 2px solid var(--c-primary-light, #60A5FA); outline-offset: 2px; }
.topbar-logo-icon { display: inline-flex; color: #fff !important; flex: none; }

 
.bottom-dev-tools {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 320;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.bottom-dev-tools .state-switch {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  margin: 0;
}
.bottom-dev-tools .role-switch,
.bottom-dev-tools .state-switch {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
}
 
.bottom-dev-tools .rs-cat,
.bottom-dev-tools .state-btn {
  line-height: 1.5;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
 
.bdt-divider {
  width: 1px;
  height: 20px;
  background: var(--c-border, #e2e8f0);
  flex: none;
}
.role-switch {
  display: inline-flex;
  gap: var(--sp-2xs, 4px);
  background: var(--c-surface-2);
  padding: var(--sp-2xs, 4px);
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card, 0 4px 12px rgba(0,0,0,0.08));
}
.rs-cat {
  font-size: 12px;
  padding: var(--sp-2xs, 4px) var(--sp-sm, 12px);
  border-radius: var(--radius-sm, 6px);
  color: var(--c-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
  white-space: nowrap;
}
.rs-cat:hover { color: var(--c-text-primary); }
.rs-cat.active {
  background: var(--c-surface);
  color: var(--c-text-primary);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}

 
.role-flyout.bottom-up { bottom: auto !important; }

 
.role-popup-panel {
  position: fixed;
  z-index: 321;
  right: 16px;
  bottom: 58px;
  width: 580px;
  max-width: calc(100vw - 32px);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card, 0px);
  box-shadow: var(--shadow-dropdown, 0 12px 32px rgba(0,0,0,0.18));
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: rppIn .16s ease;
}
.role-popup-panel.open { display: flex; }
@keyframes rppIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

 
.role-popup-panel.rpp-cascade {
  right: auto;
  width: auto;
  min-width: 0;
  max-width: calc(100vw - 32px);
  flex-direction: row;
  align-items: stretch;
   /* 固定面板高度（务必保持「恒定」，勿改回 auto，也勿删除本条声明）：
     本面板以 bottom:58px 锚定，若高度由右侧账号列内容撑开，悬停切换分类时高度会变（实测 228→243px），
     面板顶边随之上下位移，左侧一级分类项跟着位移（行高 40.39px）；当位移量接近一行时，光标会脱离
     当前项落到相邻项上 → 触发新的 mouseenter → 内容又变回去 → 高度再变 → 无限往复（表现为分类项
     反复跳跃、点不中，"研发设计"账号数最多、位移最大，最容易复现）。
     320px 可容纳三个维度的最大内容（合作方 7 类 ≈ 311px），一级/二级均不出现滚动条；
     内容若超出则各列内部滚动，高度仍恒定，不会抖动。
     修复记录 2026-09-18：本条声明此前因上一行残留了缺少起始标记的注释片段，被 CSS 解析器
     连同 400px 一起判为非法声明整体丢弃（浏览器解析结果中该规则已无 height），故上述缺陷复现。 */
  height: 320px;
  max-height: calc(100vh - 72px);
}
.rpp-cat-menu {
  width: 150px;
  min-width: 150px;
  border-right: 1px solid var(--c-border-light);
  background: var(--c-bg-card-alt);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 100%;
  overflow-y: auto;
  flex: none;
}
.rpp-cat-item {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--c-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.rpp-cat-item:hover,
.rpp-cat-item.active {
  background: var(--c-hover);
  color: var(--c-text-primary);
}
.rpp-cat-item::after {
  content: '›';
  font-size: 14px;
  color: var(--c-text-muted);
  flex: none;
}
.rpp-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpp-cat-count {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.06);
  color: var(--c-text-muted);
}
.rpp-acc-body {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: calc(100vw - 182px);
  max-height: 100%;
  overflow-y: auto;
  padding: 6px 5px;
}
.rpp-acc-body .rpp-group { width: max-content; }
.rpp-acc-body .rpp-group-chips { width: max-content; }
.rpp-acc-body .rp-chip { width: auto; min-width: 0; white-space: nowrap; }
.rpp-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 12px;
}


.rpp-acc-body .rpp-group-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-template-columns: 1fr;
}
.rpp-acc-body .rp-chip {
  width: 100%;
  border-color: var(--c-border) !important;
  background: var(--c-bg-card-hover) !important;
  box-shadow: none !important;
}
.rpp-acc-body .rp-chip .rp-avatar {
  background: var(--c-bg-card-alt) !important;
  color: var(--c-text-secondary) !important;
}
.rpp-acc-body .rp-chip .rp-name {
  color: var(--c-text-primary) !important;
}
.rpp-acc-body .rp-chip .rp-role {
  color: var(--c-text-tertiary) !important;
}
.rpp-acc-body .rp-chip:hover {
  transform: none !important;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)) !important;
  filter: none !important;
  background: var(--c-hover) !important;
}
.rpp-acc-body .rp-chip.active {
  box-shadow: 0 0 0 2px var(--c-primary) !important;
}

.rpp-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--c-border-light);
  background: var(--c-bg-card-alt);
}
.rpp-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 6px);
  background: transparent;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: all .15s ease;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}
.rpp-tab:hover:not(.active) { background: var(--c-hover); color: var(--c-text-primary); }
.rpp-tab.active {
  background: var(--c-primary);
  border-color: var(--c-primary-text);
  color: #fff;
}
.rpp-tab-count {
  font-size: 12px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.2);
}
.rpp-body {
  max-height: 58vh;
  overflow-y: auto;
  padding: 12px;
}
.rpp-group { margin-bottom: var(--sp-md); }
.rpp-group:last-child { margin-bottom: 0; }
.rpp-group-title {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--c-text-muted, #5A6B80);
  margin-bottom: 8px;
  padding-left: 4px;
}
.rpp-group-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  padding: 7px 9px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn, 6px);
  background: var(--c-bg-card-hover);
  cursor: pointer;
  text-align: left;
  transition: all .15s ease;
  width: 100%;
  font-family: inherit;
}
.rp-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(29,78,216,0.18);
  filter: brightness(1.02);
}
.rp-chip.active {
  box-shadow: 0 0 0 2px var(--c-primary);
}
.rp-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-card-alt);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.rp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rp-name { font-size: 12px; font-weight: 600; color: var(--c-text-primary); }
.rp-role { font-size: 12px; color: var(--c-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-check { flex: none; width: 16px; height: 16px; color: var(--c-primary-text); display: inline-flex; }
.rp-check svg { width: 16px; height: 16px; }

 
 
.rp-chip.dim-internal.lvl-mgr { border-color: #1d4ed8; background: rgba(37,99,235,0.10); }
.rp-chip.dim-internal.lvl-mgr .rp-avatar { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); }
.rp-chip.dim-internal.lvl-mgr .rp-name { color: #1e40af; }
.rp-chip.dim-internal.lvl-exec { border-color: #bfdbfe; background: rgba(59,130,246,0.06); }
.rp-chip.dim-internal.lvl-exec .rp-avatar { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); }
.rp-chip.dim-internal.lvl-exec .rp-name { color: #1d4ed8; }
 
.rp-chip.dim-cust.lvl-mgr { border-color: #b45309; background: rgba(217,119,11,0.10); }
.rp-chip.dim-cust.lvl-mgr .rp-avatar { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); }
.rp-chip.dim-cust.lvl-mgr .rp-name { color: #92400e; }
.rp-chip.dim-cust.lvl-exec { border-color: #fde68a; background: rgba(245,158,11,0.06); }
.rp-chip.dim-cust.lvl-exec .rp-avatar { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.rp-chip.dim-cust.lvl-exec .rp-name { color: #b45309; }
 
.rp-chip.dim-partner.lvl-mgr { border-color: #047857; background: rgba(5,150,105,0.10); }
.rp-chip.dim-partner.lvl-mgr .rp-avatar { background: linear-gradient(135deg, #047857 0%, #059669 100%); }
.rp-chip.dim-partner.lvl-mgr .rp-name { color: #065f46; }
.rp-chip.dim-partner.lvl-exec { border-color: #a7f3d0; background: rgba(16,185,129,0.06); }
.rp-chip.dim-partner.lvl-exec .rp-avatar { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }
.rp-chip.dim-partner.lvl-exec .rp-name { color: #047857; }
 
.rp-chip.dim-admin { border-color: var(--c-warning, #f59e0b); background: rgba(245,158,11,0.10); }
.rp-chip.dim-admin .rp-avatar { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.rp-chip.dim-admin .rp-name { color: #92400e; }

@media (max-width: 640px) {
  .role-popup-panel { right: 8px; bottom: 52px; width: calc(100vw - 16px); }
  .rpp-group-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .role-popup-panel, .role-popup-panel.open { animation: none; }
}