:root {
  --bg: #0b1220;
  --panel: #121d33;
  --panel-strong: #1b2b44;
  --text: #e7eefb;
  --muted: #adc0dc;
  --brand: #2a7fd3;
  --brand-hover: #005db8;
  --brand-2: #8dbfef;
  --brand-highlight: #b8d8f5;
  --border: #2b3f5f;
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --shadow: 0 20px 40px rgba(0, 0, 0, 0.46);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top left, #1b2b44 0%, #0b1220 52%, #080f1b 100%);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

body.landing-page {
  --landing-menu-top: 38px;
}

.announcement-bar {
  position: relative;
  z-index: 40;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in oklab, var(--border), white 12%);
  background: linear-gradient(90deg, rgba(11, 18, 32, 0.97), rgba(18, 29, 51, 0.96));
}

.announcement-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: announcement-scroll 34s linear infinite;
}

.announcement-text {
  margin: 0;
  padding: 9px 1.5rem;
  color: var(--brand-highlight);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}

@keyframes announcement-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(40px);
  z-index: -1;
  opacity: 0.35;
}

.orb-a {
  width: 320px;
  height: 320px;
  background: #1f4f86;
  top: -80px;
  left: -60px;
}

.orb-b {
  width: 360px;
  height: 360px;
  background: #284c78;
  right: -100px;
  bottom: -110px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px clamp(18px, 4vw, 56px);
  backdrop-filter: blur(9px);
  background: rgba(11, 18, 32, 0.84);
  border-bottom: 1px solid color-mix(in oklab, var(--border), white 16%);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-family: "Space Grotesk", "Arial Black", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.logo-image {
  width: auto;
  height: clamp(26px, 3vw, 34px);
  border-radius: 6px;
  object-fit: contain;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-badge {
  border: 1px solid color-mix(in oklab, var(--warning), white 25%);
  background: color-mix(in oklab, var(--warning), transparent 85%);
  color: #ffdcb4;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.login-trigger {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
}

.login-trigger:hover {
  background: var(--panel-strong);
}

.quick-switcher {
  position: relative;
}

.quick-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  padding: 8px;
  z-index: 30;
}

.quick-switch-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 9px 10px;
  font: inherit;
  cursor: pointer;
}

.quick-switch-item:hover {
  border-color: color-mix(in oklab, var(--brand), white 12%);
  background: var(--panel-strong);
}

.quick-switch-item.active {
  border-color: color-mix(in oklab, var(--brand), white 18%);
  background: color-mix(in oklab, var(--brand), transparent 80%);
}

.quick-switch-item-role {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

.menu-toggle {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
}

.menu-toggle:hover {
  background: var(--panel-strong);
}

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 88vw);
  height: 100vh;
  z-index: 40;
  background: linear-gradient(180deg, #121d33 0%, #0b1220 100%);
  border-right: 1px solid var(--border);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.45);
  padding: 20px;
  transform: translateX(-104%);
  transition: transform 0.28s ease;
}

.side-menu.open {
  transform: translateX(0);
}

.menu-close {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}

.side-nav {
  margin-top: 22px;
  display: grid;
  gap: 9px;
}

.side-nav .portal-links {
  display: contents;
}

.side-login {
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.side-login:hover {
  border-color: color-mix(in oklab, var(--brand), white 16%);
  background: color-mix(in oklab, var(--brand), transparent 82%);
}

.side-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.side-nav .button {
  width: 100%;
  justify-content: flex-start;
}

.side-nav a:hover {
  border-color: color-mix(in oklab, var(--brand), white 16%);
  background: color-mix(in oklab, var(--brand), transparent 82%);
}

.side-nav a#admin-link {
  border-color: color-mix(in oklab, var(--warning), black 22%);
  color: #ffdcb4;
}

.side-nav a#admin-link:hover {
  border-color: color-mix(in oklab, var(--warning), black 10%);
  background: color-mix(in oklab, var(--warning), transparent 84%);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(4, 8, 10, 0.62);
}

body.landing-page .side-menu {
  top: var(--landing-menu-top);
  z-index: 41;
}

@media (max-width: 900px) {
  body.landing-page .side-menu {
    height: calc(100vh - var(--landing-menu-top));
  }
}

@media (min-width: 901px) {
  .side-menu {
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: min(78vh, 680px);
    padding: 108px clamp(20px, 4vw, 56px) 26px;
    overflow: auto;
    transform: translateY(-112%);
    transition: transform 0.32s ease;
    border-right: none;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.42);
    z-index: 15;
    background:
      linear-gradient(180deg, rgba(18, 29, 51, 0.97) 0%, rgba(11, 18, 32, 0.99) 100%);
  }

  body.landing-page .side-menu {
    top: var(--landing-menu-top);
    max-height: calc(100vh - var(--landing-menu-top) - 12px);
    z-index: 41;
  }

  .side-menu.open {
    transform: translateY(0);
  }

  .menu-close {
    display: none;
  }

  .side-nav {
    margin-top: 0;
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 14px;
    align-content: start;
  }

  .side-login,
  .side-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .side-nav .button {
    width: 100%;
    justify-content: center;
  }

  .menu-overlay {
    z-index: 14;
  }

}

@media (min-width: 901px) and (max-width: 1160px) {
  .side-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1500px) {
  .side-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

body.landing-page .site-header {
  position: sticky;
  top: 0;
  min-height: 88px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--border), white 12%);
  overflow: visible;
  background: linear-gradient(180deg, rgba(12, 20, 36, 0.7) 0%, rgba(12, 20, 36, 0.52) 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  transition: min-height 0.26s ease, padding 0.26s ease, border-color 0.26s ease, background-color 0.26s ease;
}

body.landing-page .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(96deg, rgba(11, 18, 32, 0.6) 0%, rgba(14, 34, 72, 0.72) 52%, rgba(11, 18, 32, 0.88) 100%);
  transform: none;
  opacity: 1;
  z-index: -2;
}

body.landing-page .site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 20, 36, 0.1) 0%, rgba(12, 20, 36, 0.62) 100%);
  z-index: -1;
}

body.landing-page .site-header.is-compact {
  min-height: 68px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom-color: color-mix(in oklab, var(--brand), transparent 74%);
}

body.landing-page .header-actions .login-trigger,
body.landing-page .header-actions .menu-toggle,
body.landing-page .header-actions .admin-badge {
  background: rgba(9, 16, 30, 0.62);
  border-color: color-mix(in oklab, var(--border), white 14%);
  backdrop-filter: blur(5px);
}

