:root {
  --bg: #080b16;
  --text: #f7f8ff;
  --muted: #a8b2d5;
  --muted2: #7783a7;
  --line: rgba(255,255,255,.12);
  --line2: rgba(255,255,255,.07);
  --accent: #7287ff;
  --accent2: #54d6a6;
  --danger: #ff6375;
  --warn: #ffd166;
  --inherit: #b7a5ff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 0 0, rgba(114,135,255,.18), transparent 28%), linear-gradient(180deg, #0b1022 0%, var(--bg) 100%);
}
button, input, select { font: inherit; }
button { border: 0; border-radius: 12px; min-height: 38px; padding: 9px 12px; cursor: pointer; font-weight: 760; }
button:disabled { opacity: .46; cursor: not-allowed; }
.primary { color: #fff; background: linear-gradient(180deg, #7f93ff, #6076ef); }
.secondary { color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.dangerGhost { color: var(--danger); background: rgba(255,99,117,.12); border: 1px solid rgba(255,99,117,.35); }
.successText { color: var(--accent2); }
.warningText { color: var(--warn); }
input, select { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.25); color: var(--text); padding: 9px 11px; outline: none; }
input:focus, select:focus { border-color: rgba(114,135,255,.7); box-shadow: 0 0 0 3px rgba(114,135,255,.12); }
select option { background: #11172a; color: var(--text); }
code { color: #dce1ff; }
.hidden { display: none !important; }
.appShell { width: min(1880px, calc(100vw - 26px)); margin: 12px auto 28px; }
.card { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035)); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.topBar { min-height: 76px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.eyebrow { margin: 0 0 4px; color: var(--accent2); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 850; }
h1 { margin: 0; font-size: clamp(24px, 2vw, 34px); line-height: 1.05; }
h2 { margin: 0 0 5px; font-size: 22px; line-height: 1.15; }
h3 { margin: 0; font-size: 15px; }
p { margin: 0; color: var(--muted); line-height: 1.42; }
.sub { margin-top: 6px; max-width: 980px; font-size: 14px; }
.topActions { display: flex; gap: 8px; }
.loginCard { max-width: 820px; padding: 18px; margin: 0 auto; }
.loginGrid { margin-top: 14px; display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; }
.hint { margin-top: 10px; color: var(--muted); font-size: 13px; }
.overviewBar { padding: 12px; display: grid; grid-template-columns: minmax(300px, 1.8fr) repeat(3, minmax(150px, .45fr)); gap: 12px; margin-bottom: 12px; }
.overviewItem { display: grid; gap: 6px; align-content: center; }
.overviewLabel { color: #c4ceff; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 850; }
.compactStat { border: 1px solid var(--line2); border-radius: 14px; background: rgba(0,0,0,.13); padding: 10px 12px; }
.compactStat strong { font-size: 27px; line-height: 1; }
.workspace { display: grid; grid-template-columns: 370px 470px minmax(760px, 1fr); gap: 12px; align-items: start; }
.sectionCard { min-width: 0; padding: 14px; display: flex; flex-direction: column; }
.rolesCard, .channelsCard { height: calc(100vh - 305px); min-height: 560px; overflow: hidden; }
.permissionsCard { min-height: 560px; overflow: visible; }
.panelHeader { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; margin-bottom: 12px; }
.permissionsHeader { align-items: center; }
.miniActions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.smallBtn { min-height: 34px; padding: 7px 10px; font-size: 13px; }
.stack { display: grid; gap: 8px; }
.filterGrid { display: grid; gap: 9px; }
.channelFilters { grid-template-columns: minmax(130px, 1.4fr) minmax(130px, 1fr) minmax(115px, .85fr); }
.list { min-height: 0; flex: 1; display: grid; align-content: start; gap: 8px; overflow-y: auto; overflow-x: hidden; padding: 10px 5px 2px 0; scrollbar-color: rgba(255,255,255,.32) transparent; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 11px; min-height: 58px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(0,0,0,.16); }
.item input { width: 18px; height: 18px; margin: 0; }
.item strong { display: block; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.item small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; color: var(--muted); font-size: 11px; text-transform: capitalize; }
.roleBadge { display: inline-flex !important; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 99px; border: 1px solid rgba(255,255,255,.22); flex: 0 0 auto; }
.warning { color: var(--warn); border: 1px solid rgba(255,209,102,.35); border-radius: 12px; background: rgba(255,209,102,.10); padding: 9px 10px; font-size: 13px; }
.legend { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; font-size: 11px; }
.neutral { color: var(--muted); }
.allow { color: var(--accent2); }
.deny { color: var(--danger); }
.inherit { color: var(--inherit); }
.advancedTools { margin-bottom: 10px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(0,0,0,.12); overflow: hidden; }
.advancedTools > summary { padding: 10px 12px; cursor: pointer; color: #dce2ff; font-weight: 800; background: rgba(255,255,255,.045); }
.toolStack { display: grid; gap: 10px; padding: 10px; }
.subtleCard { border: 1px solid var(--line2); border-radius: 13px; background: rgba(255,255,255,.035); padding: 10px; }
.toolTitle { margin-bottom: 8px; }
.toolTitle p { font-size: 13px; }
.presetGrid { grid-template-columns: minmax(140px, 1fr) auto minmax(150px, 1.1fr) auto auto; }
.cloneGrid { grid-template-columns: 1fr 1fr auto; }
.duplicateGrid { grid-template-columns: 1fr auto; }
.presetActions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.permissionList { display: grid; gap: 12px; overflow: visible; min-height: auto; flex: 0 0 auto; padding: 0; }
.permBlock { border: 1px solid var(--line2); border-radius: 14px; overflow: visible; background: rgba(0,0,0,.12); }
.permBlockHeader { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line2); background: rgba(255,255,255,.05); }
.permBlockHeader h3 { margin: 0; font-size: 15px; }
.permBlockHeader small { display: block; margin-top: 2px; color: var(--muted2); font-size: 11px; }
.groupToolbar { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.bulkBtn { min-height: 30px; padding: 6px 9px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.permTable { display: grid; overflow: visible; }
.permRow { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(350px, 390px); gap: 16px; align-items: center; min-height: 62px; padding: 12px; border-top: 1px solid var(--line2); }
.permRow:first-child { border-top: 0; }
.permRow:hover { background: rgba(114,135,255,.045); }
.permInfo { min-width: 0; display: grid; gap: 2px; }
.permInfo strong { font-size: 13px; line-height: 1.25; }
.permInfo small { color: var(--muted2); font-size: 11px; overflow-wrap: anywhere; }
.permChoices { display: grid; grid-template-columns: repeat(4, minmax(78px, 1fr)); gap: 6px; min-width: 350px; }
.permChoice { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px; color: var(--muted); font-size: 11px; white-space: nowrap; cursor: pointer; }
.permChoice input { width: 13px; height: 13px; margin: 0; }
.applyCard { margin-top: 12px; padding: 14px; position: static; }
.applyLayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: 14px; align-items: start; }
.applyTitleRow { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.summary { margin-top: 10px; padding: 11px 12px; border: 1px dashed var(--line); border-radius: 13px; background: rgba(0,0,0,.12); color: var(--muted); font-size: 13px; line-height: 1.5; }
.summary strong { color: var(--text); }
.confirmGrid { margin-top: 9px; display: grid; grid-template-columns: minmax(230px,.7fr) minmax(360px,1fr); gap: 8px; }
.checkLine { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line2); border-radius: 12px; background: rgba(0,0,0,.10); padding: 9px 10px; color: var(--muted); font-size: 13px; }
.checkLine input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; }
.auditDetails { border: 1px solid var(--line2); border-radius: 14px; background: rgba(0,0,0,.12); overflow: hidden; }
.auditDetails > summary { padding: 10px 12px; cursor: pointer; font-weight: 850; background: rgba(255,255,255,.045); }
.auditBody { padding: 10px; }
.auditActions { justify-content: flex-start; margin-bottom: 8px; }
.auditList { display: grid; gap: 8px; max-height: 190px; overflow: auto; color: var(--muted); font-size: 13px; }
.auditItem { border: 1px solid var(--line2); border-radius: 12px; background: rgba(255,255,255,.035); padding: 9px 10px; display: grid; gap: 4px; }
.auditItem strong { color: var(--text); }
.auditMeta { color: var(--muted2); font-size: 12px; }
.auditItem.undone { opacity: .62; }
.result { margin-top: 12px; max-height: 280px; overflow: auto; white-space: pre-wrap; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.32); padding: 10px; }
.mobileTabbar { display: none; }
@media (max-width: 1650px) { .workspace { grid-template-columns: 350px 450px minmax(700px, 1fr); } .permRow { grid-template-columns: minmax(210px, 1fr) minmax(330px, 370px); } .permChoices { min-width: 330px; } }
@media (max-width: 1350px) { .workspace { grid-template-columns: 1fr 1fr; } .rolesCard, .channelsCard { height: 560px; } .permissionsCard { grid-column: 1 / -1; } .permRow { grid-template-columns: minmax(250px, 1fr) minmax(350px, 390px); } .applyLayout { grid-template-columns: 1fr; } .confirmGrid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .appShell { width: min(100vw - 14px, 760px); margin: 8px auto 138px; } .topBar { flex-direction: column; align-items: stretch; padding: 14px; } h1 { font-size: 28px; } .loginGrid { grid-template-columns: 1fr; } .overviewBar { grid-template-columns: repeat(2, 1fr); } .serverSelectBox { grid-column: 1 / -1; } .workspace { grid-template-columns: 1fr; } .rolesCard, .channelsCard { height: auto; min-height: 260px; overflow: visible; } .panelHeader, .permissionsHeader { grid-template-columns: 1fr; } .miniActions, .legend, .groupToolbar, .presetActions { justify-content: flex-start; } .list { max-height: none; overflow: visible; } .channelFilters, .presetGrid, .cloneGrid, .duplicateGrid { grid-template-columns: 1fr; } .permBlockHeader { grid-template-columns: 1fr; } .permRow { grid-template-columns: 1fr; } .permChoices { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; } .permChoice { width: 100%; } .applyTitleRow { flex-direction: column; } .applyTitleRow .primary { width: 100%; } .applyLayout { grid-template-columns: 1fr; } .mobileTabbar { position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px; border-radius: 18px; background: rgba(15,18,34,.93); border: 1px solid var(--line); backdrop-filter: blur(12px); } .tabBtn { min-height: 42px; padding: 8px 6px; font-size: 12px; border-radius: 12px; background: rgba(255,255,255,.06); color: var(--text); border: 1px solid transparent; } .tabBtn.active { background: rgba(114,135,255,.2); border-color: rgba(114,135,255,.45); } }


/* Messages / Reminder page */
.appModeNav {
  display: flex;
  gap: 10px;
  padding: 10px;
  margin-bottom: 12px;
}
.modeBtn {
  background: rgba(255,255,255,.07);
  color: var(--text);
  border: 1px solid var(--line);
}
.modeBtn.active {
  background: var(--accentSoft);
  border-color: rgba(113,136,255,.55);
}

.messagesPage {
  display: grid;
  gap: 12px;
}
.messagesHeader {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.messagesGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.messageComposer {
  padding: 14px;
  display: grid;
  gap: 12px;
}
.editorToolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.messageTextarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.24);
  color: var(--text);
  padding: 12px;
  outline: none;
  font: inherit;
  line-height: 1.45;
}
.messageTextarea:focus {
  border-color: rgba(113,136,255,.65);
  box-shadow: 0 0 0 3px rgba(113,136,255,.12);
}
.channelPickerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.messageChannelList {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
  padding-right: 5px;
}
.messageChannelItem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line2);
  background: rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 10px 11px;
}
.messageChannelItem input {
  width: 18px;
  height: 18px;
  margin: 0;
}
.messageChannelItem strong {
  display: block;
  font-size: 14px;
}
.messageChannelItem small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.wideBtn {
  width: 100%;
  min-height: 44px;
}
.formGrid {
  display: grid;
  grid-template-columns: 1.4fr .75fr 1fr;
  gap: 10px;
}
.formGrid label,
.weekdayBox {
  display: grid;
  gap: 6px;
}
.formGrid span,
.weekdayBox > span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 850;
}
.weekdayGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.weekdayGrid label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  color: var(--muted);
  font-size: 12px;
}
.weekdayGrid input {
  width: 14px;
  height: 14px;
  margin: 0;
}
.reminderListCard {
  padding: 14px;
}
.reminderList {
  display: grid;
  gap: 8px;
}
.reminderItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line2);
  background: rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 12px;
}
.reminderItem.disabled {
  opacity: .58;
}
.reminderItem strong {
  display: block;
}
.reminderItem small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.reminderItem p {
  margin-top: 7px;
  color: var(--text);
  opacity: .88;
}
.reminderActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.emptyState {
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 14px;
  background: rgba(0,0,0,.10);
}

