html, body {
  background: #f6faf8;
  color: #102824;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: #134e4a;
}

.hidden {
  display: none !important;
}

.site-header,
.admin-brand,
.panel-brand,
.brand,
.nav-links,
.hero,
.hero-actions,
.hero-points,
.stats-bar,
.features,
.impact-grid,
.steps,
.hardware-grid,
.pricing-grid,
.pricing-grid-4,
.cta-inner,
.actions,
.quick-links,
.filter-bar,
.panel-layout,
.panel-header,
.admin-header,
.stat-row,
.card-head,
.device-item,
.list-item-inline,
.duty-toolbar,
.door-modal-grid,
.row,
.row-2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.nav-links,
.hero-actions,
.hero-points,
.stats-bar,
.features,
.impact-grid,
.steps,
.hardware-grid,
.pricing-grid,
.pricing-grid-4,
.actions,
.quick-links,
.filter-bar,
.stat-row,
.row,
.row-2 {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.site-header,
.admin-brand,
.panel-brand,
.panel-header,
.admin-header,
.card-head,
.device-item,
.list-item-inline,
.duty-toolbar,
.cta-inner {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.site-header,
.brand,
.nav-links,
.hero-actions,
.hero-points,
.admin-brand,
.panel-brand,
.panel-header,
.admin-header,
.card-head,
.actions,
.quick-links,
.filter-bar,
.device-item,
.list-item-inline {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.hero > *,
.features > *,
.impact-grid > *,
.steps > *,
.hardware-grid > *,
.pricing-grid > *,
.pricing-grid-4 > *,
.stat-row > *,
.row > *,
.row-2 > * {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 260px;
  flex: 1 1 260px;
}

.panel-layout {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.panel-nav {
  width: 220px;
  -webkit-flex: 0 0 220px;
  flex: 0 0 220px;
}

.panel-main {
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.site-header {
  padding: 24px;
}

.brand-icon,
.admin-avatar,
.panel-avatar,
.feature-card .icon,
.step-num {
  background: #007566;
  color: #ffffff;
}

.btn,
button,
input,
select,
textarea {
  font: inherit;
}

.btn,
button.btn {
  border-radius: 8px;
  border: 1px solid #d9e8e2;
  cursor: pointer;
}

.btn-primary {
  background: #007566;
  color: #ffffff;
  border-color: #007566;
}

.btn-secondary,
.btn-ghost,
.btn-outline {
  background: #ffffff;
  color: #102824;
  border-color: #d9e8e2;
}

.card,
.auth-card,
.feature-card,
.impact-card,
.step,
.hardware-card,
.pricing-cell,
.stat-item,
.stat-card,
.device-item,
.list-item,
.panel-nav,
.admin-login-card {
  background: #ffffff;
  border: 1px solid #d9e8e2;
  border-radius: 8px;
}

input,
select,
textarea {
  background: #ffffff;
  color: #102824;
  border: 1px solid #d9e8e2;
  border-radius: 8px;
}

.msg-ok,
.badge-ok,
.device-badge.online {
  color: #166534;
}

.msg-err,
.badge-err,
.text-err {
  color: #991b1b;
}

.muted,
.muted-sm,
.muted-xs,
.device-meta,
.tab-intro,
.subtitle {
  color: #62746f;
}

.auth-main,
.wrap {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.auth-main {
  padding: 24px;
}

.auth-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px;
}

@media (max-width: 760px) {
  .site-header,
  .admin-brand,
  .panel-brand,
  .panel-layout,
  .panel-header,
  .admin-header,
  .hero,
  .cta-inner {
    display: block;
  }

  .panel-nav {
    width: auto;
    margin-bottom: 16px;
  }

  .nav-btn {
    display: block;
    width: 100%;
    text-align: left;
  }
}