body.landing-page.header-variant-b .site-header::before {
  background-image:
    linear-gradient(92deg, rgba(11, 18, 32, 0.22) 38%, rgba(11, 18, 32, 0.78) 74%, rgba(11, 18, 32, 0.95) 100%),
    radial-gradient(circle at 22% 30%, color-mix(in oklab, var(--brand), transparent 84%), transparent 56%),
    linear-gradient(96deg, rgba(16, 44, 92, 0.68) 0%, rgba(11, 18, 32, 0.9) 72%);
  background-blend-mode: normal, screen, multiply;
  filter: saturate(0.9) brightness(0.9);
}


.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(1, 5, 7, 0.76);
}

.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: min(420px, 92vw);
  max-height: calc(100vh - 26px);
  z-index: 55;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-strong) 0%, var(--panel) 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.auth-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.auth-close {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 7px 11px;
  font: inherit;
  cursor: pointer;
  float: right;
}

.auth-modal h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
}

.auth-help {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-form {
  display: grid;
  gap: 8px;
}

.account-selector {
  display: grid;
  gap: 8px;
  margin: 8px 0 8px;
}

.account-selector-toggle {
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.account-selector-toggle:hover {
  background: color-mix(in oklab, var(--brand), transparent 84%);
}

.account-types-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 8px;
}

.account-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.account-type-btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 7px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.account-type-btn:hover {
  background: var(--panel-strong);
}

.account-type-btn.active {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand), transparent 80%);
  color: var(--text);
}

.account-hierarchy {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.8rem;
}

.role-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.checkbox-row input {
  width: auto;
}

.auth-footer {
  margin-top: 6px;
  display: grid;
  gap: 8px;
}

.auth-link {
  color: var(--brand-highlight);
  font-size: 0.92rem;
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-session {
  margin: 0;
  min-height: 20px;
  color: var(--success);
  font-size: 0.92rem;
}

.oauth-login-wrap {
  position: relative;
  margin-top: 4px;
}

.oauth-login-wrap .button {
  width: 100%;
}

.oauth-dev-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  border: 1px solid #7b5632;
  background: #2c1a0d;
  color: #ffd3a7;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  pointer-events: none;
}

main {
  width: min(1080px, 92vw);
  margin: 36px auto 62px;
  display: grid;
  gap: 26px;
}

.hero,
.panel,
.about,
.contact,
.stats {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero {
  padding: clamp(24px, 4vw, 52px);
}

.hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 5.2vw, 3.8rem);
  line-height: 1.02;
  margin: 0 0 14px;
  max-width: 14ch;
}

.hero p {
  max-width: 68ch;
  font-size: 1.04rem;
}

.eyebrow {
  margin: 0 0 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-size: 0.8rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.button {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

.button-ghost {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand-highlight);
}

.button-small {
  padding: 8px 12px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: clamp(18px, 3.5vw, 28px);
}

.stats article {
  padding: 12px;
  border-radius: 14px;
  background: var(--panel-strong);
}

.stats h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  margin: 0;
}

.stats p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.powerflow-lab {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(160deg, var(--panel) 0%, #0f1729 100%);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3.5vw, 30px);
  display: grid;
  gap: 16px;
}

.powerflow-lab-head h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.35rem, 2.8vw, 1.95rem);
}

.powerflow-dashboard-card {
  border: 1px solid #31525b;
  border-radius: 16px;
  background: linear-gradient(165deg, #0f2026 0%, #0d1a1f 100%);
  padding: clamp(12px, 2vw, 18px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 12px;
}

.dashboard-flow-stage {
  position: relative;
  min-height: 260px;
  border: 1px solid #2a4550;
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 20%, rgba(93, 154, 170, 0.16), transparent 44%),
    radial-gradient(circle at 82% 78%, rgba(242, 168, 91, 0.12), transparent 42%),
    linear-gradient(180deg, #0c171c 0%, #0a1115 100%);
}

.illustrative-stage {
  padding: 0;
  overflow: hidden;
}

.flow-illustration-svg {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: block;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dashboard-kpis article {
  border: 1px solid #355964;
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 10px 12px;
}

.dashboard-kpis p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dashboard-kpis strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  color: #e4f4f8;
}

.session-panel {
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: clamp(20px, 3.3vw, 30px);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 16px;
  align-items: end;
  background: linear-gradient(145deg, #13262c 0%, var(--panel-strong) 100%);
}

.session-panel h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.35rem, 2.8vw, 1.95rem);
}

.session-panel-status {
  margin: 0;
  color: var(--muted);
  max-width: 60ch;
}

.session-panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.migration-tools {
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: clamp(20px, 3.3vw, 30px);
  display: grid;
  gap: 14px;
  background: linear-gradient(150deg, #112328 0%, var(--panel-strong) 100%);
}

.migration-tools h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.35rem, 2.8vw, 1.95rem);
}

.migration-subtext {
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

.migration-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.panel {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  padding: clamp(22px, 4vw, 38px);
}

.installation-showcase {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(22px, 4vw, 36px);
  display: grid;
  gap: 16px;
}

.installation-showcase-head h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.08;
}

.installation-showcase-head p {
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
}

.product-scroller-wrap {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, #13242a 0%, #0f1a1f 100%);
  box-shadow: var(--shadow);
}

.product-scroller {
  display: flex;
  gap: 12px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

.product-scroller::-webkit-scrollbar {
  height: 10px;
}

.product-scroller::-webkit-scrollbar-track {
  background: rgba(14, 30, 36, 0.8);
  border-radius: 999px;
}

.product-scroller::-webkit-scrollbar-thumb {
  background: rgba(87, 166, 184, 0.55);
  border-radius: 999px;
}

.product-scroller-card {
  flex: 0 0 clamp(220px, 28vw, 360px);
  width: clamp(220px, 28vw, 360px);
  height: clamp(180px, 24vw, 240px);
  margin: 0;
  border: 1px solid #31545d;
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel-strong);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-scroller-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.installation-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  align-items: start;
}

.installation-card {
  margin: 0;
  border: 1px solid #2f535d;
  border-radius: 14px;
  overflow: hidden;
  background: #0f2026;
  max-width: 360px;
  width: 100%;
  justify-self: center;
}