@media (max-width: 1180px) {
  .messagesGrid {
    grid-template-columns: 1fr;
  }
  .formGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .appModeNav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .messagesHeader {
    flex-direction: column;
    align-items: stretch;
  }
  .weekdayGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reminderItem {
    grid-template-columns: 1fr;
  }
  .reminderActions {
    justify-content: flex-start;
  }
  .mobileTabbar {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* v4.2 editor/attachments fixes */
.editorHint {
  color: var(--muted);
  font-size: 12px;
  border: 1px solid var(--line2);
  background: rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 8px 10px;
}
.editorHint.active {
  color: var(--green);
  border-color: rgba(69,213,158,.45);
  background: rgba(69,213,158,.08);
}
.messagePreview {
  min-height: 46px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 10px 11px;
  background: rgba(0,0,0,.14);
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.messagePreview strong { font-weight: 850; }
.messagePreview em { font-style: italic; }
.previewPlaceholder {
  color: var(--muted2);
}
.fileList {
  display: grid;
  gap: 8px;
}
.fileEmpty {
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.10);
  font-size: 13px;
}
.fileItem {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line2);
  background: rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 8px 10px;
}
.fileThumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.fileThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fileItem strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.fileItem small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.removeFileBtn {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
}


/* v4.3 Lista utenti */
.usersPage {
  display: grid;
  gap: 12px;
}
.usersHeader {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.usersActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.userStatsGrid {
  display: grid;
  grid-template-columns: minmax(150px, .4fr) minmax(220px, .8fr) minmax(220px, 1fr);
  gap: 12px;
}
.usersTableCard {
  padding: 14px;
}
.usersFilters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, .35fr);
  gap: 10px;
  margin-bottom: 10px;
}
.usersTableWrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--line2);
  border-radius: 14px;
}
.usersTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 1040px;
}
.usersTable th,
.usersTable td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line2);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}
.usersTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #c2cbff;
  background: #11172c;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
}
.usersTable tr:hover td {
  background: rgba(113,136,255,.045);
}
.roleChip {
  display: inline-flex;
  align-items: center;
  margin: 0 4px 4px 0;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  color: var(--text);
  font-size: 12px;
}
.mutedText,
.uidEmpty {
  color: var(--muted2);
}
.uidEmpty::after {
  content: '—';
}
@media (max-width: 760px) {
  .usersHeader {
    flex-direction: column;
    align-items: stretch;
  }
  .usersActions {
    justify-content: flex-start;
  }
  .userStatsGrid,
  .usersFilters {
    grid-template-columns: 1fr;
  }
  .usersTableWrap {
    max-height: none;
  }
}


