:root {
  --bg: #f3f5f7;
  --panel: #fff;
  --panel2: #f8fafc;
  --line: #dfe4ea;
  --text: #17212b;
  --muted: #687481;
  --cyan: #087f78;
  --violet: #7256c9;
  --blue: #267ac3;
  --red: #dc3545;
  --amber: #b36b00;
  --shadow: 0 18px 55px #24304016;
  color-scheme: light;
}
body {
  background: #f3f5f7;
  color: var(--text);
}
.noise {
  display: none;
}
.login-shell {
  background: linear-gradient(135deg, #eef3f4 0%, #f8f9fa 55%, #edf3f2 100%);
}
.login-layout {
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: #fff;
  border: 1px solid #dfe5e9;
  border-radius: 24px;
  box-shadow: 0 30px 80px #26343d18;
  overflow: hidden;
}
.login-visual {
  position: relative;
  min-height: 580px;
  padding: 38px;
  color: #fff;
  background: linear-gradient(145deg, #0d756f, #07514e);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.login-visual:before,
.login-visual:after {
  content: "";
  position: absolute;
  border: 1px solid #ffffff1c;
  border-radius: 50%;
}
.login-visual:before {
  width: 420px;
  height: 420px;
  right: -210px;
  top: -120px;
}
.login-visual:after {
  width: 270px;
  height: 270px;
  left: -140px;
  bottom: -110px;
}
.login-brand {
  padding: 0;
  position: relative;
  z-index: 1;
}
.login-brand .brand-mark {
  background: #fff;
  color: #087f78;
}
.login-brand b {
  color: #fff;
}
.login-brand span {
  color: #a9e5df;
}
.login-message {
  margin: auto 0;
  position: relative;
  z-index: 1;
}
.login-message .eyebrow {
  color: #9ee0da;
}
.login-message h2 {
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -0.045em;
  margin: 12px 0;
}
.login-message h2 span {
  color: #8de4dc;
}
.login-nodes {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 25px;
}
.login-nodes span {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid #ffffff35;
  background: #ffffff12;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 800;
}
.login-nodes .node-main {
  width: 54px;
  height: 54px;
  background: #fff;
  color: #087f78;
  font-size: 20px;
}
.login-nodes i {
  width: 28px;
  height: 1px;
  background: #ffffff55;
}
.login-visual > small {
  color: #a9cbc8;
  position: relative;
  z-index: 1;
}
.login-card {
  width: auto;
  padding: 54px 48px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-mark {
  color: #fff;
  box-shadow: 0 8px 24px #087f7829;
}
.login-card h1 span,
.brand span,
.eyebrow,
.text-btn {
  color: #087f78;
}
.secure-note {
  color: #78838e;
}
label {
  color: #45515d;
}
input,
select {
  background: #fff;
  border: 1px solid #cfd6de;
  color: var(--text);
  border-radius: 10px;
  padding: 12px;
}
input:focus,
select:focus {
  border-color: #087f78;
  box-shadow: 0 0 0 3px #087f7818;
  outline: 0;
}
.primary {
  background: #087f78;
  color: #fff;
  box-shadow: 0 8px 20px #087f7820;
}
.primary:hover {
  background: #076f69;
  filter: none;
}
.sidebar {
  background: #fff;
  border-color: var(--line);
}
.nav-item {
  color: #63707c;
}
.nav-item:hover,
.nav-item.active {
  background: #edf6f5;
  color: #17212b;
}
.nav-item.active {
  box-shadow: inset 3px 0 #087f78;
}
.system-dot {
  color: #687481;
  border-color: var(--line);
}
.system-dot span {
  background: #15966d;
  box-shadow: none;
}
#logoutBtn {
  color: #c92a3a;
  background: #fff0f1;
  margin-top: 6px;
}
#logoutBtn:hover {
  background: #dc3545;
  color: #fff;
}
.topbar {
  border-color: var(--line);
}
.clock {
  color: #687481;
}
.icon-btn {
  background: #fff;
  color: #42505d;
  border-color: #d9dfe5;
}
.hero-status {
  border-color: #cbe6e2;
  background: #eef8f6;
}
.hero-status p,
.hero-status small {
  color: #5f7774;
}
.pulse {
  background: #15966d;
  box-shadow: 0 0 0 6px #15966d18;
}
.stat-card,
.server-card {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 4px 16px #24304009;
}
.stat-card span,
.stat-card small,
.server-name small,
.server-foot {
  color: #687481;
}
.server-card:hover {
  border-color: #9eaaaf;
  box-shadow: 0 10px 28px #24304012;
}
.server-icon {
  background: #e9f5f3;
  color: #087f78;
}
.status.online {
  color: #08745a;
  background: #e7f6f0;
}
.status.offline {
  color: #c92a3a;
  background: #fff0f1;
}
.mini-stats div,
.detail-box,
.list-box {
  background: #f6f8fa;
  border-color: #e1e6eb;
}
.mini-stats b {
  font-size: 10px;
}
.bar {
  background: #dce4e8;
}
.server-foot,
.event-row,
.posture-row,
.list-line {
  border-color: #e7ebef;
}
.empty {
  border-color: #cbd3db;
  color: #687481;
}
.panel,
.table-wrap {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 4px 16px #24304008;
}
.event-row small,
.event-row time,
.posture-row small {
  color: #687481;
}
.live-chip {
  color: #087f78;
  border-color: #87bdb7;
}
th {
  background: #f3f5f7;
  color: #596673;
}
th,
td {
  border-color: #e5e9ed;
}
.modal {
  background: #24304066;
}
.modal-card {
  background: #fff;
  border-color: #d9e0e6;
}
.modal-close {
  background: #f3f5f7;
  color: #596673;
  border-color: #d9e0e6;
}
.command-box {
  background: #f5f7f9;
  border-color: #d9e0e6;
}
.command-box code {
  background: #17212b;
  color: #d7fff7;
}
.metric-chart {
  background: #f8fafb;
  border-color: #e0e6eb;
}
.metric-chart line {
  stroke: #dce3e8;
}
.toast {
  background: #fff;
  border-color: #d7dee5;
  color: #17212b;
}
.detail-box small {
  display: block;
  color: #687481;
  margin-top: 5px;
  font-size: 9px;
}
.danger-btn {
  border: 0;
  background: #fff0f1;
  color: #c92a3a;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 700;
}
.danger-btn:hover {
  background: #dc3545;
  color: #fff;
}
.help-note {
  padding: 12px 14px;
  background: #f4f7fa;
  border: 1px solid #e0e6eb;
  border-radius: 10px;
  color: #596673;
  font-size: 11px;
  line-height: 1.5;
}
.inline-rename {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  margin: 10px 0 14px;
}
.inline-rename input {
  padding: 9px 11px;
}
.inline-rename .primary {
  padding: 9px 14px;
}
.inline-rename .icon-btn {
  height: 38px;
}
.hosting-panel {
  margin: 18px 0;
}
.hosting-account {
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  padding: 14px;
  margin: 9px 0;
}
.hosting-account > div:first-child b,
.hosting-account > div:first-child small {
  display: block;
}
.hosting-account > div:first-child small {
  color: #687481;
  margin-top: 3px;
}
.hosting-usage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.hosting-usage span {
  background: #f4f7f9;
  border-radius: 8px;
  padding: 9px;
  font-size: 9px;
  color: #687481;
}
.hosting-usage b {
  display: block;
  color: #17212b;
  margin-top: 4px;
}
.domain-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.domain-list span {
  background: #edf6f5;
  color: #076f69;
  padding: 5px 8px;
  border-radius: 20px;
  font-size: 9px;
}
@media (max-width: 760px) {
  .login-shell {
    padding: 14px;
  }
  .login-layout {
    display: block;
    max-width: 440px;
  }
  .login-visual {
    display: none;
  }
  .login-card {
    padding: 38px 28px;
    border-radius: 22px;
  }
  .login-card h1 {
    font-size: 28px;
  }
}

/* Clear server detail */
.metric-chart {
  height: auto;
  min-height: 235px;
  padding: 16px;
  margin: 18px 0;
}
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.chart-head b,
.chart-head small {
  display: block;
}
.chart-head b {
  font-size: 13px;
  color: #17212b;
}
.chart-head small {
  margin-top: 3px;
  color: #687481;
  font-size: 10px;
}
.chart-legend {
  display: flex;
  gap: 13px;
  font-size: 10px;
  color: #596673;
}
.chart-legend span:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.chart-legend .cpu:before {
  background: #087f78;
}
.chart-legend .ram:before {
  background: #7256c9;
}
.chart-body {
  position: relative;
  height: 140px;
  padding-left: 38px;
}
.chart-body svg {
  height: 140px;
}
.chart-body line {
  stroke: #e2e7eb;
  stroke-width: 1;
}
.chart-axis {
  position: absolute;
  left: 0;
  top: 0;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #7a8790;
  font-size: 9px;
}
.chart-time {
  display: flex;
  justify-content: space-between;
  padding-left: 38px;
  color: #7a8790;
  font-size: 9px;
  margin-top: 5px;
}
.domain-section,
.threat-section {
  margin: 24px 0;
}
.count-chip {
  font-size: 10px;
  color: #596673;
  background: #edf1f3;
  padding: 6px 9px;
  border-radius: 20px;
}
.domain-card {
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 10px;
}
.domain-head,
.threat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.domain-head b,
.domain-head small,
.threat-head b,
.threat-head small {
  display: block;
}
.domain-head b,
.threat-head b {
  font-size: 13px;
  color: #17212b;
}
.domain-head small,
.threat-head small {
  font-size: 9px;
  color: #687481;
  margin-top: 3px;
}
.domain-status {
  flex: none;
  padding: 5px 8px;
  border-radius: 20px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.domain-status.safe {
  background: #e7f6f0;
  color: #08745a;
}
.domain-status.warn {
  background: #fff5df;
  color: #9a6100;
}
.domain-status.danger {
  background: #fff0f1;
  color: #c92a3a;
}
.domain-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 13px;
}
.domain-metrics span {
  background: #f5f7f9;
  padding: 9px;
  border-radius: 8px;
  color: #687481;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.domain-metrics b {
  display: block;
  color: #17212b;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 5px;
}
.domain-alert {
  margin-top: 10px;
  background: #fff0f1;
  color: #b72836;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 10px;
}
.compact-empty {
  padding: 18px;
}
.threat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.threat-grid > article {
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  padding: 14px;
}
.threat-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e7ebef;
  padding: 10px 0;
  margin-top: 10px;
}
.threat-line b,
.threat-line small {
  display: block;
}
.threat-line b {
  font-size: 10px;
  color: #26343c;
}
.threat-line small,
.threat-line time {
  font-size: 8px;
  color: #687481;
}
.safe-line {
  margin-top: 11px;
  padding: 11px;
  background: #f0f8f5;
  color: #08745a;
  border-radius: 8px;
  font-size: 10px;
}
@media (max-width: 680px) {
  .domain-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .threat-grid {
    grid-template-columns: 1fr;
  }
  .chart-head {
    display: block;
  }
  .chart-legend {
    margin-top: 8px;
  }
}

/* Readability and dashboard cards */
.hero-status {
  display: none;
}
.view {
  padding-top: 26px;
}
.nav-item {
  font-size: 14px;
  gap: 13px;
}
.nav-item i {
  width: 22px;
  height: 22px;
}
.nav-item i svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clock-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #d9dfe5;
  border-radius: 11px;
  padding: 7px 12px;
  min-width: 162px;
}
.clock-card > svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #087f78;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.clock {
  display: block !important;
  margin: 0;
  color: #24323a;
  line-height: 1.15;
}
.clock b,
.clock small {
  display: block;
}
.clock b {
  font-size: 11px;
}
.clock small {
  font-size: 10px;
  color: #687481;
  margin-top: 3px;
}
.usage-donuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0 18px;
}
.donut-item {
  text-align: center;
  min-width: 0;
}
.donut {
  --value: 0;
  --ring: #15966d;
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--value) * 1%), #e6ebee 0);
}
.donut:before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}
.donut span {
  position: relative;
  z-index: 1;
  color: #17212b;
  font-size: 13px;
  font-weight: 800;
}
.donut-item > b {
  display: block;
  font-size: 11px;
  color: #34434c;
}
.donut-item > small {
  display: block;
  margin-top: 3px;
  color: #687481;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.server-name b {
  font-size: 15px;
}
.server-name small,
.server-foot {
  font-size: 11px;
}
.server-foot {
  padding-top: 13px;
}
table th {
  font-size: 11px;
  padding: 15px 16px;
}
table td {
  font-size: 14px;
  padding: 15px 16px;
}
table td small {
  font-size: 11px;
  margin-top: 5px;
}
.status {
  font-size: 10px;
}
.section-head h3,
.panel-head h3 {
  font-size: 18px;
}
.eyebrow {
  font-size: 11px;
}
.event-row b,
.posture-row b {
  font-size: 13px;
}
.event-row small,
.event-row time,
.posture-row small {
  font-size: 11px;
}
.modal-card.wide {
  width: min(1280px, 100%);
}
.detail-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0 16px;
}
.detail-meta span {
  background: #f4f7f9;
  border: 1px solid #e2e7eb;
  border-radius: 9px;
  padding: 10px;
  min-width: 0;
}
.detail-meta small,
.detail-meta b {
  display: block;
}
.detail-meta small {
  font-size: 9px;
  color: #687481;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.detail-meta b {
  font-size: 11px;
  color: #25343d;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-chart {
  height: auto;
  min-height: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 24px 0;
}
.chart-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 15px;
  margin-bottom: 13px;
}
.chart-toolbar h3 {
  font-size: 18px;
  margin: 0;
  color: #17212b;
}
.chart-toolbar p {
  font-size: 11px;
  color: #687481;
  margin: 4px 0 0;
}
.range-switch {
  display: flex;
  background: #e9eef1;
  border-radius: 9px;
  padding: 3px;
}
.range-btn {
  border: 0;
  background: transparent;
  color: #596673;
  padding: 8px 11px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 750;
}
.range-btn.active {
  background: #fff;
  color: #087f78;
  box-shadow: 0 2px 8px #25333b18;
}
.usage-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}
.usage-chart-card {
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
}
.usage-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.usage-chart-head > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.usage-chart-head span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--chart-color);
}
.usage-chart-head b {
  font-size: 13px;
}
.usage-chart-head strong {
  font-size: 16px;
}
.single-chart {
  position: relative;
  height: 150px;
  margin-top: 11px;
  padding-left: 34px;
}
.single-chart svg {
  width: 100%;
  height: 150px;
  overflow: visible;
  touch-action: none;
  cursor: crosshair;
}
.single-chart line {
  stroke: #e2e7eb;
  stroke-width: 1;
}
.single-chart .chart-axis {
  height: 150px;
}
.cursor-dot {
  display: none;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.chart-tooltip {
  position: absolute;
  z-index: 3;
  display: none;
  transform: translate(-50%, -100%);
  background: #17212b;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 8px 22px #17212b2e;
  white-space: nowrap;
  pointer-events: none;
}
.chart-tooltip.show {
  display: block;
}
.chart-tooltip b,
.chart-tooltip span {
  display: block;
}
.chart-tooltip b {
  font-size: 11px;
}
.chart-tooltip span {
  font-size: 9px;
  color: #cbd5db;
  margin-top: 3px;
}
.usage-chart-card .chart-time {
  padding-left: 34px;
  font-size: 8px;
}
.domain-head b,
.threat-head b {
  font-size: 15px;
}
.domain-head small,
.threat-head small {
  font-size: 11px;
}
.domain-metrics span {
  font-size: 10px;
}
.domain-metrics b {
  font-size: 13px;
}
.count-chip {
  font-size: 11px;
}
.threat-line b {
  font-size: 12px;
}
.threat-line small,
.threat-line time,
.safe-line {
  font-size: 10px;
}
.list-box h4 {
  font-size: 13px;
}
.list-line,
.list-line span {
  font-size: 11px;
}
@media (max-width: 1000px) {
  .usage-chart-grid {
    grid-template-columns: 1fr;
  }
  .detail-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .clock-card {
    display: none;
  }
  .usage-donuts {
    gap: 5px;
  }
  .donut {
    width: 64px;
    height: 64px;
  }
  .chart-toolbar {
    display: block;
  }
  .range-switch {
    margin-top: 11px;
    width: 100%;
  }
  .range-btn {
    flex: 1;
  }
  .detail-meta {
    grid-template-columns: 1fr;
  }
  .domain-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  table td {
    font-size: 13px;
  }
}

/* Distinct neutral visual system */
:root {
  font-family: "Manrope", "Segoe UI", sans-serif;
  --bg: #e4e8eb;
  --panel: #f8f9fa;
  --line: #cfd6da;
  --text: #172126;
  --muted: #5e6c74;
  --shadow: 0 18px 50px #17212614;
}
body {
  background: #e4e8eb;
  color: var(--text);
}
main {
  background: #e9edef;
}
.sidebar {
  background: #172126;
  border-color: #2c393f;
}
.brand {
  padding: 0 8px 28px;
}
.brand-favicon {
  width: 39px;
  height: 39px;
  display: block;
  filter: drop-shadow(0 7px 14px #0005);
}
.brand b {
  font-size: 17px;
  color: #f5f8f9;
  letter-spacing: -0.02em;
}
.sidebar .nav-item {
  color: #aeb9be;
}
.sidebar .nav-item:hover {
  background: #222f35;
  color: #fff;
}
.sidebar .nav-item.active {
  background: #e7f5f2;
  color: #087f78;
  box-shadow: none;
}
.sidebar .system-dot {
  color: #8c9aa1;
  border-color: #344147;
}
.sidebar #passwordBtn {
  color: #c6d0d4;
}
.sidebar #passwordBtn:hover {
  color: #fff;
}
.sidebar #logoutBtn {
  width: 100%;
  margin-top: 9px;
  padding: 13px;
  background: #4a2228;
  color: #ffb8bf;
  border: 1px solid #6a3038;
  justify-content: flex-start;
}
.sidebar #logoutBtn:hover {
  background: #b72e3d;
  color: #fff;
  border-color: #b72e3d;
}
.topbar {
  border-color: #cdd4d8;
}
.view {
  padding-top: 28px;
}
.stat-card,
.server-card,
.panel,
.table-wrap,
.domain-card,
.threat-grid > article,
.usage-chart-card {
  background: #f8f9fa;
  border-color: #ccd4d8;
}
.stat-card,
.server-card {
  box-shadow: 0 7px 22px #1c292f0b;
}
.stat-card {
  border-top: 3px solid currentColor;
}
.server-card {
  border-radius: 15px;
}
.detail-box,
.list-box,
.mini-stats div {
  background: #eef1f3;
  border-color: #d5dce0;
}
.modal-card {
  background: #eef1f3;
}
.modal {
  background: #17212680;
}
.detail-meta span,
.domain-metrics span {
  background: #e9edef;
  border-color: #d5dce0;
}
.metric-chart,
.domain-section,
.threat-section {
  color: #172126;
}
.clock-card,
.icon-btn {
  background: #f7f9fa;
}
.table-wrap th {
  background: #dfe4e7;
  color: #3f4e56;
}
.table-wrap tr:hover td {
  background: #f0f4f5;
}
.toast {
  background: #172126;
  color: #fff;
  border-color: #34434a;
}
@media (max-width: 680px) {
  main {
    background: #e9edef;
  }
  .sidebar {
    background: #172126f7;
  }
  .sidebar .nav-item.active {
    background: #e7f5f2;
    color: #087f78;
  }
  .sidebar #logoutBtn {
    display: none;
  }
}