.installation-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.installation-card figcaption {
  padding: 10px 12px 12px;
  color: #bfdde3;
  font-size: 0.88rem;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .product-scroller-card {
    flex-basis: clamp(200px, 62vw, 320px);
    width: clamp(200px, 62vw, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-track {
    animation: none;
  }

  .product-scroller {
    scroll-behavior: auto;
  }
}

.panel-accent {
  background: linear-gradient(160deg, #13272d 0%, #112126 80%);
}

.panel h2 {
  font-family: "Space Grotesk", sans-serif;
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.08;
}

.panel p {
  margin: 0;
  color: var(--muted);
}

.services-subheading {
  margin-top: 14px;
}

.services-heading {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  line-height: 1.12;
}

.services-readout {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 12px;
}

.services-readout h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.services-readout ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services-readout li {
  color: var(--brand-highlight);
  font-size: 0.9rem;
}

.services-readout-wide {
  grid-column: 1 / -1;
}

.panel ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  align-content: center;
}

.panel li {
  padding-left: 6px;
}

.about {
  padding: clamp(22px, 4vw, 36px);
}

.about h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.steps {
  margin-top: 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steps article {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px;
  background: var(--panel-strong);
}

.steps span {
  color: var(--brand-highlight);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
}

.steps h3 {
  margin: 8px 0;
  font-family: "Space Grotesk", sans-serif;
}

.steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.admin-console {
  border: 1px solid #6f4a2d;
  border-radius: 22px;
  background: linear-gradient(145deg, #231910 0%, #171007 100%);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 36px);
}

.admin-console h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.admin-console > article > p {
  margin: 0;
  color: #d6c1aa;
}

.admin-grid {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-grid article {
  background: rgba(26, 17, 9, 0.7);
  border: 1px solid #7a5533;
  border-radius: 14px;
  padding: 14px;
}

.admin-grid h3 {
  margin: 0 0 6px;
  font-family: "Space Grotesk", sans-serif;
}

.admin-grid p {
  margin: 0;
  color: #c4ad92;
  font-size: 0.92rem;
}

.contact {
  padding: clamp(22px, 4vw, 36px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-family: "Space Grotesk", sans-serif;
}

.contact-info {
  margin-top: 18px;
  font-weight: 600;
}

.contact-form {
  display: grid;
  gap: 10px;
}

label {
  display: grid;
  gap: 6px;
  font-size: 0.94rem;
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  padding: 10px;
  background: #0e1728;
  color: var(--text);
}

textarea {
  resize: vertical;
}

.form-status {
  min-height: 20px;
  margin: 2px 0 0;
  font-size: 0.92rem;
  color: var(--brand);
}

footer {
  text-align: center;
  padding: 0 14px 26px;
  color: #95b0b7;
  font-size: 0.9rem;
}

.portal-main {
  width: min(1880px, calc(100vw - 24px));
  margin: 36px auto 62px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.portal-main-wide {
  width: min(1920px, calc(100vw - 24px));
  grid-template-columns: 240px minmax(0, 1fr);
}

.portal-content {
  display: grid;
  gap: 20px;
}

.portal-side-menu {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
  position: sticky;
  top: 92px;
}

.portal-nav {
  display: grid;
  gap: 8px;
}

.portal-nav a {
  text-decoration: none;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 500;
}

.portal-nav a:hover {
  border-color: color-mix(in oklab, var(--brand), white 12%);
  background: var(--panel-strong);
}

.portal-nav a.active {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand), transparent 80%);
  color: var(--text);
}

.portal-panel,
.portal-account {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 36px);
}

.portal-panel h1 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.portal-subtext {
  margin: 0 0 16px;
  color: var(--muted);
  max-width: 62ch;
}

.portal-empty {
  min-height: 220px;
  border-radius: 16px;
  border: 1px dashed color-mix(in oklab, var(--border), white 8%);
  background: linear-gradient(160deg, #10192c 0%, #15253c 100%);
}

.portal-account h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
}

.portal-section {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
  min-height: 140px;
  padding: 20px;
}

.portal-section h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
}

.integration-grid {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.integration-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 14px;
}

.integration-card h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
}

.integration-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

.integration-status {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--brand-highlight);
}

.integration-status.linked {
  color: #86d8c4;
}

.integration-link-btn {
  width: 100%;
}

.report-panel {
  margin-top: 16px;
  border: 1px solid #355d66;
  border-radius: 14px;
  background: var(--panel);
  padding: 14px;
}

.report-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.report-panel h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
}

.report-list {
  display: grid;
  gap: 10px;
}

.report-card {
  border: 1px solid #345963;
  background: var(--panel-strong);
  border-radius: 12px;
  padding: 12px;
}

.report-card h3 {
  margin: 0 0 5px;
  font-size: 1rem;
  font-family: "Space Grotesk", sans-serif;
}

.report-meta {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.84rem;
}

.report-body {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
}

.ha-live-panel {
  margin: 12px 0;
  border: 1px solid #335861;
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.ha-live-panel h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.98rem;
}

.ha-live-status {
  margin: 0;
  color: #97bec7;
  font-size: 0.88rem;
}

.ha-live-frame-wrap,
.ha-live-image-wrap {
  border: 1px solid #2f4f57;
  border-radius: 10px;
  overflow: hidden;
  background: #0b161a;
}