/* v4.3 nav con terza pagina */
@media (max-width: 760px) {
  .appModeNav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* v4.8 utenti UI compatta + conteggio ruoli */
.usersHeader {
  padding: 12px 14px !important;
  align-items: flex-start;
}
.usersHeader .eyebrow {
  font-size: 11px;
  margin-bottom: 3px;
}
.usersHeader h2 {
  font-size: 22px;
  margin-bottom: 4px;
}
.usersHeader p {
  font-size: 14px;
  max-width: 760px;
}
.usersActions {
  gap: 7px;
}
.usersActions button {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 13px;
  border-radius: 11px;
}
.userStatsGrid {
  grid-template-columns: .45fr .75fr 1.2fr !important;
  gap: 10px;
}
.userStatsGrid .compactStat {
  min-height: 68px;
  padding: 10px 12px;
}
.userStatsGrid .compactStat strong {
  font-size: 18px !important;
  line-height: 1.15;
  word-break: break-word;
}
.userStatsGrid #usersTotalCount {
  font-size: 24px !important;
}
.userStatsGrid #usersUpdatedAt {
  font-size: 20px !important;
}
.userStatsGrid #usersTxtFile {
  display: grid;
  gap: 3px;
  font-size: 12px !important;
  color: var(--muted);
}
.fileNameMini {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text);
  opacity: .9;
  word-break: break-all;
}
.roleCountCard {
  padding: 12px 14px;
}
.roleCountHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.roleCountHeader h3 {
  margin: 0;
  font-size: 16px;
}
.roleCountHeader p {
  font-size: 13px;
}
.roleCountCards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.roleCountPill {
  display: inline-grid;
  grid-template-columns: minmax(40px, auto) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255,255,255,.06);
}
.roleCountPill:hover {
  background: rgba(113,136,255,.12);
  border-color: rgba(113,136,255,.45);
}
.roleCountPill.active {
  background: rgba(113,136,255,.22);
  border-color: rgba(113,136,255,.65);
}
.roleCountPill span {
  font-size: 13px;
}
.roleCountPill strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  font-size: 13px;
}
.usersTableCard {
  padding-top: 12px;
}
.usersFilters {
  margin-bottom: 6px;
}
#usersStatus {
  margin: 6px 0 8px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .userStatsGrid {
    grid-template-columns: 1fr !important;
  }
  .roleCountHeader {
    display: grid;
  }
  .roleCountPill {
    width: 100%;
    justify-content: space-between;
  }
}


