:root {
  --bg: #050b14;
  --panel: rgba(12, 24, 39, 0.82);
  --panel-strong: #0c1929;
  --line: rgba(143, 176, 209, 0.14);
  --text: #edf6ff;
  --muted: #8298ad;
  --cyan: #39d6d3;
  --blue: #4e8cff;
  --amber: #f6b94f;
  --red: #ff6c7a;
  --violet: #9d7cff;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

.chart-tooltip {
  position: fixed; z-index: 1000; pointer-events: none;
  width: max-content; max-width: min(360px, calc(100vw - 16px));
  max-height: calc(100vh - 16px); overflow: hidden; overflow-wrap: anywhere;
  padding: 12px 14px; border: 1px solid rgba(143, 176, 209, 0.5);
  border-radius: 10px; background: #102235; color: #edf6ff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  font: 500 13px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong, .chart-tooltip small { display: block; }
.chart-tooltip strong { font-weight: 600; }
.chart-tooltip small { margin: 2px 0 7px; color: #b5c8da; font-size: 11px; }
.chart-tooltip-row { display: flex; justify-content: space-between; gap: 20px; }
.chart-tooltip-row b { font-weight: 600; white-space: nowrap; }
svg[data-chart-key] { cursor: crosshair; }
svg[data-chart-key]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.chart-cursor { stroke: #edf6ff; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -10%, rgba(51, 121, 192, 0.18), transparent 30%),
    linear-gradient(145deg, #050b14 0%, #071321 55%, #050a12 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, a { font: inherit; }
a { color: inherit; }

.ambient {
  position: fixed;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.1;
  pointer-events: none;
}
.ambient-one { top: 16%; right: -20rem; background: var(--cyan); }
.ambient-two { bottom: -18rem; left: -18rem; background: var(--violet); }

.shell { width: min(1480px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 24px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.eyebrow { margin: 0 0 7px; color: var(--cyan); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.18em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.055em; line-height: 1; }
h1 span { color: var(--cyan); }
h2 { margin-bottom: 0; font-size: 1.22rem; letter-spacing: -0.025em; }
.subtitle, .section-heading > p { color: var(--muted); }
.subtitle { margin-bottom: 0; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.live-pill, .live-status {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 24, 38, 0.8);
  color: var(--muted);
}
.live-pill { display: flex; align-items: center; gap: 8px; padding: 0 13px; font-size: 0.72rem; letter-spacing: 0.08em; }
.live-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px currentColor; }
.live-status { display: flex; align-items: center; padding: 0 13px; min-width: 118px; font-size: 0.72rem; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.summary-card, .section-block {
  border: 1px solid var(--line);
  background: linear-gradient(155deg, rgba(16, 31, 48, 0.9), rgba(8, 18, 30, 0.82));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}
.summary-card { position: relative; min-height: 132px; overflow: hidden; border-radius: 15px; padding: 19px; }
.summary-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: currentColor; }
.summary-card span, .summary-card small { display: block; color: var(--muted); }
.summary-card span { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.summary-card strong { display: block; margin: 10px 0 6px; color: var(--text); font-size: 2rem; line-height: 1; }
.summary-card small { font-size: 0.76rem; }
.accent-cyan { color: var(--cyan); }.accent-amber { color: var(--amber); }.accent-red { color: var(--red); }.accent-violet { color: var(--violet); }

.integration-notice {
  margin: -8px 0 14px;
  border: 1px solid rgba(246, 185, 79, 0.28);
  border-radius: 11px;
  padding: 10px 13px;
  color: #f8d99c;
  background: rgba(90, 59, 16, 0.18);
  font-size: 0.73rem;
  line-height: 1.5;
}

.sms-report-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -8px 0 14px;
  border: 1px solid rgba(157, 124, 255, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(33, 24, 62, 0.38), rgba(8, 18, 30, 0.82));
}
.sms-report-strip .eyebrow { margin-bottom: 3px; color: var(--violet); }
.sms-report-strip strong, .sms-report-strip small { display: block; }
.sms-report-strip strong { font-size: 0.82rem; }
.sms-report-strip small { margin-top: 3px; color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.sms-report-strip button {
  flex: 0 0 auto;
  border: 1px solid rgba(157, 124, 255, 0.42);
  border-radius: 9px;
  padding: 9px 13px;
  color: var(--text);
  background: rgba(157, 124, 255, 0.14);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
}
.sms-report-strip button:hover:not(:disabled) { background: rgba(157, 124, 255, 0.24); }
.sms-report-strip button:disabled { cursor: not-allowed; opacity: 0.48; }

.section-block { border-radius: 17px; padding: 20px; margin-bottom: 14px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 17px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-heading > p { margin-bottom: 0; font-size: 0.78rem; }
.mikrotik-health-strip { display: grid; grid-template-columns: minmax(360px, 0.85fr) minmax(390px, 1.15fr); gap: 16px; align-items: center; margin-bottom: 12px; border: 1px solid rgba(57, 214, 211, 0.16); border-radius: 12px; padding: 11px 13px; background: rgba(5, 14, 24, 0.5); }
.mikrotik-health-values { display: grid; grid-template-columns: 1.25fr repeat(3, minmax(70px, 1fr)); gap: 10px; align-items: center; }
.mikrotik-health-values > div:not(.mikrotik-health-title) { border-left: 1px solid var(--line); padding-left: 10px; }
.mikrotik-health-values span, .mikrotik-health-values small { display: block; color: var(--muted); font-size: 0.62rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; }
.mikrotik-health-values strong { display: block; margin-top: 3px; color: var(--text); font-size: 0.9rem; white-space: nowrap; }
.mikrotik-health-title strong { margin-top: 0; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mikrotik-health-title small { margin-top: 3px; text-transform: none; letter-spacing: 0; }
.mikrotik-health-history { min-width: 0; }
.mikrotik-health-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: -2px; }
.mikrotik-health-metrics, .mikrotik-health-ranges { display: flex; gap: 3px; }
.mikrotik-health-controls button { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; color: #abc0d4; background: rgba(4, 12, 21, 0.72); cursor: pointer; font-size: 0.66rem; font-weight: 600; }
.mikrotik-health-controls button:hover { color: var(--text); }
.mikrotik-health-controls button.active { color: var(--text); border-color: rgba(57, 214, 211, 0.36); background: rgba(57, 214, 211, 0.12); }
.mikrotik-health-chart { display: block; width: 100%; height: 72px; }
.mikrotik-health-chart .grid { stroke: rgba(143, 176, 209, 0.14); stroke-width: 1; }
.mikrotik-health-chart .axis { fill: rgba(237, 246, 255, 0.92); font: 500 9px Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.02em; }
.mikrotik-health-chart .axis.time.end { text-anchor: end; }
.mikrotik-health-chart polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mikrotik-health-chart .cpu { stroke: var(--amber); }.mikrotik-health-chart .board { stroke: var(--cyan); }.mikrotik-health-chart .voltage { stroke: var(--violet); }
.mikrotik-health-chart circle.cpu { fill: var(--amber); }.mikrotik-health-chart circle.board { fill: var(--cyan); }.mikrotik-health-chart circle.voltage { fill: var(--violet); }
.mikrotik-health-legend { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 1px; color: #b5c8da; font-size: 0.66rem; font-weight: 500; }
.mikrotik-health-legend span { display: inline-flex; align-items: center; gap: 4px; }
.mikrotik-health-legend i { width: 7px; height: 7px; border-radius: 50%; }.mikrotik-health-legend i.cpu { background: var(--amber); }.mikrotik-health-legend i.board { background: var(--cyan); }.mikrotik-health-legend i.voltage { background: var(--violet); }
.interface-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.interface-card, .node-card, .service-card, .camera-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(5, 14, 24, 0.58);
}
.interface-card { padding: 15px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-head h3 { margin: 0; font-size: 0.94rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(57, 214, 211, 0.7); }
.status-dot.offline { background: var(--red); box-shadow: 0 0 12px rgba(255, 108, 122, 0.7); }
.status-dot.pending { background: var(--muted); box-shadow: none; }
.traffic-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0 9px; }
.traffic-values span { color: var(--muted); font-size: 0.69rem; text-transform: uppercase; }
.traffic-values strong { display: block; margin-top: 3px; font-size: 0.95rem; color: var(--text); }
.traffic-values div:last-child { text-align: right; }
.traffic-totals { display: flex; justify-content: space-between; gap: 12px; margin: -2px 0 8px; color: var(--muted); font-size: 0.64rem; }
.traffic-totals strong { color: var(--text); font-weight: 650; }
.traffic-windows { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0 12px; }
.traffic-window { border: 1px solid rgba(143, 176, 209, 0.12); border-radius: 10px; padding: 9px; background: rgba(143, 176, 209, 0.045); }
.traffic-window-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.traffic-window-head span { display: block; color: var(--text); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.traffic-window-head small { display: block; margin-top: 2px; color: #b5c8da; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.traffic-window-head em { color: #c4d4e4; font-size: 0.66rem; font-style: normal; font-weight: 500; white-space: nowrap; }
.traffic-window-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 5px; }
.traffic-window-values strong { display: block; color: var(--text); font-size: 0.68rem; font-weight: 750; line-height: 1.35; white-space: nowrap; }
.traffic-window-values b { color: var(--muted); font-size: 0.58rem; font-weight: 850; }
.traffic-chart { display: block; width: 100%; height: 86px; margin-top: 4px; }
.traffic-chart .grid { stroke: rgba(143, 176, 209, 0.16); stroke-width: 1; }
.traffic-chart .axis { fill: rgba(237, 246, 255, 0.94); font: 500 9px Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.02em; }
.traffic-chart .axis.end { text-anchor: end; }
.traffic-chart .rx-bar { fill: rgba(57, 214, 211, 0.78); }
.traffic-chart .tx-bar { fill: rgba(160, 125, 255, 0.76); }
.traffic-chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; color: rgba(231, 241, 251, 0.92); font-size: 0.67rem; font-weight: 500; }
.traffic-chart-foot span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.traffic-chart-foot i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; }
.rx-key { background: var(--cyan); }
.tx-key { background: var(--violet); }
.live-chart { border: 1px solid rgba(143, 176, 209, 0.12); border-radius: 10px; padding: 9px; background: rgba(57, 214, 211, 0.035); }
.live-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.live-chart-head span { display: block; color: var(--text); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.live-chart-head small { display: block; margin-top: 2px; color: rgba(226, 238, 250, 0.9); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.live-chart-head em { color: rgba(235, 244, 253, 0.94); font-size: 0.66rem; font-style: normal; font-weight: 500; white-space: nowrap; }
.sparkline { display: block; width: 100%; height: 86px; margin-top: 2px; overflow: visible; }
.sparkline .grid { stroke: rgba(143, 176, 209, 0.16); stroke-width: 1; }
.sparkline .axis { fill: rgba(237, 246, 255, 0.94); font: 500 9px Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.02em; }
.sparkline .axis.end { text-anchor: end; }
.sparkline .rx { fill: none; stroke: var(--cyan); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .tx { fill: none; stroke: var(--violet); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.86; }
.live-chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; color: rgba(231, 241, 251, 0.92); font-size: 0.67rem; font-weight: 500; }
.live-chart-foot span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.live-chart-foot i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; }

.split-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; }
.split-grid > .section-block { min-width: 0; }
.node-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.node-card { padding: 14px; }
.node-meta { margin: 5px 0 13px; color: var(--muted); font-size: 0.71rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric { margin-top: 10px; }
.metric-label { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--muted); font-size: 0.69rem; }
.bar { height: 5px; border-radius: 99px; overflow: hidden; background: rgba(143, 176, 209, 0.12); }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.guest-count { margin-top: 12px; color: var(--muted); font-size: 0.72rem; }
.guest-count strong { color: var(--text); }

.temperature-panel { margin-top: 14px; border: 1px solid rgba(143, 176, 209, 0.12); border-radius: 10px; padding: 11px; background: rgba(5, 14, 24, 0.42); }
.temperature-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.temperature-head strong { font-size: 0.75rem; }
.temperature-head small { color: var(--muted); font-size: 0.6rem; }
.temperature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.temperature-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 8px; padding: 8px; background: rgba(143, 176, 209, 0.055); }
.temperature-item span { color: var(--muted); font-size: 0.64rem; }
.temperature-item strong, .drive-temperature > strong { color: var(--amber); font: 800 0.73rem ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.drive-temperatures { display: grid; gap: 5px; margin-top: 7px; }
.drive-temperature { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(143, 176, 209, 0.08); padding-top: 6px; }
.drive-temperature span, .drive-temperature small { display: block; min-width: 0; }
.drive-temperature b { font-size: 0.66rem; }
.drive-temperature small { margin-top: 2px; color: var(--muted); font-size: 0.57rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.temperature-empty { color: var(--muted); font-size: 0.62rem; padding-top: 3px; }

.resource-history { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 14px; }
.resource-history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.resource-history-head strong, .resource-history-head small { display: block; }
.resource-history-head strong { font-size: 0.78rem; font-weight: 600; }
.resource-history-head small { margin-top: 2px; color: var(--muted); font-size: 0.62rem; }
.resource-history-controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.resource-views { display: flex; gap: 3px; border: 1px solid var(--line); border-radius: 9px; padding: 3px; background: rgba(4, 12, 21, 0.72); }
.resource-view { border: 0; border-radius: 6px; padding: 6px 9px; color: #b5c8da; background: transparent; cursor: pointer; font-size: 0.68rem; font-weight: 600; transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.resource-view:hover { color: var(--text); }
.resource-view.active { color: #140d03; background: var(--amber); box-shadow: 0 0 16px rgba(255, 181, 71, 0.2); }
.resource-ranges { display: flex; gap: 3px; border: 1px solid var(--line); border-radius: 9px; padding: 3px; background: rgba(4, 12, 21, 0.72); }
.resource-range { min-width: 40px; border: 0; border-radius: 6px; padding: 6px 8px; color: #b5c8da; background: transparent; cursor: pointer; font-size: 0.68rem; font-weight: 600; transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.resource-range:hover { color: var(--text); }
.resource-range.active { color: #041418; background: var(--cyan); box-shadow: 0 0 16px rgba(57, 214, 211, 0.22); }
.resource-chart-wrap { overflow: hidden; border: 1px solid rgba(143, 176, 209, 0.1); border-radius: 10px; padding: 7px 8px 2px; background: linear-gradient(180deg, rgba(57, 214, 211, 0.035), rgba(5, 14, 24, 0.16)); }
.resource-chart { display: block; width: 100%; height: 190px; overflow: visible; }
.resource-grid { fill: none; stroke: rgba(143, 176, 209, 0.12); stroke-width: 1; }
.resource-axis, .resource-time { fill: rgba(237, 246, 255, 0.92); font: 500 11px Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.02em; }
.resource-time.end { text-anchor: end; }
.resource-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.resource-line.cpu { stroke: var(--cyan); filter: drop-shadow(0 0 4px rgba(57, 214, 211, 0.24)); }
.resource-line.memory { stroke: var(--violet); filter: drop-shadow(0 0 4px rgba(157, 124, 255, 0.22)); }
.resource-line.temperature-0 { stroke: #ffb547; }.resource-line.temperature-1 { stroke: #39d6d3; }.resource-line.temperature-2 { stroke: #9d7cff; }
.resource-line.temperature-3 { stroke: #5bd38b; }.resource-line.temperature-4 { stroke: #ff6f91; }.resource-line.temperature-5 { stroke: #67a8ff; }
.temperature-marker { stroke: rgba(4, 12, 21, 0.9); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.temperature-marker.temperature-0, .temperature-key.temperature-0 { fill: #ffb547; background: #ffb547; }
.temperature-marker.temperature-1, .temperature-key.temperature-1 { fill: #39d6d3; background: #39d6d3; }
.temperature-marker.temperature-2, .temperature-key.temperature-2 { fill: #9d7cff; background: #9d7cff; }
.temperature-marker.temperature-3, .temperature-key.temperature-3 { fill: #5bd38b; background: #5bd38b; }
.temperature-marker.temperature-4, .temperature-key.temperature-4 { fill: #ff6f91; background: #ff6f91; }
.temperature-marker.temperature-5, .temperature-key.temperature-5 { fill: #67a8ff; background: #67a8ff; }
.resource-chart-foot { display: flex; align-items: center; gap: 13px; margin-top: 8px; color: #b5c8da; font-size: 0.69rem; font-weight: 500; }
.resource-chart-foot span { display: inline-flex; align-items: center; gap: 5px; }
.resource-chart-foot span:last-child { margin-left: auto; }
.resource-chart-foot i { width: 8px; height: 8px; border-radius: 50%; }
.resource-chart-foot b { color: var(--text); font-weight: 600; }
.cpu-key { background: var(--cyan); box-shadow: 0 0 7px rgba(57, 214, 211, 0.55); }
.memory-key { background: var(--violet); box-shadow: 0 0 7px rgba(157, 124, 255, 0.5); }
.temperature-chart-foot { flex-wrap: wrap; row-gap: 7px; }
.resource-history-empty { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 0.72rem; }

#upsPanel { display: grid; gap: 12px; }
.ups-card { border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: rgba(5, 14, 24, 0.58); }
.ups-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ups-head .card-head { min-width: 120px; }
.ups-head p { margin: 0; color: var(--muted); font-size: 0.7rem; text-align: right; }
.ups-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.ups-metric { border: 1px solid rgba(143, 176, 209, 0.12); border-radius: 10px; padding: 12px; background: rgba(143, 176, 209, 0.045); }
.ups-metric span, .ups-metric strong { display: block; }
.ups-metric span { color: var(--muted); font-size: 0.65rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; }
.ups-metric strong { margin-top: 5px; font-size: 1.05rem; }
.ups-history { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 14px; }
.ups-history-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ups-metric-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.ups-metric-button { border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; color: #b5c8da; background: rgba(4, 12, 21, 0.72); cursor: pointer; font-size: 0.69rem; font-weight: 600; }
.ups-metric-button:hover { color: var(--text); }
.ups-metric-button.active { color: var(--text); border-color: rgba(78, 140, 255, 0.45); background: rgba(78, 140, 255, 0.16); }
.ups-history-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ups-history-line.battery { stroke: var(--cyan); }
.ups-history-line.battery-voltage { stroke: #5bd38b; }
.ups-history-line.voltage { stroke: var(--blue); }
.ups-history-line.temperature { stroke: var(--amber); }
.ups-history-line.load { stroke: #ff6f91; }
.ups-history-line.power { stroke: var(--violet); }
.ups-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.ups-key.battery { background: var(--cyan); }.ups-key.battery-voltage { background: #5bd38b; }.ups-key.voltage { background: var(--blue); }.ups-key.temperature { background: var(--amber); }.ups-key.load { background: #ff6f91; }.ups-key.power { background: var(--violet); }

.stormdns-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); gap: 12px; }
.stormdns-card, .stormdns-log-card { min-width: 0; border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: rgba(5, 14, 24, 0.58); }
.stormdns-head, .stormdns-log-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stormdns-head strong, .stormdns-head small, .stormdns-log-head strong, .stormdns-log-head small { display: block; }
.stormdns-head small, .stormdns-log-head small { margin-top: 4px; color: var(--muted); font-size: 0.65rem; }
.stormdns-log-head small { text-align: right; }
.stormdns-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.stormdns-metrics div { min-width: 0; border: 1px solid rgba(143, 176, 209, 0.12); border-radius: 9px; padding: 10px; background: rgba(143, 176, 209, 0.045); }
.stormdns-metrics span, .stormdns-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stormdns-metrics span { color: var(--muted); font-size: 0.6rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; }
.stormdns-metrics strong { margin-top: 5px; font-size: 0.75rem; }
.stormdns-unlock { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto auto; align-items: center; gap: 7px; margin-top: 13px; }
.stormdns-unlock label { color: var(--muted); font-size: 0.65rem; font-weight: 700; }
.stormdns-unlock input { min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; color: var(--text); background: rgba(4, 12, 21, 0.82); outline: none; }
.stormdns-unlock input:focus { border-color: rgba(57, 214, 211, 0.5); }
.stormdns-unlock small { grid-column: 2 / -1; color: var(--muted); font-size: 0.61rem; }
.stormdns-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.stormdns-actions button, .stormdns-unlock button { border: 1px solid var(--line); border-radius: 7px; padding: 8px 11px; color: #bfd0df; background: rgba(12, 31, 48, 0.72); cursor: pointer; font-size: 0.68rem; font-weight: 700; }
.stormdns-actions button:hover:not(:disabled), .stormdns-unlock button:hover:not(:disabled) { color: var(--text); border-color: rgba(57, 214, 211, 0.4); background: rgba(57, 214, 211, 0.12); }
.stormdns-actions button:disabled, .stormdns-unlock button:disabled { cursor: not-allowed; opacity: 0.45; }
.stormdns-result { margin: 10px 0 0; color: var(--muted); font-size: 0.66rem; }
.stormdns-log-card pre { height: 250px; margin: 13px 0 0; overflow: auto; border: 1px solid rgba(143, 176, 209, 0.1); border-radius: 9px; padding: 11px; color: #aec5d8; background: rgba(2, 8, 14, 0.78); font: 0.65rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }

.sensor-list, .project-list { display: grid; gap: 8px; }
.sensor-list { gap: 5px; }
.sensor-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; background: rgba(5, 14, 24, 0.5); }
.sensor-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--cyan); }
.sensor-card.sensor-warning { border-color: rgba(246, 185, 79, 0.28); background: rgba(75, 49, 13, 0.13); }
.sensor-card.sensor-warning::before { background: var(--amber); }
.sensor-card.sensor-down { border-color: rgba(255, 108, 122, 0.5); background: linear-gradient(145deg, rgba(105, 23, 34, 0.32), rgba(35, 10, 18, 0.5)); box-shadow: inset 0 0 24px rgba(255, 108, 122, 0.05); }
.sensor-card.sensor-down::before { background: var(--red); box-shadow: 0 0 12px rgba(255, 108, 122, 0.65); }
.sensor-card.sensor-pending::before { background: var(--muted); }
.sensor-card-head, .sensor-title { display: flex; align-items: center; gap: 7px; }
.sensor-card-head { justify-content: space-between; }
.sensor-title { min-width: 0; }
.sensor-title strong { overflow: hidden; color: var(--text); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.sensor-id { flex: 0 0 auto; color: var(--muted); font: 700 0.62rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.sensor-context { margin: 2px 0 0 43px; overflow: hidden; color: var(--muted); font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.sensor-card .badge { padding: 3px 7px; font-size: 0.61rem; }
.sensor-reading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; border-radius: 7px; padding: 6px 7px; background: rgba(143, 176, 209, 0.055); }
.sensor-reading span { color: var(--muted); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sensor-reading strong { color: var(--text); font-size: 0.82rem; text-align: right; }
.sensor-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 4px; margin-top: 6px; }
.sensor-channel { min-width: 0; border: 1px solid rgba(143, 176, 209, 0.1); border-radius: 7px; padding: 5px 6px; background: rgba(143, 176, 209, 0.05); }
.sensor-channel span, .sensor-channel strong { display: block; }
.sensor-channel span { overflow: hidden; color: var(--muted); font-size: 0.54rem; font-weight: 650; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.sensor-channel strong { margin-top: 2px; color: var(--text); font-size: 0.71rem; line-height: 1.15; }
.sensor-warning .sensor-channel strong { color: #ffe0a3; }
.sensor-down .sensor-channel strong { color: #ffd7dc; }
.sensor-message { margin: 5px 1px 0; color: #c2d1df; font-size: 0.62rem; line-height: 1.3; overflow-wrap: anywhere; }
.sensor-check { margin: 3px 1px 0; color: var(--muted); font-size: 0.56rem; }
.project-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 2px 11px; }
.project-row:last-child { border-bottom: 0; }
.project-row strong { display: block; font-size: 0.79rem; }
.project-row small { color: var(--muted); font-size: 0.68rem; }
.badge { border: 1px solid rgba(57, 214, 211, 0.25); border-radius: 999px; padding: 4px 8px; color: var(--cyan); background: rgba(57, 214, 211, 0.08); font-size: 0.66rem; font-weight: 750; }
.badge.warning { color: var(--amber); border-color: rgba(246, 185, 79, 0.3); background: rgba(246, 185, 79, 0.09); }
.badge.down { color: #ffd7dc; border-color: rgba(255, 108, 122, 0.58); background: rgba(255, 108, 122, 0.2); box-shadow: 0 0 12px rgba(255, 108, 122, 0.12); }
.badge.pending { color: var(--muted); border-color: var(--line); background: rgba(143, 176, 209, 0.06); }

.service-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.service-card { display: flex; align-items: center; gap: 11px; min-height: 72px; padding: 12px; text-decoration: none; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease; }
.service-card:hover { transform: translateY(-2px); border-color: rgba(57, 214, 211, 0.38); background: rgba(12, 31, 48, 0.8); }
.service-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 9px; background: linear-gradient(145deg, rgba(78, 140, 255, 0.2), rgba(57, 214, 211, 0.12)); color: var(--cyan); font-size: 0.7rem; font-weight: 850; }
.service-copy { min-width: 0; }
.service-copy strong, .service-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-copy strong { font-size: 0.78rem; }
.service-copy small { margin-top: 4px; color: var(--muted); font-size: 0.66rem; }

.lower-grid { grid-template-columns: 0.85fr 1.15fr; }
.project-row { grid-template-columns: 1fr auto; }
.camera-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.camera-card { position: relative; min-height: 128px; overflow: hidden; padding: 13px; text-decoration: none; background: radial-gradient(circle at 50% 10%, rgba(46, 99, 134, 0.25), transparent 55%), #07111d; }
.camera-card::after { content: "SECURE PREVIEW"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: rgba(143, 176, 209, 0.34); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.13em; white-space: nowrap; }
.camera-card strong, .camera-card small { position: relative; z-index: 1; display: block; }
.camera-card small { margin-top: 4px; color: var(--muted); font-size: 0.67rem; }
.lock { position: absolute; right: 12px; top: 12px; color: var(--cyan); font-size: 0.75rem; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 12px 4px 0; color: #60768b; font-size: 0.7rem; }
.loading { color: var(--muted); font-size: 0.8rem; }

@media (max-width: 1100px) {
  .mikrotik-health-strip { grid-template-columns: 1fr; }
  .interface-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid, .lower-grid { grid-template-columns: 1fr; }
  .stormdns-layout { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .node-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 24px, 1480px); padding-top: 22px; }
  .topbar { flex-direction: column; }
  .sms-report-strip { align-items: stretch; flex-direction: column; }
  .sms-report-strip button { width: 100%; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-grid, .camera-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .mikrotik-health-values { grid-template-columns: repeat(3, 1fr); }
  .mikrotik-health-title { grid-column: 1 / -1; }
  .mikrotik-health-values > div:not(.mikrotik-health-title) { border-left: 0; padding-left: 0; }
  .resource-chart { height: 160px; }
  .ups-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ups-history-controls, .ups-head { align-items: flex-start; flex-direction: column; }
  .ups-head p { text-align: left; }
  .stormdns-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stormdns-unlock { grid-template-columns: 1fr 1fr; }
  .stormdns-unlock label, .stormdns-unlock input, .stormdns-unlock small { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .interface-grid, .service-grid { grid-template-columns: 1fr; }
  .traffic-windows { grid-template-columns: 1fr; }
  .summary-card { min-height: 115px; padding: 15px; }
  .summary-card strong { font-size: 1.7rem; }
  footer { flex-direction: column; gap: 4px; }
  .resource-history-head { align-items: flex-start; flex-direction: column; }
  .resource-chart-foot { align-items: flex-start; flex-direction: column; gap: 5px; }
  .resource-chart-foot span:last-child { margin-left: 0; }
  .ups-metrics { grid-template-columns: 1fr; }
  .stormdns-metrics { grid-template-columns: 1fr; }
  .mikrotik-health-strip { padding: 10px; }
  .mikrotik-health-controls, .mikrotik-health-legend { justify-content: flex-start; flex-wrap: wrap; }
}