/* Operational detail workspace */
.modal {
  padding: 28px;
  background: #111a20a6;
}
.modal-card.wide {
  width: min(1380px, 100%);
  max-height: 94vh;
  padding: 32px;
  border: 1px solid #bfc9ce;
  border-radius: 22px;
  background: #f2f5f6;
  box-shadow: 0 32px 90px #10181d4d;
}
.modal-close {
  right: 18px;
  top: 17px;
  width: 38px;
  height: 38px;
  background: #e2e8eb;
  color: #33434b;
  border-color: #cbd4d9;
  font-size: 23px;
}
.modal-close:hover {
  background: #d4dde1;
  color: #111b20;
}
.detail-title {
  padding: 0 52px 19px 0;
  border-bottom: 1px solid #d3dade;
}
.detail-title h2 {
  font-size: 27px;
  letter-spacing: -0.035em;
}
.detail-title > .status {
  margin-top: 7px;
}
.detail-meta {
  margin: 18px 0;
}
.detail-grid {
  gap: 12px;
}
.detail-box {
  padding: 15px;
  border-radius: 11px;
}
.detail-box span {
  font-size: 10px;
  color: #53646d;
}
.detail-box b {
  font-size: 16px;
  color: #172126;
  margin-top: 7px;
}
.detail-box small {
  font-size: 11px;
  color: #087f78;
  font-weight: 650;
  margin-top: 6px;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  padding: 6px 9px;
}
.status:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status.online {
  background: #e2f4ee;
  color: #067457;
  border-color: #bfe3d7;
}
.status.offline {
  background: #fae8ea;
  color: #b72e3d;
  border-color: #efc6cb;
}
.chart-toolbar {
  margin: 30px 0 14px;
  align-items: center;
}
.chart-toolbar h3 {
  font-size: 21px;
}
.range-switch {
  padding: 4px;
}
.range-btn {
  font-size: 12px;
  padding: 9px 14px;
}
.usage-chart-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}
.usage-chart-card {
  padding: 18px 20px;
  border-radius: 14px;
}
.usage-chart-head b {
  font-size: 16px;
}
.usage-chart-head strong {
  font-size: 17px;
}
.single-chart {
  height: 190px;
  padding-left: 62px;
  margin-top: 14px;
}
.single-chart svg {
  height: 190px;
}
.single-chart .chart-axis {
  height: 190px;
  font-size: 10px;
}
.usage-chart-card .chart-time {
  padding-left: 62px;
  font-size: 10px;
  margin-top: 7px;
}
.chart-tooltip {
  padding: 10px 12px;
}
.chart-tooltip b {
  font-size: 12px;
}
.chart-tooltip span,
.chart-tooltip small {
  display: block;
  font-size: 10px;
}
.chart-tooltip span {
  margin-top: 4px;
}
.chart-tooltip small {
  color: #8fe0d0;
  margin-top: 3px;
}
.domain-section {
  margin: 30px 0;
}
.domain-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 13px;
}
.domain-toolbar .eyebrow {
  margin: 0 0 4px;
}
.domain-toolbar h3 {
  font-size: 21px;
  margin: 0;
}
.domain-search {
  position: relative;
  width: min(330px, 100%);
}
.domain-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #60717a;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.domain-search input {
  height: 42px;
  padding-left: 40px;
  background: #fff;
  font-size: 13px;
}
.domain-table {
  overflow: auto;
  border: 1px solid #cbd4d8;
  border-radius: 13px;
  background: #fff;
}
.domain-table table {
  min-width: 1050px;
}
.domain-table th {
  padding: 0;
  background: #dfe5e8;
}
.domain-table th button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px;
  border: 0;
  background: transparent;
  color: #34444c;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.domain-table th button:hover {
  background: #d4dde1;
}
.domain-table th button span {
  color: #087f78;
  font-size: 16px;
}
.domain-table td {
  padding: 15px 14px;
  font-size: 13px;
}
.domain-table td:first-child b {
  font-size: 14px;
  color: #172126;
}
.domain-table tbody tr:hover td {
  background: #f1f6f6;
}
#blockForm {
  grid-template-columns: minmax(260px, 2fr) minmax(160px, 1fr) auto;
  align-items: end;
  gap: 12px;
}
#blockForm .primary {
  height: 44px;
  white-space: nowrap;
  padding-inline: 20px;
}
#blockForm input,
#blockForm select {
  height: 44px;
}
.technical-details summary {
  font-size: 13px;
  padding: 15px 17px;
}
@media (max-width: 760px) {
  .modal {
    padding: 7px;
  }
  .modal-card.wide {
    padding: 22px 16px;
    border-radius: 16px;
    max-height: 98vh;
  }
  .detail-title h2 {
    font-size: 22px;
  }
  .domain-toolbar {
    display: block;
  }
  .domain-search {
    width: 100%;
    margin-top: 12px;
  }
  .range-switch {
    overflow: auto;
  }
  .range-btn {
    white-space: nowrap;
  }
  .single-chart {
    padding-left: 52px;
  }
  #blockForm {
    grid-template-columns: 1fr;
  }
  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .range-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .single-chart {
    padding-left: 46px;
  }
  .usage-chart-card {
    padding: 15px 12px;
  }
}

/* Session bootstrap */
.boot-view {
  display: none;
  position: fixed;
  z-index: 100;
  inset: 0;
  background: #e4e8eb;
  place-items: center;
  align-content: center;
  gap: 11px;
}
.booting .boot-view {
  display: grid;
}
.booting #loginView,
.booting #appView {
  display: none !important;
}
.boot-view img {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 10px 20px #17212625);
}
.boot-view b {
  font-size: 18px;
  color: #172126;
}
.boot-view span {
  width: 76px;
  height: 3px;
  overflow: hidden;
  border-radius: 4px;
  background: #cbd4d8;
  position: relative;
}
.boot-view span:after {
  content: "";
  position: absolute;
  inset: 0;
  width: 38%;
  border-radius: 4px;
  background: #087f78;
  animation: boot-progress 1s ease-in-out infinite;
}
@keyframes boot-progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(270%);
  }
}

/* Security event detail */
.security-events {
  min-width: 1280px;
}
.security-events th:nth-child(1) {
  width: 110px;
}
.security-events th:nth-child(2) {
  width: 140px;
}
.security-events th:nth-child(3) {
  width: 170px;
}
.security-events th:nth-child(4) {
  width: 260px;
}
.security-events th:nth-child(6) {
  width: 230px;
}
.security-events td {
  vertical-align: top;
  line-height: 1.55;
}
.security-events td:nth-child(5) {
  color: #41525a;
}
.event-type {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 8px;
  background: #e5ecef;
  color: #34464e;
  font-size: 11px;
  font-weight: 750;
}
.event-row {
  align-items: start;
}
.event-row small {
  line-height: 1.45;
  margin-top: 3px;
}

/* Five-step chart scale */
.usage-chart-card .single-chart {
  padding-left: 92px;
}
.usage-chart-card .chart-time {
  padding-left: 92px;
}
.usage-chart-card .chart-axis {
  font-size: 10px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .usage-chart-card .single-chart {
    padding-left: 78px;
  }
  .usage-chart-card .chart-time {
    padding-left: 78px;
  }
}
@media (max-width: 480px) {
  .usage-chart-card .single-chart {
    padding-left: 70px;
  }
  .usage-chart-card .chart-time {
    padding-left: 70px;
  }
  .usage-chart-card .chart-axis {
    font-size: 8px;
  }
}

/* Compact charts and attack history */
.modal-card.wide {
  padding: 24px;
}
.detail-title {
  padding-bottom: 13px;
}
.detail-meta {
  margin: 12px 0;
}
.detail-box {
  padding: 12px;
}
.chart-toolbar {
  margin: 22px 0 11px;
}
.usage-chart-grid {
  gap: 10px;
}
.usage-chart-card {
  padding: 14px 17px;
}
.usage-chart-card .single-chart {
  height: 140px;
  margin-top: 9px;
}
.usage-chart-card .single-chart svg {
  height: 140px;
}
.usage-chart-card .chart-axis {
  height: 140px;
  font-weight: 800;
  color: #34464e;
}
.usage-chart-card .chart-time {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.usage-chart-card .chart-time span {
  font-weight: 650;
  color: #66767e;
}
.domain-section,
.threat-section {
  margin: 23px 0;
}
.threat-open {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #cbd5d9;
  border-radius: 9px;
  background: #edf2f3;
  color: #087f78;
  font-size: 11px;
  font-weight: 800;
}
.threat-open:hover {
  background: #dfe9e9;
}
.nested-modal {
  z-index: 45;
}
.threat-modal-card {
  position: relative;
  width: min(920px, 100%);
  max-height: 88vh;
  padding: 27px;
  background: #f2f5f6;
  border: 1px solid #bdc8cd;
  border-radius: 20px;
  box-shadow: 0 30px 90px #10181d66;
}
.threat-modal-title {
  padding-right: 45px;
  margin-bottom: 16px;
}
.threat-modal-title .eyebrow {
  margin-top: 0;
}
.threat-modal-title h2 {
  font-size: 24px;
  margin: 3px 0;
}
.threat-modal-title p {
  font-size: 12px;
  color: #61727a;
  margin: 5px 0;
}
.threat-history {
  max-height: 65vh;
  overflow: auto;
  display: grid;
  gap: 9px;
  padding-right: 5px;
}
.threat-history article {
  background: #fff;
  border: 1px solid #ccd5d9;
  border-radius: 12px;
  padding: 14px;
}
.threat-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.threat-history-head time {
  font-size: 10px;
  color: #6b7a82;
}
.threat-history h4 {
  font-size: 14px;
  margin: 11px 0 5px;
}
.threat-history p {
  font-size: 12px;
  line-height: 1.55;
  color: #42535b;
  margin: 0;
}
.threat-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #e1e6e8;
}
.threat-source b {
  font-size: 11px;
}
.threat-source span {
  font-size: 10px;
  color: #687981;
}
@media (max-width: 760px) {
  .modal-card.wide {
    padding: 18px 14px;
  }
  .threat-modal-card {
    padding: 20px 14px;
  }
  .threat-history-head,
  .threat-source {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Full-width application canvas */
.app-shell main {
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* Simple login */
.login-shell {
  background: #f3f5f6;
  padding: 20px;
}
.login-layout {
  display: block;
  width: min(400px, 100%);
  border-radius: 18px;
  overflow: visible;
  box-shadow: 0 20px 55px #26343d14;
}
.login-card {
  min-height: 0;
  padding: 42px 38px 36px;
  border: 1px solid #dfe5e9;
  border-radius: 18px;
  align-items: stretch;
  text-align: left;
}
.login-card > .brand-mark {
  margin: 0 auto 17px;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  font-size: 23px;
}
.login-card h1 {
  text-align: center;
  font-size: 25px;
  letter-spacing: -0.03em;
  color: #17242b;
}
.login-form {
  margin-top: 30px;
  gap: 17px;
}
.login-form label {
  font-size: 12px;
  color: #45545c;
}
.login-form input {
  height: 47px;
  background: #f8fafb;
  border-color: #d9e0e4;
  color: #17242b;
}
.login-form input::placeholder {
  color: #9aa5ab;
}
.login-form .primary {
  height: 47px;
  margin-top: 3px;
  background: #087f78;
  color: #fff;
  box-shadow: 0 9px 22px #087f7824;
}
.login-form .form-error {
  text-align: center;
}
.list-box h4,
.list-line b {
  color: #17212b;
}
.list-line,
.list-line span {
  color: #596673;
}
.technical-details {
  margin: 14px 0;
  border: 1px solid #dfe4ea;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}
.technical-details summary {
  cursor: pointer;
  padding: 13px 15px;
  color: #34434c;
  font-size: 12px;
  font-weight: 750;
  list-style: none;
}
.technical-details summary::-webkit-details-marker {
  display: none;
}
.technical-details summary:after {
  content: "＋";
  float: right;
  color: #087f78;
}
.technical-details[open] summary {
  border-bottom: 1px solid #e7ebef;
}
.technical-details[open] summary:after {
  content: "−";
}
.technical-details > .detail-columns {
  margin: 0;
  padding: 12px;
}
@media (max-width: 760px) {
  .login-layout {
    max-width: 400px;
  }
  .login-card {
    padding: 36px 24px 30px;
    border-radius: 16px;
  }
  .login-card h1 {
    font-size: 24px;
  }
}
@media (max-width: 680px) {
  .sidebar {
    background: #fffffff5;
    border-color: var(--line);
  }
  .nav-item.active {
    box-shadow: inset 0 -3px #087f78;
  }
  .top-actions .primary {
    padding: 10px;
    font-size: 0;
  }
  .top-actions .primary:first-letter {
    font-size: 16px;
  }
  .server-card {
    padding: 14px;
  }
  .mini-stats,
  .hosting-usage {
    grid-template-columns: 1fr;
  }
  .modal {
    padding: 8px;
  }
  .modal-card {
    padding: 20px;
  }
  .detail-title {
    display: block;
  }
  .detail-title > .status {
    display: inline-block;
    margin-top: 8px;
  }
  .inline-rename {
    grid-template-columns: 1fr auto;
  }
  .inline-rename .icon-btn {
    grid-column: 2;
  }
  .inline-rename .primary {
    grid-column: 1;
    grid-row: 2;
  }
  .table-wrap:not(#serverTable) table {
    min-width: 680px;
  }
  #serverTable {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  #serverTable table,
  #serverTable tbody,
  #serverTable tr,
  #serverTable td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  #serverTable thead {
    display: none;
  }
  #serverTable tbody {
    display: grid;
    gap: 10px;
  }
  #serverTable tr {
    background: #fff;
    border: 1px solid #dfe4ea;
    border-radius: 12px;
    padding: 13px;
    box-shadow: 0 4px 14px #24304008;
  }
  #serverTable td {
    border: 0;
    padding: 5px 0;
  }
  #serverTable td:nth-child(2) b {
    font-size: 14px;
  }
  #serverTable td:nth-child(n + 4) {
    display: grid;
    grid-template-columns: 90px 1fr;
  }
  #serverTable td:nth-child(4):before {
    content: "CPU";
  }
  #serverTable td:nth-child(5):before {
    content: "RAM";
  }
  #serverTable td:nth-child(6):before {
    content: "Disk";
  }
  #serverTable td:nth-child(7):before {
    content: "Update";
  }
  #serverTable td:before {
    color: #687481;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
  }
}

/* Threat intelligence table */
#eventFeed {
  max-height: 285px;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-color: #9aa9b0 transparent;
  scrollbar-width: thin;
}
#eventFeed .event-row small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#eventFeed .event-row small + small {
  -webkit-line-clamp: 1;
}
.threat-modal-card {
  width: min(1180px, 100%);
}
.threat-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -5px 0 13px;
}
.threat-search {
  position: relative;
  width: min(340px, 100%);
}
.threat-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #60717a;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.threat-search input {
  height: 42px;
  padding-left: 40px;
  background: #fff;
  color: #172126;
  border-color: #cbd4d8;
  font-size: 13px;
}
.threat-table-wrap {
  max-height: 58vh;
  overflow: auto;
  border: 1px solid #c5d0d5;
  border-radius: 13px;
  background: #fff;
}
.threat-table {
  min-width: 1040px;
}
.threat-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 13px 14px;
  background: #dfe5e8;
  color: #34444c;
  font-size: 10px;
}
.threat-table td {
  padding: 13px 14px;
  color: #34444c;
  font-size: 12px;
  vertical-align: middle;
}
.threat-table tbody tr:hover td {
  background: #f2f7f7;
}
.threat-table .event-type {
  margin: 2px 3px 2px 0;
  white-space: nowrap;
}
.ip-detail-btn {
  border: 0;
  background: transparent;
  color: #087f78;
  padding: 0;
  font-size: 13px;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: #9bcac6;
  text-underline-offset: 4px;
}
.ip-detail-btn:hover {
  color: #045e59;
  text-decoration-color: #045e59;
}
.attempt-count {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fff0f1;
  color: #b72836;
  font-size: 13px;
}
.threat-table .danger-btn {
  white-space: nowrap;
  padding: 8px 11px;
}
.threat-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 0 46px 17px 0;
}
.threat-detail-head .eyebrow {
  margin: 0 0 3px;
}
.threat-detail-head h2 {
  margin: 0;
  font-size: 23px;
}
.threat-detail-head p {
  margin: 4px 0 0;
  color: #61727a;
  font-size: 11px;
}
.back-btn {
  align-self: start;
  border: 1px solid #c6d1d5;
  background: #fff;
  color: #405159;
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 11px;
  font-weight: 750;
}
.back-btn:hover {
  border-color: #8fa2aa;
  color: #172126;
}
.threat-actions {
  display: flex;
  gap: 8px;
}
.threat-actions button {
  height: 39px;
  white-space: nowrap;
}
.outline-danger {
  border: 1px solid #d98d96;
  background: #fff;
  color: #b72836;
  border-radius: 8px;
  padding: 8px 11px;
  font-weight: 750;
}
.outline-danger:hover {
  background: #fff0f1;
}
.threat-table-wrap.detail {
  max-height: 55vh;
}
.threat-detail-table {
  min-width: 900px;
}
.threat-detail-table th:first-child {
  width: 180px;
}
.threat-detail-table th:nth-child(2) {
  width: 145px;
}
.threat-detail-table th:nth-child(4) {
  width: 105px;
}
.threat-detail-table th:nth-child(5) {
  width: 150px;
}
.result-chip {
  display: inline-flex;
  padding: 6px 8px;
  border-radius: 7px;
  background: #e4f4ee;
  color: #08745a;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.result-chip.unknown {
  background: #edf0f2;
  color: #5a6870;
}
.result-chip.review {
  background: #fff0e2;
  color: #9b4c00;
}
.result-chip.rejected {
  background: #e4f4ee;
  color: #08745a;
}
.threat-note {
  margin: 11px 2px 0;
  color: #62727a;
  font-size: 10px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .threat-toolbar {
    justify-content: stretch;
  }
  .threat-search {
    width: 100%;
  }
  .threat-detail-head {
    display: block;
    padding-right: 40px;
  }
  .threat-detail-head .back-btn {
    margin-bottom: 15px;
  }
  .threat-actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
  }
  .threat-actions button {
    width: 100%;
  }
  .threat-table-wrap {
    max-height: 65vh;
  }
}

/* Manual firewall blocks */
.manual-block-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #cbd4d8;
  border-radius: 14px;
  background: #f8f9fa;
}
.manual-block-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 12px;
}
.manual-block-title .eyebrow {
  margin: 0 0 3px;
}
.manual-block-title h3 {
  margin: 0;
  font-size: 17px;
}
.manual-block-title > span {
  padding: 6px 9px;
  border-radius: 20px;
  background: #e6ecef;
  color: #52626a;
  font-size: 10px;
  font-weight: 750;
}
.manual-block-list {
  display: grid;
  gap: 10px;
}
.manual-block-card {
  padding: 14px;
  border: 1px solid #d1dade;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 12px #17212608;
}
.manual-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid #e4e9eb;
}
.manual-block-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.blocked-ip {
  border: 0;
  background: transparent;
  color: #087f78;
  padding: 0;
  font-size: 14px;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: #9bcac6;
  text-underline-offset: 4px;
}
.blocked-state {
  padding: 5px 8px;
  border-radius: 20px;
  background: #fff0f1;
  color: #b72836;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.manual-block-grid {
  display: grid;
  grid-template-columns: 0.75fr 1fr 1.55fr 1.15fr 1.35fr;
  gap: 8px;
  margin-top: 11px;
}
.manual-block-grid > span {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #eef2f4;
}
.manual-block-grid small,
.manual-block-grid b {
  display: block;
}
.manual-block-grid small {
  color: #64737b;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.manual-block-grid b {
  margin-top: 5px;
  color: #26353c;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manual-block-empty {
  padding: 22px;
  text-align: center;
  color: #67767e;
  border: 1px dashed #cbd4d8;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
}
@media (max-width: 1000px) {
  .manual-block-grid {
    grid-template-columns: 1fr 1fr;
  }
  .manual-block-grid > span:last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  .manual-block-panel {
    padding: 13px;
  }
  .manual-block-head {
    align-items: flex-start;
  }
  .manual-block-head > div {
    align-items: flex-start;
    flex-direction: column;
  }
  .manual-block-grid {
    grid-template-columns: 1fr;
  }
  .manual-block-grid > span:last-child {
    grid-column: auto;
  }
  .blocked-state {
    font-size: 8px;
  }
}