/* v4.9: rimosso menu overlay mobile */
.mobileTabbar {
  display: none !important;
}
@media (max-width: 760px) {
  .mobileTabbar {
    display: none !important;
  }
  .appShell {
    margin-bottom: 28px !important;
  }
}


/* v5.0 contatori vocali Discord */
.voiceCounterCard,
.captchaControlCard {
  padding: 12px 14px;
}
.voiceCounterHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.voiceCounterHeader h3 {
  margin: 0 0 4px;
  font-size: 16px;
}
.voiceCounterHeader p {
  font-size: 13px;
  max-width: 820px;
}
.voiceCounterActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.voiceCounterStatus {
  margin-top: 10px;
}
.voiceCounterGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.voiceCounterGrid > div {
  border: 1px solid var(--line2);
  background: rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px;
}
.voiceCounterGrid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 850;
}
.voiceCounterGrid strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}
.captchaStatusGrid strong {
  font-size: 17px;
}
.voiceCounterDetails {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.voiceCounterDetails code {
  font-size: 12px;
  word-break: break-all;
}
@media (max-width: 760px) {
  .voiceCounterHeader {
    display: grid;
  }
  .voiceCounterActions {
    justify-content: flex-start;
  }
  .voiceCounterGrid {
    grid-template-columns: 1fr 1fr;
  }
}


/* v5.1 social counters */
.voiceCounterGrid {
  grid-template-columns: repeat(6, minmax(110px, 1fr));
}
@media (max-width: 1180px) {
  .voiceCounterGrid {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
}
@media (max-width: 760px) {
  .voiceCounterGrid {
    grid-template-columns: 1fr 1fr;
  }
}

/* v5.14 clean channel forwarding toggle */
.forwardRulesList {
  display: grid;
  gap: 5px;
}
.forwardRulesList strong {
  color: var(--text);
}

/* v5.15 lista utenti separata + mobile portrait polish */
:root {
  --accentSoft: rgba(114,135,255,.18);
}

.toolsPage {
  display: grid;
  gap: 12px;
}
.toolsHeader {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.toolsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.toolsGrid .voiceCounterCard {
  grid-column: 1 / -1;
}
.userCards {
  display: none;
}
.uidEmpty::after {
  content: none !important;
}

@media (max-width: 980px) {
  .toolsGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 50% -20%, rgba(114,135,255,.28), transparent 38%),
      linear-gradient(180deg, #101737 0%, #090d1c 56%, #070914 100%);
  }
  .appShell {
    width: calc(100vw - 12px) !important;
    margin: 6px auto 22px !important;
  }
  .card {
    border-radius: 18px;
    border-color: rgba(255,255,255,.13) !important;
    background: linear-gradient(180deg, rgba(25,32,65,.96), rgba(13,18,38,.96)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.32) !important;
  }
  .topBar {
    min-height: auto;
    padding: 14px !important;
  }
  .topBar h1 {
    font-size: 24px;
    line-height: 1.08;
  }
  .topBar .sub {
    font-size: 13px;
  }
  .topActions,
  .topActions button {
    width: 100%;
  }
  .appModeNav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    padding: 8px;
    position: sticky;
    top: 6px;
    z-index: 20;
    background: rgba(12,17,36,.94) !important;
    backdrop-filter: blur(14px);
  }
  .modeBtn {
    min-height: 42px;
    padding: 8px 9px;
    border-radius: 13px;
    font-size: 12px;
    line-height: 1.15;
  }
  .modeBtn.active {
    background: linear-gradient(180deg, rgba(114,135,255,.38), rgba(114,135,255,.18));
    border-color: rgba(145,160,255,.58);
  }
  .usersPage,
  .toolsPage {
    gap: 10px;
  }
  .usersHeader,
  .toolsHeader {
    display: grid;
    align-items: stretch;
    gap: 12px;
    padding: 14px !important;
  }
  .usersHeader h2,
  .toolsHeader h2 {
    font-size: 21px;
  }
  .usersHeader p,
  .toolsHeader p {
    font-size: 13px;
  }
  .usersActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .usersActions button,
  .toolsHeader button {
    width: 100%;
    min-height: 40px;
  }
  .userStatsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .userStatsGrid .compactStat {
    min-height: 64px;
    padding: 10px !important;
    background: rgba(255,255,255,.055) !important;
  }
  .userStatsGrid .compactStat:nth-child(3) {
    grid-column: 1 / -1;
  }
  .userStatsGrid #usersTotalCount,
  .userStatsGrid #usersUpdatedAt,
  .userStatsGrid #usersTxtFile {
    font-size: 15px !important;
  }
  .userStatsGrid #usersTotalCount {
    font-size: 24px !important;
  }
  .fileNameMini {
    font-size: 11px;
  }
  .roleCountCard,
  .usersTableCard,
  .captchaControlCard,
  .voiceCounterCard {
    padding: 12px !important;
  }
  .roleCountHeader {
    display: grid;
    gap: 3px;
    margin-bottom: 8px;
  }
  .roleCountHeader h3 {
    font-size: 15px;
  }
  .roleCountHeader p {
    font-size: 12px;
  }
  .roleCountCards {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 1px 2px 6px;
    margin: 0 -2px;
    scrollbar-width: thin;
  }
  .roleCountPill {
    width: auto !important;
    min-width: max-content;
    flex: 0 0 auto;
    grid-template-columns: auto auto;
    padding: 8px 10px;
    background: rgba(255,255,255,.07);
  }
  .roleCountPill span,
  .roleCountPill strong {
    font-size: 12px;
  }
  .usersFilters {
    grid-template-columns: 1fr !important;
    gap: 8px;
    margin-bottom: 8px;
  }
  #usersStatus {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.35;
  }
  .usersTableWrap {
    display: none;
  }
  .userCards {
    display: grid;
    gap: 10px;
    margin-top: 10px;
  }
  .userCardItem {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    padding: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  .userCardTop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
  }
  .userCardTop strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .userCardTop span,
  .userCardTop time {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
  }
  .userCardTop time {
    max-width: 46%;
    text-align: right;
    color: #c4ceff;
  }
  .userCardMeta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .userCardMeta > div {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(0,0,0,.17);
    padding: 8px 9px;
  }
  .userCardMeta span {
    display: block;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 10px;
    font-weight: 850;
    margin-bottom: 4px;
  }
  .userCardMeta code,
  .userCardMeta strong {
    display: block;
    color: #eef2ff;
    font-size: 12px;
    word-break: break-all;
  }
  .userCardRoles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
  .roleChip {
    margin: 0;
    font-size: 11px;
    padding: 4px 7px;
    background: rgba(114,135,255,.12);
    border-color: rgba(114,135,255,.25);
  }
  .toolsGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .voiceCounterHeader {
    display: grid;
    gap: 10px;
  }
  .voiceCounterActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-content: stretch;
  }
  .voiceCounterActions button {
    width: 100%;
  }
  .voiceCounterGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .voiceCounterGrid > div {
    background: rgba(255,255,255,.06);
    padding: 9px;
  }
  .voiceCounterGrid strong {
    font-size: 15px;
    line-height: 1.15;
    word-break: break-word;
  }
  .voiceCounterDetails {
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .forwardRulesList {
    gap: 7px;
  }
}

