@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

html[data-fs-skip-auth-boot="1"] #loading { display: none !important; }
html[data-fs-skip-auth-boot="1"] #app.hidden { display: block !important; }

:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --bg-accent: #ecf1f5;
  --ink: #142126;
  --text: #1c2730;
  --muted: #5e6b77;
  --card: #ffffff;
  --accent: #1f6feb;
  --accent-dark: #1a5ccd;
  --primary: #1f6feb;
  --border: #dce3ea;
  --border-strong: #c5d0db;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.04);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --fs-header-min-h: 76px;
  --fs-header-min-h-sm: 62px;
  --fs-header-pad-y: 8px;
  --fs-header-pad-x: 18px;
  --fs-header-gap: 12px;
  --fs-control-h: 38px;
  --fs-header-title-size: clamp(1.28rem, 1.2rem + 0.3vw, 1.44rem);
  --fs-header-subtitle-size: 0.88rem;
  --fs-banner-min-h: 96px;
  --fs-keen-header-height: 0px;
  --fs-keen-sticky-offset: 96px;
  --status-ok: #1f7a4f;
  --status-ok-bg: #e7f6ee;
  --status-warn: #9a6d12;
  --status-warn-bg: #fff3db;
  --status-down: #b93833;
  --status-down-bg: #fdecea;
  --status-idle: #64748b;
  --status-idle-bg: #eef2f7;
  --app-bg-funnel-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cg transform='translate(37 34) scale(0.34)'%3E%3Cpath d='M10 12H38L29 23V33L19 37V23Z' fill='%239ca3af' fill-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E");
}

.tm-mark {
  font-size: 0.56em;
  line-height: 0;
  vertical-align: super;
  letter-spacing: 0.02em;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

html {
  background: var(--bg);
  background-attachment: fixed;
  background-size: cover;
}

body {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-3);
}

body.app-body {
  display: block;
  padding: 0;
  background-color: var(--bg);
  background-image: var(--app-bg-funnel-tile), var(--app-bg-funnel-tile);
  background-repeat: repeat, repeat;
  background-size: 112px 112px, 112px 112px;
  background-position: 0 0, 56px 56px;
  background-attachment: fixed, fixed;
}

#loading {
  margin-top: 32px;
  width: min(460px, calc(100% - 48px));
}

.card {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

body:not(.app-body) .card {
  width: min(440px, 100%);
}

body.keen-auth-body {
  display: block;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(54, 153, 255, 0.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(137, 80, 252, 0.1), transparent 26%),
    linear-gradient(180deg, #eef3f8 0%, #e6edf5 100%);
}

body.keen-auth-body--action {
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(80, 205, 137, 0.08), transparent 30%),
    linear-gradient(180deg, #edf4fb 0%, #e7eef7 100%);
}

body.keen-auth-body--billing {
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.16), transparent 34%),
    radial-gradient(circle at bottom left, rgba(137, 80, 252, 0.1), transparent 30%),
    linear-gradient(180deg, #ebf2fa 0%, #e4ecf6 100%);
}

.keen-auth-layout {
  width: min(1160px, 100%);
  min-height: calc(100vh - 48px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 480px);
  gap: 28px;
  align-items: center;
}

.keen-auth-layout--action {
  grid-template-columns: minmax(300px, 0.95fr) minmax(0, 460px);
}

.keen-auth-layout--billing {
  grid-template-columns: minmax(320px, 0.98fr) minmax(0, 540px);
}

.keen-auth-aside {
  display: grid;
  gap: 22px;
  align-content: center;
  min-width: 0;
}

.keen-auth-brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.keen-auth-wordmark {
  width: min(100%, 220px);
  height: auto;
  display: block;
}

.keen-auth-copy {
  display: grid;
  gap: 12px;
}

.keen-auth-copy h1 {
  max-width: 12ch;
  font-size: clamp(2.3rem, 2rem + 1vw, 3.2rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.keen-auth-copy p {
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.65;
}

.keen-auth-feature-list {
  display: grid;
  gap: 12px;
}

.keen-auth-feature,
.keen-auth-note-card {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(20, 33, 38, 0.08);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.keen-auth-feature strong {
  font-size: 0.98rem;
  color: var(--ink);
}

.keen-auth-feature span,
.keen-auth-note-card p {
  color: var(--muted);
  line-height: 1.6;
}

.keen-auth-card.card {
  width: 100%;
  max-width: none;
  padding: 24px;
  gap: 16px;
  border-radius: 28px;
  border: 1px solid rgba(20, 33, 38, 0.08);
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.14);
}

.keen-auth-card--action {
  max-width: 460px;
}

.billing-return-card.card {
  max-width: 540px;
}

.billing-return-header {
  display: grid;
  gap: 14px;
}

.billing-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.billing-status-tag.syncing {
  color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  background: color-mix(in srgb, var(--accent) 10%, white);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.billing-status-tag.ready {
  color: var(--status-ok);
  background: var(--status-ok-bg);
  border-color: color-mix(in srgb, var(--status-ok) 26%, var(--border));
}

.billing-status-tag.issue {
  color: var(--status-warn);
  background: var(--status-warn-bg);
  border-color: color-mix(in srgb, var(--status-warn) 24%, var(--border));
}

.billing-status-tag.blocked {
  color: var(--status-down);
  background: var(--status-down-bg);
  border-color: color-mix(in srgb, var(--status-down) 24%, var(--border));
}

.billing-detail-list {
  margin: 0;
  color: var(--muted);
}

.billing-detail-list li {
  line-height: 1.55;
}

.billing-password-panel {
  display: grid;
  gap: 12px;
}

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

.keen-auth-card-header,
.keen-auth-subpanel,
.keen-auth-subpanel-copy {
  display: grid;
  gap: 8px;
}

.keen-auth-card input[type="email"],
.keen-auth-card input[type="password"],
.keen-auth-card input[type="text"] {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 96%, white 4%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.keen-auth-card input[type="email"]:focus,
.keen-auth-card input[type="password"]:focus,
.keen-auth-card input[type="text"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.keen-auth-card-header h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.36rem + 0.4vw, 1.82rem);
  letter-spacing: -0.03em;
}

.keen-auth-card .notice {
  border-radius: 18px;
  padding: 14px 16px;
}

.keen-auth-card #login-form {
  gap: 14px;
}

.keen-auth-card #submit,
.keen-auth-card #password-reset-submit,
.keen-auth-card #mfa-submit {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 700;
}

.keen-auth-subpanel {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(20, 33, 38, 0.08);
  background: rgba(239, 243, 248, 0.72);
}

.keen-auth-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

.keen-auth-meta-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.keen-auth-loading {
  min-height: 40px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(20, 33, 38, 0.08);
  background: rgba(239, 243, 248, 0.72);
}

.keen-auth-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.keen-auth-cta-row .btn {
  width: auto;
  min-width: 140px;
  min-height: 42px;
  border-radius: 12px;
  font-weight: 700;
}

.keen-auth-card .btn-link {
  font-size: 0.88rem;
  font-weight: 600;
}

body.keen-auth-body .keen-auth-card .error {
  display: block;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--status-down) 24%, var(--border));
  background: color-mix(in srgb, var(--status-down) 10%, var(--card));
  color: color-mix(in srgb, var(--status-down) 86%, var(--ink));
  font-size: 0.88rem;
  line-height: 1.45;
}

body.keen-auth-body .keen-auth-card [role="status"].meta,
body.keen-auth-body .keen-auth-card .meta[id$="-meta"],
body.keen-auth-body .keen-auth-card .meta[id$="-success"] {
  display: block;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--status-ok) 22%, var(--border));
  background: color-mix(in srgb, var(--status-ok) 10%, var(--card));
  color: color-mix(in srgb, var(--status-ok) 82%, var(--ink));
}

body.keen-auth-body .keen-auth-card .keen-auth-meta-list li {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 93%, var(--bg-accent));
  line-height: 1.45;
}

body.keen-auth-body .billing-return-card .billing-status-tag {
  align-self: flex-start;
}

body.keen-auth-body .keen-auth-card .btn-link:focus-visible,
body.keen-auth-body .keen-auth-card .btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    0 10px 20px rgba(15, 23, 42, 0.08);
}

body.keen-auth-body .keen-auth-card[data-auth-state="loading"] {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow:
    0 28px 72px rgba(15, 23, 42, 0.14),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

body.keen-auth-body .keen-auth-card[data-auth-state="success"] {
  border-color: color-mix(in srgb, var(--status-ok) 24%, var(--border));
  box-shadow:
    0 28px 72px rgba(15, 23, 42, 0.14),
    inset 0 0 0 1px color-mix(in srgb, var(--status-ok) 10%, transparent);
}

body.keen-auth-body .keen-auth-card[data-auth-state="warning"] {
  border-color: color-mix(in srgb, var(--status-warn) 24%, var(--border));
  box-shadow:
    0 28px 72px rgba(15, 23, 42, 0.14),
    inset 0 0 0 1px color-mix(in srgb, var(--status-warn) 10%, transparent);
}

body.keen-auth-body .keen-auth-card[data-auth-state="error"] {
  border-color: color-mix(in srgb, var(--status-down) 24%, var(--border));
  box-shadow:
    0 28px 72px rgba(15, 23, 42, 0.14),
    inset 0 0 0 1px color-mix(in srgb, var(--status-down) 11%, transparent);
}

body.keen-auth-body .keen-auth-card[data-auth-state="success"] .section-kicker {
  color: color-mix(in srgb, var(--status-ok) 85%, var(--ink));
}

body.keen-auth-body .keen-auth-card[data-auth-state="warning"] .section-kicker {
  color: color-mix(in srgb, var(--status-warn) 85%, var(--ink));
}

body.keen-auth-body .keen-auth-card[data-auth-state="error"] .section-kicker {
  color: color-mix(in srgb, var(--status-down) 85%, var(--ink));
}

body.keen-auth-body .keen-auth-card[data-auth-state="loading"] .keen-auth-loading {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

body.keen-auth-body .keen-auth-card[data-auth-state="error"] .keen-auth-loading {
  border-color: color-mix(in srgb, var(--status-down) 26%, var(--border));
  background: color-mix(in srgb, var(--status-down) 9%, var(--card));
}

body.keen-auth-body .keen-auth-card[data-auth-state="warning"] [role="status"].meta,
body.keen-auth-body .keen-auth-card[data-auth-state="warning"] .meta[id$="-meta"],
body.keen-auth-body .keen-auth-card[data-auth-state="warning"] .meta[id$="-success"] {
  border-color: color-mix(in srgb, var(--status-warn) 24%, var(--border));
  background: color-mix(in srgb, var(--status-warn) 9%, var(--card));
  color: color-mix(in srgb, var(--status-warn) 84%, var(--ink));
}

body.keen-auth-body .keen-auth-card[data-auth-state="error"] [role="status"].meta,
body.keen-auth-body .keen-auth-card[data-auth-state="error"] .meta[id$="-meta"],
body.keen-auth-body .keen-auth-card[data-auth-state="error"] .meta[id$="-success"] {
  border-color: color-mix(in srgb, var(--status-down) 24%, var(--border));
  background: color-mix(in srgb, var(--status-down) 9%, var(--card));
  color: color-mix(in srgb, var(--status-down) 84%, var(--ink));
}

body.keen-auth-body .keen-auth-card[data-auth-state="warning"] .keen-auth-subpanel {
  border-color: color-mix(in srgb, var(--status-warn) 22%, var(--border));
  background: color-mix(in srgb, var(--status-warn) 8%, var(--card));
}

body.keen-auth-body .keen-auth-card[data-auth-state="error"] .keen-auth-subpanel {
  border-color: color-mix(in srgb, var(--status-down) 22%, var(--border));
  background: color-mix(in srgb, var(--status-down) 8%, var(--card));
}

body.keen-auth-body .auth-inline-progress {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
}

body.keen-auth-body .mfa-code-input {
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.24em;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 96%, white 4%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body.keen-auth-body .mfa-code-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.keen-auth-body .billing-return-card .billing-status-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.8;
}

body.keen-auth-body .login-divider {
  margin: 4px 0;
  color: var(--muted);
}

body.keen-auth-body .login-divider::before,
body.keen-auth-body .login-divider::after {
  background: rgba(20, 33, 38, 0.1);
}

body.keen-auth-body .login-oauth-btn {
  min-height: 46px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  font-weight: 700;
}

@media (max-width: 960px) {
  body.keen-auth-body {
    padding: 16px;
  }

  .keen-auth-layout,
  .keen-auth-layout--action,
  .keen-auth-layout--billing {
    min-height: calc(100vh - 32px);
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .keen-auth-aside {
    gap: 16px;
  }

  .keen-auth-copy h1 {
    max-width: none;
  }

  .keen-auth-card.card {
    padding: 18px;
    border-radius: 22px;
  }
}

@media (max-width: 640px) {
  .keen-auth-feature,
  .keen-auth-note-card,
  .keen-auth-subpanel {
    padding: 14px 16px;
    border-radius: 18px;
  }

  .keen-auth-inline-links,
  .keen-auth-cta-row,
  .billing-actions {
    align-items: stretch;
  }

  .keen-auth-cta-row .btn,
  .billing-actions .btn,
  .keen-auth-card .login-oauth-btn,
  .keen-auth-inline-links .btn-link {
    width: 100%;
    justify-content: center;
  }

  .keen-auth-card .btn-link {
    align-self: stretch;
  }

  .keen-auth-card-header h2 {
    font-size: clamp(1.35rem, 1.2rem + 0.35vw, 1.55rem);
  }

  .keen-auth-card #submit,
  .keen-auth-card #password-reset-submit,
  .keen-auth-card #mfa-submit,
  .keen-auth-card .login-oauth-btn,
  .keen-auth-cta-row .btn {
    min-height: 44px;
  }

  body.keen-auth-body .mfa-code-input {
    letter-spacing: 0.2em;
    font-size: 1.2rem;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card .modal-actions,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card .onboarding-actions {
    justify-content: stretch;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card .modal-actions .btn,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card .onboarding-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-height: 860px) {
  html[data-app-shell-variant="keen-demo1-light-header"] .modal-overlay {
    align-items: flex-start;
    overflow: auto;
    overscroll-behavior: contain;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card,
  html[data-app-shell-variant="keen-demo1-light-header"] .modal-card-onboarding {
    max-height: calc(100vh - 26px);
    overflow: auto;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card .modal-actions {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: color-mix(in srgb, var(--card) 94%, var(--bg-accent));
    border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .modal-card-onboarding .onboarding-close-btn {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--card) 92%, var(--bg-accent));
  }
}

body.keen-legal-body {
  display: block;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(137, 80, 252, 0.1), transparent 32%),
    linear-gradient(180deg, #eef3f8 0%, #e6edf5 100%);
}

.keen-legal-site {
  width: min(1160px, 100%);
  min-height: calc(100vh - 48px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
}

.keen-legal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(20, 33, 38, 0.08);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.keen-legal-brand {
  display: inline-flex;
  align-items: center;
}

.keen-legal-wordmark {
  width: min(100%, 190px);
  height: auto;
  display: block;
}

.keen-legal-nav-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.keen-legal-nav-links a {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.keen-legal-nav-links a:hover {
  color: var(--ink);
}

.keen-legal-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.keen-legal-hero {
  display: grid;
  gap: 8px;
  padding: 24px 26px;
  border-radius: 24px;
  border: 1px solid rgba(20, 33, 38, 0.08);
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82));
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.12);
}

.keen-legal-hero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 1.72rem + 0.52vw, 2.35rem);
  letter-spacing: -0.03em;
}

.keen-legal-hero p {
  max-width: 72ch;
}

.keen-legal-card {
  padding: 24px 26px;
  border-radius: 24px;
  border: 1px solid rgba(20, 33, 38, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.11);
  min-width: 0;
}

.keen-legal-card p + p {
  margin-top: 10px;
}

.keen-legal-not-found {
  width: min(760px, 100%);
  margin: auto;
  display: grid;
  gap: 10px;
  text-align: left;
}

.keen-legal-not-found-code {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--ink);
}

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

.keen-legal-footer {
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(20, 33, 38, 0.08);
  background: rgba(255, 255, 255, 0.74);
}

.keen-legal-footer-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.keen-legal-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.keen-legal-footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.keen-legal-footer-links a:hover {
  color: var(--ink);
}

@media (max-width: 960px) {
  body.keen-legal-body {
    padding: 16px;
  }

  .keen-legal-site {
    min-height: calc(100vh - 32px);
  }
}

@media (max-width: 760px) {
  .keen-legal-nav {
    padding: 12px;
  }

  .keen-legal-nav-links {
    display: none;
  }

  .keen-legal-hero,
  .keen-legal-card {
    padding: 18px;
    border-radius: 20px;
  }

  .keen-legal-actions .btn,
  .keen-legal-nav-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .keen-legal-footer-copy {
    align-items: flex-start;
  }
}

.auth-action-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.auth-inline-progress {
  min-height: 1.25rem;
  margin-top: 0.25rem;
}

.auth-action-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: auth-action-spin 0.72s linear infinite;
}

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

h1 {
  margin: 0;
  font-size: clamp(1.75rem, 1.6rem + 0.65vw, 2rem);
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.95rem;
}

label {
  font-size: 0.95rem;
  font-weight: 500;
}

body:not(.app-body) input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 1rem;
  background: #fff;
}

body:not(.app-body) select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 1rem;
  background: #fff;
}

body:not(.app-body) textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 1rem;
  background: #fff;
  resize: vertical;
}

body:not(.app-body) input:focus {
  outline: 2px solid rgba(27, 122, 107, 0.25);
  border-color: var(--accent);
}

body:not(.app-body) textarea:focus {
  outline: 2px solid rgba(27, 122, 107, 0.25);
  border-color: var(--accent);
}

body:not(.app-body) select:focus {
  outline: 2px solid rgba(27, 122, 107, 0.25);
  border-color: var(--accent);
}