.ha-live-frame-wrap iframe {
  width: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

.ha-live-image-wrap img {
  width: 100%;
  min-height: 260px;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.ha-live-actions {
  display: flex;
  justify-content: flex-end;
}

.portal-user {
  margin: 0 0 10px;
  color: #9ed6c8;
}

.portal-warning {
  margin: 0 0 14px;
  color: #f0b690;
}

.portal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.account-manager,
.account-create {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 14px;
}

.invite-history-details {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 0;
  overflow: hidden;
}

.invite-history-details summary {
  list-style: none;
  cursor: pointer;
  padding: 14px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  border-bottom: 1px solid transparent;
}

.invite-history-details[open] summary {
  border-bottom-color: #2a4f58;
}

.invite-history-details summary::-webkit-details-marker {
  display: none;
}

.invite-history-body {
  padding: 14px;
}

.account-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.account-manager-head h2,
.account-create h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
}

.account-list-filters {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-filter-btn {
  border: 1px solid #3d646e;
  border-radius: 999px;
  padding: 6px 11px;
  background: transparent;
  color: #b7dde5;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.account-filter-btn:hover {
  background: rgba(61, 100, 110, 0.22);
}

.account-filter-btn.is-active {
  border-color: #57a6b8;
  background: rgba(87, 166, 184, 0.16);
  color: #c4f0f8;
}

.account-table-wrap {
  overflow-x: auto;
}

.account-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.account-table th,
.account-table td {
  border-bottom: 1px solid #2f515a;
  text-align: left;
  padding: 10px 8px;
  font-size: 0.92rem;
}

.account-table th {
  color: #9cc2cb;
  font-weight: 600;
}

.account-operator-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 12px;
  align-items: start;
}

.account-table-wrap-dense {
  border: 1px solid #33565f;
  border-radius: 12px;
  background: #0d1b20;
  padding: 4px;
}

.account-table-dense {
  margin-top: 0;
}

.account-table-dense th,
.account-table-dense td {
  padding: 7px 6px;
  font-size: 0.8rem;
}

.account-table-dense th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.account-table-dense .table-select {
  min-width: 120px;
  padding: 5px 9px;
  font-size: 0.76rem;
}

.account-table-dense .table-assign-btn,
.account-table-dense .table-delete-btn,
.account-table-dense .table-view-btn {
  padding: 5px 9px;
  font-size: 0.76rem;
}

.account-table-dense .table-assign-wrap {
  gap: 6px;
}

.account-table-dense .portal-subtext {
  margin-bottom: 6px;
}

.account-table tr.is-selected td {
  background: rgba(78, 155, 173, 0.16);
}

.account-detail-pane {
  border: 1px solid #335963;
  border-radius: 12px;
  background: #0e1d23;
  padding: 12px;
  position: sticky;
  top: 14px;
}

.account-detail-pane h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
}

.account-detail-grid {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.account-detail-grid p {
  margin: 0;
  font-size: 0.86rem;
}

.account-detail-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-detail-role-form {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.account-detail-role-form label {
  font-size: 0.82rem;
  color: #9ec3cc;
}

.account-detail-role-form select {
  border: 1px solid #446a73;
  border-radius: 10px;
  padding: 8px 10px;
  background: #0d1a1f;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}

.account-detail-actions .button[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
}

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(6, 12, 15, 0.72);
  display: block;
  padding: 16px;
}

.tour-card {
  position: fixed;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 1px solid #3a616b;
  border-radius: 18px;
  background: #0d1d23;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 18px;
  transform: scale(0.7);
  transform-origin: top left;
  transition: left 220ms ease, top 220ms ease;
}

.tour-progress {
  margin: 0 0 6px;
  color: #9ec3cb;
  font-size: 0.86rem;
}

.tour-card h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
}

.tour-body {
  margin: 0 0 14px;
  color: #c6dde3;
}

.tour-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tour-highlight {
  outline: 2px solid #64d7be;
  outline-offset: 3px;
  border-radius: 10px;
}

.account-role-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #3c6670;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.account-role-tag.role-company {
  border-color: #c7884a;
  color: #f4c791;
}

.account-role-tag.role-partner {
  border-color: #57a6b8;
  color: #9fe7f4;
}

.account-role-tag.role-client {
  border-color: #61b494;
  color: #b9f3dc;
}

.table-delete-btn {
  border: 1px solid #7a4b4b;
  background: transparent;
  color: #f1b8b8;
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.table-delete-btn:hover {
  background: rgba(122, 75, 75, 0.24);
}

.table-assign-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.table-select {
  min-width: 170px;
  border: 1px solid #446a73;
  border-radius: 999px;
  padding: 7px 11px;
  background: #0d1a1f;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}

.table-assign-btn {
  border: 1px solid #3f6c63;
  background: transparent;
  color: #afe8da;
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.table-assign-btn:hover {
  background: rgba(63, 108, 99, 0.22);
}

.table-view-btn {
  border: 1px solid #426b74;
  background: transparent;
  color: #b9e7f1;
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.82rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.table-view-btn:hover {
  background: rgba(66, 107, 116, 0.2);
}


.partner-system-focus {
  margin-bottom: 14px;
  border: 1px solid #3f6973;
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 12px;
}

.partner-system-focus h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
}

.reports-section {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 14px;
}

.reports-section h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
}

.reports-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.reports-tally-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reports-tally-grid article {
  border: 1px solid #31545d;
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 10px;
}

.reports-tally-grid h3 {
  margin: 0 0 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #9ec1c9;
}

.reports-tally-grid p {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
}

.reports-breakdown {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.reports-breakdown-item {
  border: 1px solid #31545d;
  border-radius: 10px;
  background: var(--panel-strong);
  padding: 8px 10px;
  font-size: 0.88rem;
  color: #cfe2e7;
}

.workflow-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.75rem;
  border: 1px solid #456f79;
  background: var(--panel-strong);
  color: #c6e3ea;
}

.workflow-draft {
  border-color: #5f7480;
  color: #cfd8de;
}

.workflow-submitted {
  border-color: #6d7a39;
  color: #e5efb8;
  background: #242e14;
}

.workflow-approved {
  border-color: #4f8f79;
  color: #cef7e8;
  background: #123228;
}

.workflow-rejected {
  border-color: #8b5550;
  color: #f6ccc8;
  background: #341815;
}

.workflow-action-cell {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.workflow-audit-log {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.workflow-audit-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 8px 10px;
  font-size: 0.86rem;
  color: var(--muted);
}

.workflow-audit-item span {
  color: #9fc2cb;
  font-size: 0.78rem;
}

.advisor-priority-grid {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  margin: 0;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.advisor-priority-grid legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.advisor-priority-grid label {
  font-size: 0.88rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.advisor-priority-grid input[type="checkbox"] {
  width: auto;
}

.advisor-type-filters {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  margin: 0;
  padding: 10px;
}

.advisor-type-filters summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.advisor-type-filters .portal-subtext {
  margin: 10px 0 8px;
  font-size: 0.88rem;
}

.advisor-type-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.advisor-type-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.advisor-type-filter-grid label {
  font-size: 0.88rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-strong);
  padding: 8px;
}

.advisor-type-filter-grid input[type="checkbox"] {
  width: auto;
}

.advisor-results {
  display: grid;
  gap: 12px;
}

.advisor-results-type-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.advisor-results-type-btn {
  border: 1px solid color-mix(in oklab, var(--border), white 18%);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.advisor-results-type-btn:hover {
  background: rgba(70, 120, 131, 0.2);
}

.advisor-results-type-btn.active {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand), transparent 80%);
  color: var(--text);
}

.advisor-pricebook-details {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 10px;
}

.advisor-pricebook-details summary {
  cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 10px;
}

.advisor-result-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 12px;
}

.advisor-result-card h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
}

.advisor-metrics {
  display: grid;
  gap: 6px;
}

.advisor-metrics p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.advisor-result-card ul {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.advisor-result-card li {
  color: #b8d3da;
  font-size: 0.88rem;
}

.finance-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 14px;
}

.finance-card h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
}

