:root {
  --cyan:#00d9ff;
  --text:#f2f7fd;
  --muted:#91a6b9;
  --line:rgba(122,172,198,.17);
}
* {box-sizing:border-box}
html,body {margin:0;min-height:100%;font-family:Inter,Arial,sans-serif}
body {background:#050d15;color:var(--text)}
a {text-decoration:none;color:inherit}
button,input {font:inherit}
.app {display:flex;height:100dvh;min-height:0;overflow:hidden}
.sidebar {
  width:247px;flex-shrink:0;display:flex;flex-direction:column;
  padding:27px 17px 19px;background:#07131f;
  border-right:1px solid var(--line);
}
.brand {
  display:flex;align-items:center;gap:9px;padding:0 7px 34px;
  font:700 24px Rajdhani,sans-serif;letter-spacing:.4px;white-space:nowrap;
}
.brand img {width:40px;height:40px;object-fit:contain}
.brand b {color:var(--cyan)}
.sidebar-label {
  padding:0 15px 13px;color:#637f93;
  font-size:10px;font-weight:800;letter-spacing:1.7px;
}
nav {display:flex;flex-direction:column;gap:7px}
.nav-item {
  display:flex;align-items:center;gap:12px;padding:14px;
  border:1px solid transparent;border-radius:7px;
  font-size:12px;font-weight:700;color:#a5b7c6;transition:.2s;
}
.nav-item:hover {color:white;background:rgba(255,255,255,.045)}
.nav-item.active {
  color:var(--cyan);background:rgba(0,217,255,.09);
  border-color:rgba(0,217,255,.2);
}
.nav-icon {font-size:19px;width:23px;text-align:center}
.sidebar-bottom {
  display:flex;align-items:center;gap:11px;margin-top:auto;
  padding:15px 10px;border-top:1px solid var(--line);
}
.status-light {
  width:9px;height:9px;flex-shrink:0;border-radius:50%;
  background:#ffb66d;box-shadow:0 0 14px rgba(255,182,109,.5);
}
.sidebar-bottom strong {display:block;font-size:9px;letter-spacing:.5px}
.sidebar-bottom small {display:block;color:var(--muted);font-size:10px;margin-top:5px}
.main {
  flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;
  background:
    linear-gradient(100deg,rgba(4,12,21,.94),rgba(5,17,28,.85)),
    url("../images/1083273-dayz-wallpapers-1920x1080-windows.jpg");
  background-position:center;background-size:cover;
}
.topbar {
  height:65px;flex-shrink:0;display:flex;align-items:center;
  justify-content:space-between;padding:0 34px;
  border-bottom:1px solid var(--line);background:rgba(5,13,23,.55);
}
.topbar span {color:#94acbe;font-size:10px;font-weight:800;letter-spacing:1.3px}
.topbar em {color:var(--cyan);font-style:normal;margin:0 8px}
.topbar a {font-size:10px;font-weight:800;letter-spacing:1px}
.topbar a:hover {color:var(--cyan)}
.main-inner {
  flex:1;min-height:0;display:flex;flex-direction:column;
  width:min(1130px,100%);margin:0 auto;padding:24px 32px 12px;
}
.heading {display:flex;justify-content:space-between;align-items:center;gap:15px;flex-shrink:0}
.eyebrow {color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:1.7px}
.heading h1 {
  font:700 clamp(42px,4vw,64px)/1 Rajdhani,sans-serif;
  margin:6px 0;letter-spacing:.5px;
}
.heading h1 span,.empty-state h3 span {color:var(--cyan)}
.heading p {color:var(--muted);font-size:12px;margin:0}
.connection-pill {
  display:flex;align-items:center;gap:13px;min-width:215px;
  padding:12px 16px;border:1px solid rgba(255,182,109,.28);
  border-radius:8px;background:rgba(255,182,109,.06);
}
.pulse-dot {
  position:relative;width:11px;height:11px;flex-shrink:0;
  background:#ffb66d;border-radius:50%;box-shadow:0 0 12px #ffb66d66;
}
.pulse-dot:after {
  content:"";position:absolute;inset:-6px;border:1px solid #ffb66d;
  border-radius:50%;animation:pulse 2s infinite;
}
@keyframes pulse {0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.connection-pill strong {display:block;font-size:10px;letter-spacing:.6px}
.connection-pill b {color:#ffb66d;margin-left:6px}
.connection-pill small {display:block;color:#aab8c5;font-size:10px;margin-top:5px}
.server-panel {
  flex:1;min-height:0;display:flex;flex-direction:column;
  margin-top:19px;border:1px solid rgba(0,217,255,.23);
  border-radius:10px;overflow:hidden;
  background:rgba(5,16,27,.87);
  box-shadow:0 15px 45px rgba(0,0,0,.2);
}
.panel-top {
  flex-shrink:0;display:flex;justify-content:space-between;
  align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);
}
.panel-top h2 {font:700 27px Rajdhani,sans-serif;margin:0}
.panel-top p {color:var(--muted);font-size:11px;margin:3px 0 0}
.server-count {
  padding:7px 10px;border:1px solid var(--line);border-radius:5px;
  color:#9eb7c7;font-size:10px;font-weight:800;
}
.toolbar {
  flex-shrink:0;display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding:12px 22px;
  border-bottom:1px solid var(--line);
}
.search {
  display:flex;align-items:center;gap:10px;width:min(330px,100%);
  padding:10px 12px;border:1px solid rgba(0,217,255,.23);
  border-radius:6px;background:rgba(0,0,0,.2);color:#89a6b9;
}
.search:focus-within {border-color:var(--cyan);box-shadow:0 0 0 2px #00d9ff15}
.search svg {width:17px;height:17px;flex-shrink:0}
.search input {
  width:100%;min-width:0;border:0;outline:0;background:none;
  color:white;font-size:12px;
}
.search input::placeholder {color:#8199aa}
.filter-label {color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.9px}
.server-results {
  flex:1;min-height:0;display:flex;align-items:center;
  justify-content:center;padding:15px;overflow:auto;
}
.empty-state {text-align:center;max-width:440px}
.empty-icon {
  display:grid;place-items:center;width:66px;height:66px;margin:0 auto 12px;
  border-radius:16px;border:1px solid #00d9ff44;
  color:var(--cyan);background:#00d9ff0c;
}
.empty-icon svg {width:40px;height:40px}
.empty-state h3 {font:700 29px Rajdhani,sans-serif;margin:0}
.empty-state p {color:#a2b5c4;font-size:12px;line-height:1.7;margin:6px 0 0}
.connect-bar {
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:15px 22px;border-top:1px solid var(--line);
  background:rgba(0,217,255,.035);
}
.connect-bar strong {font-size:11px;letter-spacing:.5px}
.connect-bar p {color:var(--muted);font-size:11px;margin:5px 0 0}
.connect-bar button {
  flex-shrink:0;display:flex;align-items:center;gap:15px;
  padding:13px 18px;background:var(--cyan);color:#04131b;
  border:0;border-radius:5px;font-size:11px;font-weight:800;
  cursor:pointer;
}
.connect-bar button:hover {background:#80efff}
.main-inner footer {
  flex-shrink:0;display:flex;justify-content:space-between;
  padding-top:11px;color:#6f8799;font-size:9px;
  font-weight:800;letter-spacing:1px;
}
@media(max-width:850px) {
  .sidebar {width:72px;padding:20px 8px}
  .brand {padding:0 5px 25px;font-size:0}
  .brand img {width:42px;height:42px}
  .brand span,.sidebar-label,.nav-item:not(.active),.sidebar-bottom {display:none}
  .nav-item {justify-content:center;padding:13px 5px;font-size:0}
  .nav-icon {font-size:22px}
  .main-inner {padding:18px 18px 12px}
  .topbar {padding:0 18px}
}
@media(max-width:600px) {
  .app {height:100dvh}
  .sidebar {width:54px;padding:15px 4px}
  .brand img {width:35px;height:35px}
  .main-inner {padding:13px 11px 9px}
  .topbar {height:52px;padding:0 12px}
  .topbar span {font-size:8px}
  .topbar a {font-size:8px}
  .heading h1 {font-size:40px}
  .heading p {font-size:11px}
  .connection-pill {min-width:0;padding:8px}
  .connection-pill strong {font-size:9px}
  .connection-pill small {display:none}
  .server-panel {margin-top:12px}
  .panel-top,.toolbar,.connect-bar {padding:12px}
  .server-count,.filter-label {display:none}
  .connect-bar {flex-direction:column;align-items:stretch;gap:10px}
  .connect-bar button {justify-content:center}
  .empty-icon {width:50px;height:50px;margin-bottom:6px}
  .empty-icon svg {width:31px;height:31px}
  .empty-state h3 {font-size:24px}
  .main-inner footer span {display:none}
}
@media(max-height:590px) and (min-width:601px) {
  .main-inner {padding-top:10px}
  .heading h1 {font-size:38px}
  .server-panel {margin-top:9px}
  .panel-top,.toolbar,.connect-bar {padding-top:8px;padding-bottom:8px}
  .empty-icon {width:45px;height:45px;margin-bottom:5px}
  .empty-icon svg {width:28px;height:28px}
}
@media(prefers-reduced-motion:reduce) {
  .pulse-dot:after {animation:none}
}

/* THREE-SECTION DASHBOARD */

nav button.nav-item {
  width:100%;
  text-align:left;
  font-family:Inter,Arial,sans-serif;
  cursor:pointer;
  background:transparent;
}

nav button.nav-item.active {
  color:var(--cyan);
  background:rgba(0,217,255,.09);
  border-color:rgba(0,217,255,.2);
}

.tab-panel[hidden] {
  display:none !important;
}

.feature-panel {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  margin-top:19px;
  border:1px solid rgba(0,217,255,.23);
  border-radius:10px;
  overflow:hidden;
  background:rgba(5,16,27,.87);
}

.feature-heading {
  flex-shrink:0;
  padding:21px 26px;
  border-bottom:1px solid var(--line);
}

.feature-kicker {
  color:var(--cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.6px;
}

.feature-heading h2 {
  margin:5px 0;
  font:700 35px Rajdhani,sans-serif;
}

.feature-heading h2 span {
  color:var(--cyan);
}

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

.feature-body {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:14px;
  padding:24px 32px;
  overflow:auto;
}

.feature-icon {
  display:grid;
  place-items:center;
  width:55px;
  height:55px;
  border-radius:12px;
  border:1px solid rgba(0,217,255,.3);
  color:var(--cyan);
  background:rgba(0,217,255,.07);
  font-size:35px;
}

.feature-body h3 {
  font:700 28px Rajdhani,sans-serif;
  margin:0;
}

.feature-body > p {
  max-width:660px;
  margin:0;
  color:#a8bdcc;
  font-size:12px;
  line-height:1.7;
}

.setup-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin:5px 0;
}

.setup-steps > div {
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:7px;
  background:rgba(0,217,255,.035);
}

.setup-steps b {
  color:var(--cyan);
  font:700 24px Rajdhani,sans-serif;
}

.setup-steps span {
  color:#c1d0dc;
  font-size:11px;
  line-height:1.5;
}

.feature-button {
  padding:13px 20px;
  border:0;
  border-radius:5px;
  background:var(--cyan);
  color:#03131c;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.feature-button:hover {
  background:#80efff;
}

.feature-body .feature-note {
  color:#89a3b4;
  font-size:10px;
}

.status-large {
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  width:100%;
  border:1px solid rgba(255,182,109,.25);
  border-radius:8px;
  background:rgba(255,182,109,.05);
}

.status-orb {
  width:15px;
  height:15px;
  border-radius:50%;
  background:#ffb66d;
  box-shadow:0 0 0 7px rgba(255,182,109,.09),0 0 17px rgba(255,182,109,.4);
}

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

.status-large small {
  display:block;
  margin-top:6px;
  color:#b2c0cc;
  font-size:11px;
}

.status-checks {
  width:100%;
  display:grid;
  gap:8px;
}

.status-checks > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 15px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
  background:rgba(0,0,0,.1);
}

.status-checks b {
  font-size:10px;
  letter-spacing:.6px;
}

.check-warning {
  color:#ffb66d;
}

.check-neutral {
  color:#a3b8c8;
}

.status-help {
  border-left:2px solid var(--cyan);
  padding:7px 0 7px 15px;
}

.status-help strong {
  font-size:11px;
}

.status-help p {
  max-width:730px;
  color:#a9bdcc;
  font-size:11px;
  line-height:1.7;
  margin:7px 0 0;
}

@media(max-width:850px) {
  .sidebar .nav-item {
    display:flex !important;
    justify-content:center;
    font-size:0;
  }

  .sidebar .nav-icon {
    font-size:21px;
  }

  .feature-body {
    padding:20px;
  }

  .setup-steps {
    grid-template-columns:1fr;
  }
}

@media(max-height:700px) and (min-width:851px) {
  .feature-body {
    gap:9px;
    padding:12px 24px;
  }

  .feature-heading {
    padding:12px 22px;
  }

  .feature-heading h2 {
    font-size:28px;
  }

  .setup-steps > div {
    padding:9px;
  }

  .status-large {
    padding:10px 15px;
  }

  .status-checks > div {
    padding:8px 12px;
  }
}


/* Hide My Servers status display only */
body:has(#tab-servers:not([hidden])) .heading .connection-pill,
body:has(#tab-servers:not([hidden])) .heading .live-status,
body:has(#tab-servers:not([hidden])) .heading .panel-status {
  display:none !important;
}

/* CLEAN CONNECT DISCORD PAGE */

.discord-connect-page {
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:auto;
  scrollbar-width:thin;
}

.discord-connect-content {
  flex:1;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px 20px;
}

.discord-logo {
  color:#5865f2;
  filter:drop-shadow(0 0 28px rgba(88,101,242,.38));
  margin-bottom:15px;
}

.discord-logo svg {
  display:block;
  width:67px;
  height:55px;
}

.discord-eyebrow {
  color:var(--cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}

.discord-connect-content h2 {
  margin:10px 0;
  font:700 clamp(34px,4vw,56px)/1 Rajdhani,sans-serif;
  letter-spacing:.5px;
}

.discord-connect-content h2 span {
  color:var(--cyan);
}

.discord-intro {
  max-width:540px;
  color:#a9becd;
  font-size:12px;
  line-height:1.8;
  margin:0 0 22px;
}

.discord-main-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:23px;
  padding:16px 28px;
  background:var(--cyan);
  color:#04131c;
  border:0;
  border-radius:5px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  cursor:pointer;
  box-shadow:0 0 26px rgba(0,217,255,.18);
  transition:.2s;
}

.discord-main-button:hover {
  background:#82efff;
  transform:translateY(-2px);
  box-shadow:0 0 32px rgba(0,217,255,.32);
}

.discord-connection-note {
  color:#92a8b8;
  font-size:10px;
  margin:12px 0 0;
}

.discord-guide {
  width:min(500px,100%);
  margin-top:28px;
  text-align:left;
}

.discord-guide h3 {
  color:var(--cyan);
  font:700 21px Rajdhani,sans-serif;
  letter-spacing:1px;
  margin:0 0 10px;
}

.discord-guide-step {
  display:flex;
  align-items:center;
  gap:20px;
  padding:9px 0;
  border-bottom:1px solid rgba(122,172,198,.12);
}

.discord-guide-step:last-child {
  border-bottom:0;
}

.discord-guide-step strong {
  color:var(--cyan);
  font:700 22px Rajdhani,sans-serif;
}

.discord-guide-step p {
  margin:0;
  color:#c2d0dc;
  font-size:11px;
  line-height:1.5;
}

.discord-guide-step b {
  color:#fff;
}

@media(max-height:800px) and (min-width:851px) {
  .discord-logo {
    margin-bottom:7px;
  }

  .discord-logo svg {
    width:50px;
    height:42px;
  }

  .discord-connect-content h2 {
    font-size:40px;
    margin:6px 0;
  }

  .discord-intro {
    margin-bottom:12px;
    line-height:1.5;
  }

  .discord-guide {
    margin-top:15px;
  }

  .discord-guide-step {
    padding:6px 0;
  }
}

@media(max-width:600px) {
  .discord-connect-content {
    padding:18px 8px;
    justify-content:flex-start;
  }

  .discord-connect-content h2 {
    font-size:35px;
  }

  .discord-intro {
    font-size:11px;
  }

  .discord-guide {
    margin-top:20px;
  }
}

/* Hide live connection status on Connect Discord only */
body:has(#tab-connect:not([hidden])) .heading .connection-pill,
body:has(#tab-connect:not([hidden])) .heading .live-status,
body:has(#tab-connect:not([hidden])) .heading .panel-status,
body:has(#tab-connect:not([hidden])) .sidebar-bottom {
  display: none !important;
}


/* Hide My Servers heading on Connect Discord only */
body:has(#tab-connect:not([hidden])) .heading {
  display: none !important;
}

/* Keep Connect Discord page nicely positioned */
body:has(#tab-connect:not([hidden])) .discord-connect-page {
  margin-top: 0 !important;
}


/* CLEAN BOT SETUP INSTRUCTIONS */

.bot-setup-guide {
  width:min(550px,100%);
  margin-top:22px;
  text-align:left;
}

.bot-setup-guide h3 {
  color:var(--cyan);
  font:700 22px Rajdhani,sans-serif;
  letter-spacing:1px;
  margin:0 0 7px;
}

.bot-setup-intro {
  color:#a8bdcc;
  font-size:11px;
  line-height:1.7;
  margin:0 0 12px;
}

.bot-setup-step {
  display:flex;
  gap:18px;
  padding:10px 0;
  border-bottom:1px solid rgba(122,172,198,.12);
}

.bot-setup-step > strong {
  color:var(--cyan);
  font:700 23px Rajdhani,sans-serif;
}

.bot-setup-step h4 {
  margin:0 0 5px;
  color:#fff;
  font-size:11px;
  letter-spacing:.5px;
}

.bot-setup-step p {
  color:#a8bdcc;
  font-size:11px;
  line-height:1.6;
  margin:0;
}

.bot-setup-warning {
  margin:13px 0 0;
  color:#ffbf77;
  font-size:10px;
  line-height:1.6;
}


/* COMPACT BOT HELP BUTTON */

.bot-help-link {
  margin-top:14px;
  border:0;
  background:none;
  color:#9db4c5;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:8px 12px;
}

.bot-help-link:hover {
  color:var(--cyan);
}

.bot-help-link span {
  color:var(--cyan);
  margin-right:5px;
}

/* BOT HELP POPUP */

.bot-help-overlay[hidden] {
  display:none !important;
}

.bot-help-overlay {
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,5,12,.84);
  backdrop-filter:blur(9px);
}

.bot-help-dialog {
  position:relative;
  width:min(540px,100%);
  max-height:calc(100dvh - 36px);
  overflow:auto;
  padding:30px;
  border:1px solid rgba(0,217,255,.3);
  border-radius:12px;
  background:#091a29;
  box-shadow:0 25px 90px rgba(0,0,0,.55);
}

.bot-help-close {
  position:absolute;
  right:17px;
  top:12px;
  border:0;
  background:none;
  color:#a9bdcb;
  font-size:29px;
  cursor:pointer;
}

.bot-help-close:hover {
  color:white;
}

.bot-help-eyebrow {
  color:var(--cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px;
}

.bot-help-dialog h2 {
  margin:8px 0;
  font:700 37px Rajdhani,sans-serif;
}

.bot-help-dialog h2 span {
  color:var(--cyan);
}

.bot-help-intro {
  margin:0 0 20px;
  color:#a8bdcc;
  font-size:12px;
}

.bot-help-step {
  display:flex;
  gap:16px;
  padding:15px 0;
  border-bottom:1px solid rgba(122,172,198,.15);
}

.bot-help-step b {
  color:var(--cyan);
  font:700 24px Rajdhani,sans-serif;
}

.bot-help-step strong {
  font-size:11px;
  letter-spacing:.6px;
}

.bot-help-step p {
  margin:6px 0 0;
  color:#a8bdcc;
  font-size:11px;
  line-height:1.7;
}

.bot-help-tip {
  margin:18px 0 0;
  color:#ffbd75;
  font-size:11px;
  line-height:1.6;
}

body.bot-help-visible {
  overflow:hidden;
}

/* PROFESSIONAL LIVE STATUS MONITOR */

body:has(#tab-status:not([hidden])) .heading,
body:has(#tab-status:not([hidden])) .sidebar-bottom {
  display:none !important;
}

.live-monitor {
  margin-top:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.monitor-layout {
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 16px;
}

.monitor-eyebrow {
  color:var(--cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}

.monitor-title {
  margin:7px 0 3px;
  font:700 clamp(40px,4vw,60px)/1 Rajdhani,sans-serif;
}

.monitor-title span {
  color:var(--cyan);
}

.monitor-subtitle {
  margin:5px 0 0;
  color:#a5baca;
  font-size:12px;
}

.monitor-orb {
  position:relative;
  width:160px;
  height:160px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  margin:16px 0 8px;
}

.monitor-ring {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(0,217,255,.3);
}

.ring-one {
  inset:0;
  border-style:dashed;
  animation:monitorSpin 22s linear infinite;
}

.ring-two {
  inset:17px;
  border-color:rgba(255,185,103,.3);
  animation:monitorSpin 14s linear infinite reverse;
}

.monitor-core {
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle,#233746,#091622);
  border:1px solid rgba(255,185,103,.5);
  box-shadow:0 0 35px rgba(255,185,103,.12);
}

.monitor-core span {
  color:#ffbd75;
  font:700 44px Rajdhani,sans-serif;
}

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

.monitor-state {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:5px;
}

.monitor-state-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ffbd75;
  box-shadow:0 0 12px rgba(255,189,117,.6);
}

.monitor-state strong {
  font-size:12px;
  letter-spacing:1.1px;
}

.monitor-description {
  max-width:500px;
  margin:12px 0 0;
  color:#a4b8c8;
  font-size:11px;
  line-height:1.7;
}

.monitor-metrics {
  width:min(680px,100%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
  padding:18px 0;
  border-top:1px solid rgba(122,172,198,.2);
  border-bottom:1px solid rgba(122,172,198,.2);
}

.monitor-metric {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.monitor-metric span {
  color:#91aabc;
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
}

.monitor-metric strong {
  color:#ffbd75;
  font-size:12px;
  letter-spacing:.5px;
}

.monitor-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin-top:20px;
}

.monitor-refresh {
  padding:13px 20px;
  border:0;
  border-radius:5px;
  background:var(--cyan);
  color:#04131c;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.monitor-refresh:hover {
  background:#8cefff;
}

.monitor-help {
  border:0;
  background:transparent;
  color:#b3c6d4;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  padding:12px;
}

.monitor-help:hover {
  color:var(--cyan);
}

.monitor-footnote {
  margin-top:14px;
  color:#7f99ac;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px;
}

@media(max-height:760px) and (min-width:601px) {
  .monitor-orb {
    width:110px;
    height:110px;
    margin:8px 0 3px;
  }

  .monitor-core {
    width:65px;
    height:65px;
  }

  .monitor-core span {
    font-size:32px;
  }

  .ring-two {
    inset:12px;
  }

  .monitor-title {
    font-size:43px;
  }

  .monitor-metrics {
    margin-top:12px;
    padding:12px 0;
  }

  .monitor-actions {
    margin-top:12px;
  }
}

@media(max-width:600px) {
  .monitor-layout {
    padding:8px;
  }

  .monitor-title {
    font-size:43px;
  }

  .monitor-orb {
    width:115px;
    height:115px;
  }

  .monitor-core {
    width:67px;
    height:67px;
  }

  .monitor-metrics {
    gap:5px;
  }

  .monitor-metric span {
    font-size:8px;
  }

  .monitor-metric strong {
    font-size:9px;
  }

  .monitor-actions {
    flex-direction:column;
    gap:4px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .monitor-ring {
    animation:none;
  }
}

/* Keep DayZToolShed text visible without logo */
.sidebar .brand {
  font-size:24px;
  padding-left:7px;
}

@media(max-width:850px) {
  .sidebar .brand {
    font-size:0;
  }
}

/* Back Home button - top right */
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.back-home-btn {
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border:1px solid rgba(0,217,255,.35);
  border-radius:6px;
  color:#00d9ff;
  background:rgba(0,217,255,.06);
  font-size:11px;
  font-weight:800;
  letter-spacing:.7px;
  text-decoration:none;
  transition:.2s ease;
}

.back-home-btn:hover {
  background:#00d9ff;
  color:#06131d;
  box-shadow:0 0 18px rgba(0,217,255,.3);
}