body:not(.app-body) button {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.btn-small {
  width: auto;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 10px;
}

.btn-large {
  width: auto;
  padding: 14px 56px;
  font-size: 1.1rem;
  border-radius: 12px;
}

.btn-wiggle {
  animation: wiggle 5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes wiggle {
  0%,
  84% {
    transform: translateX(0) rotate(0deg);
  }
  88% {
    transform: translateX(-2px) rotate(-1.5deg);
  }
  92% {
    transform: translateX(2px) rotate(1.5deg);
  }
  96% {
    transform: translateX(-1px) rotate(-1deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

body:not(.app-body) button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(31, 111, 235, 0.24);
  background: var(--accent-dark);
}

body:not(.app-body) a:focus-visible,
body:not(.app-body) button:focus-visible,
body:not(.app-body) input:focus-visible,
body:not(.app-body) select:focus-visible,
body:not(.app-body) textarea:focus-visible,
body:not(.app-body) .btn:focus-visible {
  outline: 2px solid rgba(31, 111, 235, 0.35);
  outline-offset: 2px;
}

body:not(.app-body) button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .app-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-app-shell-variant="keen-demo1-light-header"] .app-content select,
html[data-app-shell-variant="keen-demo1-light-header"] .app-content textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 96%, white 4%);
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.45;
}

html[data-app-shell-variant="keen-demo1-light-header"] .app-content textarea {
  resize: vertical;
}

html[data-app-shell-variant="keen-demo1-light-header"] .app-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
html[data-app-shell-variant="keen-demo1-light-header"] .app-content select:focus,
html[data-app-shell-variant="keen-demo1-light-header"] .app-content textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.btn-subtle {
  background: rgba(31, 111, 235, 0.18);
  color: #1f6feb;
  border: 1px solid rgba(31, 111, 235, 0.45);
  box-shadow: none;
}

.btn-subtle:hover {
  background: rgba(31, 111, 235, 0.25);
  color: #1f6feb;
  transform: none;
  box-shadow: none;
}

.notice {
  position: relative;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  font-size: 0.9rem;
  color: var(--muted);
}

.notice::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 38%, transparent);
}

.notice.notice-info {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  color: var(--ink);
}

.notice.notice-info::before {
  background: color-mix(in srgb, var(--accent) 66%, transparent);
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  width: auto;
  display: inline-flex;
  align-self: flex-start;
  box-shadow: none;
  transform: none;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 2px;
  text-align: left;
}

.btn-link:hover {
  color: var(--ink);
  text-decoration: underline;
  background: none;
  box-shadow: none;
  transform: none;
}

.btn-link:active,
.btn-link:focus-visible {
  background: none;
  box-shadow: none;
  transform: none;
}

#login-form {
  display: grid;
  gap: 12px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7f8ea0;
  font-size: 0.85rem;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

.login-oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #1f2937;
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

.login-oauth-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #b8c4d1;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.login-oauth-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

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

.device-option {
  border: 1px solid var(--border);
  background: #f8fafc;
  color: #94a3b8;
  border-radius: 12px;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.device-option svg {
  width: 18px;
  height: 18px;
}

.device-option.is-active {
  border-color: rgba(31, 111, 235, 0.45);
  background: rgba(31, 111, 235, 0.18);
  color: #1f6feb;
  box-shadow: inset 0 0 0 1px rgba(31, 111, 235, 0.2);
}

.device-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.device-select-input {
  display: none;
}

.panel {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.endpoint-row {
  display: grid;
  gap: 12px;
}

@media (min-width: 960px) {
  .endpoint-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.error {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #f1416c 24%, var(--border));
  background: color-mix(in srgb, #f1416c 10%, var(--card));
  color: #b93833;
  font-size: 0.9rem;
}

.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #cbd5f5;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: help;
  background: #f8fafc;
  position: relative;
}

.help-tip:hover {
  color: #1f6feb;
  border-color: rgba(31, 111, 235, 0.4);
  background: rgba(31, 111, 235, 0.08);
}

.help-tip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #f8fafc;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  line-height: 1.3;
  max-width: 220px;
  width: max-content;
  white-space: normal;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 5;
}

.help-tip::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #0f172a transparent transparent;
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 5;
}

.help-tip:hover::after,
.help-tip:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 900px) {
  body.app-body {
    background-size: 92px 92px, 92px 92px;
    background-position: 0 0, 46px 46px;
  }
}

.help-links {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.help-links a {
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
}

.help-links a:hover {
  text-decoration: underline;
}

.help-section h3 {
  margin-bottom: 6px;
}

.help-section h3 a {
  color: inherit;
  text-decoration: none;
}

.help-section h3 a:hover {
  text-decoration: underline;
}

.help-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.help-list li {
  margin: 6px 0;
}

.refer-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
}

.refer-steps li {
  margin: 6px 0;
}

.help-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-article-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-accent);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
  box-shadow: none;
  transform: none;
}

.help-article-entry:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-accent));
  box-shadow: none;
  transform: none;
}

.help-article-entry-body {
  display: grid;
  gap: 2px;
}

.help-article-entry-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.help-article-entry-desc {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.help-article-entry-arrow {
  color: var(--muted);
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

.help-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-bottom: 16px;
  box-shadow: none;
  transform: none;
}

.help-back-link:hover {
  color: var(--accent);
  box-shadow: none;
  transform: none;
}

.faq-item {
  margin-top: 12px;
}

.faq-question {
  font-weight: 600;
}

.app-content {
  width: 100%;
  max-width: 1264px;
  justify-self: center;
  padding: 24px 40px 40px 20px;
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.app-content.is-builder-page {
  max-width: none;
  justify-self: stretch;
  padding: 28px 24px 44px 0;
}

.page-workspace-summary {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.page-workspace-recover {
  justify-self: start;
  width: auto;
}

.funnels-page-header {
  display: none;
}

.keen-shell {
  display: none;
}

/* Keen authenticated shell tokens and layout contracts. */
html[data-app-shell-variant="keen-demo1-light-header"] {
  --accent: #3699ff;
  --accent-dark: #187de4;
  --primary: #3699ff;
  --app-bg-funnel-tile: none;
  --keen-shell-topbar-bg: #ffffff;
  --keen-shell-topbar-border: #e4e8ef;
  --keen-shell-topbar-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
  --keen-shell-pill-bg:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.12), transparent 36%),
    linear-gradient(180deg, #fbfdff, #f4f8fe);
  --keen-shell-pill-border: #dbe3ef;
  --keen-shell-pill-ink: var(--ink);
  --keen-shell-chip-bg: rgba(255, 255, 255, 0.7);
  --keen-shell-chip-hover: #eef4fb;
  --keen-shell-chip-ink: #5e6278;
  --keen-shell-chip-active-bg:
    linear-gradient(180deg, #f7fbff, #eef4fb);
  --keen-shell-chip-active-ink: #181c32;
  --keen-shell-chip-border: #dbe2ed;
  --keen-shell-nav-rail-bg: rgba(255, 255, 255, 0.78);
  --keen-shell-nav-rail-border: #e4e9f1;
  --keen-density-card-pad: 14px;
  --keen-density-card-radius: 8px;
  --keen-density-table-gap: 10px;
  --keen-density-toolbar-pad: 12px;
  --keen-density-detail-pad: 14px;
  --keen-density-detail-radius: 8px;
  --keen-modal-confirm-max: 460px;
  --keen-modal-danger-max: 460px;
  --keen-modal-security-max: 520px;
  --fs-keen-header-height: 76px;
  --keen-header-radius: 0px;
  --keen-header-pad-y: 10px;
  --keen-header-pad-x: 24px;
  --keen-header-gap-x: 14px;
  --keen-nav-link-h: 32px;
  --keen-nav-link-size: 0.8rem;
  --keen-nav-link-weight: 600;
  --keen-utility-link-h: 32px;
  --keen-utility-link-size: 0.78rem;
  --keen-utility-link-weight: 600;
  --keen-account-radius: 10px;
  --keen-content-rail: min(1360px, calc(100vw - 64px));
  --keen-sidebar-width: 220px;
  --keen-sidebar-collapsed-width: 56px;
  --keen-surface-radius: 8px;
  --keen-control-radius: 8px;
  --keen-surface-border: color-mix(in srgb, var(--border) 92%, transparent);
  --keen-surface-shadow: 0px 0px 20px 0px rgba(76,87,125,0.02);
  --keen-surface-shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.06);
}

html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="light"] {
  color-scheme: light;
  --bg: #f5f8fa;
  --bg-accent: #f9f9f9;
  --ink: #181c32;
  --text: #3f4254;
  --muted: #7e8299;
  --card: #ffffff;
  --border: #eff2f5;
  --border-strong: #e4e6ef;
  --shadow: 0 3px 4px rgba(15, 23, 42, 0.03);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.03);
  --keen-shell-chip-bg: transparent;
  --keen-shell-chip-hover: color-mix(in srgb, var(--accent) 8%, transparent);
  --keen-shell-chip-ink: #5e6278;
  --keen-shell-chip-active-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --keen-shell-chip-active-ink: #1b84ff;
  --keen-shell-chip-border: transparent;
  --keen-shell-nav-rail-bg: transparent;
  --keen-shell-nav-rail-border: transparent;
}

html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] {
  color-scheme: dark;
  --bg: #0f1724;
  --bg-accent: #152133;
  --ink: #eef3fb;
  --text: #d8e1ee;
  --muted: #8fa0b8;
  --card: #132033;
  --border: rgba(143, 160, 184, 0.22);
  --border-strong: rgba(143, 160, 184, 0.34);
  --shadow: 0 20px 42px rgba(2, 6, 23, 0.4);
  --shadow-soft: 0 16px 34px rgba(2, 6, 23, 0.3);
  --keen-shell-topbar-bg: #0f1724;
  --keen-shell-topbar-border: rgba(143, 160, 184, 0.16);
  --keen-shell-topbar-shadow: 0 1px 0 rgba(143, 160, 184, 0.16);
  --keen-shell-pill-bg: linear-gradient(135deg, rgba(54, 153, 255, 0.18), rgba(137, 80, 252, 0.16));
  --keen-shell-pill-border: rgba(96, 165, 250, 0.22);
  --keen-shell-pill-ink: var(--ink);
  --keen-shell-chip-bg: rgba(255, 255, 255, 0.05);
  --keen-shell-chip-hover: rgba(255, 255, 255, 0.09);
  --keen-shell-chip-ink: var(--text);
  --keen-shell-chip-active-bg: rgba(54, 153, 255, 0.16);
  --keen-shell-chip-active-ink: var(--ink);
  --keen-shell-chip-border: rgba(143, 160, 184, 0.18);
  --keen-shell-nav-rail-bg: rgba(16, 28, 44, 0.56);
  --keen-shell-nav-rail-border: rgba(143, 160, 184, 0.22);
}

html[data-app-shell-variant="keen-demo1-light-header"] body.app-body {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  padding-left: var(--keen-sidebar-width);
  transition: padding-left 0.2s ease;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.08), transparent 30%),
    radial-gradient(circle at bottom left, rgba(137, 80, 252, 0.07), transparent 28%);
  background-size: auto, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top right, bottom left;
  background-attachment: fixed, fixed;
}

html[data-app-shell-variant="keen-demo1-light-header"] .app-shell {
  grid-template-columns: 1fr;
  column-gap: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .app-sidebar {
  display: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .app-content {
  width: 100%;
  max-width: var(--keen-content-rail);
  margin: 0 auto;
  padding: calc(var(--fs-keen-header-height) + 8px) 24px 42px;
  justify-items: stretch;
}

html[data-app-shell-variant="keen-demo1-light-header"] .app-content.is-builder-page {
  max-width: min(1440px, calc(100vw - 48px));
  margin: 0 auto;
  padding: calc(var(--fs-keen-header-height) + 8px) 24px 44px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}

html[data-app-shell-variant="keen-demo1-light-header"] #app-sidebar-shell {
  position: fixed;
  top: var(--fs-keen-header-height);
  left: 0;
  bottom: 0;
  width: var(--keen-sidebar-width);
  z-index: 30;
  overflow: hidden;
  transition: width 0.2s ease;
}

html[data-app-shell-variant="keen-demo1-light-header"]:has(#keen-shell-sidebar[data-collapsed="true"]) #app-sidebar-shell {
  width: var(--keen-sidebar-collapsed-width);
}

html[data-app-shell-variant="keen-demo1-light-header"]:has(#keen-shell-sidebar[data-collapsed="true"]) body.app-body {
  padding-left: var(--keen-sidebar-collapsed-width);
}

@media (max-width: 767px) {
  html[data-app-shell-variant="keen-demo1-light-header"] #app-sidebar-shell {
    display: none;
  }
  html[data-app-shell-variant="keen-demo1-light-header"] body.app-body {
    padding-left: 0 !important;
    transition: none;
  }
}

/* ─── Keen sidebar component ─── */

.keen-shell-sidebar {
  display: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--keen-shell-topbar-bg);
  border-right: 1px solid var(--keen-shell-topbar-border);
  font-family: "Inter", "Segoe UI", sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}

.keen-sidebar-nav {
  flex: 1;
  padding: 8px 0;
}

.keen-sidebar-section {
  margin-bottom: 4px;
}

.keen-sidebar-section-label {
  display: block;
  padding: 12px 16px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.keen-shell-sidebar[data-collapsed="true"] .keen-sidebar-section-label {
  display: none;
}

.keen-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 1px 8px;
  border-radius: 8px;
  font-size: 0.815rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: calc(100% - 16px);
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: none;
  font-family: "Inter", "Segoe UI", sans-serif;
}

.keen-sidebar-link:hover {
  background: var(--keen-shell-chip-hover);
  color: var(--ink);
  text-decoration: none;
}

.keen-sidebar-link.is-active,
.keen-sidebar-link.active {
  background: var(--keen-shell-chip-active-bg);
  color: var(--keen-shell-chip-active-ink);
  font-weight: 600;
}

.keen-sidebar-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.7;
}

.keen-sidebar-link-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keen-shell-sidebar[data-collapsed="true"] .keen-sidebar-link {
  justify-content: center;
  padding: 8px;
  gap: 0;
  margin: 1px 6px;
  width: calc(100% - 12px);
}

.keen-shell-sidebar[data-collapsed="true"] .keen-sidebar-link-label {
  display: none;
}

.keen-sidebar-footer {
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
}

.keen-sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 6px 16px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
  transition: color 0.12s ease;
}

.keen-sidebar-collapse-btn:hover {
  color: var(--ink);
}

.keen-sidebar-collapse-icon {
  transition: transform 0.2s ease;
}

.keen-shell-sidebar[data-collapsed="true"] .keen-sidebar-collapse-icon {
  transform: rotate(180deg);
}

.keen-shell-sidebar[data-collapsed="true"] .keen-sidebar-collapse-btn {
  justify-content: center;
  padding: 6px 0 10px;
}

.keen-shell-header {
  display: flex;
  align-items: center;
  gap: var(--keen-header-gap-x);
  padding: var(--keen-header-pad-y) var(--keen-header-pad-x);
  border-radius: var(--keen-header-radius);
  border: none;
  background: var(--keen-shell-topbar-bg);
  box-shadow: var(--keen-shell-topbar-shadow);
  font-family: "Inter", "Segoe UI", sans-serif;
}

.keen-shell-leading {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.keen-shell-brand-block {
  display: grid;
  gap: 6px;
  flex: 0 0 auto;
}

.keen-shell-brand-link,
.sidebar-brand {
  color: inherit;
  text-decoration: none;
}

.keen-shell-brand-link {
  width: fit-content;
  border-radius: 10px;
}

.sidebar-brand {
  display: inline-grid;
  border-radius: 10px;
}

.keen-brand-wordmark {
  width: 178px;
  max-width: 100%;
  height: auto;
  display: block;
}

.keen-shell-version {
  text-align: left;
  margin: 0;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.keen-workspace-pill,
.keen-shell-account,
.keen-shell-utility-link {
  width: auto;
}

.keen-workspace-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: clamp(180px, 18vw, 280px);
  max-width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--keen-shell-pill-border);
  background: color-mix(in srgb, var(--card) 94%, var(--bg-accent));
  color: var(--keen-shell-pill-ink);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
  transform: none;
}

.keen-workspace-pill:hover,
.keen-shell-account:hover,
.keen-shell-utility-link:hover {
  transform: translateY(0);
  box-shadow: none;
}

.keen-workspace-pill:hover {
  background: var(--keen-shell-pill-bg);
  border-color: var(--keen-shell-pill-border);
  color: var(--keen-shell-pill-ink);
}

.keen-workspace-pill-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.keen-workspace-pill-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.keen-workspace-pill-value {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
}

.keen-workspace-pill-value span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keen-workspace-pill-separator {
  color: var(--muted);
  flex: 0 0 auto;
}

.keen-workspace-pill-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.keen-workspace-pill-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--card) 88%, var(--bg-accent));
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.keen-workspace-pill-status.is-success {
  background: color-mix(in srgb, var(--status-ok) 16%, transparent);
  color: var(--status-ok);
}

.keen-workspace-pill-status.is-error {
  background: color-mix(in srgb, var(--status-down) 14%, transparent);
  color: var(--status-down);
}

/* Workspace switcher popover */
.keen-ws-switcher-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.keen-ws-switcher-wrap--drawer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.keen-ws-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 240px;
  max-width: min(340px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.13), 0 2px 8px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}

.keen-ws-popover--drawer {
  position: static;
  max-width: none;
  margin-top: 8px;
  box-shadow: none;
  border-radius: 10px;
}

.keen-ws-popover-group {
  padding: 6px 0 2px;
}

.keen-ws-popover-group + .keen-ws-popover-group {
  border-top: 1px solid var(--border);
  margin-top: 2px;
}

.keen-ws-popover-group-heading {
  padding: 6px 14px 4px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.keen-ws-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.keen-ws-popover-item:hover,
.keen-ws-popover-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  outline: none;
}

.keen-ws-popover-item.is-active {
  color: var(--accent);
  font-weight: 600;
}

.keen-ws-popover-item-check {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
}

.keen-ws-popover-item-check::after {
  content: "";
  display: none;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) translateY(-1px);
}

.keen-ws-popover-item.is-active .keen-ws-popover-item-check::after {
  display: block;
}

.keen-ws-popover-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keen-ws-popover-empty {
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--muted);
}

.keen-ws-popover-footer {
  border-top: 1px solid var(--border);
  padding: 4px 0;
}

.keen-ws-popover-footer-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.keen-ws-popover-footer-btn:hover,
.keen-ws-popover-footer-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
  outline: none;
}

.keen-shell-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 1px;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--keen-shell-nav-rail-bg);
  box-shadow: none;
}

.keen-shell-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--keen-nav-link-h);
  padding: 0 9px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--keen-nav-link-size);
  font-weight: var(--keen-nav-link-weight);
  white-space: nowrap;
  box-shadow: none;
  transition: background 160ms ease, color 160ms ease;
}

.keen-shell-nav-link:visited {
  color: var(--muted);
}

.keen-shell-nav-link:hover,
.keen-shell-nav-link.active,
.keen-shell-nav-link.is-active {
  background: transparent;
  color: color-mix(in srgb, var(--accent) 80%, var(--ink));
  border-color: transparent;
  box-shadow: none;
  text-decoration: none;
}