.finance-card .portal-empty {
  min-height: 140px;
}

.warranty-upload-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.warranty-window {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 12px;
}

.warranty-window h3 {
  margin: 0 0 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.98rem;
}

.warranty-progress-wrap {
  width: 140px;
}

.warranty-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #1a3138;
  overflow: hidden;
  border: 1px solid #35525b;
}

.warranty-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4cc5a6, #78e0ca);
}

.warranty-progress-label {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #9ac3cc;
}

.channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.channel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 10px 12px;
  font-weight: 500;
}

.channel-link:hover {
  border-color: #4b7a85;
  background: #142a31;
}

.channel-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #446d77;
  color: #9fd2de;
  background: var(--panel-strong);
}

.kb-toolbar {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 12px;
  margin-bottom: 12px;
}

.kb-search-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a6c9d1;
}

.kb-search {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  padding: 10px;
  background: #0b171b;
  color: var(--text);
}

.kb-search-status {
  margin: 8px 0 0;
  font-size: 0.86rem;
}

.kb-docs-list {
  display: grid;
  gap: 10px;
}

.kb-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}

.kb-group summary {
  list-style: none;
  cursor: pointer;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.kb-group summary::-webkit-details-marker {
  display: none;
}

.kb-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  border: 1px solid color-mix(in oklab, var(--border), white 22%);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.78rem;
  color: var(--brand-highlight);
}

.kb-doc-items {
  margin: 0;
  padding: 0 12px 12px 28px;
  display: grid;
  gap: 6px;
}

.kb-doc-item {
  color: var(--text);
  display: grid;
  gap: 4px;
}

.kb-doc-link {
  color: var(--brand-highlight);
  text-decoration: none;
  word-break: break-word;
}

.kb-doc-link:hover {
  text-decoration: underline;
}

.kb-doc-meta-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.kb-doc-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #4b7f75;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #bdece1;
  background: #12302b;
}

.kb-doc-badge-muted {
  border-color: #48656d;
  color: #b5d0d8;
  background: #13252b;
}

.kb-doc-meta {
  color: #98b7bf;
  font-size: 0.78rem;
}

.kb-doc-remove {
  padding: 4px 9px;
  font-size: 0.74rem;
}

.kb-quick-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.kb-quick-filter-btn.is-active {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand), transparent 80%);
  color: var(--text);
}

.kb-disclaimer {
  margin: 0 0 10px;
  border: 1px solid #7f5f30;
  border-radius: 10px;
  padding: 10px 12px;
  background: #2a2011;
  color: #f5d8a8;
  font-size: 0.9rem;
}

.kb-upload-panel {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}

.kb-upload-panel summary {
  cursor: pointer;
  padding: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  list-style: none;
}

.kb-upload-panel summary::-webkit-details-marker {
  display: none;
}

.kb-upload-panel > p,
.kb-upload-form {
  margin: 0 12px 12px;
}

.kb-upload-form {
  display: grid;
  gap: 8px;
}

.kb-upload-form input,
.kb-upload-form select {
  width: 100%;
}

.kb-upload-actions {
  margin-top: 4px;
}

.kb-hub-links {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.kb-hub-link-note {
  margin: 0;
}

.kb-type-filters {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.kb-type-filters label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text);
}

.kb-type-filters input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 auto;
}

.kb-manufacturer-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.kb-manufacturer-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.kb-manufacturer-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.kb-type-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kb-type-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--border), white 22%);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-highlight);
  background: #0f1e23;
}

.kb-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.integration-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(2, 8, 10, 0.72);
}

.integration-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: min(520px, 92vw);
  z-index: 75;
  border: 1px solid #3b6670;
  border-radius: 16px;
  background: linear-gradient(180deg, #13242a 0%, #0f1a1f 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.52);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.integration-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.assistant-widget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.assistant-trigger {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 1px solid #4d7e89;
  background: radial-gradient(circle at 30% 30%, #25444c 0%, #173036 65%, #12242a 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  position: relative;
  padding: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.assistant-trigger::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(97, 233, 202, 0.3) 0%, rgba(46, 174, 226, 0.18) 45%, rgba(14, 53, 80, 0) 70%);
  opacity: 0.18;
  transform: scale(0.96);
  pointer-events: none;
  z-index: -1;
}

.assistant-trigger::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 999px;
  background:
    conic-gradient(
      from 0deg,
      rgba(94, 234, 207, 0.28) 0deg,
      rgba(90, 182, 255, 0.22) 95deg,
      rgba(96, 249, 219, 0.32) 180deg,
      rgba(76, 145, 246, 0.18) 270deg,
      rgba(94, 234, 207, 0.28) 360deg
    );
  filter: blur(9px);
  opacity: 0.26;
  transform: scale(0.92);
  pointer-events: none;
  z-index: -2;
}

.assistant-trigger img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 999px;
}

.assistant-widget.is-speaking .assistant-trigger {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 30px rgba(11, 25, 33, 0.45), 0 0 0 1px rgba(114, 221, 197, 0.35);
}

.assistant-widget.is-speaking .assistant-trigger::before {
  animation: assistantPulse 0.72s ease-in-out infinite;
}

.assistant-widget.is-speaking .assistant-trigger::after {
  animation: assistantEnergyField 0.52s steps(2, end) infinite;
}

.assistant-dot {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #528d7f;
  background: #20463d;
  color: #c2f4e7;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.assistant-panel {
  width: min(360px, calc(100vw - 24px));
  border: 1px solid #3d6b75;
  border-radius: 14px;
  background: var(--panel-strong);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
  padding: 12px;
}

.assistant-header {
  margin-bottom: 8px;
}

.assistant-panel h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.assistant-context {
  display: none !important;
}

.assistant-text {
  margin: 0 0 10px;
  color: #cde0e5;
  font-size: 0.9rem;
}