/* Per-domain workspace */
.domain-detail-btn {
  border: 0;
  background: transparent;
  color: #087f78;
  padding: 0;
  font-size: 14px;
  font-weight: 850;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #9bcac6;
  text-underline-offset: 4px;
}
.domain-detail-btn:hover {
  color: #045e59;
  text-decoration-color: #045e59;
}
.domain-modal {
  z-index: 46;
}
.domain-modal-card {
  position: relative;
  width: min(1040px, 100%);
  max-height: 90vh;
  padding: 27px;
  background: #f2f5f6;
  border: 1px solid #bdc8cd;
  border-radius: 20px;
  box-shadow: 0 30px 90px #10181d66;
}
.domain-detail-title {
  padding-right: 48px;
  margin-bottom: 16px;
}
.domain-detail-title > .eyebrow {
  margin: 0 0 4px;
}
.domain-detail-title > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.domain-detail-title h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.025em;
}
.domain-detail-title > p:last-child {
  margin: 5px 0 0;
  color: #61727a;
  font-size: 11px;
}
.domain-identity {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.7fr;
  gap: 9px;
  margin-bottom: 9px;
}
.domain-identity > span {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #cbd6da;
  border-left: 4px solid #0b8e86;
  border-radius: 10px;
  background: #e8efef;
}
.domain-identity small,
.domain-identity b,
.domain-identity em {
  display: block;
}
.domain-identity small {
  color: #61727a;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.domain-identity b {
  margin-top: 5px;
  color: #16252b;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.domain-identity em {
  margin-top: 4px;
  color: #52656d;
  font-size: 10px;
  font-style: normal;
}
.cpanel-account {
  display: block;
  min-width: 125px;
}
.cpanel-account b,
.cpanel-account small {
  display: block;
}
.cpanel-account b {
  color: #1c343b;
}
.cpanel-account small {
  margin-top: 4px;
  color: #62757d;
  font-size: 10px;
}
.domain-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.domain-detail-stats > span {
  padding: 13px;
  border: 1px solid #d3dade;
  border-radius: 10px;
  background: #fff;
}
.domain-detail-stats small,
.domain-detail-stats b {
  display: block;
}
.domain-detail-stats small {
  color: #65757d;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.domain-detail-stats b {
  margin-top: 6px;
  color: #1e2c33;
  font-size: 14px;
}
.domain-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 9px;
}
.domain-detail-grid article {
  padding: 13px;
  border-radius: 10px;
  background: #e7ecef;
}
.domain-detail-grid span,
.domain-detail-grid b {
  display: block;
}
.domain-detail-grid span {
  color: #65757d;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.domain-detail-grid b {
  margin-top: 6px;
  font-size: 12px;
}
.domain-attacker-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 20px 0 10px;
}
.domain-attacker-head .eyebrow {
  margin: 0 0 3px;
}
.domain-attacker-head h3 {
  margin: 0;
  font-size: 17px;
}
.domain-attacker-head > span {
  padding: 6px 9px;
  border-radius: 20px;
  background: #e4eaed;
  color: #52626a;
  font-size: 10px;
  font-weight: 750;
}
.domain-attacker-table {
  overflow: auto;
  border: 1px solid #cbd4d8;
  border-radius: 11px;
  background: #fff;
}
.domain-attacker-table table {
  min-width: 520px;
}
.domain-attacker-table th {
  background: #dfe5e8;
}
.domain-attacker-table td,
.domain-attacker-table th {
  padding: 12px 14px;
}
.domain-attacker-table strong {
  display: inline-grid;
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #fff0f1;
  color: #b72836;
  text-align: center;
}
@media (max-width: 700px) {
  .domain-modal-card {
    padding: 21px 14px;
  }
  .domain-detail-title h2 {
    font-size: 20px;
  }
  .domain-detail-stats {
    grid-template-columns: 1fr 1fr;
  }
  .domain-detail-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 430px) {
  .domain-detail-stats {
    grid-template-columns: 1fr;
  }
  .domain-detail-title > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Compact global security workspace */
#securityTable {
  overflow: hidden;
}
.security-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #cfd8dc;
  border-bottom: 1px solid #cbd4d8;
}
.security-summary > span {
  padding: 17px 19px;
  background: #f3f6f7;
}
.security-summary small,
.security-summary b {
  display: block;
}
.security-summary small {
  color: #61717a;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.security-summary b {
  margin-top: 5px;
  color: #17262d;
  font-size: 22px;
}
.security-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid #d7dfe2;
  background: #f8fafb;
}
.security-toolbar > div:first-child b,
.security-toolbar > div:first-child small {
  display: block;
}
.security-toolbar > div:first-child b {
  font-size: 15px;
}
.security-toolbar > div:first-child small {
  margin-top: 3px;
  color: #687981;
  font-size: 10px;
}
.security-toolbar .threat-search {
  width: min(320px, 100%);
}
.security-table-scroll {
  max-height: calc(100vh - 355px);
  min-height: 260px;
  overflow: auto;
}
.security-group-table {
  min-width: 1080px;
}
.security-group-table th {
  position: sticky;
  z-index: 1;
  top: 0;
}
.security-group-table td {
  vertical-align: middle;
}
.security-group-table th:nth-child(1) {
  width: 150px;
}
.security-group-table th:nth-child(2) {
  width: 180px;
}
.security-group-table th:nth-child(3) {
  width: 250px;
}
.security-group-table th:nth-child(5) {
  width: 90px;
}
.security-group-table th:nth-child(6) {
  width: 185px;
}
.security-group-table th:nth-child(7) {
  width: 105px;
}
.security-detail {
  white-space: nowrap;
}
@media (max-width: 680px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 14px 0 22px;
  }
  .stat-card {
    min-height: 118px;
    padding: 13px;
  }
  .stat-card strong {
    font-size: 24px;
    margin-top: 8px;
  }
  .stat-card span {
    font-size: 8px;
  }
  .server-grid {
    grid-template-columns: 1fr;
  }
  .security-summary {
    grid-template-columns: repeat(3, 1fr);
  }
  .security-summary > span {
    padding: 12px 9px;
  }
  .security-summary small {
    font-size: 8px;
  }
  .security-summary b {
    font-size: 18px;
  }
  .security-toolbar {
    display: block;
    padding: 14px;
  }
  .security-toolbar .threat-search {
    width: 100%;
    margin-top: 12px;
  }
  .security-table-scroll {
    max-height: none;
    min-height: 0;
  }
  .two-col {
    margin-top: 20px;
  }
  .panel {
    padding: 15px;
  }
  .topbar {
    height: 76px;
  }
  .view {
    padding-top: 18px;
  }
}

/* Server detail navigation and domain pagination */
.detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 15px 0 6px;
  padding: 5px;
  border-radius: 13px;
  background: #dfe5e8;
}
.detail-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #52626a;
  padding: 13px 16px;
  text-align: center;
}
.detail-tab-btn span {
  display: block;
  font-size: 14px;
  font-weight: 850;
}
.detail-tab-btn b {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 22px;
  padding: 0 7px;
  border-radius: 12px;
  background: #cdd7db;
  color: #53656d;
  font-size: 10px;
}
.detail-tab-btn.active {
  border-color: #c4d0d5;
  background: #fff;
  color: #087f78;
  box-shadow: 0 4px 13px #17212612;
}
.detail-tab-btn.active b {
  background: #e4f4f1;
  color: #087f78;
}
.detail-pane {
  padding-top: 3px;
}
.workspace-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}
.workspace-head .eyebrow {
  margin: 0 0 4px;
}
.workspace-head h3 {
  margin: 0;
  font-size: 20px;
}
.workspace-head > div:first-child > small {
  display: block;
  margin-top: 4px;
  color: #65757d;
  font-size: 10px;
}
.domain-filters {
  display: grid;
  grid-template-columns: 170px minmax(230px, 330px) 160px;
  align-items: end;
  gap: 9px;
}
.domain-filters label {
  gap: 5px;
}
.domain-filters label > span {
  font-size: 9px;
  color: #65757d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.domain-filters select {
  height: 42px;
  font-size: 12px;
}
.domain-table table {
  min-width: 1500px;
}
.domain-table th:nth-child(1) {
  min-width: 210px;
}
.domain-table th:nth-child(2) {
  min-width: 160px;
}
.domain-table th:nth-child(3) {
  min-width: 120px;
}
.domain-table th:nth-child(4),
.domain-table th:nth-child(5) {
  min-width: 110px;
}
.suspicious-count {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #fff3e3;
  color: #9a5b00;
}
.domain-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 12px;
}
.domain-pagination > span {
  color: #68777f;
  font-size: 11px;
}
.domain-pagination > div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.domain-page-btn {
  min-width: 34px;
  height: 34px;
  border: 1px solid #cbd4d8;
  border-radius: 8px;
  background: #fff;
  color: #42535b;
  font-size: 11px;
  font-weight: 750;
}
.domain-page-btn:hover:not(:disabled),
.domain-page-btn.active {
  border-color: #087f78;
  background: #087f78;
  color: #fff;
}
.domain-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.domain-pagination > div > span {
  padding: 0 3px;
  color: #74828a;
}
.user-section {
  margin: 23px 0;
}
.user-search {
  width: min(340px, 100%);
}
.user-table {
  overflow: auto;
  border: 1px solid #cbd4d8;
  border-radius: 13px;
  background: #fff;
}
.user-table table {
  min-width: 1280px;
}
.user-table th {
  background: #dfe5e8;
}
.user-table td {
  vertical-align: middle;
}
.user-table th:first-child {
  min-width: 150px;
}
.user-table th:nth-child(2) {
  min-width: 220px;
}
.user-detail-btn {
  border: 0;
  background: transparent;
  color: #087f78;
  padding: 0;
  font-size: 14px;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: #9bcac6;
  text-underline-offset: 4px;
}
.user-open {
  white-space: nowrap;
}
.user-modal-title {
  padding-right: 48px;
  margin-bottom: 14px;
}
.user-modal-title .eyebrow {
  margin: 0 0 4px;
}
.user-modal-title > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-modal-title h2 {
  margin: 0;
  font-size: 25px;
}
.user-identity {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.65fr;
  gap: 9px;
}
.user-identity > span,
.user-resource-grid > span {
  padding: 12px 13px;
  border: 1px solid #d0d9dd;
  border-radius: 10px;
  background: #fff;
}
.user-identity small,
.user-identity b,
.user-resource-grid small,
.user-resource-grid b {
  display: block;
}
.user-identity small,
.user-resource-grid small {
  font-size: 9px;
  color: #65757d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.user-identity b,
.user-resource-grid b {
  margin-top: 5px;
  font-size: 13px;
  color: #1d2d34;
  overflow-wrap: anywhere;
}
.user-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 9px;
}
.user-domain-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 20px 0 10px;
}
.user-domain-head .eyebrow {
  margin: 0 0 3px;
}
.user-domain-head h3 {
  margin: 0;
  font-size: 17px;
}
.user-domain-head > span {
  padding: 6px 9px;
  border-radius: 20px;
  background: #e4eaed;
  color: #52626a;
  font-size: 10px;
  font-weight: 750;
}
.user-domain-table {
  max-height: 46vh;
  overflow: auto;
  border: 1px solid #cbd4d8;
  border-radius: 11px;
  background: #fff;
}
.user-domain-table table {
  min-width: 900px;
}
.user-domain-table th {
  position: sticky;
  top: 0;
  background: #dfe5e8;
  z-index: 1;
}
.user-domain-table td {
  vertical-align: middle;
}
.domain-attacker-table table {
  min-width: 880px;
}
.domain-attacker-btn {
  border: 0;
  background: transparent;
  color: #087f78;
  padding: 0;
  font-size: 12px;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: #9bcac6;
  text-underline-offset: 4px;
}
.domain-attacker-open {
  white-space: nowrap;
}
.domain-attack-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0 46px 17px 0;
}
.domain-attack-title .back-btn {
  align-self: start;
}
.domain-attack-title .eyebrow {
  margin: 0 0 3px;
}
.domain-attack-title h2 {
  margin: 0;
  font-size: 23px;
}
.domain-attack-title p:last-child {
  margin: 4px 0 0;
  color: #61727a;
  font-size: 11px;
}
.attack-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 11px 14px;
  border: 1px solid #c8d4d8;
  border-radius: 10px;
  background: #e7eeee;
}
.attack-summary b {
  font-size: 13px;
  color: #1b3037;
}
.attack-summary span {
  font-size: 11px;
  color: #5c6e76;
}
.domain-attack-table {
  max-height: 57vh;
  overflow: auto;
  border: 1px solid #c7d1d6;
  border-radius: 12px;
  background: #fff;
}
.domain-attack-table table {
  min-width: 1160px;
}
.domain-attack-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #dfe5e8;
}
.domain-attack-table th:first-child {
  width: 180px;
}
.domain-attack-table th:nth-child(3) {
  width: 110px;
}
.domain-attack-table th:nth-child(4) {
  width: 150px;
}
.domain-attack-table th:nth-child(5) {
  width: 240px;
}
.domain-attack-table th:nth-child(6) {
  width: 190px;
}
.domain-attack-table td {
  vertical-align: middle;
}
.domain-attack-table td:nth-child(2) b {
  overflow-wrap: anywhere;
}
.attack-result {
  font-size: 11px;
}
.attack-result.rejected {
  color: #08745a;
}
.attack-result.review {
  color: #a15a00;
}
.attack-result.unknown {
  color: #64727a;
}
.attack-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.attack-pagination > span {
  font-size: 11px;
  color: #63737b;
}
.attack-pagination > div {
  display: flex;
  gap: 7px;
}
.attack-pagination button {
  border: 1px solid #c6d1d5;
  border-radius: 8px;
  background: #fff;
  color: #405159;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 750;
}
.attack-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 700px) {
  .detail-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .detail-tab-btn {
    padding: 10px 5px;
    gap: 5px;
  }
  .detail-tab-btn span {
    font-size: 10px;
  }
  .detail-tab-btn b {
    min-width: 20px;
    height: 19px;
    padding: 0 5px;
    font-size: 8px;
  }
  .workspace-head {
    display: block;
  }
  .domain-filters {
    grid-template-columns: 1fr;
    margin-top: 12px;
  }
  .user-search {
    width: 100%;
    margin-top: 12px;
  }
  .user-identity,
  .user-resource-grid {
    grid-template-columns: 1fr 1fr;
  }
  .domain-pagination,
  .attack-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
  .domain-identity {
    grid-template-columns: 1fr;
  }
  .domain-attack-title {
    display: block;
    padding-right: 40px;
  }
  .domain-attack-title .back-btn {
    margin-bottom: 14px;
  }
  .domain-attack-title .threat-actions {
    margin-top: 14px;
  }
  .attack-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}
.server-icon {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  color: #087f78;
}
.server-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.server-icon svg circle {
  fill: currentColor;
  stroke: none;
}
.domain-modal-card {
  width: min(1320px, 100%);
}
.nested-nav {
  display: flex;
  padding: 0 52px 10px 0;
}
.nested-nav .back-btn {
  font-size: 12px;
}
.user-table {
  overflow: hidden;
}
.user-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.user-table th:first-child {
  width: 13%;
  min-width: 0;
}
.user-table th:nth-child(2) {
  width: 20%;
  min-width: 0;
}
.user-table th:nth-child(3) {
  width: 19%;
}
.user-table th:nth-child(4) {
  width: 18%;
}
.user-table th:nth-child(5) {
  width: 15%;
}
.user-table th:nth-child(6) {
  width: 15%;
}
.user-table th,
.user-table td {
  padding: 13px 12px;
}
.user-table td {
  overflow-wrap: anywhere;
}
.user-table td:last-child {
  white-space: normal;
}
.user-table td:last-child .text-btn {
  display: block;
  margin-top: 7px;
  padding: 0;
}
.user-metric-stack,
.user-metric-stack b,
.user-metric-stack small {
  display: block;
}
.user-metric-stack b {
  font-size: 12px;
  color: #22333a;
}
.user-metric-stack small {
  margin-top: 5px;
  color: #65757d;
  font-size: 10px;
}
.dashboard-threat {
  padding: 13px 2px;
  border-top: 1px solid #dbe2e5;
}
.dashboard-threat-main {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 11px;
}
.dashboard-threat-main > .event-severity {
  margin-top: 7px;
}
.dashboard-threat-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.dashboard-threat-title b {
  font-size: 13px;
  color: #1b2b32;
}
.dashboard-threat-title time {
  flex: none;
  color: #697981;
  font-size: 10px;
}
.event-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}
.event-pills span {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 20px;
  background: #e6ecef;
  color: #40525a;
  font-size: 9px;
  font-weight: 800;
}
.event-pills .ip {
  background: #e1f2ef;
  color: #08776f;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.dashboard-threat p {
  margin: 0;
  color: #3d4f57;
  font-size: 11px;
  line-height: 1.5;
}
.dashboard-threat small {
  display: block;
  margin-top: 5px;
  color: #697981;
  font-size: 10px;
}
.dashboard-threat-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 9px;
}
.dashboard-threat-actions .text-btn,
.dashboard-block-btn {
  height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
}
.dashboard-threat-actions .text-btn {
  border: 1px solid #b9c8ce;
  background: #fff;
}
.dashboard-block-btn {
  border: 1px solid #e2a0a7;
  background: #fff0f1;
  color: #b72836;
}
.dashboard-block-btn:hover {
  background: #f9dfe2;
}
@media (max-width: 700px) {
  .domain-modal-card {
    width: 100%;
  }
  .nested-nav {
    padding-right: 42px;
  }
  .user-table {
    border: 0;
    background: transparent;
  }
  .user-table table,
  .user-table tbody,
  .user-table tr,
  .user-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .user-table thead {
    display: none;
  }
  .user-table tbody {
    display: grid;
    gap: 10px;
  }
  .user-table tr {
    padding: 10px 12px;
    border: 1px solid #cbd4d8;
    border-radius: 11px;
    background: #fff;
  }
  .user-table td {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 8px;
    border: 0;
    padding: 7px 0;
  }
  .user-table td:before {
    color: #65757d;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .user-table td:nth-child(1):before {
    content: "User cPanel";
  }
  .user-table td:nth-child(2):before {
    content: "Domain utama";
  }
  .user-table td:nth-child(3):before {
    content: "Disk / DB";
  }
  .user-table td:nth-child(4):before {
    content: "CPU / RAM";
  }
  .user-table td:nth-child(5):before {
    content: "Traffic";
  }
  .user-table td:nth-child(6):before {
    content: "Status / aksi";
  }
  .dashboard-threat-title {
    display: block;
  }
  .dashboard-threat-title time {
    display: block;
    margin-top: 3px;
  }
  .dashboard-threat-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-threat-actions button {
    width: 100%;
  }
}