@media (max-width: 390px) {
  .usersActions,
  .voiceCounterActions {
    grid-template-columns: 1fr;
  }
  .voiceCounterGrid {
    grid-template-columns: 1fr !important;
  }
}


/* v5.17: lista utenti stabile su mobile anche quando viene filtrata per ruolo */
.usersPage,
.usersTableCard,
.userStatsGrid,
.roleCountCard,
.roleCountPill,
.userCards,
.userCardItem,
.userCardTop,
.userCardMeta,
.userCardRoles {
  min-width: 0;
}

.usersFilters input,
.usersFilters select {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .usersTableWrap {
    display: none !important;
  }
  .userCards {
    display: grid !important;
    gap: 10px;
    margin-top: 10px;
  }
  .usersFilters {
    grid-template-columns: 1fr !important;
  }
  .roleCountCards {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 7px;
  }
  .roleCountPill {
    flex: 0 0 auto;
    max-width: 82vw;
  }
  .roleCountPill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .userCardItem {
    overflow: hidden;
  }
  .userCardTop > div {
    min-width: 0;
  }
  .userCardMeta code,
  .userCardMeta strong {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .userCardRoles {
    overflow: hidden;
  }
  .roleChip {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 901px) {
  .userCards {
    display: none !important;
  }
}


/* v5.18 - YouTube announcements */
.youtubeAccessCard { grid-column: 1 / -1; }
.youtubeAccessConfig {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(210px, 1.1fr) repeat(3, auto);
  gap: 8px;
  align-items: end;
}
.youtubeAccessConfig label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.youtubeAccessConfig label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.youtubeAccessSearch {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
}
.youtubeAccessUsers {
  margin-top: 10px;
  display: grid;
  gap: 7px;
}
.youtubeAccessUser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}
.youtubeAccessUser strong,
.youtubeAccessUser small {
  display: block;
  overflow-wrap: anywhere;
}
.youtubeAccessUser small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.youtubeAccessUserActions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.youtubeAccessDiagnostics {
  margin-top: 10px;
}
.diagnosticGrid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.diagnosticItem {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: rgba(0,0,0,.12);
}
.diagnosticItem.ok strong { color: var(--accent2); }
.diagnosticItem.bad strong { color: var(--danger); }
.diagnosticItem span {
  font-size: 12px;
  font-weight: 800;
}
.diagnosticItem small {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.youtubePublicBody {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.youtubePublicShell {
  width: min(640px, calc(100vw - 24px));
}
.youtubePublicCard {
  padding: 22px;
  display: grid;
  gap: 14px;
}
.youtubePublicCard h1 {
  font-size: 32px;
}
.youtubePublicForm {
  display: grid;
  gap: 8px;
}
.youtubePublicButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}
.youtubeAnnouncementCard { grid-column: 1 / -1; }
.youtubeTestBox { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.youtubeTestBox > label { display: block; font-weight: 800; margin-bottom: 8px; }
.youtubeTestRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.youtubeTestRow input { min-width: 0; width: 100%; }
.inlineResult { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .youtubeTestRow { grid-template-columns: 1fr; }
  .youtubeTestRow button { width: 100%; }
  .youtubeAccessConfig,
  .youtubeAccessSearch,
  .youtubeAccessUser {
    grid-template-columns: 1fr;
  }
  .youtubeAccessConfig button,
  .youtubeAccessSearch button,
  .youtubeAccessUserActions button {
    width: 100%;
  }
  .diagnosticGrid {
    grid-template-columns: 1fr;
  }
}

/* v5.23 pagina Funzioni compatta, mobile-first */
.toolsPage .toolsHeader {
  padding: 12px 14px;
}
.toolsPage .toolsHeader h2 {
  margin: 0;
}
.toolsPage .toolsHeader .eyebrow {
  margin-bottom: 2px;
}
.toolsGrid {
  gap: 9px;
}
.toolsGrid > .card {
  padding: 11px 12px;
}
.toolsPage .voiceCounterHeader {
  align-items: center;
  gap: 10px;
}
.toolsPage .voiceCounterHeader h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
}
.toolsPage .voiceCounterStatus {
  margin-top: 8px;
}
.toolsPage .voiceCounterGrid {
  gap: 6px;
}
.toolsPage .voiceCounterGrid > div {
  padding: 8px;
  border-radius: 10px;
}
.toolsPage .voiceCounterGrid span {
  font-size: 9px;
}
.toolsPage .voiceCounterGrid strong {
  margin-top: 2px;
  font-size: 14px;
}
.toolsPage .voiceCounterDetails {
  margin-top: 7px;
  gap: 4px;
  font-size: 12px;
}
.toolsCompactDetails {
  margin-top: 7px;
  border-top: 1px solid var(--line2);
  padding-top: 6px;
}
.toolsCompactDetails > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  list-style: none;
}
.toolsCompactDetails > summary::-webkit-details-marker {
  display: none;
}
.toolsCompactDetails > summary::after {
  content: ' +';
}
.toolsCompactDetails[open] > summary::after {
  content: ' −';
}
.toolsCompactDetails .voiceCounterDetails {
  margin-top: 7px;
}
.youtubeTestBox {
  margin-top: 8px;
  padding-top: 8px;
}
.youtubeTestBox > label {
  font-size: 11px;
  margin-bottom: 5px;
}

@media (max-width: 760px) {
  .toolsPage {
    gap: 8px;
  }
  .toolsPage .toolsHeader {
    grid-template-columns: 1fr auto;
    display: grid;
    padding: 10px 11px !important;
    gap: 8px;
  }
  .toolsPage .toolsHeader .eyebrow {
    display: none;
  }
  .toolsPage .toolsHeader h2 {
    font-size: 19px;
    align-self: center;
  }
  .toolsPage .toolsHeader button {
    width: auto;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 11px;
  }
  .toolsGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .toolsGrid > .card,
  .toolsGrid .voiceCounterCard,
  .toolsGrid .captchaControlCard,
  .toolsGrid .youtubeAccessCard,
  .toolsGrid .youtubeAnnouncementCard {
    grid-column: 1;
    padding: 10px !important;
  }
  .toolsPage .voiceCounterHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .toolsPage .voiceCounterActions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 5px;
  }
  .toolsPage .voiceCounterActions .smallBtn {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 10px;
    white-space: nowrap;
  }
  .toolsPage .voiceCounterGrid,
  .toolsPage .captchaStatusGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .toolsPage .voiceCounterGrid > div {
    padding: 7px;
    min-width: 0;
  }
  .toolsPage .voiceCounterGrid strong {
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .youtubeTestRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }
  .youtubeTestRow input {
    min-width: 0;
    height: 36px;
    font-size: 12px;
  }
  .youtubeTestRow button {
    min-height: 36px;
  }
}