.keen-shell-nav-link.active,
.keen-shell-nav-link.is-active {
  position: relative;
}

.keen-shell-nav-link.active::after,
.keen-shell-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 82%, var(--ink));
}

.keen-shell-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 8px;
  min-width: 0;
}

.keen-shell-utility-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--keen-utility-link-h);
  padding: 0 8px;
  border-radius: 8px;
  border: 0;
  background: var(--keen-shell-chip-bg);
  color: var(--keen-shell-chip-ink);
  text-decoration: none;
  font-size: var(--keen-utility-link-size);
  font-weight: var(--keen-utility-link-weight);
  white-space: nowrap;
  box-shadow: none;
  transition: background 160ms ease, color 160ms ease;
}

.keen-shell-icon-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
}

.keen-shell-icon-btn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.keen-shell-icon-btn::after,
.keen-shell-account--compact::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 70;
  width: max-content;
  max-width: 180px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-3px);
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.keen-shell-icon-btn:hover::after,
.keen-shell-icon-btn:focus-visible::after,
.keen-shell-account--compact:hover::after,
.keen-shell-account--compact:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.keen-shell-notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 2px var(--keen-shell-topbar-bg);
}

.keen-shell-notification-dot.is-hidden {
  display: none;
}

.keen-notifications-tray {
  position: absolute;
  top: calc(100% + 12px);
  right: 44px;
  z-index: 80;
  width: min(360px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 96px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.keen-notifications-tray[hidden] {
  display: none;
}

.keen-notifications-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.keen-notifications-kicker {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.keen-notifications-header h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
}

.keen-notifications-close,
.keen-notifications-footer-btn {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 88%, var(--bg-accent));
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.keen-notifications-close {
  padding: 6px 8px;
}

.keen-notifications-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  overflow: auto;
}

.keen-notification-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg-accent));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.keen-notification-item:hover,
.keen-notification-item:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  outline: none;
}

.keen-notification-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.12);
}

.keen-notification-item.is-error .keen-notification-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.keen-notification-item.is-warning .keen-notification-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}

.keen-notification-item.is-ok .keen-notification-dot {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.keen-notification-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.keen-notification-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
}

.keen-notification-body,
.keen-notification-meta {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.keen-notifications-empty,
.keen-notifications-state {
  display: grid;
  gap: 4px;
  padding: 22px 18px;
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
}

.keen-notifications-empty[hidden],
.keen-notifications-state[hidden] {
  display: none;
}

.keen-notifications-empty strong,
.keen-notifications-state strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.keen-notifications-state--error strong {
  color: #b42318;
}

.keen-notifications-footer {
  padding: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.keen-notifications-footer-btn {
  width: 100%;
  min-height: 34px;
}

.keen-shell-utility-link:visited {
  color: var(--keen-shell-chip-ink);
}

.keen-shell-utility-link:hover,
.keen-shell-utility-link.active,
.keen-shell-utility-link.is-active {
  background: transparent;
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
  border-color: transparent;
  box-shadow: none;
  transform: none;
  text-decoration: none;
}

.keen-shell-account {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  border-radius: var(--keen-account-radius);
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: transparent;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.keen-shell-account--compact {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
}

.keen-shell-account:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--keen-shell-chip-border);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

.keen-shell-account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.keen-shell-account-avatar.has-photo {
  color: transparent;
}

.keen-shell-account-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.keen-shell-account-copy--topbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.keen-shell-account-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.keen-shell-account-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.keen-shell-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--keen-shell-chip-border);
  border-radius: 16px;
  background: var(--keen-shell-chip-bg);
  color: var(--keen-shell-chip-active-ink);
  box-shadow: none;
}

.keen-shell-menu-toggle:hover {
  background: var(--keen-shell-chip-active-bg);
  border-color: var(--keen-shell-chip-border);
  color: var(--keen-shell-chip-active-ink);
  transform: none;
  box-shadow: none;
}

.keen-shell-menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.keen-shell-nav-link:focus-visible,
.keen-shell-utility-link:focus-visible,
.keen-shell-account:focus-visible,
.keen-workspace-pill:focus-visible,
.keen-shell-menu-toggle:focus-visible,
.keen-shell-brand-link:focus-visible,
.sidebar-brand:focus-visible,
.keen-drawer-nav-link:focus-visible,
.keen-shell-drawer-close:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    0 10px 20px rgba(15, 23, 42, 0.1);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-header a,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-header button {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Inter", "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-header button:hover,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-header a:hover,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-drawer button:hover {
  transform: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-nav {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border) 70%, transparent) transparent;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-nav::-webkit-scrollbar {
  height: 6px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 999px;
}

.keen-shell-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.keen-shell-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.keen-shell-drawer-panel {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 24px));
  height: 100%;
  padding: 20px;
  border-left: 1px solid color-mix(in srgb, var(--keen-shell-topbar-border) 92%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 40%),
    color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow: -28px 0 54px rgba(15, 23, 42, 0.24);
  display: grid;
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

html[data-keen-shell-drawer-open="true"] body.app-body {
  overflow: hidden;
}

html[data-keen-shell-drawer-open="true"] .keen-shell-drawer {
  opacity: 1;
  pointer-events: auto;
}

html[data-keen-shell-drawer-open="true"] .keen-shell-drawer-panel {
  transform: translateX(0);
}

.keen-shell-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.keen-shell-drawer-kicker {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.keen-shell-drawer-title {
  margin: 0;
  font-size: 1.24rem;
  color: var(--ink);
}

.keen-shell-drawer-close {
  border: 1px solid var(--keen-shell-chip-border);
  border-radius: 999px;
  background: var(--keen-shell-chip-bg);
  color: var(--keen-shell-chip-active-ink);
  min-height: 38px;
  padding: 0 14px;
  box-shadow: none;
}

.keen-shell-drawer-close:hover {
  background: var(--keen-shell-chip-active-bg);
  border-color: var(--keen-shell-chip-border);
  color: var(--keen-shell-chip-active-ink);
  transform: none;
  box-shadow: none;
}

.keen-shell-drawer-nav {
  display: grid;
  gap: 10px;
}

.keen-drawer-nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--keen-shell-chip-border);
  background: var(--keen-shell-chip-bg);
  color: var(--keen-shell-chip-ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.keen-drawer-nav-link:hover,
.keen-drawer-nav-link.active,
.keen-drawer-nav-link.is-active {
  background: var(--keen-shell-chip-active-bg);
  border-color: var(--keen-shell-chip-border);
  color: var(--keen-shell-chip-active-ink);
  transform: none;
}

.keen-workspace-pill--drawer,
.keen-drawer-account {
  width: 100%;
  min-width: 0;
}

.keen-drawer-account {
  justify-content: flex-start;
}

html[data-app-shell-variant="keen-demo1-light-header"] .app-topbar {
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 95%, white 5%), color-mix(in srgb, var(--card) 84%, var(--bg-accent)));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

#page-subtitle {
  min-height: 0;
}

.funnels-grid {
  display: grid;
  gap: var(--space-2);
}

.funnels-panel-meta {
  margin-bottom: 6px;
}

.funnels-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.funnels-list.is-empty {
  grid-template-columns: 1fr;
}

.funnels-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 8px 0 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.empty-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
  height: var(--fs-banner-min-h);
  min-height: var(--fs-banner-min-h);
  padding: var(--fs-header-pad-y) var(--fs-header-pad-x);
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: linear-gradient(135deg, #f3efe7, #ffffff);
  margin-bottom: 0;
}

.empty-banner > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.empty-banner-title {
  font-size: clamp(1.16rem, 1.08rem + 0.35vw, 1.3rem);
  line-height: 1.15;
  font-weight: 650;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-banner .meta {
  font-size: 1rem;
  font-weight: 500;
  color: #37475a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-banner .btn-large {
  height: 42px;
  padding: 0 18px;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}

.empty-banner .btn-wiggle {
  animation: bannerNudge 3.1s ease-in-out infinite;
  transform-origin: center;
}

.account-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
  min-height: var(--fs-banner-min-h);
  padding: var(--fs-header-pad-y) var(--fs-header-pad-x);
  border-radius: 16px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  background: linear-gradient(135deg, #fef2f2, #fff7ed);
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.06);
}

.account-status-banner > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.account-status-banner-title {
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  font-weight: 700;
  color: #991b1b;
  line-height: 1.15;
}

.account-status-banner .meta {
  margin: 0;
  color: #7f1d1d;
}

@keyframes bannerNudge {
  0%,
  86%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  90% {
    transform: translateX(-1px) rotate(-0.7deg);
  }
  94% {
    transform: translateX(1px) rotate(0.7deg);
  }
  97% {
    transform: translateX(-0.5px) rotate(-0.4deg);
  }
}

.funnels-toolbar-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.funnels-toolbar .toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.toolbar-label {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.funnels-toolbar select {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  height: var(--fs-control-h);
  padding: 0 12px;
  background: #fff;
  font-size: 0.88rem;
}

.bulk-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bulk-actions {
  display: none;
  gap: 8px;
  align-items: center;
}

.bulk-group.has-selection .bulk-actions {
  display: inline-flex;
}

.bulk-group .bulk-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: var(--fs-control-h);
  padding: 0 12px;
  line-height: 1;
}

.bulk-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 2px;
}

.bulk-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--muted);
}

.bulk-select input {
  width: 16px;
  height: 16px;
}

.bulk-count {
  font-size: 0.82rem;
  color: #7b8792;
  margin-right: 4px;
}

.bulk-group.has-selection .bulk-count {
  color: var(--text);
  font-weight: 600;
}

.funnel-select {
  display: inline-flex;
  align-items: center;
}

.funnel-select input {
  width: 16px;
  height: 16px;
}

.btn.danger {
  border-color: #fecaca;
  color: #b91c1c;
}

.btn.danger:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.snapshots-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.snapshot-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-pill {
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, background 150ms ease;
}

.filter-pill:hover {
  border-color: rgba(27, 122, 107, 0.4);
}

.filter-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(27, 122, 107, 0.2);
}

.snapshot-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border-radius: 12px;
  background: #fbfcfe;
  border: 1px solid var(--border);
  flex-wrap: wrap;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.snapshot-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

.snapshot-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.snapshot-card h4 {
  margin: 0;
  font-size: 1rem;
}

.snapshot-card-title,
.snapshot-card-details,
.snapshot-card-status-wrap {
  min-width: 0;
}

.snapshot-card-title {
  display: grid;
  gap: 4px;
  flex: 1 1 180px;
}

.snapshot-card-details {
  align-self: center;
  flex: 2 1 320px;
}

.snapshot-card-status-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.snapshot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

.snapshot-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.snapshot-status.ok {
  background: #e6f7f2;
  color: #13795b;
}

.snapshot-status.warning {
  background: #fff7e6;
  color: #b45309;
}

.snapshot-status.error {
  background: #fdecea;
  color: #b93833;
}

.funnel-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--border);
  position: relative;
  z-index: 0;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.funnel-card:hover {
  border-color: #c8d3df;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.funnel-card.is-warning {
  border-left: 3px solid #d6b152;
}

.funnel-card.is-failing {
  border-left: 3px solid #d07171;
}

.funnel-card-select {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
  z-index: 3;
}

.funnel-card-select input {
  width: 16px;
  height: 16px;
}

.funnel-card.is-disabled {
  opacity: 0.78;
  filter: grayscale(0.16);
}

.funnel-card.is-disabled:hover {
  box-shadow: none;
  border-color: var(--border);
}

.funnel-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 32px;
}

.funnel-card-badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.funnel-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.funnel-title-wrap h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.funnel-card-body {
  display: grid;
  gap: 9px;
}

.funnel-health-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 3px 10px;
  font-size: 0.73rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.funnel-health-badge.is-ok {
  color: var(--status-ok);
  background: var(--status-ok-bg);
  border-color: rgba(31, 122, 79, 0.24);
}

.funnel-health-badge.is-warning {
  color: var(--status-warn);
  background: var(--status-warn-bg);
  border-color: rgba(154, 109, 18, 0.24);
}

.funnel-health-badge.is-error {
  color: var(--status-down);
  background: var(--status-down-bg);
  border-color: rgba(185, 56, 51, 0.24);
}

.funnel-health-badge.is-disabled,
.funnel-health-badge.is-idle {
  color: var(--status-idle);
  background: var(--status-idle-bg);
  border-color: rgba(100, 116, 139, 0.2);
}

.funnel-engine-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 3px 10px;
  font-size: 0.73rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.1);
}

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

.funnel-meta-item {
  display: grid;
  gap: 2px;
}

.funnel-meta-label {
  font-size: 0.72rem;
  color: #748393;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.funnel-meta-value {
  font-size: 0.84rem;
  color: #243341;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.funnel-warning {
  font-size: 0.9rem;
  color: #d97706;
  display: none;
  cursor: help;
}

.funnel-warning.visible {
  display: inline-flex;
}

.funnel-card h4 {
  margin: 0;
  font-size: 0.96rem;
}

.funnel-meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.toggle.is-reversed {
  flex-direction: row;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  width: 42px;
  height: 24px;
  background: #e5e7eb;
  border-radius: 999px;
  position: relative;
  transition: background 150ms ease;
}

.toggle-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.12);
  transition: transform 150ms ease;
}

.toggle input:checked + .toggle-slider {
  background: #22c55e;
}

.toggle input:checked + .toggle-slider::after {
  transform: translateX(18px);
}

.funnel-menu {
  position: relative;
  z-index: 2;
}

.menu-button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: none;
  color: #475569;
}

.menu-button:hover {
  background: #f8fafc;
  box-shadow: none;
  transform: none;
}

.menu-panel {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: none;
  min-width: 128px;
  z-index: 50;
}

.funnel-card.menu-open {
  z-index: 20;
}

.menu-panel.open {
  display: grid;
  gap: 4px;
}

.menu-item {
  border: none;
  background: #fff;
  padding: 6px 9px;
  text-align: left;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  color: #334155;
}

.menu-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.menu-item--danger {
  color: #b91c1c;
}

.menu-item--danger:hover {
  background: #fee2e2;
  color: #991b1b;
}

.funnel-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.funnel-card-actions .toggle {
  margin-left: 0;
}

.funnel-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 2;
  min-height: 108px;
  max-height: 142px;
  border-radius: 10px;
  background: #eef3f8;
  border: 1px solid var(--border);
  overflow: hidden;
}

.funnel-preview.empty {
  background: #f5f8fc;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  border-style: solid;
}

.funnel-preview.loading {
  background: #f3f6fa;
}

.preview-skeleton {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.preview-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.72) 50%, transparent 100%),
    linear-gradient(0deg, #e8eef4, #e8eef4);
  background-size: 180px 100%, 100% 100%;
  background-position: -180px 0, 0 0;
  background-repeat: no-repeat;
  animation: funnelPreviewShimmer 1.15s linear infinite;
}

@media (max-width: 1024px) {
  .funnel-preview {
    min-height: 98px;
    max-height: 124px;
  }
}

.funnel-preview .preview-status {
  z-index: 1;
  text-align: center;
  padding: 10px 14px;
}

.funnel-preview .preview-open-btn {
  margin-top: 8px;
  padding: 4px 12px;
  font-size: 0.78rem;
  line-height: 1.4;
  background: var(--card, #fff);
  color: var(--accent, #2563eb);
  border: 1px solid var(--accent, #2563eb);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.funnel-preview .preview-open-btn:hover {
  background: var(--accent, #2563eb);
  color: #fff;
}

.funnel-preview .preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation-name: previewFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.funnel-preview .preview-frame.is-ready {
  animation-play-state: running;
}

.funnel-preview .preview-frame.is-missing {
  display: none;
}

.funnel-preview.static .preview-frame {
  animation: none;
  opacity: 0;
}

.funnel-preview.static .preview-frame.is-ready {
  opacity: 1;
}

@keyframes funnelPreviewShimmer {
  0% {
    background-position: -180px 0, 0 0;
  }
  100% {
    background-position: 240px 0, 0 0;
  }
}

@keyframes previewFade {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .funnel-preview .preview-frame {
    animation: none;
    opacity: 0;
    animation-play-state: paused;
  }

  .funnel-preview .preview-frame.is-ready:first-child {
    opacity: 1;
  }
}

.detail-grid {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.detail-field {
  display: grid;
  gap: 6px;
}

.detail-inline-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.detail-inline-actions .btn {
  width: auto;
}

.test-run-toolbar {
  display: grid;
  gap: 8px;
  margin: 12px 0 14px;
}

.test-run-control {
  display: grid;
  gap: 6px;
  max-width: 360px;
}

.test-run-control label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}

.detail-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.detail-value {
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}

.detail-sub-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 10px;
}

.detail-sub-value {
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}

#funnel-detail-name {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 1rem;
  font-weight: 600;
  background: #fff;
  transition: border-color 150ms ease, background 150ms ease;
}

#funnel-detail-name.is-readonly {
  border-color: transparent;
  background: transparent;
  padding: 0;
}

#funnel-detail-name.is-readonly:focus {
  outline: none;
}

.detail-header h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.detail-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.detail-actions {
  display: grid;
  gap: 12px;
  align-items: start;
  justify-items: start;
  margin-left: auto;
}

.detail-actions .toggle {
  align-items: center;
}

.detail-input {
  width: 100%;
}

