:root {
  --ink-950: #071b2b;
  --ink-900: #0b2942;
  --ink-800: #123d5e;
  --ink-700: #1d5277;
  --ink-600: #3a6987;
  --ink-500: #66859a;
  --ink-300: #b9c8d2;
  --ink-200: #dbe4e9;
  --ink-100: #edf2f5;
  --ink-50: #f6f8fa;
  --white: #fff;
  --teal-700: #087c78;
  --teal-600: #0c9690;
  --teal-500: #20b7ae;
  --teal-300: #77d5ce;
  --teal-100: #dff6f3;
  --green: #14966f;
  --green-soft: #e4f6ef;
  --amber: #d78b18;
  --amber-soft: #fff3da;
  --red: #d14d4d;
  --red-soft: #fff0ef;
  --shadow-sm: 0 2px 8px rgba(11, 41, 66, .06);
  --shadow-md: 0 12px 32px rgba(11, 41, 66, .11);
  --shadow-lg: 0 28px 70px rgba(4, 25, 42, .22);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--ink-50);
  color: var(--ink-950);
  font-family: var(--font);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 100% 0, rgba(32, 183, 174, .08), transparent 34rem),
    var(--ink-50);
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

.noscript {
  padding: 12px 18px;
  background: var(--amber-soft);
  color: #80500a;
  text-align: center;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 13px;
  color: var(--teal-300);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.eyebrow--dark { color: var(--teal-700); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-900);
  text-decoration: none;
}

.brand__mark {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--teal-500), var(--teal-700));
  box-shadow: 0 9px 20px rgba(12, 150, 144, .22);
}

.brand__mark svg {
  width: 29px;
  color: var(--white);
  stroke-width: 0;
  fill: currentColor;
}

.brand__mark .brand__wave {
  fill: none;
  stroke: var(--ink-900);
  stroke-width: 3;
}

.brand strong,
.brand small { display: block; }

.brand strong {
  font-size: 18px;
  letter-spacing: .12em;
}

.brand small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}

.brand--light { color: var(--white); }
.brand--light small { color: rgba(255, 255, 255, .56); }

.login-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1.15fr) minmax(440px, .85fr);
}

.brand-panel {
  position: relative;
  display: flex;
  min-height: 100vh;
  padding: clamp(34px, 4.5vw, 60px);
  overflow: hidden;
  flex-direction: column;
  color: var(--white);
  background:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(145deg, #061827, #0b2942 52%, #0d3b55);
  background-size: 44px 44px, 44px 44px, auto;
}

.brand-panel::after {
  position: absolute;
  right: -150px;
  bottom: -160px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(119, 213, 206, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(119, 213, 206, .035), 0 0 0 140px rgba(119, 213, 206, .025);
  content: "";
}

.brand-panel__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.brand-panel__glow--one {
  top: 23%;
  right: 10%;
  width: 280px;
  height: 280px;
  background: rgba(32, 183, 174, .12);
  filter: blur(65px);
}

.brand-panel__glow--two {
  bottom: 7%;
  left: 8%;
  width: 220px;
  height: 220px;
  background: rgba(59, 129, 181, .13);
  filter: blur(60px);
}

.brand-panel > :not(.brand-panel__glow) { position: relative; z-index: 1; }

.brand-copy {
  max-width: 660px;
  margin: clamp(34px, 7vh, 76px) 0 clamp(24px, 4vh, 42px);
  padding-top: 0;
}

.brand-copy h1 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.brand-copy h1 span { color: var(--teal-300); }

.brand-copy__lead {
  max-width: 620px;
  margin: 27px 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: 16px;
  line-height: 1.9;
}

.signal-visual {
  display: grid;
  max-width: 720px;
  margin-bottom: 30px;
  align-items: center;
  grid-template-columns: 1fr 70px .8fr 70px 1fr;
}

.signal-card {
  position: relative;
  display: flex;
  min-height: 84px;
  padding: 16px;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 15px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);
}

.signal-card small,
.signal-card strong { display: block; }
.signal-card small { margin-bottom: 4px; color: rgba(255, 255, 255, .5); font-size: 10px; }
.signal-card strong { font-size: 13px; }

.signal-card__icon {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: rgba(119, 213, 206, .12);
  color: var(--teal-300);
}

.signal-card__icon svg { width: 23px; }

.signal-card--cloud {
  display: block;
  padding-left: 31px;
}

.live-dot {
  position: absolute;
  top: 20px;
  left: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-300);
  box-shadow: 0 0 0 5px rgba(119, 213, 206, .1);
  animation: pulse 2.2s infinite;
}

.signal-line {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.signal-line i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-300);
  opacity: .25;
  animation: travel 1.8s infinite;
}

.signal-line i:nth-child(2) { animation-delay: .3s; }
.signal-line i:nth-child(3) { animation-delay: .6s; }

.brand-points {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 30px;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  list-style: none;
}

.brand-points li { display: flex; align-items: center; gap: 8px; }
.brand-points span { color: var(--teal-300); font-weight: 800; letter-spacing: .08em; }

.login-panel {
  display: flex;
  min-height: 100vh;
  padding: 36px clamp(34px, 5vw, 80px) 25px;
  flex-direction: column;
  background: rgba(255, 255, 255, .78);
}

.login-panel__top {
  display: flex;
  justify-content: flex-end;
  gap: 23px;
}

.text-link {
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.text-link:hover { color: var(--teal-700); }

.login-card {
  width: min(100%, 430px);
  margin: auto;
  padding: 42px;
  border: 1px solid rgba(11, 41, 66, .08);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.login-card__heading {
  display: flex;
  align-items: center;
  gap: 15px;
}

.login-card__heading .eyebrow { margin-bottom: 6px; }
.login-card__heading h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; }

.login-card__icon {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 15px;
  color: var(--teal-700);
  background: var(--teal-100);
}
.login-card__icon svg { width: 27px; }

.login-card__hint {
  margin: 23px 0 27px;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.7;
}

.field {
  display: block;
  margin-bottom: 19px;
}

.field > span:first-child {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-800);
  font-size: 12px;
  font-weight: 800;
}

.field__control { position: relative; display: block; }

.field__control > svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 19px;
  color: var(--ink-500);
  transform: translateY(-50%);
}