.assistant-chat {
  max-height: 240px;
  overflow: auto;
  border: 1px solid #2f5962;
  border-radius: 10px;
  background: #0c191e;
  padding: 8px;
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.assistant-msg {
  display: flex;
}

.assistant-msg p {
  margin: 0;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.38;
}

.assistant-msg-assistant {
  justify-content: flex-start;
}

.assistant-msg-assistant p {
  border: 1px solid #335f68;
  background: #11252b;
  color: #cde3e9;
}

.assistant-msg-user {
  justify-content: flex-end;
}

.assistant-msg-user p {
  border: 1px solid #49796b;
  background: #17392f;
  color: #d8f1e8;
}

.assistant-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.assistant-quick-actions button {
  border: 1px solid color-mix(in oklab, var(--border), white 18%);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.assistant-quick-actions button:hover {
  background: rgba(70, 120, 131, 0.2);
}

.assistant-compose {
  margin: 0;
}

.assistant-compose-label {
  display: block;
  margin-bottom: 6px;
  color: #a8c7cf;
  font-size: 0.8rem;
}

.assistant-compose-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.assistant-compose-row input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  padding: 8px 9px;
  background: #0b171b;
  color: var(--text);
  font-size: 0.86rem;
}

.assistant-compose-row button {
  border: 1px solid #4f8894;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.82rem;
  background: #17343b;
  color: #d9edf2;
  cursor: pointer;
}

.assistant-compose-row button:hover {
  background: #1d4048;
}

.assistant-footer-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.assistant-footer-actions button {
  border: 1px solid #3f6b75;
  background: transparent;
  color: #c7dbe0;
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.assistant-footer-actions button:hover {
  background: rgba(62, 104, 114, 0.2);
}

.assistant-footer-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.assistant-replace-note {
  display: none !important;
}

/* Unified portal palette override for company/partner/account tooling surfaces */
.portal-user {
  color: var(--brand-highlight);
}

.portal-warning {
  color: #f4c791;
}

.invite-history-details[open] summary {
  border-bottom-color: var(--border);
}

.account-filter-btn {
  border-color: color-mix(in oklab, var(--border), white 14%);
  color: var(--brand-highlight);
}

.account-filter-btn:hover {
  background: color-mix(in oklab, var(--brand), transparent 84%);
}

.account-filter-btn.is-active {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand), transparent 80%);
  color: var(--text);
}

.account-table th,
.account-table td {
  border-bottom-color: var(--border);
}

.account-table th {
  color: var(--muted);
}

.account-table-wrap-dense {
  border-color: var(--border);
  background: var(--panel);
}

.account-table tr.is-selected td {
  background: color-mix(in oklab, var(--brand), transparent 84%);
}

.account-detail-pane {
  border-color: var(--border);
  background: var(--panel);
}

.account-detail-role-form label {
  color: var(--muted);
}

.account-detail-role-form select,
.table-select {
  border-color: var(--border);
  background: var(--panel-strong);
}

.table-delete-btn {
  border-color: color-mix(in oklab, var(--error), black 26%);
  color: #f6ccc8;
}

.table-delete-btn:hover {
  background: color-mix(in oklab, var(--error), transparent 84%);
}

.table-assign-btn {
  border-color: color-mix(in oklab, var(--success), black 22%);
  color: #b9f3dc;
}

.table-assign-btn:hover {
  background: color-mix(in oklab, var(--success), transparent 84%);
}

.table-view-btn {
  border-color: color-mix(in oklab, var(--brand), white 12%);
  color: var(--brand-highlight);
}

.table-view-btn:hover {
  background: color-mix(in oklab, var(--brand), transparent 84%);
}

.reports-tally-grid article,
.reports-breakdown-item {
  border-color: var(--border);
}

.reports-tally-grid h3 {
  color: var(--muted);
}

.reports-breakdown-item {
  color: var(--text);
}

.workflow-status-badge {
  border-color: color-mix(in oklab, var(--border), white 18%);
  color: var(--brand-highlight);
}

.workflow-audit-item span {
  color: var(--muted);
}

.partner-system-focus {
  border-color: var(--border);
}

.warranty-progress-track {
  background: #1b2b44;
  border-color: var(--border);
}

.warranty-progress-bar {
  background: linear-gradient(90deg, var(--brand), var(--brand-highlight));
}

.warranty-progress-label {
  color: var(--muted);
}

.channel-link:hover {
  border-color: color-mix(in oklab, var(--brand), white 12%);
  background: color-mix(in oklab, var(--brand), transparent 86%);
}

.channel-icon {
  border-color: color-mix(in oklab, var(--border), white 18%);
  color: var(--brand-highlight);
}

.kb-search-label,
.kb-doc-meta,
.assistant-compose-label {
  color: var(--muted);
}

.kb-search,
.assistant-compose-row input {
  background: var(--panel-strong);
}

.kb-doc-badge {
  border-color: color-mix(in oklab, var(--success), black 24%);
  color: #bdece1;
  background: color-mix(in oklab, var(--success), transparent 86%);
}

.kb-doc-badge-muted {
  border-color: color-mix(in oklab, var(--border), white 14%);
  color: var(--muted);
  background: var(--panel-strong);
}

.integration-modal {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--panel-strong) 0%, var(--panel) 100%);
}

/* Client + Partner dashboard-specific palette normalization */
.integration-status.linked {
  color: var(--success);
}

.report-panel,
.report-card {
  border-color: var(--border);
}

.ha-live-panel {
  border-color: var(--border);
}

.ha-live-status {
  color: var(--muted);
}

.ha-live-frame-wrap,
.ha-live-image-wrap {
  border-color: var(--border);
  background: var(--panel);
}

.advisor-results-type-btn:hover,
.assistant-quick-actions button:hover {
  background: color-mix(in oklab, var(--brand), transparent 84%);
}

.advisor-result-card li {
  color: var(--muted);
}

.kb-type-badge {
  background: var(--panel-strong);
}