/* Dashboard v25: compact overview, sortable VPS stack, clear security actions */
.stat-grid {
  gap: 10px;
  margin: 14px 0 20px;
}
.stat-card,
.stat-card.cyan,
.stat-card.violet,
.stat-card.blue,
.stat-card.red {
  min-height: 92px;
  padding: 12px 15px;
  border: 1px solid #c8d2d7;
  border-radius: 11px;
  background: #f8f9fa;
  color: #172126;
  box-shadow: 0 5px 16px #1c292f09;
}
.stat-card:after {
  display: none;
}
.stat-card span {
  font-size: 9px;
}
.stat-card strong {
  margin: 6px 0 1px;
  font-size: 24px;
}
.stat-card small {
  font-size: 10px;
  color: #50636c;
}
.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}
.dashboard-server-column > .stat-grid {
  margin: 0 0 16px;
}
.dashboard-server-column > .section-head {
  margin: 0 0 11px;
}
.dashboard-server-column .server-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0;
}
.dashboard-server-column .server-card {
  position: relative;
  padding: 14px 15px 13px 25px;
}
.server-drag-handle {
  position: absolute;
  z-index: 2;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(3, 3px);
  gap: 2px;
  width: 18px;
  padding: 8px 3px;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}
.server-drag-handle:active {
  cursor: grabbing;
}
.server-drag-handle i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #829198;
}
.server-drag-handle:hover i {
  background: #087f78;
}
.server-card.dragging {
  opacity: 0.45;
}
.server-card.drag-over {
  border-color: #087f78;
  box-shadow: 0 0 0 2px #087f7824;
}
.dashboard-security-panel {
  align-self: start;
  height: auto;
  margin: 0;
  padding: 15px 17px;
  overflow: visible;
}
.dashboard-security-panel #eventFeed {
  max-height: none;
  overflow: visible;
  padding: 0;
}
.dashboard-threat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  align-items: start;
  gap: 12px;
  padding: 11px 2px;
}
.dashboard-threat-title b {
  font-size: 13px;
  line-height: 1.35;
}
.dashboard-threat-title time {
  font-size: 11px;
  color: #4f626b;
}
.dashboard-threat p {
  font-size: 12px;
  line-height: 1.45;
  color: #30434b;
}
.dashboard-threat small {
  font-size: 11px;
  color: #50636c;
}
.event-pills {
  margin: 6px 0;
}
.event-pills span {
  font-size: 10px;
  padding: 4px 7px;
}
.dashboard-threat-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0;
  align-self: start;
}
.dashboard-threat-actions .text-btn {
  width: 100%;
  height: 34px;
  border: 1px solid #aebfc6;
  background: #fff;
  color: #176861;
}
.dashboard-block-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
.dashboard-block-control select {
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #bdc9ce;
  border-radius: 8px;
  background: #fff;
  color: #263940;
  font-size: 11px;
  font-weight: 700;
}
.dashboard-block-btn {
  height: 34px;
  padding: 0 10px;
  font-size: 10px;
}
.dashboard-security-panel .live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #15966d;
  background: #e3f5ef;
  color: #08745a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 0 0 3px #15966d0e;
}
.dashboard-security-panel .live-chip:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #15966d;
  box-shadow: 0 0 0 4px #15966d18;
}
.dashboard-event-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 0 10px;
  border-bottom: 1px solid #dbe2e5;
}
.dashboard-event-pagination > span {
  padding: 0 3px;
  color: #60727a;
  font-size: 11px;
}
.dashboard-page-btn {
  min-width: 31px;
  height: 31px;
  padding: 0 8px;
  border: 1px solid #c4d0d5;
  border-radius: 7px;
  background: #fff;
  color: #405159;
  font-size: 10px;
  font-weight: 850;
}
.dashboard-page-btn:hover:not(:disabled),
.dashboard-page-btn.active {
  border-color: #087f78;
  background: #087f78;
  color: #fff;
}
.dashboard-page-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.dashboard-event-list > .dashboard-threat:first-child {
  border-top: 0;
}
.protection-panel {
  max-width: 760px;
  padding: 6px 20px 12px;
}
.protection-panel .posture-row {
  padding: 16px 0;
}
.protection-panel .posture-row b {
  font-size: 14px;
}
.protection-panel .posture-row small {
  font-size: 11px;
  color: #52656d;
}
.sync-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #cbd5da;
  border-radius: 10px;
  background: #f7f9fa;
  color: #354850;
  font-size: 11px;
  font-weight: 800;
}
.sync-btn:hover {
  border-color: #84aaa6;
  background: #eef7f5;
  color: #087f78;
}
.sync-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clock-card {
  min-width: 185px;
  padding: 7px 13px;
}
.clock b {
  font-size: 12px;
}
.clock small {
  margin-top: 2px;
  color: #263940;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.threat-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

/* Domain list fits its popup without horizontal scrolling. */
.domain-table {
  overflow: hidden;
}
.domain-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.domain-table th:nth-child(1) {
  width: 23%;
  min-width: 0;
}
.domain-table th:nth-child(2) {
  width: 16%;
  min-width: 0;
}
.domain-table th:nth-child(3) {
  width: 19%;
  min-width: 0;
}
.domain-table th:nth-child(4) {
  width: 15%;
  min-width: 0;
}
.domain-table th:nth-child(5) {
  width: 17%;
  min-width: 0;
}
.domain-table th:nth-child(6) {
  width: 10%;
  min-width: 0;
}
.domain-table th button,
.domain-table td {
  padding: 12px 10px;
}
.domain-table td {
  overflow-wrap: anywhere;
}
.domain-cell-stack,
.domain-cell-stack b,
.domain-cell-stack small {
  display: block;
}
.domain-cell-stack b {
  color: #22343b;
  font-size: 12px;
}
.domain-cell-stack small {
  margin-top: 5px;
  color: #53666f;
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 1000px) {
  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-security-panel {
    margin-top: 0;
  }
  .dashboard-server-column .server-grid,
  .dashboard-security-panel {
    max-height: none;
  }
}
@media (max-width: 700px) {
  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin: 10px 0 16px;
  }
  .stat-card {
    min-height: 78px;
    padding: 9px 7px;
  }
  .stat-card span {
    font-size: 7px;
    letter-spacing: 0.05em;
  }
  .stat-card strong {
    font-size: 18px;
  }
  .stat-card small {
    font-size: 8px;
  }
  .sync-btn {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .sync-btn span {
    display: none;
  }
  .dashboard-security-panel {
    padding: 13px;
  }
  .dashboard-threat {
    grid-template-columns: 1fr;
  }
  .dashboard-threat-actions {
    grid-template-columns: 1fr;
  }
  .dashboard-block-control {
    grid-template-columns: 1fr auto;
  }
  .domain-table {
    border: 0;
    background: transparent;
  }
  .domain-table table,
  .domain-table tbody,
  .domain-table tr,
  .domain-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .domain-table thead {
    display: none;
  }
  .domain-table tbody {
    display: grid;
    gap: 10px;
  }
  .domain-table tr {
    padding: 10px 12px;
    border: 1px solid #cbd4d8;
    border-radius: 11px;
    background: #fff;
  }
  .domain-table td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    border: 0;
    padding: 7px 0;
  }
  .domain-table td:before {
    color: #52656d;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .domain-table td:nth-child(1):before {
    content: "Domain";
  }
  .domain-table td:nth-child(2):before {
    content: "Akun";
  }
  .domain-table td:nth-child(3):before {
    content: "Resource";
  }
  .domain-table td:nth-child(4):before {
    content: "Traffic";
  }
  .domain-table td:nth-child(5):before {
    content: "Keamanan";
  }
  .domain-table td:nth-child(6):before {
    content: "Status";
  }
  .threat-actions {
    justify-content: flex-start;
  }
}

/* Sensitive-file scanner */
.file-protection-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.file-active-chip.off {
  background: #f5e7d5;
  color: #8b5909;
}
.file-findings {
  margin-top: 12px;
  border: 1px solid #bbd7d2;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}
.file-findings summary {
  padding: 10px 12px;
  color: #087f78;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.file-findings > div {
  max-height: 340px;
  border-top: 1px solid #d7e3e0;
  overflow: auto;
}
.file-findings table {
  width: 100%;
  table-layout: fixed;
}
.file-findings th {
  padding: 8px 9px;
  background: #e8f1ef;
  color: #49615d;
  font-size: 8px;
  text-align: left;
  text-transform: uppercase;
}
.file-findings td {
  padding: 9px;
  border-top: 1px solid #e0e7e5;
  color: #2c403c;
  font-size: 10px;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.file-findings th:nth-child(1) {
  width: 12%;
}
.file-findings th:nth-child(2) {
  width: 19%;
}
.file-findings th:nth-child(3) {
  width: 43%;
}
.file-findings th:nth-child(4) {
  width: 26%;
}
.file-findings td b,
.file-findings td small {
  display: block;
}
.file-findings td small {
  margin-top: 3px;
  color: #627570;
  font-size: 8px;
}
.file-risk,
.file-safe {
  display: inline-flex;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 850;
}
.file-risk.critical {
  background: #ffe6e8;
  color: #ad2532;
}
.file-risk.warning {
  background: #fff0d9;
  color: #8e5a00;
}
.file-safe {
  background: #e0f2eb;
  color: #087357;
}
@media (max-width: 600px) {
  .file-protection-stats {
    grid-template-columns: 1fr 1fr;
  }
  .file-findings table,
  .file-findings tbody,
  .file-findings tr,
  .file-findings td {
    display: block;
    width: 100%;
  }
  .file-findings thead {
    display: none;
  }
  .file-findings tbody {
    display: grid;
    gap: 7px;
    padding: 7px;
    background: #edf3f1;
  }
  .file-findings tr {
    padding: 8px 10px;
    border: 1px solid #cfddda;
    border-radius: 8px;
    background: #fff;
  }
  .file-findings td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 7px;
    padding: 5px 0;
    border: 0;
  }
  .file-findings td:before {
    color: #60736f;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .file-findings td:nth-child(1):before {
    content: "Risiko";
  }
  .file-findings td:nth-child(2):before {
    content: "VPS / akun";
  }
  .file-findings td:nth-child(3):before {
    content: "Lokasi";
  }
  .file-findings td:nth-child(4):before {
    content: "Proteksi";
  }
}

/* Consistent custom dropdowns */
.custom-select {
  position: relative;
  min-width: 0;
}
.custom-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.custom-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #bdc9ce;
  border-radius: 9px;
  background: #fff;
  color: #263940;
  font:
    700 12px Manrope,
    sans-serif;
  text-align: left;
  cursor: pointer;
}
.custom-select-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 0.18s;
}
.custom-select.open .custom-select-button {
  border-color: #087f78;
  box-shadow: 0 0 0 3px #087f7815;
}
.custom-select.open .custom-select-button svg {
  transform: rotate(180deg);
}
.custom-select-menu {
  position: absolute;
  z-index: 150;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  max-height: 260px;
  padding: 6px;
  border: 1px solid #c7d1d5;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 38px #17212624;
  overflow-y: auto;
}
.custom-select.open .custom-select-menu {
  display: grid;
  gap: 2px;
}
.custom-select-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #30434b;
  font:
    650 11px Manrope,
    sans-serif;
  text-align: left;
  cursor: pointer;
}
.custom-select-menu button:hover,
.custom-select-menu button.selected {
  background: #e7f3f1;
  color: #087f78;
}
.custom-select-menu button b {
  font-size: 13px;
}
.custom-select-menu button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ip-block-control > .custom-select,
.security-row-actions .custom-select {
  min-width: 0;
}
.ip-block-control .custom-select-button {
  height: 34px;
  padding: 0 8px;
  font-size: 10px;
}
.security-toolbar > .custom-select .custom-select-button {
  height: 42px;
}
.domain-filters label > .custom-select {
  width: 100%;
}