.field input,
.field select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
  border-radius: 11px;
  outline: none;
  background: var(--ink-50);
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.field__control input { padding-left: 44px; padding-right: 58px; }
.field input:focus, .field select:focus {
  border-color: var(--teal-500);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(32, 183, 174, .11);
}

.field__action {
  position: absolute;
  top: 50%;
  right: 10px;
  padding: 6px;
  color: var(--ink-500);
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  font-size: 11px;
}

.field--compact { margin-bottom: 14px; }
.field--compact input, .field--compact select { height: 42px; background: var(--white); }

.button {
  display: inline-flex;
  min-height: 43px;
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ink-900);
  border: 0;
  border-radius: 11px;
  background: var(--ink-100);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, background .16s;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .6; cursor: wait; transform: none; }
.button svg { width: 19px; }

.button--primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--teal-600), var(--teal-700));
  box-shadow: 0 8px 20px rgba(12, 150, 144, .2);
}
.button--primary:hover { box-shadow: 0 11px 25px rgba(12, 150, 144, .28); }
.button--outline { border: 1px solid var(--ink-200); background: var(--white); }
.button--danger { color: var(--white); background: var(--red); }
.button--wide { width: 100%; }
.button--small { min-height: 36px; padding: 0 13px; font-size: 10px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-message {
  margin: 12px 0;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.55;
}
.form-message--error { color: #9e3030; background: var(--red-soft); }
.form-message--success { color: #0b7455; background: var(--green-soft); }

.login-card__support {
  display: flex;
  margin-top: 24px;
  padding-top: 21px;
  justify-content: center;
  gap: 7px;
  color: var(--ink-500);
  border-top: 1px solid var(--ink-100);
  font-size: 11px;
}
.login-card__support a { color: var(--teal-700); font-weight: 800; text-decoration: none; }

.public-footer {
  display: flex;
  padding-top: 28px;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-500);
  font-size: 10px;
}
.public-footer p { margin: 0; }
.public-footer div { display: flex; gap: 14px; }
.public-footer a { text-decoration: none; }
.public-footer a:hover { color: var(--teal-700); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}

@keyframes travel {
  0%, 100% { opacity: .18; transform: scale(.65); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* Dashboard */
.dashboard { min-height: 100vh; }

.dashboard-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  min-height: 72px;
  padding: 10px clamp(18px, 4vw, 54px);
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(11, 41, 66, .08);
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 5px 18px rgba(11, 41, 66, .035);
  backdrop-filter: blur(18px);
}

.dashboard-header .brand__mark { width: 39px; height: 39px; border-radius: 12px; }
.dashboard-header .brand strong { font-size: 16px; }
.dashboard-header__right { display: flex; align-items: center; gap: 13px; }

.connection-pill {
  display: inline-flex;
  padding: 8px 12px;
  align-items: center;
  gap: 7px;
  color: #147357;
  border-radius: 999px;
  background: var(--green-soft);
  font-size: 11px;
  font-weight: 800;
}
.connection-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.connection-pill--checking { color: #8a5b12; background: var(--amber-soft); }
.connection-pill--checking i { background: var(--amber); animation: pulse 1.6s infinite; }
.connection-pill--offline { color: #9e3030; background: var(--red-soft); }
.connection-pill--offline i { background: var(--red); }

.icon-button {
  display: inline-flex;
  min-height: 38px;
  padding: 0 13px;
  align-items: center;
  gap: 7px;
  color: var(--ink-700);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  background: var(--white);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.icon-button svg { width: 17px; }
.icon-button.is-spinning svg { animation: spin .8s linear infinite; }

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

.user-menu { position: relative; }
.user-menu__button {
  display: flex;
  padding: 3px 8px 3px 3px;
  align-items: center;
  gap: 9px;
  color: var(--ink-900);
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.user-menu__button:hover { background: var(--ink-100); }
.user-menu__button > svg { width: 15px; color: var(--ink-500); }

.avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--white);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--ink-800), var(--teal-700));
  font-size: 13px;
  font-weight: 800;
}
.user-menu__copy strong, .user-menu__copy small { display: block; text-align: left; }
.user-menu__copy strong { max-width: 130px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__copy small { margin-top: 2px; color: var(--ink-500); font-size: 9px; }

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 190px;
  padding: 8px;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.user-menu__dropdown a,
.user-menu__dropdown button {
  display: block;
  width: 100%;
  padding: 10px 11px;
  color: var(--ink-700);
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
}
.user-menu__dropdown a:hover,
.user-menu__dropdown button:hover { background: var(--ink-100); }
.user-menu__dropdown button { color: var(--red); }
.user-menu__dropdown .user-menu__normal-action { color: var(--ink-700); }

.dashboard-content {
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 47px 0 22px;
}

.page-heading,
.detail-heading {
  display: flex;
  margin-bottom: 28px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.page-heading h1,
.detail-heading h1 { margin: 0; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.04em; }
.page-heading > div > p:last-child,
.detail-heading > div > p:last-child { margin: 9px 0 0; color: var(--ink-500); font-size: 12px; }

.stats-grid {
  display: grid;
  margin-bottom: 24px;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}

.stat-card {
  position: relative;
  display: flex;
  min-height: 112px;
  padding: 21px;
  align-items: center;
  gap: 15px;
  overflow: hidden;
  border: 1px solid rgba(11, 41, 66, .07);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.stat-card::after {
  position: absolute;
  right: -17px;
  bottom: -36px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: .045;
}
.stat-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: currentColor;
}
.stat-card__icon svg { width: 23px; color: var(--white); }
.stat-card small, .stat-card strong { display: block; }
.stat-card small { margin-bottom: 3px; color: var(--ink-500); font-size: 10px; font-weight: 700; }
.stat-card strong { color: var(--ink-950); font-size: 28px; line-height: 1; }
.stat-card em { margin: 18px 0 0 -8px; color: var(--ink-500); font-size: 10px; font-style: normal; }
.stat-card--total { color: var(--ink-700); }
.stat-card--online { color: var(--green); }
.stat-card--delayed { color: var(--amber); }
.stat-card--offline { color: var(--ink-500); }

.dashboard-insights {
  display: grid;
  margin-bottom: 24px;
  gap: 14px;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
}

.insight-card {
  min-height: 238px;
  padding: 21px;
  border: 1px solid rgba(11, 41, 66, .07);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.insight-card__header {
  display: flex;
  margin-bottom: 17px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.insight-card__header .eyebrow { margin-bottom: 5px; font-size: 9px; letter-spacing: .16em; }
.insight-card__header h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }

.insight-count {
  display: grid;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  place-items: center;
  color: var(--green);
  border-radius: 11px;
  background: var(--green-soft);
  font-size: 15px;
  font-weight: 900;
}
.insight-count.has-alerts { color: var(--red); background: var(--red-soft); }

.alert-list { display: grid; gap: 7px; }
.alert-item {
  display: grid;
  min-height: 47px;
  padding: 9px 10px;
  align-items: center;
  gap: 10px;
  color: var(--ink-700);
  border: 1px solid var(--ink-100);
  border-radius: 11px;
  background: var(--ink-50);
  grid-template-columns: 8px minmax(0, 1fr) auto;
  text-decoration: none;
}
.alert-item:hover { border-color: var(--teal-300); background: var(--white); }
.alert-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.alert-item--critical i { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.alert-item strong, .alert-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-item strong { font-size: 10px; }
.alert-item small { margin-top: 3px; color: var(--ink-500); font-size: 9px; }
.alert-item b { color: var(--teal-700); font-size: 9px; }
.alert-list__more { margin: 8px 2px 0; color: var(--ink-500); font-size: 9px; }

.alert-empty {
  display: flex;
  min-height: 145px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: var(--ink-600);
  border: 1px dashed var(--ink-200);
  border-radius: 13px;
  background: linear-gradient(135deg, var(--green-soft), rgba(255, 255, 255, .7));
}
.alert-empty > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--white);
  border-radius: 50%;
  background: var(--green);
  font-size: 18px;
  font-weight: 900;
}
.alert-empty strong, .alert-empty small { display: block; }
.alert-empty strong { font-size: 11px; }
.alert-empty small { margin-top: 4px; color: var(--ink-500); font-size: 9px; }

.health-gauge {
  display: grid;
  width: 62px;
  height: 62px;
  place-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--white) 58%, transparent 60%),
    conic-gradient(var(--teal-600) calc(var(--health) * 1%), var(--ink-100) 0);
  text-align: center;
}
.health-gauge strong, .health-gauge small { display: block; }
.health-gauge strong { color: var(--ink-900); font-size: 13px; }
.health-gauge small { margin-top: 1px; color: var(--ink-500); font-size: 7px; }

.quick-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}
.quick-actions button, .quick-actions a {
  display: flex;
  min-height: 63px;
  padding: 10px;
  align-items: center;
  gap: 10px;
  color: var(--ink-800);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  background: var(--ink-50);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.quick-actions button:hover, .quick-actions a:hover { border-color: var(--teal-300); background: var(--white); }
.quick-actions__icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal-700);
  border-radius: 9px;
  background: var(--teal-100);
  font-size: 13px;
  font-weight: 900;
}
.quick-actions__icon--amber { color: #8b5911; background: var(--amber-soft); }
.quick-actions strong, .quick-actions small { display: block; }
.quick-actions strong { font-size: 10px; }
.quick-actions small { margin-top: 4px; color: var(--ink-500); font-size: 8px; }

.device-panel {
  min-height: 420px;
  border: 1px solid rgba(11, 41, 66, .07);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.device-toolbar {
  display: flex;
  min-height: 70px;
  padding: 13px 17px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--ink-100);
}

.filter-tabs { display: flex; gap: 5px; }
.filter-tab {
  padding: 9px 13px;
  color: var(--ink-500);
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.filter-tab span {
  display: inline-block;
  min-width: 21px;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ink-100);
  font-size: 9px;
}
.filter-tab.is-active { color: var(--teal-700); background: var(--teal-100); }
.filter-tab.is-active span { color: var(--white); background: var(--teal-600); }

.search { position: relative; width: min(100%, 280px); }
.search svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  color: var(--ink-500);
  transform: translateY(-50%);
}
.search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 39px;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  outline: none;
  background: var(--ink-50);
  font-size: 11px;
}
.search input:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(32, 183, 174, .1); }

