:root {
  color-scheme: dark;
  --bg: #0c0d18;
  --panel: #151724;
  --panel-soft: #191b2b;
  --border: #242638;
  --text: #f0f1f8;
  --muted: #85889d;
  --cyan: #31e1e4;
  --purple: #ae4bf1;
  --pink: #e84fd5;
  --green: #6de5ad;
  font-family: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); }
button, input { font: inherit; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 232px; flex: 0 0 232px; padding: 27px 16px 18px; border-right: 1px solid #202131; display: flex; flex-direction: column; background: #10111d; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 38px; color: var(--text); font: 700 16px "Space Grotesk", Arial, sans-serif; text-decoration: none; letter-spacing: .3px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #0b111a; background: linear-gradient(145deg, #40f0df, #61b8f5); font: 700 19px "Space Grotesk", Arial, sans-serif; }
.brand-light { color: #8d90a5; font-weight: 500; }
.side-section, .eyebrow { color: #85889f; font-size: 9px; font-weight: 700; letter-spacing: 1.15px; }
.side-section { padding: 0 11px 12px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 9px; color: #a7a9ba; text-decoration: none; font-size: 12px; }
.nav-item.active { color: var(--cyan); background: #1b2030; box-shadow: inset 2px 0 var(--cyan); }
.nav-icon { font-size: 17px; }
.sidebar-bottom { margin-top: auto; }
.side-status { display: flex; align-items: center; gap: 8px; padding: 12px 10px; margin-bottom: 13px; border: 1px solid #282a3a; border-radius: 9px; color: #b7bac8; font-size: 10px; }
.status-dot, .online-label i, .live-pill i, .server-online i { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px #6de5ad55; }
.side-user { display: flex; align-items: center; gap: 9px; padding: 10px 8px 4px; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #45415e; border-radius: 50%; color: #d3a7ff; background: #27213c; font-size: 12px; }
.side-user b, .side-user small { display: block; font-size: 11px; }
.side-user small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.logout-button { width: 100%; padding: 11px 9px; display: flex; justify-content: space-between; border: 0; color: #999bad; background: transparent; cursor: pointer; font-size: 11px; }
.main-content { width: calc(100% - 232px); max-width: 1540px; margin: auto; padding: 32px 38px 20px; }
.topbar, .topbar-right, .section-heading, .card-heading, .card-foot, .chart-axis, .traffic-rates, footer { display: flex; align-items: center; justify-content: space-between; }
.topbar { margin-bottom: 23px; }
.eyebrow { margin: 0 0 7px; font-size: 8px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 600 24px "Space Grotesk", Arial, sans-serif; letter-spacing: -.5px; }
h2 { margin: 0; font: 600 14px "Space Grotesk", Arial, sans-serif; }
.topbar-right { gap: 17px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #315449; border-radius: 20px; color: var(--green); font-size: 8px; font-weight: 700; letter-spacing: .6px; }
.live-pill i { width: 5px; height: 5px; }
.updated { color: var(--muted); font-size: 10px; }
.updated b { margin-left: 4px; color: #d8d9e2; font-weight: 500; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 14px; }
.card { min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg, #181a29, #141622); box-shadow: 0 10px 35px #00000012; }
.summary-card { min-height: 142px; padding: 15px 16px 12px; }
.card-heading { color: #a7a9ba; font-size: 9px; font-weight: 600; letter-spacing: .65px; }
.card-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; font-size: 15px; }
.cyan { color: var(--cyan); background: #183137; }
.purple { color: #d480ff; background: #30213e; }
.pink { color: #f17cdc; background: #3a203b; }
.green { color: var(--green); background: #20372f; }
.summary-value { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 10px; }
.summary-value strong { font: 600 26px "Space Grotesk", Arial, sans-serif; letter-spacing: -1px; }
.summary-value > span { color: #a4a6b8; font-size: 10px; }
.summary-unit { font-size: 10px !important; }
.gauge-track { width: 100%; height: 5px; overflow: hidden; border-radius: 8px; background: #292b3b; }
.gauge-fill { height: 100%; width: 0; border-radius: inherit; transition: width .45s ease; }
.cyan-fill { background: linear-gradient(90deg, #23c6d9, #54f0dc); box-shadow: 0 0 10px #31e1e466; }
.purple-fill { background: linear-gradient(90deg, #7842ef, #c55bee); }
.pink-fill { background: linear-gradient(90deg, #ce4ae5, #ff73bb); }
.card-foot { margin-top: 9px; color: #85889d; font-size: 8px; }
.card-foot span:first-child { color: #c1c3cf; }
.awg-peer-line { display: flex; align-items: center; justify-content: space-between; height: 17px; color: #85889d; font-size: 8px; }
.online-label { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 8px; }
.online-label i { width: 5px; height: 5px; }
.chart-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .85fr); gap: 14px; margin-bottom: 14px; }
.chart-card { min-height: 260px; padding: 17px 18px 13px; }
.section-heading { align-items: flex-start; }
.section-heading .eyebrow { margin-bottom: 5px; }
.chart-legend { display: flex; align-items: center; gap: 6px; color: #a1a3b4; font-size: 9px; }
.legend-cyan, .legend-purple { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--cyan); }
.legend-purple { background: var(--purple); }
.chart-wrap { height: 174px; margin-top: 15px; }
.chart-wrap canvas, .traffic-chart canvas { display: block; width: 100%; height: 100%; }
.chart-axis { color: #777a90; font-size: 8px; }
.traffic-card { padding-right: 17px; }
.traffic-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 19px 0 11px; }
.traffic-totals div { min-width: 0; }
.traffic-label { display: block; color: #9a9daf; font-size: 8px; }
.traffic-label .legend-cyan, .traffic-label .legend-purple { margin: 0 5px 0 0; width: 6px; height: 6px; }
.traffic-totals strong { display: block; overflow: hidden; margin-top: 5px; color: #f0f1f8; font: 600 14px "Space Grotesk", Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.traffic-rates { justify-content: flex-start; gap: 16px; color: #7d8095; font-size: 8px; }
.traffic-rates span:first-child { color: var(--cyan); }
.traffic-rates span:last-child { color: #c47bff; }
.traffic-rates b { color: #d2d3dd; font-weight: 500; }
.traffic-chart { height: 91px; margin-top: 8px; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .85fr); gap: 14px; }
.cores-card, .info-card { min-height: 174px; padding: 17px 18px; }
.load-average { padding: 6px 8px; border: 1px solid #2b2d3d; border-radius: 6px; color: #9799ac; font-size: 8px; }
.load-average b { margin-left: 3px; color: #dddde7; font-weight: 500; }
.core-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px 16px; margin-top: 17px; }
.core-item { min-width: 0; }
.core-label { display: flex; justify-content: space-between; margin-bottom: 5px; color: #9395a9; font-size: 8px; }
.core-label b { color: #d5d6e0; font-weight: 500; }
.core-track { height: 4px; border-radius: 8px; background: #292b3b; overflow: hidden; }
.core-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #29cbdc, #3debcf); transition: width .4s ease; }
.info-card { padding-bottom: 10px; }
.server-online { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 8px; }
.server-online i { width: 5px; height: 5px; }
.info-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #252737; color: #888b9f; font-size: 9px; }
.info-row:last-child { border: 0; }
.info-row b { overflow: hidden; color: #d0d1dc; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
footer { margin-top: 15px; color: #777a8e; font-size: 8px; }
footer span:first-child { display: flex; align-items: center; gap: 6px; }
footer .status-dot { width: 5px; height: 5px; }
footer b { color: var(--cyan); }
.toast { position: fixed; right: 20px; bottom: 20px; padding: 11px 14px; transform: translateY(20px); opacity: 0; border: 1px solid #563346; border-radius: 9px; color: #ff9aab; background: #211622; font-size: 11px; transition: .2s ease; pointer-events: none; }
.toast.visible { transform: translateY(0); opacity: 1; }

.login-page { display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 35%, #202038 0%, #0c0d18 65%); }
.login-card { width: min(100%, 380px); padding: 34px; border: 1px solid #292b40; border-radius: 17px; background: #171927ed; box-shadow: 0 25px 80px #0005; }
.login-card .brand-mark { margin-bottom: 23px; }
.login-card .eyebrow { margin-bottom: 8px; color: var(--cyan); }
.login-card h1 { margin-bottom: 8px; font-size: 22px; }
.login-card > p.muted { margin-bottom: 24px; color: var(--muted); font-size: 11px; }
.login-card label { display: block; margin: 13px 0 6px; color: #c4c6d2; font-size: 10px; }
.login-card input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #303246; border-radius: 8px; outline: 0; color: var(--text); background: #10121e; font-size: 12px; }
.login-card input:focus { border-color: #3aaeb6; box-shadow: 0 0 0 3px #31e1e414; }
.primary-button { width: 100%; height: 42px; display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 0 13px; border: 0; border-radius: 8px; color: #09161b; background: linear-gradient(100deg, #37e0d9, #63d7cf); cursor: pointer; font-size: 11px; font-weight: 700; }
.primary-button span { font-size: 17px; }
.login-error { min-height: 13px; margin: 7px 0 0; color: #ff8196; font-size: 10px; }
.login-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 20px 0 0; color: #888b9f; font-size: 9px; }
.login-secure .status-dot { width: 5px; height: 5px; }

@media (max-width: 1050px) {
  .sidebar { width: 195px; flex-basis: 195px; }
  .main-content { width: calc(100% - 195px); padding: 27px 22px 18px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sidebar { width: 58px; flex-basis: 58px; padding: 20px 8px; }
  .brand { justify-content: center; padding: 0 0 32px; }
  .brand > span:not(.brand-mark), .side-section, .nav-item:not(.active), .nav-item.active { font-size: 0; }
  .brand-mark { flex: 0 0 34px; }
  .nav-item { justify-content: center; padding: 11px 5px; font-size: 0 !important; }
  .nav-icon { font-size: 18px; }
  .side-status { justify-content: center; padding: 10px 4px; font-size: 0; }
  .side-user { justify-content: center; padding: 7px 0; }
  .side-user > span:last-child, .logout-button { display: none; }
  .main-content { width: calc(100% - 58px); padding: 22px 13px 15px; }
  .chart-grid, .lower-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; }
  .topbar-right { align-items: flex-end; flex-direction: column; gap: 5px; }
  .updated { font-size: 8px; }
  h1 { font-size: 20px; }
  .summary-card { padding: 12px; min-height: 134px; }
  .summary-value strong { font-size: 23px; }
  .summary-grid { gap: 9px; }
  .chart-card { min-height: 244px; }
  .traffic-card { min-height: 237px; }
  .core-list { grid-template-columns: repeat(2, 1fr); }
  footer { align-items: flex-start; gap: 8px; font-size: 7px; }
}