@media (max-width: 720px) {
  .detail-row {
    grid-template-columns: 1fr;
  }

  .account-grid .detail-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.detail-steps {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.detail-steps li {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #1f2937;
  font-size: 0.9rem;
}

.detail-title {
  display: grid;
  gap: 4px;
}

.detail-title input {
  font-size: 1.2rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  color: #0f172a;
  max-width: 360px;
  width: 100%;
}

.detail-title input[readonly] {
  background: #f8fafc;
  color: #475569;
}

.detail-save-status {
  min-height: 18px;
  transition: color 0.15s ease;
}
.detail-save-status[data-save-state="unsaved"] {
  color: var(--keen-color-warning, #b45309);
}
.detail-save-status[data-save-state="saving"] {
  color: var(--muted);
}
.detail-save-status[data-save-state="saving"]::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: detail-save-spin 0.6s linear infinite;
  margin-right: 5px;
  vertical-align: middle;
}
@keyframes detail-save-spin {
  to { transform: rotate(360deg); }
}
.detail-save-status[data-save-state="saved"] {
  color: var(--keen-color-success, #15803d);
}

.detail-actions {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.detail-edit-toggle {
  font-weight: 600;
}

.detail-edit-hint {
  font-size: 0.8rem;
  text-align: right;
}

.detail-input {
  margin-top: 6px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
  padding: 20px;
  max-width: 420px;
  width: 100%;
  display: grid;
  gap: 12px;
}

.modal-card.modal-card-lg {
  max-width: 820px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-close {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  align-self: flex-start;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}

.modal-close:hover {
  color: #0f172a;
  background: rgba(148, 163, 184, 0.2);
  box-shadow: none;
  transform: none;
}

.run-detail-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.run-detail-outcome {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #eff6ff;
}

.run-detail-outcome h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.run-detail-outcome[data-status="ok"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.run-detail-outcome[data-status="warning"] {
  border-color: #fde68a;
  background: #fffbeb;
}

.run-detail-outcome[data-status="error"] {
  border-color: #fecaca;
  background: #fef2f2;
}

.run-error {
  color: #b93833;
  font-size: 0.9rem;
  display: none;
}

.run-diagram {
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.run-diagram.empty {
  color: var(--muted);
}

.run-diagram .diagram-node {
  display: grid;
  place-items: center;
  min-width: 86px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 0.85rem;
  text-align: center;
}

.run-diagram .diagram-node.complete {
  border-color: #86efac;
  background: #dcfce7;
  color: #14532d;
}

.run-diagram .diagram-node.warning {
  border-color: #fcd34d;
  background: #fef3c7;
  color: #92400e;
}

.run-diagram .diagram-node.error {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #7f1d1d;
}

.run-diagram .diagram-connector {
  width: 32px;
  height: 2px;
  background: #cbd5f5;
  flex: 0 0 auto;
}

.run-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 0.9rem;
}

.run-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #1f2937;
}

.run-step-index {
  color: var(--muted);
  font-weight: 700;
}

.run-step-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.run-step-title {
  font-weight: 650;
}

.run-step-detail {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.run-step-item.is-ok {
  border-left: 3px solid #22c55e;
}

.run-step-item.is-warning {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}

.run-step-item.is-error {
  border-left: 3px solid #ef4444;
  background: #fef2f2;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-error {
  color: #b93833;
  font-size: 0.9rem;
  margin: 0;
  min-height: 18px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.topbar-actions.is-hidden {
  display: none;
}

.topbar-contents.is-hidden {
  display: none;
}

.page {
  display: none;
  animation: pageIn 180ms ease;
}

.page.active {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page[data-page="funnels"].active {
  gap: 10px;
  align-content: start;
}


@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.account-panel {
  display: grid;
  gap: 16px;
}

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-grid {
  margin-top: 0;
}

.account-grid .detail-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.account-grid .detail-field {
  min-width: 0;
}

.account-grid .detail-label,
.account-grid .detail-sub-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.account-current-workspace {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg-accent));
}

.account-current-workspace-header h4 {
  margin: 0;
}

.account-current-workspace-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.account-current-workspace-header .meta {
  margin-top: 4px;
}

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

.account-current-workspace-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}

.account-current-workspace-card strong {
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}

.account-current-workspace-value-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.account-inline-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.account-inline-edit-btn:hover,
.account-inline-edit-btn:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--bg-accent) 68%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  outline: none;
}

.account-inline-edit-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.account-inline-edit-btn svg {
  width: 15px;
  height: 15px;
}

.account-section {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.account-section-header h4 {
  margin: 0;
}

.account-section-header .meta {
  margin-top: 4px;
}

.account-workspace-alert {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--status-down) 28%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--status-down) 8%, var(--card));
  display: grid;
  gap: 6px;
}

.account-workspace-alert-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.account-verification-alert {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-accent) 55%, var(--card));
  display: grid;
  gap: 10px;
}

.account-verification-alert-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.account-verification-alert-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.account-verification-alert-actions .btn {
  width: auto;
}

.account-workspace-selector {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.account-workspace-selector-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  flex: 1 1 420px;
}

.account-workspace-selector-fields label {
  display: block;
  margin-bottom: 6px;
}

.account-workspace-selector .btn {
  width: auto;
  min-width: 160px;
}

#account-workspace-selector-meta {
  margin-top: 8px;
}

.settings-workspace-panel {
  display: grid;
  gap: 16px;
}

.settings-workspace-organization-summary {
  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.settings-workspace-organization-summary .account-current-workspace-header h4 {
  display: none;
}

.settings-workspace-organization-summary .account-current-workspace-header .meta {
  margin-top: 0;
}

.settings-workspace-organization-summary .account-current-workspace-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.settings-workspace-organization-summary .account-current-workspace-card,
.settings-workspace-active-brand .account-current-workspace-card {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  gap: 8px;
}

.settings-workspace-organization-summary .account-current-workspace-card .meta,
.settings-workspace-active-brand .account-current-workspace-card .meta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-workspace-organization-summary .account-current-workspace-card strong,
.settings-workspace-active-brand .account-current-workspace-card strong {
  font-size: clamp(1.22rem, 1.1rem + 0.4vw, 1.55rem);
  line-height: 1.2;
}

.settings-workspace-active-brand {
  display: block;
}

.settings-workspace-org-picker {
  display: grid;
  justify-content: stretch;
  gap: 10px;
}

.settings-workspace-org-picker .account-workspace-selector-fields {
  grid-template-columns: minmax(0, min(420px, 100%));
  flex: initial;
}

.settings-workspace-org-picker-field {
  min-width: 0;
}

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

.account-actions .btn {
  width: auto;
}

.account-edit-stack {
  display: grid;
  gap: 14px;
  max-width: 680px;
}

.account-edit-stack label {
  display: block;
  margin-bottom: 6px;
}

.account-edit-stack .meta {
  margin-top: 6px;
}

.account-edit-stack .error {
  min-height: 18px;
  margin-top: 6px;
}

.account-edit-stack .account-actions {
  justify-content: flex-start;
}

.account-provider-status {
  margin-top: -6px;
}

.account-provider-status.is-success {
  color: var(--status-ok);
}

.account-provider-status.is-error {
  color: var(--status-down);
}

.account-cancel-btn {
  width: auto;
  min-width: 220px;
}

.account-cancel-status {
  margin-top: 8px;
}

.account-cancel-helper {
  margin-top: 4px;
}

.account-invites-list {
  display: grid;
  gap: 12px;
}

.account-workspace-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(160px, 0.8fr) auto;
  gap: 12px;
  align-items: end;
}

.account-workspace-scope-row {
  margin-bottom: 12px;
}

.account-workspace-scope-field {
  max-width: 320px;
}

.account-workspace-scope-field label {
  display: block;
  margin-bottom: 6px;
}

.account-workspace-invite-form label {
  display: block;
  margin-bottom: 6px;
}

.account-workspace-invite-form .btn {
  width: auto;
  min-width: 140px;
}

.account-workspace-members-header {
  margin-top: 8px;
}

#account-brands-meta {
  margin-top: 6px;
}

.settings-workspace-brand-management {
  display: grid;
  gap: 18px;
}

.settings-workspace-brand-management > * {
  min-width: 0;
}

.account-brand-create-form {
  gap: 14px;
  margin-bottom: 0;
  padding-bottom: 4px;
}

#account-brands-status {
  margin-top: 0;
}

#account-brands-list {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.account-invite-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  background: rgba(255, 255, 255, 0.7);
}

.account-invite-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.account-invite-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.account-invite-title {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
}

.account-invite-meta {
  font-size: 0.84rem;
  color: var(--muted);
}

.account-invite-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(148, 163, 184, 0.12);
  color: #334155;
  font-size: 0.73rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

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

.account-invite-actions .btn {
  width: auto;
}

.account-member-editor {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}

.account-member-editor-field {
  min-width: 150px;
}

.account-member-editor-field label {
  display: block;
  margin-bottom: 6px;
}

.account-member-editor .btn {
  width: auto;
}

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

.account-brand-actions .btn {
  width: auto;
}

.account-brand-item.is-current-brand {
  border-color: color-mix(in srgb, var(--status-ok) 22%, var(--border));
  background: color-mix(in srgb, var(--card) 92%, var(--bg-accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-ok) 12%, transparent);
}

.account-brand-review {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 94%, var(--bg-accent));
  display: grid;
  gap: 10px;
}

.account-brand-review-summary {
  font-size: 0.9rem;
  color: var(--muted);
}

.account-brand-review-members {
  display: grid;
  gap: 8px;
}

.account-brand-review-member {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border);
}

.legal-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}

.legal-link-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 2px;
}

.legal-link-list li:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

.account-link {
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: underline;
}

.account-link:hover {
  color: #1e40af;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.settings-preferences-stack {
  display: grid;
  gap: 16px;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
}

.settings-toggle-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.settings-toggle-copy strong {
  display: block;
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 600;
}

.settings-toggle-copy .meta {
  margin: 4px 0 0;
}

.settings-toggle-row .toggle {
  flex: 0 0 auto;
}

.settings-domain-summary {
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .settings-toggle-row {
    align-items: flex-start;
  }
}

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

.settings-domain-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.settings-domain-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.settings-domain-title {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-domain-detail {
  font-size: 0.88rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-domain-count {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
}

.settings-shell {
  display: grid;
  gap: 18px;
}

.settings-page-intro {
  display: grid;
  gap: 8px;
  padding: 2px 2px 0;
}

.settings-context-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.92rem;
}

.settings-context-line strong {
  color: var(--text);
  font-weight: 650;
}

.settings-context-separator {
  color: var(--border-strong);
}

.settings-tab-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.settings-tab-btn {
  width: auto;
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  box-shadow: none;
}

.settings-tab-btn:hover {
  transform: none;
  box-shadow: none;
}

.settings-tab-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 80%, var(--border));
}

.settings-tab-btn.is-active:hover {
  background: var(--accent);
}

.settings-tab-panel,
.settings-tab-stack {
  display: grid;
  gap: 18px;
}

.settings-grid {
  display: grid;
  gap: 18px;
}

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

.settings-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-section-header h3 {
  margin: 0;
}

.settings-section-header .meta {
  margin-top: 4px;
}

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

.settings-definition-grid .detail-field {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.settings-definition-grid--plain {
  gap: 16px 24px;
}

.settings-definition-grid--plain .detail-field {
  padding: 0 0 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

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

.settings-stat-grid .detail-field,
.settings-stat-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.settings-stat-grid--plain {
  gap: 16px 20px;
}

.settings-stat-grid--plain .detail-field,
.settings-stat-grid--plain .settings-stat-card {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.settings-stat-grid .detail-label,
.settings-stat-label {
  font-size: 0.84rem;
  color: var(--muted);
}

.settings-stat-grid .detail-value,
.settings-stat-value {
  color: var(--text);
  font-size: 1.14rem;
  font-weight: 650;
}

.settings-action-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.settings-action-row:first-of-type {
  padding-top: 0;
  border-top: none;
}

.settings-action-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.settings-action-copy strong {
  color: var(--text);
  font-size: 0.96rem;
}

.settings-action-status {
  margin: 0;
}

.settings-action-status.detail-value {
  font-size: 0.95rem;
  color: var(--text);
}

.settings-action-button {
  width: auto;
  flex: 0 0 auto;
}

.settings-subsection {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.settings-subsection h4 {
  margin: 0;
}

.settings-subsection--spaced {
  margin-top: 18px;
}

@media (max-width: 1080px) {
  .settings-grid-two,
  .settings-definition-grid,
  .settings-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .settings-context-line {
    align-items: flex-start;
  }

  .settings-grid-two,
  .settings-definition-grid,
  .settings-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-action-button {
    width: 100%;
  }
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--fs-header-min-h);
  min-height: var(--fs-header-min-h);
  gap: var(--fs-header-gap);
  flex-wrap: nowrap;
  padding: var(--fs-header-pad-y) var(--fs-header-pad-x);
}

.page-header .header-copy {
  display: grid;
  gap: 6px;
  align-content: center;
  min-width: 0;
}

.page-header h2 {
  margin: 0;
  font-size: var(--fs-header-title-size);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  font-size: var(--fs-header-subtitle-size);
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.page-action-slot {
  min-width: 0;
}

.page-action-slot:empty {
  display: none;
}

.page-action-slot .topbar-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.page-action-slot .search-pill input {
  min-width: min(280px, 42vw);
}

.control-group {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #f9fbfe;
}

.page-header-control {
  display: grid;
  gap: 6px;
  min-width: 126px;
}

.page-header-control label,
.page-header-control > span {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.page-header-control select {
  height: 34px;
  padding: 0 10px;
  font-size: 0.9rem;
  border-radius: var(--radius-xs);
}

.segmented-control {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 34px;
  padding: 2px;
  background: #f8fafc;
}

.segment-btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  height: 28px;
  padding: 0 11px;
  font-size: 0.82rem;
  box-shadow: none;
  transform: none;
}

.segment-btn:hover {
  box-shadow: none;
  transform: none;
  background: rgba(15, 23, 42, 0.05);
  color: var(--ink);
}

.segment-btn.is-active,
.segment-btn[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

.page-header-controls .btn {
  width: auto;
  height: var(--fs-control-h);
  padding: 0 12px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
}

.page-header-controls > .btn.btn-primary {
  padding: 0 14px;
}

.card--hero {
  padding: 18px;
}

.section-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.metric {
  display: grid;
  gap: 6px;
}

.metric-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.metric-value {
  font-size: clamp(1.32rem, 1.14rem + 0.9vw, 1.84rem);
  line-height: 1.15;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.metric-value--stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.metric-primary {
  font-size: inherit;
  font-weight: 650;
  line-height: 1.2;
}

.metric-secondary {
  font-size: 0.9em;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.2;
}

.monitoring-trend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-accent) 70%, var(--card));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.monitoring-trend-badge.is-positive {
  border-color: color-mix(in srgb, var(--status-ok) 28%, transparent);
  background: var(--status-ok-bg);
  color: var(--status-ok);
}

.monitoring-trend-badge.is-negative {
  border-color: color-mix(in srgb, var(--status-down) 28%, transparent);
  background: var(--status-down-bg);
  color: var(--status-down);
}

.monitoring-trend-badge.is-neutral {
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--bg-accent) 72%, var(--card));
  color: var(--muted);
}

.keen-filter-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-accent) 72%, var(--card));
}

.keen-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.keen-filter-chip:hover,
.keen-filter-chip:focus-visible {
  color: var(--text);
  outline: none;
}

.keen-filter-chip.is-active,
.keen-filter-chip[aria-pressed="true"] {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.app-shell .badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.app-shell .badge--ok,
.status-pill.status-ok {
  background: var(--status-ok-bg);
  color: var(--status-ok);
  border-color: rgba(31, 122, 79, 0.24);
}

.app-shell .badge--warn,
.status-pill.status-warning {
  background: var(--status-warn-bg);
  color: var(--status-warn);
  border-color: rgba(154, 109, 18, 0.24);
}

.app-shell .badge--down,
.status-pill.status-error {
  background: var(--status-down-bg);
  color: var(--status-down);
  border-color: rgba(185, 56, 51, 0.24);
}

.status-pill.status-idle {
  background: var(--status-idle-bg);
  color: var(--status-idle);
  border-color: rgba(100, 116, 139, 0.2);
}

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: #f8fafc;
  font-size: 0.76rem;
  color: #344555;
  font-weight: 600;
}

.chip--ok {
  background: var(--status-ok-bg);
  color: var(--status-ok);
  border-color: rgba(31, 122, 79, 0.2);
}

.chip--down {
  background: var(--status-down-bg);
  color: var(--status-down);
  border-color: rgba(185, 56, 51, 0.2);
}

.chip--warn {
  background: var(--status-warn-bg);
  color: var(--status-warn);
  border-color: rgba(154, 109, 18, 0.22);
}

.list,
.overview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.overview-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 7px 9px;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.overview-item:hover {
  background: #f5f9ff;
  border-color: var(--border-strong);
}

.overview-item-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.overview-item-title {
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-item-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.monitoring-status-timeline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  min-height: 10px;
}

.monitoring-status-timeline-dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: 0 0 0 2px color-mix(in srgb, #cbd5e1 22%, transparent);
}

.monitoring-status-timeline-dot.is-ok {
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.14);
}

.monitoring-status-timeline-dot.is-warning {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.16);
}

.monitoring-status-timeline-dot.is-error {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.14);
}

.overview-item-action {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4d6782;
  font-size: 0.78rem;
  text-decoration: none;
  font-weight: 500;
  box-shadow: none;
  transform: none;
}

.overview-item-action:hover {
  text-decoration: underline;
  color: var(--accent);
  box-shadow: none;
  transform: none;
  background: transparent;
}

.overview-item-action::after {
  content: " \203A";
  font-weight: 600;
}

.overview-item--placeholder {
  border-style: solid;
  background: #f7fbff;
  grid-template-columns: auto minmax(0, 1fr);
}

.overview-item--ok {
  background: #f3fbf5;
  border-color: #d4ecd8;
}

.overview-item--ok .overview-item-title {
  color: #1f5232;
}

.overview-item--ok .overview-item-meta {
  color: #4f6b58;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #9ca3af;
  flex-shrink: 0;
}

.status-dot.status-ok {
  background: #16a34a;
}

.status-dot.status-warning {
  background: #d97706;
}

.status-dot.status-error {
  background: #dc2626;
}

.status-dot.status-disabled,
.status-dot.status-idle {
  background: #94a3b8;
}

.empty-state {
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #e7edf4;
  background: #fbfdff;
  color: var(--muted);
  font-size: 0.88rem;
}

.empty-state--ok {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  border-color: #d4ecd8;
  background: #f3fbf5;
  color: #315c39;
}

.empty-state--ok::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #1f7a4f;
  grid-row: 1 / span 2;
}

.empty-state-title {
  font-weight: 600;
  color: #1f5232;
}

.empty-state-sub {
  color: #4f6b58;
  font-size: 0.82rem;
}

.contextual-empty-state {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 72%, #ffffff);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contextual-empty-state p {
  margin: 0 0 12px;
}

.contextual-empty-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: #eef2f7;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.72) 50%, transparent 80%);
  animation: skeletonSweep 1.25s linear infinite;
}

@keyframes skeletonSweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.fs-overview {
  gap: 16px;
}

.overview-page-header {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  position: relative;
}

.overview-page-header::after {
  content: "";
  position: absolute;
  left: var(--fs-header-pad-x);
  right: var(--fs-header-pad-x);
  bottom: 0;
  border-bottom: 1px solid #edf2f7;
}

.overview-hero h3 {
  margin: 2px 0 2px;
  font-size: clamp(1.64rem, 1.46rem + 0.8vw, 2rem);
  line-height: 1.2;
  color: var(--text);
}

