/* ============================================================================
   Ролі (CRUD + архів) і Користувачі (список + панель).
   Токени й спільні класи (.pm-*, .rc--*) приходять із permissions.css.
   ========================================================================== */
.req{color:var(--danger,#b91c1c)}
.wz-target{margin:-2px 0 12px 32px}
.wz-target__sel{max-width:280px}
.pm-modal__f--gap{gap:8px}
.pm-empty{padding:34px 20px;text-align:center;color:var(--text-mut,#7c6d60);font-size:.88rem}
.rl-sys{background:color-mix(in srgb,#7c5cbf 16%,transparent);color:#7c5cbf}
[data-theme="dark"] .rl-sys{color:#a186dd}
#rolesRoot [hidden],#usersRoot [hidden]{display:none!important}

/* ═══ РОЛІ ═════════════════════════════════════════════════════════════════ */
.rl-list{display:flex;flex-direction:column;gap:8px}
.rl{position:relative;background:var(--surface,#fffdf9);border:1px solid var(--border,#e8dfd1);
  border-radius:var(--radius,14px);box-shadow:var(--shadow,0 1px 2px rgba(80,55,30,.06));
  display:flex;align-items:center;gap:12px;padding:11px 14px;flex-wrap:wrap;
  transition:border-color .15s}
.rl:hover{border-color:color-mix(in srgb,var(--rc,#8a7d6d) 45%,var(--border,#e8dfd1))}
.rl--off{opacity:.6;background:var(--surface-2,#f1e9dd)}
.rl__av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--rc,#8a7d6d) 16%,var(--surface,#fffdf9));color:var(--rc,#8a7d6d);
  font-weight:700;font-size:.86rem}
.rl__body{flex:1;min-width:190px}
.rl__title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.95rem}
.rl__title b{font-weight:600}
.rl__title code{font-size:.72rem;color:var(--text-mut,#7c6d60)}
.rl__desc{color:var(--text-mut,#7c6d60);font-size:.8rem;margin-top:2px}
.rl__stats{display:flex;gap:16px;align-items:center;flex:0 0 auto}
.rl__stat{text-align:right;min-width:56px}
.rl__stat b{display:block;font-size:1rem;font-weight:700;line-height:1.2}
.rl__stat span{font-size:.7rem;color:var(--text-mut,#7c6d60)}
.rl__acts{display:flex;gap:2px;flex:0 0 auto;align-items:center}
.rl__acts .inline-form{display:inline}
.rl-bar{display:flex;gap:2px;height:5px;border-radius:999px;overflow:hidden;width:98px;
  background:var(--surface-2,#f1e9dd)}
.rl-bar i{flex:1;height:100%;min-width:3px}
.rl-bar--full{background:var(--lv-full,#1f9d57)}
.rl-bar--custom{background:var(--lv-custom,#c2410c)}
.rl-bar--view{background:var(--lv-view,#3d6ea5)}
.rl-bar--none{background:var(--border,#e8dfd1)}

.rl-new{margin-bottom:12px}
.rl-new__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px}
.rl-new__foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.rl-edit{flex:1 0 100%;border-top:1px solid var(--divider,#efe7db);margin-top:10px;padding-top:12px}
.rl-sw{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.rl-sw__i{cursor:pointer;line-height:0}
.rl-sw__i input{position:absolute;opacity:0;width:0;height:0}
.rl-sw__i span{display:block;width:26px;height:26px;border-radius:8px;border:2px solid transparent;
  background:color-mix(in srgb,var(--rc,#8a7d6d) 55%,var(--surface,#fffdf9));transition:.13s}
.rl-sw__i input:checked + span{border-color:var(--text,#2c2420);box-shadow:0 0 0 2px var(--surface,#fffdf9) inset}
.rl-sw__i input:focus-visible + span{outline:2px solid var(--primary,#c2410c);outline-offset:2px}

.rl-arch{margin-top:22px}
.rl-arch>summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--text-mut,#7c6d60);
  padding:9px 12px;border:1px dashed var(--border,#e8dfd1);border-radius:var(--radius-sm,11px);
  list-style:none}
.rl-arch>summary::-webkit-details-marker{display:none}
.rl-arch>summary:hover{color:var(--primary,#c2410c);border-color:var(--primary,#c2410c)}
.rl-arch[open]>summary{margin-bottom:8px}

/* ── Майстер архівування ─────────────────────────────────────────────────── */
.wz-steps{display:flex;gap:6px;margin:12px 0 6px}
.wz-step{flex:1;font-size:.76rem;font-weight:600;color:var(--text-mut,#7c6d60);padding-top:7px;
  border-top:3px solid var(--border,#e8dfd1)}
.wz-step--on{color:var(--primary,#c2410c);border-top-color:var(--primary,#c2410c)}
.wz-step--done{color:var(--ok,#1f9d57);border-top-color:var(--ok,#1f9d57)}
.wz-imp{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin:14px 0}
.wz-imp__c{background:var(--surface-2,#f1e9dd);border-radius:var(--radius-sm,11px);padding:11px 13px}
.wz-imp__c b{display:block;font-size:1.35rem;font-weight:700;line-height:1.1}
.wz-imp__c span{font-size:.75rem;color:var(--text-mut,#7c6d60)}
.wz-imp__c--risk{background:color-mix(in srgb,var(--danger,#b91c1c) 12%,var(--surface,#fffdf9));color:var(--danger,#b91c1c)}
.wz-imp__c--risk span{color:color-mix(in srgb,var(--danger,#b91c1c) 78%,var(--text-mut,#7c6d60))}
.wz-users{display:flex;flex-direction:column;gap:5px;margin-top:8px;max-height:260px;overflow:auto;padding-right:3px}
.wz-u{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border,#e8dfd1);
  border-radius:var(--radius-sm,11px);background:var(--surface,#fffdf9);font-size:.86rem}
.wz-u--risk{border-color:color-mix(in srgb,var(--danger,#b91c1c) 40%,var(--border,#e8dfd1));
  background:color-mix(in srgb,var(--danger,#b91c1c) 6%,var(--surface,#fffdf9))}
.wz-u__av{width:26px;height:26px;border-radius:50%;background:var(--primary-soft,rgba(194,65,12,.12));
  color:var(--primary,#c2410c);display:grid;place-items:center;font-weight:700;font-size:.68rem;flex:0 0 auto}
.wz-u__n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-u select{max-width:200px}
.wz-radio{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--border,#e8dfd1);
  border-radius:var(--radius-sm,11px);cursor:pointer;margin-bottom:8px;transition:.15s}
.wz-radio:hover{border-color:var(--primary,#c2410c)}
.wz-radio--on{border-color:var(--primary,#c2410c);background:var(--primary-soft,rgba(194,65,12,.12))}
.wz-radio b{display:block;font-size:.9rem}
.wz-radio span{font-size:.79rem;color:var(--text-mut,#7c6d60)}
.wz-diff{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.btn--armed{background:var(--danger,#b91c1c)!important;border-color:var(--danger,#b91c1c)!important;
  color:#fff!important;animation:wzArm 1s ease infinite}
@keyframes wzArm{0%,100%{box-shadow:0 0 0 0 rgba(185,28,28,.45)}50%{box-shadow:0 0 0 7px rgba(185,28,28,0)}}

/* ═══ КОРИСТУВАЧІ ══════════════════════════════════════════════════════════ */
.us{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start}
@media(max-width:1180px){.us{grid-template-columns:1fr}.us-panel{position:static!important}}
.us__av{width:33px;height:33px;border-radius:50%;background:var(--primary-soft,rgba(194,65,12,.12));
  color:var(--primary,#c2410c);display:grid;place-items:center;font-weight:700;font-size:.76rem;flex:0 0 auto}

.us-pend{background:color-mix(in srgb,#f5a623 10%,var(--surface,#fffdf9));
  border:1px solid color-mix(in srgb,#f5a623 34%,var(--border,#e8dfd1));
  border-radius:var(--radius,14px);margin-bottom:12px}
.us-pend>summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:600;font-size:.9rem}
.us-pend>summary::-webkit-details-marker{display:none}
.us-pend__b{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.us-pend__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface,#fffdf9);
  border:1px solid var(--border,#e8dfd1);border-radius:var(--radius-sm,11px);padding:9px 12px}
.us-pend__id{display:flex;flex-direction:column;min-width:180px;flex:1}
.us-pend__id b{font-size:.9rem}
.us-pend__id span{font-size:.76rem;color:var(--text-mut,#7c6d60)}
.us-pend__roles{display:flex;gap:5px;flex-wrap:wrap;flex:2;min-width:220px}

.us-list{background:var(--surface,#fffdf9);border:1px solid var(--border,#e8dfd1);
  border-radius:var(--radius,14px);box-shadow:var(--shadow,0 1px 2px rgba(80,55,30,.06));overflow:hidden}
.us-row{display:flex;align-items:center;gap:11px;padding:9px 13px;
  border-bottom:1px solid var(--divider,#efe7db);color:var(--text,#2c2420);text-decoration:none;
  transition:background .13s}
.us-row:last-of-type{border-bottom:0}
.us-row:hover{background:var(--primary-soft,rgba(194,65,12,.12))}
.us-row--on{background:color-mix(in srgb,var(--primary,#c2410c) 10%,var(--surface,#fffdf9));
  box-shadow:inset 3px 0 0 var(--primary,#c2410c)}
.us-row--off{background:var(--surface-2,#f1e9dd);opacity:.66}
.us-row__cb{width:15px;height:15px;accent-color:var(--primary,#c2410c);cursor:pointer;flex:0 0 auto}
.us-row__b{flex:1;min-width:0;display:block}
.us-row__n{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.us-row__n b{font-weight:600;font-size:.9rem}
.us-row__e{display:block;font-size:.77rem;color:var(--text-mut,#7c6d60);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.us-row__chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.us-row__meta{font-size:.73rem;color:var(--text-mut,#7c6d60);text-align:right;flex:0 0 auto;white-space:nowrap}
.us-role{background:color-mix(in srgb,var(--rc,#8a7d6d) 15%,transparent);color:var(--rc,#8a7d6d)}

.us-bulk{position:sticky;bottom:12px;margin-top:12px;background:var(--surface,#fffdf9);
  border:1px solid var(--primary,#c2410c);border-radius:var(--radius,14px);
  box-shadow:var(--shadow-lg,0 14px 34px rgba(80,55,30,.16));padding:10px 15px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;z-index:20}
.us-bulk b{font-size:.87rem}
.us-bulk select,.us-bulk input{max-width:220px}

.us-panel{background:var(--surface,#fffdf9);border:1px solid var(--border,#e8dfd1);
  border-radius:var(--radius,14px);box-shadow:var(--shadow,0 1px 2px rgba(80,55,30,.06));
  position:sticky;top:104px;overflow:hidden}
.us-panel__empty{display:grid;place-items:center;min-height:260px;text-align:center;padding:30px;
  color:var(--text-mut,#7c6d60);font-size:.88rem}
.us-panel__empty div{font-size:2rem;opacity:.35;margin-bottom:8px}
.us-panel__h{padding:15px 17px 12px;border-bottom:1px solid var(--border,#e8dfd1);display:flex;
  gap:12px;align-items:flex-start}
.us-panel__av{width:44px;height:44px;border-radius:50%;background:var(--primary-soft,rgba(194,65,12,.12));
  color:var(--primary,#c2410c);display:grid;place-items:center;font-weight:700;font-size:1rem;flex:0 0 auto}
.us-panel__id{flex:1;min-width:0}
.us-panel__n{font-size:1.02rem;font-weight:700;line-height:1.25;word-break:break-word}
.us-panel__e{font-size:.79rem;color:var(--text-mut,#7c6d60);word-break:break-all}
.us-panel__badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.us-panel__x{font-size:1.4rem;line-height:1;color:var(--text-mut,#7c6d60);text-decoration:none;padding:0 3px}
.us-panel__x:hover{color:var(--danger,#b91c1c)}
.us-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--border,#e8dfd1);
  background:var(--surface-2,#f1e9dd)}
.us-tab{padding:9px 10px;font-size:.81rem;font-weight:600;color:var(--text-mut,#7c6d60);
  border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap}
.us-tab:hover{color:var(--text,#2c2420)}
.us-tab--on{color:var(--primary,#c2410c);border-bottom-color:var(--primary,#c2410c)}
.us-panel__b{padding:14px 17px;max-height:calc(100vh - 330px);overflow:auto}
.us-panel__f{padding:11px 17px;border-top:1px solid var(--border,#e8dfd1);
  background:var(--surface-2,#f1e9dd);display:flex;gap:7px;flex-wrap:wrap}
.us-panel__f:empty{display:none}
.us-sect{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-mut,#7c6d60);margin:14px 0 6px}
.us-sect:first-child{margin-top:0}
.us-chips{display:flex;gap:6px;flex-wrap:wrap}
.us-chips .inline-form{display:inline}
.us-rchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border,#e8dfd1);
  border-radius:999px;padding:4px 11px;font:inherit;font-size:.79rem;font-weight:600;
  background:var(--surface,#fffdf9);color:var(--text-mut,#7c6d60);cursor:pointer;transition:.13s}
.us-rchip:hover:not(:disabled){border-color:var(--rc,#8a7d6d);color:var(--rc,#8a7d6d)}
.us-rchip--on{background:color-mix(in srgb,var(--rc,#8a7d6d) 14%,var(--surface,#fffdf9));
  border-color:var(--rc,#8a7d6d);color:var(--rc,#8a7d6d)}
.us-rchip--lock{cursor:not-allowed;opacity:.75}
.us-rchip:disabled{cursor:not-allowed}
.us-rchip__x{font-size:.9rem;line-height:1}
.us-rchip input{position:absolute;opacity:0;width:0;height:0}
label.us-rchip{position:relative}
label.us-rchip span{pointer-events:none}
label.us-rchip:has(input:checked){background:color-mix(in srgb,var(--rc,#8a7d6d) 16%,var(--surface,#fffdf9));
  border-color:var(--rc,#8a7d6d);color:var(--rc,#8a7d6d);font-weight:700}
label.us-rchip input:focus-visible ~ span{outline:2px solid var(--primary,#c2410c);outline-offset:3px}
.us-eff{display:flex;flex-direction:column;gap:4px}
.us-eff__r{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"i n l" ". v v";
  align-items:center;gap:3px 8px;padding:7px 10px;border-radius:9px;
  background:var(--surface-2,#f1e9dd);font-size:.81rem}
.us-eff__r .pm-ico{grid-area:i;width:20px;height:20px;font-size:.72rem}
.us-eff__r b{grid-area:n;font-weight:600;min-width:0}
.us-eff__r .pm-lv{grid-area:l;white-space:nowrap}
.us-eff__via{grid-area:v;font-size:.71rem;color:var(--text-mut,#7c6d60)}
.us-eff__r .badge{grid-area:l}
.us-note{font-size:.78rem;margin-top:12px}
.us-kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px dashed var(--divider,#efe7db);font-size:.85rem}
.us-kv b{font-weight:600}
.us-kv span{color:var(--text-mut,#7c6d60);text-align:right}
.us-form .field{margin-top:10px}
.us-act{display:flex;gap:9px;align-items:flex-start;padding:7px 0;
  border-bottom:1px dashed var(--divider,#efe7db);font-size:.82rem}
.us-act:last-child{border-bottom:0}
.us-act time{color:var(--text-mut,#7c6d60);font-size:.73rem;white-space:nowrap;flex:0 0 auto}
.us-act small{color:var(--text-mut,#7c6d60);opacity:.8}
.us-f{max-width:170px}

/* ═══ ЖУРНАЛ ДІЙ ═══════════════════════════════════════════════════════════ */
table.list-table{border-collapse:separate;border-spacing:0;width:100%;font-size:.85rem}
.list-table th,.list-table td{padding:9px 12px;border-bottom:1px solid var(--divider,#efe7db);
  text-align:left;vertical-align:top}
.list-table thead th{position:sticky;top:0;z-index:2;background:var(--surface,#fffdf9);
  border-bottom:1px solid var(--border,#e8dfd1);font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-mut,#7c6d60)}
.list-table tbody tr:last-child td{border-bottom:0}
.list-table tbody tr:hover{background:var(--primary-soft,rgba(194,65,12,.12))}
.ad-when{width:140px;white-space:nowrap;color:var(--text-mut,#7c6d60);font-size:.8rem}
.ad-who{width:190px;overflow-wrap:anywhere}
.ad-ip{width:130px;color:var(--text-mut,#7c6d60);font-size:.78rem;white-space:nowrap}
.ad-title{font-weight:600;margin-right:7px}
.ad-detail{display:block;font-size:.78rem;color:var(--text-mut,#7c6d60);margin-top:3px;line-height:1.4}
.ad-off{opacity:.7;text-decoration:line-through}
.ad-pager{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:14px}
@media(max-width:760px){
  .ad-ip{display:none}
  .ad-who{width:auto}
  .ad-when{width:110px}
}

/* ── Спостереження за гейтами ─────────────────────────────────────────────── */
.pb-block{background:var(--surface,#fffdf9);border:1px solid var(--border,#e8dfd1);
  border-radius:var(--radius,14px);box-shadow:var(--shadow,0 1px 2px rgba(80,55,30,.06));
  overflow:hidden;margin-bottom:12px}
.pb-head{display:flex;align-items:center;gap:10px;padding:11px 14px;flex-wrap:wrap;
  border-bottom:1px solid var(--divider,#efe7db);background:var(--surface-2,#f1e9dd)}
.pb-head b{font-size:.95rem}
.pb-head .inline-form{display:inline}
.pb-hits{width:110px;text-align:right}
.pb-hits b{font-size:1rem}
.pb-block code{font-size:.76rem;color:var(--text-mut,#7c6d60)}
.pm-tabn{font-size:.72rem;background:var(--primary-soft,rgba(194,65,12,.12));
  color:var(--primary,#c2410c);border-radius:999px;padding:0 7px;font-weight:700}

/* ── Перемикач режиму гейта в матриці ─────────────────────────────────────── */
.pm-gate{display:inline-flex;gap:1px;background:var(--surface-2,#f1e9dd);border-radius:8px;
  padding:2px;margin-top:5px}
.pm-gate button{border:0;background:none;font:inherit;font-size:.68rem;font-weight:600;
  color:var(--text-mut,#7c6d60);padding:3px 7px;border-radius:6px;cursor:pointer;white-space:nowrap}
.pm-gate button:hover{color:var(--text,#2c2420)}
.pm-gate button[aria-pressed="true"]{background:var(--surface,#fffdf9);
  box-shadow:var(--shadow,0 1px 2px rgba(80,55,30,.06))}
.pm-gate button[data-gm="off"][aria-pressed="true"]{color:var(--text-mut,#7c6d60)}
.pm-gate button[data-gm="observe"][aria-pressed="true"]{color:#2f6df6}
.pm-gate button[data-gm="enforce"][aria-pressed="true"]{color:var(--ok,#1f9d57)}

/* ═══ ЩІЛЬНИЙ РЕЖИМ ════════════════════════════════════════════════════════
   data-dens на <html> — один прапорець на весь хаб (див. layout.php і app.js).
   Тут — ролі, користувачі та журнал дій; матриця прав живе в permissions.css.
   Зменшуємо тільки відступи й кегль: жодна колонка й жоден підпис не зникають.
   ========================================================================== */
.dens-toggle[aria-pressed="true"] .theme-toggle__icon{color:var(--primary,#c2410c)}

/* ── Ролі ────────────────────────────────────────────────────────────────── */
[data-dens="1"] .rl-list{gap:6px}
[data-dens="1"] .rl{padding:7px 12px;gap:10px}
[data-dens="1"] .rl__av{width:27px;height:27px;border-radius:8px;font-size:.74rem}
[data-dens="1"] .rl__title{font-size:.88rem;gap:7px}
[data-dens="1"] .rl__desc{font-size:.76rem;margin-top:1px}
[data-dens="1"] .rl__stats{gap:12px}
[data-dens="1"] .rl__stat{min-width:48px}
[data-dens="1"] .rl__stat b{font-size:.92rem}
[data-dens="1"] .rl__stat span{font-size:.67rem}
[data-dens="1"] .rl-arch{margin-top:16px}
[data-dens="1"] .rl-arch>summary{padding:7px 11px;font-size:.85rem}

/* ── Користувачі ─────────────────────────────────────────────────────────── */
[data-dens="1"] .us{gap:13px}
[data-dens="1"] .us-row{padding:6px 11px;gap:9px}
[data-dens="1"] .us__av{width:27px;height:27px;font-size:.7rem}
[data-dens="1"] .us-row__n b{font-size:.85rem}
[data-dens="1"] .us-row__e{font-size:.73rem}
/* Пошта і чипи ролей стають одним рядком замість двох: рядок 74px → 58px. */
[data-dens="1"] .us-row__b{display:flex;flex-wrap:wrap;align-items:center;gap:1px 10px}
[data-dens="1"] .us-row__n{flex:0 0 100%}
[data-dens="1"] .us-row__chips{margin-top:0;gap:3px}
[data-dens="1"] .us-row__meta{font-size:.7rem}
[data-dens="1"] .us-pend>summary{padding:8px 12px;font-size:.86rem}
[data-dens="1"] .us-pend__row{padding:7px 10px;gap:8px}
[data-dens="1"] .us-panel{top:96px}
[data-dens="1"] .us-panel__h{padding:11px 14px 9px;gap:10px}
[data-dens="1"] .us-panel__av{width:36px;height:36px;font-size:.88rem}
[data-dens="1"] .us-panel__n{font-size:.94rem}
[data-dens="1"] .us-panel__b{padding:11px 14px;max-height:calc(100vh - 286px)}
[data-dens="1"] .us-panel__f{padding:9px 14px}
[data-dens="1"] .us-tab{padding:7px 9px;font-size:.78rem}
[data-dens="1"] .us-sect{margin:11px 0 5px}
[data-dens="1"] .us-eff__r{padding:5px 9px;font-size:.78rem}
[data-dens="1"] .us-kv{padding:4px 0;font-size:.81rem}
[data-dens="1"] .us-act{padding:5px 0;font-size:.79rem}
[data-dens="1"] .us-rchip{padding:3px 9px;font-size:.76rem}

/* ── Журнал дій і спостереження ──────────────────────────────────────────── */
[data-dens="1"] table.list-table{font-size:.81rem}
[data-dens="1"] .list-table th,[data-dens="1"] .list-table td{padding:5px 10px}
[data-dens="1"] .ad-when{width:124px;font-size:.75rem}
[data-dens="1"] .ad-who{width:170px}
/* Деталі події не потребують власного рядка — дописуємо їх до заголовка. */
[data-dens="1"] .ad-detail{display:inline;font-size:.74rem;margin:0 0 0 7px}
[data-dens="1"] .ad-pager{margin-top:10px}
[data-dens="1"] .pb-block{margin-bottom:9px}
[data-dens="1"] .pb-head{padding:8px 12px;gap:8px}
[data-dens="1"] .pb-head b{font-size:.89rem}

/* ═══ ⤢ РОЗГОРНУТА КАРТКА КОРИСТУВАЧА ══════════════════════════════════════
   Та сама розмітка у двох режимах: збоку — швидкий перегляд, ⤢ — по центру на
   всю ширину. Нічого не переносимо в DOM: лише клас на <aside>, бо панель
   перемальовується підміною innerHTML і будь-який переїзд загубився б.
   ⚠️ Селектори парні (.us-panel.us-panel--wide), щоб перебити [data-dens="1"]
   з такою ж вагою — цей блок іде останнім у файлі, тож виграє за порядком. */
.us-panel__wide{border:0;background:transparent;color:var(--text-mut,#7c6d60);font-size:1.05rem;
  line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px}
.us-panel__wide:hover{background:var(--surface-2,#f1e9dd);color:var(--text,#2c2420)}
/* ⚠️ Показуємо/ховаємо через display, а НЕ через opacity з transition:
   у неактивній (тротлінгованій) вкладці перехід не стартує і підкладка
   лишається прозорою назавжди — та сама грабля, що з rAF у модалці доступів. */
.us-back{position:fixed;inset:0;background:rgba(12,18,32,.5);z-index:1100;display:none}
.us-panel--wide + .us-back{display:block}
.us-panel.us-panel--wide{position:fixed;z-index:1110;top:50%;left:50%;
  transform:translate(-50%,-50%);width:min(1040px,calc(100vw - 40px));max-height:92vh;
  display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(10,15,30,.45)}
.us-panel--wide .us-panel__h{padding:18px 22px 14px}
.us-panel--wide .us-tabs{padding:0 14px}
/* min-height:0 обовʼязково: за замовчуванням flex-елемент не стискається
   менше за свій вміст, і низ картки заїжджав би під підвал. */
.us-panel--wide .us-panel__b{max-height:none;flex:0 1 auto;min-height:0;overflow:auto;padding:18px 22px}
.us-panel--wide .us-panel__f{padding:12px 22px}
.us-panel--wide .us-panel__wide{color:var(--primary,#c2410c)}
html.us-wide-on body{overflow:hidden}
/* Нижче 1180 px панель стає статичною (правило вище по файлу) — повертаємо їй
   фіксацію, інакше «розгорнути» просто прокрутило б сторінку донизу. */
@media(max-width:1180px){.us-panel.us-panel--wide{position:fixed!important}}
@media(max-width:700px){
  .us-panel.us-panel--wide{width:100vw;height:100dvh;max-height:100dvh;
    top:0;left:0;transform:none;border-radius:0}
}