.device-grid {
  display: grid;
  padding: 18px;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}

.device-card {
  position: relative;
  display: flex;
  min-height: 230px;
  padding: 18px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-radius: 15px;
  background: var(--white);
  box-shadow: 0 2px 4px rgba(11, 41, 66, .025);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.device-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.device-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--green);
  content: "";
}
.device-card--delayed::before { background: var(--amber); }
.device-card--offline::before { background: var(--ink-300); }
.device-card--fault::before { background: var(--red); }

.device-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.device-card__type { display: flex; align-items: center; gap: 10px; }
.device-card__type > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--teal-700);
  border-radius: 11px;
  background: var(--teal-100);
}
.device-card__type svg { width: 21px; }
.device-card h3 { margin: 0 0 4px; font-size: 15px; }
.device-card__sn { color: var(--ink-500); font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 10px; }
.device-card__badges { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.assignment-badge {
  padding: 5px 8px;
  color: #85540c;
  border-radius: 999px;
  background: var(--amber-soft);
  font-size: 8px;
  font-weight: 900;
}

.status-badge {
  display: inline-flex;
  padding: 6px 9px;
  align-items: center;
  gap: 5px;
  color: #137354;
  border-radius: 999px;
  background: var(--green-soft);
  font-size: 9px;
  font-weight: 800;
}
.status-badge::before { width: 6px; height: 6px; border-radius: 50%; background: var(--green); content: ""; }
.status-badge--delayed { color: #8b5911; background: var(--amber-soft); }
.status-badge--delayed::before { background: var(--amber); }
.status-badge--offline { color: var(--ink-600); background: var(--ink-100); }
.status-badge--offline::before { background: var(--ink-500); }
.status-badge--fault { color: #9e3030; background: var(--red-soft); }
.status-badge--fault::before { background: var(--red); }

.device-card__live {
  display: grid;
  margin-top: 17px;
  padding: 12px;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--teal-100), rgba(255, 255, 255, .8));
  grid-template-columns: auto auto minmax(0, 1fr);
}
.device-card__live > div { padding-right: 10px; border-right: 1px solid rgba(8, 124, 120, .15); }
.device-card__live small, .device-card__live strong { display: block; }
.device-card__live small { margin-bottom: 3px; color: var(--ink-500); font-size: 8px; }
.device-card__live strong { color: var(--ink-900); font-size: 11px; }
.device-card__live > span { overflow: hidden; color: var(--teal-700); font-size: 8px; font-weight: 800; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.device-card__live--fault { background: var(--red-soft); }
.device-card__live--fault > div { border-right-color: rgba(209, 77, 77, .14); }
.device-card__live--fault > span { color: #9e3030; }
.device-card__live--unknown { background: var(--ink-100); }
.device-card__live--unknown > div { border-right-color: var(--ink-200); }
.device-card__live--unknown > span { color: var(--ink-500); }

.device-card__meta {
  display: grid;
  margin: 22px 0 17px;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.device-card__meta div { min-width: 0; }
.device-card__meta small, .device-card__meta strong { display: block; }
.device-card__meta small { margin-bottom: 5px; color: var(--ink-500); font-size: 9px; }
.device-card__meta strong { overflow: hidden; color: var(--ink-700); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.device-card__foot {
  display: flex;
  margin-top: auto;
  padding-top: 14px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ink-100);
}
.device-card__foot span { color: var(--ink-500); font-size: 9px; }
.device-card__foot a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.device-card__foot svg { width: 14px; }
.device-card__disabled { color: var(--ink-500); font-size: 10px; font-weight: 800; }

.panel-state {
  display: flex;
  min-height: 350px;
  padding: 50px 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--ink-500);
  text-align: center;
}
.panel-state strong { margin-top: 13px; color: var(--ink-800); font-size: 15px; }
.panel-state p { max-width: 420px; margin: 7px 0 15px; font-size: 11px; line-height: 1.7; }
.panel-state__icon {
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  color: var(--red);
  border-radius: 50%;
  background: var(--red-soft);
  font-size: 22px;
  font-weight: 800;
}
.panel-state__icon--empty { color: var(--ink-500); background: var(--ink-100); }
.panel-state__icon svg { width: 24px; }

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--teal-100);
  border-top-color: var(--teal-600);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.dashboard-footer {
  display: flex;
  padding: 22px 5px 0;
  justify-content: space-between;
  gap: 18px;
  color: var(--ink-500);
  font-size: 9px;
}
.dashboard-footer > span:last-child { display: flex; gap: 16px; }
.dashboard-footer a { color: var(--ink-600); text-decoration: none; }
.dashboard-footer a:hover { color: var(--teal-700); }

/* Modal */
.modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
}
.modal__backdrop { position: absolute; inset: 0; background: rgba(3, 20, 33, .58); backdrop-filter: blur(5px); }
.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: calc(100vh - 40px);
  padding: 27px;
  overflow: auto;
  border-radius: 19px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.modal__dialog--wide { width: min(100%, 900px); }
.modal--nested { z-index: 120; }
.modal__header { display: flex; margin-bottom: 22px; justify-content: space-between; align-items: flex-start; }
.modal__header .eyebrow { margin-bottom: 6px; }
.modal__header h2 { margin: 0; font-size: 23px; }
.modal__close { padding: 0; color: var(--ink-500); border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-card { padding: 20px; border: 1px solid var(--ink-200); border-radius: 14px; background: var(--ink-50); }
.admin-card h3 { margin: 0; font-size: 16px; }
.admin-card > p { margin: 7px 0 19px; color: var(--ink-500); font-size: 10px; line-height: 1.6; }
.account-manager { margin-top: 18px; padding: 20px; border: 1px solid var(--ink-200); border-radius: 14px; }
.account-manager__header { display: flex; margin-bottom: 15px; align-items: flex-end; justify-content: space-between; gap: 16px; }
.account-manager__header h3 { margin: 0; font-size: 16px; }
.account-manager__header p { margin: 6px 0 0; color: var(--ink-500); font-size: 10px; line-height: 1.6; }
.account-manager__tools { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.search--compact { width: 190px; }
.search--compact input { height: 36px; }
.customer-tabs { display: flex; padding: 3px; border-radius: 9px; background: var(--ink-100); }
.customer-tabs button { min-height: 34px; padding: 0 12px; color: var(--ink-500); border: 0; border-radius: 7px; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.customer-tabs button.is-active { color: var(--teal-700); background: var(--white); box-shadow: var(--shadow-sm); }
.customer-tabs span { display: inline-grid; min-width: 18px; height: 18px; margin-left: 4px; place-content: center; border-radius: 99px; background: rgba(11, 41, 66, .08); font-size: 8px; }
.account-state { padding: 24px 12px; color: var(--ink-500); border-radius: 10px; background: var(--ink-50); text-align: center; font-size: 11px; }
.account-state--error { color: #9e3030; background: var(--red-soft); }
.account-state button { margin-left: 8px; padding: 0; color: inherit; border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; }
.account-table { overflow: hidden; border: 1px solid var(--ink-200); border-radius: 11px; }
.account-table__head, .account-row {
  display: grid;
  padding: 11px 13px;
  align-items: center;
  gap: 10px;
  grid-template-columns: minmax(150px, 1.5fr) .7fr .45fr 1fr .65fr minmax(220px, auto);
}
.account-table__head { color: var(--ink-500); background: var(--ink-50); font-size: 9px; font-weight: 800; }
.account-row { min-height: 62px; border-top: 1px solid var(--ink-100); font-size: 10px; }
.account-row__identity strong, .account-row__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-row__identity strong { color: var(--ink-800); font-size: 11px; }
.account-row__identity small { margin-top: 4px; color: var(--ink-500); }
.account-row__muted { color: var(--ink-500); }
.account-status { display: inline-flex; width: fit-content; padding: 5px 8px; color: #0b7455; border-radius: 99px; background: var(--green-soft); font-size: 9px; font-weight: 800; }
.account-status--disabled { color: var(--ink-600); background: var(--ink-100); }
.account-row__action { min-height: 32px; padding: 0 10px; color: var(--teal-700); border: 1px solid var(--teal-200); border-radius: 7px; background: var(--white); font-size: 9px; font-weight: 800; cursor: pointer; }
.account-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.account-row__action--danger { color: #a23b3b; border-color: #ebc1bd; }
.account-row__action:disabled { opacity: .5; cursor: wait; }
.customer-table { overflow: hidden; border: 1px solid var(--ink-200); border-radius: 11px; }
.customer-table__head, .customer-row {
  display: grid;
  padding: 11px 13px;
  align-items: center;
  gap: 10px;
  grid-template-columns: minmax(180px, 1.5fr) .55fr .55fr .7fr minmax(110px, auto);
}
.customer-table__head { color: var(--ink-500); background: var(--ink-50); font-size: 9px; font-weight: 800; }
.customer-row { min-height: 62px; border-top: 1px solid var(--ink-100); font-size: 10px; }
.customer-row__protected { color: var(--ink-400); font-size: 9px; font-weight: 800; }
.password-reset__intro { margin: -7px 0 20px; color: var(--ink-500); font-size: 11px; line-height: 1.7; }
.password-reset__intro strong { color: var(--ink-800); }
.password-reset__field { display: flex; align-items: center; border: 1px solid var(--ink-200); border-radius: 10px; background: var(--white); }
.password-reset__field:focus-within { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(15, 139, 130, .1); }
.password-reset__field input { width: 100%; height: 43px; padding: 0 12px; border: 0; outline: none; background: transparent; }
.password-reset__field button { margin-right: 10px; padding: 0; color: var(--teal-700); border: 0; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.password-reset__actions { display: grid; margin: 10px 0 4px; gap: 8px; grid-template-columns: 1fr 1fr; }
.modal__note { margin: 17px 0 0; color: var(--ink-500); font-size: 10px; }

.toast-region {
  position: fixed;
  z-index: 150;
  right: 20px;
  bottom: 20px;
  display: flex;
  width: min(360px, calc(100% - 40px));
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
}
.toast {
  padding: 13px 15px;
  color: var(--white);
  border-radius: 11px;
  background: var(--ink-900);
  box-shadow: var(--shadow-md);
  font-size: 11px;
  line-height: 1.55;
  animation: toast-in .25s ease-out;
}
.toast--error { background: #9e3030; }
.toast--success { background: #08765a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* Device detail */
.detail-page { background: #edf2f4; }
.detail-content {
  width: min(1220px, calc(100% - 40px));
  margin: 0 auto;
  padding: 39px 0 23px;
}
.detail-heading { align-items: center; }
.detail-heading .status-badge { padding: 8px 12px; font-size: 11px; }

.detail-alert {
  margin-bottom: 15px;
  padding: 12px 15px;
  color: #80500a;
  border: 1px solid #f0d08f;
  border-radius: 10px;
  background: var(--amber-soft);
  font-size: 11px;
}
.detail-alert--error { color: #9e3030; border-color: #efc0bd; background: var(--red-soft); }

.process-panel {
  overflow: hidden;
  border: 1px solid #c6d1d8;
  border-radius: 18px;
  background:
    linear-gradient(rgba(11, 41, 66, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 41, 66, .025) 1px, transparent 1px),
    #fff;
  background-size: 28px 28px;
  box-shadow: var(--shadow-sm);
}
.process-panel__head {
  display: flex;
  min-height: 68px;
  padding: 14px 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink-200);
  background: rgba(246, 248, 250, .92);
}
.process-panel__head > div { display: flex; align-items: center; gap: 12px; }
.process-panel__kicker { color: var(--ink-500); font-size: 10px; }
.process-panel__head strong { font-size: 15px; }
.pump-count { padding-left: 12px; color: var(--ink-500); border-left: 1px solid var(--ink-200); font-size: 9px; font-weight: 800; }
.fault-chip { padding: 7px 10px; color: var(--ink-500); border-radius: 8px; background: var(--ink-100); font-size: 9px; font-weight: 800; }
.fault-chip.is-fault { color: #9e3030; background: var(--red-soft); }

.process-flow {
  display: grid;
  min-height: 335px;
  padding: 38px 36px;
  align-items: center;
  grid-template-columns: 120px minmax(50px, 1fr) minmax(360px, 2.4fr) minmax(50px, 1fr) 130px;
}

.tank { position: relative; display: flex; align-items: center; flex-direction: column; }
.tank__label { margin-bottom: 9px; color: var(--ink-500); font-size: 9px; font-weight: 800; }
.tank__body {
  position: relative;
  width: 74px;
  height: 150px;
  overflow: hidden;
  border: 5px solid var(--ink-600);
  border-top-width: 3px;
  border-radius: 6px 6px 13px 13px;
  background: #e8f4f6;
  box-shadow: inset 0 0 18px rgba(11, 41, 66, .18);
}
.tank__body::before {
  position: absolute;
  z-index: 2;
  top: -5px;
  left: -7px;
  width: 78px;
  height: 13px;
  border: 3px solid var(--ink-600);
  border-radius: 50%;
  background: #d6e3e8;
  content: "";
}
.tank__body i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 62%;
  background: linear-gradient(rgba(65, 182, 202, .72), rgba(25, 134, 167, .8));
  transition: height .8s;
}
.tank__body i::before {
  position: absolute;
  top: -5px;
  left: -8px;
  width: 86px;
  height: 12px;
  border-radius: 50%;
  background: rgba(126, 218, 229, .8);
  content: "";
}
.tank__body b { position: absolute; z-index: 3; right: 6px; width: 9px; height: 1px; background: rgba(255, 255, 255, .7); }
.tank__body b:nth-of-type(1) { bottom: 25%; }
.tank__body b:nth-of-type(2) { bottom: 50%; }
.tank__body b:nth-of-type(3) { bottom: 75%; }
.reading { margin-top: 10px; text-align: center; }
.reading strong { font-size: 18px; }
.reading small { margin-left: 3px; color: var(--ink-500); font-size: 8px; }

.pipe {
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 1px solid #7f929e;
  background: linear-gradient(#8195a2, #e5ecef 32%, #a9bac4 72%, #6d808d);
}
.pipe i {
  position: absolute;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #57c5d1;
  opacity: .25;
}
.pipe i:nth-child(1) { left: 15%; }
.pipe i:nth-child(2) { left: 48%; }
.pipe i:nth-child(3) { left: 80%; }
.process-panel.is-running .pipe i { animation: pipe-flow 1.4s linear infinite; }
.process-panel.is-running .pipe i:nth-child(2) { animation-delay: .2s; }
.process-panel.is-running .pipe i:nth-child(3) { animation-delay: .4s; }
@keyframes pipe-flow { from { opacity: .2; transform: translateX(-20px); } 55% { opacity: 1; } to { opacity: .2; transform: translateX(20px); } }

.pump-bank { display: grid; gap: 13px; grid-template-columns: repeat(4, 1fr); }
.pump-bank__unknown {
  min-height: 118px;
  padding: 18px;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  border: 1px dashed var(--ink-300);
  border-radius: 13px;
  background: var(--ink-50);
  grid-column: 1 / -1;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}
.pump-bank__unknown:not([hidden]) { display: flex; }
.pump { display: flex; min-width: 0; padding: 15px 7px 12px; align-items: center; flex-direction: column; border: 1px solid var(--ink-200); border-radius: 13px; background: rgba(255, 255, 255, .9); }
.pump__motor {
  position: relative;
  width: 54px;
  height: 72px;
  margin-bottom: 10px;
  border: 2px solid #5f7482;
  border-radius: 8px 8px 17px 17px;
  background: linear-gradient(90deg, #81949f, #dce4e8 25%, #9caeb8 65%, #657b87);
  box-shadow: inset 7px 0 rgba(255, 255, 255, .18);
}
.pump__motor::before {
  position: absolute;
  top: -9px;
  left: 13px;
  width: 24px;
  height: 13px;
  border: 2px solid #5f7482;
  background: #aebdc5;
  content: "";
}
.pump__motor i {
  position: absolute;
  top: 29px;
  left: 14px;
  width: 22px;
  height: 22px;
  border: 3px solid #5f7482;
  border-radius: 50%;
}
.pump__motor i::before, .pump__motor i::after {
  position: absolute;
  top: 7px;
  left: 1px;
  width: 14px;
  height: 2px;
  background: #5f7482;
  content: "";
}
.pump__motor i::after { transform: rotate(90deg); }
.pump strong { font-size: 11px; }
.pump small { margin-top: 4px; color: var(--ink-500); font-size: 8px; }
.pump.is-active { border-color: #66c9a9; background: var(--green-soft); }
.pump.is-active .pump__motor { border-color: #158661; background: linear-gradient(90deg, #199b70, #6dd3ac 45%, #158661); }
.pump.is-active .pump__motor i { border-color: #fff; animation: spin 1s linear infinite; }
.pump.is-active .pump__motor i::before, .pump.is-active .pump__motor i::after { background: #fff; }
.pump.is-fault { border-color: #e8928c; background: var(--red-soft); }

.outlet-gauge { display: flex; align-items: center; flex-direction: column; text-align: center; }
.outlet-gauge__face {
  position: relative;
  display: grid;
  width: 105px;
  height: 105px;
  margin-bottom: 10px;
  place-content: center;
  border: 7px solid var(--ink-600);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #e9f0f3);
  box-shadow: var(--shadow-sm), inset 0 0 0 2px #c9d4da;
}
.outlet-gauge__face::before {
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--ink-300);
  border-radius: 50%;
  content: "";
}
.outlet-gauge__face i {
  position: absolute;
  z-index: 1;
  bottom: 48px;
  left: 47px;
  width: 3px;
  height: 32px;
  border-radius: 2px;
  background: var(--red);
  transform: rotate(-115deg);
  transform-origin: 50% 100%;
  transition: transform .6s;
}
.outlet-gauge__face i::after {
  position: absolute;
  bottom: -5px;
  left: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink-800);
  content: "";
}
.outlet-gauge__face b { position: relative; z-index: 2; margin-top: 21px; font-size: 17px; }
.outlet-gauge__face small { position: relative; z-index: 2; color: var(--ink-500); font-size: 7px; }
.outlet-gauge > strong { color: var(--ink-700); font-size: 10px; }

.reading-grid {
  display: grid;
  margin-top: 15px;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}
.reading-grid article {
  display: flex;
  min-height: 92px;
  padding: 18px;
  align-items: baseline;
  border: 1px solid var(--ink-200);
  border-radius: 13px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.reading-grid span { margin-right: auto; color: var(--ink-500); font-size: 9px; font-weight: 800; }
.reading-grid strong { color: var(--ink-900); font-size: 25px; }
.reading-grid small { margin-left: 4px; color: var(--ink-500); font-size: 8px; }

.trend-panel {
  margin-top: 15px;
  padding: 23px;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.trend-panel__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.trend-panel__header .eyebrow { margin-bottom: 5px; }
.trend-panel__header h2 { margin: 0; font-size: 20px; }
.trend-panel__header p { margin: 7px 0 0; color: var(--ink-500); font-size: 9px; }
.trend-panel__tools { display: flex; align-items: center; gap: 9px; }
.trend-ranges { display: flex; padding: 3px; border-radius: 9px; background: var(--ink-100); }
.trend-ranges button { min-height: 31px; padding: 0 11px; color: var(--ink-500); border: 0; border-radius: 7px; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.trend-ranges button.is-active { color: var(--teal-700); background: var(--white); box-shadow: var(--shadow-sm); }
.trend-summary { display: grid; margin: 18px 0 12px; gap: 9px; grid-template-columns: repeat(4, 1fr); }
.trend-summary > span { display: flex; min-height: 58px; padding: 11px 13px; align-items: baseline; border: 1px solid var(--ink-100); border-radius: 10px; background: var(--ink-50); }
.trend-summary small { margin-right: auto; color: var(--ink-500); font-size: 8px; font-weight: 800; }
.trend-summary strong { color: var(--ink-800); font-size: 18px; }
.trend-summary em { margin-left: 4px; color: var(--ink-500); font-size: 8px; font-style: normal; }
.trend-chart { position: relative; min-height: 310px; overflow: hidden; border: 1px solid var(--ink-100); border-radius: 12px; background: linear-gradient(180deg, #fbfdfe, #f5f8f9); }
.trend-chart canvas { display: block; max-width: 100%; }
.trend-chart__state { position: absolute; inset: 0; display: flex; padding: 30px; align-items: center; justify-content: center; color: var(--ink-500); text-align: center; font-size: 11px; }
.trend-chart__state--error { color: #9e3030; }
.trend-chart__state button { margin-left: 8px; padding: 0; color: inherit; border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; }
.trend-panel__note { margin: 11px 0 0; color: var(--ink-500); font-size: 9px; }

.control-panel {
  margin-top: 15px;
  padding: 23px;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.control-panel__heading { display: flex; margin-bottom: 19px; align-items: flex-end; justify-content: space-between; gap: 18px; }
.control-panel__heading .eyebrow { margin-bottom: 5px; }
.control-panel__heading h2 { margin: 0; font-size: 20px; }
.control-panel__heading > p { margin: 0; color: var(--ink-500); font-size: 9px; }
.control-grid { display: grid; gap: 11px; grid-template-columns: repeat(3, 1fr); }
.control-button {
  display: grid;
  min-height: 100px;
  padding: 15px;
  align-content: center;
  justify-items: start;
  color: var(--white);
  border: 0;
  border-radius: 13px;
  text-align: left;
  cursor: pointer;
}
.control-button span { margin-bottom: 8px; font-size: 17px; }
.control-button strong { font-size: 13px; }
.control-button small { margin-top: 3px; opacity: .7; font-size: 8px; }
.control-button--run { background: linear-gradient(145deg, #14966f, #08765a); }
.control-button--stop { background: linear-gradient(145deg, #d85c57, #a93b3b); }
.control-button--refresh { color: var(--ink-700); border: 1px solid var(--ink-200); background: var(--ink-50); }
.control-button:disabled { opacity: .48; cursor: not-allowed; }

.set-pressure {
  display: flex;
  padding: 15px 17px;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--ink-200);
  border-radius: 13px;
  background: var(--ink-50);
}
.set-pressure label { margin-right: auto; }
.set-pressure label span, .set-pressure label small { display: block; }
.set-pressure label span { color: var(--ink-800); font-size: 11px; font-weight: 800; }
.set-pressure label small { margin-top: 4px; color: var(--ink-500); font-size: 8px; }
.set-pressure > div { display: flex; align-items: center; gap: 6px; }
.set-pressure input { width: 72px; height: 39px; padding: 0 7px; border: 1px solid var(--ink-200); border-radius: 8px; outline: none; text-align: center; }
.set-pressure > div > span { color: var(--ink-500); font-size: 8px; }
.set-pressure button { height: 39px; padding: 0 12px; color: var(--white); border: 0; border-radius: 8px; background: var(--teal-700); font-size: 9px; font-weight: 800; cursor: pointer; }
.control-panel__note { margin: 15px 0 0; color: var(--ink-500); font-size: 9px; line-height: 1.7; }

.confirm-dialog {
  width: min(420px, calc(100% - 30px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.confirm-dialog::backdrop { background: rgba(3, 20, 33, .58); backdrop-filter: blur(4px); }
.confirm-dialog form { padding: 27px; text-align: center; }
.confirm-dialog__icon { display: grid; width: 49px; height: 49px; margin: 0 auto 14px; place-items: center; color: #8b5911; border-radius: 50%; background: var(--amber-soft); font-size: 20px; font-weight: 900; }
.confirm-dialog h2 { margin: 0; font-size: 20px; }
.confirm-dialog p { margin: 10px 0 23px; color: var(--ink-500); font-size: 11px; line-height: 1.7; }
.confirm-dialog form > div { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }

/* Download */
.download-page {
  color: var(--white);
  background:
    radial-gradient(circle at 15% 15%, rgba(32, 183, 174, .19), transparent 25rem),
    radial-gradient(circle at 90% 80%, rgba(40, 119, 169, .18), transparent 30rem),
    var(--ink-950);
}
.download-shell { display: flex; width: min(1080px, calc(100% - 36px)); min-height: 100vh; margin: 0 auto; padding: 36px 0 22px; flex-direction: column; }
.download-card {
  width: min(100%, 480px);
  margin: auto;
  padding: 42px;
  color: var(--ink-950);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.download-card__app-icon { display: grid; width: 88px; height: 88px; margin: -6px auto 24px; place-items: center; border-radius: 25px; background: linear-gradient(145deg, var(--ink-900), var(--teal-700)); box-shadow: 0 16px 30px rgba(11, 41, 66, .24); }
.download-card__app-icon svg { width: 55px; fill: var(--teal-300); stroke-width: 0; }
.download-card__app-icon path:last-child { fill: none; stroke: var(--white); stroke-width: 3; }
.download-card h1 { margin: 0; font-size: 29px; }
.download-card > p:not(.eyebrow) { margin: 12px auto 24px; color: var(--ink-500); font-size: 12px; line-height: 1.8; }
.download-card__meta { display: grid; margin-bottom: 20px; padding: 14px; border-radius: 12px; background: var(--ink-50); grid-template-columns: repeat(3, 1fr); }
.download-card__meta span + span { border-left: 1px solid var(--ink-200); }
.download-card__meta small, .download-card__meta strong { display: block; }
.download-card__meta small { margin-bottom: 5px; color: var(--ink-500); font-size: 9px; }
.download-card__meta strong { font-size: 13px; }
.download-card__release-notes { margin: -5px 0 15px; padding: 10px 12px; color: var(--ink-600); border-radius: 9px; background: var(--ink-50); font-size: 9px; line-height: 1.6; text-align: left; }
.download-card .button.is-disabled { opacity: .58; pointer-events: none; cursor: not-allowed; }
.download-card__error { margin: 12px 0 0; padding: 10px; color: #9e3030; border-radius: 9px; background: var(--red-soft); font-size: 9px; line-height: 1.6; }
.download-card__error button { margin-left: 5px; padding: 0; color: inherit; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.download-card .download-card__tip { margin: 14px 0; font-size: 9px; }
.download-card__links { display: flex; justify-content: center; gap: 18px; }
.download-card__links a { color: var(--teal-700); font-size: 10px; font-weight: 800; text-decoration: none; }
.public-footer--light { color: rgba(255, 255, 255, .5); }
.public-footer--light a:hover { color: var(--teal-300); }

@media (max-width: 1050px) {
  .login-shell { grid-template-columns: 1fr 430px; }
  .brand-panel { padding: 42px; }
  .brand-copy h1 { font-size: 50px; }
  .signal-visual { grid-template-columns: 1fr 42px .9fr 42px 1fr; }
  .brand-points { gap: 15px; flex-wrap: wrap; }
  .process-flow { padding: 35px 20px; grid-template-columns: 100px 35px minmax(330px, 1fr) 35px 110px; }
  .control-grid { grid-template-columns: 1fr 1fr 1fr; }
  .set-pressure { grid-column: 1 / -1; }
  .dashboard-insights { grid-template-columns: 1fr; }
}

@media (min-width: 821px) and (max-height: 820px) {
  .brand-panel { padding-top: 28px; padding-bottom: 28px; }
  .brand-copy { margin: 28px 0 22px; }
  .brand-copy h1 { font-size: clamp(38px, 4vw, 56px); }
  .brand-copy__lead { margin-top: 18px; font-size: 14px; line-height: 1.65; }
  .signal-visual { margin-bottom: 22px; }
  .signal-card { min-height: 70px; padding: 12px; }
  .brand-points { font-size: 10px; }
}

@media (max-width: 820px) {
  .login-shell { display: block; }
  .brand-panel { min-height: auto; padding: 28px 24px 43px; }
  .brand-copy { margin: 75px 0 28px; padding: 0; }
  .brand-copy h1 { font-size: clamp(38px, 10vw, 56px); }
  .brand-copy__lead { font-size: 14px; }
  .signal-visual { grid-template-columns: 1fr 30px 1fr; }
  .signal-card--cloud, .signal-line:nth-of-type(2) { display: none; }
  .brand-points { display: none; }
  .login-panel { min-height: auto; padding: 25px 20px; }
  .login-card { margin: 36px auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .process-flow { grid-template-columns: 85px 20px 1fr 20px 95px; padding: 28px 13px; }
  .pump-bank { grid-template-columns: 1fr 1fr; }
  .pump:nth-of-type(n+3) { display: none; }
  .reading-grid { grid-template-columns: 1fr 1fr; }
  .trend-panel__header { align-items: stretch; flex-direction: column; }
  .trend-panel__tools { justify-content: space-between; }
  .admin-grid { grid-template-columns: 1fr; }
  .account-manager__header { align-items: stretch; flex-direction: column; }
  .account-manager__tools { width: 100%; }
  .search--compact { width: 100%; }
  .account-table__head { display: none; }
  .customer-table__head { display: none; }
  .customer-row { padding: 14px; grid-template-columns: 1fr 1fr; }
  .customer-row .account-row__identity { grid-column: 1 / -1; }
  .account-row { padding: 14px; grid-template-columns: 1fr 1fr; }
  .account-row__identity { grid-column: 1 / -1; }
  .account-row__actions { justify-self: end; }
}

@media (max-width: 600px) {
  .dashboard-header { min-height: 62px; padding: 8px 13px; }
  .dashboard-header .brand small, .user-menu__copy, .connection-pill, .icon-button span { display: none; }
  .dashboard-header__right { gap: 6px; }
  .icon-button { width: 37px; padding: 0; justify-content: center; }
  .dashboard-content, .detail-content { width: calc(100% - 24px); padding-top: 26px; }
  .page-heading, .detail-heading { align-items: flex-start; }
  .page-heading .button { min-width: 43px; padding: 0 12px; font-size: 0; }
  .page-heading .button svg { margin: 0; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 91px; padding: 14px; gap: 10px; }
  .stat-card__icon { width: 39px; height: 39px; border-radius: 11px; }
  .stat-card__icon svg { width: 19px; }
  .stat-card strong { font-size: 23px; }
  .device-toolbar { align-items: stretch; flex-direction: column; gap: 9px; }
  .search { width: 100%; }
  .device-grid { padding: 11px; grid-template-columns: 1fr; }
  .insight-card { padding: 16px; }
  .quick-actions { grid-template-columns: 1fr; }
  .device-card__live { grid-template-columns: 1fr 1fr; }
  .device-card__live > span { grid-column: 1 / -1; text-align: left; }
  .dashboard-footer { flex-direction: column; }
  .dashboard-footer > span:last-child { flex-wrap: wrap; }
  .process-flow { grid-template-columns: 65px 14px 1fr 14px 75px; min-height: 270px; padding: 25px 8px; }
  .tank__body { width: 54px; height: 120px; }
  .tank__body::before { width: 59px; }
  .pump-bank { gap: 5px; }
  .pump { padding: 10px 3px; }
  .pump__motor { width: 42px; height: 60px; }
  .pump__motor i { top: 24px; left: 9px; }
  .outlet-gauge__face { width: 72px; height: 72px; border-width: 5px; }
  .outlet-gauge__face i { bottom: 32px; left: 31px; height: 22px; }
  .outlet-gauge__face b { margin-top: 15px; font-size: 13px; }
  .reading-grid { gap: 8px; }
  .reading-grid article { min-height: 78px; padding: 13px; }
  .reading-grid strong { font-size: 20px; }
  .trend-panel { padding: 16px; }
  .trend-panel__tools { align-items: stretch; flex-direction: column; }
  .trend-ranges { display: grid; grid-template-columns: repeat(4, 1fr); }
  .trend-ranges button { padding: 0 6px; }
  .trend-summary { grid-template-columns: 1fr 1fr; }
  .trend-chart { min-height: 250px; }
  .control-panel { padding: 16px; }
  .control-panel__heading { align-items: flex-start; flex-direction: column; }
  .control-grid { grid-template-columns: 1fr 1fr; }
  .control-button--refresh { grid-column: 1 / -1; min-height: 76px; }
  .set-pressure { grid-column: 1 / -1; align-items: flex-start; flex-direction: column; }
  .set-pressure > div { width: 100%; }
  .set-pressure button { flex: 1; }
  .login-card { padding: 30px 24px; }
  .modal__dialog { max-height: calc(100vh - 18px); padding: 20px; }
  .account-manager { padding: 14px; }
  .account-manager__tools { align-items: stretch; flex-direction: column; }
  .customer-tabs { width: 100%; }
  .customer-tabs button { flex: 1; }
  .customer-row { grid-template-columns: 1fr; }
  .customer-row .account-row__identity { grid-column: auto; }
  .account-row { grid-template-columns: 1fr; }
  .account-row__identity { grid-column: auto; }
  .account-row__actions { width: 100%; justify-self: stretch; }
  .account-row__action { flex: 1; }
  .password-reset__actions { grid-template-columns: 1fr; }
  .public-footer { align-items: center; flex-direction: column; text-align: center; }
  .public-footer div { flex-wrap: wrap; justify-content: center; }
  .download-card { padding: 34px 24px; }
  .download-card__meta { padding: 11px 7px; }
  .download-card__meta small { font-size: 8px; }
  .download-card__meta strong { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.page-heading__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}