.overview-incident {
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--muted);
}

.overview-hero {
  display: grid;
  gap: 12px;
}

.overview-hero-status {
  min-width: 0;
}

.overview-hero-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.overview-hero .status-pill {
  align-self: center;
}

.overview-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.overview-hero .metric {
  padding: 0 12px;
  border-left: 1px solid var(--border);
}

.overview-hero .metric:first-child {
  padding-left: 0;
  border-left: 0;
}

.overview-hero .metric:last-child {
  padding-right: 0;
}

.overview-secondary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-items: start;
}

.overview-attention-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.overview-attention-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.overview-attention-copy h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
}

.overview-attention-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.overview-attention-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.overview-pages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 14px;
  align-items: stretch;
}

.overview-pages-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
}

.overview-pages-action {
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

.overview-secondary-grid > .card {
  height: 100%;
}

.overview-recent,
.overview-next {
  display: flex;
  flex-direction: column;
}

.overview-recent .overview-list,
.overview-next .overview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fbff;
}

.overview-next .overview-item--fill {
  flex: 1 1 auto;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding-top: 0;
}

.overview-next .overview-item--fill .status-dot {
  display: none;
}

.overview-next .overview-item--fill .overview-item-body {
  justify-items: center;
  text-align: center;
  gap: 6px;
}

.overview-graph .panel-header {
  justify-content: flex-start;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.overview-graph .panel-header > div:first-child {
  display: grid;
  gap: 2px;
}

.overview-graph-canvas-wrap {
  position: relative;
  margin-top: 6px;
}

.overview-graph-summary {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0;
}

.overview-graph-stat {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
}

.overview-graph-fallback {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(4px);
  animation: overviewGraphDayIn 260ms ease forwards;
}

.overview-graph-fallback-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.overview-graph-grid-line {
  stroke: rgba(15, 23, 42, 0.08);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.overview-graph-area {
  opacity: 0.16;
}

.overview-graph-area.is-success {
  fill: #1f9f63;
}

.overview-graph-area.is-fail {
  fill: #d45b5b;
}

.overview-graph-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.overview-graph-line.is-success {
  stroke: #18a85f;
}

.overview-graph-line.is-fail {
  stroke: #e05252;
}

.overview-graph-point {
  fill: #ffffff;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.overview-graph-point.is-success {
  stroke: #18a85f;
}

.overview-graph-point.is-fail {
  stroke: #e05252;
}

.overview-graph-point.is-zero {
  fill: rgba(148, 163, 184, 0.16);
  stroke: rgba(100, 116, 139, 0.48);
}

.overview-graph-axis-label {
  fill: #667788;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
}

html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .overview-graph-grid-line {
  stroke: rgba(255, 255, 255, 0.08);
}

@keyframes overviewGraphDayIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 960px) {
  .overview-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--fs-control-h);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #ffffff;
}

.search-pill input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.9rem;
  min-width: 220px;
}

.topbar-actions[data-page-actions="funnels"] .btn {
  width: auto;
  height: var(--fs-control-h);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-app-shell-variant="keen-demo1-light-header"] body.app-body {
  font-family: "Inter", "Segoe UI", sans-serif;
}

html[data-app-shell-variant="keen-demo1-light-header"] .page.active {
  gap: 20px;
  width: 100%;
  max-width: var(--keen-content-rail);
  margin-inline: auto;
  justify-self: stretch;
  justify-items: stretch;
  align-items: stretch;
}