.assistant-trigger {
  border-color: color-mix(in oklab, var(--brand), white 18%);
  background: radial-gradient(circle at 30% 30%, #1f3967 0%, #173054 65%, #12243f 100%);
}

.assistant-trigger::before {
  background: radial-gradient(circle, color-mix(in oklab, var(--brand-highlight), transparent 68%) 0%, color-mix(in oklab, var(--brand), transparent 82%) 45%, rgba(14, 53, 80, 0) 70%);
}

.assistant-trigger::after {
  background:
    conic-gradient(
      from 0deg,
      color-mix(in oklab, var(--brand-highlight), transparent 70%) 0deg,
      color-mix(in oklab, var(--brand), transparent 78%) 95deg,
      color-mix(in oklab, var(--brand-highlight), transparent 66%) 180deg,
      color-mix(in oklab, var(--brand), transparent 82%) 270deg,
      color-mix(in oklab, var(--brand-highlight), transparent 70%) 360deg
    );
}

.assistant-dot {
  border-color: color-mix(in oklab, var(--brand), white 10%);
  background: #1d3f6e;
  color: var(--brand-highlight);
}

.assistant-panel {
  border-color: var(--border);
}

.assistant-chat {
  border-color: var(--border);
  background: var(--panel);
}

.assistant-msg-assistant p {
  border-color: var(--border);
  background: var(--panel-strong);
  color: var(--text);
}

.assistant-msg-user p {
  border-color: color-mix(in oklab, var(--brand), white 10%);
  background: color-mix(in oklab, var(--brand), transparent 76%);
  color: var(--text);
}

.assistant-compose-row button {
  border-color: color-mix(in oklab, var(--brand), white 12%);
  background: color-mix(in oklab, var(--brand), transparent 78%);
  color: var(--text);
}

.assistant-compose-row button:hover {
  background: color-mix(in oklab, var(--brand-hover), transparent 74%);
}

.assistant-footer-actions button {
  border-color: color-mix(in oklab, var(--border), white 16%);
  color: var(--muted);
}

.assistant-footer-actions button:hover {
  background: color-mix(in oklab, var(--brand), transparent 86%);
}

.client-action-card,
.client-journey-card,
.client-quick-actions,
.partner-summary-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 14px;
}

.client-status-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--border), white 16%);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--brand-highlight);
  background: var(--panel);
  font-size: 0.78rem;
}

.partner-summary-value a {
  color: var(--brand-highlight);
  text-decoration: none;
}

.partner-summary-value a:hover {
  text-decoration: underline;
}

.partner-summary-status {
  color: var(--muted);
}

/* Networking + Resource Hub + Installer Locator + Home Integrations */
.portal-accordion {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-strong);
  overflow: hidden;
}

.portal-accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  border-bottom: 1px solid transparent;
}

.portal-accordion summary::-webkit-details-marker {
  display: none;
}

.portal-accordion[open] summary {
  border-bottom-color: var(--border);
}

.portal-accordion-body {
  padding: 12px 14px 14px;
}

.kb-toolbar,
.kb-upload-panel,
.kb-group,
.kb-manufacturer-card {
  background: var(--panel-strong);
}

.kb-toolbar,
.kb-upload-panel,
.kb-group,
.kb-manufacturer-card,
.kb-type-badge,
.kb-doc-badge-muted {
  border-color: var(--border);
}

.kb-search,
.kb-upload-form input,
.kb-upload-form select {
  background: var(--panel);
}

.kb-disclaimer {
  border-color: color-mix(in oklab, var(--warning), black 18%);
  background: color-mix(in oklab, var(--warning), transparent 86%);
  color: #f5d8a8;
}

.locator-toolbar {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 12px;
}

.installer-map {
  border-color: var(--border);
  background: linear-gradient(145deg, var(--panel), var(--panel-strong));
}

.locator-map-fallback {
  color: var(--muted);
}

.installer-card {
  border-color: var(--border);
  background: var(--panel-strong);
}

.installer-card-head p,
.installer-meta,
.installer-distance {
  color: var(--muted);
}

.installer-services {
  color: var(--text);
}

.installer-contact a {
  color: var(--brand-highlight);
}

.installer-empty {
  border-color: color-mix(in oklab, var(--border), white 10%);
  background: var(--panel);
  color: var(--muted);
}

.locator-popup h3 {
  color: var(--text-primary, var(--text));
}

.locator-popup p {
  color: var(--text-secondary, var(--muted));
}

.sales-grid {
  margin-top: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 14px;
}

.sales-card h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.02rem;
}

.sales-card p,
.sales-card li {
  color: var(--muted);
}

.sales-metrics {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales-metrics article {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 12px;
}

.sales-metrics h3 {
  margin: 0 0 6px;
  font-family: "Space Grotesk", sans-serif;
}

.sales-metrics p {
  margin: 0;
  color: var(--muted);
}

.integration-shot-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.integration-shot-card {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
}

.integration-shot-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.integration-shot-card figcaption {
  padding: 10px 12px 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

.bespoke-radiator-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.2fr;
  gap: 12px;
  align-items: start;
}

.consultation-cta {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 14px;
}

.consultation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@keyframes assistantPulse {
  0% {
    opacity: 0.26;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.14);
  }
  100% {
    opacity: 0.26;
    transform: scale(0.92);
  }
}

@keyframes assistantEnergyField {
  0% {
    opacity: 0.34;
    transform: scale(0.9) rotate(0deg);
  }
  25% {
    opacity: 0.62;
    transform: scale(1.02) rotate(5deg);
  }
  50% {
    opacity: 0.36;
    transform: scale(0.94) rotate(-3deg);
  }
  75% {
    opacity: 0.68;
    transform: scale(1.05) rotate(6deg);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.9) rotate(0deg);
  }
}

.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@supports (content-visibility: auto) {
  main > section:not(.hero) {
    content-visibility: auto;
    contain-intrinsic-size: 1px 640px;
  }

  .portal-content > section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 540px;
  }
}

