.app[data-view="settings"] .rail, .app[data-view="settings"] .side, .app[data-view="settings"] .people { visibility: hidden; }

.setx { position: fixed; z-index: 4; top: calc(var(--bar) + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: none; background: var(--ground); scrollbar-width: thin; }
.setx-in { display: flex; align-items: stretch; min-height: 100%; }
.setx-side { flex: 1 0 232px; display: flex; justify-content: flex-end; min-width: 0; }
.setx-nav { position: sticky; top: 0; align-self: flex-start; width: 232px; max-height: calc(100dvh - var(--bar)); overflow-y: auto; padding: var(--s7) var(--s2) var(--s7) var(--s4); scrollbar-width: thin; overscroll-behavior: none; }
.setx-main { flex: 1 1 852px; display: flex; align-items: flex-start; min-width: 0; margin: 0 var(--s2) var(--s2) 0; border-radius: var(--radius-card); background: var(--surface); }
.setx-col { flex: 0 1 820px; min-width: 0; max-width: 820px; padding: var(--s7) var(--s6) var(--s7) var(--s6); }
.setx-tools { position: sticky; top: var(--s7); flex: none; width: 72px; }

.setx-g { padding: 0 var(--s2); margin: 0 0 var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setx-list { margin: 0; padding: 0; list-style: none; }
.setx-list li + li { margin-top: 2px; }
.setx-i {
  display: flex; align-items: center; gap: var(--s2); width: 100%; height: 32px; padding: 0 var(--s2); border: 0; border-radius: var(--radius-small);
  background: none; color: var(--muted); font: 500 var(--fs-body)/var(--lh-body) var(--font); text-align: left; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.setx-i:hover { background: var(--panel); color: var(--text); }
.setx-i[aria-current="page"] { background: var(--active); color: var(--text); }
.setx-i:focus-visible { outline-offset: -2px; }
.setx-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setx-i .count { flex: none; font-size: var(--fs-small); }
.setx-sep { height: 1px; margin: var(--s3) var(--s2); background: var(--rule); }
.setx-i.danger { color: var(--pill-negative-ink); }
.setx-i.danger:hover { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.setx-end .rv.slid > .rv-in > .confirm { margin: var(--s2) 0 0; }
.setx-end .confirm .actions { gap: var(--s2); }
.setx-title { display: none; }

.setx-esc { display: grid; justify-items: center; gap: var(--s1); width: 56px; color: var(--muted); }
.setx-x { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--control); border-radius: var(--round); transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.setx-x svg { width: 16px; height: 16px; }
.setx-k { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.setx-esc:hover { color: var(--text); }
.setx-esc:hover .setx-x { background: var(--raised); border-color: var(--control-hover); }
.setx-esc:focus-visible { outline: 0; }
.setx-esc:focus-visible .setx-x { outline: 2px solid var(--text); outline-offset: 2px; }

.setx-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
.setx-head h1:focus { outline: 0; }
.setx-head p { margin-top: var(--s1); color: var(--muted); max-width: 64ch; }
.setx-head .ro, .role-page > .ro { margin-top: var(--s2); color: var(--pill-warning-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.setx-sec > .set-panel { margin-top: var(--s5); }
.setx-wait { min-height: 44px; }
.setx-back { display: none; align-items: center; gap: var(--s1); height: 32px; margin: 0 0 var(--s3) calc(-1 * var(--s1)); padding: 0 var(--s2) 0 var(--s1); color: var(--muted); }
.setx-back svg { width: 16px; height: 16px; }
.setx-back:hover { color: var(--text); }
.setx-col > .setx-back { display: inline-flex; }
.setx-tool { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.setx-tool .inp { flex: 1 1 auto; min-width: 0; }
.setx-tool .btn { flex: none; }
.setx-hint, .perm-groups > .hint { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.setx-hint { margin: 0 0 var(--s3); }
.who-join { margin: var(--s4) 0 0; padding: 0; border: 0; display: grid; gap: var(--s3); }
.who-join legend { padding: 0; margin-bottom: var(--s2); }
.gen-sum p:last-child { max-width: 96px; }

.setx #sx-members { --acts: 40px; }
.setx #sx-roles { --acts: 92px; }
.setx #sx-bans { --acts: 140px; }
.setx #sx-invites { --acts: 176px; }
.setx #sx-roles-role { --acts: 72px; }
.chips { display: flex; flex-wrap: nowrap; gap: var(--s1); overflow: hidden; }
.chips .pill.role { height: 20px; padding: 0 var(--s2); font-size: var(--fs-small); }
.role-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: var(--round); background: var(--role); vertical-align: middle; }
.role-dot.none { background: none; box-shadow: inset 0 0 0 1px var(--control); }
.pill.role .role-dot { width: 8px; height: 8px; }

.role-default { display: flex; align-items: center; gap: var(--s3); min-height: 56px; margin-bottom: var(--s4); padding: var(--s2) var(--s4); border-radius: var(--radius-nested); background: var(--raised); color: var(--text); transition: background-color var(--t-fast) var(--ease-out); }
.role-default:hover { background: var(--active); }
.role-default .grow { flex: 1; min-width: 0; display: grid; }
.role-default .t { font-weight: 500; }
.role-default .s { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.role-default > svg { width: 16px; height: 16px; color: var(--muted); }
.set-panel .role-reg > li { gap: var(--s3); }
.set-panel .reg-h .role-grip-gap { flex: none; }
.role-grip, .role-grip-gap { flex: none; width: 28px; }
.role-grip-gap { height: 28px; }
.role-grip { cursor: grab; touch-action: none; color: var(--faint); }
.role-grip:active { cursor: grabbing; }
.set-panel .reg .role-n { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s1); min-width: 64px; }
.role-n > svg { width: 14px; height: 14px; color: var(--faint); }
.set-panel .reg-h .role-n { min-width: 64px; text-align: right; }
.role-row.dragging { position: relative; z-index: 2; border-radius: var(--radius-small); background: var(--raised); box-shadow: var(--shadow-float); }
.role-drag .role-row:not(.dragging) { transition: none; }

.role-edit { display: grid; gap: var(--s5); }
.role-edit .fld + .fld { margin-top: 0; }
.swatches { margin: 0; padding: 0; border: 0; }
.swatches legend { padding: 0; margin-bottom: var(--s2); }
.sw-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.swatch { position: relative; display: grid; place-items: center; width: 32px; height: 32px; cursor: pointer; }
.swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.swatch span { width: 24px; height: 24px; border-radius: var(--round); background: var(--role); }
.swatch.none span { background: none; box-shadow: inset 0 0 0 1px var(--control); }
.swatch input:checked + span { outline: 2px solid var(--text); outline-offset: 2px; }
.swatch input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 4px; }
.swatch input:disabled { cursor: default; }
.perm-groups h2, .role-holders h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.perm-groups > .hint { margin-top: var(--s1); }
.perm-group { margin: var(--s4) 0 0; padding: 0; border: 0; }
.perm-group legend { padding: 0; margin-bottom: var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }
.perm-row { min-height: 44px; padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.perm-group .perm-row:last-child { border-bottom: 1px solid var(--rule); }
.role-holders { margin-top: var(--s6); }
.role-holders .pk-add { margin: var(--s3) 0 var(--s4); }
.pk-add-l { display: block; margin-bottom: var(--s2); font-weight: 500; }
.pk-add-row { display: flex; align-items: flex-start; gap: var(--s2); }
.pk-add-row > .pk { flex: 1 1 auto; }
.pk-add-row > .btn { flex: none; min-width: 96px; }
.role-holders > .list-box { margin-top: var(--s3); }

.cs-over-w { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s6); align-items: start; }
.cs-over { display: grid; gap: var(--s4); max-width: 560px; }
.cs-sum { padding: var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.cs-sum h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.cs-sum dl { margin: var(--s2) 0 var(--s3); }
.cs-sum dt { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.cs-sum dd { margin: 0; }
.cs-over .fld + .fld { margin-top: 0; }
.cs-over textarea.inp { height: auto; min-height: 88px; padding-top: var(--s2); padding-bottom: var(--s2); resize: vertical; }
.cs-perms { display: grid; gap: var(--s5); }
.cs-row-head { display: flex; align-items: flex-start; gap: var(--s4); }
.cs-row-head .grow { flex: 1; min-width: 0; }
.cs-row-head .t { display: flex; align-items: center; gap: var(--s2); font-weight: 500; }
.cs-row-head .s { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.cs-lock { display: inline-grid; color: var(--muted); }
.cs-lock svg { width: 14px; height: 14px; }
.cs-private { padding: var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.cs-sync:not([hidden]) { padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.cs-ev { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--muted); }
.cs-ev svg { width: 16px; height: 16px; }
.cs-sync[hidden] { display: none; }
.cs-who { margin-top: var(--s4); }
.cs-who-l { display: block; margin-bottom: var(--s2); font-weight: 500; }
.cs-sync-line { display: flex; align-items: center; gap: var(--s3); min-height: 32px; }
.cs-sync-line.synced { color: var(--muted); }
.cs-sync-line > svg { flex: none; width: 16px; height: 16px; }
.cs-sync-line .grow { flex: 1; min-width: 0; }
.cs-sync .rv.slid > .rv-in > .confirm, .cs-private .rv.slid > .rv-in > .confirm { margin: var(--s3) 0 0; }

.switch { position: relative; flex: none; width: 36px; height: 20px; margin-top: 2px; padding: 0; border: 0; border-radius: var(--round); background: var(--pill-neutral-bg); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out); }
.switch-k { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--round); background: var(--muted); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.switch[aria-checked="true"] { background: var(--text); }
.switch[aria-checked="true"] .switch-k { transform: translateX(16px); background: var(--surface); }
.switch:disabled { cursor: not-allowed; }
.switch:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.cs-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.cs-left-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 28px; margin-bottom: var(--s2); }
.cs-left-h h2 { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }
.cs-plus { width: 28px; height: 28px; }
.cs-plus svg { width: 14px; height: 14px; }
.cs-add .rv-in { padding-bottom: var(--s2); }
.cs-targets { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.cs-t { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 36px; padding: var(--s1) var(--s2); border: 0; border-radius: var(--radius-small); background: none; color: var(--muted); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.cs-t:hover { background: var(--panel); color: var(--text); }
.cs-t[aria-pressed="true"] { background: var(--active); color: var(--text); }
.cs-t:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.cs-t-n { flex: 1; min-width: 0; display: grid; }
.cs-t-n bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-t-n .s { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.cs-t .role-dot { margin: 0 3px; }
.cs-dot { flex: none; width: 6px; height: 6px; border-radius: var(--round); background: var(--text); }
.cs-adv { min-width: 0; }
.cs-adv-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); min-height: 28px; }
.cs-adv-h h2 { display: grid; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.cs-adv-h h2 .s { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-adv-h .text-btn { flex: none; }
.cs-adv > .hint, .cs-adv > .ro { margin-top: var(--s2); font-size: var(--fs-small); line-height: var(--lh-small); }
.cs-adv > .hint { color: var(--muted); }
.cs-adv > .hint.gone { visibility: hidden; }
.cs-adv > .ro { color: var(--pill-warning-ink); }
.cs-group { margin: var(--s4) 0 0; padding: 0; border: 0; min-width: 0; }
.cs-group legend { padding: 0; margin-bottom: var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }
.cs-p { display: flex; align-items: center; gap: var(--s4); min-height: 56px; padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.cs-group .cs-p:last-child { border-bottom: 1px solid var(--rule); }
.cs-p .grow { flex: 1; min-width: 0; }
.cs-p .t { font-weight: 500; }
.cs-p .s { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.cs-p.off .t { color: var(--muted); }

.tri { flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-small); background: var(--ground); }
.tri-b { display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-chip, 4px); background: none; color: var(--muted); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.tri-b svg { width: 16px; height: 16px; }
.tri-b:hover { color: var(--text); }
.tri-b:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.tri-b.deny[aria-checked="true"] { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.tri-b.neutral[aria-checked="true"] { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }
.tri-b.allow[aria-checked="true"] { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.tri-b[aria-disabled="true"] { cursor: not-allowed; }
.tri-b[aria-disabled="true"]:hover { color: var(--muted); }

.cs-bar { position: sticky; bottom: var(--s3); z-index: 2; display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius-card); background: var(--raised); box-shadow: var(--shadow-float); }
.cs-bar[hidden] { display: none; }
.cs-bar-w { flex: 1; min-width: 0; }
.cs-bar-h { font-weight: 600; }
.cs-bar-t { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.cs-bar-a { flex: none; display: flex; align-items: center; gap: var(--s2); }
.cs-perms > .form-err:empty { display: none; }
.cs-said { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }

@media (max-width: 960px) {
  .setx #sx-members .reg .row-acts { order: 4; min-width: 28px; }
  .setx #sx-members .reg .c-sub { order: 5; flex: 1 1 100%; }
  .setx #sx-members .reg .c-sub:empty { display: none; }
}

@media (max-width: 1100px) {
  .cs-grid, .cs-over-w { grid-template-columns: minmax(0, 1fr); }
  .cs-targets { display: flex; flex-wrap: wrap; gap: var(--s1); }
  .cs-targets > li { flex: none; max-width: 100%; }
  .cs-t { width: auto; max-width: 100%; min-height: 32px; padding: 0 var(--s3); border-radius: var(--round); background: var(--raised); }
  .cs-t-n .s { display: none; }
  .setx-side { flex-basis: 200px; }
  .setx-nav { width: 200px; padding-left: var(--s2); }
  .setx-col { padding: var(--s6) var(--s5) var(--s6) var(--s5); }
  .setx-tools { width: 64px; top: var(--s6); }
}

@media (max-width: 760px) {
  .setx-in { display: block; }
  .setx[data-pane="list"] .setx-main, .setx[data-pane="sec"] .setx-side { display: none; }
  .setx-side { display: block; }
  .setx-nav { position: static; width: auto; max-height: none; overflow: visible; padding: var(--s4); }
  .setx-nav > .setx-back { display: inline-flex; }
  .setx-title { display: block; margin: 0 0 var(--s5) var(--s2); font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
  .setx-title:focus { outline: 0; }
  .setx-i { height: 44px; padding: 0 var(--s3); }
  .setx-g { padding: 0 var(--s3); }
  .setx-sep { margin: var(--s3); }
  .setx-main { display: block; margin: 0; border-radius: 0; min-height: 100%; }
  .setx-col { max-width: none; padding: var(--s4) var(--s4) var(--s6); }
  .setx-tools { display: none; }
  .setx-tool { flex-wrap: wrap; }
  .setx-tool .inp { flex-basis: 100%; }
  .role-default { padding: var(--s2) var(--s3); }
  .set-panel .role-reg > li { flex-wrap: nowrap; }
  .set-panel .role-reg .c-main { flex: 1 1 auto; }
  .set-panel .reg .role-n { min-width: 40px; }
  .chips { flex-wrap: wrap; }
  .role-grip { display: none; }
  .cs-t { min-height: 44px; }
  .cs-plus { width: 44px; height: 44px; }
  .tri-b { width: 40px; height: 36px; }
  .cs-p { gap: var(--s3); }
  .cs-bar { flex-wrap: wrap; bottom: var(--s2); gap: var(--s2) var(--s3); }
  .cs-bar-a { margin-left: auto; }
  .cs-bar-a .btn { min-height: 44px; }
  .cs-row-head .btn.small { min-height: 44px; }
  .role-grip-gap { display: none; }
}
@media (prefers-reduced-motion: reduce) { .setx-i, .setx-x, .role-default, .cs-t, .tri-b, .switch, .switch-k { transition: none; } }