/* ─────────────────────────────────────────────────────────────────────────
   Permessi → Profili — stili pagina (Ruoli / Utenti / Menu).
   Riusa i token di styles.css e il chrome di agent-edit.css (.ae-chrome,
   .ae-head, .ae-tabs, .ae-formfoot). Tutto qui è prefissato `pm-`.
   ───────────────────────────────────────────────────────────────────────── */

.pm-page { padding-bottom: 0; }

/* Layout a colonne — riempie l'altezza tra chrome sticky e footer sticky,
   ogni pannello scrolla per conto suo. */
.pm-cols {
  display: grid;
  gap: 14px;
  height: calc(100vh - 286px);
  min-height: 420px;
  margin: 14px 0;
}
.pm-cols-3 { grid-template-columns: 264px minmax(320px, 1fr) minmax(360px, 1.12fr); }
.pm-cols-2 { grid-template-columns: 264px minmax(420px, 1fr); }
.pm-one { grid-template-columns: 1fr; }

@media (max-width: 1100px) {
  .pm-cols { height: auto; }
  .pm-cols-3, .pm-cols-2 { grid-template-columns: 1fr; }
}

/* ── Selettore Profilo — barra orizzontale (sostituisce la colonna) ──
   Band full-bleed con hr attaccata sotto; rimpiazza il bordo del chrome
   (così la linea è subito sotto i profili). Scorre in orizzontale se molti. */