@media (max-width: 900px) {
  .sales-grid,
  .sales-metrics,
  .integration-shot-grid {
    grid-template-columns: 1fr;
  }

  .bespoke-radiator-layout {
    grid-template-columns: 1fr;
  }

  .stats,
  .steps,
  .panel,
  .contact,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .installation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-panel {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .session-panel-actions {
    justify-content: flex-start;
  }

  .services-readout ul {
    grid-template-columns: 1fr;
  }

  .powerflow-dashboard-card {
    grid-template-columns: 1fr;
  }

  .account-types {
    grid-template-columns: 1fr;
  }

  .portal-main {
    grid-template-columns: 1fr;
  }

  .portal-side-menu {
    position: static;
  }

  .integration-grid {
    grid-template-columns: 1fr;
  }

  .reports-tally-grid {
    grid-template-columns: 1fr;
  }

  .account-operator-layout {
    grid-template-columns: 1fr;
  }

  .account-detail-pane {
    position: static;
  }

  .advisor-type-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .finance-grid {
    grid-template-columns: 1fr;
  }

  .warranty-upload-grid {
    grid-template-columns: 1fr;
  }

  .assistant-widget {
    right: 10px;
    bottom: 10px;
  }

  .assistant-trigger {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 620px) {
  .installation-grid {
    grid-template-columns: 1fr;
  }
}

.locator-toolbar {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.locator-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.installer-map {
  margin-top: 10px;
  height: 440px;
  border-radius: 16px;
  border: 1px solid #355f69;
  overflow: hidden;
  background: linear-gradient(145deg, #0f2026, #112a31);
}

.locator-map-fallback {
  margin: 0;
  padding: 18px;
  color: #c8dde2;
}

.installer-results {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.installer-card {
  border: 1px solid #365e68;
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.installer-card-head h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.03rem;
}

.installer-card-head p {
  margin: 2px 0 0;
  color: #9ec4cc;
  font-size: 0.9rem;
}

.installer-meta,
.installer-distance {
  margin: 0;
  color: #c5dde3;
  font-size: 0.88rem;
}

.installer-services {
  margin: 0;
  padding-left: 18px;
  color: #d6e9ed;
  font-size: 0.88rem;
}

.installer-services li {
  margin: 2px 0;
}

.installer-contact {
  display: flex;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.installer-contact a {
  color: var(--brand-highlight);
  font-size: 0.86rem;
  text-decoration: none;
}

.installer-contact a:hover {
  text-decoration: underline;
}

.installer-empty {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed #436871;
  background: #0e1b20;
  color: var(--muted);
}

.installer-card.pulse {
  animation: installerPulse 0.85s ease;
}

@keyframes installerPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 168, 91, 0.58);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(242, 168, 91, 0);
  }
}

.locator-popup h3 {
  margin: 0 0 6px;
  color: #0d1518;
  font-size: 1rem;
}

.locator-popup p {
  margin: 0 0 6px;
  color: #17343b;
  font-size: 0.88rem;
}

@media (max-width: 980px) {
  .locator-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .installer-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .locator-toolbar {
    grid-template-columns: 1fr;
  }

  .installer-map {
    height: 360px;
  }

  .advisor-type-filter-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-flow-stage {
    min-height: 230px;
  }

  .flow-illustration-svg {
    min-height: 230px;
  }

}

.splash-main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.splash-card {
  width: min(560px, 100%);
  padding: 32px 28px;
  border-radius: 18px;
  border: 1px solid rgba(97, 141, 153, 0.45);
  background: rgba(12, 24, 29, 0.86);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.splash-card h1 {
  margin-bottom: 8px;
}

.splash-loader {
  width: 34px;
  height: 34px;
  margin: 14px auto 0;
  border: 3px solid rgba(158, 216, 234, 0.3);
  border-top-color: var(--brand-highlight);
  border-radius: 50%;
  animation: splashSpin 0.9s linear infinite;
}

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

/* Final route lock: partner-upgrade-advisor, knowledgebase, contact-us, installer-locator */
.advisor-type-filter-grid label,
.advisor-priority-grid,
.advisor-type-filters,
.advisor-pricebook-details,
.advisor-result-card {
  border-color: var(--border);
  background: var(--panel-strong);
}

.advisor-priority-grid legend,
.advisor-type-filters summary,
.advisor-type-filter-grid label,
.advisor-metrics p,
.advisor-result-card li {
  color: var(--muted);
}

.kb-doc-badge,
.kb-type-badge {
  border-color: color-mix(in oklab, var(--brand), white 14%);
  color: var(--brand-highlight);
  background: color-mix(in oklab, var(--brand), transparent 84%);
}

.kb-disclaimer {
  border-color: color-mix(in oklab, var(--brand), white 8%);
  background: color-mix(in oklab, var(--brand), transparent 88%);
  color: var(--brand-highlight);
}

.channel-link {
  border-color: var(--border);
  background: var(--panel-strong);
}

.channel-link:hover {
  border-color: color-mix(in oklab, var(--brand), white 12%);
  background: color-mix(in oklab, var(--brand), transparent 86%);
}

.channel-icon {
  border-color: color-mix(in oklab, var(--border), white 18%);
  color: var(--brand-highlight);
  background: var(--panel);
}

.locator-toolbar {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 12px;
}

.installer-map {
  border-color: var(--border);
  background: linear-gradient(145deg, var(--panel), var(--panel-strong));
}

.locator-map-fallback,
.installer-card-head p,
.installer-meta,
.installer-distance,
.installer-empty,
.locator-popup p {
  color: var(--muted);
}

.installer-card {
  border-color: var(--border);
  background: var(--panel-strong);
}

.installer-services {
  color: var(--text);
}

.installer-empty {
  border-color: color-mix(in oklab, var(--border), white 10%);
  background: var(--panel);
}

.locator-popup h3 {
  color: var(--text);
}

/* Hard lock for /networking-support */
.route-networking-support .portal-panel {
  border-color: var(--border) !important;
  background: var(--panel) !important;
}

.route-networking-support .portal-accordion {
  border-color: var(--border) !important;
  background: var(--panel-strong) !important;
}

.route-networking-support .portal-accordion summary {
  color: var(--text) !important;
}

.route-networking-support .portal-accordion[open] summary {
  border-bottom-color: var(--border) !important;
}

.route-networking-support .portal-accordion-body,
.route-networking-support .portal-subtext {
  color: var(--muted) !important;
}

.route-networking-support .button {
  border: 1px solid var(--brand) !important;
  background: var(--brand) !important;
}

.route-networking-support .button.button-ghost {
  background: transparent !important;
  color: var(--brand-highlight) !important;
}

/* Hard lock for /faq */
.route-faq .portal-panel {
  border-color: var(--border) !important;
  background: var(--panel) !important;
}

.route-faq #faq-numbered-list > li::marker {
  color: var(--brand-highlight) !important;
}

.route-faq #faq-numbered-list .portal-accordion {
  border-color: var(--border) !important;
  background: var(--panel-strong) !important;
}

.route-faq #faq-numbered-list .portal-accordion summary::after {
  color: var(--brand-highlight) !important;
}

.route-faq #faq-numbered-list .portal-accordion-body,
.route-faq #faq-numbered-list .portal-subtext,
.route-faq .portal-subtext {
  color: var(--muted) !important;
}

.route-faq .portal-main {
  grid-template-columns: minmax(0, 1fr) !important;
}

.route-faq .portal-content {
  grid-column: 1 / -1;
}