/* Protection workspace */
#protectionView {
  padding-top: 14px;
}
.protection-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid #cbd5d9;
  border-radius: 15px;
  background: #f6f8f9;
}
.protection-hero > div {
  display: flex;
  align-items: center;
  gap: 14px;
}
.protection-state-dot {
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #84939a;
  box-shadow: 0 0 0 1px #9baab0;
}
.protection-hero.enabled {
  border-color: #8fcfc5;
  background: #eef8f6;
}
.protection-hero.enabled .protection-state-dot {
  background: #0c9a7d;
  box-shadow:
    0 0 0 1px #0c9a7d,
    0 0 18px #0c9a7d55;
}
.protection-hero p {
  margin: 0 0 4px;
  color: #087f78;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.18em;
}
.protection-hero h2 {
  margin: 0;
  color: #17282f;
  font-size: 21px;
}
.protection-hero small {
  display: block;
  margin-top: 5px;
  color: #51636b;
  font-size: 12px;
}
.master-switch {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}
.master-switch > span {
  color: #566970;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.master-switch input,
.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.master-switch i,
.switch span {
  position: relative;
  display: block;
  width: 48px;
  height: 27px;
  border: 1px solid #acbac0;
  border-radius: 30px;
  background: #dce3e6;
  transition: 0.2s;
}
.master-switch i:after,
.switch span:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px #17212630;
  transition: 0.2s;
}
.master-switch input:checked + i,
.switch input:checked + span {
  border-color: #078a78;
  background: #078a78;
}
.master-switch input:checked + i:after,
.switch input:checked + span:after {
  transform: translateX(21px);
}
.protection-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}
.protection-stats article {
  padding: 14px 16px;
  border: 1px solid #ccd6da;
  border-radius: 11px;
  background: #fff;
}
.protection-stats span,
.protection-stats b {
  display: block;
}
.protection-stats span {
  color: #5a6c74;
  font-size: 10px;
  font-weight: 700;
}
.protection-stats b {
  margin-top: 5px;
  color: #17282f;
  font-size: 20px;
}
.protection-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
  gap: 12px;
}
.protect-config,
.protect-status {
  padding: 19px;
}
.protect-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d5dde1;
}
.protect-head h3 {
  margin: 0;
  color: #17282f;
  font-size: 17px;
}
.protect-head p {
  margin: 4px 0 0;
  color: #5d6f77;
  font-size: 11px;
}
.protect-duration {
  display: grid;
  gap: 5px;
  width: 150px;
}
.protect-duration > span {
  color: #5d6f77;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.protect-rules {
  display: grid;
}
.protect-rule {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 2px;
  border-bottom: 1px solid #dce3e6;
}
.protect-rule-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e7f3f1;
  color: #087f78;
  font-size: 13px;
  font-weight: 900;
}
.protect-rule-icon.rdp {
  background: #edf0f8;
  color: #5d57a5;
}
.protect-rule-icon.scan {
  background: #eaf2f8;
  color: #2777a6;
}
.protect-rule-copy b,
.protect-rule-copy span,
.protect-rule-copy small {
  display: block;
}
.protect-rule-copy b {
  color: #203239;
  font-size: 13px;
}
.protect-rule-copy span {
  margin-top: 3px;
  color: #53666e;
  font-size: 11px;
}
.protect-rule-copy small {
  margin-top: 5px;
  color: #718087;
  font-size: 9px;
}
.protect-rule-copy small strong {
  color: #344850;
}
.switch {
  cursor: pointer;
}
.switch span {
  width: 42px;
  height: 24px;
}
.switch span:after {
  width: 16px;
  height: 16px;
}
.switch input:checked + span:after {
  transform: translateX(18px);
}
.switch input:disabled + span {
  opacity: 0.45;
  cursor: not-allowed;
}
.web-protection-note {
  position: relative;
  margin-top: 15px;
  padding: 14px 110px 14px 15px;
  border: 1px solid #e3c98e;
  border-radius: 11px;
  background: #fffaf0;
}
.web-protection-note b,
.web-protection-note span {
  display: block;
}
.web-protection-note b {
  color: #604514;
  font-size: 13px;
}
.web-protection-note div > span {
  margin-top: 3px;
  color: #865d13;
  font-size: 10px;
}
.web-protection-note p {
  margin: 9px 0 0;
  color: #5e5545;
  font-size: 10px;
  line-height: 1.5;
}
.monitor-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #f5e5be;
  color: #835c0e;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.protect-server-list {
  display: grid;
}
.protect-server-list article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid #dce3e6;
}
.server-platform {
  display: grid;
  place-items: center;
  width: 34px;
  height: 31px;
  border-radius: 8px;
  background: #e7ecef;
  color: #3e5159;
  font-size: 8px;
  font-weight: 900;
}
.protect-server-list b,
.protect-server-list small {
  display: block;
}
.protect-server-list b {
  overflow: hidden;
  color: #25373e;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.protect-server-list small {
  margin-top: 3px;
  overflow: hidden;
  color: #667880;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.protect-ready {
  padding: 5px 7px;
  border-radius: 20px;
  background: #f3e8e9;
  color: #a33a45;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}
.protect-ready.online {
  background: #e2f3ed;
  color: #087357;
}
.allowlist-box {
  margin-top: 15px;
  padding: 12px;
  border-radius: 9px;
  background: #edf1f3;
}
.allowlist-box b,
.allowlist-box span {
  display: block;
}
.allowlist-box b {
  color: #33474f;
  font-size: 11px;
}
.allowlist-box span {
  margin-top: 4px;
  color: #60727a;
  font-size: 9px;
}
@media (max-width: 900px) {
  .protection-layout {
    grid-template-columns: 1fr;
  }
  .protect-status {
    order: -1;
  }
  .protect-server-list {
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }
}
@media (max-width: 600px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .protection-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 17px;
  }
  .protection-hero h2 {
    font-size: 18px;
  }
  .master-switch {
    width: 100%;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #cbd8d8;
  }
  .protection-stats {
    grid-template-columns: 1fr 1fr;
  }
  .protection-stats article {
    padding: 12px;
  }
  .protection-layout {
    display: block;
  }
  .protect-config,
  .protect-status {
    padding: 14px;
  }
  .protect-status {
    margin-bottom: 10px;
  }
  .protect-head {
    align-items: stretch;
    flex-direction: column;
  }
  .protect-duration {
    width: 100%;
  }
  .protect-rule {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 9px;
  }
  .protect-rule-icon {
    width: 34px;
    height: 34px;
  }
  .web-protection-note {
    padding: 13px;
  }
  .monitor-chip {
    position: static;
    display: inline-flex !important;
    width: max-content;
    margin-top: 9px;
  }
  .protect-server-list {
    grid-template-columns: 1fr;
  }
  .custom-select-menu {
    position: fixed;
    z-index: 500;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    max-height: 55vh;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 -12px 45px #17212635;
  }
  .custom-select-menu button {
    min-height: 44px;
    font-size: 13px;
  }
}
.master-switch input,
.switch input {
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
}
.protection-master-side {
  display: flex;
  align-items: center;
  gap: 14px;
}
.saved-chip,
.unsaved-chip {
  padding: 6px 9px;
  border-radius: 20px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.07em;
}
.saved-chip {
  background: #e1f3ec;
  color: #087357;
}
.unsaved-chip {
  background: #fff0d8;
  color: #8a5700;
}
.protect-save-group {
  display: flex;
  align-items: end;
  gap: 8px;
}
.protect-save-group #saveProtection {
  height: 42px;
  padding: 0 15px;
  white-space: nowrap;
}
.protect-save-group #saveProtection:disabled {
  border-color: #cbd4d8;
  background: #e6ebed;
  color: #839198;
  box-shadow: none;
  cursor: not-allowed;
}
@media (max-width: 700px) {
  .protection-master-side {
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .protection-master-side .master-switch {
    width: 100%;
  }
  .protect-save-group {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
  .protect-save-group #saveProtection {
    width: 100%;
  }
}
.file-protection-card {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #82c9bc;
  border-radius: 12px;
  background: #f0f8f6;
}
.file-protection-head,
.file-protection-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.file-protection-head > div {
  justify-content: flex-start;
}
.file-shield {
  display: grid !important;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: #0b917d;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}
.file-protection-head b,
.file-protection-head small {
  display: block;
}
.file-protection-head b {
  color: #173f39;
  font-size: 14px;
}
.file-protection-head small {
  margin-top: 3px;
  color: #4e6d68;
  font-size: 10px;
}
.file-active-chip {
  padding: 6px 9px;
  border-radius: 20px;
  background: #d8f0e9;
  color: #087357;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.file-protection-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 13px;
}
.file-protection-stats > span {
  padding: 9px 11px;
  border: 1px solid #c6ddd8;
  border-radius: 8px;
  background: #fff;
}
.file-protection-stats small,
.file-protection-stats b {
  display: block;
}
.file-protection-stats small {
  color: #5a716d;
  font-size: 8px;
  font-weight: 750;
}
.file-protection-stats b {
  margin-top: 3px;
  color: #193b36;
  font-size: 16px;
}
.file-protection-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
.file-protection-types span {
  padding: 5px 8px;
  border-radius: 6px;
  background: #dceee9;
  color: #25655b;
  font-size: 9px;
  font-weight: 750;
}
.file-protection-card > p {
  margin: 10px 0 0;
  color: #4f6763;
  font-size: 10px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .file-protection-stats {
    grid-template-columns: 1fr 1fr;
  }
  .file-protection-stats > span:last-child {
    grid-column: 1/-1;
  }
  .file-protection-head {
    align-items: flex-start;
  }
  .file-protection-head > div {
    align-items: flex-start;
  }
}

/* Evidence-first IP investigation */
.threat-result-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.threat-result-summary > span {
  padding: 11px 13px;
  border: 1px solid #cbd5d9;
  border-radius: 10px;
  background: #fff;
}
.threat-result-summary small,
.threat-result-summary b {
  display: block;
}
.threat-result-summary small {
  color: #5b6e76;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.threat-result-summary b {
  margin-top: 4px;
  color: #1e2e35;
  font-size: 18px;
}
.threat-result-summary .review {
  border-color: #efd1a7;
  background: #fff9f0;
}
.threat-result-summary .review b {
  color: #9b5700;
}
.threat-result-summary .safe {
  border-color: #bfe0d6;
  background: #f1faf7;
}
.threat-result-summary .safe b {
  color: #08745a;
}
.threat-result-summary .uncertain {
  border-color: #cbd5d9;
  background: #f3f6f7;
}
.threat-result-summary .uncertain b {
  color: #52656d;
}
.http-meaning {
  margin-bottom: 10px;
  padding: 9px 12px;
  border-left: 3px solid #2a7fa2;
  border-radius: 7px;
  background: #e9f2f6;
  color: #34525f;
  font-size: 11px;
  line-height: 1.45;
}
.http-meaning b {
  color: #173c4b;
}
.threat-result-list {
  display: grid;
  gap: 10px;
}
.threat-result-card {
  padding: 14px;
  border: 1px solid #c9d3d7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 12px #17212608;
}
.threat-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.threat-result-head h3 {
  margin: 6px 0 3px;
  color: #18292f;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.threat-result-head time {
  color: #52666f;
  font-size: 10px;
}
.threat-result-head > .result-chip {
  margin-top: 1px;
}
.result-chip.redirected {
  background: #e9f2f6;
  color: #226680;
}
.threat-result-metrics {
  display: grid;
  grid-template-columns: 0.65fr 1.7fr 0.7fr;
  gap: 7px;
  margin-top: 11px;
}
.threat-result-metrics > span {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #edf1f3;
}
.threat-result-metrics small,
.threat-result-metrics b {
  display: block;
}
.threat-result-metrics small {
  color: #60727a;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.threat-result-metrics b {
  margin-top: 4px;
  color: #24363d;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.threat-conclusion {
  margin: 9px 0 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f5f7f8;
  color: #344850;
  font-size: 11px;
  line-height: 1.45;
}
.threat-path-details {
  margin-top: 10px;
  border-top: 1px solid #dce3e6;
  padding-top: 9px;
}
.threat-path-details summary {
  color: #087f78;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  user-select: none;
}
.threat-path-table {
  margin-top: 9px;
  border: 1px solid #d2dbdf;
  border-radius: 9px;
  overflow: hidden;
}
.threat-path-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.threat-path-table th {
  padding: 9px 10px;
  background: #e6ecef;
  color: #42545c;
  font-size: 9px;
}
.threat-path-table td {
  padding: 9px 10px;
  color: #34474f;
  font-size: 11px;
  vertical-align: top;
}
.threat-path-table th:nth-child(1) {
  width: 31%;
}
.threat-path-table th:nth-child(2) {
  width: 8%;
}
.threat-path-table th:nth-child(3) {
  width: 17%;
}
.threat-path-table th:nth-child(4) {
  width: 30%;
}
.threat-path-table th:nth-child(5) {
  width: 14%;
}
.threat-path-table td b {
  overflow-wrap: anywhere;
}
.threat-path-table td small {
  display: block;
  margin-top: 4px;
  color: #5a6d75;
  font-size: 9px;
  line-height: 1.35;
}
.threat-plain-target {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #edf1f3;
}
.threat-plain-target small,
.threat-plain-target b {
  display: block;
}
.threat-plain-target small {
  color: #60727a;
  font-size: 8px;
  text-transform: uppercase;
}
.threat-plain-target b {
  margin-top: 4px;
  font-size: 11px;
}
@media (max-width: 700px) {
  .threat-result-summary {
    grid-template-columns: 1fr 1fr;
  }
  .threat-result-metrics {
    grid-template-columns: 1fr;
  }
  .threat-path-table {
    border: 0;
    overflow: visible;
  }
  .threat-path-table table,
  .threat-path-table tbody,
  .threat-path-table tr,
  .threat-path-table td {
    display: block;
    width: 100%;
  }
  .threat-path-table thead {
    display: none;
  }
  .threat-path-table tbody {
    display: grid;
    gap: 7px;
  }
  .threat-path-table tr {
    padding: 8px 10px;
    border: 1px solid #d2dbdf;
    border-radius: 8px;
    background: #fafbfb;
  }
  .threat-path-table td {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 7px;
    padding: 5px 0;
    border: 0;
  }
  .threat-path-table td:before {
    color: #60727a;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .threat-path-table td:nth-child(1):before {
    content: "Path";
  }
  .threat-path-table td:nth-child(2):before {
    content: "Jumlah";
  }
  .threat-path-table td:nth-child(3):before {
    content: "HTTP";
  }
  .threat-path-table td:nth-child(4):before {
    content: "Kesimpulan";
  }
  .threat-path-table td:nth-child(5):before {
    content: "Respons";
  }
}

/* Dense security table and pagination */
#securityView {
  padding-top: 14px;
}
#securityView > .panel {
  padding: 0;
  overflow: hidden;
}
.security-toolbar {
  justify-content: flex-start;
  padding: 11px 13px;
}
.security-toolbar .threat-search {
  width: min(360px, 100%);
}
.security-table-scroll {
  max-height: calc(100vh - 365px);
  min-height: 250px;
  overflow: auto;
}
.security-group-table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
}
.security-group-table th,
.security-group-table td {
  padding: 9px 11px;
  line-height: 1.35;
}
.security-group-table th:nth-child(1) {
  width: 12%;
}
.security-group-table th:nth-child(2) {
  width: 13%;
}
.security-group-table th:nth-child(3) {
  width: 20%;
}
.security-group-table th:nth-child(4) {
  width: 13%;
}
.security-group-table th:nth-child(5) {
  width: 6%;
}
.security-group-table th:nth-child(6) {
  width: 15%;
}
.security-group-table th:nth-child(7) {
  width: 21%;
}
.security-group-table td {
  font-size: 12px;
  vertical-align: middle;
}
.security-time {
  white-space: nowrap;
  font-size: 11px;
}
.security-group-table th {
  padding: 0;
  background: #dfe5e8;
}
.security-group-table th > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  background: transparent;
  color: #43545c;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.security-group-table th > button:hover {
  background: #d3dde1;
  color: #087f78;
}
.security-group-table th > button span {
  color: #087f78;
  font-size: 14px;
}
.security-group-table th:last-child {
  padding: 10px 11px;
}
.security-row-actions {
  display: grid;
  grid-template-columns: auto minmax(76px, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.security-row-actions .text-btn {
  height: 32px;
  padding: 0 7px;
  border: 1px solid #b9c8ce;
  border-radius: 7px;
  background: #fff;
}
.security-row-actions select {
  min-width: 0;
  height: 32px;
  padding: 0 6px;
  border: 1px solid #bdc9ce;
  border-radius: 7px;
  background: #fff;
  color: #263940;
  font-size: 10px;
  font-weight: 700;
}
.security-block-btn {
  height: 32px;
  padding: 0 9px;
  border: 1px solid #e2a0a7;
  border-radius: 7px;
  background: #fff0f1;
  color: #b72836;
  font-size: 10px;
  font-weight: 800;
}
.ip-block-control {
  display: grid;
  grid-template-columns: minmax(86px, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 190px;
}
.ip-block-control select {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #b9c7cd;
  border-radius: 8px;
  background: #fff;
  color: #23363e;
  font-size: 11px;
  font-weight: 750;
}
.block-action,
.unblock-action {
  height: 34px;
  padding: 0 11px;
  border: 1px solid #df929b;
  border-radius: 8px;
  background: #fff0f1;
  color: #b52131;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.unblock-action {
  border-color: #d68b93;
  background: #fff;
  color: #a51f2d;
}
.block-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.block-state-pill.active {
  background: #e1f3ec;
  color: #087357;
}
.block-state-pill.pending {
  background: #fff3dd;
  color: #985d00;
}
.block-state-pill.failed {
  background: #ffe5e8;
  color: #b21f31;
}
.block-error {
  grid-column: 1/-1;
  display: block;
  max-width: 250px;
  color: #a62835 !important;
  font-size: 9px !important;
  line-height: 1.35;
  white-space: normal;
}
.security-row-actions .ip-block-control {
  min-width: 210px;
}
.dashboard-threat-actions .ip-block-control {
  min-width: 205px;
}
.threat-actions .ip-block-control {
  min-width: 230px;
}
.server-delete-btn {
  height: 34px;
  padding: 0 11px;
  border: 1px solid #d9949c;
  border-radius: 8px;
  background: #fff;
  color: #ac2534;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.server-delete-btn:hover:not(:disabled) {
  background: #bd2939;
  color: #fff;
  border-color: #bd2939;
}
.server-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.delete-server-modal h2 {
  margin: 5px 0 16px;
}
.danger-text {
  color: #b32232;
}
.delete-server-identity {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #ced7db;
  border-radius: 11px;
  background: #fff;
}
.delete-server-identity b {
  font-size: 15px;
}
.delete-server-identity span {
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.delete-server-identity small {
  color: #65757d;
  font-size: 11px;
}
.delete-warning {
  margin: 16px 0;
  color: #4e6068;
  font-size: 12px;
  line-height: 1.6;
}
.delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}
.delete-modal-actions button {
  min-width: 105px;
  height: 40px;
}
.delete-server-modal .danger-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.delete-server-modal label {
  display: grid;
  gap: 7px;
}
.delete-server-modal input {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 750;
  letter-spacing: 0.03em;
}
.server-delete-error {
  display: block !important;
  margin-top: 5px !important;
  color: #b32232 !important;
  font-size: 9px !important;
  white-space: nowrap;
}
.command-box #installedDoneBtn {
  margin-top: 13px;
  height: 43px;
}
.ip-block-control.has-error {
  display: grid;
  grid-template-columns: 1fr;
}
.ip-block-control.has-error .block-action.retry {
  width: 100%;
}
.ip-block-control.has-error .block-error {
  grid-column: 1;
  max-width: 220px;
  margin: 0;
  color: #a62835 !important;
}
.ip-block-control.has-error .agent-update-copy {
  width: 100%;
  min-height: 35px;
  padding: 7px 10px;
  border: 1px solid #d1902c;
  border-radius: 8px;
  background: #fff7e7;
  color: #855400;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
.ip-block-control.agent-update-needed .block-error {
  color: #805400 !important;
}
.agent-repair-btn {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #d1902c;
  border-radius: 7px;
  background: #fff7e7;
  color: #805400;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
.donut-item.no-data .donut {
  background: #e4eaed;
}
.donut-item.no-data .donut span {
  color: #687b83;
}
.donut-item.no-data small {
  color: #a04421;
  font-weight: 750;
}
.server-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.server-row-actions .agent-repair-btn,
.server-row-actions .server-delete-btn {
  flex: 1;
  min-width: 92px;
}
.rdp-status-panel {
  margin: 22px 0;
  padding: 17px;
  border: 1px solid #cbd5da;
  border-radius: 14px;
  background: #f8f9fa;
}
.rdp-status-panel .section-head {
  margin-bottom: 12px;
}
.rdp-session-list {
  display: grid;
  gap: 6px;
}
.rdp-session-list code {
  display: block;
  padding: 9px 11px;
  border: 1px solid #d5dde1;
  border-radius: 8px;
  background: #fff;
  color: #263840;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}
.rdp-audit-ok,
.rdp-audit-warning {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}
.rdp-audit-ok {
  background: #e2f3ed;
  color: #087357;
}
.rdp-audit-warning {
  display: grid;
  gap: 4px;
  background: #fff0e2;
  color: #8d5700;
}
.rdp-audit-warning span {
  font-size: 9px;
  font-weight: 600;
}
.detail-tabs.windows-tabs {
  grid-template-columns: minmax(180px, 320px);
}
@media (max-width: 680px) {
  #serverTable td:nth-child(8) {
    display: grid;
    grid-template-columns: 90px 1fr;
  }
  #serverTable td:nth-child(8):before {
    content: "Aksi";
  }
}

/* Dashboard balance and incident feed */
.dashboard-main-grid {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 16px;
}
.dashboard-server-column .stat-grid {
  gap: 8px;
}
.dashboard-server-column .stat-card {
  min-height: 92px;
  padding: 12px 13px;
  border-width: 1px;
  border-style: solid;
  border-top-width: 1px;
  background: #f8f9fa;
}
.dashboard-server-column .stat-card.cyan {
  border-color: #36aaa2;
}
.dashboard-server-column .stat-card.violet {
  border-color: #8c78d4;
}
.dashboard-server-column .stat-card.blue {
  border-color: #5a9ed5;
}
.dashboard-server-column .stat-card.red {
  border-color: #e36d79;
}
.dashboard-server-column .stat-card strong {
  font-size: 22px;
}
.dashboard-server-column .server-card {
  padding: 12px 13px 11px 23px;
}
.dashboard-server-column .usage-donuts {
  margin: 14px 0 12px;
}
.dashboard-server-column .donut {
  width: 62px;
  height: 62px;
}
.dashboard-server-column .donut:before {
  inset: 7px;
}
.dashboard-server-column .donut span {
  font-size: 12px;
}
.dashboard-server-column .server-foot {
  padding-top: 10px;
}
.dashboard-security-panel {
  padding: 18px 20px;
  background: #f3f6f7;
}
.dashboard-security-panel .panel-head {
  padding-bottom: 12px;
  border-bottom: 1px solid #ccd6da;
}
.dashboard-event-list {
  display: grid;
  gap: 9px;
  padding-top: 10px;
}
.dashboard-threat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #cbd5da;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 11px #17212608;
}
.dashboard-threat:before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #6d8b98;
}
.dashboard-threat.danger:before {
  background: #df3949;
}
.dashboard-threat.warning:before {
  background: #bf7900;
}
.dashboard-threat.info:before {
  background: #27859c;
}
.dashboard-threat-main {
  display: block;
  min-width: 0;
}
.dashboard-threat-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-threat-title > div {
  min-width: 0;
}
.dashboard-threat-title b {
  display: block;
  margin-top: 5px;
  color: #1c2d34;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-threat-title time {
  padding-top: 2px;
  color: #52666f;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.incident-kind {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 6px;
  background: #e5ecef;
  color: #344850;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
}
.dashboard-threat p {
  display: -webkit-box;
  margin: 9px 0 8px;
  color: #31464e;
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.incident-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.incident-meta span {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 6px;
  background: #edf1f3;
  color: #40545c;
  font-size: 11px;
  font-weight: 800;
}
.incident-meta .incident-ip {
  background: #e2f3ef;
  color: #08766d;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.dashboard-threat-main > small {
  display: flex;
  gap: 5px;
  color: #60727a;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}
.dashboard-threat-main > small b {
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #40535b;
}
.dashboard-threat-main > small span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-threat-actions {
  display: grid;
  align-content: start;
  gap: 7px;
}
.dashboard-threat-actions .text-btn {
  height: 36px;
  border-color: #aac0c8;
  background: #f7fafb;
  font-size: 12px;
}
.dashboard-threat-actions .ip-block-control {
  min-width: 0;
}
.dashboard-event-pagination {
  padding: 12px 0 4px;
  border: 0;
}
.security-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px 180px;
  gap: 9px;
  align-items: center;
}
.security-toolbar .threat-search {
  width: 100%;
}
.security-toolbar > select {
  height: 42px;
  padding: 0 11px;
  border: 1px solid #c4d0d5;
  border-radius: 9px;
  background: #fff;
  color: #2f424a;
  font-size: 11px;
  font-weight: 750;
}
@media (max-width: 1350px) {
  .dashboard-main-grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
  .dashboard-threat {
    grid-template-columns: minmax(0, 1fr) 185px;
  }
  .security-toolbar {
    grid-template-columns: 1fr 160px 160px;
  }
}
@media (max-width: 1100px) {
  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-threat {
    grid-template-columns: minmax(0, 1fr) 210px;
  }
}

/* Components introduced by the reliability/security pass. */
.security-mobile-sort {
  display: none;
}

.allowlist-title,
.allowlist-title > div,
.allowlist-list,
.allowlist-list > div,
.allowlist-list > div > span {
  display: flex;
}

.allowlist-title,
.allowlist-list > div {
  align-items: center;
  justify-content: space-between;
}

.allowlist-title > div,
.allowlist-list,
.allowlist-list > div > span {
  flex-direction: column;
  align-items: flex-start;
}

.allowlist-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 9px;
}

.allowlist-form input,
.allowlist-form button {
  min-height: 36px;
  font-size: 11px;
}

.allowlist-list {
  gap: 4px;
  margin-top: 8px;
}

.allowlist-list > div {
  width: 100%;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.allowlist-list > div > span {
  min-width: 0;
}

.allowlist-list b,
.allowlist-list small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.allowlist-list button {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid #e1c2c6;
  border-radius: 5px;
  background: var(--red-soft);
  color: var(--red);
}

.file-scan-time {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 9px;
}

.file-safe.off {
  background: var(--amber-soft);
  color: var(--amber);
}

.result-chip.trusted {
  border-color: #bfd9ce;
  background: var(--green-soft);
  color: var(--green);
}

@media (max-width: 760px) {
  .security-mobile-sort {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 6px;
  }

  .security-mobile-sort .custom-select,
  .security-mobile-sort .custom-select-button {
    width: 100%;
  }

  #securitySortDirection {
    min-height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    font-weight: 700;
  }

  .allowlist-form {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .dashboard-threat {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .dashboard-threat-title b {
    white-space: normal;
  }
  .dashboard-threat-main > small {
    display: block;
    white-space: normal;
  }
  .dashboard-threat-main > small b,
  .dashboard-threat-main > small span {
    display: block;
    max-width: none;
  }
  .security-toolbar {
    grid-template-columns: 1fr;
  }
  .security-toolbar > select {
    width: 100%;
  }
}
.security-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-top: 1px solid #d4dde1;
  background: #f7f9fa;
}
.security-pagination > span {
  color: #52656d;
  font-size: 10px;
}
.security-pagination > div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.security-pagination > div > span {
  color: #687981;
  font-size: 11px;
}
.security-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #c5d0d4;
  border-radius: 7px;
  background: #fff;
  color: #405159;
  font-size: 10px;
  font-weight: 800;
}
.security-page-btn.active {
  border-color: #087f78;
  background: #087f78;
  color: #fff;
}
.security-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.topbar > div:first-child {
  display: flex;
  align-items: center;
}
.topbar h2 {
  font-size: 22px;
}
@media (max-width: 700px) {
  #securityView > .panel {
    overflow: visible;
  }
  .security-summary {
    grid-template-columns: 1fr;
  }
  .security-toolbar {
    padding: 10px 0;
    background: transparent;
    border: 0;
  }
  .security-toolbar .threat-search {
    width: 100%;
  }
  .security-table-scroll {
    max-height: none;
    overflow: visible;
  }
  .security-group-table {
    min-width: 0;
  }
  .security-group-table,
  .security-group-table tbody,
  .security-group-table tr,
  .security-group-table td {
    display: block;
    width: 100%;
  }
  .security-group-table thead {
    display: none;
  }
  .security-group-table tbody {
    display: grid;
    gap: 9px;
  }
  .security-group-table tr {
    padding: 9px 11px;
    border: 1px solid #cbd4d8;
    border-radius: 11px;
    background: #fff;
  }
  .security-group-table td {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border: 0;
    white-space: normal;
  }
  .security-group-table td:before {
    color: #53666e;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .security-group-table td:nth-child(1):before {
    content: "Alamat IP";
  }
  .security-group-table td:nth-child(2):before {
    content: "VPS";
  }
  .security-group-table td:nth-child(3):before {
    content: "Lokasi";
  }
  .security-group-table td:nth-child(4):before {
    content: "Jenis";
  }
  .security-group-table td:nth-child(5):before {
    content: "Total";
  }
  .security-group-table td:nth-child(6):before {
    content: "Terakhir";
  }
  .security-group-table td:nth-child(7):before {
    content: "Aksi";
  }
  .security-row-actions {
    grid-template-columns: 1fr;
  }
  .security-row-actions .ip-block-control {
    min-width: 0;
  }
  .ip-block-control {
    min-width: 0;
  }
  .security-pagination {
    align-items: flex-start;
    flex-direction: column;
    padding: 11px 0;
    background: transparent;
    border: 0;
  }
}
#protectionPanel .file-protection-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 600px) {
  #protectionPanel .file-protection-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* Interaction stability and overflow audit */