/* v5.24: Permessi, Messaggi/Reminder e Lista utenti compatti su mobile verticale */
@media (max-width: 760px) {
  /* Cornice generale e navigazione */
  .appShell { margin-top: 6px; }
  .topBar { padding: 10px 11px; gap: 7px; }
  .topBar .eyebrow, .topBar .sub { display: none; }
  .topBar h1 { font-size: 20px; margin: 0; }
  .topActions button { min-height: 34px; padding: 6px 9px; font-size: 11px; }
  .appModeNav { gap: 5px; padding: 6px; margin-bottom: 8px; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .modeBtn { min-height: 35px; padding: 6px 7px; font-size: 11px; }

  /* Pagina Permessi */
  #panel { gap: 8px; }
  .overviewBar { gap: 5px; padding: 7px; margin-bottom: 8px; }
  .overviewItem { padding: 7px 8px; min-height: 0; border-radius: 10px; }
  .overviewLabel { font-size: 8px; }
  .overviewItem strong { font-size: 14px; }
  .workspace { gap: 8px; }
  .sectionCard { padding: 9px !important; border-radius: 14px; }
  .panelHeader { gap: 6px; margin-bottom: 7px; }
  .panelHeader h2 { font-size: 17px; margin: 0; }
  .panelHeader p { display: none; }
  .miniActions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; gap: 5px; }
  .miniActions .smallBtn { min-height: 32px; padding: 5px 8px; font-size: 10px; flex: 0 0 auto; }
  #roleSearch, #channelSearch, #categoryFilter, #channelTypeFilter { min-height: 36px; font-size: 12px; padding: 7px 9px; }
  .channelFilters { gap: 6px; }
  .touchList { gap: 5px; }
  .touchList .listItem, .touchList label { padding: 8px 9px; border-radius: 10px; min-height: 0; }
  .rolesCard, .channelsCard { min-height: 0; }
  .permissionsHeader .legend { display: none; }
  .advancedTools { margin-bottom: 7px; }
  .advancedTools > summary { padding: 8px 9px; font-size: 11px; }
  .presetActions { flex-wrap: nowrap; overflow-x: auto; gap: 5px; padding-bottom: 3px; margin-bottom: 7px; }
  .presetActions button { flex: 0 0 auto; min-height: 32px; padding: 5px 8px; font-size: 10px; }
  .permissionList { gap: 7px; }
  .permBlock { border-radius: 11px; }
  .permBlockHeader { padding: 8px; gap: 6px; }
  .permBlockHeader h3 { font-size: 13px; }
  .permBlockHeader small { display: none; }
  .groupToolbar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .bulkBtn { min-height: 28px; padding: 4px 7px; font-size: 9px; flex: 0 0 auto; }
  .permRow { min-height: 0; padding: 8px; gap: 7px; }
  .permInfo strong { font-size: 12px; }
  .permInfo small { display: none; }
  .permChoices { gap: 5px; }
  .permChoice { min-height: 31px; padding: 5px 6px; font-size: 10px; }
  .applyCard { padding: 9px; margin-top: 8px; }
  .applyTitleRow h2 { font-size: 17px; margin: 0; }
  .applyTitleRow p { display: none; }
  .summary { margin-top: 7px; padding: 8px; font-size: 11px; line-height: 1.35; }
  .confirmGrid { margin-top: 6px; gap: 5px; }
  .checkLine { padding: 7px 8px; font-size: 11px; }
  .auditDetails > summary { padding: 8px 9px; font-size: 11px; }

  /* Pagina Messaggi / Reminder */
  .messagesPage { gap: 8px; }
  .messagesHeader { padding: 10px 11px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .messagesHeader .eyebrow, .messagesHeader p { display: none; }
  .messagesHeader h2 { margin: 0; font-size: 18px; }
  .messagesHeader button { width: auto; min-height: 34px; padding: 6px 8px; font-size: 10px; }
  .messagesGrid { gap: 8px; }
  .messageComposer, .reminderListCard { padding: 9px; gap: 7px; }
  .messageComposer .panelHeader { margin: 0; }
  .messageComposer .panelHeader h2 { font-size: 16px; }
  .editorToolbar { flex-wrap: nowrap; gap: 5px; }
  .editorToolbar .smallBtn { min-height: 31px; padding: 5px 8px; font-size: 10px; }
  .messageTextarea { min-height: 115px; padding: 9px; font-size: 13px; border-radius: 11px; }
  .editorHint { display: none; }
  .messagePreview { max-height: 130px; overflow: auto; }
  .channelPickerHeader { gap: 6px; }
  .channelPickerHeader h3 { font-size: 14px; margin: 0; }
  .messageChannelList { max-height: 220px; gap: 5px; padding-right: 2px; }
  .messageChannelItem { padding: 7px 8px; gap: 7px; border-radius: 10px; }
  .messageChannelItem strong { font-size: 12px; }
  .messageChannelItem small { display: none; }
  .wideBtn { min-height: 38px; font-size: 12px; }
  .formGrid { gap: 6px; }
  .formGrid label { gap: 3px; }
  .formGrid span, .weekdayBox > span { font-size: 9px; }
  .formGrid input, .formGrid select { min-height: 36px; font-size: 12px; }
  .weekdayGrid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; }
  .weekdayGrid label { min-height: 32px; font-size: 10px; }
  .reminderItem { padding: 8px; gap: 7px; border-radius: 10px; }
  .reminderItem p { margin-top: 4px; font-size: 12px; max-height: 3.2em; overflow: hidden; }
  .reminderItem small { font-size: 10px; }
  .reminderActions { gap: 5px; }
  .reminderActions button { min-height: 31px; padding: 5px 7px; font-size: 10px; }

  /* Pagina Lista utenti */
  .usersPage { gap: 8px; }
  .usersHeader { padding: 10px 11px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
  .usersHeader .eyebrow, .usersHeader p { display: none; }
  .usersHeader h2 { margin: 0; font-size: 18px; }
  .usersActions { display: grid; grid-template-columns: repeat(2, auto); gap: 5px; }
  .usersActions button { min-height: 32px; padding: 5px 7px; font-size: 9px; white-space: nowrap; }
  .userStatsGrid { gap: 5px; grid-template-columns: .55fr 1.45fr; }
  .userStatsGrid .compactStat { padding: 7px 8px; min-height: 0; }
  .userStatsGrid .compactStat:nth-child(3) { grid-column: 1 / -1; }
  .userStatsGrid #usersTxtFile { font-size: 9px; line-height: 1.25; }
  .roleCountCard { padding: 8px; }
  .roleCountHeader { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
  .roleCountHeader h3 { font-size: 13px; margin: 0; }
  .roleCountHeader p { display: none; }
  .roleCountCards { gap: 5px; padding-bottom: 3px; }
  .roleCountPill { padding: 6px 8px; min-height: 30px; border-radius: 999px; font-size: 10px; }
  .usersTableCard { padding: 8px; }
  .usersFilters { gap: 5px; }
  .usersFilters input, .usersFilters select { min-height: 36px; font-size: 12px; padding: 7px 9px; }
  #usersStatus { font-size: 9px; margin-top: 4px; }
  .userCards { gap: 6px; margin-top: 6px; }
  .userCardItem { padding: 8px; border-radius: 11px; gap: 6px; }
  .userCardTop strong { font-size: 13px; }
  .userCardMeta { gap: 4px; font-size: 10px; }
  .userCardMeta > div { padding: 5px 6px; border-radius: 8px; }
  .userCardRoles { gap: 4px; }
  .roleChip { padding: 3px 6px; font-size: 9px; }
}

@media (max-width: 390px) {
  .usersHeader { grid-template-columns: 1fr; }
  .usersActions { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .usersActions button { padding: 5px 3px; }
}