:root {
  --iot-tool-bg: var(--flat-surface, #ffffff);
  --iot-tool-surface: var(--flat-surface, #ffffff);
  --iot-tool-surface-hover: var(--flat-surface-hover, #f7f8fa);
  --iot-tool-border: var(--flat-border, #dbdcdd);
  --iot-tool-border-strong: var(--flat-border-strong, #c7c9cc);
  --iot-tool-text: var(--flat-text, #21242c);
  --iot-tool-muted: var(--flat-text-muted, #475774);
  --iot-tool-subtle: var(--flat-text-subtle, #646b7a);
  --iot-tool-accent: var(--flat-accent, #1865f2);
  --iot-tool-control-bg: var(--flat-control-bg, #f1f3f5);
  --iot-tool-control-hover: var(--flat-control-hover, #e7ebf0);
  --iot-tool-control-border: var(--flat-border-strong, #cfd4da);
  --iot-tool-focus-ring: color-mix(in srgb, var(--iot-tool-accent) 28%, transparent);
  --iot-tool-radius-sm: var(--flat-radius-md, 6px);
  --iot-tool-radius-md: var(--flat-radius-lg, 8px);
  --iot-tool-warning-bg: #fff3bf;
  --iot-tool-warning-border: #e2b400;
  --iot-tool-warning-text: #5c4300;
  --iot-tool-footer-bg: #2b3038;
  --iot-tool-footer-text: #d8dde6;
  --iot-tool-width: 1120px;
  --iot-tool-wide: 1400px;
}

.iot-tool-page {
  min-height: 100vh;
  background: var(--iot-tool-bg);
  color: var(--iot-tool-text);
}

.iot-tool-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 56px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--iot-tool-border);
  background: color-mix(in srgb, var(--iot-tool-surface) 96%, transparent);
}

.iot-tool-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--iot-tool-accent);
  font-weight: 800;
  text-decoration: none;
}

.iot-tool-nav-logo img {
  display: block;
  width: auto;
  height: 34px;
}

.iot-tool-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--iot-tool-border);
  border-radius: var(--iot-tool-radius-sm);
  background: var(--iot-tool-surface);
  color: var(--iot-tool-text);
  cursor: pointer;
}

.iot-tool-nav-toggle:hover {
  border-color: var(--iot-tool-border-strong);
  background: var(--iot-tool-surface-hover);
}

.iot-tool-nav-toggle:focus-visible {
  outline: 3px solid var(--iot-tool-focus-ring);
  outline-offset: 2px;
}

.iot-tool-nav-toggle-lines,
.iot-tool-nav-toggle-lines::before,
.iot-tool-nav-toggle-lines::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.iot-tool-nav-toggle-lines {
  position: relative;
}

.iot-tool-nav-toggle-lines::before,
.iot-tool-nav-toggle-lines::after {
  position: absolute;
  left: 0;
}

.iot-tool-nav-toggle-lines::before {
  top: -6px;
}

.iot-tool-nav-toggle-lines::after {
  top: 6px;
}

.iot-tool-logo-mark {
  align-items: center;
  background: var(--iot-tool-surface-hover);
  border: 1px solid var(--iot-tool-border);
  border-radius: var(--iot-tool-radius-sm);
  color: var(--iot-tool-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}

.iot-tool-nav-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.iot-tool-nav-center a,
.iot-tool-nav-right a {
  color: var(--iot-tool-muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.iot-tool-nav-center a:hover,
.iot-tool-nav-center a.iot-tool-nav-active,
.iot-tool-nav-right a:hover {
  color: var(--iot-tool-accent);
}

.iot-tool-nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.iot-tool-nav-login-btn {
  min-height: 34px;
  padding: 8px 16px;
  border: 1px solid var(--iot-tool-control-border);
  border-radius: var(--iot-tool-radius-sm);
  background: var(--iot-tool-control-bg);
  color: var(--iot-tool-text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.iot-tool-nav-login-btn:hover {
  border-color: var(--iot-tool-border-strong);
  background: var(--iot-tool-control-hover);
}

.iot-tool-hero {
  border-bottom: 1px solid var(--iot-tool-border);
  background: var(--iot-tool-surface);
  padding: 28px 24px 26px;
  text-align: center;
}

.iot-tool-hero-inner {
  max-width: var(--iot-tool-width);
  margin: 0 auto;
}

.iot-tool-hero--wide .iot-tool-hero-inner {
  max-width: var(--iot-tool-wide);
}

.iot-tool-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 8px;
  padding-left: 9px;
  border-left: 3px solid var(--iot-tool-accent);
  color: var(--iot-tool-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.iot-tool-title {
  margin: 0;
  color: var(--iot-tool-text);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.15;
}

.iot-tool-subtitle {
  max-width: 720px;
  margin: 10px auto 0;
  color: var(--iot-tool-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.iot-tool-meta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.iot-tool-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid var(--iot-tool-border);
  border-radius: 999px;
  background: var(--iot-tool-surface-hover);
  color: var(--iot-tool-muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.iot-tool-status-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid var(--iot-tool-warning-border);
  border-radius: 999px;
  background: var(--iot-tool-warning-bg);
  color: var(--iot-tool-warning-text);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.iot-tool-switcher {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.iot-tool-switcher a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid var(--iot-tool-border);
  border-left: 3px solid var(--tool-accent, var(--iot-tool-accent));
  border-radius: var(--iot-tool-radius-sm);
  background: var(--iot-tool-surface);
  color: var(--iot-tool-text);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.iot-tool-switcher a:hover,
.iot-tool-switcher a.iot-tool-switcher-active {
  border-color: var(--iot-tool-border-strong);
  border-left-color: var(--tool-accent, var(--iot-tool-accent));
  background: var(--iot-tool-surface-hover);
  color: var(--tool-accent, var(--iot-tool-accent));
}

.iot-tool-panel {
  border: 1px solid var(--iot-tool-border);
  border-radius: var(--iot-tool-radius-md);
  background: var(--iot-tool-surface);
  box-shadow: none;
}

.iot-tool-card {
  border: 1px solid var(--iot-tool-border);
  border-radius: var(--iot-tool-radius-md);
  background: var(--iot-tool-surface);
  box-shadow: none;
}

.iot-tool-card:hover {
  border-color: var(--iot-tool-border-strong);
  background: var(--iot-tool-surface-hover);
}

.iot-tool-button-primary,
.iot-tool-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--iot-tool-radius-sm);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

.iot-tool-button-primary {
  border: 1px solid var(--iot-tool-accent);
  background: var(--iot-tool-accent);
  color: var(--iot-tool-surface);
}

.iot-tool-button-secondary {
  border: 1px solid var(--iot-tool-control-border);
  background: var(--iot-tool-control-bg);
  color: var(--iot-tool-text);
}

.iot-tool-button-secondary:hover {
  border-color: var(--iot-tool-border-strong);
  background: var(--iot-tool-control-hover);
}

.iot-tool-footer {
  margin-top: auto;
  border-top: 1px solid var(--iot-tool-border);
  background: var(--iot-tool-footer-bg);
  color: var(--iot-tool-footer-text);
}

.iot-tool-footer-inner {
  max-width: var(--iot-tool-wide);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.iot-tool-footer a {
  color: var(--iot-tool-footer-text);
  text-decoration: none;
}

.iot-tool-footer a:hover {
  color: var(--iot-tool-surface);
}

@media (max-width: 760px) {
  .iot-tool-navbar {
    grid-template-columns: auto auto;
    gap: 10px;
    padding: 8px 12px;
  }

  .iot-tool-nav-logo {
    min-width: 0;
  }

  .iot-tool-nav-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .iot-tool-nav-center {
    display: none;
  }

  .iot-tool-nav-right {
    display: none;
  }

  .iot-tool-navbar[data-nav-open="true"] .iot-tool-nav-center {
    display: flex;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 0 0;
    overflow: visible;
  }

  .iot-tool-nav-center a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--iot-tool-radius-sm);
    font-size: 0.78rem;
  }

  .iot-tool-nav-center a:hover,
  .iot-tool-nav-center a:focus-visible,
  .iot-tool-nav-center a.iot-tool-nav-active {
    border-color: var(--iot-tool-border);
    background: var(--iot-tool-surface-hover);
  }

  .iot-tool-navbar[data-nav-open="true"] .iot-tool-nav-right {
    display: flex;
    grid-column: 1 / -1;
    justify-content: stretch;
    padding-top: 4px;
  }

  .iot-tool-nav-logo img {
    height: 28px;
  }

  .iot-tool-logo-mark {
    height: 28px;
    width: 28px;
  }

  .iot-tool-nav-login-btn {
    width: 100%;
    min-height: 30px;
    padding: 6px 12px;
    font-size: 0.78rem;
  }

  .iot-tool-hero {
    padding: 22px 16px;
  }

  .iot-tool-title {
    font-size: 1.65rem;
  }

  .iot-tool-subtitle {
    font-size: 0.92rem;
  }

  .iot-tool-switcher {
    justify-content: center;
    overflow-x: visible;
    flex-wrap: wrap;
    padding-bottom: 0;
  }

  .iot-tool-switcher a {
    white-space: nowrap;
  }
}