.master-switch > span,
.master-switch > i,
.switch > span {
  pointer-events: none;
}
.master-switch:focus-within i,
.switch:focus-within span {
  outline: 3px solid #087f7826;
  outline-offset: 2px;
}
.custom-select.open {
  z-index: 510;
}
.custom-select-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.custom-select-menu[style*="position: fixed"] {
  z-index: 1000;
}
.primary:disabled,
.danger-btn:disabled,
.block-action:disabled,
.unblock-action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.mobile-account-btn {
  display: none;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 1px solid #c8d3d7;
  border-radius: 10px;
  background: #f7f9fa;
  color: #40545c;
}
.mobile-account-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-account-btn.danger {
  border-color: #e2b7bc;
  background: #fff1f2;
  color: #b72836;
}
.threat-loading {
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid #b8d9d3;
  border-radius: 8px;
  background: #edf8f6;
  color: #08766a;
  font-size: 11px;
  font-weight: 750;
}
.user-table,
.user-domain-table,
.domain-attacker-table,
.domain-attack-table,
.threat-table-wrap {
  max-width: 100%;
}
.user-table table,
.user-domain-table table,
.domain-attacker-table table,
.domain-attack-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.user-table td,
.user-domain-table td,
.domain-attacker-table td,
.domain-attack-table td {
  overflow-wrap: anywhere;
}
.user-table th:nth-child(1) {
  width: 15%;
}
.user-table th:nth-child(2) {
  width: 20%;
}
.user-table th:nth-child(3) {
  width: 18%;
}
.user-table th:nth-child(4) {
  width: 16%;
}
.user-table th:nth-child(5) {
  width: 16%;
}
.user-table th:nth-child(6) {
  width: 15%;
}
.user-domain-table th:nth-child(1) {
  width: 23%;
}
.user-domain-table th:nth-child(n + 2) {
  width: 12.83%;
}
.domain-attack-table th:first-child {
  width: 14%;
}
.domain-attack-table th:nth-child(2) {
  width: 28%;
}
.domain-attack-table th:nth-child(3) {
  width: 9%;
}
.domain-attack-table th:nth-child(4) {
  width: 14%;
}
.domain-attack-table th:nth-child(5) {
  width: 23%;
}
.domain-attack-table th:nth-child(6) {
  width: 12%;
}

@media (max-width: 1100px) {
  #securityView > .panel {
    overflow: visible;
  }
  .security-table-scroll {
    max-height: none;
    overflow: visible;
  }
  .security-group-table {
    min-width: 0;
  }
  .security-group-table,
  .security-group-table tbody,
  .security-group-table tr,
  .security-group-table td {
    display: block;
    width: 100%;
  }
  .security-group-table thead {
    display: none;
  }
  .security-group-table tbody {
    display: grid;
    gap: 9px;
  }
  .security-group-table tr {
    padding: 9px 11px;
    border: 1px solid #cbd4d8;
    border-radius: 11px;
    background: #fff;
  }
  .security-group-table td {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border: 0;
    white-space: normal;
  }
  .security-group-table td:before {
    color: #53666e;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .security-group-table td:nth-child(1):before {
    content: "Alamat IP";
  }
  .security-group-table td:nth-child(2):before {
    content: "VPS";
  }
  .security-group-table td:nth-child(3):before {
    content: "Lokasi";
  }
  .security-group-table td:nth-child(4):before {
    content: "Jenis";
  }
  .security-group-table td:nth-child(5):before {
    content: "Total";
  }
  .security-group-table td:nth-child(6):before {
    content: "Terakhir";
  }
  .security-group-table td:nth-child(7):before {
    content: "Aksi";
  }
  .security-row-actions {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .security-row-actions .ip-block-control {
    min-width: 0;
  }
  .domain-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .domain-table table,
  .domain-table tbody,
  .domain-table tr,
  .domain-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .domain-table thead {
    display: none;
  }
  .domain-table tbody {
    display: grid;
    gap: 9px;
  }
  .domain-table tr {
    padding: 10px 12px;
    border: 1px solid #cbd4d8;
    border-radius: 11px;
    background: #fff;
  }
  .domain-table td {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .domain-table td:before {
    color: #53666e;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .domain-table td:nth-child(1):before {
    content: "Domain";
  }
  .domain-table td:nth-child(2):before {
    content: "Akun cPanel";
  }
  .domain-table td:nth-child(3):before {
    content: "Resource";
  }
  .domain-table td:nth-child(4):before {
    content: "Traffic";
  }
  .domain-table td:nth-child(5):before {
    content: "Keamanan";
  }
  .domain-table td:nth-child(6):before {
    content: "Status";
  }
}

@media (max-width: 900px) {
  .threat-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .threat-table {
    min-width: 0;
  }
  .threat-table,
  .threat-table tbody,
  .threat-table tr,
  .threat-table td {
    display: block;
    width: 100%;
  }
  .threat-table thead {
    display: none;
  }
  .threat-table tbody {
    display: grid;
    gap: 9px;
  }
  .threat-table tr {
    padding: 10px 12px;
    border: 1px solid #cbd4d8;
    border-radius: 11px;
    background: #fff;
  }
  .threat-table td {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border: 0;
    white-space: normal;
  }
  .threat-table td:before {
    color: #53666e;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .threat-table td:nth-child(1):before {
    content: "Alamat IP";
  }
  .threat-table td:nth-child(2):before {
    content: "Lokasi";
  }
  .threat-table td:nth-child(3):before {
    content: "Jenis";
  }
  .threat-table td:nth-child(4):before {
    content: "Aktivitas";
  }
  .threat-table td:nth-child(5):before {
    content: "Percobaan";
  }
  .threat-table td:nth-child(6):before {
    content: "Terakhir";
  }
  .threat-table td:nth-child(7):before {
    content: "Aksi";
  }
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  main,
  .view,
  .modal-card {
    max-width: 100%;
    overflow-x: hidden;
  }
  .workspace-head {
    align-items: stretch;
    flex-direction: column;
  }
  .user-search {
    width: 100%;
  }
  .user-table,
  .user-domain-table,
  .domain-attacker-table,
  .domain-attack-table {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .user-table table,
  .user-table tbody,
  .user-table tr,
  .user-table td,
  .user-domain-table table,
  .user-domain-table tbody,
  .user-domain-table tr,
  .user-domain-table td,
  .domain-attacker-table table,
  .domain-attacker-table tbody,
  .domain-attacker-table tr,
  .domain-attacker-table td,
  .domain-attack-table table,
  .domain-attack-table tbody,
  .domain-attack-table tr,
  .domain-attack-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .user-table thead,
  .user-domain-table thead,
  .domain-attacker-table thead,
  .domain-attack-table thead {
    display: none;
  }
  .user-table tbody,
  .user-domain-table tbody,
  .domain-attacker-table tbody,
  .domain-attack-table tbody {
    display: grid;
    gap: 9px;
  }
  .user-table tr,
  .user-domain-table tr,
  .domain-attacker-table tr,
  .domain-attack-table tr {
    padding: 10px 12px;
    border: 1px solid #cbd4d8;
    border-radius: 11px;
    background: #fff;
  }
  .user-table td,
  .user-domain-table td,
  .domain-attacker-table td,
  .domain-attack-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border: 0;
    white-space: normal;
  }
  .user-table td:before,
  .user-domain-table td:before,
  .domain-attacker-table td:before,
  .domain-attack-table td:before {
    color: #53666e;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .user-table td:nth-child(1):before {
    content: "User cPanel";
  }
  .user-table td:nth-child(2):before {
    content: "Domain utama";
  }
  .user-table td:nth-child(3):before {
    content: "Disk / DB";
  }
  .user-table td:nth-child(4):before {
    content: "CPU / RAM";
  }
  .user-table td:nth-child(5):before {
    content: "Traffic";
  }
  .user-table td:nth-child(6):before {
    content: "Status / aksi";
  }
  .user-domain-table td:nth-child(1):before {
    content: "Domain";
  }
  .user-domain-table td:nth-child(2):before {
    content: "File web";
  }
  .user-domain-table td:nth-child(3):before {
    content: "CPU";
  }
  .user-domain-table td:nth-child(4):before {
    content: "RAM";
  }
  .user-domain-table td:nth-child(5):before {
    content: "Request";
  }
  .user-domain-table td:nth-child(6):before {
    content: "Bandwidth";
  }
  .user-domain-table td:nth-child(7):before {
    content: "Status";
  }
  .domain-attacker-table td:nth-child(1):before {
    content: "Alamat IP";
  }
  .domain-attacker-table td:nth-child(2):before {
    content: "Percobaan";
  }
  .domain-attacker-table td:nth-child(3):before {
    content: "Target";
  }
  .domain-attacker-table td:nth-child(4):before {
    content: "Terakhir";
  }
  .domain-attacker-table td:nth-child(5):before {
    content: "Aksi";
  }
  .domain-attack-table td:nth-child(1):before {
    content: "Terakhir";
  }
  .domain-attack-table td:nth-child(2):before {
    content: "Path / URL";
  }
  .domain-attack-table td:nth-child(3):before {
    content: "Percobaan";
  }
  .domain-attack-table td:nth-child(4):before {
    content: "HTTP";
  }
  .domain-attack-table td:nth-child(5):before {
    content: "Hasil";
  }
  .domain-attack-table td:nth-child(6):before {
    content: "Respons";
  }
  .domain-attack-title {
    grid-template-columns: 1fr;
    padding-right: 38px;
  }
  .domain-attack-title .threat-actions {
    justify-content: stretch;
  }
  .domain-attack-title .ip-block-control {
    width: 100%;
  }
  .attack-summary,
  .attack-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
  .detail-tabs {
    grid-template-columns: 1fr;
  }
  .detail-tab-btn {
    justify-content: space-between;
  }
  .security-row-actions {
    grid-template-columns: 1fr;
  }
  .ip-block-control,
  .threat-actions .ip-block-control {
    min-width: 0;
  }
}
@media (max-width: 680px) {
  .top-actions {
    gap: 6px;
  }
  .mobile-account-btn {
    display: grid;
    place-items: center;
    flex: none;
  }
  .top-actions #refreshBtn {
    display: none;
  }
  .top-actions #addServerBtn {
    width: 39px;
    height: 39px;
    padding: 0;
  }
  .top-actions #addServerBtn:first-letter {
    font-size: 18px;
  }
  .top-actions #addServerBtn {
    font-size: 0;
  }
  .sidebar #logoutBtn {
    display: none;
  }
  .domain-table td {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

/* ========================================================================== 
   ZoraVPS control-panel visual system
   Deliberately restrained: neutral surfaces, one operational accent, and
   semantic color only where state or risk needs to be communicated.
   ========================================================================== */

:root {
  --bg: #f2f4f5;
  --panel: #ffffff;
  --panel2: #f7f8f9;
  --panel3: #eceff1;
  --line: #d7dde1;
  --line-strong: #bcc6cc;
  --text: #1d272d;
  --muted: #62717a;
  --muted-strong: #46555e;
  --accent: #176b78;
  --accent-hover: #115965;
  --accent-soft: #e7f0f2;
  --cyan: #176b78;
  --blue: #176b78;
  --violet: #176b78;
  --green: #187456;
  --green-soft: #e8f3ee;
  --amber: #9a6208;
  --amber-soft: #faf1df;
  --red: #b52d3d;
  --red-soft: #f9e9eb;
  --shadow: 0 1px 2px rgb(24 35 42 / 7%);
  color-scheme: light;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-synthesis: none;
}

html {
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
}

body,
button,
input,
select {
  font-family: inherit;
}

button,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    opacity 120ms ease;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgb(23 107 120 / 24%);
  outline-offset: 2px;
}

input,
select {
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  box-shadow: none;
}

input::placeholder {
  color: #8a969d;
}

input:focus,
select:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgb(23 107 120 / 12%);
}

label {
  gap: 6px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 600;
}

.noise,
.login-visual,
.hero-status {
  display: none;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.subtle {
  color: var(--muted);
}

.primary,
.sync-btn,
.icon-btn,
.mobile-account-btn,
.danger-btn,
.server-delete-btn,
.agent-repair-btn,
.block-action,
.unblock-action,
.back-btn,
.dashboard-page-btn,
.security-page-btn,
.domain-page-btn,
.attack-pagination button {
  border-radius: 6px;
  box-shadow: none;
}

.primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}

.primary:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  filter: none;
  transform: none;
}

.primary:disabled,
.danger-btn:disabled,
.block-action:disabled,
.unblock-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.text-btn {
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.text-btn:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.danger-btn,
.server-delete-btn,
.block-action,
.unblock-action,
.outline-danger {
  border: 1px solid #d9aab0;
  background: #fff;
  color: var(--red);
  font-size: 11px;
  font-weight: 650;
}

.danger-btn:hover:not(:disabled),
.server-delete-btn:hover:not(:disabled),
.block-action:hover:not(:disabled),
.unblock-action:hover:not(:disabled),
.outline-danger:hover:not(:disabled) {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

/* Authentication and boot ------------------------------------------------- */

.login-shell {
  min-height: 100vh;
  padding: 24px;
  background: #edf0f2;
}

.login-layout {
  display: block;
  width: min(390px, 100%);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(24 35 42 / 8%);
}

.login-card {
  display: flex;
  min-height: 0;
  padding: 36px 34px 32px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  text-align: left;
}

.login-card > .brand-mark,
.brand-mark {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  border-radius: 7px;
  background: #26333a;
  color: #fff;
  box-shadow: none;
  font-size: 19px;
  font-weight: 700;
}

.login-card h1 {
  color: var(--text);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-align: center;
}

.login-form {
  gap: 15px;
  margin-top: 27px;
}

.login-form input,
.login-form .primary {
  height: 44px;
}

.login-form input {
  border-color: var(--line-strong);
  background: #fff;
}

.login-form .primary {
  margin-top: 2px;
  background: var(--accent);
  box-shadow: none;
}

.form-error {
  color: var(--red);
  font-size: 11px;
}

.boot-view {
  background: #26333a;
  color: #fff;
}

.boot-view img {
  filter: none;
}

.boot-view span {
  border-color: #66747c;
}

.boot-view span:after {
  background: #fff;
}

/* Application shell ------------------------------------------------------- */

.app-shell {
  grid-template-columns: 216px minmax(0, 1fr);
  background: var(--bg);
}

.app-shell main,
main {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0 28px 48px;
  overflow: hidden;
  background: var(--bg);
}

.sidebar {
  z-index: 10;
  height: 100vh;
  padding: 22px 14px 18px;
  border-right: 1px solid #313b41;
  background: #242c31;
  box-shadow: none;
}

.brand {
  gap: 10px;
  padding: 0 9px 24px;
}

.brand-favicon {
  width: 32px;
  height: 32px;
  filter: none;
}

.brand b {
  color: #f5f7f8;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.sidebar nav {
  gap: 3px;
}

.sidebar .nav-item,
.nav-item {
  min-height: 42px;
  gap: 11px;
  padding: 10px 11px;
  border-left: 2px solid transparent;
  border-radius: 4px;
  color: #b5bec3;
  font-size: 13px;
  font-weight: 550;
}

.nav-item i,
.nav-item i svg {
  width: 19px;
  height: 19px;
}

.nav-item i svg {
  stroke-width: 1.7;
}

.sidebar .nav-item:hover {
  border-left-color: #64747c;
  background: #2d373d;
  color: #fff;
}

.sidebar .nav-item.active {
  border-left-color: #64a9b3;
  background: #303b41;
  color: #fff;
  box-shadow: none;
}

.sidebar #passwordBtn {
  color: #b5bec3;
}

.sidebar #logoutBtn {
  width: 100%;
  margin-top: 4px;
  padding: 10px 11px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #d9aeb3;
  justify-content: flex-start;
}

.sidebar #logoutBtn:hover {
  border-left-color: #c96873;
  background: #3b3034;
  color: #fff;
}

.sidebar .system-dot {
  border-color: #3c484f;
  color: #8f9aa0;
}

.sidebar .system-dot span {
  background: var(--green);
  box-shadow: none;
}

.topbar {
  height: 74px;
  border-color: var(--line);
}

.topbar h2 {
  color: var(--text);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.top-actions {
  gap: 7px;
}

.clock-card {
  min-width: 168px;
  gap: 9px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

.clock-card > svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent);
}

