:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: rgba(13, 27, 45, 0.78);
  --panel-strong: rgba(15, 31, 51, 0.94);
  --line: rgba(148, 178, 207, 0.13);
  --text: #eef7ff;
  --muted: #7f97ac;
  --cyan: #4cdcf0;
  --green: #58e6a9;
  --orange: #ffad66;
  --blue: #5f8fff;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 2%, rgba(45, 119, 168, 0.16), transparent 32rem),
    linear-gradient(145deg, #07111f 0%, #081522 42%, #07101c 100%);
  font-family: Inter, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

.ambient {
  position: fixed;
  width: 25rem;
  height: 25rem;
  border-radius: 999px;
  filter: blur(110px);
  pointer-events: none;
  opacity: 0.13;
}
.ambient-one { top: -8rem; right: 5%; background: var(--cyan); }
.ambient-two { bottom: -12rem; left: -5rem; background: var(--blue); }

.shell {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
  padding: 44px 0 28px;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 30px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: #72dbea;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
}

.eyebrow-dot, .status-dot, .footer-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px rgba(88, 230, 169, .9);
}

h1, h2, p { margin: 0; }
h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.045em; font-weight: 680; }
.subtitle { margin-top: 11px; color: var(--muted); font-size: 14px; }

.header-meta { display: flex; align-items: center; gap: 15px; }
.status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 88px;
  padding: 9px 13px;
  border: 1px solid rgba(88, 230, 169, .2);
  border-radius: 99px;
  color: #9cf1c8;
  background: rgba(35, 116, 83, .12);
  font-size: 12px;
  font-weight: 650;
}
.status-pill.loading { color: #ffd19f; border-color: rgba(255,173,102,.2); background: rgba(120,77,35,.13); }
.status-pill.loading .status-dot { background: var(--orange); box-shadow: 0 0 15px rgba(255,173,102,.8); }
.status-pill.error { color: #ff9c9c; border-color: rgba(255,104,104,.22); background: rgba(120,35,35,.13); }
.status-pill.error .status-dot { background: #ff6868; box-shadow: 0 0 15px rgba(255,104,104,.8); }
#clock { color: #a9bac9; font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: .07em; }

.cloud-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(9, 23, 39, .64);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}
.cloud-control-copy, .cloud-actions { display: flex; align-items: center; gap: 9px; }
.cloud-control-copy > div { display: grid; gap: 3px; }
.cloud-control-copy b { color: #cbdce8; font-size: 12px; }
.cloud-control-copy small { color: #667f94; font-size: 10px; }
.cloud-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(255, 173, 102, .28);
  border-radius: 9px;
  color: var(--orange);
  background: rgba(255, 129, 42, .08);
  font-size: 9px;
  font-weight: 800;
}
.cloud-actions button, .cloud-actions select, dialog button, dialog select, dialog input[type="time"] {
  min-height: 32px;
  border: 1px solid rgba(133, 163, 204, .16);
  border-radius: 8px;
  padding: 6px 10px;
  color: #9bb0c2;
  background: rgba(13, 29, 49, .78);
  font: inherit;
  font-size: 10px;
}
.cloud-actions button, dialog button { cursor: pointer; }
.cloud-actions button:hover, dialog button:hover { border-color: rgba(76, 220, 240, .3); color: #e6f8ff; }
.primary-action { color: #dffff5 !important; border-color: rgba(88, 230, 169, .25) !important; background: rgba(38, 125, 89, .2) !important; }

dialog {
  width: min(430px, calc(100% - 32px));
  border: 1px solid rgba(148, 178, 207, .2);
  border-radius: 16px;
  padding: 0;
  color: var(--text);
  background: #0c1d30;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
dialog::backdrop { background: rgba(2, 8, 15, .72); backdrop-filter: blur(5px); }
#schedule-form { display: grid; gap: 18px; padding: 20px; }
.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dialog-head > div { display: grid; gap: 4px; }
.dialog-head b { font-size: 15px; }
.dialog-head small { color: var(--muted); font-size: 10px; }
.dialog-head > button { min-width: 32px; padding: 0; font-size: 18px; }
.toggle-row { display: flex; align-items: center; gap: 9px; color: #b7c9d7; font-size: 12px; }
.schedule-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.schedule-fields label { display: grid; gap: 7px; color: #70899e; font-size: 10px; }
.schedule-fields input, .schedule-fields select { width: 100%; }
.weekday-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.weekday-picker label { display: grid; place-items: center; gap: 5px; padding: 8px 2px; border: 1px solid var(--line); border-radius: 8px; color: #7d94a7; font-size: 10px; }
.dialog-actions { justify-content: flex-end; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 16px;
}

.metric-card, .chart-section {
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(17, 35, 56, .87), rgba(11, 24, 40, .74));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.metric-card {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  padding: 20px 21px 18px;
  border-radius: 18px;
}

.metric-card::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -58px;
  top: -62px;
  border-radius: 50%;
  background: currentColor;
  opacity: .075;
  filter: blur(8px);
}
.voltage-card { color: var(--cyan); }
.current-card { color: var(--green); }
.power-card { color: var(--orange); }
.sample-card { color: #9ab6ff; }

.metric-head { display: flex; align-items: center; gap: 10px; color: #91a7ba; font-size: 12px; font-weight: 620; }
.metric-icon {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid currentColor;
  border-radius: 8px;
  color: inherit;
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 800;
}
.pulse-icon { font-size: 8px; }
.metric-value, .sample-count { display: flex; align-items: baseline; gap: 7px; margin: 22px 0 16px; color: var(--text); }
.metric-value strong, .sample-count strong { font-size: clamp(31px, 3vw, 44px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.metric-value > span { color: currentColor; font-size: 13px; font-weight: 700; }
.sample-count span { color: #91a7ba; font-size: 12px; }
.metric-foot { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding-top: 12px; color: #657d92; font-size: 11px; }
.metric-foot b { overflow: hidden; color: #a9bbc9; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.chart-section { padding: 22px; border-radius: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-head h2 { font-size: 18px; letter-spacing: -.02em; }
.section-head p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.range-switcher { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,15,27,.46); }
.range-switcher button {
  appearance: none;
  border: 0;
  border-radius: 7px;
  padding: 7px 11px;
  color: #70889c;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  transition: .18s ease;
}
.range-switcher button:hover { color: #c8d7e3; }
.range-switcher button.active { color: #e9fbff; background: rgba(70,155,180,.2); box-shadow: inset 0 0 0 1px rgba(100,210,230,.12); }

.zoom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(148,178,207,.1);
  border-radius: 12px;
  background: rgba(5,15,27,.34);
  transition: border-color .2s ease, background .2s ease;
}
.zoom-toolbar.zoomed {
  border-color: rgba(95,143,255,.27);
  background: linear-gradient(90deg, rgba(48,79,145,.16), rgba(5,15,27,.38));
}
.zoom-summary { display: flex; min-width: 0; align-items: center; gap: 11px; }
.zoom-summary > div { display: grid; min-width: 0; gap: 3px; }
.zoom-summary b { overflow: hidden; color: #c7d7e8; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.zoom-summary small { overflow: hidden; color: #688096; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.zoom-symbol {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(121,154,236,.2);
  border-radius: 8px;
  color: #8aa8ff;
  background: rgba(66,94,163,.12);
  font-size: 15px;
}
.zoom-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.zoom-actions button {
  appearance: none;
  border: 1px solid rgba(133,163,204,.15);
  border-radius: 8px;
  padding: 7px 10px;
  color: #96abc0;
  background: rgba(13,29,49,.7);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  transition: .18s ease;
}
.zoom-actions button:hover { border-color: rgba(138,171,255,.3); color: #e5edff; background: rgba(47,73,132,.28); }
.zoom-actions button:focus-visible, .range-switcher button:focus-visible { outline: 2px solid rgba(92,220,240,.55); outline-offset: 2px; }

.charts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.chart-card { min-width: 0; border: 1px solid rgba(148,178,207,.1); border-radius: 14px; background: rgba(6,17,30,.42); overflow: hidden; }
.chart-title { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px 2px; color: #7f96a9; font-size: 10px; font-variant-numeric: tabular-nums; }
.chart-title > div { display: flex; align-items: center; gap: 7px; }
.chart-title b { color: #c9d8e4; font-size: 12px; }
.chart-title small { color: #536b80; font-size: 8px; letter-spacing: .13em; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.voltage-chart .legend-dot { color: var(--cyan); }
.current-chart .legend-dot { color: var(--green); }
.power-chart .legend-dot { color: var(--orange); }
.canvas-wrap { position: relative; width: 100%; height: 265px; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; user-select: none; }
canvas.is-selecting { cursor: ew-resize; touch-action: none; }

footer { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px 0; color: #526b80; font-size: 10px; }
footer span:first-child { display: flex; align-items: center; gap: 8px; }
.footer-light { display: inline-block; width: 5px; height: 5px; }

#toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10;
  max-width: min(380px, calc(100vw - 44px));
  padding: 12px 15px;
  border: 1px solid rgba(255,104,104,.24);
  border-radius: 10px;
  color: #ffd1d1;
  background: rgba(63, 18, 25, .92);
  box-shadow: var(--shadow);
  font-size: 12px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .2s ease;
}
#toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charts-grid { grid-template-columns: 1fr; }
  .canvas-wrap { height: 230px; }
}

@media (max-width: 650px) {
  .shell { width: min(100% - 26px, 1500px); padding-top: 25px; }
  .topbar, .section-head { align-items: flex-start; flex-direction: column; }
  .header-meta { width: 100%; justify-content: space-between; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 155px; }
  .chart-section { padding: 15px; }
  .range-switcher { width: 100%; overflow-x: auto; }
  .range-switcher button { flex: 1 0 auto; }
  .zoom-toolbar { align-items: flex-start; flex-direction: column; }
  .zoom-summary { width: 100%; }
  .zoom-summary b, .zoom-summary small { white-space: normal; }
  .zoom-actions { width: 100%; }
  .zoom-actions button { flex: 1; }
  footer { gap: 12px; align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
  .cloud-controls { align-items: flex-start; flex-direction: column; }
  .cloud-actions { width: 100%; flex-wrap: wrap; }
  .cloud-actions button, .cloud-actions select { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}