html[data-app-shell-variant="keen-demo1-light-header"] .page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-hero,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-secondary-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-graph,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-risk,
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-toolbar,
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-shell,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-strip-wrap,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-stack,
html[data-app-shell-variant="keen-demo1-light-header"] .account-edit-stack,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-list,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-pages-section,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-add-form-card,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-page-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-shell,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-article-page,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-not-found-page,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-run-detail-page {
  width: 100%;
  max-width: none;
  min-width: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .page[data-page="funnels"].active {
  gap: 16px;
  inline-size: var(--keen-content-rail);
  max-inline-size: 100%;
  justify-items: stretch;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-panel {
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list {
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-page-toolbar,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-surface-card,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .panel {
  border-radius: var(--keen-surface-radius);
  border-color: var(--keen-surface-border);
  background: var(--card);
  box-shadow: var(--keen-surface-shadow);
}

html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-page-toolbar,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-surface-card,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-funnels-panel,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-tests-panel,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .panel {
  background: var(--card);
  box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.06);
}

/* Keen shared surfaces and route headers — plain text above content cards, no box. */
html[data-app-shell-variant="keen-demo1-light-header"] .overview-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .tests-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .help-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-page-toolbar {
  min-height: 0;
  height: auto;
  padding: 14px 4px 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-page-header {
  overflow: visible;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-page-header::after {
  display: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-page-header .header-copy {
  gap: 8px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .page-header .header-copy {
  gap: 8px;
  padding-block: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-panel-header .section-kicker {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-page-header p {
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .page-header p {
  max-width: 760px;
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .tests-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .help-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .builder-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-header .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-page-toolbar .section-kicker {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .tests-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .help-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .builder-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-header h2,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-page-toolbar h2 {
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-hero::before {
  display: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-panel::before {
  display: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: 20px;
  min-height: 258px;
  padding: 26px 28px 24px;
  border-radius: 14px;
  border: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #4da3ff 0%, #3699ff 100%);
  box-shadow: 0 18px 38px rgba(54, 153, 255, 0.22);
  position: relative;
  z-index: 1;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .status-pill {
  justify-self: start;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.18);
  color: #f8fbff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  align-content: start;
  position: relative;
  z-index: 1;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric {
  min-height: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 88%, var(--bg-accent));
  box-shadow: none;
  align-content: start;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric:first-child,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric:last-child {
  padding: 14px 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero-status .section-kicker,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero-status .section-kicker .help-tip {
  color: rgba(255, 255, 255, 0.82);
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero h3 {
  color: #ffffff;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-incident {
  color: rgba(255, 255, 255, 0.78);
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric-label {
  color: #7e8299;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric-value {
  color: #181c32;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-secondary-grid {
  gap: 18px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-attention-card {
  border: 1px solid var(--keen-surface-border);
  border-left: 4px solid color-mix(in srgb, var(--status-ok) 72%, var(--border));
  border-radius: var(--keen-surface-radius);
  background: var(--card);
  box-shadow: var(--keen-surface-shadow);
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-attention-card[data-tone="error"] {
  border-left-color: var(--status-down);
  background: color-mix(in srgb, var(--status-down-bg) 46%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-attention-card[data-tone="warning"] {
  border-left-color: var(--status-warn);
  background: color-mix(in srgb, var(--status-warn-bg) 52%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-attention-card[data-tone="idle"] {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--card) 88%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-attention-copy h3 {
  color: var(--ink);
  font-size: 1.1rem;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-attention-copy p {
  max-width: 760px;
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-attention-actions .btn {
  min-height: 36px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-pages-grid {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-pages-card {
  min-width: 0;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: var(--card);
  box-shadow: var(--keen-surface-shadow);
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-pages-card .metric-value {
  font-size: 1.45rem;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-pages-card .metric-secondary {
  font-size: 0.82rem;
  line-height: 1.35;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-recent,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-next,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-graph,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-risk {
  padding: 18px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-recent .panel-header {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-recent .overview-list,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-next .overview-list,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-risk .overview-list {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-item {
  padding: 12px 14px;
  border-radius: var(--keen-surface-radius);
  background: color-mix(in srgb, var(--card) 88%, var(--bg-accent));
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-item:hover {
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
  box-shadow: var(--keen-surface-shadow-hover);
  transform: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-item.is-ok,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-item[data-status="ok"] {
  border-color: color-mix(in srgb, var(--status-ok) 24%, transparent);
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-item.is-warning,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-item[data-status="warning"] {
  border-color: color-mix(in srgb, var(--status-warn) 28%, transparent);
  background: color-mix(in srgb, var(--status-warn-bg) 52%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-item.is-error,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-item[data-status="error"] {
  border-color: color-mix(in srgb, var(--status-down) 24%, transparent);
  background: color-mix(in srgb, var(--status-down-bg) 44%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-item-action {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--keen-shell-chip-border);
  background: var(--keen-shell-chip-bg);
  color: var(--keen-shell-chip-active-ink);
  font-size: 0.78rem;
  font-weight: 600;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-item-action:hover {
  text-decoration: none;
  color: var(--keen-shell-chip-active-ink);
  background: var(--keen-shell-chip-active-bg);
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-item-action::after {
  content: "";
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-graph {
  padding: 20px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-graph-canvas-wrap {
  height: 160px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-graph-stat {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .overview-graph-fallback {
  gap: 14px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .empty-banner {
  min-height: 0;
  padding: 18px 20px;
  border: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--keen-surface-radius);
  background: color-mix(in srgb, var(--card) 80%, var(--bg-accent));
  box-shadow: var(--keen-surface-shadow);
}

html[data-app-shell-variant="keen-demo1-light-header"] .empty-banner .meta {
  max-width: 720px;
  color: #55627a;
}

html[data-app-shell-variant="keen-demo1-light-header"] .empty-banner .btn-wiggle {
  animation: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .save-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size: 0.8rem;
  font-weight: 600;
}

html[data-app-shell-variant="keen-demo1-light-header"] .account-provider-status.is-success,
html[data-app-shell-variant="keen-demo1-light-header"] .notice.is-success {
  border-color: color-mix(in srgb, var(--status-ok) 26%, var(--border));
  background: color-mix(in srgb, var(--status-ok) 10%, var(--card));
  color: color-mix(in srgb, var(--status-ok) 88%, var(--ink));
}

html[data-app-shell-variant="keen-demo1-light-header"] .account-provider-status.is-error,
html[data-app-shell-variant="keen-demo1-light-header"] .notice.is-error {
  border-color: color-mix(in srgb, var(--status-down) 26%, var(--border));
  background: color-mix(in srgb, var(--status-down) 11%, var(--card));
  color: color-mix(in srgb, var(--status-down) 88%, var(--ink));
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-panel {
  position: relative;
  width: 100%;
  padding: 20px;
  overflow: hidden;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-page-header {
  display: flex;
  padding: 14px 4px 8px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-panel-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-panel-header-copy {
  display: grid;
  gap: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-panel-meta {
  margin: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-toolbar {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: var(--card);
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-toolbar .toolbar-group {
  min-height: 40px;
  padding: 7px 10px;
  border-radius: var(--keen-control-radius);
  border: 1px solid var(--keen-surface-border);
  background: color-mix(in srgb, var(--card) 94%, var(--bg-accent));
  gap: 10px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .search-pill {
  border-radius: var(--keen-control-radius);
  border-color: var(--keen-surface-border);
  background: var(--card);
}

html[data-app-shell-variant="keen-demo1-light-header"] .app-topbar {
  display: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .bulk-group {
  padding: 7px 10px;
  border-radius: var(--keen-control-radius);
  border: 1px dashed color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--card) 92%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card {
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: var(--keen-density-card-pad);
  border-radius: var(--keen-surface-radius);
  background: var(--card);
  box-shadow: var(--keen-surface-shadow);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.8), rgba(148, 163, 184, 0.24));
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card[data-health="ok"]::before {
  background: linear-gradient(90deg, #50cd89, #1bc5bd);
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card[data-health="warning"]::before {
  background: linear-gradient(90deg, #f6c000, #ffad0f);
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card[data-health="error"]::before {
  background: linear-gradient(90deg, #f1416c, #ff6b6b);
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card[data-health="disabled"]::before {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.8), rgba(148, 163, 184, 0.24));
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: var(--keen-surface-shadow-hover);
  transform: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card.is-disabled {
  opacity: 0.86;
  filter: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card-select {
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: var(--keen-control-radius);
  background: color-mix(in srgb, var(--card) 76%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card-top {
  padding-right: 38px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card-body {
  align-content: start;
  gap: 12px;
  min-width: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-meta-grid {
  gap: 10px 14px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-preview {
  min-height: 164px;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
  border-radius: var(--keen-surface-radius);
  border-color: var(--border-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-accent) 82%, white 18%), var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-preview.empty {
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-accent) 86%, white 14%), color-mix(in srgb, var(--card) 72%, var(--bg-accent)));
}

html[data-app-shell-variant="keen-demo1-light-header"] .preview-empty-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
  max-width: 220px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-preview .preview-hint {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-preview .preview-open-btn {
  margin-top: 10px;
  padding: 5px 14px;
  font-size: 0.75rem;
  background: transparent;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 6px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-preview .preview-open-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card-actions {
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
}

html[data-app-shell-variant="keen-demo1-light-header"] .menu-button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border-color: var(--keen-shell-chip-border);
  background: var(--keen-shell-chip-bg);
}

html[data-app-shell-variant="keen-demo1-light-header"] .menu-button:hover {
  background: var(--keen-shell-chip-active-bg);
}

html[data-app-shell-variant="keen-demo1-light-header"] .menu-panel {
  border-radius: 20px;
  overflow: hidden;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-panel {
  position: relative;
  padding: 20px;
  overflow: hidden;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 92px;
  background:
    radial-gradient(circle at top left, rgba(54, 153, 255, 0.14), transparent 70%),
    radial-gradient(circle at top right, rgba(80, 205, 137, 0.12), transparent 62%);
  pointer-events: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header-copy {
  display: grid;
  gap: 6px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header-copy h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.14rem + 0.26vw, 1.36rem);
  letter-spacing: -0.02em;
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header .section-kicker {
  color: var(--accent);
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header .snapshot-filters {
  justify-content: flex-end;
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header .toolbar-group {
  min-height: 40px;
  padding: 7px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 92%, white 8%);
  gap: 10px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-table-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--keen-density-table-gap);
  padding: calc(var(--keen-density-toolbar-pad) - 4px);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 72%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-table-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1.8fr) auto;
  gap: 14px;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b8a99;
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-table-head span:last-child {
  justify-self: end;
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-table-body {
  margin-top: 0;
  gap: var(--keen-density-table-gap);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1.8fr) auto;
  align-items: start;
  gap: 14px;
  padding: var(--keen-density-card-pad) calc(var(--keen-density-card-pad) - 2px);
  border-radius: var(--keen-density-card-radius);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 90%, white 10%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.8), rgba(148, 163, 184, 0.24));
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card[data-status="ok"]::before {
  background: linear-gradient(90deg, #50cd89, #1bc5bd);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card[data-status="warning"]::before {
  background: linear-gradient(90deg, #f6c000, #ffad0f);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card[data-status="error"]::before {
  background: linear-gradient(90deg, #f1416c, #ff6b6b);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.1);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card-title h4 {
  font-size: 1rem;
  line-height: 1.35;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card-status-wrap {
  align-self: center;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-status {
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
}

html[data-app-shell-variant="keen-demo1-light-header"] .tests-empty-state {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 76%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-shell {
  gap: 16px;
  width: 100%;
  inline-size: 100%;
  min-inline-size: 0;
  justify-self: stretch;
  align-self: start;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-intro {
  padding: 0 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-intro .settings-context-line {
  min-height: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-strip-wrap {
  position: sticky;
  top: var(--fs-keen-sticky-offset);
  z-index: 6;
  padding: 8px;
  inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: color-mix(in srgb, var(--keen-shell-topbar-bg) 96%, transparent);
  box-shadow: var(--keen-surface-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-strip {
  gap: 8px;
  padding-bottom: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-btn {
  min-height: 38px;
  padding: 0 16px;
  border-color: color-mix(in srgb, var(--border) 64%, transparent);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border-radius: var(--keen-control-radius);
  color: var(--muted);
  font-weight: 600;
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-btn:hover {
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-btn.is-active {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 11%, var(--card));
  color: var(--ink);
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-stack {
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  min-inline-size: 0;
  justify-self: stretch;
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-panel {
  min-block-size: clamp(560px, 82vh, 1000px);
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-grid-two {
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-panel[data-settings-tab-panel="advanced"] > .settings-grid-two {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .panel {
  width: 100%;
  min-width: 0;
  padding: calc(var(--keen-density-detail-pad) + 10px);
  overflow: hidden;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: var(--card);
  box-shadow: var(--keen-surface-shadow);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .keen-settings-section-card,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .keen-settings-composite-panel {
  position: relative;
  background: var(--card);
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-section-header h3,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .panel-header h3 {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-definition-grid .detail-field,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-stat-grid .detail-field,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-stat-card,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-current-workspace-card {
  border-radius: var(--keen-density-detail-radius);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 94%, white 6%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-definition-grid--plain .detail-field,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-stat-grid--plain .detail-field,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-stat-grid--plain .settings-stat-card {
  background: transparent;
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-current-workspace {
  border-radius: var(--keen-surface-radius);
  border: 1px solid var(--keen-surface-border);
  background: color-mix(in srgb, var(--card) 84%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-workspace-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-workspace-brand-management,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-edit-stack {
  width: 100%;
  max-width: none;
  min-width: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-workspace-org-picker .account-workspace-selector-fields {
  grid-template-columns: minmax(0, 1fr);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-workspace-selector-fields,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-workspace-invite-form,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-brand-create-form {
  width: 100%;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-preferences-stack {
  display: grid;
  gap: 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-action-row {
  align-items: center;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .keen-settings-action-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--keen-surface-radius);
  background: #ffffff;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-action-button {
  min-height: 40px;
  border-radius: var(--keen-control-radius);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-section {
  margin-top: 0;
  padding-top: 20px;
  border-top-color: color-mix(in srgb, var(--border) 78%, transparent);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-actions {
  justify-content: flex-start;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-provider-status {
  margin-top: 0;
  padding: 10px 12px;
  border-radius: var(--keen-surface-radius);
  background: #f9f9f9;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-provider-status.is-success {
  background: color-mix(in srgb, var(--status-ok) 10%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-provider-status.is-error {
  background: color-mix(in srgb, var(--status-down) 12%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-workspace-alert,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-verification-alert {
  border-radius: var(--keen-surface-radius);
  border: 1px solid var(--keen-surface-border);
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-workspace-selector,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-workspace-invite-form,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-brand-create-form {
  padding: calc(var(--keen-density-detail-pad) + 2px) calc(var(--keen-density-detail-pad) + 4px);
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: color-mix(in srgb, var(--card) 88%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-team-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-brand-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-billing-panel {
  gap: 18px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-invite-item,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-brand-review {
  border-radius: var(--keen-surface-radius);
  border-color: var(--keen-surface-border);
  background: color-mix(in srgb, var(--card) 92%, white 8%);
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page input[type="email"],
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page input[type="text"],
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page input[type="password"],
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page select,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page textarea {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 96%, white 4%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page textarea {
  min-height: 96px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page input[type="email"]:focus,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page input[type="text"]:focus,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page input[type="password"]:focus,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page select:focus,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .account-invite-pill {
  border-color: rgba(54, 153, 255, 0.14);
  background: rgba(54, 153, 255, 0.1);
  color: #0f4c81;
}

html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .keen-settings-section-card,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .keen-settings-composite-panel,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .account-workspace-selector,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .account-workspace-invite-form,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .account-brand-create-form,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .keen-settings-action-card,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .account-invite-item,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .account-brand-review,
html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .keen-settings-page .account-provider-status {
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .refer-page-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-shell {
  width: 100%;
}

html[data-app-shell-variant="keen-demo1-light-header"] .refer-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: start;
}

html[data-app-shell-variant="keen-demo1-light-header"] .refer-hero-card,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-steps-card,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-cta-card,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-faq-card,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-intro,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-index,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-article-shell {
  padding: 20px;
  overflow: hidden;
}

html[data-app-shell-variant="keen-demo1-light-header"] .refer-hero-card {
  position: relative;
  min-height: 100%;
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.12), transparent 32%),
    radial-gradient(circle at left center, rgba(80, 205, 137, 0.09), transparent 30%),
    color-mix(in srgb, var(--card) 84%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .refer-hero-card h3,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-steps-card h3,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-cta-card h3,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-faq-card h3,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-intro h3 {
  margin: 0 0 10px;
  font-size: clamp(1.24rem, 1.16rem + 0.3vw, 1.46rem);
  letter-spacing: -0.02em;
}

html[data-app-shell-variant="keen-demo1-light-header"] .refer-steps-card,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-faq-card,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-cta-card {
  background: color-mix(in srgb, var(--card) 86%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .refer-cta-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

html[data-app-shell-variant="keen-demo1-light-header"] .faq-item {
  margin-top: 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 72%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .refer-faq-card {
  display: grid;
  gap: 12px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .faq-question {
  margin-bottom: 4px;
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-shell {
  display: grid;
  gap: 18px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-intro {
  background:
    radial-gradient(circle at top left, rgba(54, 153, 255, 0.12), transparent 28%),
    color-mix(in srgb, var(--card) 88%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-index {
  background: color-mix(in srgb, var(--card) 86%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-article-list {
  display: grid;
  gap: 12px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-article-entry {
  padding: 16px 18px;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--border) 92%, transparent);
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-article-entry:hover {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  background: color-mix(in srgb, var(--card) 74%, var(--bg-accent));
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-article-entry-title {
  font-size: 1rem;
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-article-entry-desc {
  font-size: 0.88rem;
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-article-entry-arrow {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--keen-shell-chip-bg);
  color: var(--keen-shell-chip-active-ink);
  font-size: 1.1rem;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-article-page {
  width: 100%;
  max-width: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-article-shell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, white 8%), color-mix(in srgb, var(--card) 100%, var(--bg-accent))),
    var(--card);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-article-shell .section-kicker {
  color: var(--accent);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-article-shell h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: clamp(1.4rem, 1.3rem + 0.35vw, 1.72rem);
  letter-spacing: -0.025em;
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-back-link {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--keen-shell-chip-border);
  background: var(--keen-shell-chip-bg);
  color: var(--keen-shell-chip-active-ink);
  margin-bottom: 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-back-link:hover {
  background: var(--keen-shell-chip-active-bg);
  border-color: var(--keen-shell-chip-border);
  color: var(--keen-shell-chip-active-ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-list,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .help-list li,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-steps li {
  margin: 0;
  line-height: 1.55;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-page-header {
  margin-bottom: 18px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(320px, 0.8fr);
  gap: 20px;
  align-items: start;
  position: relative;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-main-stack,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-side-stack {
  display: grid;
  gap: 20px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-side-stack {
  position: sticky;
  top: calc(var(--fs-keen-sticky-offset) + 6px);
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-summary-card,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-steps-card,
#funnel-test-status[data-running="true"]::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: detail-save-spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-test-card,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-access-card,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-history-card {
  padding: calc(var(--keen-density-detail-pad) + 8px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-summary-card {
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.17), transparent 34%),
    radial-gradient(circle at top left, rgba(80, 205, 137, 0.08), transparent 44%),
    color-mix(in srgb, var(--card) 88%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-summary-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-summary-copy h3,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-steps-card h3,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-test-card h3,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-access-card h3,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-history-card h3 {
  margin: 0 0 8px;
  font-size: clamp(1.26rem, 1.18rem + 0.28vw, 1.5rem);
  letter-spacing: -0.024em;
  line-height: 1.22;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-summary-actions {
  justify-items: end;
  flex: 0 0 auto;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-header-badges {
  margin-top: 12px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-diagnostic-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-diagnostic-item {
  min-width: 0;
  padding: var(--keen-density-detail-pad) calc(var(--keen-density-detail-pad) + 2px);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: var(--keen-density-detail-radius);
  background: color-mix(in srgb, var(--card) 88%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-grid {
  margin-top: 16px;
  gap: 12px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-row {
  position: relative;
  padding: var(--keen-density-detail-pad) calc(var(--keen-density-detail-pad) + 2px);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: var(--keen-density-detail-radius);
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
  gap: 18px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-row::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-row:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-label {
  margin: 0;
  color: #72839b;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  padding-left: 10px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-value {
  font-size: 0.98rem;
  line-height: 1.45;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 92%, black);
  min-height: 24px;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-field {
  gap: 8px;
}

html[data-app-shell-variant="keen-demo1-light-header"] #funnel-detail-name {
  min-height: 44px;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--border) 94%, transparent);
  background: color-mix(in srgb, var(--card) 94%, white 6%);
  font-size: 1.02rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

html[data-app-shell-variant="keen-demo1-light-header"] #funnel-detail-name.is-readonly {
  background: transparent;
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-summary-card .detail-input {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 96%, white 4%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-summary-card textarea.detail-input {
  min-height: 84px;
  resize: vertical;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-inline-actions {
  gap: 8px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-inline-actions .btn,
html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-test-card .btn {
  min-height: 42px;
  border-radius: 8px;
  font-weight: 600;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-steps {
  gap: 10px;
  margin-top: 14px;
  counter-reset: funnel-step-counter;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-steps li {
  position: relative;
  padding: 12px 14px 12px 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 80%, var(--bg-accent));
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  line-height: 1.45;
}

html[data-app-shell-variant="keen-demo1-light-header"] .detail-steps li::before {
  counter-increment: funnel-step-counter;
  content: counter(funnel-step-counter);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, #ffffff);
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-test-card {
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.14), transparent 36%),
    color-mix(in srgb, var(--card) 88%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .test-run-toolbar {
  margin: 14px 0 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .test-run-control {
  max-width: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-access-card .account-workspace-invite-form {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 88%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-history-card {
  background:
    radial-gradient(circle at top left, rgba(80, 205, 137, 0.1), transparent 38%),
    color-mix(in srgb, var(--card) 88%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-history-card #funnel-detail-runs {
  margin-top: 14px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .modal-overlay {
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1200;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card,
html[data-app-shell-variant="keen-demo1-light-header"] .modal-card-onboarding {
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, white 6%), color-mix(in srgb, var(--card) 100%, var(--bg-accent))),
    var(--card);
  box-shadow: 0 28px 72px rgba(2, 6, 23, 0.28);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card {
  padding: 24px;
  gap: 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card--confirm {
  max-width: var(--keen-modal-confirm-max);
  min-width: min(100%, 420px);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card--danger {
  max-width: var(--keen-modal-danger-max);
  min-width: min(100%, 420px);
  background:
    radial-gradient(circle at top right, rgba(241, 65, 108, 0.12), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, white 6%), color-mix(in srgb, var(--card) 100%, var(--bg-accent))),
    var(--card);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card--security {
  max-width: var(--keen-modal-security-max);
  min-width: min(100%, 460px);
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.14), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, white 6%), color-mix(in srgb, var(--card) 100%, var(--bg-accent))),
    var(--card);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-copy {
  display: grid;
  gap: 6px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-copy h3 {
  margin: 0;
  font-size: clamp(1.22rem, 1.14rem + 0.3vw, 1.44rem);
  letter-spacing: -0.02em;
}

html[data-app-shell-variant="keen-demo1-light-header"] .modal-header {
  gap: 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .modal-close {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--keen-shell-chip-border);
  background: var(--keen-shell-chip-bg);
  color: var(--keen-shell-chip-active-ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .modal-close:hover {
  background: var(--keen-shell-chip-active-bg);
  border-color: var(--keen-shell-chip-border);
  color: var(--keen-shell-chip-active-ink);
  transform: none;
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .modal-actions,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card .onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .modal-actions .btn,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card .onboarding-actions .btn {
  min-height: 42px;
  min-width: 132px;
  padding-inline: 18px;
  border-radius: 8px;
  font-weight: 600;
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-grid {
  gap: var(--keen-density-table-gap);
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-outcome {
  border: 1px solid var(--keen-surface-border);
  border-left: 4px solid var(--accent);
  border-radius: var(--keen-surface-radius);
  background: color-mix(in srgb, var(--card) 88%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-outcome[data-status="ok"] {
  border-left-color: var(--status-ok);
  background: color-mix(in srgb, var(--status-ok-bg) 44%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-outcome[data-status="warning"] {
  border-left-color: var(--status-warn);
  background: color-mix(in srgb, var(--status-warn-bg) 52%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-outcome[data-status="error"] {
  border-left-color: var(--status-down);
  background: color-mix(in srgb, var(--status-down-bg) 46%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-outcome h3 {
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-detail-grid > div {
  padding: var(--keen-density-detail-pad) calc(var(--keen-density-detail-pad) + 2px);
  border-radius: calc(var(--keen-density-detail-radius) + 2px);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-diagram {
  padding: var(--keen-density-detail-pad);
  border-style: solid;
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 84%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-diagram .diagram-node {
  border-radius: var(--keen-density-detail-radius);
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 96%, white 4%);
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-diagram .diagram-connector {
  background: color-mix(in srgb, var(--accent) 26%, var(--border));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-steps li {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-step-item.is-ok {
  border-left: 4px solid var(--status-ok);
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-step-item.is-warning {
  border-left: 4px solid var(--status-warn);
  background: color-mix(in srgb, var(--status-warn-bg) 52%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-step-item.is-error {
  border-left: 4px solid var(--status-down);
  background: color-mix(in srgb, var(--status-down-bg) 46%, var(--card));
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-step-detail {
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .run-error,
html[data-app-shell-variant="keen-demo1-light-header"] .modal-error {
  color: #d1435b;
}

html[data-app-shell-variant="keen-demo1-light-header"] .builder-domain-confirm-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .builder-domain-confirm-list li {
  line-height: 1.5;
}

html[data-app-shell-variant="keen-demo1-light-header"] .modal-card-onboarding {
  box-shadow: 0 32px 80px rgba(2, 6, 23, 0.3);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card {
  position: relative;
  max-width: 720px;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 11%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, white 4%), color-mix(in srgb, var(--card) 84%, var(--bg-accent))),
    var(--card);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card--consent {
  max-width: 760px;
  background:
    radial-gradient(circle at top right, rgba(54, 153, 255, 0.16), transparent 34%),
    radial-gradient(circle at bottom left, rgba(137, 80, 252, 0.1), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, white 4%), color-mix(in srgb, var(--card) 84%, var(--bg-accent))),
    var(--card);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card .onboarding-close-btn {
  position: absolute !important;
  top: 18px;
  right: 18px;
  margin: 0 !important;
  width: 38px !important;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--keen-shell-chip-border);
  background: var(--keen-shell-chip-bg);
  color: var(--keen-shell-chip-active-ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card .onboarding-close-btn:hover {
  background: var(--keen-shell-chip-active-bg);
  border-color: var(--keen-shell-chip-border);
  color: var(--keen-shell-chip-active-ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card .onboarding-close-btn:focus-visible,
html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-actions .btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    0 10px 20px rgba(15, 23, 42, 0.14);
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-hero,
html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-step-header {
  display: grid;
  gap: 14px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-brand {
  align-items: flex-start;
  text-align: left;
  gap: 8px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-brand--hero {
  align-items: center;
  text-align: center;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-logo-mark {
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-brand h2 {
  font-size: clamp(1.36rem, 1.2rem + 0.35vw, 1.72rem);
  letter-spacing: -0.03em;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-brand .meta,
html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-consent-copy .meta,
html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-form-card .meta {
  max-width: 62ch;
  line-height: 1.55;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-progress {
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 80%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-progress .meta {
  margin: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-progress-pill {
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  color: color-mix(in srgb, var(--accent) 84%, var(--ink));
  letter-spacing: 0.06em;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-consent-shell,
html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-form-card {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-consent-copy {
  display: grid;
  gap: 6px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-consent-copy h3 {
  margin: 0;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-consent-list {
  gap: 12px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-consent-item {
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 96%, white 4%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-consent-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-required-badge {
  margin-left: 6px;
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-summary-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-task-list {
  gap: 14px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-summary-card,
html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-task {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 82%, var(--bg-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-summary-card {
  gap: 8px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-summary-card strong {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-task {
  grid-template-columns: 40px 1fr;
  gap: 14px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-task-num {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 15%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  color: color-mix(in srgb, var(--accent) 84%, var(--ink));
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-task-body {
  display: grid;
  gap: 8px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-task-body h4 {
  margin: 0;
  font-size: 0.98rem;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-task-body .btn {
  justify-self: start;
  min-height: 38px;
  border-radius: 8px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-form-card label {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-form-card input {
  min-height: 50px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 96%, white 4%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-form-card input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-app-shell-variant="keen-demo1-light-header"] #onboarding-collaboration-hint,
html[data-app-shell-variant="keen-demo1-light-header"] #onboarding-launch-notify-hint {
  line-height: 1.55;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card--consent .onboarding-actions {
  justify-content: center;
}

@media (max-width: 900px) {
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card {
    padding: 18px;
    border-radius: 22px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-onboarding-card .onboarding-close-btn {
    top: 14px;
    right: 14px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-progress {
    flex-direction: column;
    align-items: flex-start;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .onboarding-task {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Feature tour overlay
   ============================================================================= */

.feature-tour-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8500;
  pointer-events: none;
}

.feature-tour-overlay.is-active {
  display: block;
}

.feature-tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}

.feature-tour-spotlight {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.46);
  pointer-events: none;
  z-index: 1;
  transition: top 280ms cubic-bezier(0.2, 0, 0, 1),
              left 280ms cubic-bezier(0.2, 0, 0, 1),
              width 280ms cubic-bezier(0.2, 0, 0, 1),
              height 280ms cubic-bezier(0.2, 0, 0, 1);
}

.feature-tour-popover {
  position: fixed;
  z-index: 2;
  background: #ffffff;
  border-radius: 20px;
  padding: 22px 24px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
  max-width: 300px;
  min-width: 240px;
  pointer-events: auto;
}

.feature-tour-header {
  margin-bottom: 6px;
}

.feature-tour-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #6366f1);
}

.feature-tour-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.feature-tour-body {
  margin: 0 0 18px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.feature-tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.feature-tour-nav {
  display: flex;
  gap: 8px;
}

.feature-tour-skip {
  font-size: 13px;
  color: #9ca3af;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.feature-tour-skip:hover {
  color: #6b7280;
}

/* =============================================================================
   Keen: Micro-animations & motion polish
   ============================================================================= */

/* Page enter replaces the base pageIn animation inside the Keen shell. */
html[data-app-shell-variant="keen-demo1-light-header"] .page.active {
  animation: keenPageIn 280ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes keenPageIn {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes keenCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav link transitions (hover was instant before) */
html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-nav-link,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-utility-link {
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-drawer-nav-link {
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

html[data-app-shell-variant="keen-demo1-light-header"] .keen-drawer-nav-link:hover:not(.is-active):not(.active) {
  transform: translateX(3px);
}

/* Button press feedback */
html[data-app-shell-variant="keen-demo1-light-header"] .btn {
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 80ms ease;
}

html[data-app-shell-variant="keen-demo1-light-header"] .btn:active {
  transform: scale(0.97);
}

/* Funnel card staggered entrance */
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list .funnel-card {
  animation: keenCardIn 300ms cubic-bezier(0.2, 0, 0, 1) both;
}
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list .funnel-card:nth-child(2) { animation-delay: 35ms; }
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list .funnel-card:nth-child(3) { animation-delay: 70ms; }
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list .funnel-card:nth-child(4) { animation-delay: 105ms; }
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list .funnel-card:nth-child(5) { animation-delay: 140ms; }
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list .funnel-card:nth-child(n+6) { animation-delay: 175ms; }

/* Overview metric tile staggered entrance */
html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric {
  animation: keenCardIn 320ms cubic-bezier(0.2, 0, 0, 1) both;
}
html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric:nth-child(2) { animation-delay: 40ms; }
html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric:nth-child(3) { animation-delay: 80ms; }
html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric:nth-child(4) { animation-delay: 120ms; }

/* Overview secondary grid staggered entrance */
html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-secondary-grid > * {
  animation: keenCardIn 320ms cubic-bezier(0.2, 0, 0, 1) both;
}
html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-secondary-grid > *:nth-child(2) { animation-delay: 50ms; }
html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-secondary-grid > *:nth-child(3) { animation-delay: 100ms; }
html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-secondary-grid > *:nth-child(4) { animation-delay: 150ms; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html[data-app-shell-variant="keen-demo1-light-header"] .page.active,
  html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list .funnel-card,
  html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero .metric,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-secondary-grid > * {
    animation: none;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-nav-link,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-utility-link,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-drawer-nav-link,
  html[data-app-shell-variant="keen-demo1-light-header"] .btn {
    transition: none;
  }

  .card--hero .status-dot.status-ok,
  .detail-value-skeleton,
  .save-flash {
    animation: none !important;
  }
}

/* =============================================================================
   T-VIS-01: Funnel step bar
   ============================================================================= */

.funnel-step-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  height: 4px;
  overflow: hidden;
}

.funnel-step-segment {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: var(--border);
  transition: background 220ms ease;
}

.funnel-step-bar-more {
  flex: none;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
  margin-left: 2px;
}

.funnel-step-bar[data-health="ok"] .funnel-step-segment {
  background: var(--status-ok, #22c55e);
}

.funnel-step-bar[data-health="warning"] .funnel-step-segment {
  background: var(--status-warn, #f59e0b);
}

.funnel-step-bar[data-health="error"] .funnel-step-segment {
  background: var(--status-down, #ef4444);
}

.funnel-step-bar[data-health="disabled"] .funnel-step-segment {
  background: var(--border);
  opacity: 0.5;
}

/* =============================================================================
   T-VIS-02: Hero status-dot pulse + last-checked counter
   ============================================================================= */

@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-ok, #22c55e) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-ok, #22c55e) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-ok, #22c55e) 0%, transparent); }
}

.card--hero .status-dot.status-ok {
  animation: statusPulse 2.4s ease-out infinite;
}

.overview-last-checked {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   T-VIS-03: Save confirmation flash + skeleton loading shimmer
   ============================================================================= */

@keyframes saveFlash {
  0%   { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  60%  { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  100% { background: transparent; }
}

.save-flash {
  animation: saveFlash 900ms ease-out forwards;
  border-radius: 4px;
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

.detail-value-skeleton {
  min-width: 60px;
  border-radius: 4px;
  color: transparent !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--border) 80%, transparent) 25%,
    color-mix(in srgb, var(--border) 40%, transparent) 50%,
    color-mix(in srgb, var(--border) 80%, transparent) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.4s linear infinite;
  pointer-events: none;
  user-select: none;
}

.detail-value-skeleton.is-wide {
  min-width: 140px;
}

/* =============================================================================
   T-VIS-04: Illustrated empty states
   ============================================================================= */

.empty-state-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  color: var(--muted);
  opacity: 0.7;
}

.empty-state-figure svg {
  display: block;
}

.overview-runs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
}

.overview-runs-empty .empty-state-figure {
  margin-bottom: 8px;
}

.overview-runs-empty p {
  margin: 0;
}

/* =============================================================================
   T-VIS-06: Tabular nums on selected-count badge
   ============================================================================= */

#funnels-selected-count {
  font-variant-numeric: tabular-nums;
}

.search-icon {
  color: var(--muted);
}

.app-shell [data-action="new-funnel"] {
  width: auto;
  height: var(--fs-control-h);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-workspace-pill {
    min-width: clamp(140px, 18vw, 220px);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-utility {
    gap: 4px;
    flex-wrap: nowrap;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-notifications-tray {
    right: 12px;
    width: min(360px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 112px));
  }
}

@media (max-width: 960px) {
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-leading {
    grid-column: 1 / -1;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-nav {
    grid-column: 1 / 2;
    justify-content: flex-start;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-nav-link {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.77rem;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-utility {
    grid-column: 2 / 3;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-utility-link {
    min-height: 30px;
    padding: 0 7px;
    font-size: 0.75rem;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-notifications-tray {
    top: calc(100% + 8px);
    right: 0;
    width: min(340px, calc(100vw - 20px));
    max-height: min(500px, calc(100vh - 104px));
    border-radius: 12px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-hero {
    grid-template-columns: 1fr;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header .snapshot-filters {
    width: 100%;
    justify-content: flex-start;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header .toolbar-group {
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  :root {
    --fs-banner-min-h: var(--fs-header-min-h-sm);
  }

  .empty-banner {
    height: auto;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .account-status-banner {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .empty-banner-title,
  .empty-banner .meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .account-status-banner-title,
  .account-status-banner .meta {
    white-space: normal;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .app-content,
  html[data-app-shell-variant="keen-demo1-light-header"] .app-content.is-builder-page {
    max-width: none;
    padding: calc(var(--fs-keen-header-height) + 16px) 16px 28px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell {
    top: 0;
    left: 0;
    right: 0;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-header {
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-leading {
    justify-content: space-between;
    gap: 12px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-brand-wordmark {
    width: min(100%, 160px);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-menu-toggle {
    display: inline-flex;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-leading > .keen-ws-switcher-wrap,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-nav,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-shell-utility {
    display: none;
  }

  html[data-app-shell-variant="keen-demo1-light-header"][data-keen-notifications-open="true"] .keen-shell-utility {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: block;
    pointer-events: none;
  }

  html[data-app-shell-variant="keen-demo1-light-header"][data-keen-notifications-open="true"] .keen-notifications-tray {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: min(70vh, 560px);
    border-radius: 18px;
    pointer-events: auto;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .overview-page-header,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-hero,
  html[data-app-shell-variant="keen-demo1-light-header"] .overview-recent,
  html[data-app-shell-variant="keen-demo1-light-header"] .overview-next,
  html[data-app-shell-variant="keen-demo1-light-header"] .overview-graph,
  html[data-app-shell-variant="keen-demo1-light-header"] .overview-risk,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-panel,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-panel,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-intro,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .panel,
  html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-strip-wrap {
    padding: 16px;
    border-radius: 20px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero-meta {
    grid-template-columns: 1fr;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .overview-hero-top {
    min-height: 0;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .overview-pages-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .overview-pages-action {
    justify-self: stretch;
    width: 100%;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnels-toolbar,
  html[data-app-shell-variant="keen-demo1-light-header"] .funnels-toolbar-main,
  html[data-app-shell-variant="keen-demo1-light-header"] .bulk-group {
    width: 100%;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnels-toolbar {
    align-items: stretch;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnel-card {
    gap: 12px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] {
    --keen-density-card-pad: 12px;
    --keen-density-card-radius: 12px;
    --keen-density-table-gap: 8px;
    --keen-density-toolbar-pad: 10px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnel-preview {
    min-height: 136px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .tests-table-head {
    display: none;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-tests-page .snapshot-card-status-wrap {
    justify-content: flex-start;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .tests-table-shell {
    padding: 6px;
    border-radius: 14px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-strip-wrap {
    position: static;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-strip {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 52px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 52px), transparent 100%);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-grid-two,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-definition-grid,
  html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-page .settings-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-side-stack {
    position: static;
    top: auto;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-summary-header {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnel-detail-diagnostic-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .detail-row {
    padding: 14px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .detail-row::before {
    left: 8px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .modal-overlay {
    padding: 16px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .keen-modal-card,
  html[data-app-shell-variant="keen-demo1-light-header"] .modal-card-onboarding {
    border-radius: 20px;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .refer-page-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 10px;
  }

  .overview-hero .metric {
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .overview-hero .metric:nth-child(-n + 2) {
    border-top: 0;
    padding-top: 0;
  }

  .overview-attention-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-attention-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .overview-attention-action {
    width: 100%;
  }

  .funnels-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }

  .funnels-toolbar {
    align-items: flex-start;
  }

  .funnels-toolbar-main {
    width: 100%;
  }

  .bulk-group {
    width: 100%;
    justify-content: space-between;
  }

  .settings-domain-item {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .settings-domain-detail {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .search-pill {
    width: 100%;
  }

  .overview-hero-meta {
    grid-template-columns: 1fr;
  }

  .overview-hero .metric {
    border-top: 1px solid var(--border);
    padding-top: 8px;
  }

  .overview-hero .metric:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .page-header-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .control-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .page-header-controls .btn {
    width: 100%;
    margin-bottom: 0;
  }

  .page-header-control {
    min-width: 0;
  }

  .overview-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-btn {
    min-height: 34px;
    padding: 0 11px;
    font-size: 0.8rem;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header .snapshot-filters,
  html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header .toolbar-group {
    width: 100%;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header .toolbar-group {
    justify-content: space-between;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .tests-panel-header .toolbar-group select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .funnels-list {
    grid-template-columns: 1fr;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .funnel-meta-grid {
    grid-template-columns: 1fr;
  }

  .bulk-group {
    gap: 6px;
  }

  .bulk-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .account-invite-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .account-invite-actions {
    justify-content: stretch;
  }

  .account-invite-actions .btn {
    width: 100%;
  }

  .account-workspace-invite-form {
    grid-template-columns: 1fr;
  }

  .account-workspace-scope-field {
    max-width: none;
  }

  .account-workspace-invite-form .btn {
    width: 100%;
  }

  .account-workspace-selector-fields {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .account-workspace-selector .btn {
    width: 100%;
  }

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

  .account-current-workspace-value-row {
    align-items: flex-start;
  }

  .onboarding-summary-grid,
  .onboarding-role-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-actions .btn {
    width: 100%;
  }

  .account-member-editor {
    justify-content: stretch;
  }

  .account-member-editor-field {
    width: 100%;
    min-width: 0;
  }

  .account-member-editor .btn {
    width: 100%;
  }
}

.hidden {
  display: none;
}

.landing-page {
  min-height: 100vh;
  padding: 0;
  background:
    radial-gradient(circle at 10% -20%, rgba(37, 99, 235, 0.38), transparent 50%),
    radial-gradient(circle at 95% 8%, rgba(20, 184, 166, 0.28), transparent 45%),
    linear-gradient(140deg, #07111f 0%, #0d2138 56%, #113053 100%);
  color: #e6eef8;
}

.marketing-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
  background: rgba(7, 17, 31, 0.72);
  border-bottom: 1px solid rgba(148, 163, 184, 0.26);
}

.marketing-nav-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marketing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f8fafc;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.marketing-brand img {
  width: 34px;
  height: 34px;
}

.marketing-links {
  align-items: center;
  gap: 24px;
}

.marketing-links a {
  color: rgba(226, 232, 240, 0.84);
  text-decoration: none;
  font-weight: 500;
}

.marketing-links a:hover {
  color: #f8fafc;
}

.marketing-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.marketing-hero {
  padding: 72px 0 44px;
}

.marketing-hero-copy h1 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.landing-page .eyebrow {
  margin: 0 0 14px;
  color: #c7d8ee;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.marketing-hero-copy .lead {
  color: #d9e6f7;
  margin: 0;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.6;
}

.marketing-hero-copy .lead-subtle {
  margin: 10px 0 0;
  color: #b8cadf;
  font-size: 0.97rem;
}

.marketing-cta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.marketing-panel {
  height: 100%;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 20px;
  background: rgba(7, 17, 31, 0.52);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
  padding: 22px 22px 20px;
}

.marketing-panel h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  color: #f8fafc;
}

.marketing-checklist {
  margin: 0 0 18px;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: #d6e4f4;
}

.marketing-section {
  padding: 34px 0 24px;
}

.section-head {
  margin-bottom: 18px;
}

.section-head h2 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  letter-spacing: -0.01em;
}

.pricing-note {
  margin: 12px 0 0;
  color: #c3d3e7;
  max-width: 780px;
}

.marketing-card {
  height: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(9, 23, 39, 0.5);
  padding: 20px 18px;
}

.marketing-card h3 {
  margin: 0;
  color: #f1f7ff;
  font-size: 1.08rem;
}

.marketing-card p {
  margin: 10px 0 0;
  color: #cfdded;
  line-height: 1.6;
}

.pricing-section {
  padding-top: 44px;
}

.pricing-card {
  height: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(4, 14, 27, 0.62);
  padding: 20px 18px 18px;
}

.pricing-card-featured {
  border-color: rgba(56, 189, 248, 0.86);
  box-shadow: 0 14px 30px rgba(11, 98, 167, 0.32);
}

.pricing-card h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.08rem;
}

.pricing-card .price {
  margin: 10px 0 14px;
  font-size: 2rem;
  line-height: 1;
  color: #f8fafc;
  font-weight: 700;
}

.pricing-card .price span {
  font-size: 0.95rem;
  color: #b9cbde;
  font-weight: 500;
}

.pricing-card ul {
  margin: 0;
  padding-left: 18px;
  color: #d2dfef;
  display: grid;
  gap: 8px;
}

.marketing-footer {
  padding: 34px 0 48px;
}

.marketing-footer-inner {
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.marketing-footer-inner p {
  margin: 4px 0 0;
  color: #b4c7dc;
}

.marketing-footer-actions {
  display: inline-flex;
  gap: 10px;
}

@media (max-width: 991px) {
  .marketing-hero {
    padding-top: 56px;
  }
}

@media (max-width: 767px) {
  .marketing-nav-inner {
    min-height: 64px;
  }

  .marketing-nav-actions .badge {
    display: none;
  }

  .marketing-cta .btn,
  .marketing-footer-actions .btn {
    width: 100%;
  }

  .marketing-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .marketing-footer-actions {
    width: 100%;
    flex-direction: column;
  }
}

/* ── Onboarding modal ─────────────────────────────────────────── */

.onboarding-modal {
  z-index: 1010;
  align-items: center;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-card-onboarding.hidden {
  display: none;
}

.modal-card-onboarding {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
}

.onboarding-topbar {
  display: flex;
  justify-content: flex-end;
  margin: -8px -8px -8px;
}

.onboarding-close-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  width: 32px !important;
  min-width: 32px;
  max-width: 32px;
  height: 28px;
  margin-left: auto;
  align-self: flex-end !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.onboarding-close-btn:hover {
  color: var(--ink);
  background: var(--hover);
}

.modal-card-onboarding[id^="onboarding-step-"]:not(#onboarding-step-consent) {
  position: relative;
}

.modal-card-onboarding[id^="onboarding-step-"]:not(#onboarding-step-consent) > .onboarding-close-btn {
  position: absolute !important;
  top: 12px;
  right: 12px;
  left: auto !important;
  margin: 0 !important;
  align-self: flex-end;
  width: auto;
}

.onboarding-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.onboarding-logo-mark {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
}

.onboarding-brand h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.onboarding-step-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.onboarding-progress-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.onboarding-role-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.onboarding-summary-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 88%, white 12%);
}

.onboarding-summary-card strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.onboarding-consent-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onboarding-consent-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
}

.onboarding-consent-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.onboarding-required-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 4px;
}

.onboarding-task-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.onboarding-task {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
}

.onboarding-task-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.onboarding-task-body h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

.onboarding-page-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Debug panel ─────────────────────────────────────────────── */

.panel-debug {
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
  background: color-mix(in srgb, #f59e0b 5%, var(--card));
}

.panel-debug h3 {
  color: #b45309;
}

.panel-debug.hidden {
  display: none;
}

.keen-debug-header {
  align-items: center;
}

.keen-debug-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #f59e0b 36%, transparent);
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.debug-actions .btn {
  width: auto;
  min-width: 0;
}

.debug-actions-toolbar {
  margin-bottom: 14px;
}

.debug-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.debug-field {
  min-width: min(100%, 260px);
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
}

.debug-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.debug-field .meta {
  margin: 0;
}

.debug-field-output {
  margin-top: 2px;
}

.debug-output {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 82%, #111827 18%);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.keen-not-found-page {
  max-width: 980px;
}

.keen-not-found-card {
  display: grid;
  gap: 24px;
  padding: 28px;
}

.keen-not-found-copy {
  display: grid;
  gap: 10px;
}

.keen-not-found-path {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  word-break: break-word;
}

.keen-not-found-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.keen-run-detail-page {
  max-width: 1180px;
}

.keen-run-detail-panel {
  display: grid;
  gap: 20px;
  padding: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   Onboarding overlay — 5-step Keen-styled full-screen flow
═══════════════════════════════════════════════════════════════════ */

.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  min-height: 100dvh;
  background: var(--bg, #f5f8fa);
}

.ob-overlay.hidden { display: none; }

.ob-layout {
  display: flex;
  width: 100%;
  min-height: 100%;
}

/* Left panel */
.ob-left {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #1a1f5e 0%, #0d47a1 58%, #1565c0 100%);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

.ob-logo {
  padding: 36px 32px 20px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.ob-stepper {
  padding: 8px 32px 24px;
  flex: 1;
}

.ob-stepper-item {
  display: flex;
  flex-direction: column;
  opacity: 0.38;
  transition: opacity 0.2s;
}

.ob-stepper-item.is-done,
.ob-stepper-item.is-current { opacity: 1; }

.ob-stepper-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ob-stepper-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ob-stepper-item.is-current .ob-stepper-icon { background: #fff; }
.ob-stepper-item.is-done .ob-stepper-icon { background: rgba(255,255,255,0.22); }

.ob-stepper-num {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  line-height: 1;
}

.ob-stepper-item.is-current .ob-stepper-num { color: #1565c0; font-weight: 700; }
.ob-stepper-item.is-done .ob-stepper-num { display: none; }

.ob-stepper-check {
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
}

.ob-stepper-item.is-done .ob-stepper-check { display: flex; }

.ob-stepper-label { display: flex; flex-direction: column; gap: 2px; }

.ob-stepper-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

.ob-stepper-item.is-current .ob-stepper-title { color: #fff; font-weight: 600; }

.ob-stepper-desc {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.32);
}

.ob-stepper-item.is-current .ob-stepper-desc { color: rgba(255,255,255,0.65); }

.ob-stepper-line {
  height: 28px;
  margin-left: 18px;
  border-left: 1px dashed rgba(255,255,255,0.2);
}

.ob-left-footer {
  padding: 24px 32px;
  display: flex;
  gap: 16px;
  margin-top: auto;
}

.ob-left-footer a {
  color: rgba(255,255,255,0.38);
  font-size: 0.76rem;
  font-weight: 500;
  text-decoration: none;
}

.ob-left-footer a:hover { color: rgba(255,255,255,0.7); }

/* Right panel */
.ob-right {
  margin-left: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--bg, #f5f8fa);
  min-height: 100%;
}

.ob-content {
  width: 100%;
  max-width: 620px;
}

/* Step visibility */
.ob-step { display: none; }
.ob-step.is-active { display: block; }

/* Step typography */
.ob-heading {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ob-subheading {
  font-size: 0.97rem;
  color: var(--muted);
  margin: 0 0 32px;
  line-height: 1.55;
}

/* Info boxes */
.ob-info-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 8px;
  border: 1.5px dashed;
  margin-bottom: 12px;
}

.ob-info-box--primary {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

.ob-info-box--neutral {
  background: var(--bg);
  border-color: var(--border-strong);
}

.ob-info-box-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.ob-info-box-title { font-size: 0.88rem; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.ob-info-box-text { font-size: 0.8rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Consent */
.ob-consent-wrap {
  padding: 16px 0 20px;
  margin-bottom: 8px;
}

.ob-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.ob-consent-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

.ob-consent-text {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}

.ob-consent-text a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* Form fields */
.ob-field { margin-bottom: 22px; }

.ob-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.ob-label .ob-required { color: #e53e3e; margin-left: 2px; }

.ob-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: var(--card);
  color: var(--ink);
  font-size: 0.94rem;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
}

.ob-input:focus {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.ob-input-group { display: flex; }

.ob-input-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: color-mix(in srgb, var(--bg) 80%, var(--card));
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

.ob-input-group .ob-input { border-radius: 0 8px 8px 0; }

.ob-field-hint { font-size: 0.76rem; color: var(--muted); margin-top: 5px; }

.ob-field-error {
  font-size: 0.76rem;
  color: #e53e3e;
  margin-top: 5px;
  display: none;
}

.ob-field.has-error .ob-input { border-color: #e53e3e; }
.ob-field.has-error .ob-field-error { display: block; }

/* Notice (step 2) */
.ob-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  margin-bottom: 28px;
}

.ob-notice-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.ob-notice-title { font-size: 0.84rem; font-weight: 600; color: var(--ink); margin: 0 0 3px; }
.ob-notice-text { font-size: 0.78rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Scan animation */
.ob-scan-center { padding: 56px 0; text-align: center; }

.ob-scan-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  border-top-color: transparent;
  margin: 0 auto 20px;
  animation: ob-spin 0.9s linear infinite;
}

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

.ob-scan-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.ob-scan-meta { font-size: 0.88rem; color: var(--muted); }
.ob-scan-meta strong { color: var(--accent); font-weight: 600; }

/* Page picker */
.ob-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.ob-page-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--card);
  user-select: none;
}

.ob-page-item:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.ob-page-item.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }

.ob-page-item input[type="checkbox"] {
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.ob-page-item-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.ob-page-item-path { font-size: 0.71rem; color: var(--muted); }

.ob-page-error { font-size: 0.78rem; color: #e53e3e; margin-bottom: 10px; display: none; }
.ob-page-error.is-visible { display: block; }

.ob-discovery-hint {
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 20px;
}

/* Alert frequency */
.ob-freq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.ob-freq-option { position: relative; }

.ob-freq-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ob-freq-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border-radius: 8px;
  border: 1.5px dashed var(--border-strong);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}

.ob-freq-option input:checked + .ob-freq-label {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.ob-freq-label:hover { border-color: var(--accent); }

.ob-freq-icon { font-size: 1.5rem; color: var(--muted); }
.ob-freq-option input:checked + .ob-freq-label .ob-freq-icon { color: var(--accent); }
.ob-freq-name { font-size: 0.78rem; font-weight: 600; color: var(--ink); }

/* Whitelist notice */
.ob-whitelist {
  padding: 16px 18px;
  border-radius: 8px;
  border: 1.5px dashed rgba(237,137,54,0.55);
  background: rgba(255,248,240,0.9);
  margin-bottom: 26px;
}

html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .ob-whitelist {
  background: rgba(246,173,85,0.06);
  border-color: rgba(246,173,85,0.3);
}

.ob-whitelist-inner { display: flex; align-items: flex-start; gap: 12px; }
.ob-whitelist-icon { font-size: 1.3rem; flex-shrink: 0; }
.ob-whitelist-title { font-size: 0.86rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.ob-whitelist-text { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
.ob-whitelist-code { font-family: monospace; background: var(--card); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-strong); font-weight: 700; font-size: 0.8rem; }
.ob-whitelist-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-whitelist-link { font-size: 0.76rem; font-weight: 600; color: #92400e; text-decoration: none; padding: 3px 10px; background: rgba(246,173,85,0.18); border-radius: 4px; }
.ob-whitelist-link:hover { background: rgba(246,173,85,0.3); }

/* Success step */
.ob-success-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: color-mix(in srgb, #48bb78 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2.4rem;
}

.ob-success-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 28px;
}

.ob-success-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, #48bb78 12%, transparent);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #276749;
}

html[data-app-shell-variant="keen-demo1-light-header"][data-app-shell-mode="dark"] .ob-success-pill { color: #9ae6b4; }

.ob-divider { border: none; border-top: 1px dashed var(--border-strong); margin: 0 0 22px; }

.ob-cta-heading { font-size: 0.97rem; font-weight: 700; color: var(--ink); margin: 0 0 14px; }

.ob-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }

.ob-cta-card {
  display: flex;
  flex-direction: column;
  padding: 20px 18px;
  border-radius: 8px;
  border: 1.5px solid var(--border-strong);
  text-decoration: none;
  cursor: pointer;
  background: var(--card);
  transition: border-color 0.15s, box-shadow 0.15s;
  text-align: left;
  font-family: inherit;
}

.ob-cta-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.ob-cta-card--primary { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }

.ob-cta-icon { font-size: 1.7rem; margin-bottom: 10px; }
.ob-cta-title { font-size: 0.92rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.ob-cta-desc { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; line-height: 1.5; flex: 1; }
.ob-cta-action { font-size: 0.78rem; font-weight: 600; color: var(--accent); margin-top: auto; }

/* Action rows */
.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.ob-actions--end { justify-content: flex-end; }
.ob-actions--center { justify-content: center; }

.ob-skip {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  margin-top: 12px;
}

.ob-skip:hover { color: var(--accent); }

/* Consent error */
.ob-consent-error {
  font-size: 0.76rem;
  color: #e53e3e;
  margin-top: 6px;
  display: none;
}

.ob-consent-error.is-visible { display: block; }

/* Mobile */
@media (max-width: 767px) {
  .ob-left { display: none; }
  .ob-right { margin-left: 0; padding: 32px 20px; justify-content: flex-start; padding-top: 48px; }
  .ob-page-grid { grid-template-columns: 1fr; }
  .ob-cta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .keen-not-found-actions .btn {
    width: 100%;
  }

  .keen-run-detail-page .page-header-controls .btn {
    width: 100%;
  }
}

/* ===========================
   Page Monitor (pm-*)
   =========================== */

.pm-limit-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-warn-bg, #fff8e1);
  border: 1px solid var(--color-warn-border, #ffe082);
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.875rem;
}
.pm-limit-upgrade-link {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.pm-limit-banner.hidden,
.pm-domain-settings.hidden {
  display: none;
}

.pm-add-form-card {
  max-width: 640px;
  padding: 28px 32px;
  margin-bottom: 32px;
}

.pm-form-field {
  margin-bottom: 20px;
}
.pm-field-label {
  display: block;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 6px;
}
.pm-field-optional {
  font-weight: 400;
  color: var(--color-text-muted, #888);
  font-size: 0.8125rem;
}
.pm-field-required {
  color: var(--keen-color-error, #dc2626);
  margin-left: 2px;
  font-weight: 600;
}
.pm-field-input,
.pm-field-textarea {
  width: 100%;
  display: block;
}
.pm-field-textarea {
  resize: vertical;
  min-height: 80px;
}
.pm-field-hint {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
}
.pm-field-error {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--color-danger, #dc3545);
}
.pm-form-error {
  font-size: 0.875rem;
  color: var(--color-danger, #dc3545);
  margin-bottom: 12px;
}
.pm-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.pm-empty-state {
  text-align: center;
  padding: 60px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.pm-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: var(--color-text-muted, #aaa);
}
.pm-empty-icon svg {
  width: 100%;
  height: 100%;
}
.pm-empty-state h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.pm-empty-state p {
  font-size: 0.9rem;
  color: var(--color-text-muted, #888);
  margin-bottom: 20px;
}

.pm-domains-section {
  margin-top: 18px;
}
.pm-domains-header {
  margin-bottom: 12px;
}
.pm-domain-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pm-pages-section {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.02);
}
.pm-section-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.pm-section-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
}
.pm-section-header p {
  margin: 4px 0 0;
  color: var(--color-text-muted, #667085);
  font-size: 0.9rem;
}
.pm-pages-summary {
  color: var(--color-text-muted, #667085);
  font-size: 0.85rem;
  white-space: nowrap;
}
.pm-page-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-page-list.hidden,
.pm-page-toolbar.hidden,
.pm-page-loading.hidden {
  display: none;
}
.pm-page-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.pm-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pm-toolbar-label {
  color: var(--color-text-muted, #667085);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pm-filter-group {
  flex-shrink: 0;
}
.pm-filter-btn {
  font-size: 0.84rem;
}
.pm-page-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pm-page-search {
  max-width: 280px;
  margin-left: auto;
}
.pm-page-loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-page-skeleton {
  height: 72px;
  border-radius: 8px;
  border: 1px solid var(--color-border, #e3e7ee);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent),
    var(--color-surface-2, #f5f7fb);
  background-size: 220px 100%, 100% 100%;
  animation: pm-skeleton 1.2s ease-in-out infinite;
}
@keyframes pm-skeleton {
  0% { background-position: -220px 0, 0 0; }
  100% { background-position: calc(100% + 220px) 0, 0 0; }
}
.pm-page-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e3e7ee);
  border-radius: 8px;
}
.pm-page-row.is-discovered {
  border-style: dashed;
  background: color-mix(in srgb, var(--color-surface, #fff) 88%, #fff7ed);
}
.pm-page-main {
  min-width: 0;
}
.pm-page-url {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: baseline;
  font-weight: 650;
}
.pm-page-host {
  color: var(--color-text, #111827);
}
.pm-page-path {
  color: var(--color-text-muted, #667085);
  overflow-wrap: anywhere;
}
.pm-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 5px;
  color: var(--color-text-muted, #667085);
  font-size: 0.82rem;
}
.pm-page-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.pm-page-track-toggle {
  font-size: 0.78rem;
}
.pm-page-status--up {
  background: var(--color-success-bg, #e7f7ed);
  color: var(--color-success, #15803d);
}
.pm-page-status--down {
  background: var(--color-danger-bg, #fdecea);
  color: var(--color-danger, #dc3545);
}
.pm-page-status--unknown {
  background: var(--color-surface-2, #f5f5f5);
  color: var(--color-text-muted, #667085);
}
.pm-tracking-status--tracked {
  background: var(--color-info-bg, #e3f2fd);
  color: var(--color-primary, #0d6efd);
}
.pm-tracking-status--not-tracked {
  background: #fff7ed;
  color: #9a3412;
}
.pm-page-cadence {
  color: var(--color-text-muted, #667085);
  font-size: 0.78rem;
  white-space: nowrap;
}
.pm-page-cadence--key {
  color: var(--color-primary, #0d6efd);
  font-weight: 600;
}
.pm-page-empty {
  padding: 28px;
  text-align: center;
  background: var(--color-surface, #fff);
  border: 1px dashed var(--color-border, #d7dee8);
  border-radius: 8px;
}
.pm-page-empty h4 {
  margin: 0 0 6px;
  font-size: 1rem;
}
.pm-page-empty p {
  margin: 0;
  color: var(--color-text-muted, #667085);
  font-size: 0.9rem;
}
.pm-domain-card {
  padding: 20px 24px;
  cursor: pointer;
}
.pm-domain-card.is-selected {
  border-color: var(--color-primary, #0d6efd);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary, #0d6efd) 36%, transparent);
}
.pm-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pm-card-hostname {
  font-weight: 600;
  font-size: 1rem;
}
.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 100px;
}
.pm-badge--idle {
  background: var(--color-surface-2, #f5f5f5);
  color: var(--color-text-muted, #888);
}
.pm-badge--crawling {
  background: var(--color-info-bg, #e3f2fd);
  color: var(--color-info, #1976d2);
}
.pm-badge--queued {
  background: var(--color-info-bg, #e3f2fd);
  color: var(--color-primary, #0d6efd);
}
.pm-badge--crawling::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pm-pulse 1.2s ease-in-out infinite;
}
.pm-badge--error {
  background: var(--color-danger-bg, #fdecea);
  color: var(--color-danger, #dc3545);
}
@keyframes pm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.pm-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
  margin-bottom: 14px;
}
.pm-card-stat strong {
  color: var(--color-text, #111827);
  font-weight: 700;
}
.pm-card-error {
  margin: -4px 0 14px;
  color: var(--color-danger, #dc3545);
  font-size: 0.84rem;
}
.pm-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pm-domain-settings {
  cursor: default;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, #e3e7ee);
}
.pm-domain-settings-copy {
  margin-bottom: 14px;
}
.pm-domain-settings-copy h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 650;
}
.pm-domain-settings-copy p {
  margin: 0;
  color: var(--color-text-muted, #667085);
  font-size: 0.86rem;
}
.pm-domain-settings-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(260px, 1fr);
  gap: 16px;
  align-items: start;
}
.pm-domain-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.pm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 0.875rem;
}
.pm-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pm-toggle-track {
  display: inline-block;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-surface-3, #ccc);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.pm-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.pm-toggle-input:checked + .pm-toggle-track {
  background: var(--color-primary, #0d6efd);
}
.pm-toggle-input:checked + .pm-toggle-track::after {
  transform: translateX(14px);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-limit-banner {
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed color-mix(in srgb, var(--status-warn) 28%, var(--border));
  border-radius: var(--keen-surface-radius);
  background: color-mix(in srgb, var(--status-warn-bg) 52%, var(--card));
  color: color-mix(in srgb, var(--status-warn) 78%, var(--ink));
  box-shadow: var(--keen-surface-shadow);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-list {
  gap: 14px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domains-section {
  margin-top: 18px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domains-header {
  margin-bottom: 12px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domains-header h3 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domains-header p {
  max-width: 640px;
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "header actions"
    "meta actions"
    "error error"
    "settings settings";
  align-items: center;
  gap: 10px 20px;
  padding: 18px 20px;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: var(--card);
  box-shadow: var(--keen-surface-shadow);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: inset 3px 0 0 var(--accent), var(--keen-surface-shadow);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-header {
  grid-area: header;
  margin: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-hostname {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-meta {
  grid-area: meta;
  margin: 0;
  gap: 6px 18px;
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-stat strong {
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-error {
  grid-area: error;
  margin: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-actions {
  grid-area: actions;
  justify-content: flex-end;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-settings {
  grid-area: settings;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: color-mix(in srgb, var(--card) 94%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-settings-copy h4 {
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-settings-copy p {
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-pages-section {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: var(--card);
  box-shadow: var(--keen-surface-shadow);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-section-header {
  align-items: flex-start;
  margin-bottom: 16px;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-section-header h3 {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-pages-summary {
  padding-top: 5px;
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(220px, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: color-mix(in srgb, var(--card) 94%, var(--bg-accent));
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-toolbar-group {
  min-height: 40px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-control-radius);
  background: var(--card);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-toolbar-label {
  color: var(--muted);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-filter-group {
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-filter-btn {
  min-height: 32px;
  border-radius: calc(var(--keen-control-radius) - 2px);
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-filter-btn.is-active {
  background: color-mix(in srgb, var(--accent) 11%, var(--card));
  color: var(--accent-dark);
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-search {
  justify-self: end;
  width: min(280px, 100%);
  max-width: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-row {
  padding: 16px 18px;
  border: 1px solid var(--keen-surface-border);
  border-radius: var(--keen-surface-radius);
  background: color-mix(in srgb, var(--card) 96%, var(--bg-accent));
  box-shadow: none;
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-row.is-discovered {
  border-style: dashed;
  background: color-mix(in srgb, var(--card) 86%, var(--status-warn-bg));
}

html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-row:hover {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow: var(--keen-surface-shadow-hover);
}

/* Final Keen route-width guard. Keep after later route-specific base rules. */
html[data-app-shell-variant="keen-demo1-light-header"] .app-content {
  max-width: var(--keen-content-rail);
}

html[data-app-shell-variant="keen-demo1-light-header"] .page.active {
  width: 100%;
  max-width: var(--keen-content-rail);
  justify-self: stretch;
  justify-items: stretch;
  align-items: stretch;
}

html[data-app-shell-variant="keen-demo1-light-header"] .page[data-page="funnels"].active {
  inline-size: var(--keen-content-rail);
  max-inline-size: 100%;
}

html[data-app-shell-variant="keen-demo1-light-header"] .page[data-page="page-monitor"].active,
html[data-app-shell-variant="keen-demo1-light-header"] .page[data-page="settings"].active,
html[data-app-shell-variant="keen-demo1-light-header"] .page[data-page="help"].active,
html[data-app-shell-variant="keen-demo1-light-header"] .page[data-page="refer"].active {
  inline-size: var(--keen-content-rail);
  max-inline-size: 100%;
}

html[data-app-shell-variant="keen-demo1-light-header"] .page-header,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-dashboard-hero,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-pages-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-secondary-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-graph,
html[data-app-shell-variant="keen-demo1-light-header"] .overview-risk,
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-funnels-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-toolbar,
html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-shell,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-strip-wrap,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-panel,
html[data-app-shell-variant="keen-demo1-light-header"] .settings-tab-stack,
html[data-app-shell-variant="keen-demo1-light-header"] .account-edit-stack,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-list,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-domains-section,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-pages-section,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-add-form-card,
html[data-app-shell-variant="keen-demo1-light-header"] .refer-page-grid,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-shell,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-article-page,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-not-found-page,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-run-detail-page {
  width: 100%;
  max-width: none;
  min-width: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .settings-shell,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-settings-shell,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-limit-banner,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-add-form-shell,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-empty-state,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-card,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-toolbar,
html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-list,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-intro,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-index,
html[data-app-shell-variant="keen-demo1-light-header"] .keen-help-article-shell {
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list {
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  align-items: start;
}

html[data-app-shell-variant="keen-demo1-light-header"] .funnels-list .funnel-card {
  width: 100%;
  max-width: none;
  min-width: 0;
}

@media (max-width: 767px) {
  .pm-add-form-card { padding: 20px; }
  .pm-form-actions { flex-direction: column-reverse; }
  .pm-form-actions .btn { width: 100%; }
  .pm-card-actions { flex-direction: column; align-items: flex-start; }
  .pm-domain-settings-grid { grid-template-columns: 1fr; }
  .pm-domain-settings-actions { flex-direction: column-reverse; }
  .pm-domain-settings-actions .btn { width: 100%; }
  .pm-section-header,
  .pm-page-toolbar,
  .pm-toolbar-group,
  .pm-page-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .pm-toolbar-group {
    width: 100%;
  }
  .pm-filter-group {
    width: 100%;
    overflow-x: auto;
  }
  .keen-filter-chip-group {
    max-width: 100%;
    scrollbar-width: thin;
  }
  .keen-filter-chip {
    flex: 0 0 auto;
  }
  .pm-page-search {
    max-width: none;
    width: 100%;
    margin-left: 0;
  }
  .pm-pages-summary {
    white-space: normal;
  }
  .pm-page-side {
    align-items: flex-start;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-card,
  html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-toolbar,
  html[data-app-shell-variant="keen-demo1-light-header"] .pm-toolbar-group {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-header,
  html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-meta,
  html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-error,
  html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-actions,
  html[data-app-shell-variant="keen-demo1-light-header"] .pm-domain-settings {
    grid-area: auto;
  }

  html[data-app-shell-variant="keen-demo1-light-header"] .pm-card-actions,
  html[data-app-shell-variant="keen-demo1-light-header"] .pm-page-search {
    justify-self: stretch;
  }
}