.clock {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.clock b {
  font-size: 10px;
  font-weight: 600;
}

.clock small {
  margin-top: 1px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.sync-btn,
.icon-btn,
.mobile-account-btn {
  height: 38px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
}

.sync-btn {
  gap: 6px;
  padding: 0 11px;
}

.sync-btn:hover,
.icon-btn:hover,
.mobile-account-btn:hover {
  border-color: #8ea1aa;
  background: var(--panel2);
  color: var(--accent);
}

.sync-btn svg {
  width: 16px;
  height: 16px;
}

.mobile-account-btn.danger {
  border-color: #d9aab0;
  background: #fff;
  color: var(--red);
}

.view {
  padding-top: 22px;
}

/* Shared surfaces and hierarchy ------------------------------------------ */

.panel,
.table-wrap,
.server-card,
.stat-card,
.domain-card,
.threat-grid > article,
.usage-chart-card,
.hosting-account,
.rdp-status-panel {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--shadow);
}

.panel {
  padding: 16px;
}

.section-head,
.panel-head {
  align-items: center;
}

.section-head {
  margin: 20px 0 10px;
}

.section-head h3,
.panel-head h3,
.workspace-head h3,
.domain-toolbar h3 {
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.empty {
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}

.help-note,
.threat-note,
.http-meaning {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
  color: var(--muted-strong);
}

.count-chip,
.live-chip,
.event-type,
.incident-kind,
.incident-meta span,
.domain-status,
.result-chip,
.file-active-chip,
.file-risk,
.file-safe,
.monitor-chip,
.saved-chip,
.unsaved-chip,
.protect-ready,
.blocked-state,
.block-state-pill,
.suspicious-count {
  border-radius: 4px;
  box-shadow: none;
}

/* Dashboard --------------------------------------------------------------- */

.dashboard-main-grid {
  grid-template-columns: minmax(360px, 0.8fr) minmax(520px, 1.2fr);
  gap: 14px;
}

.dashboard-server-column .stat-grid,
.stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}

.stat-card,
.stat-card.cyan,
.stat-card.violet,
.stat-card.blue,
.stat-card.red,
.dashboard-server-column .stat-card,
.dashboard-server-column .stat-card.cyan,
.dashboard-server-column .stat-card.violet,
.dashboard-server-column .stat-card.blue,
.dashboard-server-column .stat-card.red {
  min-height: 84px;
  padding: 12px 13px;
  overflow: visible;
  border: 1px solid var(--line);
  border-left: 3px solid #8a989f;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow);
}

.dashboard-server-column .stat-card.red,
.stat-card.red {
  border-color: #e0c2c6;
  border-left-color: var(--red);
}

.stat-card:after {
  display: none;
}

.stat-card span,
.stat-card small {
  color: var(--muted);
}

.stat-card span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.stat-card strong,
.dashboard-server-column .stat-card strong {
  margin: 5px 0 1px;
  color: var(--text);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.035em;
}

.stat-card small {
  font-size: 10px;
}

.dashboard-server-column > .section-head {
  margin: 0 0 9px;
}

.dashboard-server-column .server-grid,
.server-grid {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0;
}

.server-card,
.dashboard-server-column .server-card {
  padding: 13px 14px 12px 24px;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.server-card:hover {
  border-color: #9aa8af;
  box-shadow: 0 2px 7px rgb(24 35 42 / 8%);
  transform: none;
}

.server-card.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgb(23 107 120 / 12%);
}

.server-drag-handle {
  left: 3px;
  width: 16px;
}

.server-drag-handle i {
  width: 2px;
  height: 2px;
  background: #89969d;
}

.server-drag-handle:hover i {
  background: var(--accent);
}

.server-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
}

.server-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}

.server-name {
  min-width: 0;
}

.server-name > div {
  min-width: 0;
}

