* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #080b10;
  color: #e8edf5;
  font-family: Arial, sans-serif;
  display: flex;
}

aside {
  width: 260px;
  min-height: 100vh;
  background: linear-gradient(180deg, #101826, #070a0f);
  border-right: 1px solid #1e2a3a;
  padding: 22px;
}

aside h1 {
  margin: 0;
  font-size: 34px;
  color: #d7b46a;
}

aside h2 {
  margin: 4px 0 30px;
  font-size: 16px;
  color: #9aa8ba;
}

nav button {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  padding: 13px;
  background: #17243a;
  color: #e8edf5;
  border: 1px solid #263855;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

nav button:hover {
  background: #223456;
}

main {
  flex: 1;
  padding: 24px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  margin: 0;
}

header p {
  color: #9aa8ba;
}

#clock {
  background: #111a28;
  border: 1px solid #263855;
  padding: 14px 18px;
  border-radius: 12px;
  color: #8ee26b;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
}

.card {
  background: #111720;
  border: 1px solid #26313f;
  border-radius: 14px;
  padding: 18px;
}

.card .num {
  font-size: 30px;
  font-weight: bold;
}

.card .label {
  color: #9aa8ba;
  margin-top: 6px;
}

.panel {
  background: #0f141c;
  border: 1px solid #26313f;
  border-radius: 14px;
  margin-top: 18px;
  padding: 18px;
}

.server {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 2fr;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #202a38;
  padding: 13px 0;
}

.server:last-child {
  border-bottom: 0;
}

.name strong {
  display: block;
}

.name span {
  color: #9aa8ba;
  font-size: 13px;
}

.badge {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: bold;
}

.online {
  background: #173d22;
  color: #7dff78;
}

.offline {
  background: #421919;
  color: #ff7474;
}

.actions button {
  margin-right: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: #253bff;
  color: white;
}

.actions button.stop {
  background: #a73030;
}

.actions button.restart {
  background: #d8891b;
}

.actions button.log {
  background: #333b49;
}

.actions button.bot {
  background: #5b32c7;
}

pre {
  background: #06090d;
  border: 1px solid #202a38;
  border-radius: 10px;
  padding: 15px;
  overflow: auto;
  max-height: 360px;
  white-space: pre-wrap;
  color: #d8e3f0;
}

.statusStack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.playersBox {
  background: #080d14;
  border: 1px solid #202a38;
  border-radius: 12px;
  margin: 12px 0;
  padding: 10px 12px;
}

.playersBox summary {
  cursor: pointer;
  color: #d7b46a;
  font-weight: bold;
}

.playersList {
  margin-top: 10px;
}

.playerRow {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr .8fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #1a2431;
  color: #d8e3f0;
  font-size: 14px;
}

.playerName {
  font-weight: bold;
  color: #ffffff;
}

.teamText {
  color: #9aa8ba;
}

.emptyPlayers {
  padding: 10px 0;
  color: #7e8fa6;
  font-style: italic;
}

.metaGrid {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr;
}

@media (max-width: 900px) {
  .statusStack {
    align-items: flex-start;
    margin-top: 10px;
  }

  .playerRow {
    grid-template-columns: 1fr 1fr;
  }

  .metaGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile compact server cards override */
@media (max-width: 900px) {
  .serverCard {
    grid-template-columns: 110px 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .mapPreview {
    width: 110px !important;
    height: 72px !important;
    border-radius: 10px !important;
  }

  .mapPreview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .mapPreview.noImage {
    font-size: 9px !important;
    text-align: center !important;
  }

  .serverTop {
    display: block !important;
  }

  .serverTop h3 {
    font-size: 15px !important;
  }

  .serverTop p {
    font-size: 11px !important;
  }

  .metaGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .actions button {
    font-size: 10px !important;
    padding: 7px 8px !important;
  }
}

/* Global map preview size fix */
.serverCard {
  display: grid !important;
  grid-template-columns: 160px 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}

.mapPreview {
  width: 160px !important;
  height: 95px !important;
  max-width: 160px !important;
  max-height: 95px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

.mapPreview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mapPreview.noImage {
  width: 160px !important;
  height: 95px !important;
  max-width: 160px !important;
  max-height: 95px !important;
  font-size: 10px !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  .serverCard {
    grid-template-columns: 95px 1fr !important;
    gap: 8px !important;
  }

  .mapPreview,
  .mapPreview.noImage {
    width: 95px !important;
    height: 62px !important;
    max-width: 95px !important;
    max-height: 62px !important;
  }
}

/* Clear server card separation */
.serverCard {
  border: 1px solid #2d3d55 !important;
  border-left: 4px solid #d7b46a !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #101722, #0b1018) !important;
  padding: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}

.serverCard:hover {
  border-color: #4b6388 !important;
  border-left-color: #8ee26b !important;
  background: linear-gradient(180deg, #131d2b, #0c121c) !important;
}

.serverCard:last-child {
  margin-bottom: 0 !important;
}

.serverTop {
  padding-bottom: 8px !important;
  border-bottom: 1px solid #202a38 !important;
}

.actions {
  padding-top: 10px !important;
  border-top: 1px solid #202a38 !important;
}

@media (max-width: 900px) {
  .serverCard {
    padding: 10px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    border-left-width: 3px !important;
  }
}

/* Preview-inspired compact dashboard layout */
.cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}

.statCard {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, #111823, #0b1018);
  border: 1px solid #273449;
  border-radius: 14px;
  padding: 18px;
  min-height: 98px;
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
}

.statIcon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(37,59,255,.14);
  color: #4d72ff;
  font-weight: bold;
  font-size: 24px;
}

.statTitle {
  color: #d8e3f0;
  font-size: 13px;
}

.statCard .num {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 5px 0;
}

.statCard .green {
  color: #7dff78;
  font-size: 13px;
}

.greenCard .statIcon {
  background: rgba(72,220,80,.14);
  color: #6cff70;
}

.purple .statIcon {
  background: rgba(168,70,255,.16);
  color: #c06cff;
}

.orange .statIcon {
  background: rgba(255,170,0,.15);
  color: #ffb12d;
}

.serverTable {
  border-left: 3px solid #d7b46a;
}

.serverHead,
.serverLine {
  display: grid;
  grid-template-columns: 2.3fr .8fr .7fr 1.8fr .8fr .8fr 1.4fr;
  gap: 12px;
  align-items: center;
}

.serverHead {
  color: #b9c5d6;
  font-size: 13px;
  padding: 10px 14px;
  border-bottom: 1px solid #26313f;
}

.serverLine {
  position: relative;
  padding: 12px 14px;
  border-bottom: 1px solid #202a38;
  background: rgba(8, 13, 20, .35);
}

.serverLine:hover {
  background: rgba(24, 35, 52, .68);
}

.serverLine:last-child {
  border-bottom: 0;
}

.serverCell {
  min-width: 0;
}

.serverCell strong {
  display: block;
  color: #f4f7fb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverCell span,
.serverCell small {
  display: block;
  color: #9aa8ba;
  font-size: 12px;
}

.serverNameCell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.miniMap {
  width: 74px;
  height: 46px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid #36445a;
  background: #06090d;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #7c8898;
  font-size: 10px;
}

.miniMap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block !important;
  margin-bottom: 5px;
}

.dot.good {
  background: #63e65e;
  box-shadow: 0 0 12px rgba(99,230,94,.5);
}

.dot.bad {
  background: #ff4f4f;
  box-shadow: 0 0 12px rgba(255,79,79,.45);
}

.miniStatus {
  display: inline-block !important;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11px !important;
  font-weight: 800;
}

.miniStatus.online {
  background: #173d22;
  color: #7dff78;
}

.miniStatus.offline {
  background: #421919;
  color: #ff7474;
}

.pingBars {
  display: flex !important;
  flex-direction: row;
  gap: 3px;
  align-items: end;
  height: 18px;
  margin-top: 4px;
}

.pingBars i {
  display: block;
  width: 4px;
  background: #263449;
  border-radius: 2px;
}

.pingBars i:nth-child(1) { height: 6px; }
.pingBars i:nth-child(2) { height: 9px; }
.pingBars i:nth-child(3) { height: 12px; }
.pingBars i:nth-child(4) { height: 15px; }

.pingBars i.on {
  background: #75f35d;
}

.actionButtons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.actionButtons button {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 7px;
  font-size: 15px !important;
  display: grid;
  place-items: center;
}

.playersInline {
  grid-column: 1 / -1;
  background: #070b11;
  border: 1px solid #202a38;
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 2px;
}

.playersInline summary {
  cursor: pointer;
  color: #d7b46a;
  font-size: 12px;
  font-weight: bold;
}

@media (max-width: 1100px) {
  .serverHead {
    display: none;
  }

  .serverLine {
    grid-template-columns: 1fr;
    gap: 8px;
    border: 1px solid #2d3d55;
    border-left: 4px solid #d7b46a;
    border-radius: 14px;
    margin-bottom: 12px;
  }

  .serverNameCell {
    align-items: flex-start;
  }

  .miniMap {
    width: 92px;
    height: 58px;
  }

  .mapCell strong {
    white-space: normal;
  }

  .actionButtons {
    flex-wrap: wrap;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr !important;
  }

  .statCard {
    min-height: 74px;
    padding: 12px;
  }

  .statIcon {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
}

/* Right dashboard sidebar */
#topStatus {
  display: flex;
  gap: 12px;
  align-items: center;
}

.allOnline {
  background: #101a23;
  border: 1px solid #244b32;
  color: #8ee26b;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  text-align: center;
}

.allOnline.warn {
  border-color: #7a4b1d;
  color: #ffbf55;
}

.dashboardGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.leftColumn,
.rightColumn {
  min-width: 0;
}

.sidePanel {
  margin-top: 0;
  margin-bottom: 16px;
}

.botRow,
.sideRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #202a38;
  padding: 10px 0;
  font-size: 13px;
}

.botRow:last-child,
.sideRow:last-child {
  border-bottom: 0;
}

.ok {
  color: #7dff78;
  background: #173d22;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
}

.badText {
  color: #ff7474;
  background: #421919;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
}

.wideButton {
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  border: 0;
  border-radius: 9px;
  background: #253bff;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.systemCircleRow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 8px 0 12px;
}

.circleStat {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #263449;
  display: grid;
  place-items: center;
  text-align: center;
  background: #0a0f16;
}

.circleStat strong {
  display: block;
  font-size: 22px;
}

.circleStat span {
  display: block;
  color: #9aa8ba;
  font-size: 12px;
}

#rotationBox ol {
  margin: 0;
  padding-left: 20px;
}

#rotationBox li {
  padding: 6px 0;
  color: #d8e3f0;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #7e8fa6;
  font-size: 12px;
  padding: 14px 4px;
}

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

  .rightColumn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 700px) {
  #topStatus {
    flex-wrap: wrap;
  }

  .rightColumn {
    display: block;
  }

  footer {
    display: block;
  }

  footer span {
    display: block;
    margin-bottom: 6px;
  }
}

/* Readability and layout width fix */
main {
  max-width: 1680px !important;
  margin-left: 260px !important;
  padding: 22px !important;
}

.dashboardGrid {
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 14px !important;
}

.cards {
  grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
}

.statCard {
  min-height: 86px !important;
  padding: 14px !important;
}

.statIcon {
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
}

.statCard .num {
  font-size: 22px !important;
}

.serverHead,
.serverLine {
  grid-template-columns: 2.4fr .75fr .65fr 1.9fr .7fr .7fr 1.15fr !important;
  gap: 10px !important;
}

.serverHead {
  font-size: 12px !important;
  padding: 10px 12px !important;
}

.serverLine {
  padding: 10px 12px !important;
}

.serverCell strong {
  font-size: 13px !important;
}

.serverCell span,
.serverCell small {
  font-size: 11px !important;
}

.miniMap {
  width: 68px !important;
  height: 42px !important;
}

.actionButtons {
  gap: 5px !important;
}

.actionButtons button {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
}

.panel {
  padding: 14px !important;
}

.panel h2 {
  font-size: 16px !important;
}

pre#log {
  min-height: 250px !important;
  max-height: 320px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.sidePanel {
  padding: 14px !important;
}

.botRow,
.sideRow {
  font-size: 12px !important;
}

@media (max-width: 1450px) {
  main {
    margin-left: 210px !important;
  }

  aside {
    width: 210px !important;
  }

  .dashboardGrid {
    grid-template-columns: 1fr !important;
  }

  .rightColumn {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 1100px) {
  main {
    margin-left: 0 !important;
  }

  aside {
    position: relative !important;
    width: 100% !important;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Reduce gap between sidebar and dashboard */
main {
  margin-left: 210px !important;
  padding-left: 12px !important;
}

aside {
  width: 210px !important;
}

@media (max-width: 1450px) {
  main {
    margin-left: 210px !important;
    padding-left: 12px !important;
  }

  aside {
    width: 210px !important;
  }
}

@media (max-width: 1100px) {
  main {
    margin-left: 0 !important;
    padding-left: 10px !important;
  }

  aside {
    width: 100% !important;
  }
}

/* Dock dashboard directly to left sidebar */
aside {
  width: 220px !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
}

main {
  margin-left: 220px !important;
  padding-left: 0 !important;
  padding-top: 18px !important;
  padding-right: 18px !important;
}

@media (max-width: 1100px) {
  aside {
    position: relative !important;
    width: 100% !important;
  }

  main {
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* === Mockup polish layer === */
:root {
  --bg: #05080d;
  --panel: #0e141d;
  --panel2: #111923;
  --line: #243246;
  --text: #e8edf5;
  --muted: #8f9caf;
  --blue: #3157ff;
  --green: #75f35d;
  --gold: #d7b46a;
  --red: #ff5555;
  --purple: #6d35c9;
  --orange: #d8891b;
}

body {
  background: radial-gradient(circle at top left, #121a28 0, #05070b 42%, #030509 100%) !important;
  color: var(--text) !important;
}

.sidebar {
  width: 260px !important;
  background: linear-gradient(180deg, #111a28, #080c12) !important;
  border-right: 1px solid #1e2a3a !important;
  box-shadow: 12px 0 40px rgba(0,0,0,.28) !important;
  padding: 16px !important;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #1f2b3c;
}

.brandLogo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2a1c0b, #d7b46a);
  color: white;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(215,180,106,.22);
}

.brand h1 {
  font-size: 16px !important;
  margin: 0 !important;
  color: white !important;
}

.brand p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.nav {
  margin-top: 18px;
}

.nav label {
  display: block;
  color: #748297;
  font-size: 11px;
  margin: 18px 0 8px;
}

.nav button {
  border-radius: 9px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #dce6f3 !important;
  margin-bottom: 6px !important;
  padding: 11px 12px !important;
}

.nav button:hover,
.nav button.active {
  background: linear-gradient(90deg, #17294a, #13213a) !important;
  border-color: #263b61 !important;
}

.sidebarUser {
  position: absolute;
  bottom: 18px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid #1f2b3c;
  padding-top: 14px;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1b2535;
  border: 1px solid #33445d;
  color: var(--gold);
  font-weight: 900;
}

.sidebarUser strong {
  display: block;
  font-size: 13px;
}

.sidebarUser span {
  display: inline-block;
  margin-top: 4px;
  background: #6d35c9;
  color: white;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 10px;
}

.main {
  margin-left: 260px !important;
  padding: 18px 18px 12px 18px !important;
  max-width: none !important;
}

.topbar {
  background: transparent !important;
  margin-bottom: 16px;
}

.topbar h1 {
  font-size: 28px !important;
}

.topbar p {
  margin-top: 7px;
}

.topWidgets {
  display: flex;
  gap: 12px;
  align-items: center;
}

.topWidget,
.discordBox {
  min-height: 52px;
  border-radius: 10px;
  border: 1px solid #263449;
  background: #101722;
  padding: 10px 14px;
  display: grid;
  place-items: center;
}

.discordBox {
  width: 52px;
  font-size: 24px;
  background: linear-gradient(180deg, #30215e, #16132e);
}

.cards {
  grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
  margin-bottom: 16px !important;
}

.statCard {
  border: 1px solid #263449 !important;
  background: linear-gradient(180deg, rgba(18,25,36,.96), rgba(9,14,21,.96)) !important;
  border-radius: 14px !important;
  min-height: 96px !important;
}

.dashboardGrid {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 16px !important;
}

.panel {
  background: linear-gradient(180deg, rgba(14,20,29,.96), rgba(8,12,18,.96)) !important;
  border: 1px solid #243246 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}

.panel h2 {
  margin-top: 0 !important;
  color: white !important;
}

.serverTable {
  border-left: 3px solid var(--gold) !important;
  border-radius: 10px;
  overflow: hidden;
}

.serverHead {
  background: rgba(255,255,255,.015);
}

.serverLine {
  background: rgba(5,9,14,.28) !important;
}

.serverLine:hover {
  background: rgba(23,35,55,.6) !important;
}

.miniMap {
  width: 72px !important;
  height: 46px !important;
  border-radius: 8px !important;
}

.actionButtons button {
  color: white !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
}

.actionButtons button:nth-child(1) { background: #2853ff !important; }
.actionButtons button:nth-child(2) { background: #d8891b !important; }
.actionButtons button:nth-child(3) { background: #2d3542 !important; }
.actionButtons button:nth-child(4) { background: #5b32c7 !important; }
.actionButtons button:nth-child(5) { background: #a73030 !important; }

.bottomGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 16px;
  margin-top: 16px;
}

pre#log {
  background: #05080d !important;
  border: 1px solid #1d293a !important;
  min-height: 260px !important;
  max-height: 320px !important;
  font-size: 12px !important;
  color: #d9e6f5 !important;
}

.sidePanel {
  margin-bottom: 16px !important;
}

.botRow,
.sideRow {
  background: rgba(5,9,14,.32);
  border: 1px solid #1d293a;
  border-radius: 8px;
  margin-bottom: 7px;
  padding: 9px 10px !important;
}

.botRow {
  border-bottom: 1px solid #1d293a !important;
}

.wideButton {
  background: linear-gradient(180deg, #3157ff, #253bdc) !important;
  box-shadow: 0 10px 20px rgba(37,59,255,.25);
}

.systemCircleRow {
  grid-template-columns: repeat(2, 1fr) !important;
}

.circleStat {
  border-width: 7px !important;
  border-color: #1d293a !important;
  box-shadow: inset 0 0 0 1px #31445d;
}

footer {
  color: #7d8ca0 !important;
}

@media (max-width: 1500px) {
  .dashboardGrid {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }

  .serverHead,
  .serverLine {
    grid-template-columns: 2.2fr .75fr .65fr 1.7fr .7fr .7fr 1.15fr !important;
  }
}

@media (max-width: 1250px) {
  .dashboardGrid {
    grid-template-columns: 1fr !important;
  }

  .rightColumn {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .bottomGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .sidebar {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .sidebarUser {
    position: static !important;
    margin-top: 16px;
  }

  .main {
    margin-left: 0 !important;
    padding: 12px !important;
  }

  .topbar {
    display: block !important;
  }

  .topWidgets {
    margin-top: 12px;
    flex-wrap: wrap;
  }

  .rightColumn {
    display: block !important;
  }
}

/* === Live log colors, follow toggle, gauges, badges polish === */
.panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.followToggle {
  border: 1px solid #2d4468;
  background: #101722;
  color: #9fb7d9;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  cursor: pointer;
}

.followToggle.active {
  background: #173d22;
  color: #7dff78;
  border-color: #2f7a3d;
  box-shadow: 0 0 18px rgba(117,243,93,.16);
}

#log {
  font-family: Consolas, "Courier New", monospace !important;
  overflow-y: auto !important;
}

.logLine {
  padding: 2px 0;
  border-left: 3px solid transparent;
  padding-left: 7px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.logNormal { color: #d8e3f0; }
.logInfo { color: #6db6ff; border-left-color: #2e6ea8; }
.logJoin { color: #7dff78; border-left-color: #4edc4e; }
.logKill { color: #ff6b9d; border-left-color: #b93267; }
.logMap { color: #d7b46a; border-left-color: #d7b46a; }
.logVote { color: #ffb347; border-left-color: #d8891b; }
.logWarn { color: #ffd166; border-left-color: #d8891b; }
.logError {
  color: #ff7474;
  border-left-color: #ff5555;
  background: rgba(255, 80, 80, .06);
}

.mockBadge {
  display: inline-block !important;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: .2px;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.mockBadge.online {
  color: #7dff78 !important;
  background: linear-gradient(180deg, #17421f, #102c18);
  border-color: #246b32;
  box-shadow: inset 0 0 12px rgba(117,243,93,.08);
}

.mockBadge.offline {
  color: #ff7474 !important;
  background: linear-gradient(180deg, #421919, #2d1010);
  border-color: #703030;
}

.mockBadge.warn {
  color: #ffc857 !important;
  background: linear-gradient(180deg, #4c3510, #2b1e0a);
  border-color: #7a5416;
}

.serverLine.hasPlayers {
  box-shadow: inset 3px 0 0 #75f35d, 0 0 24px rgba(117,243,93,.04);
}

.serverLine.isOffline {
  box-shadow: inset 3px 0 0 #ff5555, 0 0 24px rgba(255,85,85,.05);
}

.systemCircleRow.three {
  grid-template-columns: repeat(3, 1fr) !important;
}

.circleStat.gauge {
  border: 0 !important;
  background:
    radial-gradient(circle at center, #0a0f16 58%, transparent 59%),
    conic-gradient(#75f35d calc(var(--val) * 1%), #253145 0);
  box-shadow: inset 0 0 0 1px #31445d, 0 8px 20px rgba(0,0,0,.24);
}

.circleStat.gauge.disk {
  background:
    radial-gradient(circle at center, #0a0f16 58%, transparent 59%),
    conic-gradient(#d8891b calc(var(--val) * 1%), #253145 0);
}

.circleStat.gauge strong {
  font-size: 20px;
  line-height: 1;
}

.circleStat.gauge span {
  margin-top: -14px;
}

.statCard {
  position: relative;
  overflow: hidden;
}

.statCard::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.035);
}

.botRow .mockBadge,
.serverCell .mockBadge {
  margin-top: 3px;
}

@media (max-width: 900px) {
  .systemCircleRow.three {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .circleStat.gauge strong {
    font-size: 16px;
  }

  .followToggle {
    font-size: 11px;
    padding: 6px 9px;
  }
}

/* === Log filter/search/fullscreen controls === */
.logTopActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.iconButton {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid #2d4468;
  background: #101722;
  color: #d8e3f0;
  cursor: pointer;
  font-size: 17px;
  display: grid;
  place-items: center;
}

.iconButton:hover {
  background: #18253a;
  border-color: #3d5f91;
}

.logControls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

#logSearch {
  min-width: 240px;
  flex: 1;
  max-width: 360px;
  background: #070b11;
  color: #e8edf5;
  border: 1px solid #263449;
  border-radius: 10px;
  padding: 11px 13px;
  outline: none;
}

#logSearch:focus {
  border-color: #3157ff;
  box-shadow: 0 0 0 3px rgba(49,87,255,.16);
}

.filterButton {
  border: 1px solid #263449;
  background: #111923;
  color: #d8e3f0;
  border-radius: 9px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
  font-size: 12px;
}

.filterButton.active {
  background: #3157ff;
  color: white;
  border-color: #7891ff;
  box-shadow: 0 0 18px rgba(49,87,255,.26);
}

.filterButton.info {
  color: #65c7ff;
  background: rgba(30, 119, 170, .14);
}

.filterButton.warn {
  color: #ffd166;
  background: rgba(216, 137, 27, .14);
}

.filterButton.error {
  color: #ff7474;
  background: rgba(167, 48, 48, .18);
}

.filterButton.join {
  color: #7dff78;
  background: rgba(38, 128, 51, .16);
}

.filterButton.left {
  color: #ff9d5c;
  background: rgba(170, 89, 30, .16);
}

.filterButton.info.active,
.filterButton.warn.active,
.filterButton.error.active,
.filterButton.join.active,
.filterButton.left.active {
  color: white;
}

.logLeft {
  color: #ff9d5c;
  border-left-color: #d8891b;
}

.fullscreenLog {
  position: fixed !important;
  inset: 18px !important;
  z-index: 9999 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(14,20,29,.98), rgba(8,12,18,.98)) !important;
}

.fullscreenLog #log {
  flex: 1;
  max-height: none !important;
  min-height: 0 !important;
  font-size: 14px !important;
}

.fullscreenLog .logControls {
  padding-bottom: 4px;
}

@media (max-width: 700px) {
  .logControls {
    gap: 7px;
  }

  #logSearch {
    min-width: 100%;
    max-width: none;
  }

  .filterButton {
    padding: 8px 10px;
    font-size: 11px;
  }

  .logTopActions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .fullscreenLog {
    inset: 8px !important;
  }
}

/* === Mockup System Status Block === */
#systemMini {
  padding-top: 2px;
}

.systemHeaderLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.systemHeaderLine span {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
}

.systemHeaderLine strong {
  font-size: 12px;
  color: #8ee26b;
  background: #102719;
  border: 1px solid #244b32;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
}

.systemGaugeRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #243246;
}

.systemGauge {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.gaugeInner {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at center, #0b111a 58%, transparent 59%),
    conic-gradient(#75f35d calc(var(--val) * 1%), #27303d 0);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 8px 22px rgba(0,0,0,.24);
}

.gaugeCpu .gaugeInner {
  background:
    radial-gradient(circle at center, #0b111a 58%, transparent 59%),
    conic-gradient(#75f35d calc(var(--val) * 1%), #27303d 0);
}

.gaugeRam .gaugeInner {
  background:
    radial-gradient(circle at center, #0b111a 58%, transparent 59%),
    conic-gradient(#75f35d calc(var(--val) * 1%), #27303d 0);
}

.gaugeDisk .gaugeInner {
  background:
    radial-gradient(circle at center, #0b111a 58%, transparent 59%),
    conic-gradient(#d8891b calc(var(--val) * 1%), #27303d 0);
}

.gaugeInner span {
  display: block;
  font-size: 13px;
  color: #ffffff;
  font-weight: 900;
  margin-top: 14px;
}

.gaugeInner strong {
  display: block;
  font-size: 24px;
  color: #ffffff;
  margin-top: -18px;
}

.systemGauge small {
  color: #c8d2df;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

.systemBottomGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 -14px -14px;
}

.networkBox,
.loadBox {
  padding: 14px;
  min-height: 118px;
}

.networkBox {
  border-right: 1px solid #243246;
}

.networkBox h3,
.loadBox h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #ffffff;
}

.netLine {
  font-size: 13px;
  margin-bottom: 8px;
  color: #d8e3f0;
}

.netLine.up {
  color: #75f35d;
}

.netLine.down {
  color: #ff7474;
}

.netLine strong {
  color: #d8e3f0;
}

.miniSpark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  margin-top: 8px;
}

.miniSpark i {
  display: block;
  width: 8px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #3157ff, rgba(49,87,255,.15));
  box-shadow: 0 0 12px rgba(49,87,255,.35);
}

.miniSpark i:nth-child(1) { height: 10px; }
.miniSpark i:nth-child(2) { height: 14px; }
.miniSpark i:nth-child(3) { height: 22px; }
.miniSpark i:nth-child(4) { height: 16px; }
.miniSpark i:nth-child(5) { height: 27px; }
.miniSpark i:nth-child(6) { height: 19px; }
.miniSpark i:nth-child(7) { height: 32px; }

.loadValues {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.loadValues div {
  text-align: left;
}

.loadValues strong {
  display: block;
  font-size: 22px;
  color: #ffffff;
}

.loadValues span {
  display: block;
  margin-top: 8px;
  color: #9aa8ba;
  font-size: 12px;
}

@media (max-width: 1350px) {
  .gaugeInner {
    width: 78px;
    height: 78px;
  }

  .gaugeInner strong {
    font-size: 20px;
  }

  .systemGauge small {
    font-size: 10px;
  }
}

@media (max-width: 700px) {
  .systemGaugeRow {
    gap: 8px;
  }

  .gaugeInner {
    width: 72px;
    height: 72px;
  }

  .gaugeInner span {
    font-size: 11px;
  }

  .gaugeInner strong {
    font-size: 18px;
  }

  .systemBottomGrid {
    grid-template-columns: 1fr;
  }

  .networkBox {
    border-right: 0;
    border-bottom: 1px solid #243246;
  }
}

#systemMini .circleStat {
  all: unset;
}

/* === System block refinements: line chart + uptime moved to top cards === */
.cards {
  grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
}

.yellow .statIcon {
  background: rgba(255, 193, 7, .15) !important;
  color: #ffd166 !important;
}

#systemMini .systemHeaderLine {
  display: none !important;
}

.miniSpark {
  display: none !important;
}

.lineSpark {
  height: 42px;
  margin-top: 8px;
}

.lineSpark svg {
  width: 100%;
  height: 42px;
  overflow: visible;
}

.lineSpark polyline {
  fill: none;
  stroke: #3157ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(49,87,255,.65));
}

.netLine.up strong,
.netLine.down strong {
  color: #d8e3f0 !important;
}

@media (max-width: 1500px) {
  .cards {
    grid-template-columns: repeat(3, minmax(170px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr !important;
  }
}

/* === Final responsive layout correction === */

/* Desktop: dashboard docked to sidebar */
@media (min-width: 1201px) {
  .sidebar {
    width: 260px !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
  }

  .main {
    margin-left: 260px !important;
    padding: 18px !important;
    width: calc(100vw - 260px) !important;
    max-width: none !important;
  }

  .dashboardGrid {
    grid-template-columns: minmax(0, 1fr) 340px !important;
  }

  .bottomGrid {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr) !important;
  }

  .serverTable {
    overflow-x: auto !important;
  }
}

/* Medium desktop / tablet */
@media (max-width: 1200px) {
  .sidebar {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 14px !important;
  }

  .dashboardGrid {
    grid-template-columns: 1fr !important;
  }

  .rightColumn {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .bottomGrid {
    grid-template-columns: 1fr !important;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  body {
    overflow-x: hidden !important;
  }

  .sidebar {
    padding: 12px !important;
  }

  .brand {
    padding-bottom: 12px !important;
  }

  .brandLogo {
    width: 40px !important;
    height: 40px !important;
  }

  .brand h1 {
    font-size: 14px !important;
  }

  .brand p {
    font-size: 11px !important;
  }

  .nav label {
    margin-top: 12px !important;
  }

  .nav button {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }

  .main {
    padding: 10px !important;
  }

  .topbar {
    display: block !important;
  }

  .topbar h1 {
    font-size: 24px !important;
  }

  .topbar p {
    font-size: 13px !important;
  }

  .topWidgets {
    margin-top: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .discordBox {
    display: none !important;
  }

  .cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .statCard {
    min-height: 74px !important;
    padding: 12px !important;
  }

  .statIcon {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  .statCard .num {
    font-size: 22px !important;
  }

  .serverHead {
    display: none !important;
  }

  .serverLine {
    display: block !important;
    border: 1px solid #2d3d55 !important;
    border-left: 4px solid #d7b46a !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
  }

  .serverNameCell {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    margin-bottom: 10px !important;
  }

  .miniMap {
    width: 88px !important;
    height: 56px !important;
  }

  .serverCell {
    margin-bottom: 8px !important;
  }

  .serverCell strong {
    white-space: normal !important;
    font-size: 13px !important;
  }

  .serverCell span,
  .serverCell small {
    font-size: 11px !important;
  }

  .mapCell strong {
    white-space: normal !important;
  }

  .actionButtons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 8px !important;
  }

  .actionButtons button {
    width: 34px !important;
    height: 34px !important;
  }

  .playersInline {
    margin-top: 10px !important;
  }

  .rightColumn {
    display: block !important;
  }

  .systemGaugeRow {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .gaugeInner {
    width: 72px !important;
    height: 72px !important;
  }

  .gaugeInner strong {
    font-size: 18px !important;
  }

  .systemBottomGrid {
    grid-template-columns: 1fr !important;
  }

  .networkBox {
    border-right: 0 !important;
    border-bottom: 1px solid #243246 !important;
  }

  .logControls {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
  }

  #logSearch {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .filterButton {
    padding: 8px 9px !important;
    font-size: 11px !important;
  }

  pre#log,
  #log {
    max-height: 340px !important;
    font-size: 11px !important;
  }

  footer {
    display: block !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   MOBILE REWORK (Galaxy S24 Ultra / modern phones)
========================================================= */
@media (max-width: 900px) {

  body {
    overflow-x: hidden !important;
  }

  .layout {
    display: block !important;
  }

  /* ---------------------------------
     SIDEBAR
  --------------------------------- */
  .sidebar {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid #1f2b3d !important;
    padding: 12px !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .brandLogo {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
  }

  .brand h1 {
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  .brand p {
    font-size: 11px !important;
  }

  .nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .nav label {
    margin-top: 10px !important;
    font-size: 10px !important;
  }

  .nav button {
    width: 100% !important;
    justify-content: flex-start !important;
    min-height: 42px !important;
    font-size: 13px !important;
  }

  /* ---------------------------------
     MAIN CONTENT
  --------------------------------- */
  .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 10px !important;
  }

  .dashboardGrid {
    display: block !important;
  }

  .rightColumn {
    display: block !important;
  }

  .topbar {
    display: block !important;
    margin-bottom: 12px !important;
  }

  .topbar h1 {
    font-size: 28px !important;
    margin-bottom: 6px !important;
  }

  .topbar p {
    font-size: 13px !important;
  }

  .topWidgets {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
  }

  .topWidget {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 120px !important;
  }

  /* ---------------------------------
     STAT CARDS
  --------------------------------- */
  .cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .statCard {
    min-height: 90px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .statCard .num {
    font-size: 24px !important;
  }

  .statTitle {
    font-size: 12px !important;
  }

  .statIcon {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  /* ---------------------------------
     SERVER BLOCKS
  --------------------------------- */
  .serverTable {
    display: block !important;
  }

  .serverHead {
    display: none !important;
  }

  .serverLine {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border: 1px solid #2b3b52 !important;
    border-left: 4px solid #d7b46a !important;
    border-radius: 16px !important;
    padding: 12px !important;
    margin-bottom: 14px !important;
    background: rgba(10,16,24,.95) !important;
  }

  .serverTopMobile {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  .miniMap {
    width: 110px !important;
    height: 66px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .serverInfo {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .serverInfo strong {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }

  .serverInfo small {
    display: block !important;
    font-size: 11px !important;
    color: #94a5bc !important;
  }

  .statusRow {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .actionButtons {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .actionButtons button {
    width: 100% !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  /* ---------------------------------
     PLAYER LIST
  --------------------------------- */
  .playersInline {
    margin-top: 10px !important;
    border-radius: 12px !important;
    padding: 10px !important;
  }

  /* ---------------------------------
     LOG PANEL
  --------------------------------- */
  .logPanel {
    margin-top: 14px !important;
  }

  #log {
    max-height: 320px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .logControls {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  #logSearch {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .filterButton {
    width: 100% !important;
  }

  /* ---------------------------------
     SYSTEM STATUS
  --------------------------------- */
  .systemGaugeRow {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .gaugeInner {
    width: 74px !important;
    height: 74px !important;
  }

  .gaugeInner strong {
    font-size: 18px !important;
  }

  .systemBottomGrid {
    grid-template-columns: 1fr !important;
  }

  /* ---------------------------------
     FOOTER
  --------------------------------- */
  footer {
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    padding-bottom: 20px !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {

  .cards {
    grid-template-columns: 1fr !important;
  }

  .topWidget {
    flex: 1 1 100% !important;
  }

  .miniMap {
    width: 96px !important;
    height: 58px !important;
  }

  .actionButtons {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

.chartRange {
  color: #7e8fa6;
  font-size: 11px;
  font-weight: normal;
  margin-left: 6px;
}

.sysMeta {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #7e8fa6;
  font-size: 11px;
}

.lineSpark {
  height: 44px !important;
  margin-top: 8px;
}

.lineSpark svg {
  width: 100%;
  height: 44px;
}

.lineSpark polyline {
  fill: none;
  stroke: #3157ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(49,87,255,.65));
}

/* Detailed network line chart */
.lineSpark {
  height: auto !important;
  margin-top: 10px;
}

.lineSpark svg {
  width: 100%;
  height: 54px !important;
  overflow: visible;
}

.lineSpark .gridLine {
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
}

.lineSpark .rxLine {
  fill: none;
  stroke: #3157ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(49,87,255,.65));
}

.lineSpark .txLine {
  fill: none;
  stroke: #75f35d;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(117,243,93,.45));
}

.chartMeta {
  color: #7e8fa6;
  font-size: 10px;
  margin-bottom: 4px;
}

.chartLegend {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 10px;
  color: #9aa8ba;
}

.chartLegend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.rxDot::before {
  background: #3157ff;
}

.txDot::before {
  background: #75f35d;
}

/* Network chart colors unified with arrows */
.lineSpark .rxLine {
  stroke: #ff7474 !important;
  filter: drop-shadow(0 0 7px rgba(255,116,116,.45)) !important;
}

.lineSpark .txLine {
  stroke: #75f35d !important;
  filter: drop-shadow(0 0 7px rgba(117,243,93,.45)) !important;
}

.rxDot::before {
  background: #ff7474 !important;
}

.txDot::before {
  background: #75f35d !important;
}

.chartLegend {
  color: #b7c3d2 !important;
}

.netLine.up {
  color: #75f35d !important;
}

.netLine.down {
  color: #ff7474 !important;
}

/* Hide filesystem meta below Load Avg. */
.sysMeta {
  display: none !important;
}

/* === Page based layout === */
.page {
  display: none;
}

.page.active {
  display: block;
}

.pageHint {
  color: #8f9caf;
  margin-top: -4px;
  margin-bottom: 16px;
}

.pageHint code {
  background: #070b11;
  border: 1px solid #263449;
  padding: 3px 6px;
  border-radius: 6px;
  color: #d7b46a;
}

.pageInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.infoCard {
  background: rgba(5, 9, 14, .38);
  border: 1px solid #243246;
  border-radius: 14px;
  padding: 14px;
}

.infoCard h3 {
  margin: 0 0 6px;
  color: #fff;
}

.infoCard p {
  margin: 0 0 12px;
  color: #8f9caf;
}

.infoCard > strong {
  font-size: 26px;
  color: #75f35d;
}

.pageActions {
  margin-top: 12px;
}

.configHero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  background: rgba(5, 9, 14, .38);
  border: 1px solid #243246;
  border-radius: 14px;
  padding: 16px;
}

.configHero.success {
  border-color: #246b32;
  background: rgba(23, 61, 34, .24);
}

.configHero h3 {
  margin: 0 0 6px;
}

.configHero p {
  margin: 0;
  color: #8f9caf;
}

.miniWide {
  width: auto !important;
  min-width: 180px;
}

.configDetails {
  margin-top: 14px;
  background: #070b11;
  border: 1px solid #243246;
  border-radius: 12px;
  padding: 12px;
}

.configDetails summary {
  cursor: pointer;
  color: #d7b46a;
  font-weight: bold;
}

.configDetails pre {
  margin-top: 12px;
  max-height: 340px;
}

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

  .configHero {
    display: block;
  }

  .miniWide {
    width: 100% !important;
    margin-top: 12px;
  }
}

/* === Logs page browser === */
.logBrowser {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(260px, 1.4fr) auto;
  gap: 10px;
  margin: 12px 0;
}

.logBrowser select {
  background: #070b11;
  color: #e8edf5;
  border: 1px solid #263449;
  border-radius: 10px;
  padding: 11px 13px;
  outline: none;
}

.logBrowser select:focus {
  border-color: #3157ff;
  box-shadow: 0 0 0 3px rgba(49,87,255,.16);
}

#logPage {
  font-family: Consolas, "Courier New", monospace !important;
  background: #05080d !important;
  border: 1px solid #1d293a !important;
  border-radius: 12px !important;
  padding: 15px !important;
  overflow-y: auto !important;
  max-height: 620px !important;
  min-height: 420px !important;
  white-space: pre-wrap;
}

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

  #logPage {
    min-height: 360px !important;
    max-height: 520px !important;
    font-size: 11px !important;
  }
}

/* === Final Log Tab polish === */
#page-logs .logPanel {
  max-width: 100%;
}

#page-logs .panelHeader {
  align-items: center;
}

#page-logs .logBrowser {
  grid-template-columns: minmax(240px, .9fr) minmax(320px, 1.4fr) 180px !important;
}

#page-logs #logPage {
  min-height: 520px !important;
  max-height: 680px !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}

#page-logs .logControls {
  margin-top: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
}

#page-logs #logSearchPage {
  min-width: 280px !important;
  flex: 1 1 320px !important;
  background: #070b11;
  color: #e8edf5;
  border: 1px solid #263449;
  border-radius: 10px;
  padding: 11px 13px;
}

#page-logs .filterButton {
  min-width: 72px;
}

#page-logs.fullscreenLog,
#page-logs .fullscreenLog {
  position: fixed !important;
  inset: 14px !important;
  z-index: 9999 !important;
}

#page-logs .fullscreenLog #logPage {
  min-height: 0 !important;
  max-height: none !important;
  height: calc(100vh - 245px) !important;
}

@media (max-width: 900px) {
  #page-logs .logBrowser {
    grid-template-columns: 1fr !important;
  }

  #page-logs #logPage {
    min-height: 420px !important;
    max-height: 560px !important;
    font-size: 11px !important;
  }

  #page-logs .logControls {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #page-logs #logSearchPage {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

.dangerButton {
  background: linear-gradient(180deg, #b83232, #7e1d1d) !important;
  color: white !important;
  border: 1px solid #d45656 !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 20px rgba(184, 50, 50, .24);
}

.dangerButton:hover {
  filter: brightness(1.1);
}

@media (max-width: 900px) {
  .dangerButton {
    width: 100% !important;
  }
}

/* === Log power features === */
.warningPanel {
  margin-bottom: 14px;
}

.warnOk {
  color: #75f35d;
  background: rgba(23, 61, 34, .22);
  border: 1px solid #246b32;
  border-radius: 12px;
  padding: 12px;
}

.dashWarn {
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 9px;
  border: 1px solid #3b4557;
  background: rgba(10,16,24,.78);
}

.dashWarn strong {
  display: block;
  color: #fff;
  margin-bottom: 4px;
}

.dashWarn span {
  color: #b9c5d6;
}

.dashWarn.warn {
  border-color: #d8891b;
  background: rgba(216, 137, 27, .12);
}

.dashWarn.danger {
  border-color: #ff7474;
  background: rgba(255, 116, 116, .12);
}

.logAnalysisBox {
  margin: 12px 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
}

.counterGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.counterGrid div {
  background: rgba(5,9,14,.55);
  border: 1px solid #263449;
  border-radius: 12px;
  padding: 10px;
}

.counterGrid strong {
  display: block;
  font-size: 22px;
  color: #fff;
}

.counterGrid span {
  color: #8f9caf;
  font-size: 11px;
}

.heatList {
  background: rgba(5,9,14,.55);
  border: 1px solid #263449;
  border-radius: 12px;
  padding: 10px;
}

.heatRow {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 6px 0;
}

.heatRow:last-child {
  border-bottom: 0;
}

.heatRow span {
  color: #c9d3e2;
}

.heatRow strong {
  color: #ff7474;
}

.smartFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.smartFilters button {
  background: #101722;
  color: #c9d3e2;
  border: 1px solid #263449;
  border-radius: 9px;
  padding: 9px 11px;
  font-weight: 800;
  cursor: pointer;
}

.smartFilters button.active {
  color: #fff;
  border-color: #d7b46a;
  background: rgba(215, 180, 106, .18);
  box-shadow: 0 0 16px rgba(215,180,106,.15);
}

.globalClean {
  background: linear-gradient(180deg, #7a2fb8, #4c1b73) !important;
  border-color: #995bd0 !important;
}

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

  .counterGrid {
    grid-template-columns: repeat(4, 1fr);
  }

  .counterGrid strong {
    font-size: 16px;
  }

  .smartFilters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .smartFilters button {
    width: 100%;
  }
}

/* === Dashboard ServerStatus + Update Output === */
.dashboardMiniGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 14px;
  margin-bottom: 14px;
}

.updateBadge {
  display: inline-block;
  color: #8ee26b;
  background: #102719;
  border: 1px solid #244b32;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.updateBadge.bad {
  color: #ff7474;
  background: #421919;
  border-color: #703030;
}

.statusOverviewGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.statusMiniCard {
  background: rgba(5, 9, 14, .44);
  border: 1px solid #263449;
  border-radius: 12px;
  padding: 12px;
}

.statusMiniCard strong {
  display: block;
  color: #ffffff;
  font-size: 22px;
  margin-bottom: 4px;
}

.statusMiniCard span {
  color: #8f9caf;
  font-size: 12px;
}

.statusMiniCard.good {
  border-color: #246b32;
  background: rgba(23, 61, 34, .22);
}

.statusMiniCard.bad {
  border-color: #703030;
  background: rgba(66, 25, 25, .22);
}

.serverHealthList {
  display: grid;
  gap: 7px;
}

.serverHealthRow {
  display: grid;
  grid-template-columns: 14px minmax(120px, .8fr) minmax(160px, 1.2fr) 60px 72px;
  align-items: center;
  gap: 8px;
  background: rgba(5, 9, 14, .34);
  border: 1px solid #1d293a;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 12px;
}

.serverHealthRow strong {
  color: #e8edf5;
}

.serverHealthRow span {
  color: #b8c5d6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serverHealthRow em {
  color: #d7b46a;
  font-style: normal;
}

.okText {
  color: #75f35d;
}

.badOnlyText {
  color: #ff7474;
}

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

  .statusOverviewGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .serverHealthRow {
    grid-template-columns: 14px minmax(100px, 1fr) 70px;
  }

  .serverHealthRow span:nth-of-type(2),
  .serverHealthRow small {
    display: none;
  }
}

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

  .updateBadge {
    margin-top: 8px;
  }
}

/* Hide old uptime host line instantly */
#uptimeCard .statTitle + .num + div {
  display: none !important;
}

/* Dashboard server uptime column */
.serverHead,
.serverLine {
  grid-template-columns: minmax(210px, 1.4fr) 90px 90px minmax(180px, 1.2fr) 80px 95px 90px 170px !important;
}

@media (max-width: 900px) {
  .serverHead,
  .serverLine {
    grid-template-columns: 1fr !important;
  }
}

/* === Full Server Overview Page === */
.svLoading {
  color: #d7b46a;
  background: rgba(5,9,14,.45);
  border: 1px solid #263449;
  border-radius: 14px;
  padding: 18px;
}

.svOverviewGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.svCard {
  background: linear-gradient(180deg, rgba(13,20,31,.96), rgba(6,10,16,.96));
  border: 1px solid #263449;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.svCard.online {
  border-left: 4px solid #75f35d;
}

.svCard.offline {
  border-left: 4px solid #ff7474;
}

.svHeader {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

.svMapImage {
  min-height: 128px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-color: #05080d;
  border: 1px solid #263449;
}

.svTitleLine {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.svTitleLine h3 {
  margin: 0;
  font-size: 24px;
}

.svTitleBlock p {
  margin: 6px 0 10px;
  color: #8f9caf;
}

.svConnect {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: #d7b46a;
}

.svConnect small {
  color: #8f9caf;
}

.svBadge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.svOk {
  color: #75f35d;
  background: rgba(117,243,93,.12);
  border: 1px solid rgba(117,243,93,.35);
}

.svWarn {
  color: #ffd166;
  background: rgba(255,209,102,.12);
  border: 1px solid rgba(255,209,102,.35);
}

.svCritical {
  color: #ff7474;
  background: rgba(255,116,116,.12);
  border: 1px solid rgba(255,116,116,.35);
}

.svStatGrid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.svStatGrid div,
.svInfoRows div {
  background: rgba(5,9,14,.45);
  border: 1px solid #1d293a;
  border-radius: 12px;
  padding: 10px;
}

.svStatGrid span,
.svInfoRows span {
  display: block;
  color: #8f9caf;
  font-size: 11px;
  margin-bottom: 4px;
}

.svStatGrid strong,
.svInfoRows strong {
  color: #fff;
  font-size: 14px;
  word-break: break-word;
}

.svSection {
  background: rgba(5,9,14,.25);
  border: 1px solid #1d293a;
  border-radius: 14px;
  padding: 13px;
  margin-top: 12px;
}

.svSection h4 {
  margin: 0 0 10px;
  color: #fff;
}

.svMapNow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #d7b46a;
  margin-bottom: 10px;
}

.svMapNow span {
  color: #8f9caf;
}

.svMapHistory {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.svMapPill {
  background: #101722;
  border: 1px solid #263449;
  color: #c9d3e2;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
}

.svTwoCol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.svPlayerTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.svPlayerTable th,
.svPlayerTable td {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 7px 5px;
  text-align: left;
}

.svPlayerTable th {
  color: #8f9caf;
}

.svPlayerTable td {
  color: #e8edf5;
}

.mutedCell {
  color: #8f9caf !important;
  text-align: center !important;
}

.svHeatList,
.svLogList {
  display: grid;
  gap: 7px;
}

.svHeatRow,
.svLogRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: rgba(5,9,14,.38);
  border: 1px solid #1d293a;
  border-radius: 9px;
  padding: 8px;
  color: #c9d3e2;
}

.svHeatRow strong {
  color: #ff7474;
}

.svCrash strong {
  color: #ff7474;
}

.svTinyOk,
.svTinyMuted {
  color: #8f9caf;
  padding: 8px;
}

.svTinyOk {
  color: #75f35d;
}

.svInfoRows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.svActions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.svActions button,
.svActionLink {
  border: 1px solid #263449;
  background: #101722;
  color: #e8edf5;
  border-radius: 10px;
  padding: 10px 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.svActions .restart {
  border-color: #d7b46a;
}

.svActions .stop {
  border-color: #ff7474;
  color: #ff7474;
}

.svActions .log,
.svActionLink {
  border-color: #3157ff;
  color: #b9c8ff;
}

@media (max-width: 1200px) {
  .svHeader,
  .svTwoCol {
    grid-template-columns: 1fr;
  }

  .svStatGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 700px) {
  .svStatGrid,
  .svInfoRows {
    grid-template-columns: repeat(2, 1fr);
  }

  .svMapImage {
    min-height: 110px;
  }

  .svTitleLine h3 {
    font-size: 18px;
  }
}

/* === Server Overview V2 isolated === */
#serversFullV2 {
  margin-top: 18px;
}

.v2Loading,
.v2Header {
  background: rgba(8, 13, 21, .75);
  border: 1px solid #263449;
  border-radius: 16px;
  padding: 16px;
}

.v2Header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.v2Header h2 {
  margin: 0 0 6px;
}

.v2Header p {
  margin: 0;
  color: #8f9caf;
}

.v2Header span {
  background: rgba(215, 180, 106, .14);
  border: 1px solid rgba(215, 180, 106, .35);
  color: #d7b46a;
  padding: 8px 11px;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}

.v2Grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.v2Card {
  background: linear-gradient(180deg, rgba(13,20,31,.96), rgba(5,8,13,.96));
  border: 1px solid #263449;
  border-left: 4px solid #263449;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 35px rgba(0,0,0,.25);
}

.v2Card.active {
  border-left-color: #d7b46a;
}

.v2Card.stable {
  border-left-color: #75f35d;
}

.v2Card.critical {
  border-left-color: #ff7474;
}

.v2Top {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

.v2Map {
  min-height: 132px;
  border-radius: 14px;
  border: 1px solid #263449;
  background-size: cover;
  background-position: center;
  background-color: #05080d;
  display: grid;
  place-items: center;
  color: #8f9caf;
  font-size: 12px;
}

.v2TitleLine {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.v2TitleLine h3 {
  margin: 0;
  font-size: 24px;
}

.v2Title p {
  margin: 7px 0 10px;
  color: #8f9caf;
}

.v2Connect {
  color: #d7b46a;
  font-weight: 900;
}

.v2Badge {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid #263449;
}

.v2Badge.ok {
  color: #75f35d;
  background: rgba(117,243,93,.12);
  border-color: rgba(117,243,93,.35);
}

.v2Badge.warn {
  color: #ffd166;
  background: rgba(255,209,102,.12);
  border-color: rgba(255,209,102,.35);
}

.v2Badge.bad {
  color: #ff7474;
  background: rgba(255,116,116,.12);
  border-color: rgba(255,116,116,.35);
}

.v2Stats {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.v2Stats div,
.v2Rows div {
  background: rgba(5,9,14,.45);
  border: 1px solid #1d293a;
  border-radius: 12px;
  padding: 10px;
}

.v2Stats span,
.v2Rows span {
  display: block;
  color: #8f9caf;
  font-size: 11px;
  margin-bottom: 5px;
}

.v2Stats strong,
.v2Rows strong {
  color: #fff;
  font-size: 13px;
  word-break: break-word;
}

.v2Sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.v2Sections section {
  background: rgba(5,9,14,.24);
  border: 1px solid #1d293a;
  border-radius: 14px;
  padding: 12px;
}

.v2Sections h4 {
  margin: 0 0 10px;
}

.v2Table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.v2Table th,
.v2Table td {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 7px 5px;
  text-align: left;
}

.v2Table th {
  color: #8f9caf;
}

.v2Table td {
  color: #e8edf5;
}

.v2Muted {
  color: #8f9caf !important;
  text-align: center !important;
}

.v2Rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v2Actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.v2Actions button,
.v2Actions a {
  border: 1px solid #263449;
  background: #101722;
  color: #e8edf5;
  border-radius: 10px;
  padding: 10px 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.v2Actions .restart {
  border-color: #d7b46a;
}

.v2Actions .stop {
  border-color: #ff7474;
  color: #ff7474;
}

.v2Actions .log,
.v2Actions a {
  border-color: #3157ff;
  color: #b9c8ff;
}

@media (max-width: 1200px) {
  .v2Top,
  .v2Sections {
    grid-template-columns: 1fr;
  }

  .v2Stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 700px) {
  .v2Stats,
  .v2Rows {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2Map {
    min-height: 110px;
  }

  .v2TitleLine h3 {
    font-size: 18px;
  }

  .v2Header {
    display: block;
  }

  .v2Header span {
    display: inline-block;
    margin-top: 10px;
  }
}

/* === V2 MiniGraphs + glowing buttons === */
.v2StatePill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .02em;
  border: 1px solid transparent;
  text-shadow: 0 0 8px rgba(255,255,255,.18);
}

.v2StatePill.on {
  color: #baffaa;
  background: linear-gradient(180deg, rgba(55, 180, 52, .95), rgba(20, 95, 34, .95));
  border-color: rgba(117, 243, 93, .55);
  box-shadow: 0 0 12px rgba(117, 243, 93, .25), inset 0 0 10px rgba(255,255,255,.08);
}

.v2StatePill.off {
  color: #ffd0d0;
  background: linear-gradient(180deg, rgba(190, 55, 55, .95), rgba(95, 24, 30, .95));
  border-color: rgba(255, 116, 116, .55);
  box-shadow: 0 0 12px rgba(255, 116, 116, .25), inset 0 0 10px rgba(255,255,255,.08);
}

.v2GraphGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 12px;
}

.v2MiniGraph {
  background: rgba(5, 9, 14, .45);
  border: 1px solid #1d293a;
  border-radius: 12px;
  padding: 9px;
  min-width: 0;
}

.v2MiniGraphTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.v2MiniGraphTop span {
  color: #8f9caf;
  font-size: 11px;
}

.v2MiniGraphTop strong {
  color: #fff;
  font-size: 12px;
}

.v2MiniGraph svg {
  width: 100%;
  height: 44px;
  overflow: visible;
}

.v2MiniGraph polyline {
  fill: none;
  stroke: #75f35d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(117, 243, 93, .35));
}

@media (max-width: 900px) {
  .v2GraphGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* === V2 Graph Current + Peak === */
.v2MiniGraph svg {
  width: 100%;
  height: 46px;
  overflow: visible;
}

.v2MiniGraph .v2CurrentLine {
  fill: none;
  stroke: #75f35d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(117, 243, 93, .35));
}

.v2MiniGraph .v2PeakLine {
  stroke: #ffb84d;
  stroke-width: 3;
  stroke-dasharray: 6 5;
  opacity: .9;
  filter: drop-shadow(0 0 5px rgba(255, 184, 77, .30));
}

.v2GraphLegend {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 10px;
}

.v2GraphLegend .current {
  color: #75f35d;
}

.v2GraphLegend .peak {
  color: #ffb84d;
}

.v2Rows .v2StatePill {
  width: fit-content;
}

/* === V2 Visual Cleanup Final === */
.v2CardClean {
  padding: 14px;
  overflow: hidden;
}

.v2Hero {
  min-height: 180px;
  border-radius: 16px;
  border: 1px solid #263449;
  background-size: cover;
  background-position: center;
  background-color: #05080d;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #8f9caf;
  margin-bottom: 12px;
}

.v2Hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.76));
  pointer-events: none;
}

.v2HeroOverlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.v2HeroOverlay h3 {
  margin: 0;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.v2HeroOverlay p {
  margin: 4px 0 0;
  color: #c7d0df;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.v2HeroBadges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.v2CleanConnect {
  margin-bottom: 12px;
  color: #d7b46a;
  font-weight: 950;
  word-break: break-word;
}

.v2CoreStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.v2CoreStat {
  background: rgba(5,9,14,.48);
  border: 1px solid #1d293a;
  border-radius: 12px;
  padding: 10px;
}

.v2CoreStat span {
  display: block;
  color: #8f9caf;
  font-size: 11px;
  margin-bottom: 5px;
}

.v2CoreStat strong {
  color: #fff;
  font-size: 13px;
  word-break: break-word;
}

.v2WideGraphGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 12px;
}

.v2WideGraph {
  background: rgba(5, 9, 14, .45);
  border: 1px solid #1d293a;
  border-radius: 13px;
  padding: 10px;
}

.v2WideGraphTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 11px;
  color: #8f9caf;
}

.v2WideGraphTop strong {
  color: #fff;
}

.v2WideGraph svg {
  width: 100%;
  height: 62px;
  overflow: visible;
}

.v2WideGraph .v2LineA {
  fill: none;
  stroke: #69e86d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(105,232,109,.35));
}

.v2WideGraph .v2LineB {
  fill: none;
  stroke: #4fb8ff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(79,184,255,.32));
}

.v2SectionsClean {
  grid-template-columns: 1.1fr .9fr .9fr;
}

.v2SectionsClean section {
  background: rgba(5,9,14,.18);
  border-color: rgba(38,52,73,.75);
}

.v2RowsClean {
  grid-template-columns: 1fr 1fr;
}

.v2ActionsClean {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.v2ActionRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.v2ActionRow button,
.v2ActionRow a {
  flex: 1 1 92px;
  text-align: center;
}

.v2Table tbody tr:nth-child(even) {
  background: rgba(255,255,255,.025);
}

.v2Table tbody tr:hover {
  background: rgba(117,243,93,.06);
}

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

  .v2WideGraphGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .v2Hero {
    min-height: 150px;
  }

  .v2CoreStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2HeroOverlay {
    align-items: flex-start;
    flex-direction: column;
  }

  .v2HeroBadges {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* === V2 final English layout polish === */
.v2Hero {
  min-height: 210px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #05080d !important;
}

.v2Hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.04), rgba(0,0,0,.55));
  pointer-events: none;
}

.v2GraphHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 10px;
}

.v2GraphHeader h4 {
  margin: 0;
  color: #fff;
}

.v2RangeButtons {
  display: flex;
  gap: 6px;
}

.v2RangeButtons button {
  background: rgba(5,9,14,.72);
  border: 1px solid #263449;
  color: #8f9caf;
  border-radius: 9px;
  padding: 6px 9px;
  font-weight: 900;
  cursor: pointer;
}

.v2RangeButtons button.active {
  color: #fff;
  border-color: rgba(117,243,93,.65);
  background: linear-gradient(180deg, rgba(55,180,52,.85), rgba(20,95,34,.85));
  box-shadow: 0 0 12px rgba(117,243,93,.22);
}

.v2IconActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.v2IconActions button,
.v2IconActions a {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid #263449;
  background: linear-gradient(180deg, #162034, #0b111d);
  color: #e8edf5;
  font-size: 16px;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.v2IconActions .restart {
  border-color: rgba(215,180,106,.55);
  color: #ffd166;
}

.v2IconActions .stop {
  border-color: rgba(255,116,116,.55);
  color: #ff7474;
}

.v2IconActions .log,
.v2IconActions .v2WebAdminLink {
  border-color: rgba(79,184,255,.55);
  color: #b9dcff;
}

.v2IconActions button:hover,
.v2IconActions a:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

.v2WideGraph svg {
  height: 72px !important;
}

.v2WideGraph .v2LineA {
  stroke: #75f35d !important;
}

.v2WideGraph .v2LineB {
  stroke: #4fb8ff !important;
}

@media (max-width: 700px) {
  .v2Hero {
    min-height: 180px !important;
  }

  .v2GraphHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .v2IconActions button,
  .v2IconActions a {
    width: 36px;
    height: 36px;
  }
}

/* === V2 Backend History Layout Refinement === */
.v2CardCompact .v2CompactHeader {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 12px;
}

.v2MapThumb {
  min-height: 122px;
  border-radius: 14px;
  border: 1px solid #263449;
  background-color: #05080d;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: grid;
  place-items: center;
  color: #8f9caf;
  font-size: 12px;
  overflow: hidden;
}

.v2CompactInfo {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
}

.v2MapLine {
  background: rgba(5,9,14,.45);
  border: 1px solid #1d293a;
  border-radius: 12px;
  padding: 9px 10px;
}

.v2MapLine span {
  display: block;
  color: #8f9caf;
  font-size: 11px;
  margin-bottom: 4px;
}

.v2MapLine strong {
  color: #fff;
  word-break: break-word;
}

.v2WideGraphGrid3 {
  grid-template-columns: 1fr;
}

.v2WideGraphGrid3 .v2WideGraph {
  min-height: 126px;
}

@media (min-width: 1350px) {
  .v2WideGraphGrid3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .v2CardCompact .v2CompactHeader {
    grid-template-columns: 96px 1fr;
    gap: 10px;
  }

  .v2MapThumb {
    min-height: 96px;
  }

  .v2TitleLine h3 {
    font-size: 17px;
  }
}

/* === V2 Loading Message === */
.v2LoadingBox {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(8, 13, 21, .82);
  border: 1px solid #263449;
  border-radius: 16px;
  padding: 18px;
  color: #e8edf5;
  box-shadow: 0 16px 35px rgba(0,0,0,.24);
}

.v2LoadingBox strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.v2LoadingBox span {
  color: #8f9caf;
  font-size: 13px;
}

.v2Spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255,255,255,.14);
  border-top-color: #75f35d;
  border-radius: 50%;
  animation: v2spin .8s linear infinite;
}

@keyframes v2spin {
  to { transform: rotate(360deg); }
}

.dashBigIcon,
.statIcon.dashBigIcon {
  font-size: 30px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display: grid !important;
  place-items: center !important;
}

.panelHeaderIcon {
  font-size: 26px;
  margin-right: 8px;
}

.statCard.orange {
  border-color: rgba(255, 152, 67, .42);
}

.statCard.cyan {
  border-color: rgba(79, 184, 255, .42);
}

/* === Server Overview V2 map screenshot normalization === */
.v2MapThumb {
  width: 180px !important;
  height: 105px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 105px !important;
  max-height: 105px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border: 1px solid #34445e !important;
  background-color: #070b11 !important;
  display: grid !important;
  place-items: center !important;
  color: #8390a3 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  letter-spacing: .08em !important;
  text-align: center !important;
  flex: 0 0 180px !important;
}

.v2MapThumb.noImage {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255,255,255,.04) 25%, #080d14 25%) !important;
  background-position: 12px 0, 12px 0, 0 0, 0 0 !important;
  background-size: 24px 24px !important;
  background-color: #080d14 !important;
  color: #7f8da3 !important;
}

.v2MapThumb.noImage::before {
  content: "NO IMAGE";
}

.v2MapThumb.noImage {
  font-size: 0 !important;
}

@media (max-width: 900px) {
  .v2MapThumb {
    width: 120px !important;
    height: 76px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    flex-basis: 120px !important;
  }
}

/* === V2 real image thumbnail hard fix === */
.v2MapThumb {
  width: 180px !important;
  height: 105px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 105px !important;
  max-height: 105px !important;
  flex: 0 0 180px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid #34445e !important;
  background: #070b11 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.v2MapThumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border: 0 !important;
}

.v2MapThumb.noImage {
  display: grid !important;
  place-items: center !important;
  color: #8390a3 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

@media (max-width: 900px) {
  .v2MapThumb {
    width: 120px !important;
    height: 76px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    flex-basis: 120px !important;
  }
}

/* === V2 thumbnail uniform full-image scaling === */
.v2MapThumb {
  width: 180px !important;
  height: 105px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 105px !important;
  max-height: 105px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #070b11 !important;
}

.v2MapThumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #070b11 !important;
}

@media (max-width: 900px) {
  .v2MapThumb {
    width: 120px !important;
    height: 76px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: 76px !important;
    max-height: 76px !important;
  }
}

/* === V2 thumbnail exact box alignment === */
.v2MapThumb {
  width: 180px !important;
  height: 101px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 101px !important;
  max-height: 101px !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: #070b11 !important;
  display: block !important;
  overflow: hidden !important;
}

.v2MapThumb img {
  width: 180px !important;
  height: 101px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 101px !important;
  max-height: 101px !important;
  display: block !important;
  object-fit: fill !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .v2MapThumb {
    width: 120px !important;
    height: 68px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }

  .v2MapThumb img {
    width: 120px !important;
    height: 68px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }
}

/* === V2 graph axis labels === */
.v2AxisGraph {
  margin-top: 6px;
}

.axisLine {
  stroke: rgba(210, 225, 245, .28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.axisText {
  fill: #7f8da3;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .03em;
}

.v2AxisGraph .gridLine {
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* === V2 dynamic graph axis readability === */
.v2AxisGraph {
  margin-top: 6px !important;
  overflow: visible !important;
}

.axisLine {
  stroke: rgba(210, 225, 245, .32) !important;
  stroke-width: 1 !important;
  vector-effect: non-scaling-stroke !important;
}

.axisText {
  fill: #94a3b8 !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
}

.v2AxisGraph .gridLine {
  stroke: rgba(255,255,255,.09) !important;
  stroke-width: 1 !important;
  vector-effect: non-scaling-stroke !important;
}

/* === V2 deltas, hover dots, timeline === */
.v2Delta {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.v2Delta.good {
  background: rgba(117,243,93,.14);
  color: #75f35d;
}

.v2Delta.bad {
  background: rgba(255,85,85,.16);
  color: #ff6666;
}

.v2Delta.neutral {
  background: rgba(148,163,184,.14);
  color: #94a3b8;
}

.v2HoverDot {
  fill: rgba(255,255,255,.01);
  stroke: rgba(255,255,255,.18);
  stroke-width: 1;
  cursor: help;
}

.v2HoverDot:hover {
  fill: rgba(215,180,106,.28);
  stroke: #d7b46a;
}

.v2Timeline {
  display: grid;
  gap: 7px;
}

.v2TimelineItem {
  border: 1px solid #243246;
  background: rgba(5,9,14,.32);
  border-radius: 9px;
  padding: 8px 10px;
  display: grid;
  gap: 2px;
}

.v2TimelineItem strong {
  color: #d7b46a;
  font-size: 12px;
}

.v2TimelineItem span {
  color: #e8edf5;
  font-size: 12px;
}

.v2TimelineItem small {
  color: #8f9caf;
  font-size: 11px;
}

.v2TimelineItem.offline {
  border-color: rgba(255,85,85,.35);
}

.v2TimelineItem.restart {
  border-color: rgba(117,243,93,.35);
}

.v2TimelineItem.uptime {
  border-color: rgba(215,180,106,.35);
}

/* === V2 readable crash / restart timeline === */
.v2RuntimeBox {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.v2RuntimeBox > div {
  border: 1px solid rgba(215,180,106,.24);
  background: rgba(215,180,106,.08);
  border-radius: 10px;
  padding: 8px 10px;
}

.v2RuntimeBox span,
.v2TimelineMeta span {
  display: block;
  color: #8f9caf;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}

.v2RuntimeBox strong {
  color: #f4d58a;
  font-size: 13px;
}

.v2Timeline {
  display: grid;
  gap: 10px;
}

.v2TimelineItem {
  border: 1px solid #26364d;
  background: rgba(5,9,14,.34);
  border-radius: 12px;
  padding: 10px 12px;
}

.v2TimelineItem > strong {
  display: block;
  color: #e8edf5;
  font-size: 13px;
  margin-bottom: 8px;
}

.v2TimelineMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}

.v2TimelineMeta strong {
  color: #dbe7f5;
  font-size: 12px;
  word-break: break-word;
}

.v2TimelineItem.manual {
  border-color: rgba(215,180,106,.42);
}

.v2TimelineItem.pidchange,
.v2TimelineItem.restart {
  border-color: rgba(255,176,77,.42);
}

.v2TimelineItem.stop,
.v2TimelineItem.offline {
  border-color: rgba(255,85,85,.42);
}

.v2TimelineItem.start {
  border-color: rgba(117,243,93,.42);
}

@media (max-width: 900px) {
  .v2RuntimeBox,
  .v2TimelineMeta {
    grid-template-columns: 1fr;
  }
}

.v2TimelineItem.cron {
  border-color: rgba(88,166,255,.45);
}

/* === V2 timeline delete / last action polish === */
.v2TimelineHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.v2TimelineHead strong {
  color: #e8edf5;
  font-size: 13px;
  line-height: 1.35;
}

.v2TimelineDelete {
  border: 1px solid rgba(255,85,85,.35);
  background: rgba(255,85,85,.10);
  color: #ff7777;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
}

.v2TimelineDelete:hover {
  background: rgba(255,85,85,.22);
}

.v2LastAction {
  color: #d7b46a;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.configHero.pending {
  border-color: rgba(215,180,106,.45) !important;
  background: rgba(215,180,106,.08) !important;
}

.configHero.error {
  border-color: rgba(255,85,85,.45) !important;
  background: rgba(255,85,85,.08) !important;
}

/* === Log category colors === */
.logLine.logInfo {
  color: #cfd6e6;
}

.logLine.logError {
  color: #ff6b6b;
  background: rgba(255, 70, 70, 0.08);
  border-left: 3px solid rgba(255, 70, 70, 0.75);
}

.logLine.logWarn {
  color: #ffd166;
  background: rgba(255, 200, 80, 0.07);
  border-left: 3px solid rgba(255, 200, 80, 0.65);
}

.logLine.logJoin {
  color: #7CFF9B;
  background: rgba(80, 255, 120, 0.06);
  border-left: 3px solid rgba(80, 255, 120, 0.65);
}

.logLine.logLeft {
  color: #ffb86b;
  background: rgba(255, 150, 60, 0.06);
  border-left: 3px solid rgba(255, 150, 60, 0.65);
}

.logLine.logNexgen {
  color: #d6a4ff;
  background: rgba(170, 90, 255, 0.07);
  border-left: 3px solid rgba(170, 90, 255, 0.65);
}

.logLine.logMap {
  color: #77e7ff;
  background: rgba(80, 220, 255, 0.07);
  border-left: 3px solid rgba(80, 220, 255, 0.65);
}

.logLine.logNetwork {
  color: #8db7ff;
  background: rgba(90, 140, 255, 0.07);
  border-left: 3px solid rgba(90, 140, 255, 0.65);
}

.repeatBadge {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.18);
}

/* === Log noise suppression + duplicate toggle === */
.logLine.logNoise {
  opacity: 0.48;
  filter: saturate(0.65);
}

.logLine.logNoise:hover {
  opacity: 1;
  filter: none;
}

.logLine.logImportant {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

#compactToggleLogs {
  margin-left: 8px;
}

#compactToggleLogs.active {
  box-shadow: 0 0 0 1px rgba(124, 255, 155, 0.35);
}

/* === Final log tuning === */
.logLine.logNetwork {
  color: #8db7ff;
  background: rgba(90, 140, 255, 0.07);
  border-left-color: rgba(90, 140, 255, 0.75);
}

.logLine.logMap {
  color: #77e7ff;
  background: rgba(80, 220, 255, 0.07);
  border-left-color: rgba(80, 220, 255, 0.75);
}

.logLine.logNexgen {
  color: #d6a4ff;
  background: rgba(170, 90, 255, 0.06);
  border-left-color: rgba(170, 90, 255, 0.65);
}

.logLine.logNoise {
  opacity: 0.46;
  filter: saturate(0.65);
}

.logLine.logNoise:hover {
  opacity: 1;
  filter: none;
}

.repeatBadge {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.18);
}

/* === Top Error Sources === */
.topErrorBox {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.topErrorTitle {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #ff9f9f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topErrorRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}

.topErrorRow span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #cfd6e6;
  font-size: 13px;
}

.topErrorRow strong {
  color: #ff7373;
  font-size: 13px;
  font-weight: 900;
}

/* === Log diagnostics dashboard === */
.logFeatureButtons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}

.logFeatureButtons button {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(18, 26, 42, 0.88);
  color: #cfd6e6;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.logFeatureButtons button.active {
  color: #7CFF9B;
  border-color: rgba(124,255,155,0.35);
  background: rgba(30, 92, 52, 0.26);
  box-shadow: 0 0 18px rgba(80,255,120,0.08);
}

.logHealthBox {
  margin: 12px 0 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(12, 18, 30, 0.82);
  border: 1px solid rgba(255,255,255,0.08);
}

.logHealthScore {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
}

.logHealthScore strong {
  font-size: 24px;
  font-weight: 950;
}

.logHealthScore span {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.logHealthMeta {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: #cfd6e6;
}

.logHealthMeta b {
  color: #ffffff;
}

.health-good .logHealthScore strong,
.health-good .logHealthScore span {
  color: #7CFF9B;
}

.health-warning .logHealthScore strong,
.health-warning .logHealthScore span {
  color: #ffd166;
}

.health-bad .logHealthScore strong,
.health-bad .logHealthScore span,
.health-critical .logHealthScore strong,
.health-critical .logHealthScore span {
  color: #ff7373;
}

.health-critical {
  background: rgba(110, 20, 30, 0.22);
  border-color: rgba(255, 90, 90, 0.22);
}

.topMapBox .topErrorTitle {
  color: #77e7ff;
}

.topErrorRow.clickable {
  cursor: pointer;
}

.topErrorRow.clickable:hover {
  background: rgba(255,255,255,0.055);
}

@media (min-width: 760px) {
  .logFeatureButtons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* === AI Fix Advisor === */
.advisorBox {
  margin: 6px 0 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(14, 20, 34, 0.88);
  border: 1px solid rgba(255,255,255,0.08);
}

.advisorSeverity {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.severity-info { color: #8db7ff; background: rgba(80,140,255,0.14); }
.severity-low { color: #77e7ff; background: rgba(80,220,255,0.14); }
.severity-medium { color: #ffd166; background: rgba(255,210,80,0.14); }
.severity-high { color: #ff7373; background: rgba(255,90,90,0.14); }

.advisorLine {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.advisorLine b {
  color: #ffffff;
  font-size: 12px;
}

.advisorLine span {
  color: #cfd6e6;
  font-size: 12px;
  line-height: 1.45;
}

.advisorActions {
  display: flex;
  gap: 8px;
}

.advisorActions button {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(20, 30, 48, 0.92);
  color: #dce6ff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

/* === Deep AI-style Advisor === */
.deepAdvisorBox {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(8, 14, 26, 0.92);
  border: 1px solid rgba(125, 180, 255, 0.14);
}

.deepGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.deepGrid div {
  display: grid;
  gap: 3px;
}

.deepGrid b {
  font-size: 11px;
  color: #ffffff;
}

.deepGrid span {
  font-size: 12px;
  color: #8db7ff;
  font-weight: 800;
}

.advisorCode {
  margin: 6px 0 0;
  padding: 10px;
  max-height: 180px;
  overflow: auto;
  border-radius: 10px;
  background: rgba(0,0,0,0.28);
  color: #dce6ff;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.deepLoading {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  color: #ffd166;
  background: rgba(255, 210, 80, 0.08);
  font-size: 12px;
  font-weight: 800;
}

.uploadGrid{display:grid;grid-template-columns:1.3fr .9fr;gap:18px}
.uploadDrop{border:2px dashed #2f4261;background:#080d14;border-radius:16px;padding:28px;text-align:center;min-height:300px}
.uploadDrop.dragging{border-color:#d7b46a;background:#111720}
.uploadIcon{font-size:54px;color:#d7b46a}
.uploadDrop h3{margin:10px 0;font-size:26px}
.uploadDrop p{color:#9aa8ba}
.uploadSelected{margin-top:16px;text-align:left;background:#06090d;border:1px solid #202a38;border-radius:12px;padding:12px;max-height:180px;overflow:auto;color:#d8e3f0}
.uploadSelected div{display:flex;justify-content:space-between;border-bottom:1px solid #1a2431;padding:7px 0}
.uploadSelected div:last-child{border-bottom:0}
.uploadSelected span{color:#9aa8ba}
.uploadOptions{background:#080d14;border:1px solid #202a38;border-radius:16px;padding:18px}
.uploadOptions label{display:block;margin:12px 0 6px;color:#d7b46a;font-weight:bold}
.uploadOptions select{width:100%;padding:11px;border-radius:10px;border:1px solid #263855;background:#111a28;color:#e8edf5}
.uploadCheck{color:#e8edf5!important;font-weight:normal!important}
.uploadCheck input{margin-right:8px}
.uploadStart{margin-top:16px}
.uploadProgressWrap{height:14px;background:#06090d;border:1px solid #202a38;border-radius:999px;overflow:hidden;margin-top:18px}
#uploadProgressBar{height:100%;width:0%;background:#d7b46a;transition:width .2s ease}
.uploadStatus{margin-top:12px;color:#9aa8ba}
.uploadHintBox{margin-top:18px;background:#111720;border:1px solid #26313f;border-radius:14px;padding:14px;color:#d8e3f0}
.uploadResult{margin-top:18px;max-height:420px}

.uploadResultNice {
  margin-top: 18px;
}

.uploadEmpty {
  background: #080d14;
  border: 1px solid #202a38;
  border-radius: 14px;
  padding: 18px;
  color: #9aa8ba;
  text-align: center;
}

.uploadSummary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.uploadSummary > div {
  background: linear-gradient(180deg, #101827, #070b11);
  border: 1px solid #22314a;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}

.uploadSummary strong {
  display: block;
  font-size: 22px;
  color: #d7b46a;
  line-height: 1.1;
}

.uploadSummary span {
  display: block;
  margin-top: 5px;
  color: #9aa8ba;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.uploadSummaryBad {
  grid-template-columns: 1fr;
}

.uploadSummaryBad strong {
  color: #ff6b6b;
}

.uploadResultCards {
  display: grid;
  gap: 12px;
}

.uploadResultCard {
  background: #080d14;
  border: 1px solid #22314a;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.uploadResultCard.ok {
  border-color: rgba(76, 175, 80, .45);
}

.uploadResultCard.skip {
  border-color: rgba(215, 180, 106, .45);
}

.uploadResultTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.uploadResultTop strong {
  display: block;
  color: #eef4ff;
  font-size: 16px;
  word-break: break-word;
}

.uploadResultTop span {
  display: block;
  color: #9aa8ba;
  font-size: 13px;
  margin-top: 4px;
}

.uploadBadge {
  background: #1c2b20;
  border: 1px solid #3e8d4d;
  color: #9bf0a8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  white-space: nowrap;
}

.uploadResultCard.skip .uploadBadge {
  background: #2c2312;
  border-color: #d7b46a;
  color: #ffd98a;
}

.uploadMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.uploadMeta div {
  background: #05080d;
  border: 1px solid #1a2638;
  border-radius: 10px;
  padding: 10px;
}

.uploadMeta span {
  display: block;
  color: #7e8da1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.uploadMeta b {
  color: #dce7f5;
  font-size: 13px;
  word-break: break-word;
}

.uploadPath {
  background: #05080d;
  border: 1px solid #1a2638;
  border-radius: 10px;
  color: #92a4bb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 10px;
  word-break: break-all;
}

.uploadDetails {
  margin-top: 10px;
  color: #c8d3e0;
}

.uploadDetails summary {
  cursor: pointer;
  color: #d7b46a;
  font-weight: 700;
  padding: 8px 0;
}

.uploadLinkRow {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  align-items: center;
  border-top: 1px solid #182234;
  padding: 8px 0;
}

.uploadLinkRow span {
  color: #9bf0a8;
  font-weight: 700;
}

.uploadLinkRow.bad span {
  color: #ff8a8a;
}

.uploadLinkRow code {
  color: #9aa8ba;
  font-size: 12px;
  word-break: break-all;
}

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

  .uploadSummary {
    grid-template-columns: repeat(2, 1fr);
  }

  .uploadMeta {
    grid-template-columns: 1fr;
  }

  .uploadLinkRow {
    grid-template-columns: 1fr;
  }
}

.uploadGridNoTarget {
  grid-template-columns: 1.4fr .75fr;
}

.uploadInstallId {
  background: #080d14;
  border: 1px solid #22314a;
  border-radius: 12px;
  padding: 10px 12px;
  color: #9aa8ba;
  margin-bottom: 12px;
}

.uploadInstallId code {
  color: #d7b46a;
}

.uploadFlags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.uploadFlags span {
  background: #101827;
  border: 1px solid #2b3c58;
  color: #d7b46a;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
}

.uploadWarn {
  border-top: 1px solid #182234;
  padding: 8px 0;
  color: #ffd98a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-word;
}

.uploadHistoryBox {
  margin-top: 18px;
  background: #080d14;
  border: 1px solid #202a38;
  border-radius: 16px;
  padding: 16px;
}

.uploadHistoryBox h3 {
  margin: 0 0 12px;
  color: #eef4ff;
}

.uploadHistoryItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #182234;
  padding: 12px 0;
}

.uploadHistoryItem:first-child {
  border-top: 0;
}

.uploadHistoryItem strong {
  display: block;
  color: #d7b46a;
  font-size: 13px;
}

.uploadHistoryItem span {
  display: block;
  color: #9aa8ba;
  font-size: 12px;
  margin-top: 4px;
}

.uploadHistoryItem button {
  border: 1px solid #334966;
  background: #101827;
  color: #dce7f5;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.uploadHistoryItem button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

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

  .uploadHistoryItem {
    align-items: flex-start;
    flex-direction: column;
  }
}

.uploadImagePreview {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
  background: #05080d;
  border: 1px solid #22314a;
  border-radius: 12px;
  padding: 10px;
  margin: 10px 0;
}

.uploadImagePreview img {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #334966;
  background: #000;
}

.uploadImagePreview strong {
  display: block;
  color: #d7b46a;
  margin-bottom: 4px;
}

.uploadImagePreview span {
  display: block;
  color: #9aa8ba;
  font-size: 12px;
  word-break: break-all;
}

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

  .uploadImagePreview img {
    width: 100%;
    height: auto;
    max-height: 220px;
  }
}

/* Upload Center visual polish */

#page-upload .panel {
  background:
    radial-gradient(circle at top left, rgba(215,180,106,.13), transparent 32%),
    linear-gradient(180deg, rgba(13,20,32,.98), rgba(4,7,12,.98));
  border: 1px solid rgba(215,180,106,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

#page-upload .panelHeader h2 {
  font-size: 26px;
  letter-spacing: .03em;
}

.uploadGrid,
.uploadGridNoTarget {
  align-items: stretch;
}

.uploadDrop {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(215,180,106,.09), rgba(22,32,49,.35)),
    #070b12;
  border: 1px solid rgba(215,180,106,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 14px 45px rgba(0,0,0,.28);
}

.uploadDrop::before {
  content: "";
  position: absolute;
  inset: -80px;
  background:
    radial-gradient(circle, rgba(215,180,106,.18) 0 2px, transparent 3px);
  background-size: 34px 34px;
  opacity: .12;
  pointer-events: none;
}

.uploadDrop > * {
  position: relative;
  z-index: 1;
}

.uploadDrop.dragging {
  transform: translateY(-2px);
  border-color: rgba(255,217,138,.75);
  box-shadow: 0 0 0 3px rgba(215,180,106,.12), 0 18px 55px rgba(0,0,0,.4);
}

.uploadIcon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(215,180,106,.28), rgba(215,180,106,.08));
  border: 1px solid rgba(215,180,106,.35);
  text-shadow: 0 0 18px rgba(215,180,106,.55);
}

.uploadDrop h3 {
  color: #f2e3c0;
  font-size: 30px;
  margin-top: 8px;
}

.uploadDrop p {
  max-width: 680px;
  margin: 0 auto 18px;
  line-height: 1.55;
}

.uploadOptions {
  background:
    linear-gradient(180deg, rgba(16,24,39,.96), rgba(6,9,15,.96));
  border-color: rgba(215,180,106,.18);
  box-shadow: 0 14px 45px rgba(0,0,0,.25);
}

.uploadOptions .wideButton,
.uploadDrop .wideButton {
  min-height: 44px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .025em;
}

.uploadPreviewBtn {
  background: linear-gradient(180deg, #1b2940, #101827) !important;
  border: 1px solid #334966 !important;
}

.uploadStart {
  background: linear-gradient(180deg, #d7b46a, #9d762b) !important;
  color: #100d05 !important;
  border: 1px solid #f1d28b !important;
  box-shadow: 0 10px 28px rgba(215,180,106,.22);
}

.uploadStart:hover,
.uploadPreviewBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.uploadSelected {
  border-color: rgba(215,180,106,.16);
  box-shadow: inset 0 0 20px rgba(0,0,0,.22);
}

.uploadSelected div {
  border-bottom-color: rgba(255,255,255,.06);
}

.uploadHintBox {
  border-color: rgba(215,180,106,.22);
  background:
    linear-gradient(90deg, rgba(215,180,106,.1), rgba(17,23,32,.9));
}

.uploadHintBox strong {
  color: #f2d18a;
}

.uploadProgressWrap {
  height: 18px;
  border-color: rgba(215,180,106,.22);
  box-shadow: inset 0 0 16px rgba(0,0,0,.35);
}

#uploadProgressBar {
  background: linear-gradient(90deg, #9d762b, #d7b46a, #ffe3a3);
  box-shadow: 0 0 18px rgba(215,180,106,.45);
}

.uploadStatus {
  padding: 10px 12px;
  background: #05080d;
  border: 1px solid #1a2638;
  border-radius: 12px;
}

.uploadSummary > div {
  position: relative;
  overflow: hidden;
}

.uploadSummary > div::after {
  content: "";
  position: absolute;
  inset: auto -20px -35px auto;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: rgba(215,180,106,.08);
}

.uploadResultCard {
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.uploadResultCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
}

.uploadResultCard.ok {
  background:
    linear-gradient(180deg, rgba(13,25,18,.7), rgba(7,11,18,.98));
}

.uploadResultCard.skip {
  background:
    linear-gradient(180deg, rgba(38,30,13,.7), rgba(7,11,18,.98));
}

.uploadBadge {
  min-width: 76px;
  text-align: center;
}

.uploadFlags span {
  background: rgba(215,180,106,.09);
  border-color: rgba(215,180,106,.28);
}

.uploadPath {
  border-color: rgba(215,180,106,.14);
}

.uploadRedirectPath {
  color: #ffe0a3;
  border-color: rgba(215,180,106,.35);
  background: rgba(215,180,106,.07);
}

.uploadImagePreview {
  border-color: rgba(215,180,106,.3);
  background:
    linear-gradient(180deg, rgba(215,180,106,.07), rgba(5,8,13,.96));
}

.uploadImagePreview img {
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.uploadHistoryBox {
  background:
    linear-gradient(180deg, rgba(16,24,39,.92), rgba(6,9,15,.96));
  border-color: rgba(215,180,106,.18);
  box-shadow: 0 14px 45px rgba(0,0,0,.24);
}

.uploadHistoryBox h3 {
  color: #f2e3c0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.uploadHistoryBox h3::before {
  content: "↺";
  color: #d7b46a;
}

.uploadHistoryItem {
  border-top-color: rgba(255,255,255,.07);
}

.uploadHistoryItem:hover {
  background: rgba(215,180,106,.04);
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 10px;
}

.uploadHistoryItem button {
  border-color: rgba(215,180,106,.35);
  background: linear-gradient(180deg, #1b2940, #101827);
}

.uploadMeta div {
  border-color: rgba(255,255,255,.07);
}

.uploadMeta div:hover {
  border-color: rgba(215,180,106,.22);
}

@media (max-width: 900px) {
  .uploadDrop h3 {
    font-size: 24px;
  }

  .uploadIcon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
  }
}

.uploadHintTitle {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
  color: #f2d18a;
  letter-spacing: .02em;
}

.uploadHintGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.uploadHintItem {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  background: rgba(8,12,18,.72);
  border: 1px solid rgba(215,180,106,.12);
  transition: all .14s ease;
}

.uploadHintItem:hover {
  transform: translateY(-2px);
  border-color: rgba(215,180,106,.3);
  background: rgba(12,17,25,.92);
}

.uploadHintExt {
  min-width: 78px;
  padding: 7px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(215,180,106,.22), rgba(215,180,106,.08));
  border: 1px solid rgba(215,180,106,.26);
  font-weight: 800;
  text-align: center;
  color: #ffe2a7;
  font-size: 13px;
  letter-spacing: .03em;
}

.uploadHintItem strong {
  display: block;
  color: #f3f0e7;
  margin-bottom: 4px;
}

.uploadHintItem small {
  display: block;
  line-height: 1.45;
  color: #a8b2c5;
  font-size: 12px;
}

.uploadHintTitle {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
  color: #f2d18a;
  letter-spacing: .02em;
}

.uploadHintGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.uploadHintItem {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  background: rgba(8,12,18,.72);
  border: 1px solid rgba(215,180,106,.12);
  transition: all .14s ease;
}

.uploadHintItem:hover {
  transform: translateY(-2px);
  border-color: rgba(215,180,106,.3);
  background: rgba(12,17,25,.92);
}

.uploadHintExt {
  min-width: 78px;
  padding: 7px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(215,180,106,.22), rgba(215,180,106,.08));
  border: 1px solid rgba(215,180,106,.26);
  font-weight: 800;
  text-align: center;
  color: #ffe2a7;
  font-size: 13px;
  letter-spacing: .03em;
}

.uploadHintItem strong {
  display: block;
  color: #f3f0e7;
  margin-bottom: 4px;
}

.uploadHintItem small {
  display: block;
  line-height: 1.45;
  color: #a8b2c5;
  font-size: 12px;
}

.redirectPageContent {
  margin-top: 18px;
}

.redirectHero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border: 1px solid #26313f;
  border-radius: 16px;
  padding: 18px;
  background: #0b1018;
  margin-bottom: 18px;
}

.redirectHero.ok {
  border-color: #245f35;
  box-shadow: 0 0 22px rgba(70, 255, 120, .06);
}

.redirectHero.warn {
  border-color: #7a5c1e;
  box-shadow: 0 0 22px rgba(255, 190, 70, .06);
}

.redirectHero.bad {
  border-color: #7a2b2b;
  box-shadow: 0 0 22px rgba(255, 70, 70, .06);
}

.redirectHeroTitle {
  color: #9aa8ba;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.redirectHero strong {
  display: block;
  font-size: 34px;
  color: #e8edf5;
  margin: 4px 0;
}

.redirectHero span {
  color: #9aa8ba;
}

.redirectHeroPath {
  background: #070b11;
  border: 1px solid #202a38;
  border-radius: 12px;
  padding: 12px;
  color: #d7b46a;
  font-family: monospace;
  word-break: break-all;
}

.redirectGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.redirectCard,
.redirectTableBox {
  background: #0b1018;
  border: 1px solid #26313f;
  border-radius: 14px;
  padding: 16px;
}

.redirectCard h3,
.redirectTableBox h3 {
  margin: 0 0 14px;
  color: #d7b46a;
}

.redirectRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #1b2635;
}

.redirectRow:last-child {
  border-bottom: 0;
}

.redirectRow span {
  color: #9aa8ba;
}

.redirectBadge {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: bold;
}

.redirectBadge.ok {
  background: #173d22;
  color: #7dff78;
}

.redirectBadge.warn {
  background: #4b3812;
  color: #ffd36b;
}

.redirectBadge.bad {
  background: #421919;
  color: #ff7474;
}

.redirectTables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.redirectFileLine {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #1b2635;
  align-items: center;
}

.redirectFileLine span {
  color: #e8edf5;
  word-break: break-all;
}

.redirectFileLine strong {
  color: #8ee26b;
}

.redirectFileLine small {
  color: #9aa8ba;
}

.redirectLoading,
.redirectError,
.redirectEmpty {
  background: #070b11;
  border: 1px solid #202a38;
  border-radius: 12px;
  padding: 14px;
  color: #9aa8ba;
}

.redirectError {
  color: #ff7474;
}

@media (max-width: 1200px) {
  .redirectGrid,
  .redirectTables {
    grid-template-columns: 1fr;
  }

  .redirectHero {
    flex-direction: column;
    align-items: stretch;
  }
}

.redirectActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.dangerSoft {
  border-color: #7a2b2b !important;
}

.redirectBrowserBox {
  background: #0b1018;
  border: 1px solid #26313f;
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
}

.redirectBrowserBox h3 {
  margin: 0 0 14px;
  color: #d7b46a;
}

.redirectBrowserControls {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
  margin-bottom: 14px;
}

.redirectBrowserControls input,
.redirectBrowserControls select {
  background: #070b11;
  border: 1px solid #26313f;
  color: #e8edf5;
  border-radius: 10px;
  padding: 10px 12px;
}

.redirectDuplicate {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid #1b2635;
  padding: 10px 0;
}

.redirectDuplicate strong {
  color: #ffd36b;
}

.redirectDuplicate span {
  color: #9aa8ba;
  font-family: monospace;
  word-break: break-all;
}

.redirectRepairBox {
  margin: 12px 0;
}

.redirectFileLine a {
  color: #8ec7ff;
  text-decoration: none;
}

.redirectFileLine a:hover {
  text-decoration: underline;
}

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


.redirectDashTitle {
  color: #9aa8ba;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.redirectDashMain {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

.redirectDashMain strong {
  font-size: 22px;
}

.redirectDashMain.ok strong {
  color: #7dff78;
}

.redirectDashMain.warn strong {
  color: #ffd36b;
}

.redirectDashMain.bad strong {
  color: #ff7474;
}

.redirectDashMain span,
.redirectDashSub {
  color: #9aa8ba;
}

.redirectDashSub {
  margin-top: 5px;
  font-size: 13px;
}

.redirectProgressWrap {
  height: 12px;
  background: #070b11;
  border: 1px solid #26313f;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.redirectProgressBar {
  height: 100%;
  background: linear-gradient(90deg, #7dff78, #d7b46a);
  transition: width .25s ease;
}

.redirectHeaderUnified {
  align-items: center;
  gap: 16px;
}

.redirectHeaderUnified .pageHint {
  margin: 4px 0 0;
}

.redirectHeaderBadge {
  margin-left: auto;
  min-width: 230px;
  background: #0b1018;
  border: 1px solid #26313f;
  border-radius: 14px;
  padding: 10px 14px;
  text-align: right;
  box-shadow: 0 0 18px rgba(0,0,0,.18);
}

.redirectHeaderBadge strong {
  display: block;
  font-size: 18px;
  line-height: 1.1;
}

.redirectHeaderBadge span {
  display: block;
  color: #9aa8ba;
  font-size: 12px;
  margin-top: 4px;
}

.redirectHeaderBadge.ok strong {
  color: #7dff78;
}

.redirectHeaderBadge.warn strong {
  color: #ffd36b;
}

.redirectHeaderBadge.bad strong {
  color: #ff7474;
}

.redirectSuccess {
  background: #071109;
  border: 1px solid #245f35;
  color: #7dff78;
  border-radius: 12px;
  padding: 14px;
  margin: 12px 0;
}

@media (max-width: 900px) {
  .redirectHeaderUnified {
    flex-direction: column;
    align-items: stretch;
  }

  .redirectHeaderBadge {
    margin-left: 0;
    text-align: left;
    min-width: 0;
  }
}

.redirectHeaderBadge {
  display: none !important;
}














/* System Status Escalation */
.systemEscalated {
  gap: 18px;
}

.systemWarnings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.systemWarnItem {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.045);
  display: flex;
  gap: 12px;
  align-items: center;
}

.systemWarnItem.ok {
  border-color: rgba(80,255,150,.28);
  background: rgba(80,255,150,.08);
}

.systemWarnItem.warn {
  border-color: rgba(255,190,70,.35);
  background: rgba(255,190,70,.09);
}

.systemWarnItem.bad {
  border-color: rgba(255,80,80,.42);
  background: rgba(255,80,80,.1);
}

.systemCards4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.systemInfoCard,
.systemPanel {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(10,14,20,.72);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.systemInfoCard span {
  display: block;
  font-size: 12px;
  opacity: .68;
  margin-bottom: 6px;
}

.systemInfoCard strong {
  font-size: 24px;
}

.systemWideGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px;
}

.systemPanel h3 {
  margin: 0 0 12px;
}

.systemRow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}

.systemRow:first-of-type {
  border-top: 0;
}

.systemRow b {
  display: block;
  font-size: 13px;
  word-break: break-word;
}

.systemRow small {
  display: block;
  opacity: .58;
  font-size: 11px;
  margin-top: 3px;
  word-break: break-word;
}

.sysPill {
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.sysPill.ok {
  color: #8dffb0;
  border-color: rgba(80,255,150,.25);
  background: rgba(80,255,150,.08);
}

.sysPill.warn {
  color: #ffd27a;
  border-color: rgba(255,190,70,.32);
  background: rgba(255,190,70,.08);
}

.sysPill.bad {
  color: #ff8e8e;
  border-color: rgba(255,80,80,.35);
  background: rgba(255,80,80,.09);
}

.systemEmpty {
  opacity: .55;
  padding: 10px 0;
  font-size: 13px;
}

.sysSparkBars {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 52px;
  margin-top: 10px;
}

.sysSparkBars i {
  display: block;
  width: 5px;
  border-radius: 5px;
  background: rgba(120,180,255,.55);
}

/* System Core Perfected */
.systemCore {
  display: grid;
  gap: 18px;
}

.coreHero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(80,160,255,.18), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(80,255,170,.12), transparent 35%),
    rgba(10,14,20,.78);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.coreHero.ok {
  border-color: rgba(80,255,150,.28);
}

.coreHero.watch,
.coreHero.warn {
  border-color: rgba(255,190,70,.35);
}

.coreHero.bad {
  border-color: rgba(255,80,80,.45);
}

.coreHero:before {
  content: "";
  position: absolute;
  inset: -80px;
  background: conic-gradient(from 90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: coreSweep 7s linear infinite;
  pointer-events: none;
}

@keyframes coreSweep {
  to { transform: rotate(360deg); }
}

.coreTitle {
  position: relative;
  z-index: 1;
}

.coreTitle h2 {
  margin: 6px 0;
  font-size: clamp(34px, 5vw, 68px);
  letter-spacing: 2px;
}

.coreTitle p {
  margin: 0 0 12px;
  opacity: .76;
}

.corePulse {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.24);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  opacity: .9;
}

.healthRing {
  position: relative;
  z-index: 1;
  width: 154px;
  height: 154px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(rgba(80,255,150,.9) calc(var(--score) * 1%), rgba(255,255,255,.08) 0);
  box-shadow: inset 0 0 28px rgba(255,255,255,.08), 0 0 32px rgba(80,255,150,.16);
}

.healthRing:after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: rgba(9,13,19,.95);
}

.healthRing div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.healthRing strong {
  display: block;
  font-size: 36px;
  line-height: 1;
}

.healthRing span {
  display: block;
  margin-top: 5px;
  opacity: .62;
  font-size: 12px;
}

.systemHint {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.045);
}

.systemHint.ok {
  border-color: rgba(80,255,150,.25);
  background: rgba(80,255,150,.07);
}

.systemHint.warn {
  border-color: rgba(255,190,70,.32);
  background: rgba(255,190,70,.08);
}

.systemHint.bad {
  border-color: rgba(255,80,80,.36);
  background: rgba(255,80,80,.09);
}

.systemHint span {
  opacity: .72;
  font-size: 12px;
}

.networkPulseGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}

.networkPulseGrid div {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  border-radius: 14px;
  padding: 10px;
}

.networkPulseGrid span {
  display: block;
  font-size: 11px;
  opacity: .58;
}

.networkPulseGrid b {
  display: block;
  margin-top: 4px;
}

.serviceMatrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
}

.serviceTile {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 13px;
  background: rgba(255,255,255,.045);
}

.serviceTile.ok {
  border-color: rgba(80,255,150,.25);
  background: rgba(80,255,150,.07);
}

.serviceTile.warn {
  border-color: rgba(255,190,70,.32);
  background: rgba(255,190,70,.08);
}

.serviceTile.bad {
  border-color: rgba(255,80,80,.36);
  background: rgba(255,80,80,.09);
}

.serviceTile b,
.serviceTile span {
  display: block;
}

.serviceTile span {
  margin-top: 5px;
  opacity: .68;
  font-size: 12px;
}

@media (max-width: 760px) {
  .coreHero {
    flex-direction: column;
    align-items: flex-start;
  }

  .healthRing {
    width: 126px;
    height: 126px;
  }

  .networkPulseGrid {
    grid-template-columns: 1fr;
  }
}

.systemExtraCards {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.systemInfoCard small {
  display: block;
  margin-top: 5px;
  opacity: .62;
  font-size: 11px;
}

.systemInfoCard.watch {
  border-color: rgba(120,180,255,.32);
  background: rgba(120,180,255,.08);
}

/* TEAM FBI AI Core Shield */
.aiCoreShield {
  position: relative;
  z-index: 2;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 45%, rgba(120,180,255,.30), transparent 35%),
    linear-gradient(145deg, rgba(80,130,255,.18), rgba(20,30,45,.82));
  border: 1px solid rgba(130,180,255,.26);
  box-shadow: 0 0 28px rgba(80,130,255,.18), inset 0 0 18px rgba(255,255,255,.06);
  clip-path: polygon(50% 0%, 88% 14%, 82% 72%, 50% 100%, 18% 72%, 12% 14%);
}

.aiCoreShield span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: 0 0 18px currentColor;
}

.aiCoreShield i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}

.aiCoreShield.ok { color: #7cff9f; }
.aiCoreShield.watch { color: #76a9ff; animation: aiCorePulse 2.2s ease-in-out infinite; }
.aiCoreShield.warn { color: #ffd27a; animation: aiCorePulse 1.5s ease-in-out infinite; }
.aiCoreShield.bad { color: #ff8e8e; animation: aiCorePulse .9s ease-in-out infinite; }

@keyframes aiCorePulse {
  0%,100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.35); transform: scale(1.035); }
}

.aiCoreStatIcon {
  background: rgba(80,130,255,.14) !important;
}

.aiCoreMiniShield {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #76a9ff;
  clip-path: polygon(50% 0%, 90% 15%, 82% 72%, 50% 100%, 18% 72%, 10% 15%);
  border: 1px solid rgba(120,180,255,.35);
  background:
    radial-gradient(circle, rgba(120,180,255,.35), rgba(20,30,55,.85));
  box-shadow: 0 0 18px rgba(90,140,255,.28);
}

.aiCoreMiniShield i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

/* System Core visual state polish */
.statCard.blue .aiCoreMiniShield,
.coreHero.watch .aiCoreShield {
  color: #76a9ff;
}

.statCard.yellow .aiCoreMiniShield,
.coreHero.warn .aiCoreShield {
  color: #ffd27a;
}

.statCard.red .aiCoreMiniShield,
.coreHero.bad .aiCoreShield {
  color: #ff8e8e;
}

.statCard.greenCard .aiCoreMiniShield,
.coreHero.ok .aiCoreShield {
  color: #7cff9f;
}

.statCard.blue {
  box-shadow: 0 0 24px rgba(80,130,255,.08), inset 0 0 0 1px rgba(120,180,255,.08);
}

.statCard.yellow {
  box-shadow: 0 0 24px rgba(255,190,70,.08), inset 0 0 0 1px rgba(255,190,70,.08);
}

.statCard.red {
  box-shadow: 0 0 28px rgba(255,80,80,.12), inset 0 0 0 1px rgba(255,80,80,.10);
}

/* AI Core Intelligence Panels */
.aiCorePanel {
  border-color: rgba(120,180,255,.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(80,140,255,.08), transparent 35%),
    rgba(10,14,20,.72);
}

.systemIncident {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 11px 12px;
  margin-bottom: 9px;
  background: rgba(255,255,255,.045);
}

.systemIncident.ok {
  border-color: rgba(80,255,150,.22);
  background: rgba(80,255,150,.06);
}

.systemIncident.warn {
  border-color: rgba(255,190,70,.28);
  background: rgba(255,190,70,.08);
}

.systemIncident.bad,
.systemIncident.critical {
  border-color: rgba(255,80,80,.36);
  background: rgba(255,80,80,.09);
}

.systemIncident span {
  opacity: .74;
  font-size: 12px;
}

.systemIncident small {
  opacity: .45;
  font-size: 11px;
}

.dependencyTile {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 9px;
  background: rgba(255,255,255,.045);
}

.dependencyTile.ok {
  border-color: rgba(80,255,150,.22);
  background: rgba(80,255,150,.06);
}

.dependencyTile.warn {
  border-color: rgba(255,190,70,.28);
  background: rgba(255,190,70,.08);
}

.dependencyTile.bad {
  border-color: rgba(255,80,80,.36);
  background: rgba(255,80,80,.09);
}

.dependencyTile b,
.dependencyTile span {
  display: block;
}

.dependencyTile span {
  margin-top: 5px;
  opacity: .68;
  font-size: 12px;
}

.aiComment {
  border-left: 3px solid rgba(120,180,255,.55);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(120,180,255,.06);
  border-radius: 10px;
  font-size: 13px;
  opacity: .9;
}

.uploadServerPackagesOption {
  margin-top: 14px !important;
  padding: 12px;
  border-radius: 12px;
  background: rgba(215,180,106,.08);
  border: 1px solid rgba(215,180,106,.22);
}

.uploadServerPackagesOption input {
  transform: scale(1.1);
}

.uploadServerPackagesSummary {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(42, 132, 72, .22), rgba(12, 24, 18, .92));
  border: 1px solid rgba(91, 219, 132, .35);
  box-shadow: inset 0 0 18px rgba(91, 219, 132, .08);
}

.uploadServerPackagesSummary strong {
  display: block;
  color: #9bf0a8;
  font-size: 14px;
  margin-bottom: 4px;
}

.uploadServerPackagesSummary span {
  display: block;
  color: #cdebd2;
  font-size: 12px;
  word-break: break-word;
}

/* =========================================================
   Redirect Mobile Layout Fix
   Weil lange UT99 Dateinamen Menschen hassen.
========================================================= */

.redirectTable,
.redirectFileLine,
.redirectErrorLine {
  overflow-x: auto;
}

.redirectFileLine,
.redirectErrorLine {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.redirectFileLine span,
.redirectErrorLine span,
.redirectFileLine strong,
.redirectErrorLine strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.redirectFileLine small,
.redirectErrorLine small {
  opacity: 0.72;
  font-size: 11px;
  line-height: 1.3;
  word-break: break-word;
}

@media (max-width: 900px) {

  .redirectGrid {
    grid-template-columns: 1fr !important;
  }

  .redirectToolsGrid {
    grid-template-columns: 1fr !important;
  }

  .redirectTableBox {
    overflow: hidden;
  }

  .redirectTable {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .redirectFileLine {
    padding: 9px 10px;
  }

  .redirectFileLine span {
    font-size: 12px;
  }

  .redirectFileLine strong {
    font-size: 13px;
    color: #8eea7b;
  }

  .redirectFileLine small {
    font-size: 10px;
  }

  .redirectActionBar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .redirectActionBar button {
    width: 100%;
  }

  .redirectSearchRow {
    flex-direction: column;
  }

  .redirectSearchRow input,
  .redirectSearchRow select {
    width: 100%;
  }
}


/* =========================================================
   Redirect Core Badge - System Status Style
========================================================= */

.redirectCoreBadge {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(95, 255, 135, .28);
  background:
    radial-gradient(circle at 18% 20%, rgba(73, 255, 116, .16), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(38, 164, 102, .16), transparent 32%),
    linear-gradient(135deg, rgba(20, 28, 39, .96), rgba(8, 12, 18, .98));
  padding: 28px;
  margin: 18px 0;
  box-shadow: 0 0 34px rgba(0,0,0,.28), inset 0 0 60px rgba(73,255,116,.04);
}

.redirectCoreBadge.warn {
  border-color: rgba(255, 211, 107, .35);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 211, 107, .16), transparent 28%),
    linear-gradient(135deg, rgba(28, 24, 16, .96), rgba(8, 12, 18, .98));
}

.redirectCoreBadge.bad {
  border-color: rgba(255, 116, 116, .35);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 116, 116, .16), transparent 28%),
    linear-gradient(135deg, rgba(32, 16, 18, .96), rgba(8, 12, 18, .98));
}

.redirectCoreGlow {
  position: absolute;
  inset: -120px -80px auto auto;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: rgba(73, 255, 116, .10);
  filter: blur(24px);
}

.redirectCoreTop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  z-index: 1;
}

.redirectCoreShield {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  background:
    radial-gradient(circle, rgba(118,255,126,.45), rgba(47,92,255,.08) 42%, rgba(255,255,255,.04) 70%);
  display: grid;
  place-items: center;
  box-shadow: 0 0 32px rgba(73,255,116,.20);
}

.redirectCorePulse {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid #68ff79;
  box-shadow: 0 0 22px rgba(104,255,121,.75);
  position: relative;
}

.redirectCorePulse::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: #68ff79;
}

.redirectCoreLabel {
  color: #78ec75;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.redirectCoreState {
  color: #fff;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .04em;
  margin-top: 4px;
}

.redirectCoreSub {
  color: #9be98f;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
}

.redirectCoreMetrics {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 10px 14px;
  color: #8eed84;
  font-size: 13px;
  font-weight: 700;
}

.redirectCoreRing {
  position: relative;
  z-index: 1;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  margin-top: 28px;
  background: conic-gradient(#4eff82 0 100%, rgba(255,255,255,.08) 0);
  display: grid;
  place-items: center;
  box-shadow: 0 0 32px rgba(73,255,116,.18);
}

.redirectCoreRingInner {
  width: 126px;
  height: 126px;
  border-radius: 999px;
  background: #081016;
  display: grid;
  place-items: center;
  align-content: center;
}

.redirectCoreRingInner strong {
  color: #76ff72;
  font-size: 38px;
  line-height: 1;
}

.redirectCoreRingInner span {
  color: #8fbc8b;
  margin-top: 6px;
}

.redirectCoreBadge.warn .redirectCoreLabel,
.redirectCoreBadge.warn .redirectCoreSub,
.redirectCoreBadge.warn .redirectCoreMetrics,
.redirectCoreBadge.warn .redirectCoreRingInner strong {
  color: #ffd36b;
}

.redirectCoreBadge.warn .redirectCorePulse {
  border-color: #ffd36b;
  box-shadow: 0 0 22px rgba(255,211,107,.75);
}

.redirectCoreBadge.warn .redirectCorePulse::after {
  background: #ffd36b;
}

.redirectCoreBadge.bad .redirectCoreLabel,
.redirectCoreBadge.bad .redirectCoreSub,
.redirectCoreBadge.bad .redirectCoreMetrics,
.redirectCoreBadge.bad .redirectCoreRingInner strong {
  color: #ff7474;
}

.redirectCoreBadge.bad .redirectCorePulse {
  border-color: #ff7474;
  box-shadow: 0 0 22px rgba(255,116,116,.75);
}

.redirectCoreBadge.bad .redirectCorePulse::after {
  background: #ff7474;
}

@media (max-width: 900px) {
  .redirectCoreBadge {
    padding: 22px;
    border-radius: 20px;
  }

  .redirectCoreTop {
    align-items: flex-start;
    gap: 16px;
  }

  .redirectCoreShield {
    width: 70px;
    height: 70px;
    border-radius: 22px;
  }

  .redirectCoreState {
    font-size: 27px;
  }

  .redirectCoreSub {
    font-size: 13px;
  }

  .redirectCoreMetrics {
    border-radius: 18px;
    font-size: 12px;
  }

  .redirectCoreRing {
    width: 145px;
    height: 145px;
  }

  .redirectCoreRingInner {
    width: 108px;
    height: 108px;
  }

  .redirectCoreRingInner strong {
    font-size: 32px;
  }
}

















/* =========================================================
   Redirect Dashboard Core - real System Core clone
========================================================= */

#redirectDashboardCard.redirectDashboardCore {
  min-height: 160px;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreHeaderRow {
  display: flex;
  align-items: center;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreIcon {
  flex: 0 0 auto;
}

#redirectDashboardCard.redirectDashboardCore .systemCorePulse {
  color: #6dff8d;
  font-size: inherit;
  line-height: inherit;
  text-shadow: 0 0 12px rgba(109,255,141,.65);
}

#redirectDashboardCard.redirectDashboardCore .systemCoreStats {
  color: #73ff8d;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreMain {
  white-space: nowrap;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================================================
   Redirect Dashboard Core Typography Final Match
   Match System Core proportions
========================================================= */

#redirectDashboardCard.redirectDashboardCore .systemCoreLabel {
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: rgba(255,255,255,.72) !important;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreMain {
  margin-top: 6px !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  color: #fff !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 9px !important;
  white-space: nowrap !important;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreStats {
  margin-top: 9px !important;
  font-size: 16px !important;
  line-height: 1.22 !important;
  font-weight: 650 !important;
  color: #72ff92 !important;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreMeta {
  margin-top: 6px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.66) !important;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreIcon {
  transform: translateY(1px) !important;
}

@media (max-width: 900px) {
  #redirectDashboardCard.redirectDashboardCore .systemCoreMain {
    font-size: 33px !important;
  }

  #redirectDashboardCard.redirectDashboardCore .systemCoreStats {
    font-size: 15.5px !important;
  }

  #redirectDashboardCard.redirectDashboardCore .systemCoreMeta {
    font-size: 14.5px !important;
  }
}

/* FINAL TUNE: Redirect Dashboard Core closer to System Core */
#redirectDashboardCard.redirectDashboardCore {
  min-height: 160px !important;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreHeaderRow {
  align-items: center !important;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreIcon {
  transform: translateY(-2px) !important;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreMain {
  font-size: 34px !important;
  line-height: 1 !important;
  margin-top: 5px !important;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreStats {
  font-size: 15px !important;
  line-height: 1.15 !important;
  margin-top: 8px !important;
  white-space: nowrap !important;
}

#redirectDashboardCard.redirectDashboardCore .systemCoreMeta {
  font-size: 15px !important;
  line-height: 1.15 !important;
  margin-top: 6px !important;
  white-space: nowrap !important;
}

/* =========================================================
   FINAL Redirect Dashboard Core with SVG Logo
   Keine geerbte SystemCore-CSS-Suppe mehr.
========================================================= */

#redirectDashboardCard.redirectDashboardCore {
  position: relative !important;
  overflow: hidden !important;

  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 20px !important;

  min-height: 160px !important;
  padding: 22px 26px !important;
  border-radius: 22px !important;
}

#redirectDashboardCard .rdCoreBg {
  position: absolute !important;
  right: -34px !important;
  top: -42px !important;
  width: 170px !important;
  height: 170px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.035) !important;
  pointer-events: none !important;
}

#redirectDashboardCard .rdCoreLogoBox {
  position: relative !important;
  z-index: 1 !important;

  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;

  display: grid !important;
  place-items: center !important;
  justify-self: start !important;
  align-self: center !important;

  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(105,255,140,.28),
      rgba(37,80,255,.10) 48%,
      rgba(255,255,255,.035) 76%) !important;

  box-shadow:
    0 0 22px rgba(105,255,140,.18),
    inset 0 0 14px rgba(105,255,140,.10) !important;
}

#redirectDashboardCard .rdCoreLogo {
  width: 42px !important;
  height: 42px !important;
  display: block !important;
  color: #6dff8d !important;
  filter: drop-shadow(0 0 8px rgba(109,255,141,.55)) !important;
}

#redirectDashboardCard .rdCoreInfo {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}

#redirectDashboardCard .rdCoreLabel {
  color: rgba(255,255,255,.72) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#redirectDashboardCard .rdCoreMain {
  margin-top: 6px !important;

  display: flex !important;
  align-items: baseline !important;
  gap: 9px !important;

  color: #fff !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;

  white-space: nowrap !important;
}

#redirectDashboardCard .rdCoreStats {
  margin-top: 9px !important;

  color: #72ff92 !important;
  font-size: 15px !important;
  line-height: 1.18 !important;
  font-weight: 650 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#redirectDashboardCard .rdCoreMeta {
  margin-top: 6px !important;

  color: rgba(255,255,255,.66) !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 900px) {
  #redirectDashboardCard.redirectDashboardCore {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    column-gap: 20px !important;
    min-height: 160px !important;
    padding: 22px 24px !important;
  }

  #redirectDashboardCard .rdCoreLogoBox {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }

  #redirectDashboardCard .rdCoreLogo {
    width: 42px !important;
    height: 42px !important;
  }

  #redirectDashboardCard .rdCoreMain {
    font-size: 34px !important;
  }
}

/* FINAL TUNE: Redirect Dashboard minimal status card */
#redirectDashboardCard.redirectDashboardCore {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  min-height: 145px !important;
}

#redirectDashboardCard .rdCoreLogoBox {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 17px !important;
  box-shadow:
    0 0 14px rgba(105,255,140,.16),
    inset 0 0 10px rgba(105,255,140,.08) !important;
}

#redirectDashboardCard .rdCoreLogo {
  width: 31px !important;
  height: 31px !important;
  filter: drop-shadow(0 0 6px rgba(109,255,141,.42)) !important;
}

#redirectDashboardCard .rdCoreMain {
  font-size: 40px !important;
  font-weight: 900 !important;
}

#redirectDashboardCard .rdCoreStats,
#redirectDashboardCard .rdCoreMeta {
  display: none !important;
}

@media (max-width: 900px) {
  #redirectDashboardCard.redirectDashboardCore {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    min-height: 145px !important;
  }

  #redirectDashboardCard .rdCoreLogoBox {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  #redirectDashboardCard .rdCoreLogo {
    width: 31px !important;
    height: 31px !important;
  }

  #redirectDashboardCard .rdCoreMain {
    font-size: 38px !important;
  }
}

/* =========================================================
   FINAL SAFE Redirect Dashboard Badge
   Icon wie normale Dashboard-Kacheln, Text wie System Core
========================================================= */

#redirectDashboardCard.redirectDashboardFinal {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 145px !important;
  padding: 22px 26px !important;
  overflow: hidden !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalIcon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  border-radius: 50% !important;

  display: grid !important;
  place-items: center !important;

  font-size: 22px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;

  color: #72ff93 !important;
  background: rgba(42, 180, 84, .24) !important;
  box-shadow:
    0 0 16px rgba(73,255,116,.16),
    inset 0 0 12px rgba(73,255,116,.08) !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalInfo {
  min-width: 0 !important;
  flex: 1 !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalTitle {
  color: rgba(255,255,255,.72) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalMain {
  margin-top: 7px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;

  color: #fff !important;
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalSub,
#redirectDashboardCard.redirectDashboardFinal .redirectFinalMuted {
  display: none !important;
}

@media (max-width: 900px) {
  #redirectDashboardCard.redirectDashboardFinal {
    gap: 20px !important;
    padding: 22px 24px !important;
  }

  #redirectDashboardCard.redirectDashboardFinal .redirectFinalMain {
    font-size: 36px !important;
  }
}


/* =========================================================
   Redirect Dashboard Final Finetune
========================================================= */

#redirectDashboardCard.redirectDashboardFinal {
  min-height: 130px !important;
  padding: 20px 26px !important;
  gap: 20px !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalIcon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  font-size: 20px !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalMain {
  font-size: 36px !important;
}

@media (max-width: 900px) {
  #redirectDashboardCard.redirectDashboardFinal {
    min-height: 130px !important;
    padding: 20px 24px !important;
    gap: 18px !important;
  }

  #redirectDashboardCard.redirectDashboardFinal .redirectFinalIcon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    font-size: 20px !important;
  }

  #redirectDashboardCard.redirectDashboardFinal .redirectFinalMain {
    font-size: 35px !important;
  }
}

/* =========================================================
   Redirect Dashboard Card - align with normal stat cards
========================================================= */

#redirectDashboardCard.redirectDashboardFinal {
  min-height: 122px !important;
  padding: 18px 22px !important;
  gap: 18px !important;
  align-items: center !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalIcon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  font-size: 21px !important;
  border-radius: 50% !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalInfo {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  transform: translateY(-1px) !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalTitle {
  font-size: 15px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  margin: 0 0 7px 0 !important;
}

#redirectDashboardCard.redirectDashboardFinal .redirectFinalMain {
  font-size: 36px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  margin: 0 !important;
  gap: 9px !important;
}

@media (max-width: 900px) {
  #redirectDashboardCard.redirectDashboardFinal {
    min-height: 122px !important;
    padding: 18px 22px !important;
    gap: 18px !important;
  }

  #redirectDashboardCard.redirectDashboardFinal .redirectFinalIcon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    font-size: 21px !important;
  }

  #redirectDashboardCard.redirectDashboardFinal .redirectFinalMain {
    font-size: 35px !important;
  }
}


/* =========================================================
   Redirect Dashboard Card = normal StatCard clone
========================================================= */

#redirectDashboardCard {
  min-height: unset !important;
}

#redirectDashboardCard .statIcon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  font-size: 22px !important;
}

#redirectDashboardCard .num {
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
}

#redirectDashboardCard [data-redirect-sub],
#redirectDashboardCard [data-redirect-muted] {
  display: none !important;
}


/* Redirect Core: icon size only */
#redirectDashboardCard .statIcon.green {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  font-size: 21px !important;
}

/* Redirect Core: icon final smaller */
#redirectDashboardCard .statIcon.green {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  font-size: 19px !important;
}

/* Redirect Icon: glow etwas dezenter */
#redirectDashboardCard .statIcon.green {
  background: rgba(42, 180, 84, .18) !important;
  box-shadow:
    0 0 10px rgba(73,255,116,.10),
    inset 0 0 8px rgba(73,255,116,.06) !important;
}

/* =========================================================
   Redirect Dashboard Badge - final icon center + info lines
========================================================= */

#redirectDashboardCard .statIcon.green {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  font-size: 18px !important;
  line-height: 1 !important;
  text-align: center !important;

  border-radius: 50% !important;
}

#redirectDashboardCard .statIcon.green::before,
#redirectDashboardCard .statIcon.green::after {
  display: none !important;
  content: none !important;
}

#redirectDashboardCard .statTitle {
  font-size: 14px !important;
  line-height: 1.1 !important;
}

#redirectDashboardCard .num {
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#redirectDashboardCard [data-redirect-sub] {
  display: block !important;
  margin-top: 5px !important;
  color: #72ff93 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#redirectDashboardCard [data-redirect-muted] {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}


/* Kill old Redirect dashboard badge ghosts */
#redirectDashboardBadge,
.redirectDashboardBadge,


/* =========================================================
   Redirect Dashboard Card - clean final state
========================================================= */

#redirectDashboardCard.statCard {
  display: flex !important;
  align-items: center !important;
}

#redirectDashboardCard .statIcon.green {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  font-size: 18px !important;
  line-height: 42px !important;
  text-align: center !important;
  vertical-align: middle !important;

  border-radius: 50% !important;
  transform: none !important;
}

#redirectDashboardCard .statIcon.green::before,
#redirectDashboardCard .statIcon.green::after {
  display: none !important;
  content: none !important;
}

#redirectDashboardCard .num {
  white-space: nowrap !important;
}

#redirectDashboardCard [data-redirect-sub] {
  display: block !important;
  margin-top: 4px !important;
  color: #72ff93 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#redirectDashboardCard [data-redirect-muted] {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* Alte Badge-Geister nur per ID/Klasse aus altem JS verstecken */
#redirectDashboardBadge,
.redirectDashboardBadge {
  display: none !important;
}


/* Clean Redirect Core dashboard card */
.redirectCoreCleanCard {
  align-items: center;
}

.redirectCoreCleanCard .redirectCoreIcon {
  align-self: center;
  margin-top: 0;
  flex: 0 0 auto;
}

.redirectCoreCleanCard .redirectCoreText {
  min-width: 0;
}

.redirectCoreCleanCard .green,
.redirectCoreCleanCard .mutedText {
  line-height: 1.22;
}

@media (max-width: 760px) {
  .redirectCoreCleanCard .num {
    font-size: clamp(24px, 7vw, 34px);
    white-space: nowrap;
  }

  .redirectCoreCleanCard .green,
  .redirectCoreCleanCard .mutedText {
    font-size: 15px;
  }
}

/* Redirect Status: compact hero metrics */
.redirectHeroMetrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 18px 0 12px;
}

.redirectHeroMetrics > div {
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(6, 12, 24, .55);
  border: 1px solid rgba(120, 255, 140, .14);
  text-align: center;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .18);
}

.redirectHeroMetrics strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  letter-spacing: -.03em;
}

.redirectHeroMetrics span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(220, 230, 245, .68);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.redirectActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.redirectActions .wideButton.miniWide {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
}

@media (max-width: 760px) {
  .redirectHeroMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .redirectHeroMetrics > div:first-child {
    grid-column: 1 / -1;
  }

  .redirectActions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .redirectActions .wideButton.miniWide {
    min-height: 44px;
    padding: 10px 12px;
  }
}

.uploadSelectedCount {
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(215,180,106,.08);
  border: 1px solid rgba(215,180,106,.22);
  color: #f2d18a;
  font-weight: 800;
}

.uploadSelectBox {
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(215,180,106,.08);
  border: 1px solid rgba(215,180,106,.24);
  cursor: pointer;
}

.uploadSelectBox input {
  display: none;
}

.uploadSelectBox span {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid #d7b46a;
  background: #05080d;
  position: relative;
}

.uploadSelectBox input:checked + span {
  background: linear-gradient(180deg, #d7b46a, #9d762b);
  border-color: #ffe3a3;
}

.uploadSelectBox input:checked + span::after {
  content: "✓";
  position: absolute;
  inset: -4px 0 0 2px;
  color: #0b0a05;
  font-size: 17px;
  font-weight: 900;
}

.uploadResultTop {
  align-items: flex-start;
}

.uploadAnalysisBox {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(12,17,25,.82);
  border: 1px solid rgba(215,180,106,.18);
}

.uploadAnalysisBox.good {
  background: rgba(32,96,54,.18);
  border-color: rgba(91,219,132,.34);
}

.uploadAnalysisBox.warn {
  background: rgba(120,88,24,.18);
  border-color: rgba(215,180,106,.36);
}

.uploadAnalysisBox.bad {
  background: rgba(135,42,42,.2);
  border-color: rgba(255,108,108,.42);
}

.uploadAnalysisBox strong {
  display: block;
  color: #f2d18a;
  margin-bottom: 4px;
}

.uploadAnalysisBox.good strong {
  color: #9bf0a8;
}

.uploadAnalysisBox.bad strong {
  color: #ff9c9c;
}

.uploadAnalysisBox span,
.uploadAnalysisBox code {
  display: block;
  color: #a8b2c5;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

.uploadAnalysisBox code {
  margin-top: 6px;
  color: #d7b46a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.uploadAnalysisBox.skin {
  background:
    radial-gradient(circle at top left, rgba(143, 92, 255, .22), transparent 35%),
    rgba(18, 12, 32, .92);
  border-color: rgba(172, 130, 255, .42);
}

.uploadAnalysisBox.skin strong {
  color: #d8c4ff;
}

.uploadAnalysisBox.skin span {
  color: #cfc3e8;
}

.uploadAnalysisBox.skin code {
  color: #e7d7ff;
  border-top: 1px solid rgba(172,130,255,.18);
  padding-top: 7px;
}


/* Process Watchdog / PM2 + Cron */
#page-pm2.panel,
#page-pm2 .panel {
  margin-top: 18px;
}

#pm2PageContent {
  margin-top: 16px;
}

.watchdogHero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(80, 120, 255, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(37, 71, 155, 0.28), rgba(14, 20, 30, 0.92));
}

.watchdogEyebrow {
  display: block;
  color: #7ea2ff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.watchdogHero h3 {
  margin: 0 0 6px;
  font-size: 22px;
}

.watchdogHero p {
  margin: 0;
  color: #9aa8ba;
  line-height: 1.45;
}

.watchdogCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.watchdogCard {
  padding: 16px;
  border-radius: 16px;
  background: #101722;
  border: 1px solid #26313f;
}

.watchdogCard span,
.watchdogCard small {
  display: block;
  color: #9aa8ba;
}

.watchdogCard strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 28px;
}

.watchdogCard.good strong {
  color: #8ee26b;
}

.watchdogCard.warn strong {
  color: #ffd36a;
}

.watchdogSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 16px;
}

.watchdogPanel {
  border: 1px solid #26313f;
  border-radius: 18px;
  background: #0c1119;
  overflow: hidden;
}

.watchdogPanelHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 15px 16px;
  border-bottom: 1px solid #202a38;
  background: rgba(255,255,255,.025);
}

.watchdogPanelHead h3 {
  margin: 0;
}

.watchdogPanelHead span {
  color: #9aa8ba;
  font-size: 13px;
}

.watchdogList,
.cronList {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.watchdogProcess {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid #1f2b3b;
  border-radius: 14px;
  background: #101722;
}

.watchdogProcessMain strong,
.watchdogProcessMain small {
  display: block;
}

.watchdogProcessMain small {
  margin-top: 4px;
  color: #8a98aa;
  overflow-wrap: anywhere;
}

.watchdogProcessMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: #c6d0df;
  font-size: 13px;
}

.watchdogProcessMeta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #172131;
  border: 1px solid #26313f;
}

.watchdogStatus.online {
  color: #8ee26b;
}

.watchdogStatus.offline {
  color: #ff7d7d;
}

.watchdogActions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.watchdogActions button {
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid #2d4265;
  background: #17243a;
  color: #e8edf5;
  cursor: pointer;
}

.watchdogActions button:hover {
  background: #223456;
}

.cronItem {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid #1f2b3b;
  border-radius: 14px;
  background: #101722;
}

.cronItem span {
  color: #8ee26b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.cronItem code {
  color: #c9d4e4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.watchdogEmpty,
.watchdogLoading {
  padding: 16px;
  color: #9aa8ba;
  border: 1px dashed #26313f;
  border-radius: 14px;
}

@media (max-width: 900px) {
  .watchdogHero {
    align-items: stretch;
    flex-direction: column;
  }

  .watchdogCards,
  .watchdogSplit {
    grid-template-columns: 1fr;
  }

  .watchdogProcess {
    grid-template-columns: 1fr;
  }

  .watchdogActions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  #page-pm2 .panel {
    padding: 12px;
  }

  .watchdogHero,
  .watchdogCard,
  .watchdogProcess,
  .cronItem {
    padding: 12px;
  }

  .watchdogCard strong {
    font-size: 24px;
  }
}

.watchdogLiveBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(126,162,255,.22);
  background: rgba(19,30,50,.72);
  color: #8ee26b;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.watchdogLiveBadge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8ee26b;
  box-shadow: 0 0 10px #8ee26b;
}

/* Keep dashboard footer away from sub pages. Because apparently HTML needs parenting lessons. */
body:not(.is-dashboard-page) footer {
  display: none !important;
}

/* Process Watchdog placement */
body.is-process-watchdog-page .topbar {
  margin-bottom: 18px;
}

body.is-process-watchdog-page #page-pm2 {
  margin-top: 0;
}

#page-pm2 .panelHeader {
  margin-bottom: 8px;
}

#page-pm2 .pageHint {
  margin-bottom: 18px;
}

.watchdogTools {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}

.watchdogTools input {
  min-width: 220px;
  flex: 1;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px solid #26313f;
  background: #0c1119;
  color: #e8edf5;
  outline: none;
}

.watchdogTools input:focus {
  border-color: rgba(126,162,255,.65);
  box-shadow: 0 0 0 3px rgba(126,162,255,.12);
}

.watchdogFilters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.watchdogFilters button {
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid #26313f;
  background: #101722;
  color: #c6d0df;
  cursor: pointer;
}

.watchdogFilters button.active,
.watchdogFilters button:hover {
  border-color: rgba(126,162,255,.6);
  background: rgba(42,75,160,.34);
  color: #fff;
}

.watchdogProcessMeta span.warn {
  color: #ffd36a;
  border-color: rgba(255,211,106,.35);
  background: rgba(255,211,106,.08);
}

.pm2ActionResult {
  margin: 16px 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #26313f;
  background: #101722;
}

.pm2ActionResult.ok {
  border-color: rgba(142,226,107,.35);
}

.pm2ActionResult.bad {
  border-color: rgba(255,125,125,.45);
}

.pm2ActionResult strong,
.pm2ActionResult small {
  display: block;
}

.pm2ActionResult small {
  margin-top: 4px;
  color: #9aa8ba;
}

.pm2ActionResult pre {
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 12px;
  background: #070b11;
  color: #c9d4e4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow: auto;
}

.pm2ActionResult pre.stderr {
  color: #ffb4b4;
}

.cronItem strong {
  color: #e8edf5;
  font-size: 14px;
}

@media (max-width: 700px) {
  .watchdogTools {
    align-items: stretch;
    flex-direction: column;
  }

  .watchdogTools input,
  .watchdogFilters {
    width: 100%;
  }

  .watchdogFilters button {
    flex: 1;
  }
}

.watchdogHeroActions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.watchdogResetBtn {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,211,106,.35);
  background: rgba(255,211,106,.08);
  color: #ffd36a;
  font-weight: 700;
  cursor: pointer;
}

.watchdogResetBtn:hover {
  background: rgba(255,211,106,.16);
}

.watchdogResetBtn:disabled {
  opacity: .6;
  cursor: wait;
}

@media (max-width: 700px) {
  .watchdogHeroActions {
    justify-content: flex-start;
  }
}

.watchdogGroupActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.watchdogGroupActions button {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(126,162,255,.35);
  background: rgba(42,75,160,.22);
  color: #e8edf5;
  font-weight: 700;
  cursor: pointer;
}

.watchdogGroupActions button:hover {
  background: rgba(42,75,160,.38);
}

.watchdogGroupActions button:disabled {
  opacity: .6;
  cursor: wait;
}

.watchdogHealthGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.watchdogHealth {
  padding: 15px;
  border-radius: 16px;
  border: 1px solid #26313f;
  background: #101722;
}

.watchdogHealth h3 {
  margin: 0 0 8px;
}

.watchdogHealth p {
  margin: 0;
  color: #9aa8ba;
}

.watchdogHealth small {
  display: block;
  margin-top: 10px;
  color: #ffd36a;
  overflow-wrap: anywhere;
}

.watchdogHealth.ok {
  border-color: rgba(142,226,107,.28);
}

.watchdogHealth.warn {
  border-color: rgba(255,211,106,.38);
}

.watchdogProcess.hasCrashWarning {
  border-color: rgba(255,211,106,.38);
  box-shadow: inset 3px 0 0 rgba(255,211,106,.75);
}

.pm2LogBox {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #26313f;
  background: #070b11;
}

.pm2LogBox.bad {
  color: #ffb4b4;
}

.pm2LogHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.pm2LogHead button {
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid #2d4265;
  background: #17243a;
  color: #e8edf5;
  cursor: pointer;
}

.pm2LogBox pre {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #c9d4e4;
  font-size: 12px;
  line-height: 1.45;
}

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

  .watchdogGroupActions button {
    flex: 1;
  }
}

.cronManagementPanel {
  margin: 16px 0;
}

.cronMgmtCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.cronMgmtCard {
  padding: 14px;
  border-radius: 15px;
  border: 1px solid #26313f;
  background: #101722;
}

.cronMgmtCard span,
.cronMgmtCard small {
  display: block;
  color: #9aa8ba;
}

.cronMgmtCard strong {
  display: block;
  margin: 6px 0;
  font-size: 26px;
}

.cronMgmtCard.good strong {
  color: #8ee26b;
}

.cronMgmtCard.warn strong {
  color: #ffd36a;
}

.cronMgmtActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 14px 14px;
}

.cronMgmtActions button,
.cronServerCard button {
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(126,162,255,.35);
  background: rgba(42,75,160,.22);
  color: #e8edf5;
  font-weight: 700;
  cursor: pointer;
}

.cronMgmtActions button:hover,
.cronServerCard button:hover {
  background: rgba(42,75,160,.38);
}

.cronMgmtActions button:disabled,
.cronServerCard button:disabled {
  opacity: .6;
  cursor: wait;
}

.cronServerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding: 14px;
  border-top: 1px solid #202a38;
}

.cronServerCard {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 15px;
  border: 1px solid #26313f;
  background: #101722;
}

.cronServerCard.ok {
  border-color: rgba(142,226,107,.28);
}

.cronServerCard.missing,
.cronServerCard.duplicate,
.cronServerCard.warn {
  border-color: rgba(255,211,106,.42);
  box-shadow: inset 3px 0 0 rgba(255,211,106,.7);
}

.cronServerCard.extra {
  border-color: rgba(255,125,125,.42);
}

.cronServerTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.cronServerTop span {
  color: #9aa8ba;
  font-size: 12px;
}

.cronServerMeta {
  display: grid;
  gap: 4px;
  color: #9aa8ba;
}

.cronServerCard code {
  padding: 10px;
  border-radius: 11px;
  background: #070b11;
  color: #c9d4e4;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
}

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

/* Watchdog UI v2 */
.wd2Hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(126,162,255,.2);
  background:
    radial-gradient(circle at 15% 10%, rgba(67,97,238,.28), transparent 34%),
    linear-gradient(135deg, rgba(16,23,34,.98), rgba(7,11,17,.96));
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

.wd2Hero span {
  color: #8ea8ff;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 800;
}

.wd2Hero h3 {
  margin: 6px 0;
  font-size: 28px;
}

.wd2Hero p {
  margin: 0;
  color: #9aa8ba;
  line-height: 1.45;
}

.wd2Pulse {
  padding: 10px 15px;
  border-radius: 999px;
  color: #8ee26b;
  border: 1px solid rgba(142,226,107,.28);
  background: rgba(142,226,107,.08);
  font-weight: 800;
}

.wd2StatusGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.wd2Status {
  padding: 15px;
  border-radius: 18px;
  background: #101722;
  border: 1px solid #26313f;
}

.wd2Status span,
.wd2Status small {
  display: block;
  color: #9aa8ba;
}

.wd2Status strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 26px;
}

.wd2Status.ok strong { color: #8ee26b; }
.wd2Status.warn strong { color: #ffd36a; }
.wd2Status.bad strong { color: #ff7d7d; }

.wd2Toolbar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
  padding: 10px;
  border-radius: 18px;
  background: rgba(7,11,17,.78);
  border: 1px solid rgba(126,162,255,.14);
  backdrop-filter: blur(10px);
}

.wd2Toolbar button,
.wd2Actions button,
.wd2Cron button {
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(126,162,255,.3);
  background: rgba(42,75,160,.2);
  color: #e8edf5;
  font-weight: 700;
  cursor: pointer;
}

.wd2Toolbar button:hover,
.wd2Actions button:hover,
.wd2Cron button:hover {
  background: rgba(42,75,160,.38);
}

.wd2Details,
.wd2ProcessGroup {
  margin: 14px 0;
  border-radius: 18px;
  border: 1px solid #26313f;
  background: #0c1119;
  overflow: hidden;
}

.wd2Details summary,
.wd2ProcessGroup summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 15px 16px;
  background: rgba(255,255,255,.025);
}

.wd2Details summary span,
.wd2ProcessGroup summary span {
  color: #9aa8ba;
  font-size: 13px;
}

.wd2HealthGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 14px;
}

.wd2Health,
.wd2Cron {
  padding: 14px;
  border-radius: 15px;
  background: #101722;
  border: 1px solid #26313f;
}

.wd2Health h4 {
  margin: 0 0 8px;
}

.wd2Health p,
.wd2Health small {
  color: #9aa8ba;
}

.wd2Health.ok,
.wd2Cron.ok { border-color: rgba(142,226,107,.25); }

.wd2Health.warn,
.wd2Cron.warn,
.wd2Cron.missing,
.wd2Cron.duplicate {
  border-color: rgba(255,211,106,.42);
  box-shadow: inset 3px 0 0 rgba(255,211,106,.7);
}

.wd2CronGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
  gap: 10px;
  padding: 0 14px 14px;
}

.wd2Cron div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.wd2Cron span {
  color: #9aa8ba;
  font-size: 12px;
  text-transform: uppercase;
}

.wd2Cron small {
  display: block;
  margin: 8px 0 10px;
  color: #9aa8ba;
}

.wd2Search {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.wd2Search input {
  width: 100%;
  padding: 13px 15px;
  border-radius: 15px;
  border: 1px solid #26313f;
  background: #0c1119;
  color: #e8edf5;
}

.wd2Search div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wd2Search button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #26313f;
  background: #101722;
  color: #c6d0df;
}

.wd2Search button.active {
  background: rgba(42,75,160,.38);
  color: #fff;
  border-color: rgba(126,162,255,.6);
}

.wd2ProcessList {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.wd2Row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid #1f2b3b;
  background: #101722;
}

.wd2Row.warn {
  border-color: rgba(255,211,106,.35);
}

.wd2RowMain strong,
.wd2RowMain small {
  display: block;
}

.wd2RowMain small {
  margin-top: 4px;
  color: #8a98aa;
  overflow-wrap: anywhere;
}

.wd2Metrics {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.wd2Metrics span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #172131;
  border: 1px solid #26313f;
  color: #c6d0df;
  font-size: 12px;
}

.wd2Metrics .ok { color: #8ee26b; }
.wd2Metrics .bad { color: #ff7d7d; }
.wd2Metrics .warn { color: #ffd36a; }

.wd2Actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.wd2ActionResult {
  margin: 16px 0;
  padding: 14px;
  border-radius: 16px;
  background: #101722;
  border: 1px solid #26313f;
}

.wd2ActionResult.ok { border-color: rgba(142,226,107,.28); }
.wd2ActionResult.bad { border-color: rgba(255,125,125,.42); }

.wd2ActionResult small {
  display: block;
  margin-top: 4px;
  color: #9aa8ba;
}

.wd2ActionResult pre {
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 12px 0 0;
  padding: 10px;
  border-radius: 12px;
  background: #070b11;
  color: #c9d4e4;
}

.wd2DrawerBackdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0,0,0,.55);
}

.wd2Drawer {
  position: fixed;
  z-index: 81;
  right: 0;
  top: 0;
  height: 100vh;
  width: min(760px, 92vw);
  background: #070b11;
  border-left: 1px solid #26313f;
  box-shadow: -20px 0 60px rgba(0,0,0,.45);
  padding: 18px;
  overflow: auto;
}

.wd2Drawer header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.wd2Drawer header span {
  color: #8ea8ff;
  font-size: 12px;
  letter-spacing: .12em;
}

.wd2Drawer header h3 {
  margin: 4px 0 0;
}

.wd2Drawer header button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #26313f;
  background: #101722;
  color: #e8edf5;
}

.wd2Drawer pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #c9d4e4;
  font-size: 12px;
  line-height: 1.45;
}

.wd2Empty,
.watchdogV2Loading {
  padding: 15px;
  color: #9aa8ba;
}

@media (max-width: 900px) {
  .wd2StatusGrid,
  .wd2HealthGrid {
    grid-template-columns: 1fr 1fr;
  }

  .wd2Row {
    grid-template-columns: 1fr;
  }

  .wd2Actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .wd2Hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .wd2StatusGrid,
  .wd2HealthGrid {
    grid-template-columns: 1fr;
  }

  .wd2Toolbar button {
    flex: 1;
  }

  .wd2Drawer {
    top: auto;
    bottom: 0;
    height: 78vh;
    width: 100vw;
    border-left: none;
    border-top: 1px solid #26313f;
    border-radius: 22px 22px 0 0;
  }
}

@media (max-width: 700px) {
  .wd2Toolbar {
    position: static !important;
    top: auto !important;
    backdrop-filter: none;
  }
}

/* Watchdog Intelligence v1 */
.wdIntel {
  margin: 16px 0;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(126,162,255,.18);
  background:
    radial-gradient(circle at top right, rgba(255,211,106,.10), transparent 30%),
    #0c1119;
}

.wdIntelHead {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.wdIntelHead span {
  display: block;
  color: #8ea8ff;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 800;
}

.wdIntelHead h3 {
  margin: 5px 0 0;
}

.wdIntelActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wdIntelActions button {
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(126,162,255,.32);
  background: rgba(42,75,160,.22);
  color: #e8edf5;
  font-weight: 700;
  cursor: pointer;
}

.wdIntelGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.wdIntelCard {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #26313f;
  background: #101722;
}

.wdIntelCard span,
.wdIntelCard small {
  display: block;
  color: #9aa8ba;
}

.wdIntelCard strong {
  display: block;
  margin: 6px 0;
  font-size: 24px;
}

.wdIntelCard.ok strong { color: #8ee26b; }
.wdIntelCard.warn strong { color: #ffd36a; }
.wdIntelCard.bad strong { color: #ff7d7d; }

.wdIntelDetails,
.wdIntelTimeline {
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid #26313f;
  background: #070b11;
  overflow: hidden;
}

.wdIntelDetails summary,
.wdIntelTimeline summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  background: rgba(255,255,255,.025);
}

.wdIntelDetails summary span,
.wdIntelTimeline summary span {
  color: #9aa8ba;
  font-size: 13px;
}

.wdIntelPolicyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 10px;
  padding: 12px;
}

.wdIntelIssue {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #26313f;
  background: #101722;
}

.wdIntelIssue strong,
.wdIntelIssue small {
  display: block;
}

.wdIntelIssue small {
  margin-top: 5px;
  color: #9aa8ba;
}

.wdIntelIssue.ok {
  border-color: rgba(142,226,107,.28);
}

.wdIntelIssue.warn {
  border-color: rgba(255,211,106,.42);
}

.wdIntelIssue.bad {
  border-color: rgba(255,125,125,.42);
}

.wdTimelineList {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.wdTimelineEvent {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid #26313f;
  background: #101722;
}

.wdTimelineEvent time {
  color: #8ea8ff;
  font-size: 12px;
  white-space: nowrap;
}

.wdTimelineEvent strong,
.wdTimelineEvent small {
  display: block;
}

.wdTimelineEvent small {
  margin-top: 4px;
  color: #9aa8ba;
}

.wdTimelineEvent.warn {
  border-color: rgba(255,211,106,.42);
}

.wdTimelineEvent.critical,
.wdTimelineEvent.bad {
  border-color: rgba(255,125,125,.42);
}

.wdIntelEmpty {
  padding: 12px;
  color: #9aa8ba;
}

@media (max-width: 900px) {
  .wdIntelGrid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .wdIntelHead {
    align-items: flex-start;
    flex-direction: column;
  }
}

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

  .wdTimelineEvent {
    grid-template-columns: 1fr;
  }
}


/* Bot Control */
.botControlGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.botControlCard {
  background: rgba(12,18,30,.82);
  border: 1px solid rgba(120,170,255,.16);
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.botControlTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.botControlTop strong {
  display: block;
  color: #e8edf5;
  font-size: 15px;
}

.botControlTop span {
  display: block;
  margin-top: 4px;
  color: #9aa8ba;
  font-size: 12px;
}

.botControlChecks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.botControlChecks div {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px;
}

.botControlChecks span:first-child {
  display: block;
  color: #9aa8ba;
  font-size: 11px;
  margin-bottom: 7px;
}

.bcBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.08);
}

.bcBadge.ok {
  color: #7dff78;
  background: rgba(78,255,96,.08);
}

.bcBadge.bad {
  color: #ff7474;
  background: rgba(255,80,80,.08);
}

.botControlFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  color: #9aa8ba;
}

.botControlFooter button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #9aa8ba;
  border-radius: 10px;
  padding: 7px 10px;
}


.botControlActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.botControlActions button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(40,90,255,.14);
  color: #dfe8ff;
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 11px;
  cursor: pointer;
}

.botControlActions button:hover {
  background: rgba(70,115,255,.24);
}


/* Bot Control compact polish */
.botControlGlobalActions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 12px;
  margin-bottom: 8px;
}

.botControlGlobalActions button {
  white-space: nowrap;
  border: 1px solid rgba(90,130,255,.25);
  background: rgba(40,90,255,.15);
  color: #dfe8ff;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
}

.botControlCard {
  padding: 12px !important;
}

.botControlTop {
  margin-bottom: 8px !important;
}

.botControlTop strong {
  font-size: 14px !important;
}

.botControlTop span {
  font-size: 11px !important;
}

.botControlMiniMeta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}

.botControlMiniMeta span {
  background: rgba(60,105,255,.12);
  border: 1px solid rgba(100,150,255,.18);
  color: #c9d7ff;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 800;
}

.compactChecks {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.compactChecks div {
  padding: 8px !important;
  min-height: 42px;
}

.compactChecks span:first-child {
  font-size: 10px !important;
  margin-bottom: 5px !important;
}

.compactChecks strong {
  font-size: 11px;
  word-break: break-word;
}

.botControlFooter {
  margin-top: 10px !important;
  align-items: flex-start !important;
  gap: 8px;
  flex-direction: column;
}

.botControlActions {
  width: 100%;
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

.botControlActions button {
  flex: 0 0 auto !important;
  min-width: auto;
  padding: 7px 9px !important;
  font-size: 10px !important;
}

.bcBadge {
  font-size: 10px !important;
  padding: 3px 7px !important;
}

.bcCollapsed .compactChecks div:nth-child(n+5),
.bcCollapsed .botControlFooter small {
  display: none;
}

.bcCollapsed .botControlActions {
  margin-top: 2px;
}

@media (max-width: 720px) {
  .botControlGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .botControlCard {
    border-radius: 14px !important;
  }
}


/* Bot Control delete/action polish */
.botControlActions .dangerBtn {
  border-color: rgba(255,80,100,.35) !important;
  background: rgba(255,55,80,.13) !important;
  color: #ffb8c2 !important;
}

.botControlActions .dangerBtn:hover {
  background: rgba(255,55,80,.24) !important;
}

.botControlCard {
  margin-bottom: 12px !important;
}

.botControlMiniMeta span:nth-child(2) {
  color: #d7e6ff;
  background: rgba(70,130,255,.16);
}

.botControlTop .bcBadge,
.botControlTop .statusBadge {
  box-shadow: 0 0 16px rgba(70,255,130,.12);
}


/* Bot Control check button polish */
.botControlActions button:first-child {
  border-color: rgba(90,180,255,.35);
  background: rgba(60,120,255,.14);
  color: #d8e7ff;
}


/* Bot Control inline check panel */
.bcTopActions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.bcHeadCheckBtn {
  border: 1px solid rgba(90,180,255,.35);
  background: rgba(60,120,255,.16);
  color: #dceaff;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.bcHeadCheckBtn:hover {
  background: rgba(60,120,255,.28);
}

.bcCheckPanel {
  display: none;
  margin: 9px 0 2px;
  border: 1px solid rgba(120,160,255,.16);
  background: rgba(10,18,38,.46);
  border-radius: 12px;
  overflow: hidden;
}

.bcCheckPanel.open {
  display: block;
}

.bcCheckHeader {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.bcCheckHeader.ok {
  color: #bfffd2;
  background: rgba(50,200,100,.09);
}

.bcCheckHeader.warn {
  color: #ffe0a3;
  background: rgba(255,180,60,.10);
}

.bcCheckRows {
  display: grid;
  gap: 1px;
}

.bcCheckRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 7px 10px;
  font-size: 10px;
  background: rgba(255,255,255,.025);
}

.bcCheckRow span {
  font-weight: 800;
}

.bcCheckRow strong {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .9;
}

.bcCheckRow.ok span {
  color: #9fffc0;
}

.bcCheckRow.bad span {
  color: #ff9daa;
}

.bcCheckLoading,
.bcCheckError {
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 800;
}

.bcCheckError {
  color: #ff9daa;
}

/* Bot Control: make Check badge same size as ONLINE badge */
.bcHeadCheckBtn {
  min-height: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bcTopActions .bcBadge,
.bcTopActions .statusBadge {
  line-height: 1 !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
}

/* Fine alignment for header check badge */
.bcTopActions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bcHeadCheckBtn {
  position: relative;
  top: 1px;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================
   WEBHOOK CENTER V2
========================= */

.wcHeaderBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
}

.wcBig {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.wcSmall {
  font-size: 11px;
  color: rgba(220,230,255,.7);
  margin-top: 4px;
}

.wcRefreshBtn {
  height: 38px;
  padding: 0 14px;
}

.wcGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  gap: 14px;
}

.wcCard {
  background:
    linear-gradient(
      180deg,
      rgba(16,24,46,.94),
      rgba(7,12,25,.94)
    );

  border: 1px solid rgba(120,160,255,.12);

  border-radius: 18px;

  padding: 14px;

  box-shadow:
    0 10px 24px rgba(0,0,0,.28);
}

.wcCardTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.wcServerName {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}

.wcBotName {
  margin-top: 4px;
  color: rgba(220,230,255,.55);
  font-size: 11px;
}

.wcTopBadges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.wcBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 22px;

  padding: 0 10px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .4px;
}

.wcBadge.ok {
  color: #caffd8;
  background: rgba(60,200,100,.16);
  border: 1px solid rgba(70,255,140,.2);
}

.wcBadge.bad {
  color: #ffbcc8;
  background: rgba(255,70,90,.14);
  border: 1px solid rgba(255,70,90,.18);
}

.wcStatusGrid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.wcMiniBox {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 12px;
}

.wcMiniLabel {
  color: rgba(220,230,255,.55);
  font-size: 10px;
  font-weight: 900;
  margin-bottom: 8px;
}

.wcMiniValue {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.wcInfoList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.wcInfoRow {
  display: flex;
  flex-direction: column;
  gap: 3px;

  padding: 10px 12px;

  border-radius: 12px;

  background: rgba(255,255,255,.03);
}

.wcInfoRow span {
  color: rgba(220,230,255,.52);
  font-size: 10px;
  font-weight: 900;
}

.wcInfoRow strong {
  color: #eaf2ff;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wcEditor {
  margin-top: 8px;
}

.wcEditor summary {
  cursor: pointer;
  color: #dce8ff;
  font-size: 12px;
  font-weight: 900;
}

.wcForm {
  margin-top: 12px;
}

.wcForm label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;

  color: rgba(220,230,255,.78);
  font-size: 11px;
  font-weight: 800;
}

.wcForm input {
  width: 100%;
  box-sizing: border-box;

  background: rgba(0,0,0,.22);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 12px;

  color: #fff;

  padding: 11px 12px;
}

.wcActionRow {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.wcActionRow button {
  flex: 1;
}

.wcActionRow .primary {
  background:
    linear-gradient(
      180deg,
      #2b68ff,
      #1840a9
    );
}

.wcResult {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 800;
}

.wcSuccess {
  color: #9cffbf;
}

.wcError {
  color: #ff9dad;
}

.wcLoading {
  color: #c9dcff;
}

/* MOBILE */

@media (max-width: 700px) {

  .wcGrid {
    grid-template-columns: 1fr;
  }

  .wcHeaderBar {
    align-items: stretch;
    flex-direction: column;
  }

  .wcRefreshBtn {
    width: 100%;
  }

  .wcActionRow {
    flex-direction: column;
  }

}

/* =========================
   WEBHOOK CENTER COLOR FIX
   matches existing panel pages
========================= */

.wcCard {
  background:
    linear-gradient(
      180deg,
      rgba(11, 22, 39, .96),
      rgba(7, 14, 27, .96)
    ) !important;

  border: 1px solid rgba(120, 160, 255, .14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 28px rgba(0,0,0,.26) !important;
}

.wcMiniBox,
.wcInfoRow {
  background: rgba(255,255,255,.028) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
}

.wcServerName {
  color: #eaf2ff !important;
}

.wcBotName,
.wcMiniLabel,
.wcInfoRow span,
.wcSmall {
  color: rgba(205, 220, 245, .58) !important;
}

.wcInfoRow strong,
.wcMiniValue {
  color: rgba(238, 246, 255, .92) !important;
}

.wcBadge.ok {
  color: #8fdc7e !important;
  background: rgba(125, 210, 110, .12) !important;
  border: 1px solid rgba(125, 210, 110, .22) !important;
}

.wcBadge.bad {
  color: #ff8f9d !important;
  background: rgba(255, 80, 100, .11) !important;
  border: 1px solid rgba(255, 80, 100, .18) !important;
}

.wcEditor summary {
  color: rgba(235, 242, 255, .88) !important;
}

.wcForm input {
  background: rgba(8, 16, 30, .9) !important;
  border: 1px solid rgba(120, 160, 255, .12) !important;
  color: #eaf2ff !important;
}

.wcForm input:focus {
  border-color: rgba(125, 210, 110, .45) !important;
  box-shadow: 0 0 0 3px rgba(125, 210, 110, .08) !important;
}

.wcActionRow .primary {
  background:
    linear-gradient(
      180deg,
      rgba(125, 210, 110, .95),
      rgba(70, 145, 65, .95)
    ) !important;

  color: #06120b !important;
  border: 1px solid rgba(150, 230, 130, .35) !important;
}

.wcRefreshBtn,
.wcActionRow button {
  background: rgba(12, 24, 43, .95) !important;
  color: #dfeaff !important;
  border: 1px solid rgba(120, 160, 255, .14) !important;
  border-radius: 12px !important;
}

.wcRefreshBtn:hover,
.wcActionRow button:hover {
  background: rgba(18, 34, 60, .98) !important;
}

.wcHeaderBar {
  background: transparent !important;
}

.wcBig {
  color: #eaf2ff !important;
}


/* WEBHOOK CENTER FINAL ALIGNMENT */

#page-webhooks .panelHeader > button {
  background: rgba(12, 24, 43, .95) !important;
  color: #dfeaff !important;
  border: 1px solid rgba(120, 160, 255, .14) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.wcCard {
  background:
    linear-gradient(
      180deg,
      rgba(9, 18, 32, .96),
      rgba(6, 12, 24, .96)
    ) !important;
}

.wcHeaderBar {
  margin-top: 4px !important;
}

.wcRefreshBtn {
  background: rgba(9, 18, 32, .95) !important;
  border: 1px solid rgba(120, 160, 255, .16) !important;
  color: #dce8ff !important;
  min-height: 42px !important;
  font-weight: 800 !important;
}

.wcMiniBox,
.wcInfoRow {
  background: rgba(10, 20, 36, .86) !important;
}

.wcBadge.ok {
  color: #93d982 !important;
  background: rgba(95, 175, 85, .16) !important;
}

.wcBadge.bad {
  color: #ff8fa1 !important;
  background: rgba(175, 55, 75, .18) !important;
}

.wcEditor summary {
  color: #eaf2ff !important;
}

@media (max-width: 700px) {

  #page-webhooks .panelHeader {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  #page-webhooks .panelHeader > button {
    position: static !important;
    top: auto !important;
    right: auto !important;

    height: 40px !important;
    min-width: 92px !important;
  }

  .wcHeaderBar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .wcHeaderBar .wcRefreshBtn {
    width: 100% !important;
  }

}


/* FINAL MICRO POLISH */

.wcCard {
  transition:
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.wcCard:hover {
  transform: translateY(-1px);
}

.wcActionRow button {
  min-height: 40px;
  font-weight: 800;
}

.wcActionRow button.primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 4px 14px rgba(120,220,90,.16);
}

.wcActionRow button.test {
  opacity: .92;
}

.wcResult {
  padding-top: 2px;
  min-height: 18px;
}

.wcEditor summary {
  padding: 6px 0;
}

.wcInfoRow strong {
  font-size: 12px;
}

.wcBadge {
  backdrop-filter: blur(4px);
}


/* WEBHOOK HELP */

.wcForm label small {
  display: block;
  margin-top: 3px;
  color: rgba(200,215,240,.48);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.wcHelpBox {
  margin-bottom: 14px;

  padding: 12px 14px;

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(90,140,255,.06),
      rgba(90,140,255,.03)
    );

  border: 1px solid rgba(120,160,255,.10);
}

.wcHelpBox strong {
  display: block;
  margin-bottom: 8px;

  color: #eaf2ff;
  font-size: 12px;
}

.wcHelpBox ul {
  margin: 0;
  padding-left: 18px;
}

.wcHelpBox li {
  margin-bottom: 6px;

  color: rgba(215,225,245,.72);
  font-size: 11px;
  line-height: 1.4;
}

.wcHelpBox code {
  padding: 2px 5px;

  border-radius: 6px;

  background: rgba(0,0,0,.24);

  color: #9bdd85;

  font-size: 10px;
}


/* FINAL WEBHOOK UX */

.wcForm input::placeholder {
  color: rgba(180,195,220,.28);
}

.wcHelpBox li:last-child {
  margin-bottom: 0;
}

.wcForm input:focus {
  transform: translateY(-1px);
  transition:
    transform .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}

.wcEditor summary {
  user-select: none;
}

.wcEditor summary::-webkit-details-marker {
  opacity: .7;
}


/* WEBHOOK CENTER HEALTH + UX */

.wcTopBadges {
  justify-content: flex-end;
  max-width: 170px;
}

.wcBadge.warn {
  color: #ffd28a !important;
  background: rgba(255, 170, 60, .14) !important;
  border: 1px solid rgba(255, 185, 70, .22) !important;
}

.wcHealthMini {
  display: grid;
  gap: 7px;
  margin: 0 0 12px 0;
}

.wcHealthMini div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: center;

  padding: 8px 10px;

  border-radius: 11px;

  background: rgba(10, 20, 36, .72);
  border: 1px solid rgba(255,255,255,.045);
}

.wcHealthMini span {
  color: rgba(200,215,240,.52);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.wcHealthMini strong {
  color: rgba(235,242,255,.86);
  font-size: 10px;
  font-weight: 800;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wcActionRow.compact {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.wcActionRow.compact button {
  min-height: 36px !important;
  font-size: 12px !important;
}

.wcForm input.valid {
  border-color: rgba(125, 210, 110, .58) !important;
  box-shadow: 0 0 0 3px rgba(125, 210, 110, .08) !important;
}

.wcForm input.invalid {
  border-color: rgba(255, 90, 110, .58) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 110, .08) !important;
}

.wcActionRow button:disabled {
  opacity: .7;
  pointer-events: none;
}

@media (max-width: 700px) {
  .wcTopBadges {
    max-width: 100%;
  }

  .wcHealthMini div {
    grid-template-columns: 72px minmax(0, 1fr);
  }
}



/* Nexgen Player Lookup */
.plToolbar {
  display: grid;
  grid-template-columns: 1fr 220px auto;
  gap: 10px;
  margin-bottom: 14px;
}

.plToolbar input,
.plToolbar select {
  background: #080d14;
  border: 1px solid #263855;
  color: #e8edf5;
  border-radius: 10px;
  padding: 12px;
}

.plToolbar button,
.plSources button {
  background: #253bff;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
}

.plStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.plStats div {
  background: #080d14;
  border: 1px solid #202a38;
  border-radius: 12px;
  padding: 14px;
}

.plStats strong {
  display: block;
  font-size: 24px;
  color: #d7b46a;
}

.plStats span,
.plMuted {
  color: #9aa8ba;
}

.plLayout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 14px;
}

.plList {
  background: #080d14;
  border: 1px solid #202a38;
  border-radius: 14px;
  padding: 10px;
  max-height: 680px;
  overflow: auto;
}

.plItem {
  width: 100%;
  display: block;
  text-align: left;
  background: #111a28;
  border: 1px solid #22314a;
  color: #e8edf5;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}

.plItem.active,
.plItem:hover {
  border-color: #d7b46a;
  background: #17243a;
}

.plItem strong,
.plItem span,
.plItem small {
  display: block;
}

.plItem span,
.plItem small {
  color: #9aa8ba;
  margin-top: 4px;
}

.plDetails {
  background: #080d14;
  border: 1px solid #202a38;
  border-radius: 14px;
  padding: 14px;
  min-height: 500px;
}

.plHero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #111a28, #17243a);
  border: 1px solid #263855;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}

.plHero h2 {
  margin: 0;
}

.plHero p {
  color: #9aa8ba;
  margin: 6px 0 0;
}

.plGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.plBox {
  background: #0f141c;
  border: 1px solid #202a38;
  border-radius: 12px;
  padding: 12px;
}

.plBox h3 {
  margin: 0 0 10px;
  color: #d7b46a;
}

.plValue {
  padding: 7px 0;
  border-top: 1px solid #1a2431;
  word-break: break-word;
}

.plRaw,
.plSources {
  margin-top: 14px;
}

.plLoading,
.plError,
.plEmpty {
  background: #080d14;
  border: 1px solid #202a38;
  border-radius: 12px;
  padding: 16px;
  color: #9aa8ba;
}

.plError {
  color: #ff7474;
}

.bad {
  color: #ff7474;
}

@media (max-width: 1100px) {
  .plLayout,
  .plToolbar,
  .plStats {
    grid-template-columns: 1fr;
  }
}

.plWarn {
  display: inline-block;
  margin-top: 8px;
  color: #ffcf70;
  font-style: normal;
  font-size: 12px;
}

.plHeroStats {
  text-align: right;
  display: grid;
  gap: 4px;
  color: #9aa8ba;
}

.plHeroStats strong {
  color: #d7b46a;
}

.plActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.plActions button {
  background: #17243a;
  border: 1px solid #d7b46a;
  color: #e8edf5;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.plActions button:hover {
  background: #223657;
}

/* Player Lookup v2 */
.plItem.compact {
  padding: 10px 12px;
}

.plItemTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.plItemTop span,
.plRiskBadge {
  font-size: 11px;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255,255,255,.08);
}

.risk-green {
  border-color: rgba(93, 214, 130, .45) !important;
}

.risk-yellow {
  border-color: rgba(255, 207, 112, .65) !important;
}

.risk-red {
  border-color: rgba(255, 116, 116, .75) !important;
}

.plTag {
  display: inline-block;
  margin-top: 7px;
  color: #9fd3ff;
  font-style: normal;
  font-size: 12px;
}

.plTimeline {
  margin-top: 14px;
}

.plTimelineRow {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid #1a2431;
}

.plTimelineRow span,
.plTimelineRow small {
  color: #9aa8ba;
}

.plAdminInput,
.plAdminText {
  width: 100%;
  box-sizing: border-box;
  background: #080d14 !important;
  color: #e8edf5 !important;
  border: 1px solid #263855 !important;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}

.plAdminText {
  min-height: 120px;
  resize: vertical;
}

.plBackBtn {
  display: none;
  background: #17243a;
  color: #e8edf5;
  border: 1px solid #d7b46a;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

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

  .plToolbar button {
    display: none;
  }

  .plStats {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
  }

  .plStats div {
    min-width: 130px;
  }

  .plLayout {
    display: block;
  }

  .plLayout.showDetails .plList {
    display: none;
  }

  .plLayout:not(.showDetails) .plDetails {
    display: none;
  }

  .plBackBtn {
    display: inline-block;
  }

  .plGrid {
    grid-template-columns: 1fr;
  }

  .plHero {
    align-items: flex-start;
  }

  .plHeroStats {
    text-align: right;
    font-size: 12px;
  }

  .plActions {
    gap: 8px;
  }

  .plActions button {
    flex: 1 1 auto;
    min-width: 120px;
  }

  .plItem.compact {
    margin-bottom: 7px;
  }
}

/* Player Lookup v2 */
.plItem.compact {
  padding: 10px 12px;
}

.plItemTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.plItemTop span,
.plRiskBadge {
  font-size: 11px;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255,255,255,.08);
}

.risk-green {
  border-color: rgba(93, 214, 130, .45) !important;
}

.risk-yellow {
  border-color: rgba(255, 207, 112, .65) !important;
}

.risk-red {
  border-color: rgba(255, 116, 116, .75) !important;
}

.plTag {
  display: inline-block;
  margin-top: 7px;
  color: #9fd3ff;
  font-style: normal;
  font-size: 12px;
}

.plTimeline {
  margin-top: 14px;
}

.plTimelineRow {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid #1a2431;
}

.plTimelineRow span,
.plTimelineRow small {
  color: #9aa8ba;
}

.plAdminInput,
.plAdminText {
  width: 100%;
  box-sizing: border-box;
  background: #080d14 !important;
  color: #e8edf5 !important;
  border: 1px solid #263855 !important;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}

.plAdminText {
  min-height: 120px;
  resize: vertical;
}

.plBackBtn {
  display: none;
  background: #17243a;
  color: #e8edf5;
  border: 1px solid #d7b46a;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

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

  .plToolbar button {
    display: none;
  }

  .plStats {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
  }

  .plStats div {
    min-width: 130px;
  }

  .plLayout {
    display: block;
  }

  .plLayout.showDetails .plList {
    display: none;
  }

  .plLayout:not(.showDetails) .plDetails {
    display: none;
  }

  .plBackBtn {
    display: inline-block;
  }

  .plGrid {
    grid-template-columns: 1fr;
  }

  .plHero {
    align-items: flex-start;
  }

  .plHeroStats {
    text-align: right;
    font-size: 12px;
  }

  .plActions {
    gap: 8px;
  }

  .plActions button {
    flex: 1 1 auto;
    min-width: 120px;
  }

  .plItem.compact {
    margin-bottom: 7px;
  }
}

.plToolbar {
  grid-template-columns: 1fr 180px 180px 180px auto;
}

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

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

.plRelated {
  margin-top: 14px;
}

.plRelatedRow {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 4px;
  background: #0f141c;
  color: #e8edf5;
  border: 1px solid #202a38;
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
  cursor: pointer;
}

.plRelatedRow:hover {
  background: #17243a;
  border-color: #d7b46a;
}

.plRelatedRow span,
.plRelatedRow small {
  color: #9aa8ba;
}

.plBox summary {
  cursor: pointer;
  color: #d7b46a;
  font-weight: 700;
}

.plRelatedRow {
  transition: .15s ease;
}

.plRelatedRow:hover {
  transform: translateY(-1px);
}

.plValue {
  word-break: break-word;
}

/* PlayerLookup Security Score */
.plSecurityBox {
  position: relative;
  overflow: hidden;
}

.plSecurityScore {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.plSecurityScore strong {
  font-size: 28px;
  line-height: 1;
}

.plSecurityScore span {
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
}

.security-clean {
  border-color: rgba(40, 200, 90, .28);
}

.security-watch {
  border-color: rgba(255, 205, 70, .38);
}

.security-high {
  border-color: rgba(255, 130, 35, .45);
}

.security-critical {
  border-color: rgba(255, 60, 60, .55);
  box-shadow: 0 0 18px rgba(255, 60, 60, .12);
}

/* PlayerLookup Intel Pack */
.plIntelPackBox h3:not(:first-child) {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.plIntelPackBox .plValue b {
  color: rgba(255,255,255,.86);
}

/* PlayerLookup World Map */
.plWorldMapBox {
  overflow: hidden;
}

.plWorldMap {
  width: 100%;
  height: 170px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(80,150,255,.18), transparent 25%),
    radial-gradient(circle at 70% 40%, rgba(255,120,60,.12), transparent 28%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}

.plWorldMap svg {
  width: 100%;
  height: 100%;
  display: block;
}

.plWorldMap rect {
  fill: rgba(8, 14, 28, .85);
}

.plWorldMap path {
  stroke: rgba(255,255,255,.08);
  stroke-width: .25;
  fill: none;
}

.plWorldMap circle {
  fill: rgba(255, 80, 80, .95);
  stroke: rgba(255,255,255,.85);
  stroke-width: .35;
  filter: drop-shadow(0 0 3px rgba(255,80,80,.8));
}

/* Leaflet World Map */
.plLeafletMap {
  width: 100%;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
  background: #07111f;
}

.plLeafletMap .leaflet-tile {
  filter: brightness(.72) contrast(1.08) saturate(.75);
}

.plLeafletMap .leaflet-control-zoom {
  border: none !important;
}

.plLeafletMap .leaflet-control-zoom a {
  background: #08182d !important;
  color: #d7e7ff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.plLeafletMap .leaflet-popup-content-wrapper {
  background: #08111d;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}

.plLeafletMap .leaflet-popup-tip {
  background: #08111d;
}

.plLeafletMap .leaflet-container {
  background: #07111f;
}

/* PlayerLookup Map Debug */
.plMapDebug {
  margin: 0 0 8px 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.74);
  font-size: 11px;
  font-weight: 700;
  word-break: break-all;
}

/* Final Leaflet Map Fix */
.plLeafletMap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 260px !important;
  height: 260px !important;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 12px;
  z-index: 1;
  background: rgba(0,0,0,.35);
}

.plLeafletMap .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  background: #071426 !important;
}

.leaflet-pane,
.leaflet-tile,
.leaflet-map-pane,
.leaflet-layer,
.leaflet-control-container {
  z-index: 2 !important;
}

.leaflet-tile {
  visibility: visible !important;
  opacity: 1 !important;
}

.plWorldMapBox {
  overflow: visible !important;
}

/* Leaflet tile fallback */
.plLeafletNoTiles {
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255,90,70,.18), transparent 32%),
    #071426 !important;
  background-size:
    48px 48px,
    48px 48px,
    100% 100%,
    100% 100% !important;
}

.plLeafletNoTiles::after {
  content: "OSM tiles unavailable · fallback grid";
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 999;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.62);
  background: rgba(0,0,0,.38);
  padding: 4px 7px;
  border-radius: 8px;
}

/* PlayerLookup Map Reload */
.plMapReloadBtn {
  width: 100%;
  margin: 4px 0 10px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(110,160,255,.35);
  background: rgba(35,85,180,.22);
  color: #dce9ff;
  font-weight: 800;
  font-size: 12px;
}

.plMapReloadBtn:active {
  transform: scale(.99);
}

/* PanelBus Debug */
.panelBusDebugBox {
  margin-top: 18px;
}

.panelBusDebugBox .sysMiniGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.panelBusDebugBox .sysMiniCard {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

.panelBusDebugBox .sysMiniCard span,
.panelBusDebugBox .sysMiniRow span {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

.panelBusDebugBox .sysMiniCard strong {
  display: block;
  margin-top: 3px;
  font-size: 20px;
}

.panelBusDebugBox .sysMiniCard small {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.45);
}

.panelBusDebugBox .sysMiniList {
  display: grid;
  gap: 8px;
}

.panelBusDebugBox .sysMiniRow {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 90px 60px 80px 80px 90px 80px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
}

.panelBusDebugBox .sysMiniRow strong {
  font-size: 12px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.panelBusDebugBox .sysMiniRow small {
  color: rgba(255,255,255,.58);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .panelBusDebugBox .sysMiniRow {
    grid-template-columns: 1fr 80px;
  }

  .panelBusDebugBox .sysMiniRow small {
    display: none;
  }
}

.plRefreshStatus {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px 0;
  padding: 8px 10px;
  border: 1px solid rgba(80, 255, 180, .22);
  border-radius: 10px;
  background: rgba(0, 20, 18, .45);
  color: rgba(220, 255, 240, .86);
  font-size: 12px;
}

.plRefreshStatus strong {
  color: #9fffd4;
}

.uploadHistoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.uploadHistoryActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.uploadHistoryItem button.uploadDangerButton {
  border-color: rgba(255, 92, 92, .45);
  background: linear-gradient(180deg, #3a1518, #1b0d10);
  color: #ffd6d6;
}

.uploadHistoryItem button.uploadDangerButton:hover {
  border-color: rgba(255, 120, 120, .75);
}

/* ===== Upload History Mobile Polish ===== */

.uploadHistoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.uploadHistoryHeader h3 {
  margin: 0;
}

.uploadHistoryHeader button {
  min-width: 110px;
  height: 32px;
  font-size: 12px;
  padding: 0 12px;
}

.uploadHistoryItem {
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.uploadHistoryItem strong {
  display: block;
  font-size: 11px;
  color: #d8b46c;
  margin-bottom: 4px;
  word-break: break-all;
}

.uploadHistoryItem span {
  display: block;
  font-size: 11px;
  opacity: .82;
  line-height: 1.4;
}

.uploadHistoryActions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.uploadHistoryActions button {
  flex: 1;
  height: 34px;
  font-size: 12px;
}

.uploadDangerButton {
  background: linear-gradient(180deg,#4a1616,#260d0d);
  border: 1px solid rgba(255,90,90,.35);
  color: #ffd4d4;
}

.uploadDangerButton:hover {
  border-color: rgba(255,120,120,.7);
}


.uploadHistoryFiles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.uploadHistoryFiles span,
.uploadHistoryFiles em {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(216,180,108,.10);
  border: 1px solid rgba(216,180,108,.22);
  color: #f0d38a;
  font-size: 10px;
  font-style: normal;
  word-break: break-all;
}


/* === Ops Intelligence V1 === */
.opsHero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  margin-bottom: 16px;
}

.opsHero select {
  min-width: 260px;
}

.opsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.opsCard {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  padding: 16px;
}

.opsCard:nth-child(3) {
  grid-column: 1 / -1;
}

.opsActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.opsLogBox {
  height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

#opsIniEditor {
  width: 100%;
  min-height: 420px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.35);
  color: inherit;
  border: 1px solid rgba(255,255,255,.1);
}

.opsBox {
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

.opsStatus {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 800;
  margin-bottom: 8px;
}

.opsStatus.ok,
.depNode.ok {
  background: rgba(60, 220, 140, .14);
  border: 1px solid rgba(60, 220, 140, .35);
}

.opsStatus.warn,
.opsIssue.warn {
  background: rgba(255, 190, 70, .14);
  border: 1px solid rgba(255, 190, 70, .35);
}

.opsStatus.critical,
.opsIssue.critical,
.depNode.hot {
  background: rgba(255, 80, 80, .14);
  border: 1px solid rgba(255, 80, 80, .35);
}

.opsMiniGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.opsMiniGrid span,
.depNode,
.opsIssue {
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}

.opsMiniGrid b {
  float: right;
}

.depGraph {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.depNode {
  min-width: 170px;
}

.depNode strong,
.depNode span {
  display: block;
}

.opsIssueList {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.opsIssue {
  display: grid;
  grid-template-columns: 90px minmax(120px, 1fr) 2fr;
  gap: 10px;
}

.opsIssue.info {
  background: rgba(90, 160, 255, .10);
  border: 1px solid rgba(90, 160, 255, .28);
}

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

  .opsCard:nth-child(3) {
    grid-column: auto;
  }

  .opsHero {
    flex-direction: column;
  }

  .opsHero select {
    width: 100%;
  }

  .opsIssue {
    grid-template-columns: 1fr;
  }
}
/* === /Ops Intelligence V1 === */


/* SETTINGS PHASE 1 */
.settingsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr);
  gap: 18px;
}

.settingsCard {
  background: rgba(7, 13, 24, .55);
  border: 1px solid rgba(90, 140, 255, .18);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
}

.settingsCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.settingsCardHeader h3 {
  margin: 0;
}

.settingsCardHeader span {
  color: rgba(220,235,255,.62);
  font-size: 12px;
}

.settingsUserCreate {
  display: grid;
  grid-template-columns: 1fr 1fr 190px auto;
  gap: 10px;
  margin-bottom: 16px;
}

.settingsUserCreate input,
.settingsUserCreate select,
.settingsRow select {
  width: 100%;
  background: rgba(2, 8, 18, .72);
  color: #eaf2ff;
  border: 1px solid rgba(120, 160, 255, .2);
  border-radius: 12px;
  padding: 10px 12px;
}

.settingsUserCreate button,
.settingsActions button,
.settingsFooterActions button {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  color: #eaf2ff;
  background: linear-gradient(135deg, rgba(48,118,255,.95), rgba(95,195,255,.75));
  cursor: pointer;
}

.settingsActions .dangerButton {
  background: linear-gradient(135deg, rgba(210,45,65,.95), rgba(255,120,80,.75));
}

.settingsTable {
  display: grid;
  gap: 8px;
}

.settingsRow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 180px 110px 150px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}

.settingsRow small,
.settingsPermRow small {
  display: block;
  margin-top: 3px;
  color: rgba(220,235,255,.55);
  font-size: 11px;
}

.settingsHead {
  color: rgba(220,235,255,.65);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(255,255,255,.055);
}

.settingsActions {
  display: flex;
  gap: 8px;
}

.settingsCheck {
  display: flex;
  gap: 8px;
  align-items: center;
}

.settingsRoles {
  display: grid;
  gap: 10px;
}

.settingsRoleCard {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}

.settingsRoleCard h4 {
  margin: 0 0 6px;
}

.settingsRoleCard p {
  margin: 0 0 8px;
  color: rgba(220,235,255,.65);
}

.settingsRoleCard code {
  color: #9fc5ff;
}

.settingsPermissions {
  margin-top: 18px;
}

.settingsPermTable {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.settingsPermRow {
  display: grid;
  grid-template-columns: 220px repeat(4, minmax(120px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}

.settingsPermRow span:not(:first-child) {
  text-align: center;
}

.settingsPermRow input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.settingsFooterActions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.errorBox {
  border: 1px solid rgba(255,80,80,.35);
  background: rgba(255,40,60,.12);
  color: #ffd7d7;
  padding: 14px;
  border-radius: 14px;
}

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

  .settingsUserCreate,
  .settingsRow {
    grid-template-columns: 1fr;
  }
}


/* AUTH PHASE 1B */
#panelLoginOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(65, 130, 255, .18), transparent 32%),
    radial-gradient(circle at 80% 80%, rgba(0, 220, 180, .12), transparent 30%),
    rgba(2, 6, 14, .94);
  z-index: 99999;
  backdrop-filter: blur(12px);
}

#panelLoginOverlay.visible {
  display: flex;
}

.panelLoginBox {
  width: min(430px, calc(100vw - 32px));
  background: rgba(8, 16, 30, .94);
  border: 1px solid rgba(120, 170, 255, .28);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.panelLoginBrand {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
}

.panelLoginIcon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(48,118,255,.95), rgba(95,195,255,.75));
  box-shadow: 0 12px 30px rgba(60,120,255,.25);
  font-size: 24px;
}

.panelLoginBrand h1 {
  margin: 0;
  font-size: 22px;
  color: #edf5ff;
}

.panelLoginBrand p {
  margin: 4px 0 0;
  color: rgba(225,238,255,.62);
}

#panelLoginForm {
  display: grid;
  gap: 14px;
}

#panelLoginForm label {
  display: grid;
  gap: 7px;
  color: rgba(225,238,255,.76);
  font-size: 13px;
}

#panelLoginForm input {
  width: 100%;
  background: rgba(2, 8, 18, .72);
  color: #eaf2ff;
  border: 1px solid rgba(120, 160, 255, .22);
  border-radius: 14px;
  padding: 12px 13px;
  outline: none;
}

#panelLoginForm input:focus {
  border-color: rgba(110,190,255,.7);
  box-shadow: 0 0 0 3px rgba(70,140,255,.15);
}

#panelLoginForm button {
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  padding: 13px 16px;
  color: #eaf2ff;
  background: linear-gradient(135deg, rgba(48,118,255,.95), rgba(95,195,255,.75));
  cursor: pointer;
  font-weight: 700;
}

#panelLoginError {
  min-height: 18px;
  color: #ffb7b7;
  font-size: 13px;
}

#panelUserBadge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 16px;
  background: rgba(4, 10, 20, .78);
  border: 1px solid rgba(120, 170, 255, .2);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

#panelUserBadge span {
  color: #edf5ff;
  font-weight: 700;
  font-size: 13px;
}

#panelUserBadge small {
  color: rgba(225,238,255,.58);
  font-size: 11px;
}

#panelLogoutButton {
  border: 0;
  border-radius: 10px;
  padding: 7px 9px;
  color: #eaf2ff;
  background: rgba(255,255,255,.09);
  cursor: pointer;
}

body:not(.panel-authenticated) main,
body:not(.panel-authenticated) nav,
body:not(.panel-authenticated) header,
body:not(.panel-authenticated) footer {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}


/* SETTINGS PHASE 1C */
.settingsActionTable {
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}

.settingsAuditList {
  display: grid;
  gap: 8px;
}

.settingsAuditRow {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(160px, .9fr) minmax(120px, .6fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}

.settingsAuditRow small {
  display: block;
  margin-top: 3px;
  color: rgba(220,235,255,.55);
  font-size: 11px;
}

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

/* PASSWORD FRONTEND PHASE 1D2B */
.settingsPasswordBox {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin: -2px 0 8px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(40, 90, 160, .12);
  border: 1px solid rgba(120, 170, 255, .18);
}

.settingsPasswordBox input[type="text"] {
  width: 100%;
  background: rgba(2, 8, 18, .72);
  color: #eaf2ff;
  border: 1px solid rgba(120, 160, 255, .2);
  border-radius: 12px;
  padding: 10px 12px;
}

.settingsPasswordBox small {
  display: block;
  margin-top: 4px;
  color: rgba(220,235,255,.58);
}

.settingsPasswordResult {
  min-height: 18px;
  font-size: 13px;
  color: rgba(220,235,255,.72);
}

.settingsPasswordResult.ok {
  color: #9fffd0;
}

.settingsPasswordResult.bad {
  color: #ffb7b7;
}

/* PASSWORD DEBUG MARKER */
.settingsPasswordDebugMarker {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(80, 180, 255, .12);
  border: 1px solid rgba(120, 190, 255, .22);
  color: rgba(220, 240, 255, .75);
  font-size: 12px;
}

/* DIRECT PASSWORD MODAL PHASE 1D2B */
.settingsPasswordModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 14, .72);
  z-index: 99998;
  backdrop-filter: blur(8px);
}

.settingsPasswordModal.visible {
  display: flex;
}

.settingsPasswordModalBox {
  width: min(520px, calc(100vw - 30px));
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(8, 16, 30, .96);
  border: 1px solid rgba(120, 170, 255, .28);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.settingsPasswordModalHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.settingsPasswordModalHeader h3 {
  margin: 0;
}

.settingsPasswordModalHeader p {
  margin: 4px 0 0;
  color: rgba(220,235,255,.62);
}

.settingsPasswordModalHeader button {
  border: 0;
  border-radius: 12px;
  padding: 8px 11px;
  color: #eaf2ff;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}

.settingsPasswordModal input[type="text"] {
  width: 100%;
  background: rgba(2, 8, 18, .72);
  color: #eaf2ff;
  border: 1px solid rgba(120, 160, 255, .2);
  border-radius: 12px;
  padding: 10px 12px;
}

/* PHASE 3D MANDATORY 2FA SETTINGS */
.settingsRow {
  grid-template-columns: minmax(180px, 1fr) 180px 110px 120px 170px;
}
@media (max-width: 1100px) {
  .settingsRow {
    grid-template-columns: 1fr;
  }
}

/* AUTH SECURITY UI PHASE 3G */
.securityCenterCard {
  margin-bottom: 18px;
  border-color: rgba(120, 190, 255, .28);
}

.securityGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.securityBox {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(8, 16, 30, .58);
  border: 1px solid rgba(130, 170, 255, .16);
}

.securityBox strong {
  color: #edf5ff;
}

.securityBox span,
.securityBox small {
  color: rgba(225, 238, 255, .68);
}

.securityOk {
  color: #8fffd2 !important;
  font-weight: 800;
}

.securityBad {
  color: #ffb0b0 !important;
  font-weight: 800;
}

.settingsSessionsList {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.settingsSessionsList h4 {
  margin: 0;
  color: #edf5ff;
}

.settingsSessionRow {
  display: grid;
  grid-template-columns: 180px 1fr 170px 170px;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(2, 8, 18, .48);
  border: 1px solid rgba(130, 170, 255, .12);
}

.settingsSessionRow.current {
  border-color: rgba(100, 230, 190, .35);
  box-shadow: inset 0 0 0 1px rgba(100, 230, 190, .08);
}

.settingsSessionRow strong,
.settingsSessionRow span {
  display: block;
  color: #edf5ff;
  font-size: 13px;
}

.settingsSessionRow small {
  display: block;
  color: rgba(225, 238, 255, .56);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.recoveryCodesBox {
  margin-top: 18px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(12, 24, 42, .72);
  border: 1px solid rgba(130, 170, 255, .2);
}

.recoveryCodesBox h4 {
  margin: 0 0 8px;
  color: #edf5ff;
}

.recoveryCodesBox p {
  color: rgba(225, 238, 255, .62);
}

.recoveryCodesBox pre {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .35);
  color: #dff7ff;
  overflow: auto;
  user-select: all;
}

@media (max-width: 1100px) {
  .securityGrid,
  .settingsSessionRow {
    grid-template-columns: 1fr;
  }
}

/* USER ONBOARDING PHASE 4A */
.onboardingCard {
  margin-bottom: 18px;
  border-color: rgba(143, 255, 210, .25);
}

.onboardingGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.onboardingGrid label,
.inviteResult label {
  display: grid;
  gap: 6px;
  color: rgba(225, 238, 255, .72);
}

.onboardingGrid input,
.onboardingGrid select,
.inviteResult input {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(130, 170, 255, .2);
  background: rgba(0, 0, 0, .24);
  color: #edf5ff;
}

.onboardingChecks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 14px 0;
  color: rgba(225, 238, 255, .72);
}

.onboardingMailInfo {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(130, 170, 255, .12);
  color: rgba(225, 238, 255, .72);
}

.onboardingMailInfo small {
  display: block;
  color: rgba(225, 238, 255, .48);
}

.inviteResult {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(8, 24, 20, .55);
  border: 1px solid rgba(143, 255, 210, .2);
}

.inviteResult.ok strong {
  color: #8fffd2;
}

.inviteResult p {
  color: rgba(225, 238, 255, .68);
}

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

/* PHASE 4C PROFESSIONAL INVITES + 2FA QR */
.pendingInvitesCard {
  margin-bottom: 18px;
  border-color: rgba(128, 199, 255, .25);
}

.pendingInviteList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.pendingInviteRow {
  display: grid;
  grid-template-columns: 1.4fr .7fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(8, 16, 30, .58);
  border: 1px solid rgba(130, 170, 255, .14);
}

.pendingInviteRow.pending {
  border-color: rgba(255, 203, 107, .35);
}

.pendingInviteRow.accepted {
  border-color: rgba(143, 255, 210, .28);
}

.pendingInviteRow.expired {
  border-color: rgba(255, 112, 112, .28);
}

.pendingInviteRow strong,
.pendingInviteRow span {
  display: block;
  color: #edf5ff;
}

.pendingInviteRow small {
  display: block;
  color: rgba(225, 238, 255, .55);
  overflow-wrap: anywhere;
}

.pendingInviteActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.twofaSetupBox {
  margin-top: 18px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(8, 16, 30, .58);
  border: 1px solid rgba(143, 255, 210, .18);
}

.twofaSetupBox h4 {
  margin: 0 0 8px;
  color: #edf5ff;
}

.twofaSetupBox p,
.twofaSetupBox small {
  color: rgba(225, 238, 255, .62);
}

.twofaQrPanel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.twofaQrPanel img {
  width: 260px;
  max-width: 100%;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
}

.twofaQrPanel label {
  display: grid;
  gap: 6px;
  color: rgba(225, 238, 255, .72);
}

.twofaQrPanel input {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(130, 170, 255, .2);
  background: rgba(0, 0, 0, .24);
  color: #edf5ff;
}

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

/* USER SECURITY STATUS PHASE 4D */
.userSecurityStatusCard {
  margin-bottom: 18px;
  border-color: rgba(255, 203, 107, .22);
}

.securitySummaryGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.securitySummaryGrid > div {
  padding: 12px;
  border-radius: 16px;
  background: rgba(8, 16, 30, .58);
  border: 1px solid rgba(130, 170, 255, .14);
}

.securitySummaryGrid strong {
  display: block;
  color: #edf5ff;
  font-size: 22px;
}

.securitySummaryGrid small {
  color: rgba(225, 238, 255, .58);
}

.securitySummaryGrid .ok {
  border-color: rgba(143, 255, 210, .28);
}

.securitySummaryGrid .warn {
  border-color: rgba(255, 203, 107, .28);
}

.securitySummaryGrid .bad {
  border-color: rgba(255, 112, 112, .28);
}

.userSecurityList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.userSecurityRow {
  border-radius: 16px;
  background: rgba(8, 16, 30, .5);
  border: 1px solid rgba(130, 170, 255, .14);
  overflow: hidden;
}

.userSecurityRow.ok {
  border-color: rgba(143, 255, 210, .26);
}

.userSecurityRow.warn {
  border-color: rgba(255, 203, 107, .3);
}

.userSecurityRow.bad {
  border-color: rgba(255, 112, 112, .3);
}

.userSecurityRow summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.userSecurityRow summary strong {
  color: #edf5ff;
}

.userSecurityRow summary small {
  display: block;
  color: rgba(225, 238, 255, .55);
}

.securityStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.securityStatusBadge.ok {
  color: #8fffd2;
  background: rgba(143, 255, 210, .1);
  border: 1px solid rgba(143, 255, 210, .2);
}

.securityStatusBadge.warn {
  color: #ffd37e;
  background: rgba(255, 203, 107, .1);
  border: 1px solid rgba(255, 203, 107, .22);
}

.securityStatusBadge.bad {
  color: #ffb0b0;
  background: rgba(255, 112, 112, .1);
  border: 1px solid rgba(255, 112, 112, .22);
}

.userSecurityDetails {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
  padding: 0 14px 14px;
}

.userSecurityDetails > div {
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(130, 170, 255, .1);
}

.userSecurityDetails > div.full {
  grid-column: 1 / -1;
}

.userSecurityDetails span {
  display: block;
  color: rgba(225, 238, 255, .45);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.userSecurityDetails strong {
  display: block;
  color: rgba(237, 245, 255, .9);
  font-size: 13px;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .securitySummaryGrid,
  .userSecurityDetails {
    grid-template-columns: 1fr;
  }

  .userSecurityRow summary {
    grid-template-columns: 1fr;
  }
}

/* USER LIFECYCLE PHASE 4E */
.userLifecycleActions strong {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.userLifecycleActions button {
  width: auto;
}

/* SETTINGS SECURITY UX PHASE 4F */
.settingsSecurityScoreBox {
  margin: 14px 0 16px;
}

.securityScoreHero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  background: rgba(8, 16, 30, .62);
  border: 1px solid rgba(130, 170, 255, .18);
  margin-bottom: 12px;
}

.securityScoreHero.ok {
  border-color: rgba(143, 255, 210, .32);
  box-shadow: 0 0 24px rgba(143, 255, 210, .06);
}

.securityScoreHero.warn {
  border-color: rgba(255, 203, 107, .34);
  box-shadow: 0 0 24px rgba(255, 203, 107, .06);
}

.securityScoreHero.bad {
  border-color: rgba(255, 112, 112, .34);
  box-shadow: 0 0 24px rgba(255, 112, 112, .06);
}

.securityScoreHero .scoreLabel {
  display: block;
  color: rgba(225, 238, 255, .56);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 800;
}

.securityScoreHero strong {
  display: block;
  color: #edf5ff;
  font-size: 34px;
  line-height: 1.1;
  margin-top: 4px;
}

.securityScoreHero small {
  display: block;
  color: rgba(225, 238, 255, .62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-top: 8px;
}

.scoreFacts {
  display: grid;
  gap: 6px;
  min-width: 130px;
}

.scoreFacts span {
  color: rgba(225, 238, 255, .68);
  font-size: 13px;
}

.scoreFacts b {
  color: #edf5ff;
}

.onboardingStatsGrid,
.sessionDetailsStats {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  gap: 10px;
}

.onboardingStatsGrid > div,
.sessionDetailsStats > div {
  padding: 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(130, 170, 255, .12);
}

.onboardingStatsGrid strong,
.sessionDetailsStats strong {
  display: block;
  color: #edf5ff;
  font-size: 20px;
}

.onboardingStatsGrid small,
.sessionDetailsStats small {
  display: block;
  color: rgba(225, 238, 255, .52);
  font-size: 11px;
}

.settingsSessionDetailsBox {
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(8, 16, 30, .58);
  border: 1px solid rgba(130, 170, 255, .14);
}

.settingsSessionDetailsBox h4 {
  margin: 0 0 10px;
  color: #edf5ff;
}

.settingsSessionList {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.settingsSessionItem {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(130, 170, 255, .12);
}

.settingsSessionItem.current {
  border-color: rgba(143, 255, 210, .26);
}

.settingsSessionItem strong {
  color: #edf5ff;
}

.settingsSessionItem small {
  color: rgba(225, 238, 255, .54);
  overflow-wrap: anywhere;
}

.userSecurityRow.security-secure {
  background: linear-gradient(90deg, rgba(18, 90, 62, .22), rgba(8, 16, 30, .5));
}

.userSecurityRow.security-pending {
  background: linear-gradient(90deg, rgba(130, 90, 18, .24), rgba(8, 16, 30, .5));
}

.userSecurityRow.security-warn {
  background: linear-gradient(90deg, rgba(126, 91, 26, .22), rgba(8, 16, 30, .5));
}

.userSecurityRow.security-bad,
.userSecurityRow.security-disabled {
  background: linear-gradient(90deg, rgba(120, 28, 35, .24), rgba(8, 16, 30, .5));
}

@media (max-width: 1100px) {
  .securityScoreHero,
  .onboardingStatsGrid,
  .sessionDetailsStats {
    grid-template-columns: 1fr;
  }
}




/* Desktop-mobile / tablet / browser desktop mode on phones */
@media (max-width: 1400px) {
  body.is-security-operations-page .sidebar {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: auto !important;
  }

  body.is-security-operations-page .main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    overflow-x: hidden !important;
  }

  body.is-security-operations-page .layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Content clamp only, no sidebar magic beyond the Settings-like breakpoint above */
body.is-security-operations-page #page-security-operations,
body.is-security-operations-page #securityOperationsContent,
body.is-security-operations-page .systemEscalated,
body.is-security-operations-page .systemWideGrid,
body.is-security-operations-page .systemPanel,
body.is-security-operations-page .systemRow {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.is-security-operations-page .systemCards4 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}

body.is-security-operations-page .systemWideGrid,
body.is-security-operations-page .systemRow {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.is-security-operations-page .systemRow,
body.is-security-operations-page .systemRow > div,
body.is-security-operations-page .systemRow b,
body.is-security-operations-page .systemRow small,
body.is-security-operations-page code,
body.is-security-operations-page pre {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}


/* REAL UNIFIED PANEL LAYOUT
   Sidebar and content are now in one actual wrapper. Amazing what HTML can do when it exists. */
:root {
  --panel-sidebar-width: clamp(150px, 18vw, 260px);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.layout {
  display: grid !important;
  grid-template-columns: var(--panel-sidebar-width) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

.sidebar {
  position: sticky !important;
  top: 0 !important;
  width: var(--panel-sidebar-width) !important;
  min-width: 0 !important;
  max-width: var(--panel-sidebar-width) !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.main {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.page,
.panel,
[id$="Content"] {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.nav button {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 900px) {
  .layout {
    display: block !important;
  }

  .sidebar {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .main {
    width: 100% !important;
    padding: 10px !important;
  }
}






/* SECURITY OPERATIONS TRUE ONE COLUMN FIX */
body.is-security-operations-page #page-security-operations,
body.is-security-operations-page #page-security-operations > .panel,
body.is-security-operations-page #securityOperationsContent,
body.is-security-operations-page .secOpsView {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body.is-security-operations-page .secOpsOneColumn,
body.is-security-operations-page .secOpsCards,
body.is-security-operations-page .secOpsChecks,
body.is-security-operations-page .secOpsGrid {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body.is-security-operations-page .secOpsInfoCard,
body.is-security-operations-page .secOpsCheckItem,
body.is-security-operations-page .secOpsBox {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 12px 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body.is-security-operations-page .secOpsRow {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body.is-security-operations-page .secOpsRow *,
body.is-security-operations-page .secOpsInfoCard *,
body.is-security-operations-page .secOpsCheckItem *,
body.is-security-operations-page .secOpsBox *,
body.is-security-operations-page .secOpsRawBox {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body.is-security-operations-page .secOpsRawBox {
  overflow-x: auto !important;
}

/* SECURITY OPERATIONS TOUCH DESKTOP MODE FIX */
@media (hover: none) and (pointer: coarse) and (min-width: 901px) {
  body.is-security-operations-page .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    overflow-x: hidden !important;
  }

  body.is-security-operations-page #page-security-operations,
  body.is-security-operations-page #page-security-operations > .panel,
  body.is-security-operations-page #securityOperationsContent,
  body.is-security-operations-page .secOpsView {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.is-security-operations-page .secOpsCards,
  body.is-security-operations-page .secOpsChecks,
  body.is-security-operations-page .secOpsGrid,
  body.is-security-operations-page .secOpsRow {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.is-security-operations-page .secOpsInfoCard,
  body.is-security-operations-page .secOpsCheckItem,
  body.is-security-operations-page .secOpsBox {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
    overflow-x: hidden !important;
  }

  body.is-security-operations-page .settingsCardHeader {
    display: block !important;
  }

  body.is-security-operations-page .settingsCardHeader button {
    margin-top: 10px !important;
    width: 100% !important;
  }
}

/* SECURITY OPS REAL TOUCH-DESKTOP FIX */
body.is-touch-desktop-security-page .secOpsCards,
body.is-touch-desktop-security-page .secOpsChecks,
body.is-touch-desktop-security-page .secOpsGrid,
body.is-touch-desktop-security-page .secOpsRow {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.is-touch-desktop-security-page .secOpsInfoCard,
body.is-touch-desktop-security-page .secOpsCheckItem,
body.is-touch-desktop-security-page .secOpsBox {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 12px !important;
  overflow-x: hidden !important;
}

body.is-touch-desktop-security-page .settingsCardHeader {
  display: block !important;
}

body.is-touch-desktop-security-page .settingsCardHeader button {
  width: 100% !important;
  margin-top: 10px !important;
}

/* SECURITY OPS TOUCH-DESKTOP POSITION FIX */
body.is-touch-desktop-security-page .layout {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body.is-touch-desktop-security-page .sidebar {
  grid-column: 1 !important;
  position: sticky !important;
  left: 0 !important;
  top: 0 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100vh !important;
}

body.is-touch-desktop-security-page .main {
  grid-column: 2 !important;
  margin-left: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px !important;
  overflow-x: hidden !important;
}

body.is-touch-desktop-security-page #page-security-operations,
body.is-touch-desktop-security-page #page-security-operations > .panel,
body.is-touch-desktop-security-page #securityOperationsContent,
body.is-touch-desktop-security-page .secOpsView {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* GLOBAL TOUCH-DESKTOP PANEL LAYOUT */
body.is-touch-desktop-panel .layout {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body.is-touch-desktop-panel .sidebar {
  grid-column: 1 !important;
  position: sticky !important;
  left: 0 !important;
  top: 0 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.is-touch-desktop-panel .main {
  grid-column: 2 !important;
  margin-left: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px !important;
  overflow-x: hidden !important;
}

body.is-touch-desktop-panel .page,
body.is-touch-desktop-panel .panel,
body.is-touch-desktop-panel [id$="Content"] {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ROLE MANAGER PHASE 4G */
.roleManagerCard {
  margin-top: 16px;
}

.roleManagerLayout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 16px;
  align-items: start;
}

.roleManagerSidebar {
  display: grid;
  gap: 12px;
}

.roleCreateBox,
.roleListBox,
.roleManagerDetail,
.rolePreviewBox,
.rolePermissionEditor {
  border: 1px solid rgba(130, 170, 255, .14);
  background: rgba(8, 16, 30, .52);
  border-radius: 18px;
  padding: 14px;
}

.roleCreateBox h4 {
  margin: 0 0 10px;
}

.roleCreateBox input,
.roleCreateBox select,
.roleEditorGrid input {
  width: 100%;
  margin-bottom: 8px;
}

.roleListBox {
  display: grid;
  gap: 8px;
}

.roleListItem {
  text-align: left;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(130, 170, 255, .16);
  background: rgba(0, 0, 0, .20);
}

.roleListItem.active {
  border-color: rgba(143, 255, 210, .40);
  box-shadow: 0 0 18px rgba(143, 255, 210, .06);
}

.roleListItem strong,
.roleListItem small {
  display: block;
}

.roleListItem small {
  color: rgba(225, 238, 255, .55);
  margin-top: 4px;
}

.roleDetailHeader {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  margin-bottom: 14px;
}

.roleDetailHeader h4 {
  margin: 0;
  font-size: 22px;
}

.roleDetailHeader p {
  margin: 6px 0;
  color: rgba(225, 238, 255, .62);
}

.roleDetailStats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.roleDetailStats span {
  min-width: 80px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(130, 170, 255, .12);
}

.roleDetailStats strong,
.roleDetailStats small {
  display: block;
}

.roleDetailStats small {
  color: rgba(225, 238, 255, .55);
}

.roleEditorGrid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-bottom: 12px;
}

.roleEditorGrid label span {
  display: block;
  color: rgba(225, 238, 255, .62);
  font-size: 12px;
  margin-bottom: 4px;
}

.rolePreviewGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

.rolePreviewGrid h5 {
  margin: 0 0 8px;
}

.rolePreviewGrid span {
  display: block;
  padding: 7px 8px;
  border-radius: 10px;
  margin-bottom: 5px;
  background: rgba(0, 0, 0, .18);
}

.rolePreviewGrid span.ok {
  border-left: 3px solid rgba(143, 255, 210, .72);
}

.rolePreviewGrid span.off {
  opacity: .48;
  border-left: 3px solid rgba(255, 112, 112, .44);
}

.rolePreviewGrid small,
.roleCheckGrid small {
  display: block;
  color: rgba(225, 238, 255, .48);
}

.rolePermissionEditor {
  margin-top: 12px;
}

.rolePermissionEditor summary {
  cursor: pointer;
  font-weight: 800;
}

.roleCheckGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.roleCheckGrid label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .18);
}

.roleManagerActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .roleManagerLayout,
  .roleDetailHeader,
  .roleEditorGrid,
  .rolePreviewGrid,
  .roleCheckGrid {
    grid-template-columns: 1fr;
  }
}

/* SETTINGS MODULE ROUTER */
.settingsModuleShell {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settingsModuleShell .settingsSubnav4I {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 0 12px 0;
  border: 0;
}

.settingsModuleShell .settingsSubnav4I button {
  width: auto;
}

#settingsModuleContent {
  min-width: 0;
}

#settingsModuleContent .settingsCard {
  margin-top: 14px;
}

/* SETTINGS MODULE ROUTER CLEAN FINAL */
.settingsModuleShell {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settingsModuleShell .settingsSubnav4I {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 0 12px 0;
  border: 0;
}

.settingsModuleShell .settingsSubnav4I button {
  width: auto;
}

.settingsModuleShell .settingsSubnav4I button.active {
  color: #edf5ff;
  border-color: rgba(143, 255, 210, .42);
  background: rgba(143, 255, 210, .08);
}

#settingsModuleContent {
  min-width: 0;
}

#settingsModuleContent .settingsCard {
  margin-top: 14px;
}

#page-settings.page {
  display: none;
}

#page-settings.page.active {
  display: block;
}

/* SETTINGS MODULE POLISH */
.settingsModuleTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.settingsModuleTop button {
  white-space: nowrap;
}

.settingsModuleCard {
  overflow: hidden;
}

.settingsModuleShell .settingsSubnav4I {
  overflow-x: auto;
  scrollbar-width: thin;
}

.settingsModuleShell .settingsSubnav4I button {
  min-height: 34px;
  border-radius: 10px;
  padding: 7px 10px;
  background: rgba(12, 19, 32, .72);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(235,245,255,.86);
}

.settingsModuleShell .settingsSubnav4I button.active {
  background: rgba(39, 96, 255, .22);
  border-color: rgba(97, 170, 255, .55);
}

.settingsPermTable,
.settingsActionTable {
  overflow-x: auto;
  min-width: 0;
}

.settingsPermRow {
  min-width: 720px;
}

.settingsAuditList {
  max-height: 70vh;
  overflow: auto;
  padding-right: 4px;
}

.settingsAuditRow .auditIp {
  font-size: .84em;
  opacity: .78;
  text-align: right;
}

.securityScoreBox {
  display: grid;
  gap: 10px;
}

.securityScoreBox > strong {
  font-size: 32px;
  letter-spacing: .02em;
}

.securityScoreBar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}

.securityScoreBar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(71,220,134,.75), rgba(85,170,255,.75));
}

.securityScoreStats,
.settingsInfoList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.securityScoreStats span,
.settingsInfoList > div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(5, 12, 22, .45);
  border: 1px solid rgba(255,255,255,.08);
}

.settingsInfoList span {
  display: block;
  opacity: .68;
  font-size: .85em;
}

@media (max-width: 720px) {
  .settingsModuleTop {
    display: grid;
  }

  .settingsModuleTop button {
    width: 100%;
  }

  .settingsModuleShell .settingsSubnav4I {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .settingsModuleShell .settingsSubnav4I button {
    width: 100%;
  }

  .settingsAuditRow {
    grid-template-columns: 1fr;
  }

  .settingsAuditRow .auditIp {
    text-align: left;
  }
}

/* SETTINGS MODULE FIXES FINAL */
.settingsModuleShell {
  min-width: 0;
}

#settingsModuleContent {
  min-width: 0;
  overflow: visible;
}

#settingsModuleContent > .settingsCard,
#settingsModuleContent .settingsCard {
  min-width: 0;
}

.inviteCopyBox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 10px;
  min-width: 0;
}

.inviteCopyBox input {
  min-width: 0;
}

.securityScoreBox {
  display: grid;
  gap: 14px;
}

.securityScoreMain {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.securityScoreMain strong {
  font-size: 34px;
  line-height: 1;
}

.securityScoreBar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.securityScoreBar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(59,130,246,.9), rgba(34,197,94,.9));
}

.securityScoreStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.securityScoreStats span,
.securityScoreFindings div {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

.securityScoreFindings {
  display: grid;
  gap: 8px;
}

.securityScoreFindings .bad {
  color: #ffb4b4;
}

.securityScoreFindings .warn {
  color: #ffd98a;
}

@media (max-width: 760px) {
  .settingsModuleShell .settingsSubnav4I {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settingsModuleShell .settingsSubnav4I button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .settingsPermTable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .settingsPermRow {
    min-width: 720px;
  }

  .roleManagerLayout {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  .rolePreviewGrid {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  .inviteCopyBox {
    grid-template-columns: 1fr;
  }

  .securityScoreMain {
    display: grid;
    gap: 4px;
  }

  .securityScoreMain strong {
    font-size: 28px;
  }
}

/* SETTINGS USERS CLEANUP + SECURITY FINDINGS */
.settingsModuleNotice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  margin: 14px 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  min-width: 0;
}

.settingsModuleNotice small {
  display: block;
  margin-top: 4px;
  opacity: .72;
}

.settingsUsersCleanTable .settingsUserRowClean {
  align-items: start;
}

.settingsUserStateStack {
  display: grid;
  gap: 6px;
}

.settingsUserStateStack small {
  opacity: .7;
}

.settingsSecurityFindingsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.settingsSecurityFindingsGrid > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.settingsSecurityFindingsGrid strong {
  font-size: 24px;
  line-height: 1;
}

.settingsSecurityFindingsGrid .ok {
  border-color: rgba(34,197,94,.25);
}

.settingsSecurityFindingsGrid .warn {
  border-color: rgba(251,191,36,.28);
}

.settingsSecurityFindingsGrid .bad {
  border-color: rgba(248,113,113,.32);
}

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

  .settingsUsersCleanTable .settingsRow {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .settingsUsersCleanTable .settingsHead {
    display: none;
  }

  .settingsUsersCleanTable select,
  .settingsUsersCleanTable button {
    width: 100%;
  }
}

/* SETTINGS USERS ADMIN VIEW */
.settingsUserAdminGrid {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settingsUserAdminCard {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  min-width: 0;
}

.settingsUserAdminHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.settingsUserAdminHeader h4 {
  margin: 0 0 4px 0;
  font-size: 18px;
}

.settingsUserRoleBadge {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.28);
  font-size: 12px;
  white-space: nowrap;
}

.settingsUserAdminFields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  min-width: 0;
}

.settingsUserAdminFields > div,
.settingsUserAdminFields > label {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  min-width: 0;
}

.settingsUserAdminFields span {
  opacity: .65;
  font-size: 12px;
}

.settingsUserAdminFields strong {
  overflow-wrap: anywhere;
}

.settingsIpMapButton {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  color: inherit;
  font-size: 12px;
}

.settingsUserAdminActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 760px) {
  .settingsUserAdminHeader {
    display: grid;
  }

  .settingsUserAdminActions button {
    width: 100%;
  }
}

/* SETTINGS USER IP INTEL */
.settingsUserIpIntelCard {
  grid-column: span 2;
}

.settingsUserIpIntelMini {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  min-width: 0;
}

.settingsUserIpFacts {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

.settingsUserIpFacts span {
  font-weight: 800;
}

.settingsUserIpFacts small {
  opacity: .72;
}

.settingsUserMiniMap {
  width: 100%;
  height: 180px;
  min-height: 180px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #071426;
}

@media (max-width: 760px) {
  .settingsUserIpIntelCard {
    grid-column: auto;
  }

  .settingsUserMiniMap {
    height: 160px;
    min-height: 160px;
  }
}

/* SETTINGS USER IP GEO MAP */
.settingsUserIpIntelMini {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.settingsIpGeoMap {
  width: 100%;
  height: 180px;
  min-height: 180px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: #071426;
}

.settingsIpGeoMeta,
.settingsIpGeoLoading,
.settingsIpGeoMuted {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  font-size: 12px;
}

.settingsIpGeoMeta small {
  display: block;
  opacity: .72;
  margin-top: 3px;
}

/* SETTINGS INLINE IP GEO MAP */
.settingsUserLastIpBox {
  grid-column: span 2;
}

.settingsIpGeoMini {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}

.settingsIpGeoIframe {
  width: 100%;
  height: 190px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #071426;
}

.settingsIpGeoText,
.settingsIpGeoMuted {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  font-size: 12px;
}

.settingsIpGeoText small {
  display: block;
  opacity: .72;
  margin-top: 3px;
}

@media (max-width: 760px) {
  .settingsUserLastIpBox {
    grid-column: span 1;
  }

  .settingsIpGeoIframe {
    height: 160px;
  }
}

/* GEO CACHE + USER IP INTELLIGENCE */
.geoCacheGrid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.geoCacheRow {
  display: grid;
  grid-template-columns: 1.1fr 1fr .6fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  min-width: 0;
}

.geoCacheRow small,
.geoCacheRow span {
  display: block;
  opacity: .75;
}

.settingsIpMapLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.settingsIpMapLinks a,
.settingsIpMapButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,.32);
  background: rgba(59,130,246,.12);
  color: #dbeafe;
  text-decoration: none;
  font-size: 12px;
}

.settingsIpIntelBox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.settingsIpIntelBox > div {
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.settingsIpIntelBox span {
  display: block;
  opacity: .68;
  font-size: 11px;
}

.settingsIpIntelBox strong {
  display: block;
  margin-top: 3px;
}

.settingsIpIntelBox.ok > div {
  border-color: rgba(34,197,94,.24);
}

.settingsIpIntelBox.warn > div {
  border-color: rgba(251,191,36,.32);
}

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

/* REAL SETTINGS 2FA PAGE */
.twofaStatusGrid,
.twofaSetupGrid {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.twofaSetupGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.twofaStatusCard.ok {
  border-color: rgba(34,197,94,.28);
}

.twofaStatusCard.warn {
  border-color: rgba(251,191,36,.28);
}

.twofaMiniStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.twofaMiniStats > div,
.twofaSecretBox,
.twofaVerifyBox {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.twofaMiniStats span,
.twofaSecretBox span {
  display: block;
  opacity: .68;
  font-size: 12px;
}

.twofaMiniStats strong,
.twofaSecretBox strong {
  display: block;
  margin-top: 4px;
  word-break: break-all;
}

.twofaQrLayout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.twofaQrImage {
  padding: 12px;
  border-radius: 18px;
  background: #fff;
}

.twofaQrImage img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

.twofaSecretBox {
  display: grid;
  gap: 10px;
}

.twofaVerifyBox {
  display: grid;
  gap: 10px;
}

.twofaVerifyBox input {
  font-size: 22px;
  letter-spacing: .18em;
  text-align: center;
}

.twofaRecoveryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.twofaRecoveryGrid code {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.24);
  color: #dbeafe;
  text-align: center;
}

.dangerZone {
  border-color: rgba(248,113,113,.22) !important;
}

@media (max-width: 860px) {
  .twofaSetupGrid,
  .twofaQrLayout {
    grid-template-columns: 1fr;
  }

  .twofaQrImage img {
    width: 220px;
    margin: 0 auto;
  }
}

/* 2FA UI CLEANUP */
.twofaQrBox button,
.twofaVerifyBox button,
.twofaSecretBox button,
#twofaRecoveryCodes button {
  min-height: 38px;
  border-radius: 10px;
  font-weight: 700;
}

.twofaVerifyBox {
  align-items: stretch;
}

.twofaSecretBox button {
  width: fit-content;
  min-width: 96px;
}

.twofaQrBox > button {
  width: 100%;
  max-width: 260px;
}

#twofaRecoveryCodes .settingsActions {
  margin-top: 10px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .twofaQrBox > button,
  .twofaSecretBox button,
  .twofaVerifyBox button,
  #twofaRecoveryCodes button {
    width: 100%;
  }
}

/* 2FA BUTTON UNIFIED PANEL STYLE */
#settingsModuleContent .twofaQrBox button,
#settingsModuleContent .twofaVerifyBox button,
#settingsModuleContent .twofaSecretBox button,
#settingsModuleContent #twofaRecoveryCodes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(96,165,250,.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(56,189,248,.75));
  color: #eef6ff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(37,99,235,.22);
  cursor: pointer;
  text-decoration: none;
}

#settingsModuleContent .twofaQrBox button:hover,
#settingsModuleContent .twofaVerifyBox button:hover,
#settingsModuleContent .twofaSecretBox button:hover,
#settingsModuleContent #twofaRecoveryCodes button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

#settingsModuleContent .twofaQrBox button:active,
#settingsModuleContent .twofaVerifyBox button:active,
#settingsModuleContent .twofaSecretBox button:active,
#settingsModuleContent #twofaRecoveryCodes button:active {
  transform: translateY(0);
}

#settingsModuleContent .twofaSecretBox button,
#settingsModuleContent #twofaRecoveryCodes button {
  min-width: 130px;
}

#settingsModuleContent .twofaVerifyBox button {
  width: 100%;
}

#settingsModuleContent .twofaVerifyBox input,
#settingsModuleContent .twofaSecretBox {
  border-radius: 12px;
}

#settingsModuleContent .dangerButton {
  background: linear-gradient(135deg, rgba(185,28,28,.95), rgba(239,68,68,.85)) !important;
  border-color: rgba(248,113,113,.35) !important;
  box-shadow: 0 10px 24px rgba(185,28,28,.22) !important;
}

@media (max-width: 860px) {
  #settingsModuleContent .twofaQrBox button,
  #settingsModuleContent .twofaVerifyBox button,
  #settingsModuleContent .twofaSecretBox button,
  #settingsModuleContent #twofaRecoveryCodes button {
    width: 100%;
  }
}

/* USERS TAB BUTTONS SAME AS 2FA */
#settingsModuleContent .settingsUserAdminActions button,
#settingsModuleContent .settingsModuleNotice button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(96,165,250,.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(56,189,248,.75));
  color: #eef6ff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(37,99,235,.22);
  cursor: pointer;
  text-decoration: none;
}

#settingsModuleContent .settingsUserAdminActions button:hover,
#settingsModuleContent .settingsModuleNotice button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

#settingsModuleContent .settingsUserAdminActions button:active,
#settingsModuleContent .settingsModuleNotice button:active {
  transform: translateY(0);
}

#settingsModuleContent .settingsUserAdminActions .dangerButton {
  background: linear-gradient(135deg, rgba(185,28,28,.95), rgba(239,68,68,.85)) !important;
  border-color: rgba(248,113,113,.35) !important;
  box-shadow: 0 10px 24px rgba(185,28,28,.22) !important;
}

#settingsModuleContent .settingsUserAdminActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 760px) {
  #settingsModuleContent .settingsUserAdminActions button,
  #settingsModuleContent .settingsModuleNotice button {
    width: 100%;
  }
}

/* SETTINGS ROLE PREVIEW */
.rolePreviewToolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .35fr) auto;
  gap: 12px;
  align-items: end;
}

.rolePreviewToolbar label {
  display: grid;
  gap: 6px;
}

.rolePreviewLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 14px;
  min-width: 0;
}

.rolePreviewFakeTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.rolePreviewFakeTop span {
  opacity: .7;
}

.rolePreviewFakePanel {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 420px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}

.rolePreviewLayout.tablet .rolePreviewFakePanel {
  grid-template-columns: 170px minmax(0, 1fr);
}

.rolePreviewLayout.mobile .rolePreviewFakePanel {
  grid-template-columns: 1fr;
}

.rolePreviewLayout.mobile .rolePreviewFakeNav {
  max-height: 220px;
  overflow: auto;
}

.rolePreviewFakeNav {
  padding: 14px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(9,17,31,.78);
}

.rolePreviewLogo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(250,204,21,.8), rgba(59,130,246,.6));
  font-weight: 800;
}

.rolePreviewNavGroup {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.rolePreviewNavGroup small {
  opacity: .55;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
}

.rolePreviewNavItem {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.055);
}

.rolePreviewNavItem em {
  opacity: .55;
  font-size: 11px;
  font-style: normal;
}

.rolePreviewFakeMain {
  padding: 18px;
  min-width: 0;
}

.rolePreviewCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.rolePreviewCards > div,
.roleImpactGrid > div {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.rolePreviewCards small,
.roleImpactGrid span {
  display: block;
  margin-top: 4px;
  opacity: .68;
}

.roleImpactGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.roleImpactGrid strong {
  display: block;
  font-size: 26px;
}

.roleImpactGrid .ok,
.rolePreviewPillGrid .ok {
  border-color: rgba(34,197,94,.28);
  color: #bbf7d0;
}

.roleImpactGrid .bad,
.rolePreviewPillGrid .bad {
  border-color: rgba(248,113,113,.28);
  color: #fecaca;
}

.rolePreviewDetails {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}

.rolePreviewPillGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.rolePreviewPillGrid span {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.settingsRolePreviewBanner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 99999;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,.35);
  background: rgba(15,23,42,.96);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.settingsRolePreviewBanner button {
  padding: 6px 10px;
}

@media (max-width: 900px) {
  .rolePreviewToolbar,
  .rolePreviewLayout {
    grid-template-columns: 1fr;
  }

  .rolePreviewFakePanel {
    grid-template-columns: 160px minmax(0, 1fr);
  }
}

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

  .rolePreviewFakeNav {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .settingsRolePreviewBanner {
    left: 12px;
    right: 12px;
    transform: none;
    justify-content: space-between;
    border-radius: 16px;
  }
}

/* ROLE PREVIEW PERSISTENCE */
.settingsRolePreviewBanner.shake {
  animation: rolePreviewShake .42s ease;
}

@keyframes rolePreviewShake {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  25% { transform: translateX(calc(-50% - 6px)) translateY(0); }
  50% { transform: translateX(calc(-50% + 6px)) translateY(0); }
  75% { transform: translateX(calc(-50% - 3px)) translateY(0); }
}

.rolePreviewHiddenNavItem {
  display: none !important;
}

/* ROLE PREVIEW SAFE MODE */
.rolePreviewHiddenNavItem {
  display: none !important;
}

.settingsRolePreviewBanner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 99999;
  transform: translateX(-50%);
}

/* ROLE PREVIEW ACTION GUARD */
.settingsRolePreviewActive .rolePreviewHiddenNavItem {
  display: none !important;
}

.settingsRolePreviewBanner.shake {
  animation: rolePreviewShake .42s ease;
}

/* ROLE PREVIEW BLOCKED LINKS */
.settingsRolePreviewActive .rolePreviewBlockedLink {
  opacity: .38 !important;
  filter: grayscale(.7);
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

/* PERMISSIONS / PREVIEW BRIDGE */
.settingsTinyPreviewBtn {
  min-height: 28px !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  margin-left: 6px;
}

.settingsPermPreviewHint {
  padding: 12px;
  border: 1px solid rgba(96,165,250,.25);
  border-radius: 14px;
  background: rgba(59,130,246,.08);
}

/* RBAC DISCOVERY BUTTON FINAL */
.settingsRbacDiscoveryBar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid rgba(96,165,250,.26);
  border-radius: 14px;
  background: rgba(59,130,246,.08);
}

.settingsRbacDiscoveryBar small {
  display: block;
  margin-top: 4px;
  opacity: .72;
}

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

  .settingsRbacDiscoveryBar button {
    width: 100%;
  }
}

/* RBAC HEALTH */
.rbacHealthGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.rbacHealthGrid > div,
.rbacHealthRow,
.rbacHealthRoute {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.rbacHealthGrid strong {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.rbacHealthGrid span,
.rbacHealthRow span,
.rbacHealthRoute small,
.rbacDiscoveryPills small {
  display: block;
  margin-top: 4px;
  opacity: .68;
}

.rbacHealthRows {
  display: grid;
  gap: 10px;
}

.rbacHealthRow,
.rbacHealthRoute {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(120px, .5fr));
  gap: 10px;
  align-items: center;
}

.rbacHealthRoute {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr);
}

.rbacHealthRoute > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rbacHealthRoute > div:last-child span {
  display: inline-flex;
  margin: 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
}

.rbacHealthGrid .ok,
.rbacHealthRow.ok,
.rbacHealthRoute.ok {
  border-color: rgba(34,197,94,.24);
}

.rbacHealthGrid .warn,
.rbacHealthRow.warn,
.rbacHealthRoute.warn {
  border-color: rgba(251,191,36,.34);
}

.rbacDiscoveryPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rbacDiscoveryPills > span {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

@media (max-width: 760px) {
  .rbacHealthRow,
  .rbacHealthRoute {
    grid-template-columns: 1fr;
  }
}

/* RBAC EXPLORER + HEALTH DASHBOARD */
.rbacExplorerTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.rbacExplorerTabs button.active {
  border-color: rgba(96,165,250,.55);
  background: rgba(59,130,246,.24);
}

.rbacHealthHero.ok {
  border-color: rgba(34,197,94,.28);
}

.rbacHealthHero.warn {
  border-color: rgba(251,191,36,.34);
}

.rbacHealthHero.critical {
  border-color: rgba(248,113,113,.38);
}

.rbacExplorerStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.rbacExplorerStats > div,
.rbacExplorerRole,
.rbacExplorerRoute,
.rbacSimulatorResult {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.rbacExplorerStats strong {
  display: block;
  font-size: 26px;
  line-height: 1;
}

.rbacExplorerStats span,
.rbacExplorerRole span,
.rbacExplorerRoute small,
.rbacExplorerPills small,
.rbacSimulatorResult small {
  display: block;
  margin-top: 4px;
  opacity: .68;
}

.rbacExplorerRows {
  display: grid;
  gap: 10px;
}

.rbacExplorerRoute {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  gap: 10px;
  align-items: center;
}

.rbacExplorerRoute > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rbacExplorerRoute > div:last-child span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  font-size: 12px;
}

.rbacExplorerRole {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(110px, .5fr));
  gap: 10px;
  align-items: center;
}

.rbacExplorerPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rbacExplorerPills > span {
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.rbacExplorerPills strong {
  display: block;
}

.rbacExplorerRoute.ok,
.rbacExplorerStats .ok,
.rbacSimulatorResult.ok {
  border-color: rgba(34,197,94,.24);
}

.rbacExplorerRoute.warn,
.rbacExplorerStats .warn {
  border-color: rgba(251,191,36,.34);
}

.rbacExplorerRoute.custom {
  border-color: rgba(96,165,250,.32);
}

.rbacExplorerRoute.critical,
.rbacExplorerStats .critical,
.rbacSimulatorResult.critical {
  border-color: rgba(248,113,113,.42);
  background: rgba(127,29,29,.16);
}

.rbacSimulatorGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.rbacSimulatorGrid label {
  display: grid;
  gap: 6px;
}

.rbacSimulatorResult {
  margin-top: 12px;
}

@media (max-width: 860px) {
  .rbacExplorerRoute,
  .rbacExplorerRole,
  .rbacSimulatorGrid {
    grid-template-columns: 1fr;
  }
}

/* SETTINGS SUBMODULE RBAC */
.settingsSubmoduleDenied {
  display: none !important;
}

/* RBAC NAVIGATION HIDE */
.navRbacHidden {
  display: none !important;
}

/* 2FA ENROLLMENT MODE */
.twofaEnrollmentBanner {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid rgba(251,191,36,.32);
  background: rgba(251,191,36,.12);
  color: #fde68a;
  font-weight: 700;
}

.settingsUser2faBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.settingsUser2faBadge.ok {
  border-color: rgba(34,197,94,.28);
  color: #bbf7d0;
}

.settingsUser2faBadge.warn {
  border-color: rgba(251,191,36,.34);
  color: #fde68a;
}

.settingsUser2faBadge.off {
  opacity: .72;
}

/* Archive Center */
#archivePageContent {
  display: grid;
  gap: 18px;
}

.archiveHero,
.archiveCard {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8, 14, 28, .72);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}

.archiveHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.archiveHero h3,
.archiveCard h3 {
  margin: 0 0 8px;
}

.archiveHero p,
.archiveMuted {
  margin: 0;
  opacity: .72;
}

.archiveHeroBadges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.archiveCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}

.archiveBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: 10px;
}

.archiveBadge.ok {
  background: rgba(42, 209, 139, .16);
  color: #5ef0b2;
  border: 1px solid rgba(42, 209, 139, .35);
}

.archiveBadge.bad {
  background: rgba(255, 82, 82, .14);
  color: #ff8f8f;
  border: 1px solid rgba(255, 82, 82, .35);
}

.archiveGrid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 13px;
}

.archiveGrid span {
  opacity: .68;
}

.archiveGrid strong {
  text-align: right;
}

.archivePath {
  margin-top: 12px;
  font-size: 11px;
  opacity: .55;
  word-break: break-all;
}

.archiveActions {
  display: flex;
  justify-content: flex-end;
}

.archiveLoading,
.archiveError {
  padding: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}

.archiveError {
  border: 1px solid rgba(255, 82, 82, .35);
  color: #ff9b9b;
}

@media (max-width: 1100px) {
  .archiveCards {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 700px) {
  .archiveHero {
    align-items: flex-start;
    flex-direction: column;
  }

  .archiveCards {
    grid-template-columns: 1fr;
  }
}

.archiveWideCard {
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(12, 20, 38, .84), rgba(6, 10, 20, .78));
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

.archiveSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.archiveSectionHeader h3 {
  margin: 0;
}

.archiveSectionHeader p {
  margin: 4px 0 0;
  opacity: .68;
}

.archiveTable {
  display: grid;
  gap: 7px;
}

.archiveTableHead,
.archiveTableRow {
  display: grid;
  grid-template-columns: 120px minmax(220px, 1fr) 100px 100px;
  gap: 10px;
  align-items: center;
}

.archiveTableHead {
  font-size: 11px;
  text-transform: uppercase;
  opacity: .58;
  padding: 0 12px;
}

.archiveTableRow {
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 12px;
}

.archiveTableRow span:nth-child(2) {
  word-break: break-all;
  font-weight: 700;
}

.archiveEmpty {
  padding: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  opacity: .7;
}

@media (max-width: 800px) {
  .archiveTableHead {
    display: none;
  }

  .archiveTableRow {
    grid-template-columns: 1fr;
  }

  .archiveSectionHeader {
    align-items: flex-start;
    flex-direction: column;
  }
}

.archiveHeroPremium {
  position: relative;
  overflow: hidden;
}

.archiveHeroPremium:before {
  content: "";
  position: absolute;
  inset: -80px -120px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(76, 126, 255, .20), transparent 62%);
  pointer-events: none;
}

.archiveSummaryStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.archiveSummaryStrip > div {
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border-radius: 14px;
  padding: 13px 14px;
}

.archiveSummaryStrip span,
.archiveSummaryStrip small {
  display: block;
  opacity: .62;
  font-size: 11px;
}

.archiveSummaryStrip strong {
  display: block;
  margin: 5px 0;
  font-size: 13px;
}

.archiveCardTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.archivePm2Idle {
  border-color: rgba(245, 158, 11, .22);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .05);
}

.archivePm2Run {
  border-color: rgba(34, 197, 94, .28);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .06);
}

.archiveBadge.pm2Idle {
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, .32);
}

.archiveBadge.pm2Run,
.archiveBadge.restoreReady {
  background: rgba(34, 197, 94, .16);
  color: #86efac;
  border-color: rgba(34, 197, 94, .32);
}

.archiveBadge.restoreWarn {
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, .32);
}

.archiveRestoreCard {
  margin: 14px 0;
}

.archiveRestoreGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.archiveRestoreItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.archiveRestoreItem span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-weight: 900;
}

.archiveRestoreItem.ok span {
  background: rgba(34, 197, 94, .18);
  color: #86efac;
}

.archiveRestoreItem.bad span {
  background: rgba(239, 68, 68, .18);
  color: #fca5a5;
}

.archiveFilterBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.archiveFilterBtn {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.78);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  cursor: pointer;
}

.archiveFilterBtn.active {
  background: rgba(59, 130, 246, .24);
  border-color: rgba(96, 165, 250, .44);
  color: #dbeafe;
}

.archiveFilterBtn b {
  margin-left: 5px;
  opacity: .8;
}

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

  .archiveRestoreGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .archiveSummaryStrip,
  .archiveRestoreGrid {
    grid-template-columns: 1fr;
  }
}

/* SETTINGS USERS PHASE 2 */
.usersPhase2Editor {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.48);
}

.usersPhase2Grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.usersPhase2Editor label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: rgba(226,232,240,.74);
}

.usersPhase2Editor input,
.usersPhase2Editor select,
.usersPhase2Editor textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.55);
  color: #e5e7eb;
  padding: 8px 10px;
}

.usersPhase2Check {
  flex-direction: row !important;
  align-items: center;
}

.usersPhase2Check input {
  width: auto;
}

.usersPhase2Actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.usersPhase2Actions button {
  padding: 8px 12px;
  border-radius: 10px;
}

.usersPhase2Actions button.danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}

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

/* USERS PHASE2 MODAL CLEANUP */
.usersPhase2Editor {
  display: none !important;
}

.usersPhase2ModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2,6,23,.74);
  backdrop-filter: blur(10px);
}

.usersPhase2Modal {
  width: min(780px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  padding: 18px;
}

.usersPhase2ModalHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.usersPhase2ModalHeader h3 {
  margin: 0;
  font-size: 20px;
}

.usersPhase2ModalHeader p {
  margin: 4px 0 0;
  color: rgba(226,232,240,.62);
}

.usersPhase2ModalClose {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  font-size: 24px;
  line-height: 1;
}

.usersPhase2ModalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.usersPhase2Modal label,
.usersPhase2ModalNotes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: rgba(226,232,240,.74);
}

.usersPhase2Modal input,
.usersPhase2Modal select,
.usersPhase2Modal textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.65);
  color: #e5e7eb;
  padding: 10px 12px;
}

.usersPhase2ModalCheck {
  flex-direction: row !important;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.usersPhase2ModalCheck input {
  width: auto;
}

.usersPhase2ModalNotes {
  margin-top: 12px;
}

.usersPhase2ModalInfo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.usersPhase2ModalInfo div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.usersPhase2ModalInfo span {
  display: block;
  color: rgba(226,232,240,.55);
  font-size: 11px;
  margin-bottom: 4px;
}

.usersPhase2ModalActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.usersPhase2ModalActions button {
  padding: 10px 14px;
  border-radius: 12px;
}

.ghostButton {
  background: rgba(255,255,255,.08) !important;
}

@media (max-width: 760px) {
  .usersPhase2ModalGrid,
  .usersPhase2ModalInfo {
    grid-template-columns: 1fr;
  }

  .usersPhase2Modal {
    max-height: 92vh;
  }
}

/* ================= FILE OVERVIEW MAP MANAGER V1 ================= */
.foHero {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.foHero > div {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 18px;
  padding: 16px;
}

.foHero strong {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  margin: 6px 0;
}

.foKicker,
.foHero small,
.foFolderCard small {
  color: var(--muted);
  font-size: 12px;
}

.foHeroNote {
  color: var(--muted);
  display: flex;
  align-items: center;
}

.foFolders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.foFolderCard {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 12px;
}

.foFolderCard strong,
.foFolderCard span,
.foFolderCard small {
  display: block;
}

.foFolderCard span {
  font-size: 20px;
  margin: 4px 0;
}

.foToolbar {
  display: flex;
  gap: 10px;
  margin: 12px 0 14px;
}

.foToolbar input,
.foToolbar select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 12px;
}

.foLayout {
  display: grid;
  grid-template-columns: minmax(320px, 44%) 1fr;
  gap: 14px;
}

.foList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}

.foMapRow {
  display: grid;
  grid-template-columns: 1fr 150px 90px 120px;
  gap: 10px;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
}

.foMapRow:hover,
.foMapRow.active {
  border-color: rgba(91, 141, 255, .55);
  background: rgba(91, 141, 255, .11);
}

.foMapName {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.foDetails {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 18px;
  padding: 14px;
  min-height: 320px;
}

.foEmpty,
.foLoading,
.foError {
  color: var(--muted);
  padding: 18px;
}

.foError {
  color: #ff9c9c;
}

.foBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  white-space: nowrap;
}

.foBadge.ok {
  color: #8fffb1;
  border-color: rgba(143,255,177,.25);
  background: rgba(143,255,177,.08);
}

.foBadge.warn {
  color: #ffd98f;
  border-color: rgba(255,217,143,.25);
  background: rgba(255,217,143,.08);
}

.foBadge.danger {
  color: #ff9c9c;
  border-color: rgba(255,156,156,.28);
  background: rgba(255,156,156,.10);
}

.foDetailHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.foDetailHeader h3 {
  margin: 0 0 4px;
}

.foDetailHeader p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: 12px;
}

.foPreview {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  margin-bottom: 12px;
}

.foPreview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.foNoImage {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--muted);
  letter-spacing: .08em;
}

.foInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.foInfoGrid div {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.035);
}

.foInfoGrid strong,
.foInfoGrid span {
  display: block;
}

.foInfoGrid span {
  color: var(--muted);
  margin-top: 3px;
}

.foTableWrap {
  overflow: auto;
}

.foTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.foTable th,
.foTable td {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 8px;
  text-align: left;
}

.foDangerZone {
  margin-top: 16px;
  border: 1px solid rgba(255,80,80,.25);
  background: rgba(255,80,80,.07);
  border-radius: 16px;
  padding: 14px;
}

.foDangerZone p {
  color: var(--muted);
}

.foDangerZone button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

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

  .foMapRow {
    grid-template-columns: 1fr;
  }

  .foToolbar {
    flex-direction: column;
  }
}
/* ================= END FILE OVERVIEW MAP MANAGER V1 ================= */

/* File Overview map type patch */
.foMapRow {
  grid-template-columns: 1fr 160px 80px 90px 120px;
}

.foBadge.type {
  color: #9fc2ff;
  border-color: rgba(159,194,255,.25);
  background: rgba(159,194,255,.08);
}

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

.foDup {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.foLocations {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.foLocations div {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255,255,255,.035);
}

.foLocations small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  overflow-wrap: anywhere;
}

/* File Overview auto screenshot export */
.foShotStatus {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: center;
  margin: -2px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.foShotStatus span {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .04em;
}

.foShotStatus small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.foShotStatus.found,
.foShotStatus.exported {
  border-color: rgba(143,255,177,.25);
  background: rgba(143,255,177,.08);
}

.foShotStatus.export_failed,
.foShotStatus.missing {
  border-color: rgba(255,156,156,.25);
  background: rgba(255,156,156,.08);
}

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

/* File Overview screenshot scan/export queue */
.foShotTools {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}

.foShotTools button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(91,141,255,.16);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
}

.foShotTools button:hover {
  background: rgba(91,141,255,.25);
}

.foShotBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.foShotBadge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  white-space: nowrap;
}

.foShotBadge b {
  color: var(--muted);
}

.foShotBadge.ok {
  color: #8fffb1;
  border-color: rgba(143,255,177,.25);
  background: rgba(143,255,177,.08);
}

.foShotBadge.warn {
  color: #ffd98f;
  border-color: rgba(255,217,143,.25);
  background: rgba(255,217,143,.08);
}

.foShotBadge.danger {
  color: #ff9c9c;
  border-color: rgba(255,156,156,.28);
  background: rgba(255,156,156,.10);
}

.foShotBadge.run {
  color: #9fc2ff;
  border-color: rgba(159,194,255,.25);
  background: rgba(159,194,255,.08);
}

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

  .foShotBadges {
    justify-content: flex-start;
  }
}

/* File Overview header screenshot badges */
.foHeaderActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.foHeaderActions button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(91,141,255,.16);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  cursor: pointer;
  font-weight: 800;
}

.foHeaderActions button:hover {
  background: rgba(91,141,255,.25);
}

.foShotHero {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 18px;
  padding: 16px;
}

.foShotHeroTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.foQueuePill {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  color: #9fc2ff;
  border: 1px solid rgba(159,194,255,.25);
  background: rgba(159,194,255,.08);
}

.foShotBadges.header {
  justify-content: flex-start;
  margin-bottom: 8px;
}

.foShotBadges.header .foShotBadge {
  padding: 8px 11px;
  font-size: 12px;
}

#foShotHint {
  color: var(--muted);
}

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




/* ===== Archive Center Final Mockup Layout START ===== */

body.is-archive-page #page-archive,
body.is-archive-page #page-archive.archiveMockupPage {
  display: block !important;
  width: min(1440px, calc(100vw - 292px)) !important;
  max-width: none !important;
  min-width: 980px !important;
  margin: 0 !important;
  padding: 0 0 42px 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.is-archive-page #page-archive > * {
  max-width: none !important;
}

.acmRoot {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(238, 245, 255, .94);
}

.acmRoot * {
  box-sizing: border-box;
}

.acmHero,
.acmCard,
.acmMetrics > div,
.acmFooter {
  border: 1px solid rgba(112, 149, 255, .16);
  background:
    radial-gradient(circle at top left, rgba(42, 105, 255, .14), transparent 36%),
    linear-gradient(180deg, rgba(13, 26, 48, .95), rgba(6, 13, 27, .97));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
}

.acmHero {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 148px;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border-radius: 18px;
  margin-bottom: 18px;
}

.acmHero small {
  grid-column: 4;
  color: rgba(220, 230, 255, .58);
  font-size: 12px;
  justify-self: end;
}

.acmShield {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(44, 116, 255, .95), rgba(90, 70, 255, .75));
  box-shadow: 0 12px 30px rgba(49, 101, 255, .25);
  font-size: 24px;
}

.acmHeroText h2,
.acmCardHead h3 {
  margin: 0 0 5px;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: rgba(250, 252, 255, .98);
}

.acmHeroText p,
.acmCardHead p,
.acmIntel p,
.acmFooter {
  margin: 0;
  color: rgba(218, 230, 255, .64);
  font-size: 13px;
  line-height: 1.45;
}

.acmHeroBadges {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.acmButton {
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  min-height: 42px;
  color: white;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, #2d67ff, #5b57ff);
  box-shadow: 0 12px 25px rgba(45, 103, 255, .28);
}

.acmButton:hover {
  filter: brightness(1.08);
}

.acmBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
  color: rgba(235, 242, 255, .86);
  background: rgba(120, 145, 190, .16);
}

.acmBadge.ok {
  background: rgba(34, 190, 108, .18);
  color: #65ed91;
}

.acmBadge.warn {
  background: rgba(255, 180, 55, .18);
  color: #ffd36b;
}

.acmBadge.bad {
  background: rgba(255, 70, 110, .18);
  color: #ff7d9a;
}

.acmMetrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 18px;
}

.acmMetrics > div {
  padding: 18px 20px;
  border-right: 0;
  min-width: 0;
}

.acmMetrics > div:first-child {
  border-radius: 16px 0 0 16px;
}

.acmMetrics > div:last-child {
  border-right: 1px solid rgba(112, 149, 255, .16);
  border-radius: 0 16px 16px 0;
}

.acmMetrics span,
.acmCountGrid span,
.acmStatsGrid span {
  display: block;
  color: rgba(220, 230, 255, .58);
  font-size: 12px;
  margin-bottom: 8px;
}

.acmMetrics b,
.acmCountGrid b,
.acmStatsGrid b {
  display: block;
  color: rgba(245, 250, 255, .98);
  font-size: 24px;
  line-height: 1.1;
}

.acmMetrics p,
.acmCountGrid p {
  margin: 7px 0 0;
  color: #6ee889;
  font-size: 12px;
}

.acmCard {
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 18px;
}

.acmCardHead {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.acmIntelGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.acmIntel {
  position: relative;
  min-height: 245px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(117, 153, 255, .14);
  background:
    radial-gradient(circle at top right, rgba(50, 120, 255, .10), transparent 38%),
    rgba(5, 14, 29, .62);
  overflow: hidden;
}

.acmStep {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(47, 113, 255, .8), rgba(40, 71, 140, .9));
  color: white;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(40, 110, 255, .24);
}

.acmIntel h4 {
  display: inline-flex;
  align-items: center;
  margin: 0 0 16px;
  font-size: 15px;
  color: rgba(250, 252, 255, .96);
}

.acmBig {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 8px;
}

.acmBig i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-style: normal;
  font-size: 25px;
}

.acmBig b {
  font-size: 28px;
  letter-spacing: -.04em;
}

.acmBig.ok {
  color: #6bed85;
}

.acmBig.warn {
  color: #ffd36b;
}

.acmBig.bad {
  color: #ff7d9a;
}

.acmRow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 11px;
  color: rgba(220, 230, 255, .62);
  font-size: 13px;
}

.acmRow b {
  color: rgba(246, 250, 255, .96);
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acmDonut {
  --p: 0;
  width: 132px;
  height: 132px;
  margin: 4px auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background:
    conic-gradient(#65dd67 calc(var(--p) * 1%), rgba(80, 110, 160, .22) 0);
}

.acmDonut::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: #09162a;
  box-shadow: inset 0 0 30px rgba(0,0,0,.35);
}

.acmDonut b,
.acmDonut span {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
}

.acmDonut b {
  align-self: center;
  font-size: 25px;
}

.acmDonut span {
  align-self: end;
  margin-bottom: 34px;
  color: rgba(220,230,255,.6);
  font-size: 11px;
}

.acmTimeline {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(117,153,255,.12);
  background: rgba(5, 14, 29, .48);
}

.acmTimeline h4 {
  margin: 0 0 18px;
  font-size: 15px;
}

.acmTimeline h4 small {
  color: rgba(220,230,255,.48);
  font-weight: 500;
}

.acmTimelineLine {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}

.acmTimelineLine::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 28px;
  height: 2px;
  background: linear-gradient(90deg, rgba(82,130,255,.75), rgba(100,240,140,.75));
  opacity: .65;
}

.acmTimelineItem {
  position: relative;
  z-index: 1;
  text-align: center;
}

.acmTimelineIcon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f70ff, #64d66d);
  box-shadow: 0 15px 30px rgba(68, 130, 255, .28);
  font-size: 22px;
}

.acmTimelineItem strong {
  display: block;
  color: rgba(245,250,255,.96);
  font-weight: 900;
  margin-bottom: 8px;
}

.acmTimelineItem b {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.acmTimelineItem p {
  min-height: 34px;
  margin: 0 0 8px;
  color: rgba(220,230,255,.58);
  font-size: 12px;
  line-height: 1.35;
}

.acmSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: 18px;
  align-items: start;
}

.acmBottom {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
}

.acmCountGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.acmCountGrid > div,
.acmStatsGrid > div {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(117,153,255,.12);
  background: rgba(5, 14, 29, .62);
}

.acmReadyGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.acmReady {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(117,153,255,.10);
  font-size: 12px;
}

.acmReady span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
}

.acmReady.ok {
  color: #6bed85;
}

.acmReady.ok span {
  background: rgba(34,190,108,.15);
}

.acmReady.bad {
  color: #ff7d9a;
}

.acmReady.bad span {
  background: rgba(255,70,110,.16);
}

.acmFilters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.acmFilter {
  border: 1px solid rgba(117,153,255,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: rgba(230,240,255,.75);
  padding: 7px 11px;
  cursor: pointer;
  font-size: 12px;
}

.acmFilter.active {
  color: white;
  background: rgba(51, 102, 255, .3);
  border-color: rgba(100,145,255,.45);
}

.acmTableWrap {
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(117,153,255,.12);
}

.acmTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.acmTable th,
.acmTable td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(117,153,255,.08);
  text-align: left;
  font-size: 12px;
}

.acmTable th {
  color: rgba(220,230,255,.55);
  font-weight: 700;
  background: rgba(255,255,255,.025);
}

.acmTable td {
  color: rgba(230,240,255,.78);
}

.acmTable td b {
  color: rgba(245,250,255,.94);
}

.acmType {
  display: inline-flex;
  min-width: 58px;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(80,115,180,.16);
  color: rgba(210,225,255,.8);
  font-size: 11px;
}

.acmSide {
  display: grid;
  gap: 18px;
}

.acmPolicy .acmRow {
  padding: 9px 0;
  margin: 0;
  border-bottom: 1px solid rgba(117,153,255,.08);
}

.acmStatsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.acmStatsGrid b {
  font-size: 20px;
  color: #67ed86;
}

.acmFooter {
  margin-top: 8px;
  padding: 16px 18px;
  border-radius: 14px;
}

.acmEmpty {
  color: rgba(220,230,255,.62);
  font-size: 13px;
}

/* Archive page breakout. This is the important part, because the old parent container was squeezing the page like a bad accordion. */
body.is-archive-page .page.active,
body.is-archive-page #page-archive {
  overflow: visible !important;
}

body.is-archive-page .acmRoot {
  position: relative;
  left: 0;
}

@media (max-width: 1280px) {
  body.is-archive-page #page-archive,
  body.is-archive-page #page-archive.archiveMockupPage {
    width: calc(100vw - 230px) !important;
    min-width: 740px !important;
  }

  .acmMetrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .acmMetrics > div,
  .acmMetrics > div:first-child,
  .acmMetrics > div:last-child {
    border-radius: 16px;
    border-right: 1px solid rgba(112,149,255,.16);
  }

  .acmIntelGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .acmTimelineLine {
    grid-template-columns: repeat(3, 1fr);
  }

  .acmTimelineLine::before {
    display: none;
  }

  .acmSplit,
  .acmBottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  body.is-archive-page #page-archive,
  body.is-archive-page #page-archive.archiveMockupPage {
    width: calc(100vw - 110px) !important;
    min-width: 0 !important;
  }

  .acmHero,
  .acmMetrics,
  .acmIntelGrid,
  .acmTimelineLine,
  .acmSplit,
  .acmBottom,
  .acmReadyGrid,
  .acmCountGrid,
  .acmStatsGrid {
    grid-template-columns: 1fr;
  }

  .acmHero {
    gap: 12px;
  }

  .acmShield {
    display: none;
  }

  .acmHero small {
    grid-column: auto;
    justify-self: start;
  }

  .acmTimelineLine::before {
    display: none;
  }

  .acmBig b {
    font-size: 22px;
  }
}

/* ===== Archive Center Final Mockup Layout END ===== */


/* ===== Archive Center Width Tuning START ===== */

/*
  Use the same page width behavior as the working panel pages.
  No hard viewport breakout, no forced min-width. Because apparently bullying CSS
  with calc() has consequences. Shocking.
*/

body.is-archive-page #page-archive,
body.is-archive-page #page-archive.archiveMockupPage {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 10px 42px 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.is-archive-page #page-archive .acmRoot {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body.is-archive-page .acmHero,
body.is-archive-page .acmCard,
body.is-archive-page .acmFooter,
body.is-archive-page .acmMetrics {
  max-width: 100% !important;
}

/* Prevent cards/tables from pushing the whole page sideways */
body.is-archive-page .acmTableWrap {
  max-width: 100% !important;
  overflow-x: auto !important;
}

body.is-archive-page .acmTable {
  min-width: 560px !important;
}

/* Better fit for your current viewport */
@media (max-width: 1180px) {
  body.is-archive-page .acmHero {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
  }

  body.is-archive-page .acmHero .acmButton {
    grid-column: 2 / 4 !important;
    justify-self: end !important;
  }

  body.is-archive-page .acmHero small {
    grid-column: 2 / 4 !important;
    justify-self: end !important;
  }

  body.is-archive-page .acmMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.is-archive-page .acmMetrics > div,
  body.is-archive-page .acmMetrics > div:first-child,
  body.is-archive-page .acmMetrics > div:last-child {
    border-radius: 16px !important;
    border-right: 1px solid rgba(112,149,255,.16) !important;
  }

  body.is-archive-page .acmIntelGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.is-archive-page .acmTimelineLine {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.is-archive-page .acmTimelineLine::before {
    display: none !important;
  }

  body.is-archive-page .acmSplit,
  body.is-archive-page .acmBottom {
    grid-template-columns: 1fr !important;
  }
}

/* Phone / narrow desktop mode */
@media (max-width: 760px) {
  body.is-archive-page #page-archive,
  body.is-archive-page #page-archive.archiveMockupPage {
    padding-right: 6px !important;
  }

  body.is-archive-page .acmHero,
  body.is-archive-page .acmMetrics,
  body.is-archive-page .acmIntelGrid,
  body.is-archive-page .acmTimelineLine,
  body.is-archive-page .acmSplit,
  body.is-archive-page .acmBottom,
  body.is-archive-page .acmReadyGrid,
  body.is-archive-page .acmCountGrid,
  body.is-archive-page .acmStatsGrid {
    grid-template-columns: 1fr !important;
  }

  body.is-archive-page .acmHero {
    padding: 14px !important;
  }

  body.is-archive-page .acmShield {
    display: none !important;
  }

  body.is-archive-page .acmHero .acmButton,
  body.is-archive-page .acmHero small {
    grid-column: auto !important;
    justify-self: start !important;
  }

  body.is-archive-page .acmCard {
    padding: 14px !important;
  }

  body.is-archive-page .acmTable {
    min-width: 520px !important;
  }
}

/* ===== Archive Center Width Tuning END ===== */

/* ===== Archive Timeline Arrow + Duration Polish START ===== */

/* Make the timeline read as a process, not four decorative bubbles having a meeting. */
body.is-archive-page .acmTimelineLine {
  position: relative !important;
  align-items: start !important;
}

body.is-archive-page .acmTimelineItem {
  position: relative !important;
}

/* Connector line from item to next item */
body.is-archive-page .acmTimelineItem:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(50% + 32px);
  width: calc(100% - 64px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(101, 237, 145, .85),
    rgba(45, 103, 255, .48)
  );
  box-shadow: 0 0 14px rgba(101, 237, 145, .18);
  z-index: 0;
}

/* Arrow head */
body.is-archive-page .acmTimelineItem:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 24px;
  right: -7px;
  width: 0;
  height: 0;
  border-left: 10px solid rgba(101, 237, 145, .9);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 0 8px rgba(101, 237, 145, .28));
  z-index: 1;
}

body.is-archive-page .acmTimelineIcon {
  position: relative !important;
  z-index: 2 !important;
}

/* Disable old full-line connector so it does not fight the arrows. Because CSS loves civil war. */
body.is-archive-page .acmTimelineLine::before {
  display: none !important;
}

/* On narrow layouts, keep it clean instead of inventing spaghetti. */
@media (max-width: 1180px) {
  body.is-archive-page .acmTimelineItem:not(:last-child)::after,
  body.is-archive-page .acmTimelineItem:not(:last-child)::before {
    display: none !important;
  }
}

/* ===== Archive Timeline Arrow + Duration Polish END ===== */

/* ===== Archive Timeline Final Arrow Fix START ===== */

/* Keep timeline as a real left-to-right process, even in narrow panel view. */
body.is-archive-page .acmTimelineLine {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 6px 10px !important;
  scroll-snap-type: x proximity;
}

body.is-archive-page .acmTimelineItem {
  flex: 0 0 155px !important;
  min-width: 155px !important;
  position: relative !important;
  scroll-snap-align: start;
  padding: 0 12px !important;
}

/* connector line */
body.is-archive-page .acmTimelineItem:not(:last-child)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 28px !important;
  left: calc(50% + 30px) !important;
  width: calc(100% - 40px) !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(101, 237, 145, .95),
    rgba(45, 103, 255, .65)
  ) !important;
  box-shadow: 0 0 14px rgba(101, 237, 145, .22) !important;
  z-index: 1 !important;
}

/* arrow head */
body.is-archive-page .acmTimelineItem:not(:last-child)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 23px !important;
  right: -6px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 11px solid rgba(101, 237, 145, .95) !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  filter: drop-shadow(0 0 8px rgba(101, 237, 145, .35)) !important;
  z-index: 2 !important;
}

body.is-archive-page .acmTimelineIcon {
  position: relative !important;
  z-index: 3 !important;
}

body.is-archive-page .acmTimelineLine::before {
  display: none !important;
}

/* Hide scrollbar politely, because yes, even scrollbars can ruin the vibe. */
body.is-archive-page .acmTimelineLine::-webkit-scrollbar {
  height: 6px;
}

body.is-archive-page .acmTimelineLine::-webkit-scrollbar-thumb {
  background: rgba(101, 237, 145, .25);
  border-radius: 999px;
}

/* ===== Archive Timeline Final Arrow Fix END ===== */

/* ===== Archive Legend START ===== */

body.is-archive-page .acmLegend {
  margin-top: 0;
}

body.is-archive-page .acmLegendGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.is-archive-page .acmLegendItem {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(117,153,255,.12);
  background:
    radial-gradient(circle at top left, rgba(47, 113, 255, .08), transparent 38%),
    rgba(5, 14, 29, .58);
}

body.is-archive-page .acmLegendItem b {
  display: block;
  margin-bottom: 4px;
  color: rgba(245,250,255,.96);
  font-size: 13px;
}

body.is-archive-page .acmLegendItem p {
  margin: 0;
  color: rgba(220,230,255,.62);
  font-size: 12px;
  line-height: 1.42;
}

body.is-archive-page .acmLegendNote {
  margin-top: 13px;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px solid rgba(101,237,145,.16);
  background: rgba(34,190,108,.07);
  color: rgba(220,230,255,.72);
  font-size: 12px;
  line-height: 1.45;
}

body.is-archive-page .acmLegendNote b {
  color: rgba(101,237,145,.95);
}

body.is-archive-page .acmLegendNote code {
  color: rgba(245,250,255,.92);
  background: rgba(255,255,255,.07);
  border-radius: 7px;
  padding: 2px 6px;
}

@media (max-width: 900px) {
  body.is-archive-page .acmLegendGrid {
    grid-template-columns: 1fr;
  }

  body.is-archive-page .acmLegendItem {
    grid-template-columns: 82px minmax(0, 1fr);
  }
}

/* ===== Archive Legend END ===== */

/* ===== Archive Retention Details START ===== */

body.is-archive-page .acmRetentionHealth {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(101,237,145,.18);
  background: rgba(34,190,108,.08);
}

body.is-archive-page .acmRetentionHealth span {
  color: rgba(220,230,255,.68);
  font-size: 12px;
}

body.is-archive-page .acmRetentionHealth b {
  font-size: 12px;
  color: rgba(101,237,145,.96);
}

body.is-archive-page .acmRetentionHealth.warn {
  border-color: rgba(255,190,90,.22);
  background: rgba(255,190,90,.08);
}

body.is-archive-page .acmRetentionHealth.warn b {
  color: rgba(255,205,120,.96);
}

body.is-archive-page .acmRetentionHealth.bad {
  border-color: rgba(255,95,120,.22);
  background: rgba(255,95,120,.08);
}

body.is-archive-page .acmRetentionHealth.bad b {
  color: rgba(255,125,145,.96);
}

body.is-archive-page .acmRetentionGroups {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

body.is-archive-page .acmRetentionDetails {
  border: 1px solid rgba(117,153,255,.12);
  background: rgba(5,14,29,.55);
  border-radius: 14px;
  overflow: hidden;
}

body.is-archive-page .acmRetentionDetails summary {
  cursor: pointer;
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 14px;
}

body.is-archive-page .acmRetentionDetails summary::-webkit-details-marker {
  display: none;
}

body.is-archive-page .acmRetentionDetails summary b {
  display:block;
  color: rgba(245,250,255,.95);
  font-size: 13px;
  margin-bottom: 2px;
}

body.is-archive-page .acmRetentionDetails summary small {
  display:block;
  color: rgba(220,230,255,.55);
  font-size: 11px;
}

body.is-archive-page .acmRetentionDetails summary strong {
  color: rgba(101,237,145,.96);
  font-size: 13px;
  white-space: nowrap;
}

body.is-archive-page .acmRetentionDetailBody {
  border-top: 1px solid rgba(117,153,255,.10);
  padding: 8px 14px 12px;
  display:grid;
  gap: 7px;
}

body.is-archive-page .acmRetentionItem {
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items:center;
  font-size: 12px;
}

body.is-archive-page .acmRetentionItem span {
  color: rgba(220,230,255,.70);
}

body.is-archive-page .acmRetentionItem b {
  color: rgba(245,250,255,.90);
}

body.is-archive-page .acmRetentionItem em {
  font-style: normal;
  color: rgba(101,237,145,.82);
  font-size: 11px;
}

/* Archive Statistics third meta line support */
body.is-archive-page .acmStatsGrid small {
  display:block;
  margin-top: 4px;
  color: rgba(220,230,255,.58);
  font-size: 11px;
}

/* ===== Archive Retention Details END ===== */

/* Settings Security SOC cards */
.settingsSecurityOverviewGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin: 0 0 14px 0;
}

.settingsSecurityOverviewGrid > div,
.settingsSecurityUserGrid > div {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 10px 12px;
}

.settingsSecurityOverviewGrid span,
.settingsSecurityUserGrid span {
  display: block;
  color: rgba(220,230,255,.62);
  font-size: 12px;
  margin-bottom: 4px;
}

.settingsSecurityOverviewGrid strong,
.settingsSecurityUserGrid strong {
  color: rgba(245,248,255,.94);
  font-size: 13px;
  word-break: break-word;
}

.userSecurityListRich {
  display: grid;
  gap: 12px;
}

.userSecurityRowRich {
  background: rgba(6, 12, 24, .78);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px;
}

.userSecurityRowRich summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.userSecurityRowRich summary::-webkit-details-marker {
  display: none;
}

.settingsSecurityUserGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.settingsSecurityUserGrid .full {
  grid-column: 1 / -1;
}

.okText { color: #69f58a !important; }
.warnText { color: #ffd166 !important; }
.badText { color: #ff6b6b !important; }

.securityStatusBadge.ok {
  background: rgba(54, 211, 126, .14);
  color: #69f58a;
}

.securityStatusBadge.warn {
  background: rgba(255, 209, 102, .14);
  color: #ffd166;
}

.securityStatusBadge.bad {
  background: rgba(255, 107, 107, .14);
  color: #ff6b6b;
}

@media (max-width: 900px) {
  .settingsSecurityOverviewGrid,
  .settingsSecurityUserGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .settingsSecurityOverviewGrid,
  .settingsSecurityUserGrid {
    grid-template-columns: 1fr;
  }

  .userSecurityRowRich summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 10/10 Settings Security Cockpit */
.settingsSecurityCommandStrip {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.25fr;
  gap: 10px;
  margin: 0 0 14px 0;
}

.settingsSecurityCommandStrip > div {
  background: linear-gradient(135deg, rgba(63,120,255,.13), rgba(36,210,126,.08));
  border: 1px solid rgba(122,162,255,.18);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.settingsSecurityCommandStrip span {
  display: block;
  color: rgba(220,230,255,.62);
  font-size: 12px;
  margin-bottom: 5px;
}

.settingsSecurityCommandStrip strong {
  color: rgba(245,248,255,.96);
  font-size: 14px;
}

.settingsSecurityOverviewGrid10 {
  margin-bottom: 14px;
}

.userSecurityList10 {
  gap: 14px;
}

.userSecurityRow10 {
  position: relative;
  overflow: hidden;
}

.userSecurityRow10::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  opacity: .95;
}

.userSecurityRow10.ok::before { background: #36d37e; }
.userSecurityRow10.warn::before { background: #ffd166; }
.userSecurityRow10.bad::before { background: #ff6b6b; }

.settingsSecurityIdentity strong {
  font-size: 14px;
}

.settingsSecurityIdentity small {
  display: block;
  color: rgba(220,230,255,.58);
  margin-top: 3px;
}

.settingsSecurityBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.roleRiskBadge,
.securityStatusBadge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.08);
}

.roleRiskBadge.ok { background: rgba(54,211,126,.13); color: #69f58a; }
.roleRiskBadge.warn { background: rgba(255,209,102,.13); color: #ffd166; }
.roleRiskBadge.bad { background: rgba(255,107,107,.13); color: #ff8b8b; }

.settingsSecurityUserGrid10 {
  margin-top: 14px;
}

.settingsSecurityConnectionBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.settingsSecurityConnectionBox > div {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 11px 12px;
}

.settingsSecurityConnectionBox span {
  display: block;
  color: rgba(220,230,255,.62);
  font-size: 12px;
  margin-bottom: 4px;
}

.settingsSecurityConnectionBox strong {
  display: block;
  color: rgba(245,248,255,.95);
  font-size: 14px;
}

.settingsSecurityConnectionBox small {
  display: block;
  color: rgba(220,230,255,.55);
  font-size: 11px;
  margin-top: 4px;
}

.settingsSecurityTimeline {
  margin-top: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 10px 12px;
}

.settingsSecurityTimelineTitle {
  display: block;
  color: rgba(245,248,255,.9);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}

.settingsSecurityTimeline > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(230,238,255,.84);
  font-size: 12px;
  padding: 5px 0;
}

.settingsSecurityTimeline i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.settingsSecurityTimeline .ok i { background: #36d37e; box-shadow: 0 0 12px rgba(54,211,126,.55); }
.settingsSecurityTimeline .warn i { background: #ffd166; box-shadow: 0 0 12px rgba(255,209,102,.45); }
.settingsSecurityTimeline .bad i { background: #ff6b6b; box-shadow: 0 0 12px rgba(255,107,107,.45); }

.settingsSecuritySummaryBox {
  margin-top: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
}

.settingsSecuritySummaryBox.ok {
  background: rgba(54,211,126,.14);
  color: #7dffa1;
  border: 1px solid rgba(54,211,126,.2);
}

.settingsSecuritySummaryBox.warn {
  background: rgba(255,209,102,.13);
  color: #ffe19a;
  border: 1px solid rgba(255,209,102,.2);
}

.settingsSecuritySummaryBox.bad {
  background: rgba(255,107,107,.13);
  color: #ff9b9b;
  border: 1px solid rgba(255,107,107,.2);
}

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

  .settingsSecurityConnectionBox {
    grid-template-columns: 1fr;
  }

  .settingsSecurityBadges {
    justify-content: flex-start;
  }
}

/* 11/10 Security SOC Header */
.settingsSecuritySocHero {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 12px;
  margin: 0 0 14px 0;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(54,211,126,.18), transparent 35%),
    linear-gradient(135deg, rgba(10,18,34,.96), rgba(8,14,26,.82));
  border: 1px solid rgba(54,211,126,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 45px rgba(0,0,0,.18);
}

.settingsSecuritySocHero > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.socPulse {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #36d37e;
  box-shadow: 0 0 0 0 rgba(54,211,126,.75);
  animation: socPulse 1.8s infinite;
}

@keyframes socPulse {
  0% { box-shadow: 0 0 0 0 rgba(54,211,126,.65); }
  70% { box-shadow: 0 0 0 12px rgba(54,211,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(54,211,126,0); }
}

.settingsSecuritySocHero small {
  display: block;
  color: rgba(220,230,255,.58);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.settingsSecuritySocHero strong {
  display: block;
  color: #7dffa1;
  font-size: 24px;
  font-weight: 1000;
  line-height: 1.05;
}

.settingsSecuritySocHero em {
  display: block;
  color: rgba(220,230,255,.66);
  font-style: normal;
  font-size: 12px;
  margin-top: 4px;
}

.socHeroStats {
  display: grid;
  grid-template-columns: repeat(5, minmax(70px, 1fr));
  gap: 8px;
}

.socHeroStats span {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 9px 10px;
  color: rgba(220,230,255,.6);
  font-size: 11px;
}

.socHeroStats strong {
  color: rgba(245,248,255,.96);
  font-size: 15px;
  margin-top: 3px;
}

.settingsSecurityMatrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 14px 0;
}

.settingsSecurityMatrix > div {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 11px 12px;
}

.settingsSecurityMatrix span {
  display: block;
  color: rgba(220,230,255,.62);
  font-size: 12px;
  margin-bottom: 4px;
}

.settingsSecurityMatrix strong {
  display: block;
  color: rgba(245,248,255,.95);
  font-size: 15px;
  margin-bottom: 8px;
}

.settingsSecurityMatrix i {
  display: block;
  height: 5px;
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #448cff, #36d37e);
}

.settingsSecurityPrivilegedPanel {
  margin: 0 0 14px 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
}

.settingsSecurityPrivGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.settingsSecurityPrivCard {
  border-radius: 14px;
  padding: 12px;
  background: rgba(6,12,24,.82);
  border: 1px solid rgba(255,255,255,.08);
}

.settingsSecurityPrivCard.bad {
  border-color: rgba(255,107,107,.22);
  background: linear-gradient(135deg, rgba(255,107,107,.10), rgba(6,12,24,.82));
}

.settingsSecurityPrivCard.warn {
  border-color: rgba(255,209,102,.22);
}

.settingsSecurityPrivCard.ok {
  border-color: rgba(54,211,126,.20);
}

.settingsSecurityPrivCard strong {
  display: block;
  color: rgba(245,248,255,.95);
  font-size: 13px;
}

.settingsSecurityPrivCard small {
  display: block;
  color: rgba(220,230,255,.55);
  margin: 3px 0 8px;
}

.settingsSecurityPrivCard span {
  display: block;
  color: rgba(230,238,255,.82);
  font-size: 12px;
  padding: 3px 0;
}

@media (max-width: 900px) {
  .settingsSecuritySocHero,
  .settingsSecurityMatrix {
    grid-template-columns: 1fr;
  }

  .socHeroStats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Final Security cleanup: reduce duplicated spacing */
.settingsSecuritySocHero {
  margin-bottom: 16px !important;
}

.userSecurityList10 {
  margin-top: 0 !important;
}

.settingsSecurityUserGrid10 {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
}

@media (max-width: 700px) {
  .settingsSecurityUserGrid10 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== SETTINGS ROLES PRO LAYOUT PHASE 1 ===== */

.roleProTop {
  margin-bottom: 16px;
}

.roleProLayout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.roleProSidebar,
.roleProDetail,
.roleProCreate,
.roleProListPanel,
.roleProHero,
.roleProEditCard,
.roleProOverviewCard {
  border: 1px solid rgba(130, 160, 210, 0.16);
  background:
    radial-gradient(circle at top left, rgba(120, 82, 255, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(16, 26, 43, 0.94), rgba(8, 14, 25, 0.96));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.roleProSidebar {
  display: grid;
  gap: 14px;
  border-radius: 18px;
  padding: 14px;
}

.roleProCreate,
.roleProListPanel {
  border-radius: 16px;
  padding: 14px;
}

.roleProMiniTitle,
.roleProListHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: rgba(245, 248, 255, 0.95);
}

.roleProCreate label,
.roleProFields label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: rgba(235, 242, 255, 0.88);
  font-size: 12px;
}

.roleProCreate input,
.roleProCreate select,
.roleProFields input {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(145, 170, 220, 0.24);
  background: rgba(4, 10, 20, 0.58);
  color: rgba(245, 248, 255, 0.96);
  padding: 8px 10px;
  outline: none;
}

.roleProCreate input:focus,
.roleProCreate select:focus,
.roleProFields input:focus {
  border-color: rgba(139, 92, 246, 0.75);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.roleProCreate small,
.roleProFields small {
  color: rgba(170, 184, 210, 0.72);
  font-size: 11px;
}

.roleProPrimaryBtn,
.roleProStickyActions button:first-of-type {
  width: 100%;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  color: white;
  min-height: 40px;
  font-weight: 800;
  cursor: pointer;
}

.roleProList {
  display: grid;
  gap: 8px;
}

.roleProItem {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  border-radius: 13px;
  border: 1px solid rgba(130, 160, 210, 0.14);
  background: rgba(7, 14, 26, 0.72);
  color: rgba(245, 248, 255, 0.92);
  padding: 10px;
  cursor: pointer;
}

.roleProItem:hover,
.roleProItem.active {
  border-color: rgba(139, 92, 246, 0.72);
  background:
    linear-gradient(135deg, rgba(109, 40, 217, 0.34), rgba(18, 30, 52, 0.84));
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.18);
}

.roleProItemIcon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(139, 92, 246, 0.18);
  font-size: 17px;
}

.roleProItemText {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.roleProItemText strong {
  font-size: 13px;
}

.roleProItemText small,
.roleProItemText em {
  color: rgba(185, 198, 220, 0.76);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roleProPill,
.roleProBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.18);
  color: rgba(232, 222, 255, 0.95);
}

.roleProBadge.lock {
  border-color: rgba(250, 204, 21, 0.28);
  background: rgba(250, 204, 21, 0.10);
  color: rgba(254, 240, 138, 0.95);
}

.roleProDetail {
  border-radius: 18px;
  padding: 18px;
  min-width: 0;
}

.roleProHero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
}

.roleProHeroIcon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.95), rgba(139, 92, 246, 0.72));
  font-size: 28px;
  box-shadow: 0 14px 35px rgba(109, 40, 217, 0.28);
}

.roleProHeroTitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.roleProHeroTitle h4 {
  margin: 0;
  font-size: 22px;
  color: rgba(250, 252, 255, 0.98);
}

.roleProHeroMain p {
  margin: 6px 0 0;
  color: rgba(195, 207, 229, 0.78);
}

.roleProHeroActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.roleProHeroActions button,
.roleProStickyActions button {
  border-radius: 10px;
  border: 1px solid rgba(145, 170, 220, 0.22);
  background: rgba(7, 14, 26, 0.72);
  color: rgba(245, 248, 255, 0.94);
  min-height: 38px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

.roleProStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.roleProStats div {
  border-radius: 15px;
  border: 1px solid rgba(130, 160, 210, 0.13);
  background: rgba(10, 20, 36, 0.78);
  padding: 14px;
}

.roleProStats strong {
  display: block;
  font-size: 24px;
  color: white;
}

.roleProStats span {
  color: rgba(190, 204, 226, 0.78);
  font-size: 12px;
}

.roleProStats .locked strong {
  color: #facc15;
}

.roleProEditCard {
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}

.roleProFields {
  display: grid;
  grid-template-columns: 1fr 1.25fr 0.8fr;
  gap: 14px;
}

.roleProOverview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.roleProOverviewCard {
  border-radius: 16px;
  padding: 16px;
}

.roleProOverviewCard h5 {
  margin: 0 0 8px;
  font-size: 15px;
  color: rgba(245, 248, 255, 0.96);
}

.roleProOverviewCard p {
  margin: 0 0 12px;
  color: rgba(185, 198, 220, 0.76);
}

.roleProProgress {
  height: 9px;
  border-radius: 999px;
  background: rgba(3, 8, 16, 0.72);
  overflow: hidden;
  border: 1px solid rgba(145, 170, 220, 0.10);
}

.roleProProgress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #8b5cf6);
}

.roleProLegacyEditor {
  border-radius: 16px;
  border-color: rgba(130, 160, 210, 0.14);
  background: rgba(7, 14, 26, 0.58);
  margin-bottom: 12px;
}

.roleProLegacyEditor summary {
  padding: 14px 16px;
  font-weight: 800;
  cursor: pointer;
  color: rgba(245, 248, 255, 0.94);
}

.roleProLegacyEditor .roleCheckGrid {
  padding: 0 14px 14px;
}

.roleProStickyActions {
  position: sticky;
  bottom: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border: 1px solid rgba(130, 160, 210, 0.14);
  background: rgba(5, 10, 20, 0.86);
  backdrop-filter: blur(12px);
  border-radius: 15px;
  padding: 12px;
  margin-top: 14px;
  z-index: 3;
}

.roleProStickyActions button:first-of-type {
  width: auto;
  padding-inline: 18px;
}

.roleProMobileSelect {
  display: none;
}

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

  .roleProList {
    display: none;
  }

  .roleProMobileSelect {
    display: block;
  }

  .roleProMobileSelect select {
    width: 100%;
    min-height: 40px;
    border-radius: 11px;
    border: 1px solid rgba(145, 170, 220, 0.24);
    background: rgba(4, 10, 20, 0.68);
    color: rgba(245, 248, 255, 0.96);
    padding: 8px 10px;
  }

  .roleProHero {
    grid-template-columns: 48px 1fr;
  }

  .roleProHeroActions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .roleProHeroActions button {
    flex: 1;
  }

  .roleProStats,
  .roleProOverview,
  .roleProFields {
    grid-template-columns: 1fr;
  }

  .roleProDetail {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  .roleProSidebar {
    padding: 10px;
  }

  .roleProCreate {
    padding: 12px;
  }

  .roleProHeroTitle h4 {
    font-size: 18px;
  }

  .roleProStats {
    grid-template-columns: 1fr 1fr;
  }

  .roleProStickyActions {
    flex-direction: column;
    position: static;
  }

  .roleProStickyActions button {
    width: 100%;
  }
}

/* ===== SETTINGS ROLES PRO PHASE 2: TABS + GROUPED PERMISSIONS ===== */

.roleProTabs {
  border: 1px solid rgba(130, 160, 210, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(120, 82, 255, 0.10), transparent 30%),
    rgba(7, 14, 26, 0.72);
  overflow: hidden;
  margin-bottom: 14px;
}

.roleProTabNav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(130, 160, 210, 0.14);
  padding: 10px 12px 0;
  overflow-x: auto;
}

.roleProTabNav button {
  border: 0;
  background: transparent;
  color: rgba(190, 204, 226, 0.82);
  padding: 12px 18px;
  border-radius: 12px 12px 0 0;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.roleProTabNav button.active {
  color: #fff;
  background: rgba(139, 92, 246, 0.16);
  box-shadow: inset 0 -2px 0 #8b5cf6;
}

.roleProTabPanel {
  display: none;
  padding: 16px;
}

.roleProTabPanel.active {
  display: block;
}

.roleProPermToolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.roleProPermToolbar input {
  flex: 1;
  min-width: 220px;
  min-height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(145, 170, 220, 0.22);
  background: rgba(4, 10, 20, 0.62);
  color: rgba(245, 248, 255, 0.96);
  padding: 8px 11px;
  outline: none;
}

.roleProPermToolbar input:focus {
  border-color: rgba(139, 92, 246, 0.75);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

.roleProPermToolbar button,
.roleProPermGroupHead button {
  border-radius: 10px;
  border: 1px solid rgba(145, 170, 220, 0.20);
  background: rgba(10, 20, 36, 0.82);
  color: rgba(235, 242, 255, 0.92);
  min-height: 34px;
  padding: 7px 10px;
  font-weight: 750;
  cursor: pointer;
}

.roleProPermToolbar button:hover,
.roleProPermGroupHead button:hover {
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(139, 92, 246, 0.16);
}

.roleProPermGroup {
  border: 1px solid rgba(130, 160, 210, 0.13);
  border-radius: 16px;
  background: rgba(8, 16, 30, 0.64);
  margin-bottom: 12px;
  overflow: hidden;
}

.roleProPermGroupHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(130, 160, 210, 0.11);
  background: rgba(12, 22, 40, 0.58);
}

.roleProPermGroupHead strong {
  display: block;
  color: rgba(245, 248, 255, 0.96);
  font-size: 14px;
}

.roleProPermGroupHead small {
  color: rgba(180, 195, 220, 0.70);
  font-size: 11px;
}

.roleProPermGroupHead > div:last-child {
  display: flex;
  gap: 7px;
}

.roleProPermGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  padding: 12px;
}

.roleProPermItem {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  border: 1px solid rgba(130, 160, 210, 0.11);
  border-radius: 13px;
  background: rgba(4, 10, 20, 0.42);
  padding: 11px;
}

.roleProPermItem:hover {
  border-color: rgba(139, 92, 246, 0.42);
  background: rgba(139, 92, 246, 0.08);
}

.roleProPermItem input {
  margin-top: 2px;
}

.roleProPermItem span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.roleProPermItem strong {
  color: rgba(245, 248, 255, 0.94);
  font-size: 13px;
}

.roleProPermItem small {
  color: rgba(170, 184, 210, 0.68);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.roleProOverview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .roleProTabPanel {
    padding: 12px;
  }

  .roleProOverview {
    grid-template-columns: 1fr;
  }

  .roleProPermToolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .roleProPermToolbar input {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .roleProTabNav {
    padding-inline: 8px;
  }

  .roleProTabNav button {
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
  }

  .roleProPermGrid {
    grid-template-columns: 1fr;
  }

  .roleProPermGroupHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .roleProPermGroupHead > div:last-child,
  .roleProPermGroupHead button {
    width: 100%;
  }

  .roleProPermGroupHead > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== SETTINGS ROLES PHASE 2 CLEANUP ===== */

.roleProCreateCompact {
  padding: 0;
  overflow: hidden;
}

.roleProCreateCompact summary {
  list-style: none;
  cursor: pointer;
  padding: 14px;
  margin: 0;
}

.roleProCreateCompact summary::-webkit-details-marker {
  display: none;
}

.roleProCreateCompact summary::after {
  content: "Open";
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: rgba(190, 204, 226, 0.75);
  border: 1px solid rgba(145, 170, 220, 0.18);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(4, 10, 20, 0.45);
}

.roleProCreateCompact[open] summary::after {
  content: "Close";
}

.roleProCreateBody {
  padding: 0 14px 14px;
}

.roleProListPanel {
  min-height: unset !important;
}

.roleProMobileSelect {
  margin-top: 8px;
}

@media (max-width: 980px) {
  .roleProSidebar {
    gap: 10px;
  }

  .roleProListPanel {
    padding: 12px;
  }

  .roleProListPanel::after {
    display: none !important;
    content: none !important;
  }

  .roleProCreate:not([open]) {
    max-height: 52px;
  }

  .roleProCreateBody {
    padding-bottom: 12px;
  }

  .roleProStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .roleProStats div {
    text-align: center;
    padding: 12px 10px;
  }

  .roleProStats strong {
    font-size: 22px;
  }

  .roleProTabNav {
    background: rgba(4, 10, 20, 0.35);
    padding: 8px;
    border-bottom: 1px solid rgba(130, 160, 210, 0.14);
  }

  .roleProTabNav button {
    border-radius: 11px;
    background: rgba(8, 16, 30, 0.65);
  }

  .roleProTabNav button.active {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.72), rgba(139, 92, 246, 0.46));
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35);
  }
}

@media (max-width: 640px) {
  .roleProCreateCompact summary {
    padding: 12px;
  }

  .roleProHero {
    margin-top: 4px;
  }

  .roleProSidebar {
    padding-bottom: 8px;
  }

  .roleProDetail {
    margin-top: 8px;
  }
}

/* ===== SETTINGS ROLES PHASE 3A: MOBILE COMPACT + EMPTY SPACE FIX ===== */

.roleProSidebar {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

.roleProCreate,
.roleProListPanel {
  min-height: 0 !important;
  height: auto !important;
}

.roleProCreateCompact:not([open]) {
  min-height: 0 !important;
  height: auto !important;
}

.roleProListPanel {
  display: block !important;
}

.roleProListPanel .roleProMobileSelect {
  display: none;
}

.roleProListPanel .roleProList {
  min-height: 0 !important;
  height: auto !important;
}

/* Desktop/large tablet: keep normal role list */
@media (min-width: 981px) {
  .roleProListPanel .roleProList {
    display: grid !important;
  }

  .roleProListPanel .roleProMobileSelect {
    display: none !important;
  }
}

/* Mobile / touch desktop width: kill the giant empty role list box */
@media (max-width: 980px) {
  .roleProLayout {
    gap: 12px !important;
  }

  .roleProSidebar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .roleProCreateCompact {
    margin: 0 !important;
  }

  .roleProCreateCompact:not([open]) {
    max-height: none !important;
  }

  .roleProListPanel {
    padding: 10px 12px 12px !important;
    border-radius: 14px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .roleProListHeader {
    margin-bottom: 8px !important;
  }

  .roleProListPanel .roleProList {
    display: none !important;
  }

  .roleProListPanel .roleProMobileSelect {
    display: block !important;
    margin: 0 !important;
  }

  .roleProMobileSelect select {
    min-height: 42px !important;
    font-weight: 800 !important;
  }

  .roleProDetail {
    margin-top: 0 !important;
  }

  .roleProHero {
    position: sticky;
    top: 8px;
    z-index: 6;
    backdrop-filter: blur(14px);
    background:
      radial-gradient(circle at top left, rgba(120, 82, 255, 0.18), transparent 38%),
      rgba(8, 16, 30, 0.92) !important;
  }
}

/* Phone polish */
@media (max-width: 640px) {
  .roleProTop {
    margin-bottom: 10px !important;
  }

  .roleProCreateCompact summary {
    min-height: 44px;
  }

  .roleProCreateCompact:not([open]) .roleProCreateBody {
    display: none !important;
  }

  .roleProStats {
    gap: 8px !important;
  }

  .roleProStats div {
    min-height: 74px;
    display: grid;
    place-content: center;
  }

  .roleProStats strong {
    font-size: 24px !important;
    line-height: 1;
  }

  .roleProStats span {
    margin-top: 4px;
  }

  .roleProHero {
    padding: 12px !important;
    gap: 10px !important;
  }

  .roleProHeroIcon {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
    border-radius: 13px !important;
  }

  .roleProHeroTitle h4 {
    font-size: 17px !important;
  }

  .roleProHeroMain p {
    font-size: 12px;
  }

  .roleProHeroActions {
    gap: 8px !important;
  }

  .roleProHeroActions button {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
  }

  .roleProEditCard {
    padding: 12px !important;
  }

  .roleProTabNav {
    gap: 6px !important;
  }

  .roleProTabNav button {
    min-height: 38px;
  }
}

/* ===== SETTINGS ROLES: HARD EMPTY SPACE FIX ===== */

.roleProLayout {
  align-items: start !important;
}

.roleProSidebar {
  height: fit-content !important;
  min-height: 0 !important;
  align-self: start !important;
}

.roleProCreateCompact,
.roleProListPanel {
  height: fit-content !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
}

.roleProListPanel,
.roleProListPanel * {
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .roleProLayout {
    display: block !important;
  }

  .roleProSidebar {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
  }

  .roleProListPanel {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 90px !important;
    overflow: visible !important;
    padding: 10px 12px !important;
    margin: 10px 0 0 !important;
  }

  .roleProListHeader {
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  .roleProMobileSelect {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .roleProMobileSelect select {
    display: block !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  .roleProList {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .roleProDetail {
    margin-top: 0 !important;
  }
}

/* ===== SETTINGS ROLES: POLISH 9/10 ===== */

/* Header: actions rechts, sauberer Hero */
.roleProHero {
  grid-template-columns: 58px minmax(0, 1fr) minmax(180px, auto) !important;
  align-items: center !important;
}

.roleProHeroActions {
  justify-content: flex-end !important;
  align-self: center !important;
}

.roleProHeroActions button {
  min-width: 145px;
}

/* Stats: mehr Dashboard, weniger Formular */
.roleProStats {
  gap: 12px !important;
}

.roleProStats div {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.14), transparent 42%),
    rgba(8, 16, 30, 0.78) !important;
}

.roleProStats div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(96, 165, 250, 0.85);
}

.roleProStats div:nth-child(2)::before {
  background: rgba(34, 197, 94, 0.85);
}

.roleProStats div:nth-child(3)::before {
  background: rgba(251, 191, 36, 0.85);
}

.roleProStats div:nth-child(4)::before {
  background: rgba(139, 92, 246, 0.85);
}

.roleProStats strong {
  font-size: 26px !important;
  font-weight: 900 !important;
}

.roleProStats span {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px !important;
}

/* Tabs: mehr echtes Admin-Dashboard */
.roleProTabNav {
  gap: 8px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(180deg, rgba(15, 25, 43, 0.82), rgba(7, 14, 26, 0.62)) !important;
}

.roleProTabNav button {
  border: 1px solid rgba(145, 170, 220, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(4, 10, 20, 0.48) !important;
  box-shadow: none !important;
}

.roleProTabNav button.active {
  border-color: rgba(139, 92, 246, 0.70) !important;
  background:
    linear-gradient(135deg, rgba(109, 40, 217, 0.86), rgba(139, 92, 246, 0.52)) !important;
  color: #fff !important;
  box-shadow:
    0 10px 24px rgba(109, 40, 217, 0.20),
    inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}

/* Overview Cards edler */
.roleProOverviewCard {
  border-color: rgba(130, 160, 210, 0.18) !important;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(14, 26, 46, 0.92), rgba(7, 14, 26, 0.92)) !important;
}

.roleProOverviewCard:nth-child(2) {
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(14, 26, 46, 0.92), rgba(7, 14, 26, 0.92)) !important;
}

.roleProOverviewCard:nth-child(3) {
  background:
    radial-gradient(circle at top left, rgba(251, 191, 36, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(14, 26, 46, 0.92), rgba(7, 14, 26, 0.92)) !important;
}

/* Savebar besser ausrichten */
.roleProStickyActions {
  align-items: center !important;
}

.roleProStickyActions button {
  min-width: 120px;
}

/* Mobile Feinschliff */
@media (max-width: 980px) {
  .roleProHero {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }

  .roleProHeroActions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .roleProHeroActions button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .roleProStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .roleProStats div {
    min-height: 82px !important;
  }

  .roleProTabNav {
    gap: 6px !important;
  }

  .roleProTabNav button {
    font-size: 11px !important;
    padding: 10px 6px !important;
  }

  .roleProStickyActions {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
  }

  .roleProStickyActions button:first-of-type {
    width: 100% !important;
  }
}

/* ===== SETTINGS ROLES PHASE 4A: ASSIGNED USERS ===== */

.roleProAssignedCard {
  min-height: 160px;
}

.roleProAssignedList {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.roleProAssignedUser {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(130, 160, 210, 0.14);
  border-radius: 13px;
  background: rgba(4, 10, 20, 0.46);
  padding: 9px 10px;
}

.roleProAssignedAvatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.95), rgba(139, 92, 246, 0.65));
  color: #fff;
  font-weight: 900;
}

.roleProAssignedUser strong {
  display: block;
  color: rgba(245, 248, 255, 0.95);
  font-size: 13px;
}

.roleProAssignedUser small {
  display: block;
  color: rgba(180, 195, 220, 0.72);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.roleProAssignedUser > span {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: rgba(187, 247, 208, 0.95);
  background: rgba(34, 197, 94, 0.10);
}

.roleProAssignedUser > span.off {
  border-color: rgba(248, 113, 113, 0.26);
  color: rgba(254, 202, 202, 0.95);
  background: rgba(248, 113, 113, 0.10);
}

.roleProAssignedEmpty {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 13px;
  border: 1px dashed rgba(145, 170, 220, 0.20);
  background: rgba(4, 10, 20, 0.34);
}

.roleProAssignedEmpty strong {
  color: rgba(245, 248, 255, 0.92);
}

.roleProAssignedEmpty small {
  color: rgba(180, 195, 220, 0.68);
}

@media (max-width: 640px) {
  .roleProAssignedUser {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .roleProAssignedUser > span {
    grid-column: 2;
    width: fit-content;
  }
}

/* ===== SETTINGS ROLES PHASE 5: RBAC CARD TABS ===== */

.roleProPermGroupCards {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.08), transparent 32%),
    rgba(7, 14, 26, 0.68) !important;
}

.roleProGroupTools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.roleProGroupTools span {
  min-width: 42px;
  text-align: center;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(145, 170, 220, 0.18);
  background: rgba(4, 10, 20, 0.42);
  color: rgba(235, 242, 255, 0.86);
  font-size: 11px;
  font-weight: 900;
}

.roleProGroupProgress {
  height: 5px;
  background: rgba(3, 8, 16, 0.62);
  overflow: hidden;
}

.roleProGroupProgress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #60a5fa, #8b5cf6);
}

.roleProPermCardGrid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

.roleProPermCard {
  grid-template-columns: 22px 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 74px;
  position: relative;
  overflow: hidden;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.roleProPermCard:hover {
  transform: translateY(-1px);
}

.roleProPermCard::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(248, 113, 113, 0.70);
}

.roleProPermCard.allowed::before {
  background: rgba(34, 197, 94, 0.85);
}

.roleProPermCard.allowed {
  border-color: rgba(34, 197, 94, 0.22) !important;
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.10), transparent 42%),
    rgba(4, 10, 20, 0.46) !important;
}

.roleProPermCard.denied {
  border-color: rgba(248, 113, 113, 0.14) !important;
  background:
    radial-gradient(circle at top left, rgba(248, 113, 113, 0.06), transparent 42%),
    rgba(4, 10, 20, 0.36) !important;
}

.roleProPermIcon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(139, 92, 246, 0.14);
  font-size: 16px;
}

.roleProPermText {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.roleProPermCard em {
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  color: rgba(254, 202, 202, 0.88);
  border: 1px solid rgba(248, 113, 113, 0.20);
  background: rgba(248, 113, 113, 0.08);
}

.roleProPermCard.allowed em {
  color: rgba(187, 247, 208, 0.95);
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.10);
}

.roleProPermCard input {
  accent-color: #8b5cf6;
}

.roleProPermCard input:disabled {
  opacity: .55;
}

@media (max-width: 760px) {
  .roleProPermCardGrid {
    grid-template-columns: 1fr !important;
  }

  .roleProPermCard {
    grid-template-columns: 22px 32px minmax(0, 1fr) !important;
  }

  .roleProPermCard em {
    grid-column: 3;
    justify-self: start;
    margin-top: 2px;
  }

  .roleProGroupTools {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
  }

  .roleProGroupTools button {
    width: 100%;
  }
}

/* ===== SETTINGS ROLES PHASE 6: QUICK FILTERS + RISK BADGES ===== */

.roleProRiskBadge {
  justify-self: end;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: rgba(191, 219, 254, 0.95);
  background: rgba(96, 165, 250, 0.10);
}

.roleProPermCard.risk-admin .roleProRiskBadge {
  border-color: rgba(251, 191, 36, 0.28);
  color: rgba(254, 240, 138, 0.95);
  background: rgba(251, 191, 36, 0.10);
}

.roleProPermCard.risk-critical .roleProRiskBadge {
  border-color: rgba(248, 113, 113, 0.34);
  color: rgba(254, 202, 202, 0.96);
  background: rgba(248, 113, 113, 0.12);
}

.roleProPermCard.risk-critical::after {
  content: "!";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: rgba(254, 202, 202, 0.96);
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.28);
}

.roleProPermToolbar {
  padding: 10px;
  border: 1px solid rgba(130, 160, 210, 0.12);
  border-radius: 14px;
  background: rgba(4, 10, 20, 0.32);
}

.roleProPermToolbar button {
  white-space: nowrap;
}

.roleProPermToolbar button:nth-of-type(4) {
  border-color: rgba(248, 113, 113, 0.25);
  color: rgba(254, 202, 202, 0.92);
}

.roleProPermCard {
  grid-template-columns: 22px 34px minmax(0, 1fr) auto auto !important;
}

@media (max-width: 760px) {
  .roleProPermToolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  .roleProPermToolbar input {
    grid-column: 1 / -1;
  }

  .roleProPermToolbar button {
    width: 100%;
  }

  .roleProPermCard {
    grid-template-columns: 22px 32px minmax(0, 1fr) !important;
  }

  .roleProRiskBadge {
    grid-column: 3;
    justify-self: start;
    margin-top: 4px;
  }

  .roleProPermCard em {
    grid-column: 3;
  }
}

/* ===== SETTINGS ROLES PHASE 11: PERMISSION INTELLIGENCE ===== */

.roleProInfoBtn {
  justify-self: end;
  border-radius: 999px;
  border: 1px solid rgba(145, 170, 220, 0.22);
  background: rgba(4, 10, 20, 0.46);
  color: rgba(210, 225, 250, 0.92);
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  cursor: pointer;
}

.roleProInfoBtn:hover {
  border-color: rgba(139, 92, 246, 0.65);
  background: rgba(139, 92, 246, 0.16);
  color: #fff;
}

.roleProInspector {
  margin: 14px 0;
  border: 1px solid rgba(130, 160, 210, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(14, 26, 46, 0.94), rgba(7, 14, 26, 0.94));
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  overflow: hidden;
}

.roleProInspector[hidden] {
  display: none !important;
}

.roleProInspectorHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(130, 160, 210, 0.14);
}

.roleProInspectorHead strong {
  display: block;
  color: rgba(245, 248, 255, 0.96);
  font-size: 15px;
}

.roleProInspectorHead small {
  display: block;
  margin-top: 3px;
  color: rgba(180, 195, 220, 0.70);
  overflow-wrap: anywhere;
}

.roleProInspectorHead button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(145, 170, 220, 0.20);
  background: rgba(4, 10, 20, 0.50);
  color: rgba(245, 248, 255, 0.92);
  cursor: pointer;
}

.roleProInspectorGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
}

.roleProInspectorGrid > div {
  border: 1px solid rgba(130, 160, 210, 0.12);
  border-radius: 13px;
  background: rgba(4, 10, 20, 0.36);
  padding: 10px 12px;
}

.roleProInspectorGrid span {
  display: block;
  color: rgba(180, 195, 220, 0.68);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.roleProInspectorGrid strong {
  color: rgba(245, 248, 255, 0.95);
  font-size: 12px;
}

.roleProInspectorGrid .risk-critical,
.roleProInspectorGrid .bad {
  color: rgba(254, 202, 202, 0.96);
}

.roleProInspectorGrid .risk-admin {
  color: rgba(254, 240, 138, 0.96);
}

.roleProInspectorGrid .risk-read,
.roleProInspectorGrid .ok {
  color: rgba(187, 247, 208, 0.96);
}

.roleProInspectorText {
  padding: 0 16px 14px;
}

.roleProInspectorText strong {
  display: block;
  color: rgba(245, 248, 255, 0.94);
  margin-bottom: 4px;
}

.roleProInspectorText p {
  margin: 0;
  color: rgba(190, 204, 226, 0.78);
  line-height: 1.45;
}

.roleProPermCard {
  grid-template-columns: 22px 34px minmax(0, 1fr) auto auto auto !important;
}

@media (max-width: 760px) {
  .roleProPermCard {
    grid-template-columns: 22px 32px minmax(0, 1fr) !important;
  }

  .roleProInfoBtn {
    grid-column: 3;
    justify-self: start;
    margin-top: 4px;
  }

  .roleProInspectorGrid {
    grid-template-columns: 1fr 1fr;
  }
}

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

/* ===== ROLE PERMISSION INFO MODAL FIX ===== */

.roleProInspectorModal {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(720px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  z-index: 99999 !important;
}

body.roleProInspectorOpen::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(5px);
  z-index: 99998;
}

.roleProInspectorModal .roleProInspectorHead button {
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 640px) {
  .roleProInspectorModal {
    width: calc(100vw - 18px) !important;
    max-height: calc(100vh - 32px) !important;
  }
}

/* ===== ROLE INFO MODAL HARD VISIBILITY FIX ===== */

#roleProPermissionInspector.roleProInspectorModal {
  display: block;
  position: fixed !important;
  z-index: 2147483647 !important;
}

#roleProPermissionInspector.roleProInspectorModal[hidden] {
  display: none !important;
}

body.roleProInspectorOpen {
  overflow: hidden;
}

body.roleProInspectorOpen::before {
  z-index: 2147483646 !important;
}

/* ===== ROLE ENHANCE PACK: HEALTH, BANNER, INSPECTOR V2 ===== */

.roleProFullAccessBanner {
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(250, 204, 21, 0.28);
  background:
    radial-gradient(circle at top left, rgba(250, 204, 21, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(32, 24, 8, 0.72), rgba(8, 14, 25, 0.88));
  padding: 14px 16px;
}

.roleProFullAccessBanner strong {
  display: block;
  color: rgba(254, 240, 138, 0.98);
  font-size: 15px;
}

.roleProFullAccessBanner span {
  display: block;
  margin-top: 4px;
  color: rgba(235, 225, 180, 0.78);
}

.roleProHealthCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 240px) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(130, 160, 210, 0.16);
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.10), transparent 38%),
    rgba(8, 16, 30, 0.78);
  padding: 14px 16px;
}

.roleProHealthCard.risk-medium {
  background:
    radial-gradient(circle at top left, rgba(251, 191, 36, 0.12), transparent 38%),
    rgba(8, 16, 30, 0.78);
}

.roleProHealthCard.risk-high {
  background:
    radial-gradient(circle at top left, rgba(248, 113, 113, 0.13), transparent 38%),
    rgba(8, 16, 30, 0.78);
}

.roleProHealthCard strong {
  display: block;
  color: rgba(245, 248, 255, 0.96);
  font-size: 15px;
}

.roleProHealthCard small {
  color: rgba(180, 195, 220, 0.72);
}

.roleProHealthScore {
  display: grid;
  gap: 7px;
}

.roleProHealthScore b {
  color: white;
  font-size: 22px;
  line-height: 1;
}

.roleProHealthScore::after {
  content: "";
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(3, 8, 16, 0.72);
}

.roleProHealthScore span {
  display: block;
  height: 8px;
  margin-top: -15px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #60a5fa, #8b5cf6);
}

.roleProHealthFacts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.roleProHealthFacts span {
  border-radius: 999px;
  border: 1px solid rgba(145, 170, 220, 0.18);
  background: rgba(4, 10, 20, 0.42);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(235, 242, 255, 0.88);
}

.roleProInspectorText + .roleProInspectorText {
  border-top: 1px solid rgba(130, 160, 210, 0.10);
  padding-top: 12px;
}

.roleProAssignedCard {
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(14, 26, 46, 0.92), rgba(7, 14, 26, 0.92)) !important;
}

.roleProAssignedUser {
  transition: transform .14s ease, border-color .14s ease;
}

.roleProAssignedUser:hover {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.45);
}

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

  .roleProHealthFacts {
    justify-content: flex-start;
  }
}

/* ===== SETTINGS ROLES: RBAC EXECUTIVE SUMMARY + HEATMAP ===== */

.roleProExecutiveCard {
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid rgba(130, 160, 210, 0.18);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(14, 26, 46, 0.96), rgba(7, 14, 26, 0.96));
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
  padding: 16px;
}

.roleProExecutiveHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.roleProExecutiveHead strong {
  display: block;
  color: rgba(245,248,255,.97);
  font-size: 16px;
}

.roleProExecutiveHead small {
  display: block;
  margin-top: 3px;
  color: rgba(180,195,220,.72);
}

.roleProExecutiveHead > span {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid rgba(34,197,94,.25);
  color: rgba(187,247,208,.96);
  background: rgba(34,197,94,.10);
}

.roleProExecutiveHead > span.risk-medium {
  border-color: rgba(251,191,36,.28);
  color: rgba(254,240,138,.96);
  background: rgba(251,191,36,.10);
}

.roleProExecutiveHead > span.risk-high {
  border-color: rgba(248,113,113,.34);
  color: rgba(254,202,202,.96);
  background: rgba(248,113,113,.12);
}

.roleProExecutiveGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.roleProExecutiveGrid > div {
  border: 1px solid rgba(130,160,210,.13);
  border-radius: 14px;
  background: rgba(4,10,20,.42);
  padding: 12px;
}

.roleProExecutiveGrid b {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.roleProExecutiveGrid span {
  display: block;
  margin-top: 6px;
  color: rgba(180,195,220,.70);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.roleProRiskHeatmap {
  display: grid;
  gap: 10px;
}

.roleProRiskHeatmap > div {
  display: grid;
  grid-template-columns: 80px 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.roleProRiskHeatmap span {
  color: rgba(210,225,250,.82);
  font-size: 12px;
  font-weight: 800;
}

.roleProRiskHeatmap strong {
  color: rgba(245,248,255,.96);
  font-size: 12px;
  text-align: right;
}

.roleProRiskHeatmap i {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(3,8,16,.72);
  border: 1px solid rgba(145,170,220,.10);
}

.roleProRiskHeatmap em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(248,113,113,.85);
}

.roleProRiskHeatmap > div:nth-child(2) em {
  background: rgba(251,191,36,.85);
}

.roleProRiskHeatmap > div:nth-child(3) em {
  background: rgba(34,197,94,.85);
}

@media (max-width: 760px) {
  .roleProExecutiveHead {
    display: grid;
  }

  .roleProExecutiveGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roleProRiskHeatmap > div {
    grid-template-columns: 70px 34px minmax(0, 1fr);
  }
}

/* ===== SETTINGS ROLES: ROLE COMPARE MODE ===== */

.roleProCompareCard {
  margin-top: 14px;
  border: 1px solid rgba(130, 160, 210, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(14, 26, 46, 0.96), rgba(7, 14, 26, 0.96));
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
  padding: 16px;
}

.roleProCompareHead {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.roleProCompareHead strong {
  display: block;
  color: rgba(245,248,255,.97);
  font-size: 16px;
}

.roleProCompareHead small,
.roleProCompareHead label span {
  display: block;
  color: rgba(180,195,220,.72);
  font-size: 11px;
  margin-top: 3px;
}

.roleProCompareHead label {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.roleProCompareHead select {
  min-height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(145, 170, 220, 0.24);
  background: rgba(4, 10, 20, 0.58);
  color: rgba(245, 248, 255, 0.96);
  padding: 8px 10px;
}

.roleProCompareStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.roleProCompareStats > div {
  border: 1px solid rgba(130,160,210,.13);
  border-radius: 14px;
  background: rgba(4,10,20,.42);
  padding: 12px;
}

.roleProCompareStats b {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.roleProCompareStats span {
  display: block;
  margin-top: 6px;
  color: rgba(180,195,220,.70);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.roleProCompareDetails {
  border: 1px solid rgba(130,160,210,.12);
  border-radius: 14px;
  background: rgba(4,10,20,.32);
  margin-top: 10px;
  overflow: hidden;
}

.roleProCompareDetails summary {
  cursor: pointer;
  padding: 12px 14px;
  color: rgba(245,248,255,.94);
  font-weight: 900;
  background: rgba(12,22,40,.46);
}

.roleProCompareLegend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 48px;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid rgba(130,160,210,.10);
  border-bottom: 1px solid rgba(130,160,210,.10);
  color: rgba(180,195,220,.74);
  font-size: 11px;
}

.roleProCompareLegend span:first-child {
  grid-column: 2;
}

.roleProCompareRows {
  display: grid;
  gap: 6px;
  padding: 10px;
  max-height: 420px;
  overflow: auto;
}

.roleProCompareRow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 48px 48px;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(130,160,210,.10);
  border-radius: 12px;
  background: rgba(4,10,20,.34);
  padding: 9px 10px;
}

.roleProCompareRow.diff {
  border-color: rgba(251,191,36,.26);
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.08), transparent 42%),
    rgba(4,10,20,.42);
}

.roleProCompareRow.risk-critical.diff {
  border-color: rgba(248,113,113,.32);
}

.roleProCompareRow > span:first-child {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(139,92,246,.14);
}

.roleProCompareRow strong {
  display: block;
  color: rgba(245,248,255,.94);
  font-size: 12px;
}

.roleProCompareRow small {
  color: rgba(180,195,220,.68);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.roleProCompareRow b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  justify-self: center;
  font-size: 14px;
}

.roleProCompareRow b.ok {
  color: rgba(187,247,208,.96);
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.24);
}

.roleProCompareRow b.bad {
  color: rgba(254,202,202,.96);
  background: rgba(248,113,113,.10);
  border: 1px solid rgba(248,113,113,.22);
}

@media (max-width: 760px) {
  .roleProCompareHead {
    display: grid;
  }

  .roleProCompareHead label {
    min-width: 0;
  }

  .roleProCompareStats {
    grid-template-columns: 1fr;
  }

  .roleProCompareLegend,
  .roleProCompareRow {
    grid-template-columns: 30px minmax(0, 1fr) 36px 36px;
  }

  .roleProCompareLegend span:first-child {
    grid-column: 3;
  }
}

/* ===== SETTINGS ROLES: RBAC VALIDATION ENGINE ===== */

.roleProValidationCard {
  margin: 14px 0;
  border-radius: 18px;
  border: 1px solid rgba(130,160,210,.18);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.10), transparent 36%),
    linear-gradient(180deg, rgba(14,26,46,.96), rgba(7,14,26,.96));
  padding: 16px;
}

.roleProValidationCard.has-warning {
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.12), transparent 36%),
    linear-gradient(180deg, rgba(14,26,46,.96), rgba(7,14,26,.96));
}

.roleProValidationCard.has-critical {
  background:
    radial-gradient(circle at top left, rgba(248,113,113,.13), transparent 36%),
    linear-gradient(180deg, rgba(14,26,46,.96), rgba(7,14,26,.96));
}

.roleProValidationHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.roleProValidationHead strong {
  display: block;
  color: rgba(245,248,255,.97);
  font-size: 16px;
}

.roleProValidationHead small {
  display: block;
  margin-top: 3px;
  color: rgba(180,195,220,.72);
}

.roleProValidationHead > span {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid rgba(34,197,94,.25);
  color: rgba(187,247,208,.96);
  background: rgba(34,197,94,.10);
}

.roleProValidationCard.has-warning .roleProValidationHead > span {
  border-color: rgba(251,191,36,.28);
  color: rgba(254,240,138,.96);
  background: rgba(251,191,36,.10);
}

.roleProValidationCard.has-critical .roleProValidationHead > span {
  border-color: rgba(248,113,113,.34);
  color: rgba(254,202,202,.96);
  background: rgba(248,113,113,.12);
}

.roleProValidationList {
  display: grid;
  gap: 8px;
}

.roleProValidationItem,
.roleProValidationClean {
  border: 1px solid rgba(130,160,210,.13);
  border-radius: 14px;
  background: rgba(4,10,20,.42);
  padding: 11px 12px;
}

.roleProValidationItem {
  border-left: 4px solid rgba(96,165,250,.85);
}

.roleProValidationItem.warning {
  border-left-color: rgba(251,191,36,.90);
}

.roleProValidationItem.critical {
  border-left-color: rgba(248,113,113,.90);
}

.roleProValidationItem strong,
.roleProValidationClean strong {
  display: block;
  color: rgba(245,248,255,.96);
  font-size: 13px;
}

.roleProValidationItem small,
.roleProValidationClean small {
  display: block;
  margin-top: 4px;
  color: rgba(180,195,220,.74);
  line-height: 1.4;
}

@media (max-width: 760px) {
  .roleProValidationHead {
    display: grid;
  }

  .roleProValidationHead > span {
    width: fit-content;
  }
}

/* ===== SETTINGS ROLES: VIEW ONLY / INTERACTION MODEL ===== */

.roleProAccessModel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid rgba(130,160,210,.18);
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.12), transparent 36%),
    linear-gradient(180deg, rgba(14,26,46,.96), rgba(7,14,26,.96));
  padding: 16px;
}

.roleProAccessModel strong {
  display: block;
  color: rgba(245,248,255,.97);
  font-size: 16px;
}

.roleProAccessModel small {
  display: block;
  margin-top: 3px;
  color: rgba(180,195,220,.72);
}

.roleProAccessMode {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.roleProAccessMode b {
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid rgba(96,165,250,.26);
  color: rgba(191,219,254,.96);
  background: rgba(96,165,250,.10);
}

.roleProAccess-admin .roleProAccessMode b {
  border-color: rgba(251,191,36,.28);
  color: rgba(254,240,138,.96);
  background: rgba(251,191,36,.10);
}

.roleProAccess-critical .roleProAccessMode b {
  border-color: rgba(248,113,113,.34);
  color: rgba(254,202,202,.96);
  background: rgba(248,113,113,.12);
}

.roleProAccessMode span {
  color: rgba(180,195,220,.72);
  font-size: 11px;
}

.roleProAccessHint {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.roleProAccessHint span {
  border-radius: 999px;
  border: 1px solid rgba(145,170,220,.14);
  background: rgba(4,10,20,.36);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(220,232,255,.84);
}

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

  .roleProAccessMode {
    justify-items: start;
  }
}

/* ===== SETTINGS ROLES: EFFECTIVE PAGE ACCESS ===== */

.roleProEffectiveBadge {
  justify-self: end;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid rgba(145,170,220,.22);
  background: rgba(4,10,20,.42);
  color: rgba(220,232,255,.88);
  white-space: nowrap;
}

.roleProEffectiveBadge.interactive {
  border-color: rgba(34,197,94,.30);
  color: rgba(187,247,208,.96);
  background: rgba(34,197,94,.10);
}

.roleProEffectiveBadge.view-only {
  border-color: rgba(251,191,36,.30);
  color: rgba(254,240,138,.96);
  background: rgba(251,191,36,.10);
}

.roleProEffectiveBadge.hidden {
  border-color: rgba(248,113,113,.28);
  color: rgba(254,202,202,.96);
  background: rgba(248,113,113,.10);
}

.roleProEffectiveHint {
  grid-column: 3 / -1;
  justify-self: end;
  color: rgba(180,195,220,.62);
  font-size: 10px;
  line-height: 1.25;
  text-align: right;
  max-width: 180px;
}

.roleProPermCard:has(.roleProEffectiveBadge.view-only) {
  border-color: rgba(251,191,36,.20) !important;
}

.roleProPermCard:has(.roleProEffectiveBadge.view-only)::before {
  background: rgba(251,191,36,.85) !important;
}

.roleProPermCard:has(.roleProEffectiveBadge.interactive)::before {
  background: rgba(34,197,94,.85) !important;
}

.roleProPermCard:has(.roleProEffectiveBadge.hidden)::before {
  background: rgba(248,113,113,.80) !important;
}

@media (max-width: 760px) {
  .roleProEffectiveBadge,
  .roleProEffectiveHint {
    grid-column: 3;
    justify-self: start;
    text-align: left;
  }
}

/* ===== SETTINGS ROLES: SAVE FEEDBACK ===== */

.settingsRoleToast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483647;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 36px));
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,.32);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.16), transparent 42%),
    rgba(8,16,30,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.42);
  padding: 13px 15px;
}

.settingsRoleToast[hidden] {
  display: none !important;
}

.settingsRoleToast strong {
  display: block;
  color: rgba(187,247,208,.96);
  font-size: 13px;
}

.settingsRoleToast span {
  display: block;
  margin-top: 3px;
  color: rgba(220,232,255,.82);
  font-size: 12px;
}

.settingsRoleToast.error {
  border-color: rgba(248,113,113,.38);
  background:
    radial-gradient(circle at top left, rgba(248,113,113,.18), transparent 42%),
    rgba(8,16,30,.96);
}

.settingsRoleToast.error strong {
  color: rgba(254,202,202,.96);
}

.settingsRoleToast.warn {
  border-color: rgba(251,191,36,.34);
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.16), transparent 42%),
    rgba(8,16,30,.96);
}

.settingsRoleToast.warn strong {
  color: rgba(254,240,138,.96);
}

.roleProUnsaved {
  box-shadow: 0 0 0 1px rgba(251,191,36,.24), 0 18px 50px rgba(0,0,0,.24);
}

.roleProUnsaved::before {
  content: "Unsaved changes";
  display: block;
  width: fit-content;
  margin: 0 0 10px auto;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,.30);
  background: rgba(251,191,36,.10);
  color: rgba(254,240,138,.96);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
}

.roleProSavedPulse {
  animation: roleProSavedPulse 1.2s ease;
}

@keyframes roleProSavedPulse {
  0% { box-shadow: 0 0 0 1px rgba(34,197,94,.0); }
  35% { box-shadow: 0 0 0 2px rgba(34,197,94,.45), 0 0 36px rgba(34,197,94,.18); }
  100% { box-shadow: 0 0 0 1px rgba(34,197,94,.0); }
}

.roleProStickyActions button:disabled,
.roleProHeroActions button:disabled {
  opacity: .58;
  cursor: wait;
}

@media (max-width: 760px) {
  .settingsRoleToast {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}

/* ===== SETTINGS ROLES: HARD INLINE SAVE STATUS ===== */

.roleProSaveStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
  color: rgba(187,247,208,.96);
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.roleProSaveStatus.warn {
  border-color: rgba(251,191,36,.32);
  background: rgba(251,191,36,.10);
  color: rgba(254,240,138,.96);
}

.roleProSaveStatus.error {
  border-color: rgba(248,113,113,.34);
  background: rgba(248,113,113,.12);
  color: rgba(254,202,202,.96);
}

.roleProSaveStatus.busy {
  border-color: rgba(96,165,250,.32);
  background: rgba(96,165,250,.10);
  color: rgba(191,219,254,.96);
}

@media (max-width: 760px) {
  .roleProSaveStatus {
    width: 100%;
  }
}

/* ===== FORCE VISIBLE ROLE SAVE FEEDBACK ===== */

#roleProSaveStatus.roleProSaveStatus {
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2147483647 !important;
  min-width: 220px;
  max-width: calc(100vw - 28px);
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,.35);
  background: rgba(8,16,30,.98);
  color: rgba(187,247,208,.98);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

#roleProSaveStatus.warn {
  border-color: rgba(251,191,36,.38);
  color: rgba(254,240,138,.98);
}

#roleProSaveStatus.busy {
  border-color: rgba(96,165,250,.38);
  color: rgba(191,219,254,.98);
}

#roleProSaveStatus.error {
  border-color: rgba(248,113,113,.42);
  color: rgba(254,202,202,.98);
}

#roleProSaveStatus[hidden] {
  display: none !important;
}

/* ===== ROLE FLOATING SAVE BAR ===== */

.roleProFloatingSaveBar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2147483647;
  width: min(760px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-radius: 18px;
  border: 1px solid rgba(251,191,36,.38);
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.16), transparent 42%),
    rgba(8,16,30,.98);
  box-shadow: 0 22px 70px rgba(0,0,0,.52);
  padding: 14px 16px;
}

.roleProFloatingSaveBar[hidden] {
  display: none !important;
}

.roleProFloatingSaveBar strong {
  display: block;
  color: rgba(254,240,138,.98);
  font-size: 14px;
}

.roleProFloatingSaveBar span {
  display: block;
  margin-top: 3px;
  color: rgba(220,232,255,.78);
  font-size: 12px;
}

.roleProFloatingSaveActions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.roleProFloatingSaveActions button {
  min-height: 36px;
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 900;
  cursor: pointer;
}

#roleProFloatingSaveBtn {
  border: 1px solid rgba(34,197,94,.36);
  background: rgba(34,197,94,.16);
  color: rgba(187,247,208,.98);
}

#roleProFloatingCancelBtn {
  border: 1px solid rgba(145,170,220,.22);
  background: rgba(4,10,20,.52);
  color: rgba(220,232,255,.88);
}

@media (max-width: 760px) {
  .roleProFloatingSaveBar {
    grid-template-columns: 1fr;
    bottom: 10px;
  }

  .roleProFloatingSaveActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .roleProFloatingSaveActions button {
    width: 100%;
  }
}

/* ===== SETTINGS ROLES: REMOVE OLD SAVE/CANCEL AREA ===== */

.roleProStickyActions:not(.roleProLockedNote) {
  display: none !important;
}

.roleProLockedNote {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(145,170,220,.16);
  background: rgba(4,10,20,.34);
  padding: 12px 14px;
}

/* ===== SETTINGS ROLES: ORPHAN ACTION VALIDATION ===== */

.roleProValidationHeadActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.roleProValidationHeadActions > span {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid rgba(34,197,94,.25);
  color: rgba(187,247,208,.96);
  background: rgba(34,197,94,.10);
}

.roleProValidationCard.has-warning .roleProValidationHeadActions > span {
  border-color: rgba(251,191,36,.28);
  color: rgba(254,240,138,.96);
  background: rgba(251,191,36,.10);
}

.roleProValidationCard.has-critical .roleProValidationHeadActions > span {
  border-color: rgba(248,113,113,.34);
  color: rgba(254,202,202,.96);
  background: rgba(248,113,113,.12);
}

.roleProValidationHeadActions button {
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,.32);
  background: rgba(96,165,250,.12);
  color: rgba(191,219,254,.96);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 760px) {
  .roleProValidationHeadActions {
    justify-content: flex-start;
  }
}

/* ===== SETTINGS RBAC EXPLORER: DISCOVERY HEALTH ===== */

.rbacExplorerHealth {
  margin-bottom: 16px;
  border-radius: 18px;
  border: 1px solid rgba(34,197,94,.26);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.12), transparent 38%),
    linear-gradient(180deg, rgba(14,26,46,.96), rgba(7,14,26,.96));
  padding: 16px;
}

.rbacExplorerHealth.warn {
  border-color: rgba(251,191,36,.30);
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.13), transparent 38%),
    linear-gradient(180deg, rgba(14,26,46,.96), rgba(7,14,26,.96));
}

.rbacExplorerHealthHead {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.rbacExplorerHealthHead h3 {
  margin: 0 0 4px 0;
}

.rbacExplorerHealthHead strong {
  font-size: 30px;
  color: rgba(245,248,255,.98);
}

.rbacExplorerHealthStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.rbacExplorerHealthStats > div,
.rbacExplorerClean,
.rbacExplorerMissingItem {
  border: 1px solid rgba(130,160,210,.14);
  border-radius: 14px;
  background: rgba(4,10,20,.42);
  padding: 12px;
}

.rbacExplorerHealthStats b {
  display: block;
  color: #fff;
  font-size: 22px;
}

.rbacExplorerHealthStats span,
.rbacExplorerClean span,
.rbacExplorerMissingItem span {
  display: block;
  margin-top: 5px;
  color: rgba(180,195,220,.74);
  font-size: 11px;
}

.rbacExplorerMissingMap {
  display: grid;
  gap: 8px;
}

.rbacExplorerMissingMap h4 {
  margin: 0 0 4px 0;
}

.rbacExplorerMissingItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-left: 4px solid rgba(251,191,36,.85);
}

.rbacExplorerMissingItem strong {
  display: block;
  color: rgba(245,248,255,.96);
}

.rbacExplorerMissingItem code {
  display: inline-block;
  margin-top: 4px;
  color: rgba(191,219,254,.92);
  overflow-wrap: anywhere;
}

.rbacExplorerClean strong {
  color: rgba(187,247,208,.96);
}

@media (max-width: 760px) {
  .rbacExplorerHealthHead {
    display: grid;
  }

  .rbacExplorerHealthStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rbacExplorerMissingItem {
    grid-template-columns: 1fr;
  }
}

/* ===== RBAC HEALTH BADGE + EXPLORER CONTROLS ===== */

.rbacHealthBadge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(34,197,94,.28);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.16), transparent 42%),
    linear-gradient(180deg, rgba(12,24,42,.96), rgba(6,12,24,.96));
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.rbacHealthBadge.warn {
  border-color: rgba(251,191,36,.35);
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.16), transparent 42%),
    linear-gradient(180deg, rgba(27,24,13,.96), rgba(8,12,22,.96));
}

.rbacHealthBadge.bad {
  border-color: rgba(248,113,113,.38);
  background:
    radial-gradient(circle at top left, rgba(248,113,113,.16), transparent 42%),
    linear-gradient(180deg, rgba(35,12,18,.96), rgba(8,12,22,.96));
}

.rbacHealthBadge strong {
  display: block;
  font-size: 15px;
  color: rgba(245,248,255,.98);
}

.rbacHealthBadge span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(190,205,230,.76);
}

.rbacHealthBadge b {
  min-width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(245,248,255,.96);
  font-size: 18px;
}

.settingsRbacExplorerHeaderActions,
.rbacExplorerHeaderActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settingsRbacExplorerHeaderActions button,
.rbacExplorerHeaderActions button,
button[data-rbac-sync-now] {
  border: 1px solid rgba(96,165,250,.30);
  background: rgba(59,130,246,.16);
  color: rgba(219,234,254,.96);
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
}

button[data-rbac-sync-now] {
  border-color: rgba(34,197,94,.32);
  background: rgba(34,197,94,.16);
  color: rgba(187,247,208,.98);
}

@media (max-width: 760px) {
  .rbacHealthBadge {
    display: grid;
  }

  .settingsRbacExplorerHeaderActions,
  .rbacExplorerHeaderActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== SAFE RBAC HEALTH BADGE ===== */

#rbacHealthInjectBox {
  margin: 0 0 16px 0;
}

.rbacHealthBadge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(34,197,94,.28);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.16), transparent 42%),
    linear-gradient(180deg, rgba(12,24,42,.96), rgba(6,12,24,.96));
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.rbacHealthBadge.warn {
  border-color: rgba(251,191,36,.35);
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.16), transparent 42%),
    linear-gradient(180deg, rgba(27,24,13,.96), rgba(8,12,22,.96));
}

.rbacHealthBadge.bad {
  border-color: rgba(248,113,113,.38);
  background:
    radial-gradient(circle at top left, rgba(248,113,113,.16), transparent 42%),
    linear-gradient(180deg, rgba(35,12,18,.96), rgba(8,12,22,.96));
}

.rbacHealthBadge strong {
  display: block;
  font-size: 15px;
  color: rgba(245,248,255,.98);
}

.rbacHealthBadge span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(190,205,230,.76);
}

.rbacHealthBadge b {
  min-width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(245,248,255,.96);
  font-size: 18px;
}

.rbacHealthActions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.rbacHealthActions button {
  border: 1px solid rgba(96,165,250,.30);
  background: rgba(59,130,246,.16);
  color: rgba(219,234,254,.96);
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
}

.rbacHealthActions button[data-rbac-health-sync] {
  border-color: rgba(34,197,94,.32);
  background: rgba(34,197,94,.16);
  color: rgba(187,247,208,.98);
}

@media (max-width: 760px) {
  .rbacHealthBadge {
    display: grid;
  }

  .rbacHealthActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .rbacHealthActions button {
    width: 100%;
  }
}

/* ===== RBAC EXPLORER HEADER HEALTH LINE ===== */

.rbacExplorerHealthLine {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid rgba(34,197,94,.26);
  background: rgba(34,197,94,.10);
  color: rgba(220,252,231,.95);
  font-size: 12px;
  font-weight: 800;
}

.rbacExplorerHealthLine.warn {
  border-color: rgba(251,191,36,.32);
  background: rgba(251,191,36,.10);
  color: rgba(254,240,138,.95);
}

.rbacExplorerHealthLine.bad {
  border-color: rgba(248,113,113,.35);
  background: rgba(248,113,113,.12);
  color: rgba(254,202,202,.95);
}

.rbacExplorerHealthLine span {
  opacity: .82;
  font-weight: 700;
}

@media (max-width: 760px) {
  .rbacExplorerHealthLine {
    border-radius: 14px;
    display: flex;
  }
}

/* ===== RBAC HEALTH POLISH ===== */

.rbacHealthBadge b small {
  display: block;
  margin-top: -2px;
  font-size: 8px;
  line-height: 1;
  opacity: .72;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#rbacHealthInjectBox .rbacHealthBadge {
  margin-bottom: 10px;
}

#rbacHealthInjectBox .rbacHealthActions {
  margin-bottom: 12px;
}

.settingsCardHeader .settingsActions:empty {
  display: none;
}

/* ===== RBAC HEALTH SCORE BADGE ===== */

.rbacHealthBadgePro {
  align-items: stretch;
}

.rbacHealthBadgePro .rbacHealthMain {
  min-width: 210px;
}

.rbacHealthBadgePro .rbacHealthMain small {
  display: block;
  margin-top: 4px;
  color: rgba(190,205,230,.62);
  font-size: 11px;
  font-weight: 700;
}

.rbacHealthStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 8px;
  flex: 1;
  align-items: stretch;
}

.rbacHealthStats > span {
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
  display: grid;
  align-content: center;
  min-height: 42px;
}

.rbacHealthStats b {
  display: block;
  min-width: 0;
  height: auto;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.1;
  color: rgba(245,248,255,.98);
}

.rbacHealthStats small {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  opacity: .68;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(220,230,245,.78);
}

.rbacHealthIssueBubble {
  align-self: stretch;
}

.rbacHealthBadge.bad {
  border-color: rgba(248,113,113,.42);
  background:
    radial-gradient(circle at top left, rgba(248,113,113,.18), transparent 42%),
    linear-gradient(180deg, rgba(35,12,18,.96), rgba(8,12,22,.96));
}

@media (max-width: 980px) {
  .rbacHealthBadgePro {
    display: grid;
  }

  .rbacHealthStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rbacHealthIssueBubble {
    width: 100%;
  }
}

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

/* ===== RBAC COMPACT HEALTH OVERRIDE ===== */

.rbacHealthBadgeCompact {
  display: grid !important;
  gap: 5px;
  padding: 12px 14px !important;
}

.rbacHealthCompactTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rbacHealthCompactTop strong {
  font-size: 14px;
}

.rbacHealthCompactTop span {
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(245,248,255,.94);
  font-size: 11px;
  font-weight: 900;
}

.rbacHealthCompactLine {
  font-size: 11px;
  color: rgba(210,224,245,.84);
  font-weight: 800;
}

.rbacHealthCompactLine.muted {
  color: rgba(160,176,205,.68);
  font-weight: 700;
}

.rbacHealthBadgeCompact .rbacHealthStats,
.rbacHealthBadgeCompact .rbacHealthIssueBubble {
  display: none !important;
}

@media (max-width: 760px) {
  .rbacHealthCompactTop {
    align-items: flex-start;
  }
}

/* ===== RBAC FINAL INFO ROUTE POLISH ===== */

.rbacExplorerHealth .warn,
.rbacExplorerRoute.warn {
  border-color: rgba(96,165,250,.24);
}

.rbacExplorerRoute.warn {
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.10), transparent 42%),
    rgba(10,18,32,.78);
}

.rbacExplorerHealthStatus.warn {
  border-color: rgba(34,197,94,.28);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.12), transparent 44%),
    rgba(10,18,32,.78);
}

/* ===== RBAC FINAL UI COMPACT BEFORE AUDIT ===== */

.rbacHealthBadgeCompact {
  margin-bottom: 10px !important;
}

#rbacHealthInjectBox .rbacHealthActions {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

#rbacHealthInjectBox .rbacHealthActions button {
  min-height: 34px;
  padding: 7px 12px;
}

/* Explorer summary cards: less bulky */
.rbacExplorerStats,
.rbacExplorerSummary,
.rbacExplorerGrid,
.rbacExplorerCards {
  gap: 8px !important;
}

.rbacExplorerStat,
.rbacExplorerMetric,
.rbacExplorerSummaryCard,
.rbacExplorerCard {
  min-height: 64px;
}

/* Critical section when clean should not shout like a fire alarm */
.rbacExplorerCriticalClean,
.rbacExplorerHealthOk,
.rbacExplorerRouteOk,
.rbacExplorerCleanNotice {
  border-color: rgba(34,197,94,.22) !important;
  background: rgba(34,197,94,.10) !important;
  color: rgba(187,247,208,.95) !important;
}

/* Info routes are informational, not "oh no the castle is burning" */
.rbacExplorerRoute.warn,
.rbacExplorerRoute.review,
.rbacExplorerRoute.info {
  border-color: rgba(96,165,250,.22) !important;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.08), transparent 42%),
    rgba(10,18,32,.76) !important;
}

.rbacExplorerRoute.warn::before,
.rbacExplorerRoute.review::before,
.rbacExplorerRoute.info::before {
  background: rgba(96,165,250,.75) !important;
}

/* Mobile: compress RBAC Explorer vertical bloat */
@media (max-width: 760px) {
  .rbacHealthBadgeCompact {
    padding: 11px 12px !important;
  }

  .rbacHealthCompactTop strong {
    font-size: 13px !important;
  }

  .rbacHealthCompactTop span {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }

  .rbacHealthCompactLine {
    font-size: 10px !important;
    line-height: 1.35;
  }

  .rbacExplorerTabs {
    gap: 5px !important;
  }

  .rbacExplorerTabs button {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  .rbacExplorerRoute,
  .rbacExplorerRouteCard {
    padding: 10px 11px !important;
  }

  .rbacExplorerRoute strong,
  .rbacExplorerRouteTitle {
    font-size: 12px !important;
  }

  .rbacExplorerStat,
  .rbacExplorerMetric,
  .rbacExplorerSummaryCard,
  .rbacExplorerCard {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }
}

/* Hide empty duplicate settings action wrappers after prior cleanup */
.settingsCardHeader .settingsActions:empty {
  display: none !important;
}

/* ===== SETTINGS ROLES: DELETE + ROLE PREVIEW ===== */

.rolePreviewBox {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(96,165,250,.18);
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.10), transparent 42%),
    rgba(8,14,28,.78);
}

.rolePreviewHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.rolePreviewHead h4 {
  margin: 0;
  color: rgba(245,248,255,.96);
  font-size: 15px;
}

.rolePreviewHead p {
  margin: 4px 0 0;
  color: rgba(170,186,215,.70);
  font-size: 12px;
}

.rolePreviewScore {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 7px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}

.rolePreviewScore b {
  color: rgba(245,248,255,.98);
  font-size: 15px;
}

.rolePreviewScore span {
  color: rgba(170,186,215,.68);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 900;
}

.rolePreviewBox details {
  margin-top: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  overflow: hidden;
}

.rolePreviewBox summary {
  cursor: pointer;
  padding: 10px 12px;
  color: rgba(220,232,252,.92);
  font-weight: 900;
  font-size: 12px;
}

.rolePreviewPills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 12px 12px;
}

.rolePreviewPills span {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.08);
}

.rolePreviewPills span.allow {
  color: rgba(187,247,208,.96);
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.22);
}

.rolePreviewPills span.deny {
  color: rgba(254,202,202,.94);
  background: rgba(248,113,113,.10);
  border-color: rgba(248,113,113,.20);
}

.rolePreviewPills span.more {
  color: rgba(191,219,254,.94);
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.22);
}

.rolePreviewEmpty {
  padding: 0 12px 12px;
  color: rgba(170,186,215,.62);
  font-size: 12px;
}

button[data-role-delete-btn] {
  background: linear-gradient(135deg, rgba(220,38,38,.95), rgba(248,113,113,.82)) !important;
  border-color: rgba(248,113,113,.36) !important;
  color: white !important;
}

@media (max-width: 760px) {
  .rolePreviewHead {
    display: grid;
  }

  .rolePreviewScore {
    width: fit-content;
  }

  .rolePreviewPills {
    max-height: 180px;
    overflow: auto;
  }
}

/* ===== ROLE SANDBOX PREVIEW FINAL ===== */

.roleSandboxButton {
  border: 1px solid rgba(96,165,250,.28) !important;
  background: rgba(96,165,250,.14) !important;
  color: rgba(219,234,254,.98) !important;
}

.roleSandboxOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 20px;
}

.roleSandboxModal {
  width: min(980px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(96,165,250,.24);
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.16), transparent 44%),
    linear-gradient(180deg, rgba(9,18,34,.98), rgba(5,10,20,.98));
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  padding: 18px;
}

.roleSandboxHead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.roleSandboxHead h3 {
  margin: 0;
  color: rgba(245,248,255,.98);
}

.roleSandboxHead p {
  margin: 5px 0 0;
  color: rgba(170,186,215,.72);
}

.roleSandboxHead button {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: white;
  border-radius: 12px;
  padding: 8px 11px;
}

.roleSandboxStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.roleSandboxStats span {
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.20);
  border-radius: 16px;
  padding: 11px;
}

.roleSandboxStats b {
  display: block;
  font-size: 20px;
  color: rgba(245,248,255,.98);
}

.roleSandboxStats small {
  display: block;
  margin-top: 3px;
  color: rgba(170,186,215,.68);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 10px;
}

.roleSandboxGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.roleSandboxGrid section {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: rgba(0,0,0,.16);
  padding: 12px;
}

.roleSandboxGrid h4 {
  margin: 0 0 10px;
  color: rgba(230,240,255,.94);
}

.roleSandboxPills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.roleSandboxPills span {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.08);
}

.roleSandboxPills span small {
  display: block;
  opacity: .55;
  font-size: 9px;
  margin-top: 2px;
}

.roleSandboxPills .ok {
  color: rgba(187,247,208,.96);
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.24);
}

.roleSandboxPills .no {
  color: rgba(254,202,202,.94);
  background: rgba(248,113,113,.10);
  border-color: rgba(248,113,113,.20);
}

.roleSandboxPills em {
  color: rgba(170,186,215,.62);
  font-style: normal;
  font-size: 12px;
}

@media (max-width: 760px) {
  .roleSandboxStats,
  .roleSandboxGrid {
    grid-template-columns: 1fr;
  }

  .roleSandboxOverlay {
    padding: 10px;
  }

  .roleSandboxModal {
    max-height: 92vh;
    padding: 14px;
  }
}

/* ===== ROLE HERO BUTTON CLICK FIX ===== */

.roleProHero,
.roleProHeroActions,
.roleProHeroActionsFixed,
.roleProHeroActions button,
.roleHeroActionButton {
  pointer-events: auto !important;
}

.roleProHeroActions,
.roleProHeroActionsFixed {
  position: relative !important;
  z-index: 50 !important;
}

.roleHeroActionButton {
  position: relative !important;
  z-index: 55 !important;
  touch-action: manipulation !important;
  user-select: none !important;
}

.roleProHero::before,
.roleProHero::after,
.roleProHeroActions::before,
.roleProHeroActions::after {
  pointer-events: none !important;
}

/* ===== PANEL ROLE SANDBOX MODE ===== */

body.panelSandboxActive {
  padding-top: 56px;
}

#panelSandboxBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  min-height: 48px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.22), transparent 44%),
    linear-gradient(90deg, rgba(8,16,32,.98), rgba(15,23,42,.98));
  border-bottom: 1px solid rgba(96,165,250,.30);
  color: rgba(245,248,255,.98);
  box-shadow: 0 12px 35px rgba(0,0,0,.32);
}

#panelSandboxBanner strong {
  font-size: 13px;
  font-weight: 1000;
}

#panelSandboxBanner span {
  color: rgba(191,219,254,.92);
  font-size: 12px;
  font-weight: 800;
}

#panelSandboxBanner button {
  margin-left: auto;
  border-radius: 999px;
  border: 1px solid rgba(248,113,113,.35);
  background: rgba(248,113,113,.14);
  color: rgba(254,226,226,.98);
  padding: 7px 11px;
  font-weight: 900;
  cursor: pointer;
}

.sandboxHidden {
  display: none !important;
}

.sandboxDeniedAction {
  opacity: .42 !important;
  filter: grayscale(.5);
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.roleSandboxButton {
  border: 1px solid rgba(96,165,250,.28) !important;
  background: rgba(96,165,250,.14) !important;
  color: rgba(219,234,254,.98) !important;
}

@media (max-width: 760px) {
  body.panelSandboxActive {
    padding-top: 72px;
  }

  #panelSandboxBanner {
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  #panelSandboxBanner button {
    margin-left: 0;
  }
}

/* ===== ROLE CLICK LAYER INSPECTOR ===== */
#roleClickLayerInspectorBox {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 99999999;
  max-height: 42vh;
  overflow: auto;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(96,165,250,.45);
  background: rgba(2,6,23,.96);
  color: rgba(219,234,254,.98);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* ===== SANDBOX SETTINGS MODULE FILTER ===== */
.sandboxDeniedSettingsModule,
.sandboxHidden {
  display: none !important;
}

/* ===== SETTINGS SANDBOX CLEAN FILTER ===== */
.sandboxHidden {
  display: none !important;
}

/* ===== RBAC ENROLLMENT VALIDATION ===== */

.roleEnrollmentValidationCard {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(59,130,246,.35);
  background:
    radial-gradient(circle at 0% 0%, rgba(59,130,246,.20), transparent 42%),
    rgba(15,23,42,.74);
  color: rgba(219,234,254,.96);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roleEnrollmentValidationCard strong {
  display: block;
  font-size: 13px;
  font-weight: 950;
}

.roleEnrollmentValidationCard p {
  margin: 4px 0 0;
  color: rgba(191,219,254,.78);
  font-size: 12px;
  line-height: 1.35;
}

.roleEnrollmentValidationCard > span {
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(96,165,250,.35);
  color: rgba(191,219,254,.98);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
}

@media (max-width: 760px) {
  .roleEnrollmentValidationCard {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===== Archive skipped backup notes START ===== */

body.is-archive-page .acmSkippedCard {
  border-color: rgba(255, 202, 96, .18);
}

body.is-archive-page .acmSkipList {
  display: grid;
  gap: 10px;
}

body.is-archive-page .acmSkipItem {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 202, 96, .14);
  background: rgba(255, 202, 96, .07);
}

body.is-archive-page .acmSkipItem > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 202, 96, .14);
  color: rgba(255, 220, 130, .95);
  flex: 0 0 auto;
}

body.is-archive-page .acmSkipItem b {
  display: block;
  color: rgba(245, 250, 255, .95);
  font-size: 13px;
  margin-bottom: 3px;
}

body.is-archive-page .acmSkipItem small {
  display: block;
  color: rgba(220, 230, 255, .62);
  font-size: 11px;
  line-height: 1.35;
}

/* ===== Archive skipped backup notes END ===== */

/* ===== SETTINGS MODULE TABS - DESKTOP OPTIMIZED ===== */

@media (min-width: 901px) {
  .settingsSubnav4I,
  #settingsModuleNav {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
    align-items: stretch;
    width: 100%;
    margin: 16px 0 18px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, .72), rgba(2, 6, 23, .42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }

  .settingsSubnav4I button,
  #settingsModuleNav button {
    min-height: 44px;
    width: 100%;
    justify-content: center;
    text-align: center;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    border: 1px solid rgba(148, 163, 184, .14);
    background: rgba(15, 23, 42, .58);
    color: rgba(226, 232, 240, .86);
    transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }

  .settingsSubnav4I button:hover,
  #settingsModuleNav button:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, .38);
    background: rgba(30, 41, 59, .78);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .22);
  }

  .settingsSubnav4I button.active,
  #settingsModuleNav button.active {
    color: #fff;
    border-color: rgba(96, 165, 250, .55);
    background:
      radial-gradient(circle at top left, rgba(96, 165, 250, .28), transparent 45%),
      linear-gradient(135deg, rgba(37, 99, 235, .82), rgba(30, 64, 175, .46));
    box-shadow:
      0 12px 26px rgba(37, 99, 235, .22),
      inset 0 1px 0 rgba(255,255,255,.12);
  }

  .settingsModuleShell {
    max-width: 1420px;
  }

  .settingsModuleCard {
    padding: 22px;
  }
}

/* Tablet bleibt kompakter, aber nicht komplett Kartoffel */
@media (min-width: 761px) and (max-width: 900px) {
  .settingsSubnav4I,
  #settingsModuleNav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .settingsSubnav4I button,
  #settingsModuleNav button {
    min-width: 132px;
  }
}

/* Mobile bewusst horizontal scrollbar statt alles zu zerquetschen */
@media (max-width: 760px) {
  .settingsSubnav4I,
  #settingsModuleNav {
    display: flex !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .settingsSubnav4I button,
  #settingsModuleNav button {
    flex: 0 0 auto;
    min-width: max-content;
  }
}

/* ===== Dashboard RBAC Notice ===== */
.dashboardAccessNotice {
  border: 1px solid rgba(251,191,36,.35);
  background: rgba(251,191,36,.08);
  margin-bottom: 14px;
}

.dashboardAccessNotice[hidden] {
  display: none !important;
}

/* ===== SETTINGS ROLES - DESKTOP LAYOUT FIX ===== */

@media (min-width: 1100px) {
  .settingsModuleShell,
  .settingsModuleCard,
  #settingsModuleContent {
    width: 100%;
    max-width: none;
  }

  .roleProLayout {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    width: 100%;
    max-width: none;
  }

  .roleProSidebar {
    position: sticky;
    top: 88px;
    align-self: start;
  }

  .roleProDetail,
  .roleProCard,
  .settingsRolePanel {
    width: 100%;
    max-width: none;
  }

  .roleProHero {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(320px, 420px);
    align-items: center;
    gap: 18px;
  }

  .roleProHeroActions,
  .roleProHeroActionsFixed {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-self: stretch;
  }

  .roleProHeroActions .dangerButton {
    grid-column: 1 / -1;
  }

  .roleProExecutiveGrid,
  .roleProStats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .roleProFields {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .roleProTabContent,
  .roleProPermGrid,
  .roleProPageGrid,
  .roleProActionGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .roleProValidationList,
  .roleProCompareGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .rolePreviewGroups,
  .rolePreviewGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1500px) {
  .roleProLayout {
    grid-template-columns: 360px minmax(0, 1fr);
  }

  .roleProTabContent,
  .roleProPermGrid,
  .roleProPageGrid,
  .roleProActionGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== SETTINGS ROLES - DESKTOP CONTAINMENT FIX ===== */

@media (min-width: 1100px) {
  #settingsModuleContent,
  .settingsModuleCard,
  .roleProLayout {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .roleProLayout {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }

  .roleProSidebar {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 280px !important;
    min-width: 0 !important;
    grid-column: 1 !important;
    z-index: 1 !important;
  }

  .roleProDetail,
  .roleProCard,
  .settingsRolePanel {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .roleProHero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) 360px !important;
    gap: 18px !important;
    align-items: center !important;
  }

  .roleProHeroMain {
    min-width: 0 !important;
  }

  .roleProHeroMain h4,
  .roleProHeroMain p {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .roleProHeroActions,
  .roleProHeroActionsFixed {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .roleProHeroActions .dangerButton,
  .roleProHeroActionsFixed .dangerButton {
    grid-column: 1 / -1 !important;
  }

  .roleProExecutiveCard,
  .roleProAccessCard,
  .roleProHealthCard,
  .roleProEditCard,
  .roleProPermissionCard,
  .roleProValidationCard,
  .roleProCompareCard {
    width: 100% !important;
    max-width: none !important;
  }

  .roleProExecutiveGrid,
  .roleProStats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .roleProPermGrid,
  .roleProPageGrid,
  .roleProActionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1500px) {
  .roleProLayout {
    grid-template-columns: 320px minmax(0, 1fr) !important;
  }

  .roleProSidebar {
    max-width: 320px !important;
  }

  .roleProPermGrid,
  .roleProPageGrid,
  .roleProActionGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ===== ROLE SELECT DESKTOP CLICK FIX ===== */
@media (min-width: 901px) {
  .roleProSidebar,
  .roleProListPanel,
  .roleProList,
  .roleProItem {
    pointer-events: auto !important;
  }

  .roleProSidebar {
    z-index: 20 !important;
  }

  .roleProDetail {
    z-index: 1 !important;
  }

  .roleProItem {
    cursor: pointer !important;
    position: relative !important;
  }
}

/* ===== Role Manager Dashboard Matrix ===== */
.roleProDashboardMatrix {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(59,130,246,.22);
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 36%),
    rgba(15,23,42,.72);
}

.roleProDashboardMatrixHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.roleProDashboardMatrixHead strong {
  display: block;
  color: rgba(226,232,240,.96);
  font-size: 14px;
  font-weight: 900;
}

.roleProDashboardMatrixHead small {
  display: block;
  color: rgba(148,163,184,.92);
  margin-top: 3px;
  font-size: 12px;
}

.roleProDashboardQuickActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.roleProDashboardQuickActions button {
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(15,23,42,.78);
  color: rgba(226,232,240,.94);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.roleProDashboardQuickActions button:hover {
  border-color: rgba(96,165,250,.45);
  background: rgba(30,41,59,.96);
}

.roleProDashboardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.roleProDashboardTile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.56);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.roleProDashboardTile:hover {
  transform: translateY(-1px);
  border-color: rgba(96,165,250,.35);
  background: rgba(30,41,59,.72);
}

.roleProDashboardTile.on {
  border-color: rgba(34,197,94,.34);
  background: rgba(34,197,94,.10);
}

.roleProDashboardTile input {
  margin-top: 2px;
}

.roleProDashboardTile b {
  display: block;
  color: rgba(226,232,240,.95);
  font-size: 13px;
}

.roleProDashboardTile small {
  display: block;
  color: rgba(148,163,184,.88);
  margin-top: 3px;
  font-size: 11px;
  word-break: break-word;
}

@media (max-width: 760px) {
  .roleProDashboardMatrixHead {
    flex-direction: column;
  }

  .roleProDashboardGrid {
    grid-template-columns: 1fr;
  }
}

.dashboardWidgetDenied {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* RBAC Discovery */
.settingsDiscoveryStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.settingsDiscoveryStats span,
.settingsDiscoveryItem {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 10px;
}
.settingsDiscoveryStats strong {
  display: block;
  font-size: 22px;
}
.settingsDiscoveryStats small,
.settingsDiscoveryItem small {
  display: block;
  opacity: .72;
  margin-top: 4px;
  word-break: break-word;
}
.settingsDiscoveryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.settingsDiscoveryItem {
  margin-bottom: 8px;
}

/* Module Wizard Stage 2 */
.wizardForm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.wizardForm label {
  display: grid;
  gap: 6px;
}
.wizardForm span {
  opacity: .75;
  font-size: 12px;
}
.wizardForm input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 12px;
  padding: 10px 12px;
}
.wizardBlueprint {
  display: grid;
  gap: 12px;
}
.wizardBlueprintGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.wizardBlueprintGrid > div {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 10px;
}
.wizardBlueprintGrid small {
  display: block;
  opacity: .65;
  margin-bottom: 4px;
}
.wizardCode {
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  border-radius: 12px;
  padding: 12px;
  overflow: auto;
}

/* Development Center */
.developmentShell {
  display: grid;
  gap: 14px;
}
.devSubnav {
  margin-bottom: 0;
}
.devStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.devStats > div {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 14px;
  padding: 14px;
}
.devStats strong {
  display: block;
  font-size: 26px;
  line-height: 1;
}
.devStats span {
  display: block;
  opacity: .72;
  margin-top: 6px;
  font-size: 12px;
}
.devGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.devGrid button {
  text-align: left;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: inherit;
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
}
.devGrid button:hover {
  background: rgba(255,255,255,.075);
}
.devGrid strong,
.devGrid span {
  display: block;
}
.devGrid span {
  opacity: .72;
  margin-top: 6px;
  font-size: 12px;
}
.devCheckList {
  display: grid;
  gap: 10px;
}
.devCheckRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 12px;
}
.devCheckRow small {
  display: block;
  opacity: .65;
  margin-top: 4px;
}
.devCheckBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.devCheckBadges span,
.devCheckBadges strong {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
}
.devCheckBadges .ok {
  background: rgba(70, 200, 120, .18);
}
.devCheckBadges .warn {
  background: rgba(255, 170, 60, .18);
}
.devCheckBadges .soft {
  background: rgba(255,255,255,.06);
}
@media (max-width: 760px) {
  .devCheckRow {
    display: grid;
  }
  .devCheckBadges {
    justify-content: flex-start;
  }
}

/* Panel Doctor */
.devDoctorList,
.devGeneratedList {
  display: grid;
  gap: 12px;
}
.devDoctorRow,
.devGeneratedItem {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 14px;
}
.devDoctorRow.ok {
  border-color: rgba(70, 200, 120, .22);
}
.devDoctorRow.warning {
  border-color: rgba(255, 190, 80, .22);
}
.devDoctorRow.broken {
  border-color: rgba(255, 90, 90, .24);
}
.devDoctorMain {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.devDoctorMain small,
.devGeneratedItem small {
  display: block;
  opacity: .65;
  margin-top: 4px;
}
.devDoctorScore {
  font-size: 22px;
  font-weight: 800;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 8px 12px;
}
.devDoctorNotes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.devDoctorNotes span {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
}
.devDoctorNotes .warn {
  background: rgba(255, 120, 90, .18);
}
.devDoctorNotes .soft {
  background: rgba(255,255,255,.06);
}
@media (max-width: 760px) {
  .devDoctorMain {
    align-items: flex-start;
  }
}

/* Development Doctor Fix Buttons */
.devMiniFix {
  border: 1px solid rgba(80,140,255,.35);
  background: rgba(70,120,255,.20);
  color: inherit;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.devMiniFix:hover {
  background: rgba(70,120,255,.30);
}

/* Human RBAC Asset polish */
.roleProPermKey {
  opacity: .48 !important;
  font-size: 11px !important;
  margin-top: 3px !important;
  word-break: break-all;
}
.roleProHumanBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  background: rgba(90, 140, 255, .16);
  border: 1px solid rgba(100, 160, 255, .28);
  color: rgba(210, 230, 255, .95);
}
.roleProPermGroup[data-role-group="Development"] {
  border-color: rgba(120, 90, 255, .22);
  box-shadow: 0 0 0 1px rgba(120, 90, 255, .05), 0 16px 40px rgba(80, 40, 160, .10);
}
.roleProPermGroup[data-role-group="Development"] .roleProPermGroupHead strong {
  color: rgba(220, 210, 255, .98);
}
.roleProPermGroup[data-role-group="Development"] .roleProGroupProgress span {
  background: linear-gradient(90deg, rgba(120,90,255,.95), rgba(80,180,255,.95));
}
.roleProPermGroup[data-role-group="Development"] .roleProPermIcon {
  background: rgba(120, 90, 255, .18);
  border-color: rgba(140, 120, 255, .25);
}

/* Wizard RBAC Template Preview */
.wizardForm4 {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.wizardForm select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 12px;
  padding: 10px 12px;
}
.wizardRolePreview {
  border: 1px solid rgba(120, 90, 255, .18);
  background: rgba(120, 90, 255, .06);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.wizardRoleDefaults,
.wizardActionPreview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizardRoleDefaults span,
.wizardActionPreview span {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}
.wizardRoleDefaults span.allowed {
  background: rgba(70, 200, 120, .14);
  border-color: rgba(70, 200, 120, .26);
}

/* Wizard Manifest Engine */
.wizardManifestCard {
  margin-top: 12px;
  border: 1px solid rgba(90, 150, 255, .18);
  background: rgba(40, 80, 160, .08);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.wizardManifestHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.wizardManifestHead h4 {
  margin: 0 0 4px;
}
.wizardManifestHead p {
  margin: 0;
  opacity: .75;
}
.wizardManifestHead > span {
  border: 1px solid rgba(120,170,255,.28);
  background: rgba(90,140,255,.16);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.wizardManifestActions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.wizardManifestActions > div {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.wizardManifestActions small {
  opacity: .62;
  word-break: break-all;
}
.wizardManifestActions em {
  justify-self: start;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.wizardManifestFiles {
  display: grid;
  gap: 6px;
}
.wizardManifestFiles span {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 8px 10px;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}
@media (max-width: 760px) {
  .wizardManifestHead {
    display: grid;
  }
}

/* Generated Modules V2 */
.devGeneratedListV2 {
  display: grid;
  gap: 14px;
}
.devGeneratedV2 {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.devGeneratedV2.ready {
  border-color: rgba(70, 200, 120, .26);
}
.devGeneratedV2.warning {
  border-color: rgba(255, 190, 80, .24);
}
.devGeneratedV2.broken {
  border-color: rgba(255, 90, 90, .24);
}
.devGeneratedV2Head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.devGeneratedV2Head h4 {
  margin: 0 0 4px;
}
.devGeneratedV2Head p {
  margin: 0;
  opacity: .68;
}
.devGeneratedV2Score {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 8px 12px;
  text-align: center;
  min-width: 78px;
}
.devGeneratedV2Score strong {
  display: block;
  font-size: 22px;
}
.devGeneratedV2Score span {
  display: block;
  font-size: 11px;
  opacity: .72;
}
.devGeneratedV2Grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.devGeneratedV2Grid > div {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 14px;
  padding: 10px;
}
.devGeneratedV2Grid small {
  display: block;
  opacity: .62;
  margin-bottom: 4px;
}
.devGeneratedChecks,
.devGeneratedActions,
.devGeneratedFiles,
.devGeneratedV2Tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.devGeneratedChecks span,
.devGeneratedActions span,
.devGeneratedFiles span {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}
.devGeneratedChecks .ok {
  background: rgba(70, 200, 120, .14);
  border-color: rgba(70, 200, 120, .28);
}
.devGeneratedChecks .bad {
  background: rgba(255, 90, 90, .14);
  border-color: rgba(255, 90, 90, .28);
}
.devGeneratedActions small {
  opacity: .58;
  margin-left: 6px;
}
.devGeneratedFiles span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
}
.devGeneratedV2Tools button {
  border: 1px solid rgba(100,150,255,.26);
  background: rgba(80,120,255,.14);
  color: inherit;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
}
.devGeneratedV2Tools button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.devGeneratedManifest[hidden] {
  display: none;
}
@media (max-width: 760px) {
  .devGeneratedV2Head {
    display: grid;
  }
  .devGeneratedV2Score {
    justify-self: start;
  }
}

/* Module Wizard Generate Feedback */
.wizardGenerateSuccess {
  margin-top: 12px;
  border: 1px solid rgba(70, 200, 120, .25);
  background: rgba(70, 200, 120, .08);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.wizardGenerateSuccessHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.wizardGenerateSuccessHead h4 {
  margin: 0 0 4px;
}
.wizardGenerateSuccessHead p {
  margin: 0;
  opacity: .78;
}
.wizardGenerateSuccessHead > span {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(70, 200, 120, .18);
  border: 1px solid rgba(70, 200, 120, .32);
}
.wizardGenerateFiles {
  display: grid;
  gap: 6px;
}
.wizardGenerateFiles span {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 8px 10px;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}
.wizardGenerateNext {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizardGenerateNext button {
  border: 1px solid rgba(100,150,255,.28);
  background: rgba(80,120,255,.16);
  color: inherit;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
}
@media (max-width: 760px) {
  .wizardGenerateSuccessHead {
    display: grid;
  }
}

/* Compact Wizard Generate Feedback */
.wizardGenerateCompact {
  margin-top: 12px;
}
.wizardGenerateCompactGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.wizardGenerateCompactGrid > div {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 12px;
  padding: 9px 10px;
}
.wizardGenerateCompactGrid small {
  display: block;
  opacity: .62;
  margin-bottom: 3px;
}
.wizardGenerateFiles.compact span {
  display: block;
  max-width: 100%;
}

/* Wizard Pipeline UI */
.wizardShipCard {
  margin-top: 12px;
  border: 1px solid rgba(80, 170, 130, .24);
  background: linear-gradient(135deg, rgba(40, 160, 110, .12), rgba(60, 90, 180, .08));
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.wizardShipCard.pending {
  border-color: rgba(120,170,255,.25);
}
.wizardShipHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.wizardShipHead h4 {
  margin: 0 0 4px;
}
.wizardShipHead p {
  margin: 0;
  opacity: .78;
}
.wizardShipHead > span {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(70, 200, 120, .18);
  border: 1px solid rgba(70, 200, 120, .32);
}
.wizardShipSteps,
.devGeneratedPipeline,
.wizardShipBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizardShipSteps span,
.devGeneratedPipeline span,
.wizardShipBadges span {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
}
.wizardShipSteps .done,
.devGeneratedPipeline .done {
  background: rgba(70, 200, 120, .14);
  border-color: rgba(70, 200, 120, .28);
}
.wizardShipSteps .todo,
.devGeneratedPipeline .todo {
  opacity: .65;
}
.devGeneratedPipeline .warn {
  background: rgba(255, 190, 80, .14);
  border-color: rgba(255, 190, 80, .28);
}
.wizardShipGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.wizardShipGrid > div {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 12px;
  padding: 9px 10px;
}
.wizardShipGrid small {
  display: block;
  opacity: .62;
  margin-bottom: 3px;
}
.wizardShipPath {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

/* Wizard Manifest Toggle */
.wizardManifestCollapsed[hidden] {
  display: none !important;
}
#settingsWizardManifestPreview {
  margin-top: 12px;
}

/* Wizard Success Asset Badges */
.wizardShipAssets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizardShipAssets span {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}
.wizardShipDetails {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 8px 10px;
}
.wizardShipDetails summary {
  cursor: pointer;
  font-weight: 800;
}
.wizardShipDetails div {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.wizardShipDetails code {
  display: block;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius: 8px;
  padding: 7px 8px;
  word-break: break-all;
  white-space: normal;
}

/* Warp2 Generated Module Actions */
.devGeneratedV2Tools button.danger {
  border-color: rgba(255, 90, 90, .35);
  background: rgba(255, 70, 70, .14);
}
.devGeneratedV2Tools button:not(:disabled):hover {
  filter: brightness(1.12);
}
.devGeneratedPipeline .done {
  color: inherit;
}

/* Generated Modules Navigation */
.generatedModulesNavGroup {
  margin-top: 14px;
}
.generatedModuleNavItem {
  width: 100%;
}
.generatedModuleNavItem span:first-child {
  margin-right: 6px;
}




/* Module Wizard Auto Detect - single clean layout */
#settingsWizard > #settingsWizardAutoDetectBox {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  clear: both;
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid rgba(120,140,255,.22);
  border-radius: 14px;
  background: rgba(35,32,70,.42);
  box-sizing: border-box;
}

#settingsWizard > #settingsWizardAutoDetectBox:empty {
  display: none !important;
}

#settingsWizard .wizardAutoDetectHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#settingsWizard .wizardConfidence {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

#settingsWizard .wizardConfidence.high { background: rgba(40,180,90,.22); color: #8ff0a4; }
#settingsWizard .wizardConfidence.medium { background: rgba(220,170,40,.22); color: #ffd36a; }
#settingsWizard .wizardConfidence.low { background: rgba(220,70,70,.22); color: #ff9b9b; }

#settingsWizardAutoDetectOfficial {
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid rgba(120,140,255,.22);
  border-radius: 14px;
  background: rgba(35,32,70,.42);
}
#settingsWizardAutoDetectOfficial:empty {
  display: none;
}

/* Module Wizard Auto Detect - inline, single source */
.wizardAutoDetectInline {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(120,140,255,.22);
  border-radius: 14px;
  background: rgba(35,32,70,.42);
}

/* RBAC Discovery Dashboard V2 */
.rbacDiscoveryHero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  margin-bottom: 14px;
}
.rbacDiscoveryHero small,
.rbacDiscoveryHero span {
  display: block;
  opacity: .72;
}
.rbacDiscoveryHero strong {
  display: block;
  font-size: 24px;
  margin: 4px 0;
}
.rbacDiscoveryHero.ok {
  border-color: rgba(70,220,120,.25);
  background: rgba(50,180,90,.08);
}
.rbacDiscoveryHero.warn {
  border-color: rgba(240,180,70,.28);
  background: rgba(240,160,70,.08);
}
.rbacDiscoveryRing {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
}
.rbacDiscoveryStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.rbacDiscoveryStats > div,
.rbacDiscoveryBreakdown > div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}
.rbacDiscoveryStats small,
.rbacDiscoveryBreakdown span {
  display: block;
  opacity: .65;
  margin-bottom: 5px;
}
.rbacDiscoveryStats strong {
  font-size: 22px;
}
.rbacDiscoveryStats .ok strong { color: #8ff0a4; }
.rbacDiscoveryStats .warn strong { color: #ffd36a; }
.rbacDiscoveryBreakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

/* ===== SETTINGS ROLES: Permission card legend layout fix ===== */
.roleProPermCard {
  grid-template-columns: 22px 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  min-height: 118px !important;
  overflow: visible !important;
}

.roleProPermText {
  grid-column: 3 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-right: 4px !important;
}

.roleProPermText strong {
  line-height: 1.15 !important;
}

.roleProPermLegend {
  display: block !important;
  margin-top: 4px !important;
  line-height: 1.28 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  color: rgba(190, 204, 226, 0.78) !important;
}

.roleProPermKey {
  display: block !important;
  margin-top: 5px !important;
  line-height: 1.2 !important;
  opacity: .46 !important;
}

.roleProRiskBadge,
.roleProInfoBtn,
.roleProHumanBadge,
.roleProPermCard em {
  grid-column: 3 !important;
  justify-self: start !important;
  align-self: start !important;
  margin-top: 6px !important;
  position: static !important;
}

.roleProRiskBadge {
  grid-row: 2 !important;
  margin-right: 6px !important;
}

.roleProInfoBtn {
  grid-row: 2 !important;
  margin-left: 58px !important;
}

.roleProHumanBadge {
  grid-row: 2 !important;
  margin-left: 104px !important;
}

.roleProPermCard em {
  grid-row: 2 !important;
  margin-left: 168px !important;
}

.roleProPermCard.risk-critical::after {
  top: 8px !important;
  right: 8px !important;
}

@media (max-width: 760px) {
  .roleProPermCard {
    grid-template-columns: 22px 32px minmax(0, 1fr) !important;
    min-height: 132px !important;
  }

  .roleProRiskBadge,
  .roleProInfoBtn,
  .roleProHumanBadge,
  .roleProPermCard em {
    grid-column: 3 !important;
    grid-row: auto !important;
    margin-left: 0 !important;
    margin-top: 6px !important;
  }

  .roleProPermCard em {
    margin-bottom: 2px !important;
  }
}

@media (max-width: 430px) {
  .roleProPermCard {
    min-height: 150px !important;
  }

  .roleProPermLegend {
    font-size: 10.5px !important;
  }
}

/* ===== SETTINGS ROLES: FINAL permission card mobile-safe layout ===== */
.roleProPermCard {
  display: grid !important;
  grid-template-columns: 22px 34px minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  gap: 8px 10px !important;
  min-height: unset !important;
  height: auto !important;
  overflow: visible !important;
  padding: 14px 12px !important;
}

.roleProPermCard > input {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.roleProPermIcon {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.roleProPermText {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.roleProPermLegend,
.roleProPermKey {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.roleProRiskBadge,
.roleProEffectiveBadge,
.roleProInfoBtn,
.roleProHumanBadge,
.roleProPermCard em {
  grid-column: 3 !important;
  grid-row: auto !important;
  justify-self: start !important;
  align-self: start !important;
  position: static !important;
  margin: 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

.roleProEffectiveHint {
  grid-column: 3 !important;
  grid-row: auto !important;
  justify-self: start !important;
  text-align: left !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.roleProPermCard::after {
  right: 8px !important;
}

@media (max-width: 760px) {
  .roleProPermGrid,
  .roleProPermCardGrid {
    grid-template-columns: 1fr !important;
  }

  .roleProPermCard {
    grid-template-columns: 22px 32px minmax(0, 1fr) !important;
    gap: 7px 9px !important;
    padding: 13px 11px !important;
  }
}

@media (min-width: 761px) {
  .roleProRiskBadge,
  .roleProEffectiveBadge {
    grid-column: 3 !important;
  }

  .roleProInfoBtn {
    grid-column: 3 !important;
  }

  .roleProPermCard em {
    grid-column: 3 !important;
  }
}

/* ===== SETTINGS ROLES: Permission badge row ===== */
.roleProPermBadgeRow {
  grid-column: 3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
  min-width: 0 !important;
}

.roleProPermBadgeRow .roleProRiskBadge,
.roleProPermBadgeRow .roleProEffectiveBadge,
.roleProPermBadgeRow .roleProInfoBtn,
.roleProPermBadgeRow .roleProHumanBadge,
.roleProPermBadgeRow em {
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
  justify-self: auto !important;
  position: static !important;
}

.roleProPermBadgeRow em {
  display: inline-flex !important;
  align-items: center !important;
}

.roleProEffectiveHint {
  grid-column: 3 !important;
  margin-top: -2px !important;
}

/* ===== SETTINGS ROLES: Permission documentation details ===== */
.roleProInspectorCapabilities {
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 6px !important;
}

.roleProInspectorCapabilities li {
  position: relative !important;
  padding-left: 20px !important;
  color: rgba(205, 220, 245, 0.86) !important;
  line-height: 1.35 !important;
}

.roleProInspectorCapabilities li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: rgba(34, 197, 94, 0.95) !important;
  font-weight: 900 !important;
}

/* ===== SETTINGS ROLES: Phase 12 Permission Intelligence ===== */
.roleProInspectorRoleList {
  display: grid !important;
  gap: 7px !important;
  margin-top: 8px !important;
}

.roleProInspectorRoleList span {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(130,160,210,.14) !important;
  background: rgba(4,10,20,.34) !important;
  color: rgba(215,230,255,.88) !important;
}

.roleProInspectorRoleList span.ok {
  border-color: rgba(34,197,94,.22) !important;
  background: rgba(34,197,94,.08) !important;
}

.roleProInspectorRoleList span.off {
  opacity: .62 !important;
}

.roleProInspectorRoleList b {
  color: rgba(34,197,94,.95) !important;
}

.roleProInspectorRoleList span.off b {
  color: rgba(248,113,113,.95) !important;
}

.roleProInspectorRoleList small {
  color: rgba(160,178,205,.58) !important;
  font-size: 10px !important;
}

.roleProInspectorKeyList {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.roleProInspectorKeyList code {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  background: rgba(96,165,250,.08) !important;
  color: rgba(191,219,254,.92) !important;
  font-size: 10px !important;
}

/* ===== SETTINGS ROLES: Phase 12 Preview + clickable keys ===== */
.roleProPreviewBox {
  margin-top: 9px !important;
  display: grid !important;
  gap: 8px !important;
}

.roleProPreviewBox > div {
  padding: 9px 10px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(130,160,210,.14) !important;
  background: rgba(4,10,20,.34) !important;
}

.roleProPreviewBox span {
  display: block !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: rgba(160,178,205,.72) !important;
  margin-bottom: 4px !important;
}

.roleProPreviewBox b {
  display: block !important;
  color: rgba(220,232,255,.92) !important;
  line-height: 1.35 !important;
}

.roleProPreviewBox button {
  width: 100% !important;
  text-align: left !important;
  border-radius: 12px !important;
  border: 1px solid rgba(96,165,250,.22) !important;
  background: rgba(96,165,250,.08) !important;
  color: rgba(220,232,255,.94) !important;
  padding: 8px 10px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.roleProPreviewBox button small {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(160,178,205,.62) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.roleProPreviewBox ul {
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 5px !important;
}

.roleProPreviewBox li {
  position: relative !important;
  padding-left: 18px !important;
  color: rgba(205,220,245,.86) !important;
}

.roleProPreviewBox li::before {
  content: "→" !important;
  position: absolute !important;
  left: 0 !important;
  color: rgba(96,165,250,.95) !important;
  font-weight: 900 !important;
}

.roleProInspectorKeyList button {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(96,165,250,.22) !important;
  background: rgba(96,165,250,.08) !important;
  color: rgba(191,219,254,.94) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.roleProInspectorKeyList button:hover,
.roleProPreviewBox button:hover {
  border-color: rgba(139,92,246,.58) !important;
  background: rgba(139,92,246,.16) !important;
  color: #fff !important;
}

/* ===== SETTINGS ROLES: Visual Impact Preview ===== */
.roleProVisualPreview {
  margin-top: 10px !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.13), transparent 42%),
    rgba(4,10,20,.36) !important;
}

.roleProVisualPreviewTop {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(130,160,210,.12) !important;
}

.roleProVisualPreviewTop strong {
  color: rgba(235,245,255,.96) !important;
}

.roleProVisualPreviewTop span {
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.roleProVisualPreviewTop span.ok {
  color: rgba(187,247,208,.96) !important;
  background: rgba(34,197,94,.12) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
}

.roleProVisualPreviewTop span.bad {
  color: rgba(254,202,202,.96) !important;
  background: rgba(248,113,113,.10) !important;
  border: 1px solid rgba(248,113,113,.24) !important;
}

.roleProVisualPreviewFrame {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  min-height: 180px !important;
}

.roleProVisualPreviewSidebar {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 12px 9px !important;
  background: rgba(2,6,14,.42) !important;
  border-right: 1px solid rgba(130,160,210,.10) !important;
}

.roleProVisualPreviewSidebar i {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  background: rgba(139,92,246,.20) !important;
}

.roleProVisualPreviewContent {
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
}

.roleProVisualPreviewHeader b {
  display: block !important;
  color: rgba(235,245,255,.96) !important;
  font-size: 13px !important;
}

.roleProVisualPreviewHeader small {
  color: rgba(170,190,220,.68) !important;
  font-size: 11px !important;
}

.roleProVisualPreviewCards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.roleProVisualPreviewCard {
  min-height: 44px !important;
  border-radius: 13px !important;
  padding: 9px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  border: 1px solid rgba(130,160,210,.14) !important;
  background: rgba(4,10,20,.45) !important;
}

.roleProVisualPreviewCard span {
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.roleProVisualPreviewCard.enabled span {
  color: rgba(187,247,208,.96) !important;
  background: rgba(34,197,94,.16) !important;
}

.roleProVisualPreviewCard.disabled {
  opacity: .62 !important;
}

.roleProVisualPreviewCard.disabled span {
  color: rgba(254,202,202,.96) !important;
  background: rgba(248,113,113,.14) !important;
}

.roleProVisualPreviewCard b {
  color: rgba(215,230,255,.88) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.roleProVisualPreviewButtons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.roleProVisualPreviewButtons button {
  border-radius: 999px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(139,92,246,.30) !important;
  background: rgba(139,92,246,.12) !important;
  color: rgba(230,220,255,.94) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

@media (max-width: 520px) {
  .roleProVisualPreviewCards {
    grid-template-columns: 1fr !important;
  }

  .roleProVisualPreviewFrame {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  .roleProVisualPreviewSidebar {
    padding-inline: 6px !important;
  }

  .roleProVisualPreviewSidebar i {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ===== SETTINGS ROLES: Typed visual previews ===== */
.roleProVisualKpiRow {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.roleProVisualKpiRow > div {
  border-radius: 14px !important;
  padding: 10px !important;
  border: 1px solid rgba(130,160,210,.15) !important;
  background:
    radial-gradient(circle at top right, rgba(96,165,250,.10), transparent 45%),
    rgba(4,10,20,.46) !important;
}

.roleProVisualKpiRow > div.active {
  border-color: rgba(34,197,94,.36) !important;
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.18), transparent 48%),
    rgba(4,10,20,.52) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,.10), 0 14px 28px rgba(34,197,94,.08) !important;
}

.roleProVisualKpiRow small {
  display: block !important;
  color: rgba(160,178,205,.72) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.roleProVisualKpiRow b {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(240,248,255,.96) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.roleProVisualKpiRow span {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(178,196,225,.70) !important;
  font-size: 10px !important;
}

@media (max-width: 520px) {
  .roleProVisualKpiRow {
    grid-template-columns: 1fr !important;
  }
}

/* ===== SETTINGS ROLES: Phase 14 live preview widgets ===== */
.roleProLivePreviewLogs,
.roleProLivePreviewServers,
.roleProLivePreviewHealth,
.roleProLivePreviewUpload,
.roleProLivePreviewWebhook {
  display: grid !important;
  gap: 8px !important;
}

.roleProLivePreviewLogs > div,
.roleProLivePreviewServers > div,
.roleProLivePreviewHealth > div,
.roleProLivePreviewWebhook > div {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 13px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(130,160,210,.14) !important;
  background: rgba(4,10,20,.46) !important;
}

.roleProLivePreviewLogs b {
  min-width: 42px !important;
  text-align: center !important;
  border-radius: 999px !important;
  padding: 3px 6px !important;
  font-size: 9px !important;
  color: rgba(191,219,254,.95) !important;
  background: rgba(96,165,250,.12) !important;
}

.roleProLivePreviewLogs span,
.roleProLivePreviewHealth span,
.roleProLivePreviewWebhook span {
  color: rgba(210,225,245,.88) !important;
  font-size: 11px !important;
}

.roleProLivePreviewServers strong,
.roleProLivePreviewUpload strong,
.roleProLivePreviewWebhook b {
  color: rgba(240,248,255,.96) !important;
  font-size: 12px !important;
}

.roleProLivePreviewServers small,
.roleProLivePreviewUpload small {
  color: rgba(170,190,220,.68) !important;
  font-size: 10px !important;
}

.roleProLivePreviewServers span {
  justify-self: end !important;
  border-radius: 999px !important;
  padding: 4px 7px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  color: rgba(187,247,208,.96) !important;
  background: rgba(34,197,94,.13) !important;
  border: 1px solid rgba(34,197,94,.24) !important;
}

.roleProLivePreviewHealth b {
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
}

.roleProLivePreviewHealth .ok b,
.roleProLivePreviewWebhook .ok {
  color: rgba(187,247,208,.96) !important;
}

.roleProLivePreviewHealth .warn b,
.roleProLivePreviewWebhook .warn {
  color: rgba(254,240,138,.96) !important;
}

.roleProLivePreviewUpload {
  border-radius: 14px !important;
  padding: 11px !important;
  border: 1px solid rgba(139,92,246,.24) !important;
  background:
    radial-gradient(circle at top right, rgba(139,92,246,.16), transparent 44%),
    rgba(4,10,20,.46) !important;
}

.roleProLivePreviewUpload button {
  justify-self: start !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(139,92,246,.32) !important;
  background: rgba(139,92,246,.14) !important;
  color: rgba(230,220,255,.95) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

@media (max-width: 520px) {
  .roleProLivePreviewServers > div,
  .roleProLivePreviewHealth > div,
  .roleProLivePreviewWebhook > div {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .roleProLivePreviewServers span {
    justify-self: start !important;
  }
}

/* ===== SETTINGS ROLES: Phase 14 Preview Renderer v2 ===== */
.roleProRealDashPreview {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.12), transparent 42%),
    linear-gradient(180deg, rgba(9,20,38,.92), rgba(4,10,20,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.roleProRealDashTop {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px 13px !important;
  border-bottom: 1px solid rgba(130,160,210,.12) !important;
}

.roleProRealDashTop strong {
  color: rgba(245,248,255,.96) !important;
  font-size: 13px !important;
}

.roleProRealDashTop small {
  color: rgba(170,190,220,.66) !important;
  font-size: 10px !important;
  text-align: right !important;
}

.roleProRealKpiGrid,
.roleProRealServerGrid,
.roleProRealHealthGrid,
.roleProRealWebhookGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
}

.roleProRealKpiCard,
.roleProRealServerGrid > div,
.roleProRealHealthGrid > div,
.roleProRealWebhookGrid > div,
.roleProRealUploadWidget {
  border-radius: 15px !important;
  border: 1px solid rgba(130,160,210,.13) !important;
  background:
    radial-gradient(circle at top right, rgba(139,92,246,.10), transparent 44%),
    rgba(4,10,20,.52) !important;
}

.roleProRealKpiCard {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: center !important;
  padding: 11px !important;
}

.roleProRealKpiCard.active {
  border-color: rgba(34,197,94,.36) !important;
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.18), transparent 48%),
    rgba(4,10,20,.56) !important;
}

.roleProRealKpiCard > span {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: rgba(139,92,246,.18) !important;
}

.roleProRealKpiCard small,
.roleProRealServerGrid small,
.roleProRealUploadWidget small {
  display: block !important;
  color: rgba(160,178,205,.72) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.roleProRealKpiCard b {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(245,248,255,.96) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.roleProRealKpiCard em {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(180,198,225,.68) !important;
  font-size: 10px !important;
  font-style: normal !important;
}

.roleProRealLogWidget {
  padding: 12px !important;
  display: grid !important;
  gap: 7px !important;
}

.roleProRealLogWidget > div {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 32px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 9px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(130,160,210,.12) !important;
  background: rgba(4,10,20,.48) !important;
}

.roleProRealLogWidget b {
  border-radius: 999px !important;
  padding: 3px 5px !important;
  text-align: center !important;
  font-size: 9px !important;
}

.roleProRealLogWidget b.info { color: rgba(191,219,254,.96) !important; background: rgba(96,165,250,.13) !important; }
.roleProRealLogWidget b.warn { color: rgba(254,240,138,.96) !important; background: rgba(251,191,36,.12) !important; }
.roleProRealLogWidget b.err { color: rgba(254,202,202,.96) !important; background: rgba(248,113,113,.12) !important; }

.roleProRealLogWidget span {
  color: rgba(215,230,245,.88) !important;
  font-size: 11px !important;
}

.roleProRealLogWidget small {
  color: rgba(150,170,200,.62) !important;
  text-align: right !important;
  font-size: 10px !important;
}

.roleProRealServerGrid > div,
.roleProRealHealthGrid > div,
.roleProRealWebhookGrid > div,
.roleProRealUploadWidget {
  padding: 11px !important;
}

.roleProRealServerGrid .online {
  display: inline-flex !important;
  width: fit-content !important;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  color: rgba(187,247,208,.96) !important;
  background: rgba(34,197,94,.12) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  margin-bottom: 7px !important;
}

.roleProRealServerGrid strong,
.roleProRealUploadWidget strong,
.roleProRealWebhookGrid b {
  display: block !important;
  color: rgba(245,248,255,.96) !important;
  font-size: 12px !important;
}

.roleProRealServerGrid b {
  display: block !important;
  margin-top: 7px !important;
  color: rgba(187,247,208,.94) !important;
  font-size: 12px !important;
}

.roleProRealHealthGrid b {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 8px !important;
}

.roleProRealHealthGrid .ok b {
  color: rgba(187,247,208,.96) !important;
  background: rgba(34,197,94,.14) !important;
}

.roleProRealHealthGrid .warn b {
  color: rgba(254,240,138,.96) !important;
  background: rgba(251,191,36,.14) !important;
}

.roleProRealHealthGrid span,
.roleProRealWebhookGrid span {
  display: block !important;
  color: rgba(215,230,245,.88) !important;
  font-size: 11px !important;
}

.roleProRealHealthGrid small {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(160,178,205,.66) !important;
  font-size: 10px !important;
}

.roleProRealUploadWidget {
  margin: 12px !important;
  display: grid !important;
  gap: 9px !important;
}

.roleProRealUploadWidget div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

.roleProRealUploadWidget button {
  border-radius: 999px !important;
  border: 1px solid rgba(139,92,246,.32) !important;
  background: rgba(139,92,246,.15) !important;
  color: rgba(230,220,255,.96) !important;
  padding: 6px 10px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

@media (max-width: 620px) {
  .roleProRealKpiGrid,
  .roleProRealServerGrid,
  .roleProRealHealthGrid,
  .roleProRealWebhookGrid {
    grid-template-columns: 1fr !important;
  }

  .roleProRealLogWidget > div {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .roleProRealLogWidget small {
    display: none !important;
  }
}

/* ===== SETTINGS ROLES: Live DOM clone preview ===== */
.roleProLiveCloneWrap {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(96,165,250,.22) !important;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.10), transparent 42%),
    rgba(4,10,20,.46) !important;
}

.roleProLiveCloneHead {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(130,160,210,.12) !important;
}

.roleProLiveCloneHead strong {
  color: rgba(220,255,235,.96) !important;
  font-size: 12px !important;
}

.roleProLiveCloneHead small {
  color: rgba(170,190,220,.66) !important;
  font-size: 10px !important;
  text-align: right !important;
}

.roleProLiveClonedNode {
  margin: 12px !important;
  max-width: 100% !important;
  pointer-events: none !important;
  transform: none !important;
}

.roleProLiveClonedNode,
.roleProLiveClonedNode * {
  box-sizing: border-box !important;
}

.roleProLiveClonedNode.statCard {
  width: auto !important;
  min-width: 0 !important;
}

.roleProLiveClonedNode .num {
  font-size: clamp(20px, 5vw, 34px) !important;
}

@media (max-width: 520px) {
  .roleProLiveCloneHead {
    display: grid !important;
  }

  .roleProLiveClonedNode {
    margin: 10px !important;
  }
}

/* ===== SETTINGS ROLES: Real dashboard section mirror ===== */
.roleProDashboardMirror {
  max-width: 100% !important;
}

.roleProDashboardMirror > .cards,
.roleProStatsCloneGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
}

.roleProDashboardMirror .statCard {
  margin: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.roleProDashboardMirror #servers,
.roleProDashboardMirror .serverTable {
  max-height: 360px !important;
  overflow: auto !important;
  padding: 10px !important;
}

.roleProDashboardMirror .serverHead {
  display: none !important;
}

.roleProDashboardMirror .serverLine {
  pointer-events: none !important;
  margin-bottom: 8px !important;
}

.roleProDashboardMirror .actionButtons,
.roleProDashboardMirror .playersInline {
  display: none !important;
}

.roleProDashboardMirror #log,
.roleProDashboardMirror pre {
  max-height: 260px !important;
  overflow: auto !important;
  margin: 12px !important;
  white-space: pre-wrap !important;
  font-size: 10px !important;
}

.roleProDashboardMirror #redirectStatus,
.roleProDashboardMirror #botStatusList,
.roleProDashboardMirror #systemMini {
  padding: 12px !important;
  max-height: 320px !important;
  overflow: auto !important;
}

.roleProDashboardMirror .roleProLiveClonedNode {
  transform: none !important;
  pointer-events: none !important;
}

@media (max-width: 620px) {
  .roleProDashboardMirror > .cards,
  .roleProStatsCloneGrid {
    grid-template-columns: 1fr !important;
  }

  .roleProDashboardMirror #servers,
  .roleProDashboardMirror .serverTable,
  .roleProDashboardMirror #redirectStatus,
  .roleProDashboardMirror #botStatusList,
  .roleProDashboardMirror #systemMini {
    max-height: 280px !important;
  }
}

/* ===== PANEL PREVIEW REGISTRY: Clean final block ===== */
.roleProImpactVisualRegistryOnly,
.roleProImpactVisualRegistryOnly * {
  box-sizing: border-box !important;
}

.roleProImpactVisualRegistryOnly .roleProImpactShell {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.roleProImpactVisualRegistryOnly .roleProImpactSide {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  padding-top: 4px !important;
}

.roleProImpactVisualRegistryOnly .roleProImpactSide span {
  width: 18px !important;
  height: 18px !important;
  border-radius: 7px !important;
  background: rgba(124,58,237,.38) !important;
}

.roleProImpactVisualRegistryOnly .roleProImpactMain {
  min-width: 0 !important;
}

.roleProImpactVisualRegistryOnly .roleProRealDashboardWidget {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.10), transparent 38%),
    rgba(4,10,20,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.roleProImpactVisualRegistryOnly .roleProRealWidgetTitle {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.roleProImpactVisualRegistryOnly .roleProRealWidgetTitle strong {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  color: rgba(238,245,255,.96) !important;
}

.roleProImpactVisualRegistryOnly .roleProRealWidgetTitle small {
  display: block !important;
  font-size: 10px !important;
  color: rgba(175,190,220,.66) !important;
  text-align: right !important;
}

.roleProImpactVisualRegistryOnly .roleProWebhookPreviewGrid,
.roleProImpactVisualRegistryOnly .roleProPlayerLookupPreview,
.roleProImpactVisualRegistryOnly .roleProPm2PreviewRows,
.roleProImpactVisualRegistryOnly .roleProSysGaugeGrid,
.roleProImpactVisualRegistryOnly .roleProSysSplit {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.roleProImpactVisualRegistryOnly .roleProSysGaugeGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.roleProImpactVisualRegistryOnly .roleProWebhookPreviewGrid > div,
.roleProImpactVisualRegistryOnly .roleProPlayerLookupPreview > div,
.roleProImpactVisualRegistryOnly .roleProPm2PreviewRows > div,
.roleProImpactVisualRegistryOnly .roleProSysGaugeGrid > div,
.roleProImpactVisualRegistryOnly .roleProSysSplit > div,
.roleProImpactVisualRegistryOnly .roleProUploadPreviewBox {
  min-width: 0 !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.16), transparent 42%),
    rgba(7,14,28,.76) !important;
}

.roleProImpactVisualRegistryOnly .roleProWebhookPreviewGrid strong,
.roleProImpactVisualRegistryOnly .roleProPlayerLookupPreview strong,
.roleProImpactVisualRegistryOnly .roleProPm2PreviewRows b,
.roleProImpactVisualRegistryOnly .roleProSysGaugeGrid strong,
.roleProImpactVisualRegistryOnly .roleProSysSplit strong,
.roleProImpactVisualRegistryOnly .roleProUploadPreviewBox strong {
  display: block !important;
  font-size: 13px !important;
  color: rgba(245,248,255,.96) !important;
}

.roleProImpactVisualRegistryOnly .roleProWebhookPreviewGrid span,
.roleProImpactVisualRegistryOnly .roleProPlayerLookupPreview span,
.roleProImpactVisualRegistryOnly .roleProPm2PreviewRows span,
.roleProImpactVisualRegistryOnly .roleProSysGaugeGrid span,
.roleProImpactVisualRegistryOnly .roleProSysGaugeGrid small,
.roleProImpactVisualRegistryOnly .roleProSysSplit b,
.roleProImpactVisualRegistryOnly .roleProSysSplit small,
.roleProImpactVisualRegistryOnly .roleProUploadPreviewBox small {
  display: block !important;
  margin-top: 4px !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  color: rgba(178,194,225,.70) !important;
}

.roleProImpactVisualRegistryOnly .roleProStatsCloneGrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.roleProImpactVisualRegistryOnly .statCard {
  min-height: 82px !important;
}

.roleProImpactVisualRegistryOnly .roleProRealLogWidget {
  display: grid !important;
  gap: 10px !important;
}

.roleProImpactVisualRegistryOnly .roleProRealLogConsole {
  min-height: 92px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  background: rgba(0,4,10,.82) !important;
  border: 1px solid rgba(120,160,220,.12) !important;
  overflow: hidden !important;
}

.roleProImpactVisualRegistryOnly .roleProRealLogConsole pre {
  margin: 0 !important;
  white-space: normal !important;
  font: 600 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: rgba(220,232,255,.82) !important;
}

.roleProImpactVisualRegistryOnly .roleProRealLogRows {
  display: grid !important;
  gap: 7px !important;
}

.roleProImpactVisualRegistryOnly .roleProRealLogRows > div {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(7,14,26,.72) !important;
  border: 1px solid rgba(120,160,220,.12) !important;
}

.roleProImpactVisualRegistryOnly .roleProRealLogRows b {
  text-align: center !important;
  font-size: 9px !important;
  border-radius: 999px !important;
  padding: 3px 6px !important;
  background: rgba(96,165,250,.14) !important;
}

.roleProImpactVisualRegistryOnly .roleProRealLogRows span {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.roleProImpactVisualRegistryOnly .roleProRealLogRows em {
  font-style: normal !important;
  font-size: 10px !important;
  color: rgba(180,195,220,.72) !important;
}

.roleProImpactVisualRegistryOnly .roleProUploadPreviewBar {
  height: 10px !important;
  margin: 12px 0 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(15,23,42,.9) !important;
  border: 1px solid rgba(120,160,220,.14) !important;
}

.roleProImpactVisualRegistryOnly .roleProUploadPreviewBar span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(124,58,237,.8), rgba(99,102,241,.9)) !important;
}

.roleProImpactVisualRegistryOnly .roleProUploadPreviewActions {
  display: grid !important;
  gap: 7px !important;
}

.roleProImpactVisualRegistryOnly .roleProUploadPreviewActions b,
.roleProImpactVisualRegistryOnly .roleProPreviewPrimaryBtn {
  display: block !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(96,165,250,.22) !important;
  background: rgba(37,99,235,.22) !important;
  color: rgba(245,248,255,.92) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  .roleProImpactVisualRegistryOnly .roleProImpactShell {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .roleProImpactVisualRegistryOnly .roleProWebhookPreviewGrid,
  .roleProImpactVisualRegistryOnly .roleProPlayerLookupPreview,
  .roleProImpactVisualRegistryOnly .roleProPm2PreviewRows,
  .roleProImpactVisualRegistryOnly .roleProSysGaugeGrid,
  .roleProImpactVisualRegistryOnly .roleProSysSplit {
    grid-template-columns: 1fr !important;
  }
}


/* ===== PANEL PREVIEW REGISTRY: Catalog meta panel ===== */
.roleProPreviewCatalogMeta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.roleProPreviewCatalogMeta > div {
  min-width: 0 !important;
  padding: 9px 10px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(120,160,220,.14) !important;
  background: rgba(3,8,18,.48) !important;
}

.roleProPreviewCatalogMeta b {
  display: block !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: rgba(165,180,210,.64) !important;
}

.roleProPreviewCatalogMeta span {
  display: block !important;
  margin-top: 3px !important;
  font-size: 11px !important;
  color: rgba(235,244,255,.92) !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 760px) {
  .roleProPreviewCatalogMeta {
    grid-template-columns: 1fr !important;
  }
}

/* ===== PANEL PREVIEW REGISTRY: Doctor UI ===== */
.roleProPreviewDoctorBox {
  margin-top: 12px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(34,197,94,.18) !important;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.10), transparent 38%),
    rgba(4,12,20,.52) !important;
}

.roleProPreviewDoctorBox.hasIssues {
  border-color: rgba(248,113,113,.24) !important;
  background:
    radial-gradient(circle at top left, rgba(248,113,113,.10), transparent 38%),
    rgba(18,8,12,.52) !important;
}

.roleProPreviewDoctorHead {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  align-items: center !important;
}

.roleProPreviewDoctorHead strong {
  color: rgba(245,248,255,.96) !important;
  font-size: 12px !important;
}

.roleProPreviewDoctorHead span {
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(34,197,94,.14) !important;
  color: rgba(187,247,208,.96) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.roleProPreviewDoctorBox.hasIssues .roleProPreviewDoctorHead span {
  background: rgba(248,113,113,.14) !important;
  color: rgba(254,202,202,.96) !important;
}

.roleProPreviewDoctorBox > small {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(180,195,220,.70) !important;
  font-size: 10px !important;
}

.roleProPreviewDoctorIssues {
  display: grid !important;
  gap: 7px !important;
  margin-top: 10px !important;
}

.roleProPreviewDoctorIssues > div {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(248,113,113,.18) !important;
  background: rgba(30,8,14,.42) !important;
}

.roleProPreviewDoctorIssues b,
.roleProPreviewDoctorIssues span {
  display: block !important;
  overflow-wrap: anywhere !important;
}

.roleProPreviewDoctorIssues b {
  color: rgba(254,226,226,.96) !important;
  font-size: 11px !important;
}

.roleProPreviewDoctorIssues span {
  margin-top: 2px !important;
  color: rgba(254,202,202,.74) !important;
  font-size: 10px !important;
}

/* ===== PANEL PREVIEW REGISTRY: Global Doctor Summary ===== */
.roleProGlobalDoctorPanel {
  margin: 0 0 14px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.10), transparent 36%),
    rgba(4,10,20,.50) !important;
}

.roleProGlobalDoctorTitle {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.roleProGlobalDoctorTitle strong {
  display: block !important;
  font-size: 14px !important;
  color: rgba(245,248,255,.96) !important;
}

.roleProGlobalDoctorTitle small {
  display: block !important;
  margin-top: 3px !important;
  font-size: 11px !important;
  color: rgba(180,195,220,.70) !important;
}

.roleProGlobalDoctorTitle span {
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(34,197,94,.14) !important;
  color: rgba(187,247,208,.96) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.roleProGlobalDoctorGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.roleProGlobalDoctorCard {
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(120,160,220,.14) !important;
  background: rgba(7,14,28,.72) !important;
}

.roleProGlobalDoctorCard.ok {
  border-color: rgba(34,197,94,.18) !important;
}

.roleProGlobalDoctorCard.bad {
  border-color: rgba(248,113,113,.28) !important;
  background:
    radial-gradient(circle at top right, rgba(248,113,113,.12), transparent 42%),
    rgba(22,8,14,.62) !important;
}

.roleProGlobalDoctorCard.warn {
  border-color: rgba(251,191,36,.26) !important;
}

.roleProGlobalDoctorCard strong,
.roleProGlobalDoctorCard b,
.roleProGlobalDoctorCard small {
  display: block !important;
}

.roleProGlobalDoctorCard strong {
  font-size: 12px !important;
  color: rgba(235,244,255,.92) !important;
}

.roleProGlobalDoctorCard b {
  margin-top: 8px !important;
  font-size: 18px !important;
  color: rgba(245,248,255,.98) !important;
}

.roleProGlobalDoctorCard small {
  margin-top: 3px !important;
  font-size: 10px !important;
  color: rgba(178,194,225,.70) !important;
}

@media (max-width: 760px) {
  .roleProGlobalDoctorGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== PANEL PREVIEW REGISTRY: Global fallback preview ===== */
.roleProImpactVisualRegistryOnly .roleProFallbackPreviewBody {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.roleProImpactVisualRegistryOnly .roleProFallbackPreviewBody > div {
  min-width: 0 !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 42%),
    rgba(7,14,28,.76) !important;
}

.roleProImpactVisualRegistryOnly .roleProFallbackPreviewBody b,
.roleProImpactVisualRegistryOnly .roleProFallbackPreviewBody strong {
  display: block !important;
}

.roleProImpactVisualRegistryOnly .roleProFallbackPreviewBody b {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: rgba(178,194,225,.70) !important;
}

.roleProImpactVisualRegistryOnly .roleProFallbackPreviewBody strong {
  margin-top: 5px !important;
  font-size: 12px !important;
  color: rgba(245,248,255,.96) !important;
  overflow-wrap: anywhere !important;
}

.roleProImpactVisualRegistryOnly .roleProFallbackNotice {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(251,191,36,.20) !important;
  background: rgba(24,18,6,.42) !important;
}

.roleProImpactVisualRegistryOnly .roleProFallbackNotice span {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: rgba(254,240,138,.95) !important;
}

.roleProImpactVisualRegistryOnly .roleProFallbackNotice small {
  font-size: 10px !important;
  color: rgba(253,230,138,.70) !important;
  text-align: right !important;
}

@media (max-width: 760px) {
  .roleProImpactVisualRegistryOnly .roleProFallbackPreviewBody {
    grid-template-columns: 1fr !important;
  }

  .roleProImpactVisualRegistryOnly .roleProFallbackNotice {
    display: grid !important;
  }

  .roleProImpactVisualRegistryOnly .roleProFallbackNotice small {
    text-align: left !important;
  }
}

/* ===== PANEL PREVIEW REGISTRY: dashboard.view dedicated preview ===== */
.roleProDashboardViewPreview {
  gap: 14px !important;
}

.roleProDashHero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.18), transparent 42%),
    rgba(7,14,28,.78) !important;
}

.roleProDashHero b,
.roleProDashHero span,
.roleProDashHero em {
  display: block !important;
}

.roleProDashHero b {
  font-size: 15px !important;
  color: rgba(245,248,255,.98) !important;
}

.roleProDashHero span {
  margin-top: 4px !important;
  font-size: 11px !important;
  color: rgba(178,194,225,.72) !important;
}

.roleProDashHero em {
  font-style: normal !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(34,197,94,.16) !important;
  color: rgba(187,247,208,.96) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.roleProDashKpiGrid,
.roleProDashServerGrid,
.roleProDashWidgetGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.roleProDashKpiGrid > div,
.roleProDashServerGrid > div,
.roleProDashWidgetGrid > div {
  min-width: 0 !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.16), transparent 42%),
    rgba(7,14,28,.76) !important;
}

.roleProDashKpiGrid span,
.roleProDashKpiGrid strong,
.roleProDashKpiGrid small,
.roleProDashServerGrid b,
.roleProDashServerGrid span,
.roleProDashServerGrid em,
.roleProDashWidgetGrid strong,
.roleProDashWidgetGrid span {
  display: block !important;
}

.roleProDashKpiGrid span,
.roleProDashServerGrid span,
.roleProDashWidgetGrid span {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  color: rgba(178,194,225,.70) !important;
}

.roleProDashKpiGrid strong {
  margin-top: 6px !important;
  font-size: 20px !important;
  color: rgba(245,248,255,.98) !important;
}

.roleProDashKpiGrid small {
  margin-top: 3px !important;
  font-size: 10px !important;
  color: rgba(178,194,225,.66) !important;
}

.roleProDashSectionTitle {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.roleProDashSectionTitle strong {
  color: rgba(245,248,255,.96) !important;
  font-size: 13px !important;
}

.roleProDashSectionTitle small {
  color: rgba(178,194,225,.66) !important;
  font-size: 10px !important;
}

.roleProDashServerGrid b,
.roleProDashWidgetGrid strong {
  font-size: 12px !important;
  color: rgba(245,248,255,.96) !important;
}

.roleProDashServerGrid em {
  margin-top: 7px !important;
  width: fit-content !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(34,197,94,.14) !important;
  color: rgba(187,247,208,.96) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  .roleProDashKpiGrid,
  .roleProDashServerGrid,
  .roleProDashWidgetGrid {
    grid-template-columns: 1fr !important;
  }

  .roleProDashHero {
    display: grid !important;
  }
}

/* ===== PANEL PREVIEW REGISTRY: Phase P global page previews ===== */
.roleProPagePreview {
  gap: 14px !important;
}

.roleProPagePreviewHero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.16), transparent 42%),
    rgba(7,14,28,.78) !important;
}

.roleProPagePreviewHero b,
.roleProPagePreviewHero span,
.roleProPagePreviewHero em {
  display: block !important;
}

.roleProPagePreviewHero b {
  font-size: 15px !important;
  color: rgba(245,248,255,.98) !important;
}

.roleProPagePreviewHero span {
  margin-top: 4px !important;
  font-size: 11px !important;
  color: rgba(178,194,225,.72) !important;
}

.roleProPagePreviewHero em {
  font-style: normal !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(34,197,94,.16) !important;
  color: rgba(187,247,208,.96) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.roleProPagePreviewGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.roleProPagePreviewGrid > div,
.roleProPageLogPreview > div {
  min-width: 0 !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.16), transparent 42%),
    rgba(7,14,28,.76) !important;
}

.roleProPagePreviewGrid b,
.roleProPagePreviewGrid strong,
.roleProPagePreviewGrid small {
  display: block !important;
}

.roleProPagePreviewGrid b {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  color: rgba(178,194,225,.70) !important;
}

.roleProPagePreviewGrid strong {
  margin-top: 6px !important;
  font-size: 14px !important;
  color: rgba(245,248,255,.98) !important;
}

.roleProPagePreviewGrid small {
  margin-top: 3px !important;
  font-size: 10px !important;
  color: rgba(178,194,225,.66) !important;
}

.roleProPageLogPreview {
  display: grid !important;
  gap: 8px !important;
}

.roleProPageLogPreview > div {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 8px !important;
}

.roleProPageLogPreview b {
  text-align: center !important;
  font-size: 9px !important;
  border-radius: 999px !important;
  padding: 3px 6px !important;
  background: rgba(96,165,250,.14) !important;
}

.roleProPageLogPreview span {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.roleProPageLogPreview em {
  font-style: normal !important;
  font-size: 10px !important;
  color: rgba(180,195,220,.72) !important;
}

@media (max-width: 760px) {
  .roleProPagePreviewGrid {
    grid-template-columns: 1fr !important;
  }

  .roleProPagePreviewHero {
    display: grid !important;
  }
}

/* ===== PANEL PREVIEW REGISTRY: dashboard.view live clone visibility ===== */
.roleProDashboardLiveOuter {
  overflow: hidden !important;
}

.roleProDashboardLiveMount {
  max-height: 520px !important;
  overflow: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background: rgba(4,10,20,.45) !important;
  padding: 12px !important;
}

.roleProDashboardLiveCloneVisible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.roleProDashboardLiveCloneVisible .dashboardGrid,
.roleProDashboardLiveCloneVisible .cards,
.roleProDashboardLiveCloneVisible .serverTable {
  width: 100% !important;
  min-width: 0 !important;
}

.roleProDashboardLiveCloneVisible .dashboardGrid {
  display: grid !important;
  gap: 12px !important;
}

.roleProDashboardLiveCloneVisible .panel {
  margin: 0 0 12px !important;
}

.roleProDashboardLiveCloneVisible button,
.roleProDashboardLiveCloneVisible input,
.roleProDashboardLiveCloneVisible select {
  pointer-events: none !important;
}

/* ===== PANEL PREVIEW REGISTRY: Phase R global live page clone CSS ===== */
.roleProPageLiveOuter {
  overflow: hidden !important;
}

.roleProPageLiveMount {
  max-height: 540px !important;
  overflow: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background: rgba(4,10,20,.45) !important;
  padding: 12px !important;
}

.roleProPageLiveCloneVisible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.roleProPageLiveCloneVisible * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.roleProPageLiveCloneVisible button,
.roleProPageLiveCloneVisible input,
.roleProPageLiveCloneVisible select,
.roleProPageLiveCloneVisible textarea,
.roleProPageLiveCloneVisible a {
  pointer-events: none !important;
}

.roleProPageLiveCloneVisible .pageHeader,
.roleProPageLiveCloneVisible .toolbar,
.roleProPageLiveCloneVisible .cards,
.roleProPageLiveCloneVisible .serverTable,
.roleProPageLiveCloneVisible .panel,
.roleProPageLiveCloneVisible .settingsPanel,
.roleProPageLiveCloneVisible .roleProShell {
  width: 100% !important;
  min-width: 0 !important;
}

.roleProPageLiveCloneVisible .pageHeader {
  margin-top: 0 !important;
}

/* ===== PANEL PREVIEW REGISTRY: Phase T global live registry hardening ===== */
.roleProPageLiveOuter,
.roleProDashboardLiveOuter {
  overflow: hidden !important;
}

.roleProPageLiveMount,
.roleProDashboardLiveMount {
  max-height: 560px !important;
  overflow: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background: rgba(4,10,20,.45) !important;
  padding: 12px !important;
}

.roleProPageLiveCloneVisible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.roleProPageLiveCloneVisible *,
.roleProPageLiveMount * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.roleProPageLiveCloneVisible button,
.roleProPageLiveCloneVisible input,
.roleProPageLiveCloneVisible select,
.roleProPageLiveCloneVisible textarea,
.roleProPageLiveCloneVisible a {
  pointer-events: none !important;
}

/* ===== RBAC Action / Button Control Map ===== */
.roleActionControlMap {
  margin: 16px 0 !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background: rgba(4,10,20,.50) !important;
}

.roleActionControlHead {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.roleActionControlHead strong,
.roleActionControlGroupHead strong {
  display: block !important;
  color: rgba(245,248,255,.96) !important;
}

.roleActionControlHead small,
.roleActionControlGroupHead small {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(180,195,220,.68) !important;
  font-size: 11px !important;
}

.roleActionControlHead > span {
  height: fit-content !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(96,165,250,.14) !important;
  color: rgba(191,219,254,.96) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.roleActionControlGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.roleActionControlGroup {
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(120,160,220,.14) !important;
  background: rgba(7,14,28,.72) !important;
}

.roleActionControlItems {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.roleActionControlItems > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 8px !important;
  align-items: center !important;
  padding: 9px 10px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(120,160,220,.12) !important;
  background: rgba(15,23,42,.52) !important;
}

.roleActionControlItems b,
.roleActionControlItems span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.roleActionControlItems b {
  font-size: 11px !important;
  color: rgba(245,248,255,.94) !important;
}

.roleActionControlItems span {
  grid-column: 1 / -1 !important;
  font-size: 10px !important;
  color: rgba(180,195,220,.68) !important;
}

.roleActionControlItems em {
  grid-row: 1 !important;
  grid-column: 2 !important;
  font-style: normal !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.roleActionControlItems .allow em {
  background: rgba(34,197,94,.15) !important;
  color: rgba(187,247,208,.96) !important;
}

.roleActionControlItems .deny em {
  background: rgba(248,113,113,.14) !important;
  color: rgba(254,202,202,.96) !important;
}

@media (max-width: 900px) {
  .roleActionControlGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Phase AA original action button previews ===== */
.roleProButtonPreviewPanel {
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background: rgba(4,10,20,.55) !important;
}

.roleProButtonPreviewHeader {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.roleProButtonPreviewHeader b {
  color: rgba(245,248,255,.96) !important;
}

.roleProButtonPreviewHeader span {
  color: rgba(180,195,220,.70) !important;
  font-size: 11px !important;
}

.roleProButtonPreviewButtons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.roleProButtonPreviewButtons button {
  opacity: 1 !important;
  pointer-events: none !important;
  cursor: default !important;
}

.roleProButtonPreviewButtons .roleProPreviewButtonActive {
  outline: 2px solid rgba(34,197,94,.75) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12), 0 0 26px rgba(34,197,94,.20) !important;
}

.roleProButtonPreviewFocus {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(15,23,42,.68) !important;
  border: 1px solid rgba(120,160,220,.14) !important;
}

.roleProButtonPreviewFocus span {
  color: rgba(180,195,220,.70) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
}

.roleProButtonPreviewFocus b {
  color: rgba(187,247,208,.96) !important;
  font-size: 11px !important;
}

/* ===== Phase AC real DOM action button previews ===== */
.roleProRealActionPreviewPanel {
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background: rgba(4,10,20,.55) !important;
}

.roleProRealActionPreviewHead {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.roleProRealActionPreviewHead b {
  color: rgba(245,248,255,.96) !important;
}

.roleProRealActionPreviewHead span {
  color: rgba(180,195,220,.70) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.roleProRealActionButtonMount {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.roleProRealActionButtonClone {
  opacity: 1 !important;
  pointer-events: none !important;
  cursor: default !important;
}

.roleProRealActionButtonMount .roleProPreviewButtonActive {
  outline: 2px solid rgba(34,197,94,.75) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12), 0 0 26px rgba(34,197,94,.20) !important;
}

/* ===== Phase AD real UI block previews ===== */
.roleProUiBlockPreviewFrame {
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background: rgba(4,10,20,.55) !important;
}

.roleProUiBlockPreviewHead {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.roleProUiBlockPreviewHead b {
  color: rgba(245,248,255,.96) !important;
}

.roleProUiBlockPreviewHead span {
  color: rgba(180,195,220,.70) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.roleProUiBlockMount {
  overflow: hidden !important;
}

.roleProUiBlockClone {
  max-width: 100% !important;
  pointer-events: none !important;
  transform-origin: top left !important;
}

.roleProUiBlockClone * {
  pointer-events: none !important;
}

.roleProUiBlockControlClone {
  opacity: 1 !important;
  cursor: default !important;
}

.roleProUiBlockClone .roleProPreviewButtonActive {
  outline: 2px solid rgba(34,197,94,.75) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12), 0 0 26px rgba(34,197,94,.20) !important;
}

/* ===== Phase AE whole page action preview ===== */
.roleProWholePagePreviewFrame {
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background: rgba(4,10,20,.55) !important;
}

.roleProWholePagePreviewHead {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.roleProWholePagePreviewHead b {
  color: rgba(245,248,255,.96) !important;
}

.roleProWholePagePreviewHead span {
  color: rgba(180,195,220,.70) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.roleProWholePageMount {
  max-height: 420px !important;
  overflow: auto !important;
  border-radius: 16px !important;
  border: 1px solid rgba(120,160,220,.12) !important;
  background: rgba(2,6,14,.45) !important;
  padding: 12px !important;
}

.roleProWholePageClone {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform-origin: top left !important;
}

.roleProWholePageClone * {
  pointer-events: none !important;
}

.roleProWholePageControlClone {
  opacity: .72 !important;
  cursor: default !important;
}

.roleProWholePageKnownAction {
  outline: 1px dashed rgba(96,165,250,.32) !important;
}

.roleProWholePageSelectedAction {
  opacity: 1 !important;
  outline: 2px solid rgba(34,197,94,.9) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.14), 0 0 28px rgba(34,197,94,.26) !important;
  position: relative !important;
  z-index: 5 !important;
}

/* ===== Phase AF Action Radar ===== */
.roleProRadarFrame {
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,160,220,.16) !important;
  background: rgba(4,10,20,.55) !important;
}

.roleProRadarHead {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.roleProRadarHead b {
  color: rgba(245,248,255,.96) !important;
}

.roleProRadarHead span {
  color: rgba(191,219,254,.90) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.roleProRadarLegend,
.roleProRadarActionList {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 8px 0 10px !important;
}

.roleProRadarLegend span,
.roleProRadarActionList span {
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.roleProRadarLegend .selected,
.roleProRadarActionList .selected {
  background: rgba(34,197,94,.16) !important;
  color: rgba(187,247,208,.96) !important;
  border: 1px solid rgba(34,197,94,.34) !important;
}

.roleProRadarLegend .known,
.roleProRadarActionList .known {
  background: rgba(96,165,250,.14) !important;
  color: rgba(191,219,254,.96) !important;
  border: 1px solid rgba(96,165,250,.30) !important;
}

.roleProRadarLegend .none,
.roleProRadarActionList .none {
  background: rgba(148,163,184,.10) !important;
  color: rgba(203,213,225,.80) !important;
  border: 1px solid rgba(148,163,184,.20) !important;
}

.roleProRadarMount {
  max-height: 430px !important;
  overflow: auto !important;
  border-radius: 16px !important;
  border: 1px solid rgba(120,160,220,.12) !important;
  background: rgba(2,6,14,.45) !important;
  padding: 12px !important;
}

.roleProRadarPageClone {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.roleProRadarPageClone * {
  pointer-events: none !important;
}

.roleProRadarControlClone {
  opacity: .68 !important;
  cursor: default !important;
}

.roleProRadarKnownAction {
  opacity: .92 !important;
  outline: 2px dashed rgba(96,165,250,.52) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.08) !important;
}

.roleProRadarSelectedAction {
  opacity: 1 !important;
  outline: 2px solid rgba(34,197,94,.95) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.16), 0 0 30px rgba(34,197,94,.30) !important;
  position: relative !important;
  z-index: 7 !important;
}

/* Phase AV - Role Info Wiki Preview */
.roleProWikiPreview {
  padding: 14px;
}

.roleProWikiGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.roleProWikiGrid > div,
.roleProWikiText,
.roleProWikiNote,
.roleProWikiColumns > div {
  background: rgba(5, 12, 28, .72);
  border: 1px solid rgba(120, 150, 255, .13);
  border-radius: 12px;
  padding: 11px;
}

.roleProWikiGrid b,
.roleProWikiColumns b,
.roleProWikiNote b {
  display: block;
  color: #8ea7ff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}

.roleProWikiGrid span,
.roleProWikiNote span,
.roleProWikiText {
  color: #d7e3ff;
}

.roleProWikiColumns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.roleProWikiColumns span {
  display: block;
  color: #c9d7ff;
  margin: 5px 0;
}

@media (max-width: 760px) {
  .roleProWikiGrid,
  .roleProWikiColumns {
    grid-template-columns: 1fr;
  }
}

/* Phase AX - safe original-style role info templates */
.roleProTemplatePreviewBody {
  margin-top: 12px;
}

.roleProTemplateScale {
  transform: scale(.92);
  transform-origin: top left;
  width: 108%;
  pointer-events: none;
}

.roleProTemplatePreview .serverTable,
.roleProTemplatePreview .logPanel,
.roleProTemplatePreview .archiveMockupPage,
.roleProTemplatePreview .botControlGrid,
.roleProTemplatePreview .statsGrid {
  margin-top: 8px;
}

.roleProTemplatePreview button {
  pointer-events: none;
}

/* Phase AX - Panel style RBAC previews */
.roleProPanelStylePreview {
  padding: 14px;
}

.roleProPanelStylePreview .stats,
.roleProMiniStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.roleProPanelStylePreview .statCard {
  min-height: 86px;
}

.roleProServerPreviewTable {
  margin-top: 12px;
  font-size: 12px;
}

.roleProServerPreviewTable .serverHead,
.roleProServerPreviewTable .serverLine {
  grid-template-columns: 1.6fr .8fr .7fr 1fr .6fr .7fr 1.1fr;
}

.roleProMiniLogPanel {
  margin-top: 12px;
}

.roleProMiniLogPanel .logBox {
  max-height: 180px;
  overflow: hidden;
}

.roleProMiniArchive .acmHero,
.roleProMiniArchive .acmStats {
  margin-top: 12px;
}

.roleProMiniBotGrid {
  margin-top: 12px;
}

.roleProPreviewActionHot {
  outline: 2px solid rgba(123, 92, 255, .9) !important;
  box-shadow: 0 0 22px rgba(123, 92, 255, .45) !important;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .roleProPanelStylePreview .stats,
  .roleProMiniStats {
    grid-template-columns: 1fr;
  }

  .roleProServerPreviewTable .serverHead,
  .roleProServerPreviewTable .serverLine {
    grid-template-columns: 1fr;
  }
}

/* Phase AX - real panel-style preview inside Roles Info */
.roleProRealPagePreview .roleProPreviewStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.roleProRealPagePreview .statCard {
  min-height: 86px;
  padding: 12px;
}

.roleProPreviewServerTable {
  margin-top: 12px;
  transform-origin: top left;
}

.roleProPreviewServerTable .serverHead,
.roleProPreviewServerTable .serverLine {
  grid-template-columns: 1.7fr .8fr .7fr 1fr .7fr .7fr 1fr;
}

.roleProPreviewServerTable .serverLine {
  pointer-events: none;
}

.roleProPreviewServerTable button {
  opacity: .75;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .roleProRealPagePreview .roleProPreviewStats {
    grid-template-columns: 1fr;
  }

  .roleProPreviewServerTable {
    overflow-x: auto;
  }
}

/* Phase BC - All *.view role preview panels */
.roleProViewPreview {
  overflow: hidden;
}

.roleProViewPreview .roleProPreviewStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.roleProViewPreview .statCard {
  min-height: 78px;
  padding: 12px;
}

.roleProViewPreview .num {
  font-size: 20px;
}

.roleProMiniPanel,
.roleProArchivePreview,
.roleProRedirectPreview,
.roleProUploadPreview,
.roleProLookupPreview,
.roleProPm2Preview,
.roleProSystemPreview,
.roleProSettingsPreview,
.roleProDevPreview,
.roleProFilesPreview,
.roleProOpsPreview,
.roleProSecurityPreview,
.roleProSecOpsPreview,
.roleProConfigPreview,
.roleProReplyPreview,
.roleProBuilderPreview {
  background: rgba(4, 10, 24, .78);
  border: 1px solid rgba(110, 145, 255, .14);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
  color: #dce7ff;
}

.roleProViewPreview pre {
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px;
  color: #d8f5ff;
  white-space: pre-wrap;
}

.roleProArchiveGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.roleProArchiveGrid > div {
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 12px;
}

.roleProViewPreview button {
  pointer-events: none;
}

@media (max-width: 760px) {
  .roleProViewPreview .roleProPreviewStats,
  .roleProArchiveGrid {
    grid-template-columns: 1fr;
  }

  .roleProPreviewServerTable {
    overflow-x: auto;
  }
}

/* Phase BD - View Template Previews for Roles Info Popup */
.roleProViewTemplatePreview {
  overflow: hidden;
}

.roleProViewTemplatePreview .roleProPreviewStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.roleProViewTemplatePreview .statCard {
  min-height: 78px;
  padding: 12px;
}

.roleProViewTemplatePreview .num {
  font-size: 20px;
}

.roleProViewTemplateBody,
.roleProGenericViewPreview,
.roleProMiniLogPanel,
.roleProArchivePreview,
.roleProRedirectPreview,
.roleProUploadPreview,
.roleProLookupPreview,
.roleProPm2Preview,
.roleProSystemPreview,
.roleProSettingsPreview,
.roleProDevPreview,
.roleProFilesPreview,
.roleProOpsPreview,
.roleProSecurityPreview,
.roleProSecOpsPreview,
.roleProConfigPreview,
.roleProReplyPreview,
.roleProBuilderPreview {
  background: rgba(4, 10, 24, .78);
  border: 1px solid rgba(110, 145, 255, .14);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
  color: #dce7ff;
}

.roleProViewTemplatePreview pre {
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px;
  color: #d8f5ff;
  white-space: pre-wrap;
  max-height: 180px;
  overflow: auto;
}

.roleProDashboardPreviewGrid,
.roleProArchiveGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.roleProArchiveCard,
.roleProArchiveGrid > div {
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 12px;
}

.roleProViewTemplatePreview button {
  pointer-events: none;
}

@media (max-width: 760px) {
  .roleProViewTemplatePreview .roleProPreviewStats,
  .roleProDashboardPreviewGrid,
  .roleProArchiveGrid {
    grid-template-columns: 1fr;
  }

  .roleProPreviewServerTable {
    overflow-x: auto;
  }
}

/* Phase BE - Stage 2 static view previews */
.roleProViewTemplatePreview .roleProPreviewStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.roleProViewTemplatePreview .statCard {
  min-height: 78px;
  padding: 12px;
}

.roleProViewTemplateBody,
.roleProGenericViewPreview,
.roleProMiniLogPanel,
.roleProArchivePreview,
.roleProConfigPreview,
.roleProDevPreview {
  background: rgba(4, 10, 24, .78);
  border: 1px solid rgba(110, 145, 255, .14);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
  color: #dce7ff;
}

.roleProViewTemplatePreview pre {
  background: rgba(0,0,0,.55);
  border-radius: 10px;
  padding: 12px;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .roleProViewTemplatePreview .roleProPreviewStats {
    grid-template-columns: 1fr;
  }
}

/* Phase BI - clean sandbox iframe previews */
.roleProPreviewSandbox {
  width: 100%;
  min-height: 520px;
  border: 1px solid rgba(110,145,255,.18);
  border-radius: 16px;
  background: #050b16;
  overflow: hidden;
}

@media (max-width: 760px) {
  .roleProPreviewSandbox {
    min-height: 620px;
  }
}

/* Phase BJ - polished sandbox previews */
.roleProPreviewSandbox {
  width: 100%;
  min-height: 520px;
  border: 1px solid rgba(110,145,255,.18);
  border-radius: 16px;
  background: #050b16;
  overflow: hidden;
}

@media (max-width: 760px) {
  .roleProPreviewSandbox {
    min-height: 620px;
  }
}

/* Phase BK - sandbox mini desktop layout */
.roleProPreviewSandbox {
  min-height: 470px;
}

@media (max-width: 760px) {
  .roleProPreviewSandbox {
    min-height: 500px;
  }
}

/* Phase BL - fixed desktop canvas inside sandbox */
.roleProPreviewSandbox {
  min-height: 430px;
}

@media (max-width: 760px) {
  .roleProPreviewSandbox {
    min-height: 460px;
  }
}

/* Phase BM - sandbox height and scale polish */
.roleProPreviewSandbox {
  min-height: 520px;
}

@media (max-width: 760px) {
  .roleProPreviewSandbox {
    min-height: 560px;
  }
}

/* Phase BP - live renderer role previews */
.roleLivePreviewHost {
  position: fixed;
  left: -99999px;
  top: -99999px;
  width: 1180px;
  pointer-events: none;
  opacity: 0;
}

.roleLiveRendererPreview {
  border: 1px solid rgba(110,145,255,.18);
  border-radius: 16px;
  background: rgba(5, 11, 22, .78);
  padding: 10px;
  overflow: hidden;
}

.roleLivePreviewLabel {
  font-size: 11px;
  font-weight: 800;
  color: rgba(220,231,255,.72);
  margin-bottom: 8px;
}

.roleLivePreviewFrame {
  transform: scale(.58);
  transform-origin: top left;
  width: 172%;
  max-height: 520px;
  overflow: hidden;
}

.roleLivePreviewFrame button,
.roleLivePreviewFrame input,
.roleLivePreviewFrame select,
.roleLivePreviewFrame textarea {
  pointer-events: none !important;
}

.rolePreviewError {
  padding: 12px;
  border-radius: 12px;
  background: rgba(127, 29, 29, .25);
  border: 1px solid rgba(248, 113, 113, .35);
  color: #fecaca;
  font-weight: 800;
}

/* Phase BR - async live preview placeholder */
.roleLivePreviewLoading {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(110,145,255,.18);
  background: rgba(5,11,22,.78);
  color: rgba(220,231,255,.78);
  font-weight: 800;
}

/* Phase BT - live preview timeout fallback */
.roleLivePreviewFallbackLabel {
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid rgba(250, 204, 21, .25);
  background: rgba(113, 63, 18, .22);
  color: #fde68a;
  font-size: 11px;
  font-weight: 900;
}

/* Phase BU - fast logs live preview */
.roleLivePreviewFrameLogs {
  transform: none;
  width: 100%;
  max-height: 520px;
}

.roleLivePreviewFrameLogs .logsPanel {
  background: rgba(6, 14, 28, .95);
  border: 1px solid rgba(110,145,255,.16);
  border-radius: 16px;
  padding: 14px;
}

.roleLivePreviewFrameLogs .logsHeader {
  border-bottom: 1px solid rgba(110,145,255,.12);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.roleLivePreviewFrameLogs .logsHeader b {
  float: right;
  color: #75f59a;
  font-size: 11px;
}

.roleLivePreviewFrameLogs .logsMiniStats,
.roleLivePreviewFrameLogs .logsHealthGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.roleLivePreviewFrameLogs .logsHealthGrid {
  grid-template-columns: 1fr 1fr;
}

.roleLivePreviewFrameLogs .logsMiniStats div,
.roleLivePreviewFrameLogs .logsHealthBox,
.roleLivePreviewFrameLogs .logsWarnBox {
  background: rgba(12, 24, 45, .88);
  border: 1px solid rgba(110,145,255,.13);
  border-radius: 12px;
  padding: 10px;
}

.roleLivePreviewFrameLogs strong {
  display: block;
  font-size: 26px;
  color: #6dff99;
}

.roleLivePreviewFrameLogs pre {
  background: #02050b;
  border-radius: 12px;
  padding: 12px;
  color: #d8f5ff;
  white-space: pre-wrap;
  font-size: 12px;
}

.roleLivePreviewFrameLogs .logsFilterButtons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.roleLivePreviewFrameLogs .logsFilterButtons button {
  background: #16233d;
  color: #dbe7ff;
  border: 1px solid #263b66;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .roleLivePreviewFrameLogs .logsMiniStats,
  .roleLivePreviewFrameLogs .logsHealthGrid {
    grid-template-columns: 1fr;
  }
}

/* Phase BV - logs preview scale polish */
.roleLiveRendererPreview {
  min-height: 360px;
}

.roleLivePreviewFrameLogs {
  transform: scale(1.18);
  transform-origin: top left;
  width: 84.75%;
  max-height: 390px;
  overflow: hidden;
}

.roleLivePreviewFrameLogs .logsPanel {
  padding: 12px;
}

.roleLivePreviewFrameLogs .logsMiniStats div,
.roleLivePreviewFrameLogs .logsHealthBox,
.roleLivePreviewFrameLogs .logsWarnBox {
  padding: 8px;
}

.roleLivePreviewFrameLogs strong {
  font-size: 22px;
}

.roleLivePreviewFrameLogs pre {
  font-size: 11px;
  max-height: 82px;
  overflow: hidden;
}

@media (max-width: 760px) {
  .roleLivePreviewFrameLogs {
    transform: scale(1.08);
    width: 92.5%;
    max-height: 400px;
  }
}

/* Phase BW - logs preview height fix */
.roleLiveRendererPreview {
  min-height: 500px;
}

.roleLivePreviewFrameLogs {
  transform: scale(1);
  width: 100%;
  max-height: 470px;
}

.roleLivePreviewFrameLogs pre {
  max-height: 120px;
}

/* Phase BY - generic action sandbox previews */
.roleActionSandboxPreview {
  border: 1px solid rgba(110,145,255,.18);
  border-radius: 16px;
  background: rgba(5,11,22,.78);
  padding: 12px;
}

.roleActionSandboxTop {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.roleActionSandboxIcon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(129,140,248,.22);
  font-size: 20px;
}

.roleActionSandboxTop strong {
  display: block;
  color: #eef4ff;
  font-size: 14px;
}

.roleActionSandboxTop small {
  display: block;
  color: rgba(220,231,255,.62);
  font-weight: 800;
  margin-top: 2px;
}

.roleActionSandboxTop span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(59,130,246,.13);
  border: 1px solid rgba(96,165,250,.22);
  font-size: 11px;
  font-weight: 900;
}

.roleActionRisk-danger .roleActionSandboxTop span {
  background: rgba(127,29,29,.26);
  border-color: rgba(248,113,113,.35);
  color: #fecaca;
}

.roleActionRisk-warn .roleActionSandboxTop span {
  background: rgba(113,63,18,.24);
  border-color: rgba(250,204,21,.28);
  color: #fde68a;
}

.roleActionRisk-safe .roleActionSandboxTop span {
  background: rgba(20,83,45,.25);
  border-color: rgba(74,222,128,.28);
  color: #bbf7d0;
}

.roleActionSandboxBody {
  display: grid;
  gap: 10px;
}

.roleActionSandboxCard,
.roleActionSandboxGrid > div,
.roleActionSandboxMock {
  background: rgba(8,18,34,.86);
  border: 1px solid rgba(110,145,255,.13);
  border-radius: 13px;
  padding: 10px;
}

.roleActionSandboxCard p {
  margin: 5px 0 0;
  color: rgba(220,231,255,.72);
}

.roleActionSandboxGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.roleActionSandboxGrid small {
  display: block;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(220,231,255,.52);
  font-size: 10px;
  font-weight: 900;
}

.roleActionSandboxGrid b {
  display: block;
  margin-top: 4px;
  color: #eef4ff;
  word-break: break-word;
}

.roleActionSandboxMock {
  display: flex;
  align-items: center;
  gap: 10px;
}

.roleActionSandboxMock button {
  background: #16233d;
  color: #dbe7ff;
  border: 1px solid #263b66;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 900;
}

.roleActionSandboxMock span {
  color: rgba(220,231,255,.65);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .roleActionSandboxTop {
    grid-template-columns: 36px 1fr;
  }

  .roleActionSandboxTop span {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .roleActionSandboxGrid {
    grid-template-columns: 1fr;
  }

  .roleActionSandboxMock {
    display: grid;
  }
}


.rbacActionDenied {
  opacity: .35 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* ===== Dashboard Extra Widgets ===== */
.dashboardExtraWidgets {
  margin-top: 18px;
}

.dashboardExtraTitle {
  margin: 0 0 12px 0;
  padding: 18px 20px;
  border: 1px solid rgba(102, 145, 255, .18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(31, 75, 180, .24), rgba(8, 14, 24, .92));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

.dashboardExtraTitle h2 {
  margin: 0 0 5px 0;
}

.dashboardExtraTitle p {
  margin: 0;
  opacity: .72;
}

.dashboardExtraGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dashboardExtraWidget {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  border-color: rgba(102, 145, 255, .16);
}

.dashboardExtraWidget::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(76, 113, 255, .22), transparent 70%);
  pointer-events: none;
}

.dashboardExtraWidget.warn::before {
  background: radial-gradient(circle, rgba(255, 190, 70, .22), transparent 70%);
}

.dashboardExtraHead {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.dashboardExtraHead h2 {
  margin: 0;
  font-size: 15px;
}

.dashboardExtraHead p {
  margin: 3px 0 0;
  opacity: .66;
  font-size: 12px;
}

.dashboardExtraHead strong {
  font-size: 20px;
  color: #91ffb8;
}

.dashboardExtraWidget.warn .dashboardExtraHead strong {
  color: #ffd166;
}

.dashboardExtraIcon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(74, 112, 255, .16);
  border: 1px solid rgba(120, 160, 255, .22);
  box-shadow: inset 0 0 20px rgba(90, 135, 255, .08);
}

.dashboardExtraRows {
  display: grid;
  gap: 8px;
}

.dashboardExtraRows div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .055);
}

.dashboardExtraRows span {
  opacity: .62;
}

.dashboardExtraRows b {
  text-align: right;
}

.dashboardExtraLoading {
  padding: 16px;
  opacity: .7;
}

@media (max-width: 1100px) {
  .dashboardExtraGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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


/* ===== Dashboard Intelligence UI Polish ===== */
.dashboardExtraWidgets {
  margin-top: 18px;
  margin-bottom: 18px;
}

.dashboardExtraTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px 18px 12px 12px;
  background:
    radial-gradient(circle at top left, rgba(74, 112, 255, .28), transparent 34%),
    linear-gradient(135deg, rgba(17, 34, 72, .96), rgba(7, 12, 22, .96));
  border: 1px solid rgba(104, 145, 255, .22);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .26);
}

.dashboardExtraTitle::after {
  content: "RBAC LIVE";
  font-size: 10px;
  letter-spacing: .08em;
  color: #92ffbc;
  border: 1px solid rgba(146, 255, 188, .28);
  background: rgba(42, 190, 98, .12);
  border-radius: 999px;
  padding: 6px 9px;
  white-space: nowrap;
}

.dashboardExtraTitle h2 {
  font-size: 17px;
  letter-spacing: -.02em;
}

.dashboardExtraTitle p {
  font-size: 12px;
  max-width: 720px;
}

.dashboardExtraGrid {
  margin-top: 12px;
  align-items: stretch;
}

.dashboardExtraWidget {
  padding: 15px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 0%, rgba(74, 112, 255, .16), transparent 34%),
    linear-gradient(180deg, rgba(13, 27, 55, .96), rgba(7, 12, 22, .98));
  border: 1px solid rgba(102, 145, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 32px rgba(0,0,0,.22);
}

.dashboardExtraWidget.ok {
  border-left: 3px solid rgba(91, 255, 147, .75);
}

.dashboardExtraWidget.warn {
  border-left: 3px solid rgba(255, 194, 84, .85);
}

.dashboardExtraHead {
  grid-template-columns: 40px 1fr auto;
  margin-bottom: 12px;
}

.dashboardExtraIcon {
  width: 38px;
  height: 38px;
  font-size: 16px;
  border-radius: 13px;
}

.dashboardExtraHead h2 {
  font-size: 14px;
  line-height: 1.15;
}

.dashboardExtraHead p {
  font-size: 11px;
  line-height: 1.25;
}

.dashboardExtraHead strong {
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(91, 255, 147, .10);
  border: 1px solid rgba(91, 255, 147, .18);
}

.dashboardExtraWidget.warn .dashboardExtraHead strong {
  background: rgba(255, 194, 84, .10);
  border-color: rgba(255, 194, 84, .22);
}

.dashboardExtraRows {
  gap: 7px;
}

.dashboardExtraRows div {
  min-height: 32px;
  align-items: center;
  padding: 7px 9px;
  font-size: 11px;
}

.dashboardExtraRows span {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
}

.dashboardExtraRows b {
  font-size: 11px;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dashboardExtraTitle {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboardExtraTitle::after {
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  .dashboardExtraWidget {
    min-height: 142px;
    padding: 13px;
  }

  .dashboardExtraHead {
    grid-template-columns: 36px 1fr auto;
    gap: 9px;
  }

  .dashboardExtraIcon {
    width: 34px;
    height: 34px;
  }

  .dashboardExtraHead strong {
    font-size: 15px;
  }
}

/* Server Overview V2 graph readability/mobile fix */
.v2WideGraph svg {
  width: 100%;
  min-height: 118px;
}

.v2GraphLegend.single {
  grid-template-columns: 1fr;
}

.v2GraphLegend.single .current {
  text-align: left;
}

@media (max-width: 760px) {
  .v2Card,
  .v2CardCompact,
  .v2GraphGrid,
  .v2WideGraphGrid3 {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .v2WideGraph {
    overflow: hidden;
  }

  .v2WideGraph svg {
    min-height: 135px;
  }

  .v2GraphTop {
    gap: 8px;
  }

  .v2GraphTop strong {
    white-space: nowrap;
    font-size: 13px;
  }

  .v2GraphLegend {
    font-size: 11px;
  }

  .axisText {
    font-size: 10px;
  }
}

/* Server Overview V2 mobile polish */
@media (max-width: 760px) {
  .v2CompactHeader {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .v2MapThumb {
    width: 96px !important;
    min-width: 96px !important;
    height: 70px !important;
  }

  .v2CompactInfo {
    min-width: 0 !important;
  }

  .v2TitleLine {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .v2TitleLine h3 {
    width: 100% !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }

  .v2CompactMeta,
  .v2Meta,
  .v2ServerMeta {
    display: grid !important;
    grid-template-columns: max-content 1fr !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .v2CompactMeta span,
  .v2Meta span,
  .v2ServerMeta span {
    display: contents !important;
  }

  .v2CardCompact {
    padding: 14px !important;
  }

  .v2GraphHeader {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .v2RangeButtons {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .v2WideGraph {
    padding: 10px !important;
  }
}

/* Server Overview V2 mobile fix 2: stop meta glue + fix header overlap */
@media (max-width: 900px) {
  .v2CompactHeader {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .v2MapThumb {
    width: 88px !important;
    min-width: 88px !important;
    height: 64px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .v2TitleLine h3 {
    font-size: 17px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .v2CompactMeta,
  .v2Meta,
  .v2ServerMeta {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin-top: 12px !important;
  }

  .v2CompactMeta span,
  .v2Meta span,
  .v2ServerMeta span {
    display: inline !important;
  }

  .v2CompactMeta div,
  .v2Meta div,
  .v2ServerMeta div {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: baseline !important;
  }

  .v2CompactMeta strong,
  .v2Meta strong,
  .v2ServerMeta strong {
    overflow-wrap: anywhere !important;
  }

  .v2GraphTop {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .v2WideGraph svg {
    min-height: 125px !important;
  }
}

@media (max-width: 520px) {
  .v2CompactHeader {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  .v2MapThumb {
    width: 76px !important;
    min-width: 76px !important;
    height: 58px !important;
  }

  .v2CompactMeta div,
  .v2Meta div,
  .v2ServerMeta div {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
}

/* Server Overview V2 graph final readability */
.v2LineA,
.v2LineB {
  stroke-width: 2 !important;
  filter: drop-shadow(0 0 3px currentColor) !important;
}

.v2WideGraph svg {
  min-height: 112px !important;
}

.v2EmptyGraphBody {
  min-height: 92px;
  display: grid;
  place-items: center;
  color: #8fa6d8;
  border: 1px dashed rgba(130,160,255,.16);
  border-radius: 12px;
  background: rgba(5,10,24,.35);
  font-size: 13px;
  text-align: center;
  padding: 14px;
}

.v2GraphGrid.v2WideGraphGrid3 {
  grid-template-columns: 1fr !important;
}

@media (min-width: 1100px) {
  .v2GraphGrid.v2WideGraphGrid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .v2GraphGrid.v2WideGraphGrid3 .v2WideGraph:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .v2LineA,
  .v2LineB {
    stroke-width: 1.8 !important;
    filter: drop-shadow(0 0 2px currentColor) !important;
  }

  .v2WideGraph svg {
    min-height: 118px !important;
  }

  .v2EmptyGraphBody {
    min-height: 82px;
    font-size: 12px;
  }
}

/* Server Overview V2: split CPU/RAM graph layout */
.v2WideGraphGrid3 {
  grid-template-columns: 1fr;
}

@media (min-width: 1180px) {
  .v2WideGraphGrid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2WideGraphGrid3 .v2WideGraph:first-child,
  .v2WideGraphGrid3 .v2WideGraph:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .v2WideGraphGrid3 {
    grid-template-columns: 1fr !important;
  }

  .v2WideGraph {
    margin-bottom: 8px;
  }
}

/* Server Overview V2: final graph polish */
.v2WideGraph {
  padding: 9px 10px !important;
}

.v2WideGraph svg {
  min-height: 105px !important;
}

.v2LineA,
.v2LineB {
  stroke-width: 2.15px !important;
  filter: drop-shadow(0 0 4px currentColor) !important;
}

.v2GraphTop span {
  font-size: 13px !important;
  font-weight: 800 !important;
}

.v2GraphTop strong {
  font-size: 13px !important;
  opacity: .95 !important;
}

.v2GraphLegend {
  margin-top: 4px !important;
  opacity: .9 !important;
}

@media (max-width: 760px) {
  .v2WideGraph {
    padding: 8px 9px !important;
    margin-bottom: 7px !important;
  }

  .v2WideGraph svg {
    min-height: 112px !important;
  }

  .v2LineA,
  .v2LineB {
    stroke-width: 1.85px !important;
    filter: drop-shadow(0 0 3px currentColor) !important;
  }

  .v2GraphTop span,
  .v2GraphTop strong {
    font-size: 12px !important;
  }

  .axisText {
    font-size: 9px !important;
    opacity: .72 !important;
  }
}

/* Server Overview V2: final pre-backup polish */
.v2WideGraph {
  min-height: auto !important;
}

.v2WideGraph svg {
  min-height: 96px !important;
}

.v2WideGraph:has(.v2GraphTop span:first-child) {
  contain: layout paint;
}

.v2RuntimeGrid > div:first-child,
.v2CrashStats > div:first-child,
[data-v2="timeline"] .v2TimelineStats > div:first-child {
  border-color: rgba(126,231,135,.32) !important;
  background: linear-gradient(135deg, rgba(32,82,46,.42), rgba(25,22,12,.78)) !important;
}

.v2RuntimeGrid > div:first-child strong,
.v2CrashStats > div:first-child strong,
[data-v2="timeline"] .v2TimelineStats > div:first-child strong {
  color: #9dff9d !important;
  font-size: 15px !important;
  letter-spacing: .2px !important;
}

@media (max-width: 760px) {
  .v2WideGraph svg {
    min-height: 100px !important;
  }

  .v2WideGraph:nth-child(2) svg,
  .v2WideGraph:nth-child(3) svg {
    min-height: 82px !important;
  }

  .v2RuntimeGrid > div:first-child strong,
  .v2CrashStats > div:first-child strong,
  [data-v2="timeline"] .v2TimelineStats > div:first-child strong {
    font-size: 16px !important;
  }

  .v2TitleLine .badge,
  .v2TitleLine span {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
}

/* Server Overview V2: player flags + ping badges */
.v2PlayersTableCompact {
  table-layout: fixed;
  width: 100%;
}

.v2PlayersTableCompact th:nth-child(1),
.v2PlayersTableCompact td:nth-child(1) {
  width: 60%;
}

.v2PlayersTableCompact th:nth-child(2),
.v2PlayersTableCompact td:nth-child(2) {
  width: 18%;
  text-align: center;
}

.v2PlayersTableCompact th:nth-child(3),
.v2PlayersTableCompact td:nth-child(3) {
  width: 22%;
  text-align: right;
}

.v2PlayerNameCell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.v2PlayerNameCell span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2CountryFlag {
  width: 22px;
  min-width: 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
}

.v2CountryFlag.empty {
  opacity: .25;
}

.v2PingBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
}

.v2PingBadge.good {
  color: #9dff9d;
  background: rgba(38,120,55,.22);
  border-color: rgba(126,231,135,.28);
}

.v2PingBadge.warn {
  color: #ffe28a;
  background: rgba(140,105,20,.22);
  border-color: rgba(255,210,90,.28);
}

.v2PingBadge.bad {
  color: #ff9c9c;
  background: rgba(150,40,40,.24);
  border-color: rgba(255,120,120,.3);
}

.v2PingBadge.unknown {
  color: #aab6d8;
  background: rgba(120,140,180,.12);
}

@media (max-width: 760px) {
  .v2PlayersTableCompact th,
  .v2PlayersTableCompact td {
    font-size: 11px !important;
    padding: 7px 5px !important;
  }

  .v2CountryFlag {
    width: 18px;
    min-width: 18px;
    font-size: 13px;
  }

  .v2PingBadge {
    min-width: 34px;
    padding: 2px 6px;
    font-size: 11px;
  }
}

/* Dashboard Server Overview: player flags + ping badges */
.dashboardPlayerRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.dashboardPlayerName {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.dashboardPlayerName span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboardCountryFlag {
  width: 22px;
  min-width: 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
}

.dashboardCountryFlag.empty {
  opacity: .25;
}

.dashboardPingBadge {
  min-width: 42px;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
}

.dashboardPingBadge.good {
  color: #9dff9d;
  background: rgba(38,120,55,.22);
  border-color: rgba(126,231,135,.28);
}

.dashboardPingBadge.warn {
  color: #ffe28a;
  background: rgba(140,105,20,.22);
  border-color: rgba(255,210,90,.28);
}

.dashboardPingBadge.bad {
  color: #ff9c9c;
  background: rgba(150,40,40,.24);
  border-color: rgba(255,120,120,.3);
}

.dashboardPingBadge.unknown {
  color: #aab6d8;
  background: rgba(120,140,180,.12);
}

.dashboardPlayerScore {
  min-width: 54px;
  text-align: right;
  font-weight: 800;
  color: #dbe6ff;
}

@media (max-width: 760px) {
  .dashboardPlayerRow {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .dashboardPlayerScore {
    display: none;
  }

  .dashboardCountryFlag {
    width: 18px;
    min-width: 18px;
    font-size: 13px;
  }

  .dashboardPingBadge {
    min-width: 34px;
    padding: 2px 6px;
    font-size: 11px;
  }
}

/* Dashboard Server Overview: final playerlist polish */
.dashboardPlayersInline {
  grid-column: 1 / -1;
  margin-top: 8px;
  border-top: 1px solid rgba(120,160,255,.08);
  background: rgba(3,8,18,.42);
}

.dashboardPlayersInline summary {
  cursor: pointer;
  padding: 8px 12px;
  color: #d8bd73;
  font-weight: 800;
  font-size: 12px;
}

.dashboardPlayersList {
  padding: 4px 10px 10px;
}

.dashboardPlayersList .dashboardPlayerRow {
  min-height: 34px;
  border-bottom: 1px solid rgba(120,160,255,.07);
}

.dashboardPlayersList .dashboardPlayerRow:last-child {
  border-bottom: none;
}

.dashboardPlayersList .dashboardPlayerName {
  font-weight: 800;
  color: #dce7ff;
}

.dashboardPlayersList .dashboardPlayerScore {
  color: #aebbe0;
}

@media (max-width: 760px) {
  .dashboardPlayersInline summary {
    padding: 8px 10px;
  }

  .dashboardPlayersList {
    padding: 3px 8px 9px;
  }
}


/* ===== Settings: user activation state badges ===== */
.settingsUserHeaderBadges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.settingsActivationBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .72);
  color: #e5e7eb;
  white-space: nowrap;
}

.settingsActivationBadge.ok {
  border-color: rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .13);
  color: #bbf7d0;
}

.settingsActivationBadge.warn {
  border-color: rgba(245, 158, 11, .48);
  background: rgba(245, 158, 11, .14);
  color: #fde68a;
}

.settingsActivationBadge.bad {
  border-color: rgba(239, 68, 68, .48);
  background: rgba(239, 68, 68, .14);
  color: #fecaca;
}

.settingsUserAdminFields small {
  display: block;
  margin-top: 4px;
  color: rgba(226, 232, 240, .68);
  font-size: 11px;
  line-height: 1.35;
}

.pendingInviteRow .settingsActivationBadge {
  margin-top: 4px;
}

@media (max-width: 720px) {
  .settingsUserAdminHeader {
    align-items: flex-start;
    gap: 10px;
  }

  .settingsUserHeaderBadges {
    justify-content: flex-start;
  }

  .settingsActivationBadge {
    white-space: normal;
  }
}

/* ===== Settings: Onboarding Activation Center ===== */
.settingsActivationSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.settingsActivationSummary > div {
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .58);
  border-radius: 14px;
  padding: 12px;
}
.settingsActivationSummary strong {
  display: block;
  font-size: 20px;
  color: #e5e7eb;
}
.settingsActivationSummary small {
  color: rgba(226, 232, 240, .65);
}
.settingsActivationGroup {
  margin-top: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 16px;
  padding: 12px;
  background: rgba(2, 6, 23, .24);
}
.settingsActivationGroupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.settingsActivationGroupHeader h4 {
  margin: 0;
  color: #e5e7eb;
}
.settingsActivationGroupHeader small {
  display: block;
  margin-top: 3px;
  color: rgba(226, 232, 240, .62);
}
.settingsActivationGroupHeader > span {
  min-width: 34px;
  text-align: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .18);
  border: 1px solid rgba(96, 165, 250, .22);
  color: #bfdbfe;
  font-weight: 800;
}
.pendingInviteRow.active-ready {
  border-color: rgba(34, 197, 94, .25);
}
.pendingInviteRow.invite-pending,
.pendingInviteRow.accepted-needs-2fa {
  border-color: rgba(245, 158, 11, .28);
}
.pendingInviteRow.invite-expired,
.pendingInviteRow.disabled {
  border-color: rgba(239, 68, 68, .28);
}
@media (max-width: 720px) {
  .settingsActivationSummary {
    grid-template-columns: 1fr;
  }
  .settingsActivationGroupHeader {
    align-items: flex-start;
  }
}

/* ===== Settings: Identity Center polish ===== */
.settingsActivationSummary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settingsIdentityUserCell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settingsIdentityAvatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  color: #dbeafe;
  background:
    radial-gradient(circle at 30% 20%, rgba(96, 165, 250, .55), transparent 38%),
    linear-gradient(135deg, rgba(37, 99, 235, .38), rgba(124, 58, 237, .28));
  border: 1px solid rgba(147, 197, 253, .28);
  box-shadow: inset 0 0 18px rgba(59, 130, 246, .16);
}

.settingsReadinessBadge {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  border: 1px solid rgba(148, 163, 184, .22);
  color: #e5e7eb;
  background: rgba(15, 23, 42, .62);
}

.settingsReadinessBadge.ok {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .12);
}

.settingsReadinessBadge.warn {
  color: #fde68a;
  border-color: rgba(245, 158, 11, .38);
  background: rgba(245, 158, 11, .12);
}

.settingsReadinessBadge.bad {
  color: #fecaca;
  border-color: rgba(239, 68, 68, .38);
  background: rgba(239, 68, 68, .12);
}

.settingsIdentityTimelineWrap {
  grid-column: 1 / -1;
  margin-top: 10px;
}

.settingsIdentityTimeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(2, 6, 23, .32);
  border: 1px solid rgba(148, 163, 184, .14);
}

.settingsIdentityTimeline > div {
  position: relative;
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(15, 23, 42, .52);
  border: 1px solid rgba(148, 163, 184, .14);
}

.settingsIdentityTimeline > div.done {
  border-color: rgba(34, 197, 94, .24);
}

.settingsIdentityTimeline > div.open {
  opacity: .58;
}

.settingsIdentityTimeline span {
  display: inline-block;
  margin-right: 4px;
}

.settingsIdentityTimeline strong {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #e5e7eb;
}

.settingsIdentityTimeline small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: rgba(226, 232, 240, .62);
  word-break: break-word;
}

@media (max-width: 900px) {
  .settingsActivationSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settingsIdentityTimeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .settingsActivationSummary,
  .settingsIdentityTimeline {
    grid-template-columns: 1fr;
  }
}

/* ===== Settings: Identity Center final polish ===== */
.settingsManageUserBtn {
  border: 1px solid rgba(96, 165, 250, .28);
  background: rgba(37, 99, 235, .16);
  color: #bfdbfe;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.settingsManageUserBtn:hover {
  background: rgba(37, 99, 235, .26);
  border-color: rgba(147, 197, 253, .42);
}

.settingsIdentityTimeline {
  padding: 8px;
  gap: 7px;
}

.settingsIdentityTimeline > div {
  padding: 7px 8px;
}

.settingsIdentityTimeline strong {
  font-size: 10.5px;
}

.settingsIdentityTimeline small {
  font-size: 9.5px;
}

.settingsActivationGroup {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.settingsActivationSummary > div {
  min-height: 58px;
}

/* ===== Settings: Identity Health + Journey ===== */
.settingsAttentionBox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.2fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
  padding: 13px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .5);
}
.settingsAttentionBox.ok {
  border-color: rgba(34, 197, 94, .24);
  background: rgba(34, 197, 94, .07);
}
.settingsAttentionBox.warn {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .08);
}
.settingsAttentionBox strong {
  display: block;
  color: #e5e7eb;
}
.settingsAttentionBox small {
  color: rgba(226, 232, 240, .64);
}
.settingsAttentionGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.settingsAttentionGrid span {
  padding: 9px;
  border-radius: 12px;
  background: rgba(2, 6, 23, .28);
  border: 1px solid rgba(148, 163, 184, .14);
}
.settingsAttentionGrid b {
  display: block;
  color: #e5e7eb;
  font-size: 16px;
}
.settingsHealthBadge {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  margin-left: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  border: 1px solid rgba(148, 163, 184, .22);
}
.settingsHealthBadge.ok {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .12);
}
.settingsHealthBadge.warn {
  color: #fde68a;
  border-color: rgba(245, 158, 11, .38);
  background: rgba(245, 158, 11, .12);
}
.settingsHealthBadge.bad {
  color: #fecaca;
  border-color: rgba(239, 68, 68, .38);
  background: rgba(239, 68, 68, .12);
}
.settingsIdentityJourney {
  margin-top: 9px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(2, 6, 23, .28);
}
.settingsIdentityJourneyTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 850;
}
.settingsIdentityJourneyTop span {
  color: #93c5fd;
}
.settingsIdentityProgress {
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, .8);
  border: 1px solid rgba(148, 163, 184, .12);
}
.settingsIdentityProgress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(34, 197, 94, .85), rgba(96, 165, 250, .85));
}
.settingsIdentityJourneySteps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.settingsIdentityJourneySteps span {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 7px 4px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .45);
  border: 1px solid rgba(148, 163, 184, .12);
  font-size: 13px;
}
.settingsIdentityJourneySteps span.done {
  border-color: rgba(34, 197, 94, .22);
}
.settingsIdentityJourneySteps span.open {
  opacity: .45;
}
.settingsIdentityJourneySteps small {
  font-size: 9px;
  color: rgba(226, 232, 240, .62);
}
@media (max-width: 900px) {
  .settingsAttentionBox {
    grid-template-columns: 1fr;
  }
  .settingsAttentionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .settingsIdentityJourneySteps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .settingsAttentionGrid,
  .settingsIdentityJourneySteps {
    grid-template-columns: 1fr;
  }
}

/* ===== Settings Users: Identity Summary ===== */
.settingsUserAdminHeaderV2 {
  gap: 14px;
}

.settingsUserTitleCell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.settingsUserTitleCell h4 {
  margin: 0;
}

.settingsUserTitleCell code {
  display: inline-block;
  margin-top: 3px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.settingsUserHeaderBadges .settingsHealthBadge,
.settingsUserHeaderBadges .settingsReadinessBadge {
  margin-top: 0;
  margin-left: 0;
}

.settingsUserActivationPanel {
  grid-column: span 1;
}

.settingsUserActivationSummary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.settingsUserActivationSummary span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 750;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .48);
  color: rgba(226, 232, 240, .78);
}

.settingsUserActivationSummary span.ok {
  border-color: rgba(34, 197, 94, .24);
  background: rgba(34, 197, 94, .08);
  color: #bbf7d0;
}

.settingsUserActivationSummary span.warn {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .08);
  color: #fde68a;
}

.settingsUserActivationSummary b {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(2, 6, 23, .35);
  font-size: 10px;
}

@media (max-width: 760px) {
  .settingsUserAdminHeaderV2 {
    align-items: flex-start;
  }

  .settingsUserHeaderBadges {
    justify-content: flex-start;
  }

  .settingsUserActivationSummary {
    grid-template-columns: 1fr;
  }
}

/* ===== Settings Users V3 Light ===== */
.settingsUsersOverviewV3 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0 14px;
}

.settingsUsersOverviewV3 > div {
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .52);
  border-radius: 14px;
  padding: 11px 10px;
  min-height: 58px;
}

.settingsUsersOverviewV3 strong {
  display: block;
  color: #e5e7eb;
  font-size: 18px;
  line-height: 1.1;
}

.settingsUsersOverviewV3 small {
  display: block;
  margin-top: 5px;
  color: rgba(226, 232, 240, .62);
  font-size: 10.5px;
  line-height: 1.2;
}

.settingsUserAdminGridV3 .settingsUserAdminCard {
  display: flex;
  flex-direction: column;
}

.settingsUserAdminGridV3 .settingsUserAdminFields {
  flex: 1 1 auto;
}

.settingsUserAdminActionsV3 {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.settingsUserHeaderBadges {
  gap: 6px;
}

.settingsUserHeaderBadges .settingsActivationBadge,
.settingsUserHeaderBadges .settingsHealthBadge,
.settingsUserHeaderBadges .settingsReadinessBadge,
.settingsUserHeaderBadges .settingsUserRoleBadge {
  min-height: 24px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.settingsUserActivationSummary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settingsUserActivationSummary span {
  min-height: 26px;
}

.settingsUserAdminFields small {
  word-break: break-word;
}

@media (max-width: 1200px) {
  .settingsUsersOverviewV3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .settingsUsersOverviewV3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settingsUserAdminActionsV3 {
    position: static;
  }
}

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

/* ===== Settings Users: Collapsible Cards ===== */
.settingsUserCollapseBtn {
  border: 1px solid rgba(96, 165, 250, .28);
  background: rgba(37, 99, 235, .14);
  color: #bfdbfe;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.settingsUserCollapseBtn:hover {
  background: rgba(37, 99, 235, .24);
  border-color: rgba(147, 197, 253, .42);
}

.settingsUserCardBody {
  transition: opacity .18s ease, max-height .22s ease;
}

.settingsUserCardCollapsible.is-collapsed .settingsUserCardBody {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.settingsUserCardCollapsible.is-collapsed {
  padding-bottom: 14px;
}

.settingsUserCardCollapsible.is-collapsed .settingsUserAdminHeader {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .settingsUserCollapseBtn {
    width: fit-content;
  }
}

/* ===== Settings Users: collapse actions with body ===== */
.settingsUserCardCollapsible.is-collapsed .settingsUserAdminActionsV3,
.settingsUserCardCollapsible.is-collapsed .settingsUserAdminActions {
  display: none !important;
}

.settingsUserCardCollapsible.is-collapsed {
  min-height: auto;
}

/* ===== Settings Users: Bulk Collapse Controls ===== */
.settingsUsersBulkControls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 12px 0 10px;
}

.settingsUsersBulkControls button {
  border: 1px solid rgba(96, 165, 250, .22);
  background: rgba(37, 99, 235, .12);
  color: #bfdbfe;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.settingsUsersBulkControls button:hover {
  background: rgba(37, 99, 235, .22);
  border-color: rgba(147, 197, 253, .4);
}

@media (max-width: 760px) {
  .settingsUsersBulkControls {
    justify-content: flex-start;
  }
}

/* ===== Onboarding: Revoke / Resend button polish ===== */
.pendingInviteActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.pendingInviteActions button {
  min-width: 88px;
  justify-content: center;
}

.pendingInviteActions .dangerButton {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(248, 113, 113, .35);
  color: #fecaca;
}

/* ===== Onboarding: Resend/Revoke action buttons final polish ===== */
.pendingInviteActions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pendingInviteActions button {
  min-width: 96px;
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
  border: 1px solid rgba(148, 163, 184, .18);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.pendingInviteActions button:not(.dangerButton) {
  background: linear-gradient(135deg, rgba(37, 99, 235, .92), rgba(59, 130, 246, .82));
  color: #eff6ff;
  border-color: rgba(147, 197, 253, .35);
}

.pendingInviteActions button:not(.dangerButton)::before {
  content: "↻ ";
}

.pendingInviteActions .dangerButton {
  background: linear-gradient(135deg, rgba(185, 28, 28, .95), rgba(239, 68, 68, .82));
  color: #fff1f2;
  border-color: rgba(248, 113, 113, .38);
}

.pendingInviteActions .dangerButton::before {
  content: "✕ ";
}

@media (max-width: 620px) {
  .pendingInviteActions {
    justify-content: stretch;
  }

  .pendingInviteActions button {
    flex: 1 1 0;
  }
}

/* ===== Dashboard: sorted player stats ===== */
.dashboardPlayerTable {
  display: grid;
  gap: 4px;
  padding: 8px 0 2px;
}

.dashboardPlayerHead,
.dashboardPlayerRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  gap: 8px;
  align-items: center;
}

.dashboardPlayerHead {
  color: rgba(226, 232, 240, .55);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboardPlayerRow {
  min-height: 28px;
  border-top: 1px solid rgba(148, 163, 184, .10);
  color: rgba(226, 232, 240, .88);
}

.dashboardPlayerRow strong {
  justify-self: end;
  font-size: 12px;
}

.dashboardPlayerRow .playerName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Dashboard: player stats table polish ===== */
.dashboardPlayerTable {
  display: grid;
  gap: 4px;
  padding: 8px 0 2px;
}

.dashboardPlayerHead,
.dashboardPlayerRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  gap: 8px;
  align-items: center;
}

.dashboardPlayerHead {
  color: rgba(226, 232, 240, .55);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboardPlayerRow {
  min-height: 28px;
  border-top: 1px solid rgba(148, 163, 184, .10);
  color: rgba(226, 232, 240, .88);
}

.dashboardPlayerRow .dashboardPlayerName {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
}

.dashboardPlayerRow .dashboardPlayerName span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboardPlayerRow .dashboardPingBadge,
.dashboardPlayerRow .dashboardPlayerScore {
  justify-self: end;
}

/* ===== Dashboard: force visible ping/frags columns ===== */
.dashboardPlayerTable {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 8px 0 2px;
}

.dashboardPlayerHead,
.dashboardPlayerStatRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 58px 70px;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.dashboardPlayerHead {
  color: rgba(226, 232, 240, .58);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboardPlayerHead span:nth-child(2),
.dashboardPlayerHead span:nth-child(3),
.dashboardPlayerStatRow .dashboardPingBadge,
.dashboardPlayerStatRow .dashboardPlayerScore {
  justify-self: end;
  text-align: right;
}

.dashboardPlayerStatRow {
  min-height: 28px;
  border-top: 1px solid rgba(148, 163, 184, .10);
}

.dashboardPlayerStatRow .dashboardPlayerName {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
}

.dashboardPlayerStatRow .dashboardPlayerName span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboardPlayerStatRow .dashboardPlayerScore {
  color: #e5e7eb;
  font-weight: 900;
}

/* ===== Dashboard: player list force ping/frags visible ===== */
.playersInline .playersList .dashboardPlayerTable {
  display: grid !important;
  width: 100% !important;
  gap: 4px !important;
}

.playersInline .playersList .dashboardPlayerHead,
.playersInline .playersList .dashboardPlayerStatRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 64px 76px !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
}

.playersInline .playersList .dashboardPlayerHead {
  padding: 7px 10px 4px !important;
  color: rgba(226, 232, 240, .62) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.playersInline .playersList .dashboardPlayerStatRow {
  padding: 6px 10px !important;
  min-height: 30px !important;
  border-top: 1px solid rgba(148, 163, 184, .10) !important;
}

.playersInline .playersList .dashboardPlayerName {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: hidden !important;
}

.playersInline .playersList .dashboardPlayerName span:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.playersInline .playersList .dashboardPingBadge,
.playersInline .playersList .dashboardPlayerScore,
.playersInline .playersList .dashboardPlayerHead span:nth-child(2),
.playersInline .playersList .dashboardPlayerHead span:nth-child(3) {
  display: inline-flex !important;
  justify-self: end !important;
  text-align: right !important;
  min-width: 0 !important;
}

.playersInline .playersList .dashboardPlayerScore {
  color: #e5e7eb !important;
  font-weight: 900 !important;
}

/* ===== Dashboard: desktop-mode on mobile viewport player meta ===== */
.playersInline .playersList > div[style*="display:grid"] > div {
  min-width: 0 !important;
}

.playersInline .playersList div[style*="justify-content:space-between"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.playersInline .playersList div[style*="justify-content:space-between"] > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.playersInline .playersList div[style*="justify-content:space-between"] > div:last-child {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

/* Wenn Desktop-Ansicht sehr breit wirkt, trotzdem keine Meta-Spalten verschlucken */
@media (min-width: 761px) {
  .playersInline .playersList div[style*="justify-content:space-between"] > div:last-child {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ===== Dashboard: keep ping/frags visible in real mobile + desktop mobile ===== */
@media (max-width: 760px) {
  .playersInline .playersList .dashboardPlayerScore,
  .dashboardPlayerScore {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .playersInline .playersList .dashboardPlayerRow,
  .playersInline .playersList .dashboardPlayerStatRow {
    grid-template-columns: minmax(0, 1fr) 64px 76px !important;
  }
}

/* ===== Dashboard Touch-Desktop Grid V3 ===== */
body.is-touch-desktop-dashboard #servers .serverTable {
  display: grid !important;
  gap: 14px !important;
  overflow: visible !important;
}

body.is-touch-desktop-dashboard #servers .serverHead {
  display: none !important;
}

body.is-touch-desktop-dashboard #servers .serverLine {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 92px 92px !important;
  grid-template-areas:
    "name name status"
    "map players ping"
    "actions actions actions"
    "list list list" !important;
  gap: 10px 14px !important;
  align-items: center !important;
  padding: 14px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

body.is-touch-desktop-dashboard #servers .serverNameCell {
  grid-area: name !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.is-touch-desktop-dashboard #servers .miniMap {
  width: 82px !important;
  height: 52px !important;
  flex: 0 0 82px !important;
  border-radius: 12px !important;
}

body.is-touch-desktop-dashboard #servers .serverStatusCell {
  grid-area: status !important;
  justify-self: end !important;
}

body.is-touch-desktop-dashboard #servers .mapCell {
  grid-area: map !important;
}

body.is-touch-desktop-dashboard #servers .serverPlayersCell {
  grid-area: players !important;
  justify-self: start !important;
}

body.is-touch-desktop-dashboard #servers .serverPingCell {
  grid-area: ping !important;
  justify-self: end !important;
  text-align: right !important;
}

body.is-touch-desktop-dashboard #servers .serverBotCell {
  display: none !important;
}

body.is-touch-desktop-dashboard #servers .actionButtons {
  grid-area: actions !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}

body.is-touch-desktop-dashboard #servers .playersInline {
  grid-area: list !important;
  margin-top: 2px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
}

body.is-touch-desktop-dashboard #servers .actionButtons button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

body.is-touch-desktop-dashboard #servers .serverCell,
body.is-touch-desktop-dashboard #servers .serverNameCell > div:last-child {
  min-width: 0 !important;
}

body.is-touch-desktop-dashboard #servers .serverCell strong {
  white-space: normal !important;
  line-height: 1.15 !important;
}

body.is-touch-desktop-dashboard #servers .serverCell small,
body.is-touch-desktop-dashboard #servers .serverNameCell span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ================= AUDIT UI PHASE 1 ================= */
.auditHeroHeader small {
  display: block;
  margin-top: 4px;
  color: rgba(220,235,255,.58);
  font-size: 12px;
}

.auditKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.auditKpi {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}

.auditKpi strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 6px;
}

.auditKpi small {
  color: rgba(220,235,255,.6);
}

.auditKpiWarning {
  border-color: rgba(255,210,90,.22);
}

.auditKpiCritical {
  border-color: rgba(255,85,105,.28);
}

.auditFilterBar {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(120px, .7fr));
  gap: 10px;
  margin: 12px 0 16px;
}

.auditFilterBar input,
.auditFilterBar select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,18,32,.75);
  color: rgba(235,245,255,.94);
  padding: 11px 12px;
  outline: none;
}

.auditModernList {
  gap: 7px;
}

.auditModernRow {
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) minmax(150px, .8fr) auto;
  cursor: pointer;
}

.auditModernRow:hover {
  background: rgba(255,255,255,.055);
}

.auditSeverity-info {
  border-left: 3px solid rgba(100,190,255,.7);
}

.auditSeverity-warning {
  border-left: 3px solid rgba(255,210,90,.85);
}

.auditSeverity-critical {
  border-left: 3px solid rgba(255,85,105,.95);
}

.auditSeverityPill {
  justify-self: end;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.auditDetails {
  display: none;
  margin: -3px 8px 6px 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(230,240,255,.8);
  font-size: 12px;
}

.auditDetails.isOpen {
  display: grid;
  gap: 5px;
}

.auditDetails pre {
  margin: 8px 0 0;
  padding: 10px;
  overflow: auto;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

@media (max-width: 900px) {
  .auditKpiGrid,
  .auditFilterBar,
  .auditModernRow {
    grid-template-columns: 1fr;
  }

  .auditSeverityPill {
    justify-self: start;
  }
}
/* ================= END AUDIT UI PHASE 1 ================= */

/* ================= AUDIT UI MOBILE POLISH ================= */
.auditFilterBar {
  position: sticky;
  top: 8px;
  z-index: 5;
  padding: 10px;
  border-radius: 18px;
  background: rgba(8, 15, 28, .84);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
}

.auditKpi strong {
  white-space: nowrap;
}

.auditActorCell b,
.auditIpCell b {
  display: block;
  font-weight: 800;
  color: rgba(240,248,255,.92);
}

.auditActorCell small,
.auditIpCell small {
  display: block;
  margin-top: 3px;
  color: rgba(210,225,245,.58);
  font-size: 11px;
}

.auditSeverityPill-info {
  border-color: rgba(90, 210, 255, .25);
  background: rgba(90, 210, 255, .10);
}

.auditSeverityPill-warning {
  border-color: rgba(255, 210, 90, .30);
  background: rgba(255, 210, 90, .11);
}

.auditSeverityPill-critical {
  border-color: rgba(255, 85, 105, .35);
  background: rgba(255, 85, 105, .13);
}

@media (max-width: 900px) {
  .auditHeroHeader {
    align-items: flex-start;
    gap: 8px;
  }

  .auditKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auditKpi {
    padding: 12px;
  }

  .auditKpi strong {
    font-size: 19px;
  }

  .auditFilterBar {
    top: 0;
    grid-template-columns: 1fr 1fr;
  }

  .auditFilterBar input {
    grid-column: 1 / -1;
  }

  .auditModernRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: start;
    padding: 12px;
  }

  .auditEventMain {
    grid-column: 1 / -1;
  }

  .auditActorCell {
    grid-column: 1 / 2;
  }

  .auditIpCell {
    grid-column: 1 / 2;
  }

  .auditSeverityPill {
    grid-column: 2 / 3;
    grid-row: 2 / span 2;
    align-self: center;
    justify-self: end;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    padding: 6px 8px;
  }

  .auditDetails {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 520px) {
  .auditKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auditFilterBar {
    grid-template-columns: 1fr;
  }

  .auditFilterBar input {
    grid-column: auto;
  }

  .auditModernRow {
    grid-template-columns: 1fr;
  }

  .auditSeverityPill {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    max-width: 100%;
  }
}
/* ================= END AUDIT UI MOBILE POLISH ================= */

/* ================= AUDIT TIMELINE UPGRADES ================= */
.auditLiveCounter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.auditLiveCounter span {
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
}

.auditLiveCritical {
  animation: auditCriticalPulse 2.4s ease-in-out 2;
}

@keyframes auditCriticalPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,80,100,0); }
  50% { box-shadow: 0 0 22px rgba(255,80,100,.35); }
}

.auditTimelineList {
  position: relative;
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.auditTimelineList:before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(75,145,255,.45), rgba(255,255,255,.04));
}

.auditTimelineItem {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  cursor: pointer;
}

.auditTimelineMarker {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.auditAvatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.auditAvatar-info {
  background: rgba(80, 210, 255, .16);
  border-color: rgba(80, 210, 255, .32);
}

.auditAvatar-warning {
  background: rgba(255, 210, 80, .16);
  border-color: rgba(255, 210, 80, .35);
}

.auditAvatar-critical {
  background: rgba(255, 70, 100, .18);
  border-color: rgba(255, 70, 100, .40);
}

.auditTimelineCard {
  border-radius: 15px;
  padding: 11px 13px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.065);
  transition: background .14s ease, transform .14s ease;
}

.auditTimelineCard:hover {
  background: rgba(255,255,255,.055);
  transform: translateY(-1px);
}

.auditTimelineCardCompact {
  opacity: .86;
}

.auditTimelineTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.auditTimelineMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.auditTimelineMeta span b {
  display: block;
  font-size: 13px;
  color: rgba(240,248,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auditTimelineMeta span small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: rgba(210,225,245,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auditGroupBadge {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(80,140,255,.14);
  border: 1px solid rgba(80,140,255,.25);
}

.auditGroupItems {
  display: none;
  margin: 7px 0 0 46px;
  gap: 7px;
}

.auditGroupItems.isOpen {
  display: grid;
}

.auditDetails {
  margin-left: 46px;
}

.auditDetails.isOpen {
  display: grid;
}

@media (max-width: 900px) {
  .auditLiveCounter {
    justify-content: flex-start;
  }

  .auditFilterBar {
    grid-template-columns: 1fr 1fr;
  }

  .auditFilterBar input {
    grid-column: 1 / -1;
  }

  .auditTimelineList:before {
    left: 14px;
  }

  .auditTimelineItem {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }

  .auditAvatar {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .auditTimelineTop {
    grid-template-columns: minmax(0, 1fr);
  }

  .auditSeverityPill,
  .auditGroupBadge {
    justify-self: start;
  }

  .auditTimelineMeta {
    grid-template-columns: 1fr;
  }

  .auditGroupItems {
    margin-left: 36px;
  }

  .auditDetails {
    margin-left: 36px;
  }
}

@media (max-width: 520px) {
  .auditFilterBar {
    grid-template-columns: 1fr;
  }
}
/* ================= END AUDIT TIMELINE UPGRADES ================= */

/* ================= AUDIT PHASE 1 FINAL ================= */
.auditSecurityFeed {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 70, 100, .07);
  border: 1px solid rgba(255, 80, 110, .18);
}

.auditSecurityFeedOk {
  background: rgba(45, 210, 130, .06);
  border-color: rgba(45, 210, 130, .15);
}

.auditSecurityFeed strong {
  display: block;
  font-size: 14px;
}

.auditSecurityFeed span {
  color: rgba(220,235,255,.62);
  font-size: 12px;
}

.auditSecurityFeedItems {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.auditSecurityFeedItem {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 800;
}

.auditSecurityFeed-critical {
  border-color: rgba(255,80,110,.30);
}

.auditSecurityFeed-warning {
  border-color: rgba(255,210,90,.28);
}

.auditHeatmap {
  margin: 12px 0;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.065);
  display: grid;
  gap: 8px;
}

.auditHeatmapTitle {
  font-weight: 900;
  color: rgba(240,248,255,.90);
  margin-bottom: 2px;
}

.auditHeatmapRow {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}

.auditHeatmapRow span {
  color: rgba(220,235,255,.68);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auditHeatmapRow div {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  overflow: hidden;
}

.auditHeatmapRow i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgba(90, 160, 255, .55);
}

.auditHeatmapRow b {
  text-align: right;
  color: rgba(240,248,255,.82);
}

@media (max-width: 700px) {
  .auditHeatmapRow {
    grid-template-columns: 86px minmax(0, 1fr) 30px;
  }
}
/* ================= END AUDIT PHASE 1 FINAL ================= */

/* ================= AUDIT PHASE 2 THREAT INTELLIGENCE ================= */
.auditThreatOverview {
  margin: 13px 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  display: grid;
  gap: 12px;
}

.auditThreatRisk-low {
  border-color: rgba(45,210,130,.18);
}

.auditThreatRisk-medium {
  border-color: rgba(255,210,90,.22);
}

.auditThreatRisk-high {
  border-color: rgba(255,135,80,.26);
}

.auditThreatRisk-critical {
  border-color: rgba(255,70,100,.34);
  background: rgba(255,70,100,.06);
}

.auditThreatHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.auditThreatHeader h4 {
  margin: 0;
  font-size: 15px;
}

.auditThreatHeader p {
  margin: 3px 0 0;
  color: rgba(220,235,255,.58);
  font-size: 12px;
}

.auditThreatRisk {
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}

.auditThreatGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.auditThreatGrid div,
.auditThreatIntel span {
  padding: 11px;
  border-radius: 15px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.055);
}

.auditThreatGrid strong {
  display: block;
  font-size: 21px;
}

.auditThreatGrid small,
.auditThreatIntel small {
  display: block;
  margin-top: 3px;
  color: rgba(220,235,255,.58);
  font-size: 11px;
}

.auditThreatIntel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.auditThreatIntel b {
  display: block;
  color: rgba(240,248,255,.92);
}

.auditCorrelationList {
  display: grid;
  gap: 8px;
}

.auditCorrelationItem {
  padding: 10px 11px;
  border-radius: 15px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

.auditCorrelationItem strong {
  display: block;
  margin-bottom: 3px;
}

.auditCorrelationItem span,
.auditCorrelationItem small {
  display: block;
  color: rgba(220,235,255,.62);
  font-size: 12px;
}

.auditCorrelationItem small {
  margin-top: 2px;
  color: rgba(220,235,255,.46);
}

.auditCorrelation-critical {
  border-color: rgba(255,70,100,.28);
  background: rgba(255,70,100,.075);
}

.auditCorrelation-warning {
  border-color: rgba(255,210,90,.24);
  background: rgba(255,210,90,.065);
}

.auditCorrelation-ok {
  border-color: rgba(45,210,130,.18);
  background: rgba(45,210,130,.055);
}

@media (max-width: 900px) {
  .auditThreatHeader {
    display: grid;
  }

  .auditThreatGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auditThreatIntel {
    grid-template-columns: 1fr;
  }
}
/* ================= END AUDIT PHASE 2 THREAT INTELLIGENCE ================= */

/* ================= AUDIT PHASE 2 INCIDENT CENTER ================= */
.auditIncidentPanel {
  margin: 14px 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  display: grid;
  gap: 10px;
}

.auditIncidentHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.auditIncidentHeader strong {
  display: block;
  font-size: 14px;
}

.auditIncidentHeader small {
  display: block;
  margin-top: 3px;
  color: rgba(220,235,255,.58);
}

.auditIncidentHeader > span {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.auditIncidentCard {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

.auditIncident-warning {
  background: rgba(255,190,70,.065);
  border-color: rgba(255,190,70,.22);
}

.auditIncident-critical {
  background: rgba(255,70,100,.075);
  border-color: rgba(255,70,100,.28);
}

.auditIncidentTitle {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.auditIncidentTitle span {
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.06);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
}

.auditIncidentGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.auditIncidentGrid div {
  padding: 10px;
  border-radius: 13px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.05);
}

.auditIncidentGrid b,
.auditIncidentGrid span {
  display: block;
}

.auditIncidentGrid b {
  font-size: 10px;
  color: rgba(220,235,255,.52);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.auditIncidentGrid span {
  margin-top: 4px;
  color: rgba(240,248,255,.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auditIncidentActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.auditIncidentActions button {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.055);
  color: rgba(235,245,255,.9);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 800;
  cursor: pointer;
}

.auditIncidentEmpty {
  padding: 12px;
  border-radius: 15px;
  background: rgba(45,210,130,.055);
  border: 1px solid rgba(45,210,130,.16);
  color: rgba(220,245,235,.82);
}

@media (max-width: 900px) {
  .auditIncidentHeader {
    display: grid;
  }

  .auditIncidentGrid {
    grid-template-columns: 1fr;
  }
}
/* ================= END AUDIT PHASE 2 INCIDENT CENTER ================= */

/* ================= AUDIT PHASE 2B RISK INTELLIGENCE ================= */
.auditRiskPanel {
  margin: 14px 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  display: grid;
  gap: 12px;
}

.auditRisk-low { border-color: rgba(45,210,130,.18); }
.auditRisk-medium { border-color: rgba(255,210,90,.24); }
.auditRisk-high { border-color: rgba(255,140,70,.28); }
.auditRisk-critical {
  border-color: rgba(255,70,100,.36);
  background: rgba(255,70,100,.065);
}

.auditRiskHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.auditRiskHeader h4 {
  margin: 0;
  font-size: 15px;
}

.auditRiskHeader p {
  margin: 3px 0 0;
  color: rgba(220,235,255,.58);
  font-size: 12px;
}

.auditRiskScore {
  min-width: 92px;
  text-align: right;
}

.auditRiskScore strong {
  display: block;
  font-size: 30px;
  line-height: 1;
}

.auditRiskScore small {
  color: rgba(220,235,255,.60);
  font-weight: 800;
  font-size: 11px;
}

.auditRiskBar {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

.auditRiskBar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgba(90,160,255,.68);
}

.auditRiskColumns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.auditRiskBox {
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.055);
}

.auditRiskBox > strong {
  display: block;
  margin-bottom: 8px;
}

.auditRiskLine {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.055);
}

.auditRiskLine span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auditRiskLine b {
  color: rgba(240,248,255,.92);
}

.auditRiskLine small {
  grid-column: 1 / -1;
  color: rgba(220,235,255,.52);
  font-size: 11px;
}

.auditRiskUserLine {
  cursor: pointer;
}

.auditRiskUserLine:hover span {
  text-decoration: underline;
}

.auditUserProfileBackdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.auditUserProfileModal {
  position: fixed;
  z-index: 9999;
  inset: 7vh 16px auto 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 22px;
  background: rgba(10,18,32,.96);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
  color: rgba(235,245,255,.94);
}

.auditUserProfileHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.auditUserProfileHeader h3 {
  margin: 0;
}

.auditUserProfileHeader p {
  margin: 4px 0 0;
  color: rgba(220,235,255,.62);
}

.auditUserProfileHeader button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(235,245,255,.94);
  font-size: 22px;
  cursor: pointer;
}

.auditUserProfileGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 9px;
  margin: 14px 0;
}

.auditUserProfileGrid div,
.auditUserProfileSection {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.065);
}

.auditUserProfileGrid strong {
  display: block;
  font-size: 22px;
}

.auditUserProfileGrid small {
  color: rgba(220,235,255,.58);
}

.auditUserProfileSection {
  margin-top: 10px;
}

.auditUserProfileSection > strong {
  display: block;
  margin-bottom: 8px;
}

.auditUserProfileEvent {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(255,255,255,.055);
}

.auditUserProfileEvent small {
  color: rgba(220,235,255,.52);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .auditRiskHeader,
  .auditRiskColumns {
    display: grid;
    grid-template-columns: 1fr;
  }

  .auditRiskScore {
    text-align: left;
  }

  .auditUserProfileGrid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .auditUserProfileEvent {
    display: grid;
  }
}
/* ================= END AUDIT PHASE 2B RISK INTELLIGENCE ================= */

/* ================= AUDIT PRE PHASE 3 POLISH ================= */
.auditRiskTrend {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .03em;
}

.auditRiskTrend-up {
  color: rgba(255, 95, 115, .95);
}

.auditRiskTrend-down {
  color: rgba(65, 220, 140, .95);
}

.auditRiskTrend-flat {
  color: rgba(220,235,255,.58);
}

.auditIncidentStatus {
  display: inline-flex !important;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.055);
}

.auditIncidentStatus-open {
  border-color: rgba(255,70,100,.28);
  background: rgba(255,70,100,.10);
}

.auditIncidentStatus-investigating {
  border-color: rgba(255,210,90,.28);
  background: rgba(255,210,90,.10);
}

.auditIncidentStatus-resolved {
  border-color: rgba(45,210,130,.22);
  background: rgba(45,210,130,.09);
}

.auditIncidentStatus-ignored {
  border-color: rgba(160,170,190,.18);
  background: rgba(160,170,190,.08);
}
/* ================= END AUDIT PRE PHASE 3 POLISH ================= */

/* ================= AUDIT PHASE 3 ATTACK INTELLIGENCE ================= */
.auditAttackTimelinePanel {
  margin: 14px 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}

.auditAttackTimelineHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.auditAttackTimelineHeader h4 {
  margin: 0;
  font-size: 15px;
}

.auditAttackTimelineHeader p {
  margin: 3px 0 0;
  color: rgba(220,235,255,.58);
  font-size: 12px;
}

.auditAttackTimelineHeader > span {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 900;
  font-size: 11px;
  white-space: nowrap;
}

.auditAttackTimeline {
  position: relative;
  display: grid;
  gap: 8px;
}

.auditAttackTimeline:before {
  content: "";
  position: absolute;
  left: 74px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(90,160,255,.5), rgba(255,255,255,.04));
}

.auditAttackTimelineItem {
  position: relative;
  display: grid;
  grid-template-columns: 58px 24px minmax(0,1fr);
  gap: 10px;
  align-items: start;
}

.auditAttackTime {
  padding-top: 7px;
  color: rgba(220,235,255,.58);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.auditAttackDot {
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(10,18,32,.96);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 16px rgba(0,0,0,.26);
}

.auditAttackBody {
  padding: 10px 11px;
  border-radius: 15px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.055);
}

.auditAttackBody strong,
.auditAttackBody span,
.auditAttackBody small {
  display: block;
}

.auditAttackBody span {
  margin-top: 2px;
  color: rgba(220,235,255,.56);
  font-size: 11px;
}

.auditAttackBody small {
  margin-top: 6px;
  color: rgba(220,235,255,.46);
}

.auditAttackBody button {
  border: 0;
  background: transparent;
  color: rgba(135,190,255,.95);
  padding: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.auditAttackTimeline-critical .auditAttackBody {
  border-color: rgba(255,70,100,.20);
  background: rgba(255,70,100,.06);
}

.auditAttackTimeline-warning .auditAttackBody {
  border-color: rgba(255,210,90,.18);
  background: rgba(255,210,90,.055);
}

.auditClickableText {
  cursor: pointer;
}

.auditClickableText:hover {
  text-decoration: underline;
}

.auditIpProfileModal {
  max-width: 820px;
}

@media (max-width: 900px) {
  .auditAttackTimelineHeader {
    display: grid;
  }

  .auditAttackTimeline:before {
    left: 13px;
  }

  .auditAttackTimelineItem {
    grid-template-columns: 24px minmax(0,1fr);
  }

  .auditAttackTime {
    grid-column: 1 / -1;
    text-align: left;
    padding: 0 0 0 36px;
  }

  .auditAttackDot {
    grid-column: 1 / 2;
  }

  .auditAttackBody {
    grid-column: 2 / 3;
  }
}
/* ================= END AUDIT PHASE 3 ATTACK INTELLIGENCE ================= */

/* ================= AUDIT PHASE 3B INVESTIGATION HUB ================= */
.auditInvestigationHub {
  margin: 14px 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}

.auditInvestigationHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.auditInvestigationHeader h4 {
  margin: 0;
  font-size: 15px;
}

.auditInvestigationHeader p {
  margin: 3px 0 0;
  color: rgba(220,235,255,.58);
  font-size: 12px;
}

.auditInvestigationHeader > span {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.auditInvestigationGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.auditInvestigationBox {
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.055);
}

.auditInvestigationBox > strong {
  display: block;
  margin-bottom: 8px;
}

.auditInvestigationBox button {
  width: 100%;
  display: grid;
  gap: 3px;
  text-align: left;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.055);
  background: transparent;
  color: rgba(235,245,255,.92);
  padding: 9px 0;
  cursor: pointer;
}

.auditInvestigationBox button:hover span {
  text-decoration: underline;
}

.auditInvestigationBox button span {
  font-weight: 900;
}

.auditInvestigationBox button small {
  color: rgba(220,235,255,.52);
}

.auditIntelModal {
  max-height: 86vh;
  overflow: auto;
}

.auditIntelRisk {
  margin: 14px 0;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.auditIntelRisk strong {
  font-size: 34px;
  line-height: 1;
}

.auditIntelRisk span {
  font-weight: 900;
}

.auditIntelRisk small {
  justify-self: end;
  font-weight: 900;
  color: rgba(220,235,255,.62);
}

@media (max-width: 900px) {
  .auditInvestigationHeader,
  .auditInvestigationGrid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .auditIntelRisk {
    grid-template-columns: 1fr;
  }

  .auditIntelRisk small {
    justify-self: start;
  }
}
/* ================= END AUDIT PHASE 3B INVESTIGATION HUB ================= */

/* ================= AUDIT PHASE 3C THREAT PROFILES ================= */
.auditLiveFeed {
  margin: 14px 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  display: grid;
  gap: 11px;
}

.auditLiveFeed-normal {
  border-color: rgba(45,210,130,.18);
}

.auditLiveFeed-warning {
  border-color: rgba(255,210,90,.26);
  background: rgba(255,210,90,.055);
}

.auditLiveFeed-critical {
  border-color: rgba(255,70,100,.34);
  background: rgba(255,70,100,.075);
}

.auditLiveFeedHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.auditLiveFeedHeader h4 {
  margin: 0;
  font-size: 15px;
}

.auditLiveFeedHeader p {
  margin: 3px 0 0;
  color: rgba(220,235,255,.62);
  font-size: 12px;
}

.auditLiveFeedHeader > span {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 11px;
  font-weight: 900;
}

.auditLiveFeedGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 9px;
}

.auditLiveFeedGrid div,
.auditLiveLastEvent {
  padding: 11px;
  border-radius: 15px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.055);
}

.auditLiveFeedGrid b,
.auditLiveFeedGrid small,
.auditLiveLastEvent strong,
.auditLiveLastEvent span,
.auditLiveLastEvent small {
  display: block;
}

.auditLiveFeedGrid b {
  font-size: 20px;
}

.auditLiveFeedGrid small,
.auditLiveLastEvent small {
  color: rgba(220,235,255,.55);
  margin-top: 3px;
}

.auditThreatProfileSplit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.auditThreatProfileModal {
  max-width: 880px;
}

.auditAttackGraph {
  margin: 14px 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}

.auditAttackGraphHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.auditAttackGraphHeader h4 {
  margin: 0;
  font-size: 15px;
}

.auditAttackGraphHeader p {
  margin: 3px 0 0;
  color: rgba(220,235,255,.58);
  font-size: 12px;
}

.auditAttackGraphHeader > span {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 900;
}

.auditAttackGraphList {
  display: grid;
  gap: 9px;
}

.auditAttackGraphRow {
  display: grid;
  grid-template-columns: minmax(150px,.7fr) minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 15px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.055);
}

.auditAttackGraphRow button {
  border: 0;
  background: transparent;
  color: rgba(135,190,255,.95);
  text-align: left;
  font-weight: 900;
  cursor: pointer;
}

.auditAttackGraphRow div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.auditAttackGraphRow span {
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.auditAttackGraphRow span:hover,
.auditAttackGraphRow button:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .auditLiveFeedHeader,
  .auditAttackGraphHeader {
    display: grid;
  }

  .auditLiveFeedGrid,
  .auditThreatProfileSplit {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .auditAttackGraphRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .auditLiveFeedGrid,
  .auditThreatProfileSplit {
    grid-template-columns: 1fr;
  }
}
/* ================= END AUDIT PHASE 3C THREAT PROFILES ================= */

/* ================= AUDIT PHASE 3D POLISH FIX ================= */
.auditLiveFeedHeader h4 {
  font-size: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.auditLiveFeed-critical .auditLiveFeedHeader h4 {
  color: rgba(255,110,130,.98);
  text-shadow: 0 0 18px rgba(255,70,100,.28);
}

.auditLiveFeed-warning .auditLiveFeedHeader h4 {
  color: rgba(255,215,120,.98);
}

.auditLiveFeed-normal .auditLiveFeedHeader h4 {
  color: rgba(95,230,150,.98);
}

.auditAttackGraphRow div span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auditThreatProfileSplit .auditUserProfileSection p {
  max-height: 180px;
  overflow: auto;
  line-height: 1.45;
}

.auditThreatProfileModal .auditUserProfileGrid {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width: 900px) {
  .auditThreatProfileModal .auditUserProfileGrid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 520px) {
  .auditThreatProfileModal .auditUserProfileGrid {
    grid-template-columns: 1fr;
  }
}
/* ================= END AUDIT PHASE 3D POLISH FIX ================= */

/* ================= AUDIT PHASE 4A THREAT ACTOR CONTEXT ================= */
.auditThreatProfileModal .auditUserProfileHeader h3 {
  letter-spacing: .01em;
}

.auditThreatProfileModal .auditIntelRisk {
  border-color: rgba(110,170,255,.18);
}

.auditThreatProfileModal .auditUserProfileSection strong {
  color: rgba(235,245,255,.94);
}

.auditThreatProfileModal .auditUserProfileSection p {
  color: rgba(220,235,255,.72);
}
/* ================= END AUDIT PHASE 4A THREAT ACTOR CONTEXT ================= */

/* ================= AUDIT PHASE 4B RELATIONSHIPS ================= */
.auditRelationshipSection {
  grid-column: 1 / -1;
}

.auditRelationshipList {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.auditRelationshipRow {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.065);
  color: rgba(235,245,255,.92);
  text-align: left;
}

button.auditRelationshipRow {
  cursor: pointer;
}

button.auditRelationshipRow:hover {
  border-color: rgba(120,180,255,.28);
  background: rgba(120,180,255,.06);
}

.auditRelationshipRow span,
.auditRelationshipRow b,
.auditRelationshipRow small,
.auditRelationshipRow code {
  display: block;
}

.auditRelationshipRow small {
  margin-top: 3px;
  color: rgba(220,235,255,.56);
}

.auditRelationshipRow em {
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.auditRelationshipRow code {
  grid-column: 1 / -1;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  color: rgba(220,235,255,.62);
  font-size: 11px;
  white-space: normal;
}

.auditRel-critical {
  border-color: rgba(255,70,100,.30);
  background: rgba(255,70,100,.075);
}

.auditRel-high {
  border-color: rgba(255,145,70,.24);
  background: rgba(255,145,70,.06);
}

.auditRel-medium {
  border-color: rgba(255,210,90,.20);
  background: rgba(255,210,90,.05);
}

.auditRel-low {
  border-color: rgba(70,220,145,.14);
}

.auditRelationshipList.compact .auditRelationshipRow {
  grid-template-columns: minmax(0,1fr) auto;
}

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

  .auditRelationshipRow em {
    width: fit-content;
  }
}
/* ================= END AUDIT PHASE 4B RELATIONSHIPS ================= */

/* ================= AUDIT PHASE 5A RESPONSE ACTIONS ================= */
.auditResponseActions {
  margin: 12px 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(70, 120, 255, .055);
  border: 1px solid rgba(120, 170, 255, .14);
  display: grid;
  gap: 10px;
}

.auditResponseActions strong,
.auditResponseActions small {
  display: block;
}

.auditResponseActions small {
  margin-top: 3px;
  color: rgba(220,235,255,.58);
}

.auditResponseActionButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auditResponseActionButtons button {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.055);
  color: rgba(235,245,255,.94);
  border-radius: 999px;
  padding: 8px 11px;
  font-weight: 800;
  cursor: pointer;
}

.auditResponseActionButtons button:hover {
  background: rgba(120,170,255,.12);
  border-color: rgba(120,170,255,.28);
}

@media (max-width: 640px) {
  .auditResponseActionButtons {
    display: grid;
  }
}
/* ================= END AUDIT PHASE 5A RESPONSE ACTIONS ================= */

/* ================= AUDIT PHASE 5B SUBTABS ================= */
.auditSubTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
}

.auditSubTabs button {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  color: rgba(225,238,255,.78);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 850;
  cursor: pointer;
}

.auditSubTabs button.active {
  background: linear-gradient(135deg, rgba(65,125,255,.85), rgba(95,70,220,.80));
  color: white;
  border-color: rgba(150,190,255,.38);
  box-shadow: 0 10px 28px rgba(60,120,255,.22);
}

.auditCenterPanel {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}

.auditCenterHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.auditCenterHeader h4 {
  margin: 0;
}

.auditCenterHeader p {
  margin: 3px 0 0;
  color: rgba(220,235,255,.58);
  font-size: 12px;
}

.auditCenterHeader span {
  color: rgba(220,235,255,.62);
  font-size: 12px;
  font-weight: 800;
}

.auditCenterList {
  display: grid;
  gap: 8px;
}

.auditCenterRow {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(120px,.7fr) minmax(120px,.7fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}

.auditCenterRow strong,
.auditCenterRow small {
  display: block;
}

.auditCenterRow small {
  margin-top: 3px;
  color: rgba(220,235,255,.54);
}

.auditCenterRow button {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.055);
  color: rgba(235,245,255,.94);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 850;
  cursor: pointer;
}

.auditIncident-critical {
  border-color: rgba(255,70,100,.26);
  background: rgba(255,70,100,.065);
}

.auditIncident-high {
  border-color: rgba(255,145,70,.22);
  background: rgba(255,145,70,.055);
}

.auditIncident-medium {
  border-color: rgba(255,210,90,.18);
}

@media (max-width: 760px) {
  .auditCenterHeader,
  .auditCenterRow {
    grid-template-columns: 1fr;
    display: grid;
  }

  .auditCenterRow button {
    width: fit-content;
  }
}
/* ================= END AUDIT PHASE 5B SUBTABS ================= */

/* 2FA setup guide hero + modal */
.twofaGuideHero {
  border: 1px solid rgba(79, 140, 255, 0.35);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.92));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  margin-bottom: 14px;
}

.twofaGuideHero.is-required {
  border-color: rgba(250, 204, 21, 0.45);
}

.twofaGuideHeroMain {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.twofaGuideIcon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(147, 197, 253, 0.22);
}

.twofaGuideHero h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.twofaGuideHero p {
  margin: 0;
  color: var(--muted, #9ca3af);
  line-height: 1.45;
}

.twofaGuideSteps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.twofaGuideSteps div,
.twofaQuickPath div {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.62);
}

.twofaGuideSteps strong {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  margin-right: 7px;
  background: rgba(59, 130, 246, 0.24);
}

.twofaGuideSteps span,
.twofaQuickPath span {
  color: var(--muted, #9ca3af);
  font-size: 12px;
}

.twofaGuideActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.twofaGuidePrimary {
  min-height: 42px;
  font-weight: 800;
}

.twofaGuideBadge {
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}

.twofaGuideBadge.ok {
  color: #86efac;
  background: rgba(22, 163, 74, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.24);
}

.twofaGuideBadge.warn {
  color: #fde68a;
  background: rgba(234, 179, 8, 0.14);
  border: 1px solid rgba(234, 179, 8, 0.28);
}

.twofaQuickPath {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.twofaQuickPath b {
  display: block;
  margin-bottom: 3px;
}

.twofaGuideModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.twofaGuideModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(6px);
}

.twofaGuideModalPanel {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  margin: 20px auto;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
}

.twofaGuideModalHeader,
.twofaGuideModalFooter {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.twofaGuideModalFooter {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  border-bottom: 0;
  justify-content: flex-end;
}

.twofaGuideModalHeader h2 {
  margin: 0 0 5px;
}

.twofaGuideModalHeader p {
  margin: 0;
  color: var(--muted, #9ca3af);
}

.twofaGuideClose {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  font-size: 22px;
}

.twofaGuideModalBody {
  padding: 18px 20px;
  display: grid;
  gap: 14px;
}

.twofaGuideModalBody section {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.58);
}

.twofaGuideModalBody h3 {
  margin: 0 0 8px;
}

.twofaGuideModalBody p {
  margin: 6px 0;
  color: var(--muted, #9ca3af);
  line-height: 1.45;
}

.twofaGuideModalBody ul {
  margin: 8px 0 0 18px;
  color: var(--muted, #9ca3af);
}

.twofaGuideWarning {
  border-radius: 16px;
  padding: 13px 14px;
  color: #fde68a;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.24);
  font-weight: 700;
}

@media (max-width: 720px) {
  .twofaGuideHeroMain {
    flex-direction: column;
  }

  .twofaGuideSteps,
  .twofaQuickPath {
    grid-template-columns: 1fr;
  }

  .twofaGuideModalPanel {
    margin: 10px auto;
    max-height: calc(100vh - 20px);
  }

  .twofaGuideModalHeader {
    align-items: flex-start;
  }
}

.twofaRecoveryWarning {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.25);
  color: #fde68a;
  font-weight: 700;
}

.twofaGuideHero h3{
  font-size:22px !important;
  line-height:1.2;
}

.twofaGuidePrimary{
  font-size:14px;
  font-weight:900;
}

/* 2FA timeline arrows */
.twofaGuideSteps {
  position: relative;
}

.twofaGuideSteps > div {
  position: relative;
}

.twofaGuideSteps > div:not(:last-child)::after {
  content: "➜";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(147, 197, 253, 0.9);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(59, 130, 246, 0.65);
  pointer-events: none;
}

.twofaQuickPath {
  position: relative;
}

.twofaQuickPath > div {
  position: relative;
}

.twofaQuickPath > div:not(:last-child)::after {
  content: "➜";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(147, 197, 253, 0.85);
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.55);
  pointer-events: none;
}

@media (max-width: 720px) {
  .twofaGuideSteps > div:not(:last-child)::after,
  .twofaQuickPath > div:not(:last-child)::after {
    content: "↓";
    right: 18px;
    top: auto;
    bottom: -20px;
    transform: none;
  }

  .twofaGuideSteps,
  .twofaQuickPath {
    gap: 18px;
  }
}

/* 2FA stepper improvement */
.twofaGuideSteps{
  position:relative;
  align-items:center;
}

.twofaGuideSteps div{
  position:relative;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:10px;
}

.twofaGuideSteps strong{
  width:32px;
  height:32px;
  font-size:15px;
  font-weight:900;
}

.twofaGuideSteps span{
  font-size:13px;
  font-weight:700;
  color:#dbeafe;
}

.twofaGuideSteps div:not(:last-child)::after{
  content:"›";
  position:absolute;
  right:-12px;
  top:50%;
  transform:translateY(-50%);
  font-size:28px;
  font-weight:900;
  color:rgba(96,165,250,.85);
  z-index:5;
}

@media (max-width:720px){

  .twofaGuideSteps div:not(:last-child)::after{
    display:none;
  }

  .twofaGuideSteps div{
    min-height:52px;
  }
}


/* 2FA real stepper arrows */
.twofaGuideStepsReal{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
  gap:8px !important;
  align-items:center !important;
}

.twofaGuideStepsReal .twofaStepItem{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,23,42,.62);
  border:1px solid rgba(148,163,184,.16);
  white-space:nowrap;
}

.twofaGuideStepsReal .twofaStepItem strong{
  width:32px;
  height:32px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  font-size:15px;
  font-weight:900;
  background:rgba(59,130,246,.28);
  color:#dbeafe;
  box-shadow:0 0 16px rgba(59,130,246,.22);
}

.twofaGuideStepsReal .twofaStepItem span{
  font-size:13px;
  font-weight:800;
  color:#dbeafe;
}

.twofaGuideStepsReal .twofaStepArrow{
  font-size:26px;
  font-weight:900;
  color:rgba(96,165,250,.95);
  text-shadow:0 0 14px rgba(59,130,246,.45);
  line-height:1;
  padding:0 2px;
}

.twofaGuideStepsReal div:not(:last-child)::after{
  content:none !important;
  display:none !important;
}

@media (max-width:720px){
  .twofaGuideStepsReal{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .twofaGuideStepsReal .twofaStepArrow{
    display:block;
    text-align:center;
    transform:rotate(90deg);
    font-size:22px;
    margin:-4px 0;
  }

  .twofaGuideStepsReal .twofaStepItem{
    justify-content:flex-start;
    white-space:normal;
  }
}


/* 2FA inline stepper, calm edition */
.twofaGuideStepsInline{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
}

.twofaGuideStepsInline .twofaStepItem{
  min-height:54px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,23,42,.62);
  border:1px solid rgba(148,163,184,.16);
  overflow:hidden;
}

.twofaGuideStepsInline .twofaStepItem strong{
  width:32px;
  height:32px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  font-size:15px;
  font-weight:900;
  background:rgba(59,130,246,.28);
  color:#dbeafe;
  box-shadow:0 0 16px rgba(59,130,246,.22);
  flex:0 0 auto;
}

.twofaGuideStepsInline .twofaStepItem span{
  font-size:13px;
  font-weight:800;
  color:#dbeafe;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.twofaGuideStepsInline .twofaStepItem em{
  font-style:normal;
  font-size:24px;
  font-weight:900;
  color:rgba(96,165,250,.92);
  text-shadow:0 0 14px rgba(59,130,246,.4);
  line-height:1;
}

.twofaGuideStepsInline .twofaStepItem:hover{
  border-color:rgba(96,165,250,.35);
  background:rgba(30,41,59,.72);
}

/* Kill older arrow experiments without touching anything else */
.twofaGuideStepsInline .twofaStepArrow{
  display:none !important;
}

.twofaGuideStepsInline div:not(:last-child)::after{
  content:none !important;
  display:none !important;
}

@media (max-width:720px){
  .twofaGuideStepsInline{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .twofaGuideStepsInline .twofaStepItem{
    grid-template-columns:auto 1fr auto;
    min-height:50px;
  }

  .twofaGuideStepsInline .twofaStepItem span{
    white-space:normal;
  }

  .twofaGuideStepsInline .twofaStepItem em{
    transform:rotate(90deg);
  }
}


/* 2FA high-end clean stepper */
.twofaGuideStepsClean{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:18px !important;
}

.twofaGuideStepsClean .twofaStepClean{
  min-height:68px;
  padding:13px 14px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(30,41,59,.72), rgba(15,23,42,.72));
  border:1px solid rgba(148,163,184,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}

.twofaGuideStepsClean .twofaStepClean strong{
  font-size:12px;
  letter-spacing:.08em;
  color:#60a5fa;
  font-weight:900;
}

.twofaGuideStepsClean .twofaStepClean span{
  font-size:14px;
  font-weight:850;
  color:#e5efff;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  line-height:1.15;
}

.twofaGuideStepsClean .twofaStepClean:hover{
  border-color:rgba(96,165,250,.34);
  background:
    linear-gradient(180deg, rgba(30,64,175,.30), rgba(15,23,42,.78));
}

/* kill previous stepper experiments */
.twofaGuideStepsClean .twofaStepArrow,
.twofaGuideStepsClean em{
  display:none !important;
}

.twofaGuideStepsClean div:not(:last-child)::after{
  content:none !important;
  display:none !important;
}

.twofaGuideHero{
  padding:22px !important;
}

.twofaGuideHero h3{
  font-size:24px !important;
  letter-spacing:-.02em;
}

.twofaGuideHero p{
  max-width:720px;
}

@media (max-width:900px){
  .twofaGuideStepsClean{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:520px){
  .twofaGuideStepsClean{
    grid-template-columns:1fr !important;
  }

  .twofaGuideStepsClean .twofaStepClean{
    min-height:58px;
  }
}


/* 2FA illustrated setup guide */
.twofaGuideModalPanel{
  width:min(980px, calc(100vw - 28px));
}

.twofaGuideModalBodyIllustrated{
  gap:16px;
}

.twofaGuideIllustratedIntro{
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 34%),
    rgba(15,23,42,.62) !important;
}

.twofaGuideStepCard{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);
  gap:16px;
  align-items:center;
}

.twofaGuideStepText{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.twofaGuideStepBadge{
  width:max-content;
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  letter-spacing:.08em;
  font-weight:900;
  color:#93c5fd;
  background:rgba(59,130,246,.14);
  border:1px solid rgba(96,165,250,.22);
}

.twofaGuideScreenshot{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.6);
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  cursor:zoom-in;
  transition:transform .15s ease, border-color .15s ease;
}

.twofaGuideScreenshot:hover{
  transform:translateY(-1px);
  border-color:rgba(96,165,250,.42);
}

.twofaGuideImageLightbox{
  position:fixed;
  inset:0;
  z-index:100000;
}

.twofaGuideImageBackdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.86);
  backdrop-filter:blur(7px);
}

.twofaGuideImagePanel{
  position:relative;
  width:min(1200px, calc(100vw - 24px));
  height:calc(100vh - 24px);
  margin:12px auto;
  display:grid;
  place-items:center;
}

.twofaGuideImagePanel img{
  max-width:100%;
  max-height:100%;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}

.twofaGuideImageClose{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:40px;
  height:40px;
  border-radius:14px;
  font-size:24px;
  font-weight:900;
}

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

  .twofaGuideModalPanel{
    width:calc(100vw - 16px);
  }
}

/* 2FA premium illustrated guide */
.twofaGuideIntroTop{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.twofaGuideProgressPills{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:flex-end;
}

.twofaGuideProgressPills span{
  border-radius:999px;
  padding:6px 9px;
  font-size:11px;
  font-weight:900;
  color:#94a3b8;
  background:rgba(15,23,42,.7);
  border:1px solid rgba(148,163,184,.16);
}

.twofaGuideProgressPills span.done{
  color:#86efac;
  background:rgba(22,163,74,.14);
  border-color:rgba(34,197,94,.26);
}

.twofaGuideMiniProgress{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

.twofaGuideMiniProgress div{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,23,42,.58);
  border:1px solid rgba(148,163,184,.14);
}

.twofaGuideMiniProgress b{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#dbeafe;
  background:rgba(59,130,246,.22);
  font-size:12px;
}

.twofaGuideMiniProgress span{
  color:#cbd5e1;
  font-weight:800;
  font-size:12px;
}

.twofaGuideMiniProgress div.done{
  border-color:rgba(34,197,94,.28);
  background:rgba(22,163,74,.10);
}

.twofaGuideMiniProgress div.done b{
  background:rgba(22,163,74,.25);
  color:#86efac;
}

.twofaGuideMiniProgress div.done b::before{
  content:"✓";
}

.twofaGuideMiniProgress div.done b{
  font-size:0;
}

.twofaGuideMiniProgress div.done b::before{
  font-size:14px;
}

.twofaGuideOverviewImage{
  width:100%;
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.6);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  cursor:zoom-in;
}

.twofaGuideJumpButton{
  margin-top:10px;
  width:max-content;
  min-height:34px;
  border-radius:12px;
  font-weight:900;
  font-size:12px;
  padding:7px 11px;
}

.twofaGuideTargetPulse{
  animation:twofaGuideTargetPulseAnim 1.8s ease-in-out;
  outline:2px solid rgba(96,165,250,.85) !important;
  box-shadow:0 0 0 8px rgba(59,130,246,.18), 0 0 28px rgba(59,130,246,.36) !important;
}

@keyframes twofaGuideTargetPulseAnim{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.015); }
  100%{ transform:scale(1); }
}

@media (max-width:760px){
  .twofaGuideIntroTop{
    flex-direction:column;
  }

  .twofaGuideProgressPills{
    justify-content:flex-start;
  }

  .twofaGuideMiniProgress{
    grid-template-columns:1fr;
  }

  .twofaGuideJumpButton{
    width:100%;
  }
}

/* 2FA lightbox fullsize mode */
.twofaGuideImagePanel{
  overflow:auto !important;
  place-items:start center !important;
  padding:64px 18px 24px !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
}

.twofaGuideImagePanel img{
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
}

@media (max-width:760px){
  .twofaGuideImagePanel{
    place-items:start start !important;
    justify-content:flex-start !important;
  }

  .twofaGuideImagePanel img{
    min-width:960px;
  }
}


/* UI Doctor */
.uiDoctorHero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  margin-bottom: 18px;
}

.uiDoctorHero h2 {
  margin: 0 0 6px 0;
}

.uiDoctorHero p {
  margin: 0;
  opacity: .75;
}

.uiDoctorHero button,
.uiDoctorActions button {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 800;
}

.uiDoctorScore {
  min-width: 140px;
  text-align: center;
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}

.uiDoctorScore strong {
  display: block;
  font-size: 34px;
  line-height: 1;
}

.uiDoctorScore span {
  display: block;
  margin-top: 6px;
  opacity: .7;
  font-size: 12px;
}

.uiDoctorActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.uiDoctorBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.12);
}

.uiDoctorBadge.ok { background: rgba(47, 220, 130, .15); }
.uiDoctorBadge.warn { background: rgba(255, 190, 70, .18); }
.uiDoctorBadge.info { background: rgba(90, 160, 255, .16); }

.uiDoctorGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.uiDoctorCard {
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.16);
}

.uiDoctorCard.ok {
  box-shadow: inset 3px 0 0 rgba(47, 220, 130, .65);
}

.uiDoctorCard.warn {
  box-shadow: inset 3px 0 0 rgba(255, 190, 70, .75);
}

.uiDoctorCardHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.uiDoctorMetrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  font-size: 12px;
  opacity: .85;
}

.uiDoctorIssues {
  margin: 12px 0 0 18px;
  padding: 0;
}

.uiDoctorIssues li {
  margin: 4px 0;
}

.uiDoctorOk {
  margin-top: 12px;
  opacity: .75;
}

.uiDoctorDetails {
  margin-top: 12px;
}

.uiDoctorDetails pre {
  max-height: 240px;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.32);
  font-size: 11px;
}

.uiDoctorRunning {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}

/* UI Doctor Phase 2 */
.uiDoctorSection {
  margin: 0 0 18px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.028);
}

.uiDoctorSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.uiDoctorSectionHead h3 {
  margin: 0 0 5px 0;
}

.uiDoctorSectionHead p {
  margin: 0;
  opacity: .7;
}

.uiDoctorConsistencyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.uiDoctorConsistencyCard {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 3px 0 0 rgba(255, 190, 70, .75);
}

.uiDoctorConsistencyCard strong {
  display: block;
  margin-bottom: 8px;
}

.uiDoctorConsistencyCard ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uiDoctorConsistencyCard li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.uiDoctorConsistencyCard li:first-child {
  border-top: 0;
}

.uiDoctorConsistencyCard code {
  font-size: 11px;
  opacity: .85;
}

.uiDoctorConsistencyCard small {
  grid-column: 1 / -1;
  opacity: .6;
}

.uiDoctorWarnings {
  margin: 10px 0 0 18px;
  padding: 0;
  opacity: .75;
  font-size: 12px;
}

.uiDoctorWarnings li {
  margin: 3px 0;
}

/* UI Doctor Phase 3 - Scan Overlay + Rankings */
.uiDoctorScanOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(7px);
}

.uiDoctorScanOverlay.active {
  display: flex;
}

.uiDoctorScanBox {
  width: min(420px, calc(100vw - 34px));
  border-radius: 22px;
  padding: 24px;
  text-align: center;
  background: rgba(12,18,30,.96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 80px rgba(0,0,0,.45);
}

.uiDoctorScanPulse {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 30px;
  background: rgba(80,130,255,.15);
  animation: uiDoctorPulse 1.1s infinite ease-in-out;
}

@keyframes uiDoctorPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(80,130,255,.35); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(80,130,255,0); }
}

.uiDoctorScanBox strong {
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
}

.uiDoctorScanBox span {
  display: block;
  opacity: .82;
  margin-bottom: 14px;
}

.uiDoctorScanBox small {
  display: block;
  opacity: .55;
  margin-top: 10px;
}

.uiDoctorScanBar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.09);
}

.uiDoctorScanBar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(80,130,255,.9), rgba(70,240,160,.9));
  transition: width .22s ease;
}

.uiDoctorRankingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.uiDoctorRankingCard {
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}

.uiDoctorRankingCard.clean {
  box-shadow: inset 3px 0 0 rgba(47,220,130,.65);
}

.uiDoctorRankingCard.bad {
  box-shadow: inset 3px 0 0 rgba(255,100,90,.65);
}

.uiDoctorRankingCard h4 {
  margin: 0 0 10px 0;
}

.uiDoctorRankRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.uiDoctorRankRow:first-of-type {
  border-top: 0;
}

.uiDoctorRankRow span {
  opacity: .65;
  font-size: 12px;
}

.uiDoctorRankProblem {
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.uiDoctorRankProblem:first-of-type {
  border-top: 0;
}

.uiDoctorRankProblem small {
  display: block;
  opacity: .62;
  margin: 0 0 6px 0;
}

.uiDoctorRankProblem ul {
  margin: 6px 0 0 18px;
  padding: 0;
  opacity: .8;
  font-size: 12px;
}

.uiDoctorRankProblem li {
  margin: 4px 0;
}

/* UI Doctor Phase 4 - Export, Filter, Active Test */
.uiDoctorScanTest {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 14px auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  opacity: .78;
}

.uiDoctorActions button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: inherit;
}

#uiDoctorProblemFilterBtn {
  background: rgba(255,190,70,.13);
}

#uiDoctorContent.uiDoctorProblemsOnly .uiDoctorCard[data-ui-doctor-status="ok"] {
  display: none;
}

.uiDoctorDetailsSection {
  padding: 0;
  overflow: hidden;
}

.uiDoctorDetailsSection > summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  padding: 14px;
  list-style: none;
}

.uiDoctorDetailsSection > summary::-webkit-details-marker {
  display: none;
}

.uiDoctorDetailsSection > summary span {
  display: grid;
  gap: 4px;
}

.uiDoctorDetailsSection > summary small {
  opacity: .65;
}

.uiDoctorDetailsSection .uiDoctorRankingGrid {
  padding: 0 14px 14px 14px;
}

/* UI Doctor Phase 5 - Jump + Certification */
.uiDoctorScore em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-weight: 900;
  font-size: 12px;
}

.uiDoctorScore small {
  display: block;
  margin-top: 4px;
  opacity: .58;
  font-size: 10px;
}

.uiDoctorScore.certified,
.uiDoctorScore.elite {
  box-shadow: inset 0 0 0 1px rgba(47,220,130,.35), 0 0 30px rgba(47,220,130,.08);
}

.uiDoctorScore.progress {
  box-shadow: inset 0 0 0 1px rgba(255,190,70,.35), 0 0 30px rgba(255,190,70,.08);
}

.uiDoctorScore.warn {
  box-shadow: inset 0 0 0 1px rgba(255,90,90,.35), 0 0 30px rgba(255,90,90,.08);
}

.uiDoctorScore.suspicious {
  box-shadow: inset 0 0 0 1px rgba(160,110,255,.4), 0 0 30px rgba(160,110,255,.14);
}

.uiDoctorHallGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.uiDoctorHallCard {
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.028);
}

.uiDoctorHallCard.shame {
  box-shadow: inset 3px 0 0 rgba(255,100,90,.72);
}

.uiDoctorHallCard.glory {
  box-shadow: inset 3px 0 0 rgba(47,220,130,.72);
}

.uiDoctorHallCard h3 {
  margin: 0 0 10px 0;
}

.uiDoctorHallCard button {
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.07);
  background: transparent;
  color: inherit;
  padding: 10px 0;
  cursor: pointer;
}

.uiDoctorHallCard button:first-of-type {
  border-top: 0;
}

.uiDoctorHallCard button b,
.uiDoctorHallCard button span {
  display: block;
}

.uiDoctorHallCard button span {
  margin-top: 3px;
  opacity: .62;
  font-size: 12px;
}

.uiDoctorHallCard button:hover b {
  text-decoration: underline;
}

.uiDoctorCardTools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.uiDoctorCardTools button {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255,255,255,.08);
  color: inherit;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

/* UI Doctor Phase 6 - Return Button */
.uiDoctorReturnButton {
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 99998;
  display: none;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 11px 15px;
  background: rgba(20,28,44,.94);
  color: inherit;
  font-weight: 900;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  cursor: pointer;
}

.uiDoctorReturnButton.active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 900px) {
  .uiDoctorReturnButton {
    right: 12px;
    bottom: 72px;
    font-size: 12px;
    padding: 9px 12px;
  }
}

/* UI Doctor Phase 7 - History, Regression, Fix Suggestions */
.uiDoctorHistoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.uiDoctorHistoryCard {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.1);
}

.uiDoctorHistoryCard h3 {
  margin: 0 0 10px 0;
}

.uiDoctorHistoryCard.trend {
  box-shadow: inset 3px 0 0 rgba(90,160,255,.72);
}

.uiDoctorHistoryCard.regression.good {
  box-shadow: inset 3px 0 0 rgba(47,220,130,.72);
}

.uiDoctorHistoryCard.regression.bad {
  box-shadow: inset 3px 0 0 rgba(255,90,90,.72);
}

.uiDoctorHistoryCard.recent {
  box-shadow: inset 3px 0 0 rgba(160,110,255,.72);
}

.uiDoctorHistoryCard.trend strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 6px;
}

.uiDoctorHistoryCard span,
.uiDoctorHistoryCard small {
  display: block;
  opacity: .68;
}

.uiDoctorHistoryCard button {
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.07);
  background: transparent;
  color: inherit;
  padding: 9px 0;
  cursor: pointer;
}

.uiDoctorHistoryCard button:first-of-type {
  border-top: 0;
}

.uiDoctorHistoryCard.recent div {
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.uiDoctorHistoryCard.recent div:first-of-type {
  border-top: 0;
}

.uiDoctorFixGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 0 14px 14px 14px;
}

.uiDoctorFixCard {
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 3px 0 0 rgba(255,190,70,.72);
}

.uiDoctorFixCard h4 {
  margin: 0 0 10px 0;
}

.uiDoctorFixCard details {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 8px 0;
}

.uiDoctorFixCard details:first-of-type {
  border-top: 0;
}

.uiDoctorFixCard summary {
  cursor: pointer;
  font-weight: 800;
}

.uiDoctorFixCard p {
  opacity: .68;
  margin: 8px 0;
}

.uiDoctorFixCard pre {
  white-space: pre-wrap;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.32);
  font-size: 11px;
}

/* UI Doctor Phase 8 - Priority Engine + Certification */
.uiDoctorPriorityWrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.uiDoctorCertificationPanel {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
}

.uiDoctorCertificationPanel > div:first-child {
  display: grid;
  gap: 4px;
}

.uiDoctorCertificationPanel span {
  font-size: 24px;
}

.uiDoctorCertificationPanel strong {
  font-size: 18px;
}

.uiDoctorCertificationPanel small {
  opacity: .65;
}

.uiDoctorCertificationPanel.elite,
.uiDoctorCertificationPanel.certified {
  box-shadow: inset 3px 0 0 rgba(47,220,130,.75);
}

.uiDoctorCertificationPanel.progress {
  box-shadow: inset 3px 0 0 rgba(255,190,70,.75);
}

.uiDoctorCertificationPanel.warn {
  box-shadow: inset 3px 0 0 rgba(255,90,90,.75);
}

.uiDoctorGrades {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
}

.uiDoctorGrades b {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.2);
  font-size: 12px;
}

.uiDoctorGrades em {
  font-style: normal;
  font-weight: 900;
}

.uiDoctorPriorityPanel {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.1);
}

.uiDoctorPriorityList {
  display: grid;
  gap: 8px;
}

.uiDoctorPriorityList button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.uiDoctorPriorityList button span {
  display: grid;
  gap: 3px;
}

.uiDoctorPriorityList button small {
  opacity: .62;
}

.uiDoctorPriorityList button em {
  font-style: normal;
  font-weight: 900;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
}

.uiDoctorPriorityList button.critical {
  box-shadow: inset 3px 0 0 rgba(255,70,70,.85);
}

.uiDoctorPriorityList button.critical em {
  background: rgba(255,70,70,.20);
}

.uiDoctorPriorityList button.high {
  box-shadow: inset 3px 0 0 rgba(255,140,70,.85);
}

.uiDoctorPriorityList button.high em {
  background: rgba(255,140,70,.20);
}

.uiDoctorPriorityList button.medium {
  box-shadow: inset 3px 0 0 rgba(255,190,70,.85);
}

.uiDoctorPriorityList button.medium em {
  background: rgba(255,190,70,.20);
}

.uiDoctorPriorityList button.low {
  box-shadow: inset 3px 0 0 rgba(90,160,255,.75);
}

.uiDoctorPriorityList button.low em {
  background: rgba(90,160,255,.18);
}

@media (max-width: 900px) {
  .uiDoctorCertificationPanel {
    align-items: stretch;
    flex-direction: column;
  }

  .uiDoctorGrades {
    grid-template-columns: 1fr;
  }
}

/* UI Doctor Phase 9 - Enterprise Gate */
.uiDoctorEnterpriseGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
  gap: 12px;
  margin-bottom: 18px;
}

.uiDoctorEnterpriseGate,
.uiDoctorEnterpriseSide > div {
  border-radius: 18px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.1);
}

.uiDoctorEnterpriseGate {
  padding: 14px;
}

.uiDoctorEnterpriseGate.approved {
  box-shadow: inset 3px 0 0 rgba(47,220,130,.8);
}

.uiDoctorEnterpriseGate.blocked {
  box-shadow: inset 3px 0 0 rgba(255,90,90,.8);
}

.uiDoctorEnterpriseTitle {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.uiDoctorEnterpriseTitle h3 {
  margin: 0 0 5px 0;
}

.uiDoctorEnterpriseTitle p {
  margin: 0;
  opacity: .68;
}

.uiDoctorGateChecks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.uiDoctorGateChecks div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 13px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.07);
}

.uiDoctorGateChecks div.pass span {
  color: #4ee28d;
}

.uiDoctorGateChecks div.fail span {
  color: #ff6b6b;
}

.uiDoctorGateChecks b {
  font-size: 12px;
}

.uiDoctorGateChecks em {
  font-style: normal;
  opacity: .65;
  font-size: 11px;
}

.uiDoctorEnterpriseSide {
  display: grid;
  gap: 12px;
}

.uiDoctorBestScan,
.uiDoctorQuickWins {
  padding: 14px;
}

.uiDoctorBestScan {
  box-shadow: inset 3px 0 0 rgba(90,160,255,.75);
}

.uiDoctorBestScan h3,
.uiDoctorQuickWins h3 {
  margin: 0 0 10px 0;
}

.uiDoctorBestScan strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 6px;
}

.uiDoctorBestScan span,
.uiDoctorBestScan small {
  display: block;
  opacity: .68;
}

.uiDoctorQuickWins {
  box-shadow: inset 3px 0 0 rgba(255,190,70,.75);
}

.uiDoctorQuickWins button {
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.07);
  background: transparent;
  color: inherit;
  padding: 9px 0;
  cursor: pointer;
}

.uiDoctorQuickWins button:first-of-type {
  border-top: 0;
}

.uiDoctorQuickWins button b,
.uiDoctorQuickWins button span {
  display: block;
}

.uiDoctorQuickWins button span {
  margin-top: 3px;
  opacity: .62;
  font-size: 12px;
}

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

/* UI Repair Phase 1 - Safe desktop overflow containment
   Generated after UI Doctor findings.
   Scope: bot-control, system, archive, logs, dashboard.
*/

#page-bot-control *,
#page-system *,
#page-archive *,
#page-logs *,
#page-dashboard * {
  box-sizing: border-box;
  min-width: 0;
}

#page-bot-control,
#page-system,
#page-archive,
#page-logs,
#page-dashboard {
  max-width: 100%;
  overflow-x: hidden;
}

#page-bot-control .panel,
#page-system .panel,
#page-archive .panel,
#page-logs .panel,
#page-dashboard .panel {
  max-width: 100%;
  overflow-x: hidden;
}

#page-bot-control .panelHeader,
#page-system .panelHeader,
#page-archive .panelHeader,
#page-logs .panelHeader,
#page-dashboard .panelHeader {
  min-height: 52px;
  align-items: center;
  gap: 12px;
}

#page-bot-control table,
#page-system table,
#page-archive table,
#page-logs table,
#page-dashboard table {
  max-width: 100%;
  width: 100%;
  table-layout: auto;
}

#page-bot-control pre,
#page-system pre,
#page-archive pre,
#page-logs pre,
#page-dashboard pre,
#page-bot-control code,
#page-system code,
#page-archive code,
#page-logs code,
#page-dashboard code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#page-bot-control input,
#page-system input,
#page-archive input,
#page-logs input,
#page-dashboard input,
#page-bot-control select,
#page-system select,
#page-archive select,
#page-logs select,
#page-dashboard select,
#page-bot-control textarea,
#page-system textarea,
#page-archive textarea,
#page-logs textarea,
#page-dashboard textarea,
#page-bot-control button,
#page-system button,
#page-archive button,
#page-logs button,
#page-dashboard button {
  max-width: 100%;
}

#page-bot-control .card,
#page-system .card,
#page-archive .card,
#page-logs .card,
#page-dashboard .card,
#page-bot-control .statCard,
#page-system .statCard,
#page-archive .statCard,
#page-logs .statCard,
#page-dashboard .statCard {
  max-width: 100%;
  overflow-x: hidden;
}

#page-bot-control [class*="grid"],
#page-system [class*="grid"],
#page-archive [class*="grid"],
#page-logs [class*="grid"],
#page-dashboard [class*="grid"] {
  max-width: 100%;
}

/* UI Doctor Selector Upgrade */
.uiDoctorOverflowList {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.uiDoctorOverflowList div {
  padding: 9px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
}

.uiDoctorOverflowList b,
.uiDoctorOverflowList code,
.uiDoctorOverflowList span {
  display: block;
}

.uiDoctorOverflowList code {
  margin: 5px 0;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: .78;
}

.uiDoctorOverflowList span {
  opacity: .62;
  font-size: 12px;
}

/* UI Doctor Phase 10 - Shell/Header Compliance */
.uiDoctorComplianceGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 0 14px 14px 14px;
}

.uiDoctorComplianceCard {
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 3px 0 0 rgba(255,190,70,.72);
}

.uiDoctorComplianceHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.uiDoctorComplianceHead button {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.08);
  color: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.uiDoctorComplianceCard ul {
  margin: 0 0 10px 18px;
  padding: 0;
}

.uiDoctorComplianceCard li {
  margin: 7px 0;
}

.uiDoctorComplianceCard li b,
.uiDoctorComplianceCard li span {
  display: block;
}

.uiDoctorComplianceCard li span {
  opacity: .65;
  font-size: 12px;
}

.uiDoctorRepairPreview {
  margin-top: 10px;
}

.uiDoctorRepairPreview summary {
  cursor: pointer;
  font-weight: 900;
}

.uiDoctorRepairPreview pre {
  white-space: pre-wrap;
  overflow: auto;
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.32);
  font-size: 11px;
}

/* UI Repair - System standard shell/header */
#page-system > .panel {
  max-width: 100%;
  overflow-x: hidden;
}

#page-system .panelHeader {
  min-height: 52px;
  align-items: center;
}

#page-system #systemPageContent {
  max-width: 100%;
  overflow-x: hidden;
}

#page-system .systemGrid,
#page-system .statusGrid,
#page-system .systemCards,
#page-system .systemHealthGrid {
  max-width: 100%;
  min-width: 0;
}

/* UI Repair - Static standard page header normalization */
#page-system .panelHeader,
#page-archive .panelHeader,
#page-security-operations .panelHeader {
  min-height: 52px;
  align-items: center;
  gap: 12px;
}

#page-system .panelHeader h2,
#page-archive .panelHeader h2,
#page-security-operations .panelHeader h2 {
  margin: 0;
}

#page-system .pageHint,
#page-archive .pageHint,
#page-security-operations .pageHint {
  margin: 4px 0 0 0;
  opacity: .68;
}

#page-system,
#page-archive,
#page-security-operations {
  max-width: 100%;
  overflow-x: hidden;
}

#page-system .panel,
#page-archive .panel,
#page-security-operations .panel {
  max-width: 100%;
  overflow-x: hidden;
}

/* UI Doctor Auto Repair + Baseline Manager */
.uiDoctorRepairActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.uiDoctorRepairActions button {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.08);
  color: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.uiDoctorRepairActions button.danger {
  background: rgba(255,90,90,.18);
  border-color: rgba(255,90,90,.35);
}

.uiDoctorRepairActions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* UI Doctor Heuristics Repair */
.uiDoctorConfidence {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(90,160,255,.10);
  border: 1px solid rgba(90,160,255,.16);
}

.uiDoctorConfidence span {
  opacity: .7;
  font-size: 12px;
}

.uiDoctorComplianceCard li.real {
  border-left: 3px solid rgba(255,90,90,.8);
  padding-left: 8px;
}

.uiDoctorComplianceCard li.needs-review {
  border-left: 3px solid rgba(255,190,70,.8);
  padding-left: 8px;
}

.uiDoctorComplianceCard li.likely-false-positive {
  border-left: 3px solid rgba(90,160,255,.8);
  padding-left: 8px;
}

.uiDoctorComplianceCard li small {
  display: inline-flex;
  margin: 4px 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  opacity: .75;
  font-size: 10px;
  font-weight: 900;
}

.uiDoctorSelfAudit {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 3px 0 0 rgba(90,160,255,.75);
}

.uiDoctorSelfAudit h3 {
  margin: 0 0 6px 0;
}

.uiDoctorSelfAudit p {
  margin: 0;
  opacity: .68;
}

.uiDoctorSelfAuditStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 8px;
}

.uiDoctorSelfAuditStats b {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.2);
  text-align: center;
}

.uiDoctorSelfAuditStats span {
  opacity: .6;
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .uiDoctorSelfAudit {
    flex-direction: column;
  }

  .uiDoctorSelfAuditStats {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== RBAC Health compact details ===== */
.rbacHealthSectionHead,
.rbacHealthDetails summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.rbacHealthDetails summary {
  cursor: pointer;
  list-style: none;
}

.rbacHealthDetails summary::-webkit-details-marker {
  display: none;
}

.rbacHealthDetails summary span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rbacHealthDetails summary b {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .12);
  white-space: nowrap;
}

.rbacHealthDetails summary b.ok,
.rbacHealthClean {
  color: #86efac;
}

.rbacHealthDetails summary b.warn,
.rbacHealthSubTitle.warn {
  color: #fbbf24;
}

.rbacHealthSubTitle {
  margin: 16px 0 10px;
  font-weight: 800;
}

.rbacHealthNested {
  margin-top: 14px;
  opacity: .92;
}

.rbacHealthNested summary {
  cursor: pointer;
  font-weight: 800;
}

.rbacHealthClean {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(134, 239, 172, .22);
  border-radius: 14px;
  background: rgba(34, 197, 94, .08);
}

@media (max-width: 720px) {
  .rbacHealthSectionHead,
  .rbacHealthDetails summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .rbacHealthDetails summary b {
    white-space: normal;
  }
}

/* ===== RBAC Health honest route categories ===== */
.rbacHealthRoute.knownsafe {
  border-color: rgba(251, 191, 36, .28);
  background: rgba(251, 191, 36, .07);
}

.rbacHealthRoute.knownsafe strong,
.rbacHealthRoute.knownsafe small {
  color: #facc15;
}

/* ===== RBAC Health risk summary v2 ===== */
.rbacRiskSummary {
  display: grid;
  gap: 14px;
}

.rbacRiskSummary > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rbacRiskSummary > div:first-child strong {
  font-size: 1.05rem;
}

.rbacRiskSummary > div:first-child span {
  opacity: .72;
}

.rbacRiskGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.rbacRiskGrid > div {
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 14px;
  background: rgba(15, 23, 42, .42);
}

.rbacRiskGrid b {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.rbacRiskGrid span {
  opacity: .72;
  font-size: .82rem;
}

.rbacRiskGrid .ok {
  border-color: rgba(34, 197, 94, .26);
  background: rgba(34, 197, 94, .08);
}

.rbacRiskGrid .warn {
  border-color: rgba(251, 191, 36, .30);
  background: rgba(251, 191, 36, .08);
}

.rbacHealthGrid .bad {
  border-color: rgba(248, 113, 113, .30);
  background: rgba(248, 113, 113, .08);
}

.rbacHealthRoute.knownSafe {
  border-color: rgba(251, 191, 36, .22);
  background: rgba(251, 191, 36, .055);
}

@media (max-width: 900px) {
  .rbacRiskGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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