.pm-page .ae-chrome { border-bottom: 0; }
.pm-profilebar {
  display: flex; align-items: center; gap: 14px;
  margin: 4px -36px 0; padding: 12px 36px 13px;
  border-bottom: 1px solid var(--border);
}
.pm-profilebar-lbl { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.pm-profilebar-scroll { display: flex; align-items: center; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; padding-bottom: 2px; }
.pm-profpill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pm-profpill:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
.pm-profpill.on { background: var(--accent-soft); border-color: var(--accent); }
.pm-profpill-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pm-profpill-name { font-size: 13px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.pm-profpill-meta { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.pm-profpill.on .pm-profpill-meta { color: var(--text-link); }
.pm-profpill.sm { padding: 5px 11px; }
/* Profilo marcato per il confronto (⌘/Ctrl+click) — badge A/B */
.pm-profpill.cmp { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-ring); }
.pm-profpill-cmp {
  margin-left: 2px; width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.pm-profilebar-hint { flex-shrink: 0; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.pm-profilebar-hint .kbd { margin-right: 3px; }
@media (max-width: 1100px) { .pm-profilebar-hint { display: none; } }

/* Toggle Espandi/Comprimi gruppi nella toolbar (icona Generale) */
.pm-panel-tools .ae-sections-toggle { margin: 0; flex-shrink: 0; }

/* Pannello generico */
.pm-panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-content);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pm-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 16px 12px;
  border-bottom: 1px solid var(--border-faint);
}
.pm-panel-title { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.pm-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.pm-panel-tools { padding: 11px 12px; border-bottom: 1px solid var(--border-faint); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-panel-tools.col { flex-direction: column; align-items: stretch; gap: 10px; }

.pm-count-pill {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.pm-count-pill.big { font-size: 13px; padding: 4px 12px; color: var(--text); }

/* ── Colonna Profili ── */
.pm-prof {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pm-prof:hover { background: var(--bg-card-hover); }
.pm-prof.on { background: var(--accent-soft); border-color: var(--accent); }
.pm-prof-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pm-prof-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-prof-name { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.pm-prof-sub { font-size: 11.5px; color: var(--text-faint); }
.pm-prof-pills { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pm-pill {
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  color: var(--text-link); background: var(--accent-soft);
  border: 1px solid var(--accent-ring); border-radius: 999px; padding: 1px 8px;
}

/* ── Tab Ruoli · lista Modelli ── */
.pm-model-list { gap: 2px; }
.pm-model {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pm-model:hover { background: var(--bg-card-hover); }
.pm-model.on { background: var(--accent-soft); border-color: var(--accent); }
.pm-model.is-disabled { opacity: .42; cursor: default; }
.pm-model-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-perm-icons { display: flex; align-items: center; gap: 4px; }
.pm-perm-btn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid var(--border-faint);
  background: var(--bg-card); color: var(--text-faint); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.pm-perm-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border); }
.pm-perm-btn.on { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
.pm-perm-btn:disabled { cursor: default; }
.pm-perm-btn.ghost { background: transparent; border-color: transparent; pointer-events: none; }
.pm-extra-pill {
  margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px; min-width: 26px; text-align: center;
}

/* ── Tab Ruoli · dettaglio modello ── */
.pm-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px 12px; border-bottom: 1px solid var(--border-faint);
}
.pm-detail-profile { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.pm-detail .pm-panel-body { gap: 22px; padding: 16px; }
.pm-model-ident { display: flex; flex-direction: column; gap: 2px; }
.pm-model-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.pm-model-key { margin: 0; font-size: 12px; color: var(--text-faint); }

.pm-sec { display: flex; flex-direction: column; gap: 11px; }
.pm-sec-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pm-sec-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pm-sec-count { font-size: 11px; font-weight: 700; color: var(--accent); }
.pm-sec-sub { font-size: 12px; color: var(--text-faint); }

.pm-quickseg.wide { width: 100%; }
.pm-quickseg.wide .seg-btn { flex: 1; }

/* Permessi generali — toggle-card (convenzione: stato dal bordo) */
.pm-permgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-togglecard:not(.on) .ty-card-thumb,
.pm-togglecard:not(.on) .ty-card-name,
.pm-togglecard:not(.on) .ty-card-desc { opacity: .5; }
.pm-togglecard.is-disabled { opacity: .4; cursor: default; box-shadow: none; }
@media (max-width: 520px) { .pm-permgrid { grid-template-columns: 1fr; } }

/* Funzionalità aggiuntive — chip multi-select */
.pm-feats { display: flex; flex-wrap: wrap; gap: 7px; }
.pm-feat {
  font-size: 11.5px; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.pm-feat:hover { border-color: var(--border-strong); color: var(--text); }
.pm-feat.on { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--text-link); }

/* ── Tab Utenti ── */
.pm-user-list { gap: 2px; }
.pm-user { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-md); transition: background .12s; }
.pm-user:hover { background: var(--bg-card-hover); }
.pm-ava {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; letter-spacing: .02em;
}
.pm-user-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pm-user-name { font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
.pm-user-mail { font-size: 12px; color: var(--text-faint); }
.pm-user-rm {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.pm-user-rm:hover { background: rgba(231,96,96,.12); border-color: rgba(231,96,96,.4); color: var(--danger); }

/* ── Tab Menu ── */
.pm-menu-top { display: flex; align-items: center; gap: 10px; }
.pm-quickbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.pm-quickbar-lbl { color: var(--text-faint); }
.pm-link { background: none; border: none; padding: 0; color: var(--text-link); cursor: pointer; font-size: 12.5px; }
.pm-link:hover { text-decoration: underline; }
.pm-quickbar-tot { margin-left: auto; color: var(--text-faint); }

.pm-caret {
  width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-muted); cursor: pointer; border-radius: 5px;
  transition: transform .14s;
}
.pm-caret.open { transform: rotate(90deg); }

/* Tabella Menu — stessa scocca della Vista Directory · Lista, con espansione
   inline dei rami. Riusa .list-view/.list-row/.list-name/.tree-caret-btn. */
.pm-menu-body { padding: 12px; gap: 0; }
.pm-menu-list .list-row {
  grid-template-columns: minmax(240px, 1.8fr) 134px minmax(150px, 1fr) 96px 104px 40px;
  gap: 14px;
  cursor: pointer;
}
.pm-menu-act { display: flex; align-items: center; justify-content: flex-end; }
.pm-menu-list .list-row.head { cursor: default; }
.pm-menu-ico { display: flex; align-items: center; color: var(--text-muted); flex-shrink: 0; }
.pm-menu-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text); }
.pm-menu-row.branch .pm-menu-name { font-weight: 600; color: var(--text-strong); }
.pm-menu-key { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-menu-count {
  font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums;
  background: var(--bg-app); border: 1px solid var(--border-faint); border-radius: 999px; padding: 1px 8px;
}
.pm-menu-dash { color: var(--text-faint); }
.pm-menu-list .tipo-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.pm-menu-vis { display: flex; align-items: center; }
.pm-menu-row.is-hidden .pm-menu-name,
.pm-menu-row.is-hidden .pm-menu-ico { opacity: .5; }

.pm-check {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1.5px solid var(--border-strong); color: #fff; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pm-check.on { background: var(--accent); border-color: var(--accent); }
.pm-check.mixed { background: var(--accent-soft); border-color: var(--accent); }
.pm-check-dash { width: 9px; height: 2px; border-radius: 2px; background: var(--accent); }

/* Empty-state pannelli */
.pm-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 40px; color: var(--text-faint); font-size: 13px; text-align: center;
}
.pm-empty svg { color: var(--text-faint); }

/* ── Tab Ruoli · matrice editabile ── */
.pm-panel-sub { font-size: 12.5px; color: var(--text-faint); margin-right: 2px; }
.pm-matrix .pm-panel-body { padding: 0; gap: 0; }
.pm-grid { display: grid; grid-template-columns: 28px minmax(0, 1fr) 142px 38px 38px 38px 38px 58px; align-items: center; gap: 6px; }

.pm-matrix-bar { padding: 7px 14px; border-bottom: 1px solid var(--border-faint); min-height: 44px; display: flex; align-items: center; }
.pm-matrix-head { width: 100%; color: var(--text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pm-mh-extra { text-align: center; }
.pm-mh-col {
  justify-self: center; width: 30px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid var(--border-faint); background: var(--bg-card); color: var(--text-faint);
  cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.pm-mh-col:hover { color: var(--text-muted); border-color: var(--border); }
.pm-mh-col.on { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); }
.pm-mh-col.mixed { color: var(--accent); border-color: var(--accent-ring); }

.pm-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.pm-bulk-n { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.pm-bulk-lbl { font-size: 12.5px; color: var(--text-muted); }
.pm-bulk-btn { font-size: 12px; padding: 4px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.pm-bulk-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.pm-grp { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--bg-card); border-top: 1px solid var(--border-faint); cursor: pointer; }
.pm-grp:hover { background: var(--bg-card-hover); }
.pm-grp-ico { display: flex; color: var(--text-muted); }
.pm-grp-label { font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.pm-grp-count { font-size: 11px; color: var(--text-faint); background: var(--bg-app); border: 1px solid var(--border-faint); border-radius: 999px; padding: 1px 7px; }

.pm-mrow { padding: 7px 14px; border-top: 1px solid var(--border-faint); }
.pm-mrow:hover { background: var(--bg-card-hover); }
.pm-mrow.sel { background: var(--accent-soft); }
.pm-mrow.dis { opacity: .45; }
.pm-mrow-name { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; font-size: 13px; color: var(--text); }
.pm-mrow-l1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pm-mrow-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-mrow-key { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-mod-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex-shrink: 0; }

.pm-cell {
  justify-self: center; width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--border-faint); background: var(--bg-card); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pm-cell:hover:not(:disabled) { border-color: var(--border-strong); }
.pm-cell.on { background: var(--accent); border-color: var(--accent); }
.pm-cell.ghost { background: transparent; border: none; pointer-events: none; }
.pm-cell:disabled { cursor: default; }

.pm-level {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 8px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: 12px; cursor: pointer;
  transition: border-color .12s;
}
.pm-level:hover:not(:disabled) { border-color: var(--border-strong); }
.pm-level:disabled { opacity: .5; cursor: default; }
.pm-level-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pm-level-lbl { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-level-na { color: var(--text-faint); font-size: 12px; padding-left: 4px; }
.pm-level-menu { position: fixed; z-index: 80; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 5px; }
.pm-level-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 6px; background: none; border: none; color: var(--text); font-size: 13px; cursor: pointer; text-align: left; }
.pm-level-item:hover { background: var(--bg-card-hover); }
.pm-level-item .nm { flex: 1; }
.pm-level-item.on { color: var(--text-strong); font-weight: 500; }
.pm-level-item > svg:last-child { color: var(--accent); }

.pm-mrow-extra {
  justify-self: center; display: inline-flex; align-items: center; gap: 1px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 7px 2px 9px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.pm-mrow-extra:hover { border-color: var(--accent); color: var(--accent); }
.pm-mrow-extra.open { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }
.pm-mrow-extra svg { transition: transform .14s; }
.pm-mrow-extra.open svg { transform: rotate(90deg); }
.pm-mrow-extra.empty { background: none; border: none; color: var(--text-faint); cursor: default; padding: 0; }

.pm-mexp { padding: 12px 16px 14px 50px; background: var(--bg-app); border-top: 1px dashed var(--border); }
.pm-mexp-head { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }

.pm-check.sm { width: 18px; height: 18px; border-radius: 5px; border-width: 1.5px; }

/* Header matrice sticky DENTRO il body → stessa larghezza delle righe (allineamento). */
.pm-matrix-body .pm-matrix-bar { position: sticky; top: 0; z-index: 6; background: var(--bg-content); }

/* La ricerca occupa lo spazio; i link Espandi/Comprimi a destra. */
.pm-panel-tools .pm-search { flex: 1; }

.pm-mrow-extra .lbl { font-variant-numeric: tabular-nums; }
.pm-mrow-extra.slim { padding: 3px 6px; gap: 0; }

/* Descrizione del modello nel pannello espanso. */
.pm-mexp-desc { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.5; max-width: 90ch; }

/* ── Confronta ruoli (modale diff) ── */
.pm-modal-backdrop {
  position: fixed; inset: 0; z-index: 90; background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  backdrop-filter: blur(2px);
}
.pm-modal {
  width: min(980px, 100%); max-height: calc(100vh - 56px); display: flex; flex-direction: column;
  background: var(--bg-content); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}
.pm-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-faint); }
.pm-modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.pm-modal-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-faint); }
.pm-modal-x { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pm-modal-x:hover { color: var(--text-strong); border-color: var(--border-strong); }
.pm-modal-foot { padding: 12px 20px; border-top: 1px solid var(--border-faint); display: flex; justify-content: flex-end; }

/* Coppia di profili a confronto (scelta a priori, non modificabile) */
.pm-cmp-pair { display: flex; align-items: stretch; gap: 14px; padding: 16px 20px 8px; }
.pm-cmp-prof {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-card);
}
.pm-cmp-tag { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pm-cmp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pm-cmp-pname { font-size: 14px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.pm-cmp-pmeta { font-size: 11.5px; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.pm-cmp-vs { align-self: center; flex-shrink: 0; color: var(--text-muted); }

.pm-cmp-toolbar { display: flex; align-items: center; gap: 16px; padding: 10px 20px; }
.pm-cmp-summary { font-size: 12.5px; color: var(--text-muted); }
.pm-cmp-summary b { color: var(--accent); }
.pm-cmp-check { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.pm-cmp-check input { accent-color: var(--accent); }

.pm-cmp-table { min-height: 0; display: flex; flex-direction: column; padding: 0 20px 4px; }
.pm-cmp-scroll { overflow-y: auto; }
.pm-cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 10px 8px; }
.pm-cmp-row.head { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-faint); position: sticky; top: 0; background: var(--bg-content); z-index: 1; padding-bottom: 8px; }
.pm-cmp-scroll .pm-cmp-row { border-bottom: 1px solid var(--border-faint); }
.pm-cmp-scroll .pm-cmp-row:last-child { border-bottom: 0; }
.pm-cmp-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-cmp-name .nm { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-cmp-name .mono { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Livelli A → direzione → B */
.pm-cmp-levels { display: flex; align-items: center; gap: 9px; justify-self: end; }
.pm-cmp-levels-h { justify-self: end; }
.pm-cmp-lvl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); white-space: nowrap; }
.pm-cmp-dir { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.pm-cmp-dir.less { background: rgba(231,96,96,.14); color: var(--danger); }
.pm-cmp-dir.more { background: rgba(47,179,122,.14); color: #46c08a; }
.pm-cmp-dir.mixed { background: rgba(217,161,58,.16); color: var(--warn); }
.pm-cmp-dir.same { color: var(--text-faint); }

/* Riga delta: cosa B PERDE (rosso) / OTTIENE (verde) rispetto ad A */
.pm-cmp-delta { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; padding: 9px 0 1px; }
.pm-d-line { display: flex; align-items: flex-start; gap: 8px; }
.pm-d-lbl { flex-shrink: 0; width: 54px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--danger); padding-top: 3px; }
.pm-d-lbl.gain { color: #46c08a; }
.pm-d-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pm-d-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.pm-d-chip.lost { color: var(--danger); border-color: rgba(231,96,96,.4); background: rgba(231,96,96,.10); }
.pm-d-chip.gain { color: #46c08a; border-color: rgba(47,179,122,.45); background: rgba(47,179,122,.10); }
.pm-d-chip.mono { font-family: var(--mono); font-size: 11px; }

/* Headline riassuntiva (colpo d'occhio) */
.pm-cmp-headline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pm-cmp-hl-main { font-size: 13px; color: var(--text-muted); }
.pm-cmp-hl-main b { color: var(--text-strong); font-weight: 600; }
.pm-cmp-hl-stat { font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.pm-cmp-hl-stat.less { color: var(--danger); background: rgba(231,96,96,.12); }
.pm-cmp-hl-stat.more { color: #46c08a; background: rgba(47,179,122,.12); }
.pm-cmp-hl-stat.mixed { color: var(--warn); background: rgba(217,161,58,.12); }
.pm-cmp-hl-stat.same { color: var(--text-muted); background: var(--bg-card); }

/* I tab di Profili: stesso stile delle altre pagine, ma senza margine extra */
.pm-tabs { margin-top: 4px; }