.server-name b {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.server-name small,
.server-foot {
  color: var(--muted);
  font-size: 10px;
}

.server-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.status:before {
  width: 6px;
  height: 6px;
}

.status.online {
  border-color: #bcd8cc;
  background: var(--green-soft);
  color: var(--green);
}

.status.offline {
  border-color: #e2c3c7;
  background: var(--red-soft);
  color: var(--red);
}

.usage-donuts,
.dashboard-server-column .usage-donuts {
  gap: 8px;
  margin: 13px 0 11px;
}

.donut,
.dashboard-server-column .donut {
  width: 58px;
  height: 58px;
  margin-bottom: 6px;
  background: conic-gradient(var(--ring) calc(var(--value) * 1%), #e3e7e9 0);
}

.donut:before,
.dashboard-server-column .donut:before {
  inset: 6px;
  background: #fff;
}

.donut span,
.dashboard-server-column .donut span {
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}

.donut-item > b {
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 650;
}

.donut-item > small {
  color: var(--muted);
  font-size: 8px;
}

.donut-item.no-data .donut {
  background: #e3e7e9;
}

.donut-item.no-data small {
  color: var(--amber);
}

.server-foot,
.dashboard-server-column .server-foot {
  padding-top: 9px;
  border-color: #e5e8ea;
}

.dashboard-security-panel {
  align-self: start;
  height: auto;
  margin: 0;
  padding: 15px;
  overflow: visible;
  background: #fff;
}

.dashboard-security-panel .panel-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.dashboard-security-panel .live-chip,
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid #bcd8cc;
  background: var(--green-soft);
  color: var(--green);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.dashboard-security-panel .live-chip:before {
  width: 6px;
  height: 6px;
  background: var(--green);
  box-shadow: none;
}

.dashboard-security-panel #eventFeed,
#eventFeed {
  max-height: none;
  overflow: visible;
  padding: 0;
}

.dashboard-event-list {
  gap: 7px;
  padding-top: 9px;
}

.dashboard-threat {
  grid-template-columns: minmax(0, 1fr) 184px;
  gap: 12px;
  padding: 11px 11px 11px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

.dashboard-threat:before {
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: 6px 0 0 6px;
  background: #6f858f;
}

.dashboard-threat.danger:before {
  background: var(--red);
}

.dashboard-threat.warning:before {
  background: var(--amber);
}

.dashboard-threat.info:before {
  background: var(--accent);
}

.dashboard-threat-title b {
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.dashboard-threat-title time {
  padding-top: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 550;
}

.incident-kind,
.event-type {
  display: inline-flex;
  padding: 3px 5px;
  border: 1px solid #d5dcdf;
  background: var(--panel2);
  color: var(--muted-strong);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0;
}

.dashboard-threat p {
  margin: 7px 0 6px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.45;
}

.incident-meta {
  gap: 5px;
  margin-bottom: 6px;
}

.incident-meta span,
.event-pills span {
  padding: 3px 5px;
  border: 1px solid #dce1e4;
  background: var(--panel2);
  color: var(--muted-strong);
  font-size: 9px;
  font-weight: 600;
}

.incident-meta .incident-ip,
.event-pills .ip {
  border-color: #c7d9dc;
  background: var(--accent-soft);
  color: var(--accent);
}

.dashboard-threat-main > small,
.dashboard-threat small {
  color: var(--muted);
  font-size: 10px;
}

.dashboard-threat-actions {
  gap: 6px;
}

.dashboard-threat-actions .text-btn {
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  font-size: 10px;
  text-decoration: none;
}

.dashboard-threat-actions .text-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dashboard-block-control,
.ip-block-control {
  gap: 5px;
}

.dashboard-block-control select,
.ip-block-control select,
.dashboard-threat-actions .custom-select-button {
  height: 32px;
  min-height: 32px;
  border-radius: 6px;
  font-size: 10px;
}

.dashboard-block-btn,
.block-action,
.unblock-action {
  height: 32px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 10px;
}

.dashboard-event-pagination,
.security-pagination {
  border-color: var(--line);
  background: transparent;
}

.dashboard-page-btn,
.security-page-btn,
.domain-page-btn {
  min-width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 650;
}

.dashboard-page-btn:hover:not(:disabled),
.dashboard-page-btn.active,
.security-page-btn:hover:not(:disabled),
.security-page-btn.active,
.domain-page-btn:hover:not(:disabled),
.domain-page-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* Tables and security workspace ------------------------------------------ */

.table-wrap {
  overflow: auto;
}

table {
  color: var(--text);
}

th,
table th,
.table-wrap th {
  padding: 11px 12px;
  border-color: var(--line);
  background: #eef1f3;
  color: var(--muted-strong);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

td,
table td {
  padding: 11px 12px;
  border-color: #e3e7e9;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

table td small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.table-wrap tr:hover td,
.domain-table tbody tr:hover td,
.threat-table tbody tr:hover td {
  background: #f8f9fa;
}

.search input {
  width: min(280px, 100%);
  height: 38px;
  min-height: 38px;
}

#securityView {
  min-height: 0;
  height: auto;
  padding-top: 22px;
}

#securityView > .panel {
  height: auto;
  padding: 0;
  overflow: hidden;
}

#securityTable {
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.security-summary {
  gap: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.security-summary > span {
  min-height: 72px;
  padding: 13px 15px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}

.security-summary > span:last-child {
  border-right: 0;
}

.security-summary small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

.security-summary b {
  margin-top: 5px;
  color: var(--text);
  font-size: 20px;
  font-weight: 650;
}

.security-toolbar {
  grid-template-columns: minmax(240px, 1fr) 174px 174px;
  gap: 7px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel2);
}

.threat-search svg,
.domain-search svg {
  width: 16px;
  height: 16px;
  stroke: var(--muted);
}

.threat-search input,
.domain-search input,
.security-toolbar > select,
.security-toolbar > .custom-select .custom-select-button {
  height: 38px;
  min-height: 38px;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
}

.security-table-scroll {
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.security-group-table {
  width: 100%;
  min-width: 1060px;
  table-layout: fixed;
}

.security-group-table th:nth-child(1) {
  width: 125px;
}

.security-group-table th:nth-child(2) {
  width: 135px;
}

.security-group-table th:nth-child(3) {
  width: 205px;
}

.security-group-table th:nth-child(4) {
  width: 145px;
}

.security-group-table th:nth-child(5) {
  width: 70px;
}

.security-group-table th:nth-child(6) {
  width: 145px;
}

.security-group-table th:nth-child(7) {
  width: 235px;
}

.security-group-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.security-group-table th > button {
  padding: 0;
  color: var(--muted-strong);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.security-group-table th > button:hover {
  background: transparent;
  color: var(--accent);
}

.security-row-actions {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}

.security-row-actions .ip-block-control {
  min-width: 0;
}

.security-row-actions .text-btn {
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
}

.ip-detail-btn,
.domain-detail-btn,
.domain-attacker-btn,
.user-detail-btn,
.blocked-ip {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 650;
  text-decoration-color: #94b9bf;
  text-underline-offset: 3px;
}

.attempt-count {
  min-width: 31px;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 11px;
}

.block-state-pill {
  min-height: 30px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 700;
}

.block-state-pill.active,
.blocked-state {
  background: var(--green-soft);
  color: var(--green);
}

.block-state-pill.pending {
  background: var(--amber-soft);
  color: var(--amber);
}

.block-state-pill.failed {
  background: var(--red-soft);
  color: var(--red);
}

.security-pagination {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}

.security-pagination > span,
.domain-pagination > span,
.attack-pagination > span {
  color: var(--muted);
  font-size: 10px;
}

/* Custom select ----------------------------------------------------------- */

.custom-select-button {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  box-shadow: none;
  font-size: 11px;
  font-weight: 550;
}

.custom-select-button:hover {
  border-color: #8ea1aa;
  background: #fff;
}

.custom-select.open .custom-select-button {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(23 107 120 / 12%);
}

.custom-select-menu {
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 20px rgb(24 35 42 / 13%);
}

.custom-select-menu button {
  min-height: 35px;
  padding: 7px 8px;
  border-radius: 4px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 550;
}

.custom-select-menu button:hover,
.custom-select-menu button.selected {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Modals and operational detail ------------------------------------------ */

.modal {
  z-index: 100;
  padding: 22px;
  background: rgb(19 28 33 / 72%);
  backdrop-filter: blur(2px);
}

.nested-modal {
  z-index: 110;
}

.modal-card,
.modal-card.wide,
.threat-modal-card,
.domain-modal-card {
  max-height: 94vh;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #f6f7f8;
  box-shadow: 0 18px 45px rgb(16 25 30 / 25%);
}

.modal-card.compact {
  width: min(520px, 100%);
}

.modal-card.wide {
  width: min(1320px, 100%);
}

.threat-modal-card {
  width: min(1160px, 100%);
}

.domain-modal-card {
  width: min(1280px, 100%);
}

.modal-card h2 {
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.modal-close {
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--muted-strong);
  font-size: 20px;
}

.modal-close:hover {
  border-color: #8ea1aa;
  background: var(--panel3);
  color: var(--text);
}

.detail-title {
  padding: 0 48px 15px 0;
  border-bottom: 1px solid var(--line);
}

.detail-title h2 {
  margin: 2px 0 0;
  font-size: 23px;
}

.detail-title h2 .text-btn {
  margin-left: 6px;
}

.detail-meta {
  gap: 7px;
  margin: 14px 0;
}

.detail-meta span,
.detail-box,
.list-box,
.domain-identity > span,
.user-identity > span,
.user-resource-grid > span,
.domain-detail-stats > span,
.threat-result-summary > span,
.threat-result-metrics > span {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

.detail-meta span {
  padding: 9px 10px;
}

.detail-meta small,
.detail-box span,
.domain-identity small,
.user-identity small,
.user-resource-grid small,
.domain-detail-stats small,
.threat-result-summary small,
.threat-result-metrics small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.detail-meta b,
.detail-box b {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.detail-grid {
  gap: 8px;
}

.detail-box {
  padding: 12px;
}

.detail-box b {
  margin-top: 5px;
  font-size: 14px;
}

.detail-box small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
}

.detail-columns {
  gap: 8px;
}

.list-box {
  padding: 12px;
}

.list-box h4 {
  margin-bottom: 7px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.list-line {
  padding: 7px 0;
  border-color: #e5e8ea;
  color: var(--muted);
  font-size: 10px;
}

.list-line b {
  color: var(--text);
  font-weight: 600;
}

.metric-chart {
  margin: 20px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.chart-toolbar {
  margin: 22px 0 10px;
}

.chart-toolbar h3 {
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
}

.range-switch {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel3);
}

.range-btn {
  padding: 6px 9px;
  border-radius: 4px;
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 600;
}

.range-btn.active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 2px rgb(24 35 42 / 10%);
}

.usage-chart-grid {
  gap: 9px;
}

.usage-chart-card {
  padding: 14px 16px;
  border-radius: 7px;
}

.usage-chart-head b {
  font-size: 13px;
  font-weight: 650;
}

.usage-chart-head strong {
  font-size: 14px;
  font-weight: 650;
}

.usage-chart-head span,
.chart-legend .cpu:before,
.chart-legend .ram:before {
  background: var(--accent);
}

.usage-chart-card polyline {
  stroke: var(--accent);
}

.usage-chart-card .cursor-dot {
  fill: var(--accent);
}

.single-chart {
  height: 170px;
  padding-left: 50px;
}

.single-chart svg,
.single-chart .chart-axis {
  height: 170px;
}

.single-chart line {
  stroke: #e2e6e8;
}

.chart-axis,
.chart-time {
  color: #75838b;
  font-size: 9px;
}

.usage-chart-card .chart-time {
  padding-left: 50px;
}

.chart-tooltip {
  padding: 8px 9px;
  border: 1px solid #3b474d;
  border-radius: 5px;
  background: #273239;
  box-shadow: 0 5px 14px rgb(17 26 31 / 18%);
}

.detail-tabs {
  gap: 0;
  margin: 14px 0 4px;
  padding: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
}

.detail-tab-btn {
  gap: 8px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
}

.detail-tab-btn span {
  font-size: 12px;
  font-weight: 600;
}

.detail-tab-btn b {
  min-width: 22px;
  height: 19px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--panel3);
  color: var(--muted);
  font-size: 9px;
}

.detail-tab-btn.active {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.detail-tab-btn.active b {
  background: var(--accent-soft);
  color: var(--accent);
}

.technical-details {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.technical-details summary {
  padding: 11px 13px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
}

.technical-details summary:after {
  color: var(--accent);
}

.hosting-account {
  padding: 12px;
}

.hosting-usage {
  gap: 6px;
  margin: 10px 0;
}

.hosting-usage span,
.domain-metrics span {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel2);
}

.domain-list span,
.file-protection-types span {
  padding: 4px 6px;
  border: 1px solid #cbdadd;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
}

.inline-rename {
  gap: 6px;
}

.inline-rename input,
.inline-rename .primary,
.inline-rename .icon-btn {
  height: 38px;
}

.command-box {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
}

.command-box code {
  border-radius: 4px;
  background: #263239;
  color: #e6f0f1;
}

.delete-server-identity {
  border-radius: 6px;
}

.delete-warning {
  color: var(--muted-strong);
}

.danger-text,
.server-delete-error,
.block-error {
  color: var(--red) !important;
}

.rdp-status-panel {
  padding: 14px;
}

.rdp-session-list code {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel2);
  color: var(--text);
}

.rdp-audit-ok,
.safe-line {
  border-radius: 5px;
  background: var(--green-soft);
  color: var(--green);
}

.rdp-audit-warning,
.domain-alert {
  border-radius: 5px;
  background: var(--amber-soft);
  color: var(--amber);
}

/* Domain, account, and threat workspaces --------------------------------- */

.workspace-head,
.domain-toolbar {
  margin-bottom: 10px;
}

.workspace-head > div:first-child > small,
.domain-head small,
.threat-head small {
  color: var(--muted);
}

.domain-filters {
  gap: 7px;
}

.domain-table,
.user-table,
.user-domain-table,
.domain-attacker-table,
.domain-attack-table,
.threat-table-wrap,
.threat-path-table {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.domain-table th,
.user-table th,
.user-domain-table th,
.domain-attacker-table th,
.domain-attack-table th,
.threat-table th,
.threat-path-table th {
  background: #eef1f3;
}

.domain-table th button {
  padding: 10px;
  color: var(--muted-strong);
  font-size: 9px;
  font-weight: 700;
}

.domain-table th button:hover {
  background: #e3e8ea;
}

.domain-pagination,
.attack-pagination {
  margin-top: 9px;
}

.domain-page-btn,
.attack-pagination button {
  border-radius: 5px;
}

.domain-status {
  padding: 4px 6px;
  border: 1px solid transparent;
  font-size: 8px;
  font-weight: 700;
}

.domain-status.safe,
.result-chip.rejected,
.attack-result.rejected,
.file-safe {
  border-color: #c4ddd2;
  background: var(--green-soft);
  color: var(--green);
}

.domain-status.warn,
.result-chip.review,
.attack-result.review,
.file-risk.warning,
.result-chip.redirected {
  border-color: #ead5ad;
  background: var(--amber-soft);
  color: var(--amber);
}

.domain-status.danger,
.file-risk.critical {
  border-color: #e4c0c5;
  background: var(--red-soft);
  color: var(--red);
}

.domain-identity,
.domain-detail-stats,
.user-identity,
.user-resource-grid,
.threat-result-summary,
.threat-result-metrics {
  gap: 7px;
}

.domain-identity > span,
.domain-detail-stats > span,
.user-identity > span,
.user-resource-grid > span,
.threat-result-summary > span,
.threat-result-metrics > span {
  padding: 10px 11px;
}

.domain-detail-grid article,
.attack-summary {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
}

.user-domain-head > span,
.domain-attacker-head > span,
.manual-block-title > span {
  border-radius: 4px;
  background: var(--panel3);
  color: var(--muted-strong);
}

.threat-modal-title h2,
.threat-detail-head h2,
.domain-detail-title h2,
.domain-attack-title h2,
.user-modal-title h2 {
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.back-btn {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
}

.back-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.threat-result-card,
.manual-block-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.threat-result-head,
.manual-block-head {
  border-color: var(--line);
}

.threat-result-head h3 {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}

.threat-result-head time,
.threat-history-head time {
  color: var(--muted);
}

.threat-conclusion {
  border-radius: 5px;
  background: var(--panel2);
  color: var(--muted-strong);
}

.threat-path-details,
.file-findings {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.threat-path-details summary,
.file-findings summary {
  padding: 9px 11px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 650;
}

.manual-block-panel {
  border-color: var(--line);
  border-radius: 7px;
  background: #fff;
}

.manual-block-grid > span {
  border-radius: 5px;
  background: var(--panel2);
}

/* Protection workspace --------------------------------------------------- */

#protectionView {
  padding-top: 18px;
}

.protection-hero {
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
}

.protection-hero.enabled {
  border-color: #a8c9bd;
  background: #fff;
}

.protection-state-dot {
  width: 10px;
  height: 10px;
  border: 0;
  background: #89969d;
  box-shadow: none;
}

.protection-hero.enabled .protection-state-dot {
  background: var(--green);
  box-shadow: none;
}

.protection-hero p {
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.protection-hero h2 {
  color: var(--text);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.protection-hero small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.protection-master-side {
  gap: 10px;
}

.saved-chip,
.unsaved-chip {
  padding: 4px 6px;
  border: 1px solid transparent;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.saved-chip {
  border-color: #bfd9ce;
  background: var(--green-soft);
  color: var(--green);
}

.unsaved-chip {
  border-color: #e8d2a8;
  background: var(--amber-soft);
  color: var(--amber);
}

.master-switch > span {
  color: var(--muted-strong);
  font-size: 9px;
  font-weight: 700;
}

.master-switch i,
.switch span {
  border-color: #aab5ba;
  background: #d9dfe2;
  box-shadow: none;
}

.master-switch i:after,
.switch span:after {
  box-shadow: 0 1px 2px rgb(24 35 42 / 20%);
}

.master-switch input:checked + i,
.switch input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
}

.master-switch:focus-within i,
.switch:focus-within span {
  outline: 3px solid rgb(23 107 120 / 20%);
  outline-offset: 2px;
}

.protection-stats {
  gap: 7px;
  margin: 9px 0;
}

.protection-stats article {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--shadow);
}

.protection-stats span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

.protection-stats b {
  margin-top: 3px;
  color: var(--text);
  font-size: 18px;
  font-weight: 650;
}

.protection-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.45fr);
  gap: 9px;
}

.protect-config,
.protect-status {
  padding: 15px;
}

.protect-head {
  gap: 12px;
  padding-bottom: 11px;
  border-color: var(--line);
}

.protect-head h3 {
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
}

.protect-head p {
  color: var(--muted);
  font-size: 10px;
}

.protect-duration {
  width: 142px;
}

.protect-duration > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.protect-save-group #saveProtection {
  height: 38px;
}

.protect-rule {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 1px;
  border-color: #e3e7e9;
}

.protect-rule-icon,
.protect-rule-icon.rdp,
.protect-rule-icon.scan {
  width: 31px;
  height: 31px;
  border: 1px solid #cbdadd;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
}

.protect-rule-copy b {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.protect-rule-copy span {
  margin-top: 2px;
  color: var(--muted-strong);
  font-size: 10px;
}

.protect-rule-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.web-protection-note {
  padding: 12px 102px 12px 13px;
  border-color: #e6d1a7;
  border-radius: 6px;
  background: #fcf8ef;
}

.monitor-chip {
  background: var(--amber-soft);
  color: var(--amber);
}

.protect-server-list article {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 10px 0;
  border-color: #e3e7e9;
}

.server-platform {
  width: 31px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel2);
  color: var(--muted-strong);
}

.protect-server-list b {
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}

.protect-ready {
  padding: 4px 6px;
  border: 1px solid #e1c2c6;
  background: var(--red-soft);
  color: var(--red);
  font-size: 8px;
  font-weight: 700;
}

.protect-ready.online {
  border-color: #bfd9ce;
  background: var(--green-soft);
  color: var(--green);
}

.allowlist-box {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
}

.allowlist-box b {
  color: var(--text);
  font-size: 10px;
  font-weight: 650;
}

.allowlist-box span {
  color: var(--muted);
  font-size: 9px;
}

.file-protection-card {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #b9cfca;
  border-radius: 6px;
  background: #f5f9f8;
}

.file-shield {
  width: 31px;
  height: 31px;
  border-radius: 5px;
  background: var(--accent);
  font-size: 14px;
}

.file-protection-head b {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.file-protection-head small {
  color: var(--muted);
  font-size: 9px;
}

.file-active-chip {
  padding: 4px 6px;
  border: 1px solid #bfd9ce;
  background: var(--green-soft);
  color: var(--green);
  font-size: 8px;
  font-weight: 700;
}

.file-active-chip.off {
  border-color: #e4d0aa;
  background: var(--amber-soft);
  color: var(--amber);
}

#protectionPanel .file-protection-stats,
.file-protection-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.file-protection-stats > span {
  padding: 8px 9px;
  border: 1px solid #d0ddda;
  border-radius: 5px;
  background: #fff;
}

.file-protection-stats small {
  color: var(--muted);
  font-size: 8px;
}

.file-protection-stats b {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}

.file-protection-types {
  gap: 5px;
  margin-top: 9px;
}

.file-protection-types span {
  font-size: 8px;
  font-weight: 600;
}

.file-protection-card > p {
  color: var(--muted-strong);
  font-size: 9px;
}

.file-findings {
  margin-top: 10px;
  overflow: hidden;
}

.file-findings > div {
  border-color: var(--line);
}

.file-findings th {
  padding: 8px;
  background: #eef1f3;
  color: var(--muted-strong);
  font-size: 8px;
}

.file-findings td {
  padding: 8px;
  border-color: #e3e7e9;
  color: var(--text);
  font-size: 10px;
}

.file-findings td small {
  color: var(--muted);
}

.file-risk,
.file-safe {
  padding: 3px 5px;
  border: 1px solid transparent;
  font-size: 8px;
  font-weight: 700;
}

/* Toast ------------------------------------------------------------------ */

.toast {
  right: 18px;
  bottom: 18px;
  padding: 10px 13px;
  border: 1px solid #3f4d54;
  border-radius: 6px;
  background: #273239;
  color: #fff;
  box-shadow: 0 8px 20px rgb(17 26 31 / 20%);
  font-size: 11px;
}

/* Responsive -------------------------------------------------------------- */

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

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

  .dashboard-server-column .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-security-panel {
    margin-top: 0;
  }
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .sidebar {
    padding: 20px 9px 16px;
  }

  .brand {
    justify-content: center;
    padding-inline: 0;
  }

  .brand > div:last-child {
    display: none;
  }

  .sidebar .nav-item,
  .sidebar .nav-item:not(.active) {
    justify-content: center;
    padding-inline: 8px;
    font-size: 0;
  }

  .sidebar #logoutBtn {
    justify-content: center;
  }

  .security-table-scroll {
    overflow: visible;
  }

  .security-group-table,
  .security-group-table tbody,
  .security-group-table tr,
  .security-group-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #securityTable .security-group-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .security-group-table thead {
    display: none;
  }

  .security-group-table tbody {
    display: grid;
    gap: 7px;
    padding: 9px;
    background: var(--panel2);
  }

  .security-group-table tr {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
  }

  .security-group-table td {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 0;
    border: 0;
    background: transparent !important;
    white-space: normal;
  }

  .security-group-table td:before {
    color: var(--muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}

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

  .protect-status {
    order: -1;
  }

  .protect-server-list {
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }

  .dashboard-threat {
    grid-template-columns: minmax(0, 1fr) 174px;
  }
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  main,
  .view,
  .modal,
  .modal-card {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
  }

  main,
  .app-shell main {
    padding: 0 14px 78px;
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    width: 100%;
    height: 58px;
    padding: 5px 6px;
    border: 0;
    border-top: 1px solid #374249;
    background: #242c31;
  }

  .brand,
  .sidebar-foot {
    display: none;
  }

  .sidebar nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    gap: 2px;
  }

  .sidebar .nav-item,
  .sidebar .nav-item:not(.active) {
    display: flex;
    min-width: 0;
    min-height: 47px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    border: 0;
    border-top: 2px solid transparent;
    border-radius: 3px;
    color: #aeb8bd;
    font-size: 8px;
    font-weight: 600;
  }

  .sidebar .nav-item i,
  .sidebar .nav-item i svg {
    width: 18px;
    height: 18px;
  }

  .sidebar .nav-item.active {
    border-top-color: #64a9b3;
    background: #303b41;
    color: #fff;
  }

  .topbar {
    height: 64px;
  }

  .topbar h2 {
    font-size: 17px;
  }

  .top-actions {
    gap: 5px;
  }

  .clock-card,
  .top-actions #refreshBtn {
    display: none;
  }

  .mobile-account-btn {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
  }

  .top-actions #addServerBtn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0;
  }

  .top-actions #addServerBtn:first-letter {
    font-size: 17px;
  }

  .view,
  #securityView,
  #protectionView {
    padding-top: 14px;
  }

  .dashboard-server-column .stat-grid,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 15px;
  }

  .stat-card,
  .dashboard-server-column .stat-card {
    min-height: 76px;
    padding: 10px;
  }

  .stat-card strong,
  .dashboard-server-column .stat-card strong {
    font-size: 20px;
  }

  .dashboard-server-column .server-grid,
  .server-grid {
    grid-template-columns: 1fr;
  }

  .panel,
  .dashboard-security-panel {
    padding: 13px;
  }

  .dashboard-threat {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 10px 10px 10px 12px;
  }

  .dashboard-threat-title {
    display: block;
  }

  .dashboard-threat-title time {
    display: block;
    margin-top: 3px;
  }

  .dashboard-threat-title b {
    overflow: visible;
    white-space: normal;
  }

  .dashboard-threat-main > small {
    display: block;
    white-space: normal;
  }

  .dashboard-threat-main > small b,
  .dashboard-threat-main > small span {
    display: block;
    max-width: none;
  }

  .dashboard-threat-actions {
    grid-template-columns: 1fr;
  }

  .dashboard-block-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .section-head {
    gap: 10px;
  }

  .section-head h3,
  .panel-head h3 {
    font-size: 15px;
  }

  .search {
    min-width: 0;
  }

  .search input {
    width: 100%;
  }

  .modal {
    align-items: start;
    padding: 6px;
  }

  .modal-card,
  .modal-card.wide,
  .threat-modal-card,
  .domain-modal-card {
    width: 100%;
    max-height: calc(100dvh - 12px);
    padding: 18px 13px;
    border-radius: 7px;
  }

  .modal-close {
    top: 10px;
    right: 10px;
  }

  .detail-title {
    display: block;
    padding-right: 42px;
  }

  .detail-title h2 {
    font-size: 20px;
  }

  .detail-title > .status {
    margin-top: 8px;
  }

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

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

  .chart-toolbar {
    display: block;
  }

  .range-switch {
    width: 100%;
    margin-top: 9px;
    overflow: auto;
  }

  .range-btn {
    flex: 1;
    white-space: nowrap;
  }

  .single-chart {
    height: 145px;
    padding-left: 40px;
  }

  .single-chart svg,
  .single-chart .chart-axis {
    height: 145px;
  }

  .usage-chart-card .chart-time {
    padding-left: 40px;
  }

  .detail-tabs,
  .detail-tabs.windows-tabs {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .detail-tab-btn {
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }

  .detail-tab-btn.active {
    border-bottom: 2px solid var(--accent);
  }

  .domain-filters,
  #blockForm {
    grid-template-columns: 1fr;
  }

  .workspace-head,
  .domain-toolbar,
  .protect-head {
    align-items: stretch;
    flex-direction: column;
  }

  .domain-search,
  .user-search {
    width: 100%;
    margin-top: 9px;
  }

  .user-identity,
  .user-resource-grid,
  .domain-identity,
  .domain-detail-stats,
  .threat-result-summary,
  .threat-result-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .domain-pagination,
  .attack-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  /* All dense data sets become labelled vertical records on phones. */
  #serverTable,
  .security-table-scroll,
  .domain-table,
  .user-table,
  .user-domain-table,
  .domain-attacker-table,
  .domain-attack-table,
  .threat-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #serverTable table,
  #serverTable tbody,
  #serverTable tr,
  #serverTable td,
  .security-group-table,
  .security-group-table tbody,
  .security-group-table tr,
  .security-group-table td,
  .domain-table table,
  .domain-table tbody,
  .domain-table tr,
  .domain-table td,
  .user-table table,
  .user-table tbody,
  .user-table tr,
  .user-table td,
  .user-domain-table table,
  .user-domain-table tbody,
  .user-domain-table tr,
  .user-domain-table td,
  .domain-attacker-table table,
  .domain-attacker-table tbody,
  .domain-attacker-table tr,
  .domain-attacker-table td,
  .domain-attack-table table,
  .domain-attack-table tbody,
  .domain-attack-table tr,
  .domain-attack-table td,
  .threat-table,
  .threat-table tbody,
  .threat-table tr,
  .threat-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #serverTable thead,
  .security-group-table thead,
  .domain-table thead,
  .user-table thead,
  .user-domain-table thead,
  .domain-attacker-table thead,
  .domain-attack-table thead,
  .threat-table thead {
    display: none;
  }

  #serverTable tbody,
  .security-group-table tbody,
  .domain-table tbody,
  .user-table tbody,
  .user-domain-table tbody,
  .domain-attacker-table tbody,
  .domain-attack-table tbody,
  .threat-table tbody {
    display: grid;
    gap: 7px;
    padding: 0;
    background: transparent;
  }

  #serverTable tr,
  .security-group-table tr,
  .domain-table tr,
  .user-table tr,
  .user-domain-table tr,
  .domain-attacker-table tr,
  .domain-attack-table tr,
  .threat-table tr {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
  }

  #serverTable td,
  .security-group-table td,
  .domain-table td,
  .user-table td,
  .user-domain-table td,
  .domain-attacker-table td,
  .domain-attack-table td,
  .threat-table td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 0;
    border: 0;
    background: transparent !important;
    font-size: 11px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #serverTable td:before,
  .security-group-table td:before,
  .domain-table td:before,
  .user-table td:before,
  .user-domain-table td:before,
  .domain-attacker-table td:before,
  .domain-attack-table td:before,
  .threat-table td:before {
    color: var(--muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  #serverTable td:nth-child(1):before {
    content: "Status";
  }

  #serverTable td:nth-child(2):before {
    content: "Server / IP";
  }

  #serverTable td:nth-child(3):before {
    content: "Platform";
  }

  #serverTable td:nth-child(4):before {
    content: "CPU";
  }

  #serverTable td:nth-child(5):before {
    content: "RAM";
  }

  #serverTable td:nth-child(6):before {
    content: "Disk";
  }

  #serverTable td:nth-child(7):before {
    content: "Terakhir";
  }

  #serverTable td:nth-child(8):before {
    content: "Aksi";
  }

  #serverTable td > small {
    grid-column: 2;
  }

  #serverTable td > .status,
  .security-group-table .ip-detail-btn,
  .security-group-table .event-type,
  .security-group-table .attempt-count,
  .file-findings td > .file-risk,
  .file-findings td > .file-safe {
    width: auto;
    justify-self: start;
    text-align: left;
  }

  .security-row-actions {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  .security-row-actions .ip-block-control,
  .ip-block-control,
  .threat-actions .ip-block-control {
    width: 100%;
    min-width: 0;
  }

  .security-row-actions .text-btn {
    width: 100%;
  }

  .security-summary {
    grid-template-columns: 1fr;
  }

  .security-summary > span {
    min-height: 60px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .security-summary > span:last-child {
    border-bottom: 0;
  }

  .security-toolbar {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .security-pagination {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px;
  }

  .protection-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

  .protection-hero > div {
    align-items: flex-start;
  }

  .protection-master-side {
    width: 100%;
  }

  .protection-master-side .master-switch {
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  .protection-stats,
  #protectionPanel .file-protection-stats,
  .file-protection-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protect-status {
    margin-bottom: 8px;
  }

  .protect-server-list {
    grid-template-columns: 1fr;
  }

  .protect-save-group {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .protect-duration,
  .protect-save-group #saveProtection {
    width: 100%;
  }

  .protect-rule {
    grid-template-columns: 31px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .web-protection-note {
    padding: 11px;
  }

  .monitor-chip {
    position: static;
    display: inline-flex !important;
    width: max-content;
    margin-top: 8px;
  }

  .file-protection-head {
    align-items: flex-start;
  }

  .file-protection-head > div {
    align-items: flex-start;
  }

  /* File findings are records, never a horizontally scrolling table. */
  .file-findings {
    overflow: visible;
  }

  .file-findings > div {
    max-height: none;
    overflow: visible;
  }

  .file-findings table,
  .file-findings tbody,
  .file-findings tr,
  .file-findings td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .file-findings thead {
    display: none;
  }

  .file-findings tbody {
    display: grid;
    gap: 6px;
    padding: 6px;
    background: var(--panel2);
  }

  .file-findings tr {
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
  }

  .file-findings td {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 7px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    overflow-wrap: anywhere;
  }

  .file-findings td:before {
    color: var(--muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .file-findings td:nth-child(1):before {
    content: "Risiko";
  }

  .file-findings td:nth-child(2):before {
    content: "VPS / akun";
  }

  .file-findings td:nth-child(3):before {
    content: "Lokasi";
  }

  .file-findings td:nth-child(4):before {
    content: "Proteksi";
  }

  .custom-select-menu {
    position: fixed;
    inset: auto 10px 68px;
    z-index: 500;
    max-height: 48vh;
    padding: 6px;
    border-radius: 7px;
  }

  .custom-select-menu button {
    min-height: 42px;
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  main,
  .app-shell main {
    padding-inline: 10px;
  }

  .login-shell {
    padding: 12px;
  }

  .login-card {
    padding: 30px 22px 26px;
  }

  .topbar h2 {
    max-width: 100px;
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section-head {
    align-items: flex-start;
  }

  .section-head .search {
    width: min(178px, 53vw);
  }

  #serversView > .section-head {
    display: block;
  }

  #serversView > .section-head .search {
    width: 100%;
    margin-top: 9px;
  }

  .detail-meta,
  .detail-grid,
  .user-identity,
  .user-resource-grid,
  .domain-identity,
  .domain-detail-stats,
  .threat-result-summary,
  .threat-result-metrics {
    grid-template-columns: 1fr;
  }

  .protection-stats article {
    padding: 9px 10px;
  }

  .protect-config,
  .protect-status {
    padding: 12px;
  }

  .file-protection-card {
    padding: 10px;
  }

  .file-active-chip {
    flex: none;
  }

  #serverTable td,
  .security-group-table td,
  .domain-table td,
  .user-table td,
  .user-domain-table td,
  .domain-attacker-table td,
  .domain-attack-table td,
  .threat-table td {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .file-findings td {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .toast {
    right: 10px;
    bottom: 68px;
    left: 10px;
  }
}

@media (max-width: 1100px) {
  /* Beats the legacy generic table minimum while retaining its desktop use. */
  #securityTable.table-wrap .security-group-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }
}

/* Keep iOS Safari from magnifying the page when a form field receives focus.
   Pinch zoom remains available; only editable native controls need 16px text. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}