:root {
  --bg: #f4f6ff;
  --bg-soft: #eef2ff;
  --panel: #ffffff;
  --line: #dce3ff;
  --line-strong: #c8d3ff;
  --text: #13182f;
  --heading-text: #13182f;
  --muted: #667091;
  --accent: #4d5bff;
  --accent-2: #6f78ff;
  --font-body-family: "Space Grotesk", "Manrope", "Avenir Next", sans-serif;
  --font-heading-family: "Sora", "Space Grotesk", sans-serif;
  --font-base-size: 16px;
  --good: #0c9f6f;
  --warn: #f59f0a;
  --bad: #ef4444;
  --shadow: 0 14px 30px rgba(46, 65, 165, 0.1);
  --workspace-content-max-width: 1380px;
  --workspace-section-gap: 16px;
  --workspace-element-gap: 12px;
  --workspace-panel-padding: 16px;
  --workspace-form-min-col: 180px;
  --sidebar-nav-item-font-size: 16px;
  --sidebar-nav-item-font-weight: 600;
  --sidebar-nav-item-line-height: 1.35;
  --sidebar-nav-heading-size: 12px;
  --sidebar-nav-heading-weight: 600;
  --sidebar-nav-heading-letter-spacing: 0.06em;
  --field-surface: #ffffff;
  --field-border: #c6d2fb;
  --field-border-hover: #afc0f8;
  --field-text: #1d2650;
  --field-placeholder: #8c98bc;
  --field-focus: #4d5bff;
}

.whitelist-plan-pricing-block {
  border: 1px dashed var(--line, #c9d4ff);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.whitelist-plan-pricing-block h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.whitelist-plan-pricing-list {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.whitelist-plan-pricing-row {
  border: 1px solid var(--line, #c9d4ff);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 140px;
  gap: 10px;
  align-items: end;
}

.whitelist-plan-pricing-row-head {
  display: grid;
  gap: 4px;
}

.whitelist-plan-pricing-row-head span {
  color: var(--muted, #5f6f96);
  font-size: 12px;
}

@media (max-width: 900px) {
  .whitelist-plan-pricing-row {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body-family);
  font-size: var(--font-base-size);
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 80%);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading-family);
  color: var(--heading-text);
}

/* Keep option-card bold labels on the body typeface for consistent UI typography. */
.settings-toggle-copy strong,
.white-label-enable-toggle-copy strong,
.download-permissions-option-content strong,
.legal-settings-toggle-copy strong,
.order-deposit-toggle-copy strong,
.customer-portal-redesign-toggle strong,
.integration-cubicasa-mode-option strong,
.storefront-deposit-override-toggle strong,
.storefront-directory-setting-copy strong {
  font-family: var(--font-body-family);
  font-weight: 600;
  letter-spacing: 0;
}

.hidden {
  display: none !important;
}

.aurora {
  position: fixed;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.2;
  z-index: -1;
}

.aurora-a {
  width: 300px;
  height: 300px;
  background: #8aa0ff;
  top: -60px;
  right: 5%;
}

.aurora-b {
  width: 360px;
  height: 360px;
  background: #87dbff;
  bottom: -80px;
  left: 4%;
}

.auth-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 18px;
  display: grid;
  gap: 18px;
}

.auth-intro {
  background: linear-gradient(135deg, #edf1ff 0%, #ffffff 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
}

.auth-intro h1 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  margin: 0 0 12px;
}

.auth-intro p {
  margin: 0;
  font-size: 17px;
  color: var(--muted);
  max-width: 760px;
}

.auth-shell-admin {
  padding-top: 34px;
  padding-bottom: 34px;
  gap: 16px;
}

.admin-auth-intro {
  border-radius: 22px;
  border-color: #cfd9ff;
  background:
    radial-gradient(100% 180% at 100% -12%, rgba(116, 134, 255, 0.22), transparent 45%),
    linear-gradient(135deg, #eef2ff 0%, #ffffff 58%, #f0f4ff 100%);
  padding: 28px;
  display: grid;
  gap: 18px;
}

.admin-auth-intro-main p {
  max-width: 68ch;
}

.admin-auth-intro-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.admin-auth-meta-item {
  border: 1px solid #d4ddff;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.admin-auth-meta-item strong {
  font-size: 13px;
  color: #22307d;
}

.admin-auth-meta-item span {
  color: #4f5e93;
  font-size: 12px;
  line-height: 1.45;
}

.admin-auth-panels {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
  align-items: stretch;
  gap: 14px;
}

.admin-auth-info {
  padding: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border-color: #d5dfff;
}

.admin-auth-info h2 {
  margin: 0 0 10px;
  font-size: 31px;
  line-height: 1.1;
}

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

.admin-auth-checklist li {
  position: relative;
  padding-left: 16px;
  color: #344069;
  line-height: 1.5;
  font-weight: 600;
}

.admin-auth-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}

.admin-auth-security {
  margin: 14px 0 0;
  font-size: 13px;
  color: #55638f;
  border-top: 1px dashed #d5dcf8;
  padding-top: 12px;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e2e9ff;
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app-auth-page {
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(1200px 360px at 50% -20%, rgba(84, 104, 238, 0.2), transparent 58%),
    linear-gradient(180deg, #f8faff 0%, #edf2ff 100%);
}

.app-auth-page .auth-shell-signin {
  max-width: none;
  margin: 0;
  min-height: 100vh;
  padding: 24px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.app-auth-page .app-shell {
  position: relative;
  z-index: 2;
}

.auth-portal-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.auth-portal-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(86px);
  opacity: 0.3;
}

.auth-portal-glow-a {
  width: 430px;
  height: 430px;
  top: -210px;
  right: 8%;
  background: rgba(84, 115, 255, 0.48);
}

.auth-portal-glow-b {
  width: 380px;
  height: 380px;
  bottom: -190px;
  left: 5%;
  background: rgba(85, 202, 235, 0.38);
}

.auth-portal-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1180px, 92vw);
  height: min(76vh, 680px);
  border-radius: 28px;
  border: 1px solid rgba(159, 179, 255, 0.58);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.55) 0%, rgba(232, 240, 255, 0.4) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 30px 64px rgba(43, 62, 147, 0.12);
}

.auth-portal-topbar,
.auth-portal-sidebar,
.auth-portal-panel {
  position: absolute;
  border: 1px solid rgba(145, 168, 246, 0.46);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.56) 0%, rgba(227, 236, 255, 0.42) 100%);
}

.auth-portal-topbar {
  top: 18px;
  left: 18px;
  right: 18px;
  height: 54px;
}

.auth-portal-sidebar {
  top: 84px;
  left: 18px;
  width: 188px;
  bottom: 18px;
}

.auth-portal-panel-a {
  top: 84px;
  left: 220px;
  right: 18px;
  height: 180px;
}

.auth-portal-panel-b {
  top: 278px;
  left: 220px;
  width: 42%;
  bottom: 18px;
}

.auth-portal-panel-c {
  top: 278px;
  right: 18px;
  width: 30%;
  bottom: 18px;
}

.auth-signin-card {
  width: min(430px, 100%);
  border-radius: 20px;
  border-color: #d0dcff;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(9px);
  box-shadow: 0 24px 52px rgba(41, 62, 150, 0.16);
  padding: 30px;
  animation: auth-card-rise 220ms ease-out;
}

.auth-signin-card h1,
.auth-signin-card h2 {
  margin: 0 0 10px;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.auth-signin-card h1 {
  font-size: clamp(34px, 4vw, 44px);
}

.auth-signin-card h2 {
  font-size: clamp(30px, 3.8vw, 38px);
}

.auth-signin-copy {
  margin: 0 0 14px;
  color: #58699a;
}

.app-auth-page .auth-signin-card .eyebrow {
  margin-bottom: 14px;
  padding: 7px 12px;
  background: #e6edff;
  color: #4057cb;
}

.app-auth-page .auth-signin-card label {
  margin-bottom: 11px;
  color: #4e5f91;
  font-size: 13px;
  font-weight: 600;
}

.app-auth-page .auth-signin-card input {
  margin-top: 6px;
  padding: 12px 13px;
  border-radius: 12px;
  border-color: #c8d4fb;
  background: rgba(245, 248, 255, 0.9);
}

.app-auth-page .auth-signin-card .btn {
  width: 100%;
  margin-top: 4px;
  min-height: 48px;
}

@keyframes auth-card-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.marketing-wrap {
  width: min(94vw, 1220px);
  margin: 0 auto;
}

.marketing-page {
  --mk-bg-0: #ffffff;
  --mk-bg-1: var(--bg);
  --mk-bg-2: var(--bg-soft);
  --mk-ink: var(--text);
  --mk-muted: var(--muted);
  --mk-line: var(--line);
  --mk-line-strong: var(--line-strong);
  --mk-accent: var(--accent);
  --mk-accent-2: var(--accent-2);
  --mk-accent-soft: var(--bg-soft);
  --mk-card: var(--panel);
  --mk-shadow: var(--shadow);
  --mk-font-family: "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, "Arial Nova", Arial, "Segoe UI", sans-serif;
  --mk-brand-font-family: "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, "Arial Nova", Arial, "Segoe UI", sans-serif;
  font-family: var(--mk-font-family);
  color: var(--mk-ink);
  background:
    radial-gradient(1200px 360px at 14% -18%, rgba(77, 91, 255, 0.15), transparent 58%),
    radial-gradient(1000px 360px at 90% 8%, rgba(111, 120, 255, 0.13), transparent 60%),
    linear-gradient(180deg, var(--mk-bg-0) 0%, var(--mk-bg-1) 52%, #f8faff 100%);
}

.marketing-page,
.marketing-page button,
.marketing-page input,
.marketing-page select,
.marketing-page textarea {
  font-family: var(--mk-font-family);
}

.marketing-page h1,
.marketing-page h2,
.marketing-page h3,
.marketing-page h4,
.marketing-page .marketing-brand,
.marketing-page .mk-logo-mark,
.marketing-page .cln-nav a,
.marketing-page .btn {
  font-family: var(--mk-font-family);
}

.marketing-page .eyebrow {
  background: #e2e9ff;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.mk-bg {
  position: fixed;
  border-radius: 999px;
  filter: blur(68px);
  pointer-events: none;
  z-index: -2;
  opacity: 0.55;
}

.mk-bg-a {
  width: 360px;
  height: 360px;
  top: -120px;
  right: 8%;
  background: rgba(77, 91, 255, 0.24);
}

.mk-bg-b {
  width: 440px;
  height: 440px;
  left: -130px;
  bottom: -200px;
  background: rgba(111, 120, 255, 0.2);
}

.mk-bg-c {
  width: 300px;
  height: 300px;
  right: 24%;
  top: 46%;
  background: rgba(77, 91, 255, 0.15);
  filter: blur(82px);
}

.marketing-page .btn {
  border-color: transparent;
  background: linear-gradient(135deg, var(--mk-accent) 0%, var(--mk-accent-2) 100%);
  box-shadow: 0 10px 20px rgba(15, 122, 199, 0.22);
  color: #fff;
}

.marketing-page .btn-soft {
  background: #fff;
  border-color: var(--mk-line-strong);
  color: var(--mk-accent);
  box-shadow: none;
}

.marketing-page .btn-soft:hover {
  background: var(--mk-accent-soft);
}

.marketing-top {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--mk-line);
  background: rgba(247, 252, 255, 0.84);
  backdrop-filter: blur(10px);
}

.mk-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

.mk-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.mk-logo-shell {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--mk-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 20px rgba(27, 80, 130, 0.09);
  padding: 0;
}

.mk-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 6px;
}

.mk-logo-shell.has-logo {
  width: auto;
  min-width: 0;
  max-width: min(48vw, 240px);
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.mk-logo-shell.has-logo .mk-logo {
  width: auto;
  max-width: 100%;
  height: 100%;
  background: transparent;
  padding: 0;
}

.mk-brand-link.has-logo .marketing-brand {
  display: none;
}

.marketing-top .mk-brand-link.has-logo {
  gap: 0;
}

.marketing-top .mk-logo-shell.has-logo {
  max-width: min(54vw, 320px);
  height: clamp(42px, 4.6vw, 52px);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.marketing-top .mk-logo-shell.has-logo .mk-logo {
  width: auto;
  max-width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(62, 87, 196, 0.14));
}

.marketing-footer .mk-logo-shell.has-logo {
  max-width: min(42vw, 230px);
  height: clamp(38px, 4.2vw, 46px);
  border-color: var(--mk-line-strong);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(27, 80, 130, 0.08);
  overflow: hidden;
  padding: 0 6px;
}

.marketing-footer .mk-logo-shell.has-logo .mk-logo {
  height: 100%;
  padding: 4px 0;
  background: transparent;
  filter: none;
}

.mk-logo-mark {
  font-family: var(--mk-brand-font-family, "Space Grotesk", "Plus Jakarta Sans", sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
}

.marketing-brand {
  font-family: var(--mk-brand-font-family, "Space Grotesk", "Plus Jakarta Sans", sans-serif);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.marketing-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.marketing-nav a:not(.btn) {
  text-decoration: none;
  font-weight: 600;
  color: #2a355f;
  border-radius: 10px;
  padding: 8px 10px;
}

.marketing-nav a:not(.btn):hover {
  background: #eaf0ff;
}

.mk-hero {
  padding: 40px 0 20px;
}

.mk-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.mk-hero-copy {
  animation: mk-rise 600ms ease both;
}

.mk-hero-copy h1 {
  margin: 0 0 12px;
  max-width: 18ch;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.02;
}

.mk-hero-copy p {
  margin: 0 0 18px;
  max-width: 58ch;
  color: var(--mk-muted);
  font-size: 18px;
  line-height: 1.6;
}

.mk-stage {
  position: relative;
  border-color: var(--mk-line);
  background:
    linear-gradient(145deg, #f3f6ff 0%, #ffffff 52%, #eef2ff 100%);
  padding: 14px;
  overflow: hidden;
  box-shadow: var(--mk-shadow);
  animation: mk-rise 700ms ease both;
}

.mk-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.45) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
  pointer-events: none;
}

.mk-browser {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  z-index: 1;
}

.mk-browser-top {
  height: 34px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}

.mk-browser-top span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #c5d3ff;
}

.mk-browser-body {
  min-height: 250px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
}

.mk-browser-col {
  display: grid;
  gap: 10px;
}

.mk-ui-card {
  border-radius: 10px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%);
  min-height: 80px;
}

.mk-ui-card-highlight {
  background:
    linear-gradient(135deg, rgba(77, 91, 255, 0.18) 0%, rgba(111, 120, 255, 0.06) 100%),
    linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%);
}

.mk-ui-card-wide {
  min-height: 140px;
}

.mk-ui-card-tall {
  min-height: 230px;
}

.mk-stage-floating {
  position: absolute;
  min-width: 178px;
  max-width: 210px;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 30px rgba(39, 54, 129, 0.14);
  z-index: 2;
  animation: mk-float 5s ease-in-out infinite;
}

.mk-stage-floating strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.mk-stage-floating p {
  margin: 0;
  color: #4a557f;
  font-size: 13px;
}

.mk-stage-note-a {
  top: 18px;
  right: -18px;
}

.mk-stage-note-b {
  bottom: 22px;
  left: -16px;
  animation-delay: 1.2s;
}

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

.mk-metric {
  border-color: var(--mk-line);
  background: rgba(255, 255, 255, 0.9);
}

.mk-metric h4 {
  color: #4d6580;
}

.mk-metric strong {
  font-size: clamp(24px, 3vw, 30px);
  color: #173a5a;
}

.mk-section {
  padding: 58px 0 12px;
}

.mk-section-alt {
  margin-top: 22px;
  padding: 42px 0 24px;
  border-top: 1px solid #dde9f7;
  border-bottom: 1px solid #dde9f7;
  background: linear-gradient(180deg, rgba(241, 248, 255, 0.7) 0%, rgba(250, 253, 255, 0.8) 100%);
}

.mk-section-head {
  max-width: 780px;
  margin-bottom: 22px;
}

.mk-section-head h2 {
  margin: 0;
  font-size: clamp(29px, 4.2vw, 45px);
  line-height: 1.1;
}

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

.mk-process-card {
  min-height: 210px;
  border-color: #d6e4f3;
  background: var(--mk-card);
  box-shadow: 0 10px 22px rgba(31, 74, 118, 0.08);
}

.mk-step-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: #e2e9ff;
}

.mk-process-card h3 {
  margin: 0 0 8px;
  font-size: 21px;
}

.mk-process-card p {
  margin: 0;
  line-height: 1.6;
  color: var(--mk-muted);
}

.mk-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 16px;
}

.mk-convo-stack {
  display: grid;
  gap: 10px;
}

.mk-chat-bubble {
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 12px;
  max-width: 92%;
  box-shadow: 0 10px 22px rgba(39, 54, 129, 0.09);
  background: #fff;
}

.mk-chat-bubble strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}

.mk-chat-bubble p {
  margin: 0;
  color: #4a557f;
  font-size: 14px;
  line-height: 1.6;
}

.mk-chat-left {
  justify-self: start;
}

.mk-chat-right {
  justify-self: end;
  background: #eef2ff;
}

.mk-story-panel {
  border-color: var(--line);
  background:
    radial-gradient(circle at 90% 8%, rgba(77, 91, 255, 0.13) 0%, transparent 40%),
    #fff;
  padding: 18px;
}

.mk-story-panel h3 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.8vw, 39px);
  line-height: 1.12;
}

.mk-story-panel p {
  margin: 0 0 10px;
  color: var(--mk-muted);
  line-height: 1.7;
}

.mk-mini-checks {
  display: grid;
  gap: 8px;
}

.mk-mini-check {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #f5f7ff;
  padding: 9px 10px;
  color: #4a557f;
  font-weight: 600;
}

.mk-quote-band {
  padding: 12px 0 4px;
}

.mk-hero-quote {
  margin: 0;
  border-color: var(--line);
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  font-size: clamp(21px, 3.1vw, 33px);
  line-height: 1.4;
  font-weight: 600;
  color: #2a355f;
  background:
    radial-gradient(circle at 0% 100%, rgba(77, 91, 255, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(111, 120, 255, 0.11) 0%, transparent 44%),
    #fff;
}

.mk-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 18px;
  align-items: center;
}

.mk-feature-row + .mk-feature-row {
  margin-top: 24px;
}

.mk-feature-row-reverse {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
}

.mk-feature-copy h3 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
}

.mk-feature-copy p {
  margin: 0 0 8px;
  color: var(--mk-muted);
  line-height: 1.65;
}

.mk-feature-visual {
  border-color: var(--mk-line);
  padding: 14px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(39, 54, 129, 0.09);
}

.mk-visual-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.mk-visual-panel {
  min-height: 100px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, #f4f6ff 0%, #ffffff 100%);
}

.mk-visual-panel-wide {
  grid-column: 1 / -1;
  min-height: 138px;
}

.mk-automation-visual {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}

.mk-node {
  position: absolute;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 9px 10px;
  min-width: 126px;
  text-align: center;
  font-weight: 700;
  color: #394165;
  z-index: 2;
}

.mk-node-a {
  top: 24px;
  left: 18px;
}

.mk-node-b {
  top: 24px;
  right: 20px;
}

.mk-node-c {
  bottom: 24px;
  left: 26px;
}

.mk-node-d {
  bottom: 24px;
  right: 16px;
}

.mk-link {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg, rgba(111, 120, 255, 0.2) 0%, rgba(77, 91, 255, 0.85) 100%);
  transform-origin: left center;
  z-index: 1;
}

.mk-link-ab {
  top: 56px;
  left: 150px;
  width: calc(100% - 302px);
}

.mk-link-bc {
  top: 126px;
  left: 160px;
  width: calc(100% - 320px);
  transform: rotate(38deg);
}

.mk-link-cd {
  bottom: 55px;
  left: 156px;
  width: calc(100% - 308px);
}

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

.mk-app-card {
  border-color: var(--line);
  box-shadow: 0 10px 24px rgba(39, 54, 129, 0.08);
}

.mk-app-thumb {
  height: 120px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, #edf1ff 0%, #ffffff 48%, #f4f6ff 100%);
}

.mk-mobile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.mk-mobile-row h2 {
  margin: 0 0 10px;
  font-size: clamp(29px, 4.4vw, 46px);
  line-height: 1.1;
}

.mk-lead {
  margin: 0 0 12px;
  color: var(--mk-muted);
  line-height: 1.7;
  font-size: 17px;
}

.mk-device-stack {
  border-color: var(--line);
  min-height: 290px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(77, 91, 255, 0.14) 0%, transparent 45%),
    #fff;
}

.mk-device-phone,
.mk-device-tablet {
  position: absolute;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #f4f6ff 0%, #ffffff 100%);
  box-shadow: 0 12px 26px rgba(39, 54, 129, 0.11);
}

.mk-device-phone {
  width: 170px;
  height: 250px;
  left: 12%;
  bottom: 14px;
}

.mk-device-tablet {
  width: 62%;
  height: 210px;
  right: 9%;
  top: 18px;
}

.mk-map-panel {
  border-color: var(--line);
  overflow: hidden;
}

.mk-map-canvas {
  min-height: 310px;
  position: relative;
  background:
    linear-gradient(rgba(220, 227, 255, 0.62) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 227, 255, 0.62) 1px, transparent 1px),
    #f8faff;
  background-size: 32px 32px;
}

.mk-map-node {
  position: absolute;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px 10px;
  color: #394165;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(39, 54, 129, 0.11);
  z-index: 2;
}

.mk-map-node-1 {
  left: 6%;
  top: 42%;
}

.mk-map-node-2 {
  left: 24%;
  top: 24%;
}

.mk-map-node-3 {
  left: 44%;
  top: 53%;
}

.mk-map-node-4 {
  left: 62%;
  top: 27%;
}

.mk-map-node-5 {
  left: 80%;
  top: 54%;
}

.mk-map-line {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg, rgba(111, 120, 255, 0.24) 0%, rgba(77, 91, 255, 0.8) 100%);
  transform-origin: left center;
  z-index: 1;
}

.mk-map-line-12 {
  left: 13%;
  top: 45%;
  width: 14%;
  transform: rotate(-30deg);
}

.mk-map-line-23 {
  left: 31%;
  top: 33%;
  width: 16%;
  transform: rotate(28deg);
}

.mk-map-line-34 {
  left: 50%;
  top: 52%;
  width: 15%;
  transform: rotate(-33deg);
}

.mk-map-line-45 {
  left: 70%;
  top: 35%;
  width: 14%;
  transform: rotate(30deg);
}

.mk-workflow-benefits {
  margin-top: 12px;
}

.mk-task-panel {
  margin-top: 12px;
  border-color: var(--line);
  padding: 16px;
}

.mk-task-panel h3 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.2vw, 35px);
  line-height: 1.14;
}

.mk-results-panel {
  border-color: var(--line);
  padding: 14px;
  margin-bottom: 14px;
}

.mk-results-screen {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 8px;
}

.mk-results-row {
  border-radius: 8px;
  border: 1px solid var(--line);
  height: 54px;
  background:
    linear-gradient(145deg, #f4f6ff 0%, #ffffff 100%);
}

.mk-results-pills {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mk-results-pills span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #eef2ff;
  color: #4a557f;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

.mk-pricing-core {
  margin-bottom: 14px;
  border-color: #cfd9fb;
  background: linear-gradient(120deg, rgba(80, 100, 255, 0.08) 0%, rgba(255, 255, 255, 0.95) 52%);
}

.mk-pricing-core-label {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #40539d;
  font-weight: 700;
}

.mk-pricing-core-copy {
  margin: 0;
  font-size: 14px;
  color: #41538b;
}

.mk-pricing-lane + .mk-pricing-lane {
  margin-top: 14px;
}

.mk-pricing-lane-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4b5f9d;
}

.mk-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

.mk-plan-card {
  border-color: #d1daf8;
  box-shadow: 0 10px 22px rgba(39, 54, 129, 0.08);
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 100%;
  padding: 16px;
}

.mk-plan-card-featured {
  position: relative;
  border-color: #7f92ff;
  background:
    linear-gradient(170deg, rgba(88, 108, 255, 0.1) 0%, rgba(255, 255, 255, 0.96) 30%),
    #fff;
  box-shadow:
    0 16px 30px rgba(41, 58, 140, 0.13),
    0 0 0 1px rgba(104, 126, 255, 0.2) inset;
}

.mk-plan-badge {
  margin: 0;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #9fb0ff;
  background: #edf1ff;
  color: #334da8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
}

.mk-plan-card h3 {
  font-size: 28px;
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.mk-plan-card-price {
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  color: #273a91;
  line-height: 1.02;
}

.mk-plan-card-price span {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #52629a;
}

.mk-plan-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mk-plan-card-stats span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #c7d3fc;
  background: #f5f8ff;
  color: #3d4f89;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
}

.mk-plan-fit {
  margin: 0;
  font-size: 13px;
  color: #506097;
}

.mk-plan-unique-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.mk-plan-unique-list li {
  position: relative;
  padding-left: 14px;
  line-height: 1.42;
  font-size: 13px;
  color: #334473;
}

.mk-plan-unique-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #5f74ff;
}

.mk-enterprise-estimator {
  margin: 2px 0 0;
  padding-top: 8px;
  border-top: 1px dashed #cfd9fb;
}

.mk-enterprise-estimator summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  color: #5364a1;
}

.mk-enterprise-estimator summary::-webkit-details-marker {
  display: none;
}

.mk-enterprise-estimator summary::after {
  content: "+";
  float: right;
  color: #6a7cbc;
}

.mk-enterprise-estimator[open] summary::after {
  content: "−";
}

.mk-enterprise-slider {
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px solid #dde6ff;
  border-radius: 10px;
  background: #f9fbff;
}

.mk-enterprise-slider label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #5b6b9c;
}

.mk-enterprise-slider input[type="range"] {
  width: 100%;
  accent-color: #5a6fd7;
  opacity: 0.85;
}

.mk-enterprise-slider-readout {
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.mk-enterprise-slider-readout strong {
  font-size: 15px;
  color: #3c519f;
  font-weight: 700;
}

.mk-enterprise-slider-readout span,
.mk-enterprise-slider-readout small {
  font-size: 11px;
  color: #6174af;
}

.mk-plan-choose {
  margin-top: auto;
  width: 100%;
}

body.mk-auth-open {
  overflow: hidden;
}

.mk-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.mk-auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.58);
}

.mk-auth-modal-card {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  padding: 24px;
  border-radius: 18px;
  border: 1px solid #c6d5ff;
  background: linear-gradient(180deg, #f9fbff 0%, #f2f6ff 100%);
  display: grid;
  gap: 14px;
  box-shadow: 0 24px 56px rgba(21, 33, 71, 0.28);
}

.mk-auth-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mk-auth-modal-head h3 {
  margin: 0;
  font-size: 44px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.mk-auth-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mk-auth-plan {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #eef2ff;
  color: #33459b;
  font-size: 12px;
  font-weight: 700;
}

.mk-auth-message {
  margin: 0;
  font-size: 13px;
  color: #516298;
  line-height: 1.45;
}

.mk-auth-login-help {
  margin-top: -4px;
  margin-bottom: 2px;
  display: flex;
  justify-content: flex-end;
}

.mk-auth-link-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: #3f59d8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.mk-auth-link-btn:hover {
  opacity: 0.88;
}

.mk-auth-error {
  color: var(--bad);
}

.mk-auth-register-form {
  gap: 12px;
}

.mk-auth-register-form .btn {
  margin-top: 6px;
}

.mk-auth-field {
  margin: 0;
  display: grid;
  gap: 6px;
}

.mk-auth-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #516298;
}

.mk-auth-required {
  color: #3f59d8;
  font-weight: 800;
  line-height: 1;
}

.mk-auth-register-form input:not([type="checkbox"]) {
  margin-top: 0;
  min-height: 44px;
}

.mk-auth-consent-list {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.mk-auth-consent-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #4f618f;
  font-size: 13px;
  line-height: 1.45;
}

.mk-auth-consent-item input[type="checkbox"] {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: #4d5bff;
  flex: 0 0 auto;
}

.mk-auth-consent-item a {
  color: #3f59d8;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 89, 216, 0.35);
}

.mk-auth-consent-item a:hover {
  border-bottom-color: rgba(63, 89, 216, 0.65);
}

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

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

@media (max-width: 640px) {
  .mk-auth-modal-card {
    padding: 18px;
  }

  .mk-auth-modal-head h3 {
    font-size: 36px;
  }

  .mk-auth-grid-2 {
    grid-template-columns: 1fr;
  }
}

.coming-page {
  --coming-bg-0: #eef3ff;
  --coming-bg-1: #e3ecff;
  --coming-bg-2: #dae7ff;
  --coming-ink: #101b45;
  --coming-muted: #4a5d90;
  --coming-line: rgba(117, 148, 223, 0.38);
  --coming-line-strong: rgba(122, 162, 255, 0.72);
  --coming-accent: #2a66ff;
  --coming-accent-2: #18a8dd;
  --coming-panel: rgba(9, 24, 64, 0.74);
  --coming-panel-2: rgba(16, 39, 96, 0.82);
  --coming-font-family: "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, "Arial Nova", Arial, "Segoe UI", sans-serif;
  --mk-brand-font-family: var(--coming-font-family);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--coming-font-family);
  color: var(--coming-ink);
  background:
    radial-gradient(980px 440px at 8% -18%, rgba(28, 113, 233, 0.28), transparent 60%),
    radial-gradient(920px 420px at 98% -12%, rgba(30, 189, 222, 0.22), transparent 58%),
    radial-gradient(740px 300px at 46% 98%, rgba(38, 109, 234, 0.12), transparent 65%),
    linear-gradient(180deg, var(--coming-bg-0) 0%, var(--coming-bg-1) 58%, var(--coming-bg-2) 100%);
}

.coming-page .btn {
  border-color: transparent;
  background: linear-gradient(125deg, var(--coming-accent) 0%, var(--coming-accent-2) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(24, 80, 174, 0.25);
}

.coming-page .btn-soft {
  background: #fff;
  color: var(--coming-accent);
  border-color: var(--coming-line-strong);
  box-shadow: none;
}

.coming-page .btn-soft:hover {
  background: #ecf5ff;
}

.coming-wrap {
  width: min(94vw, 1160px);
  margin: 0 auto;
}

.coming-ui-hint {
  position: fixed;
  inset: 84px 0 18px;
  pointer-events: none;
  z-index: 0;
  display: grid;
  place-items: center;
  opacity: 0.16;
}

.coming-ui-frame {
  position: relative;
  width: min(96vw, 1340px);
  height: min(80vh, 820px);
  border-radius: 26px;
  border: 1px solid rgba(92, 129, 208, 0.44);
  background: linear-gradient(150deg, rgba(39, 77, 157, 0.13) 0%, rgba(67, 114, 198, 0.08) 100%);
  box-shadow: inset 0 1px 0 rgba(195, 220, 255, 0.24), 0 20px 44px rgba(24, 63, 134, 0.22);
  overflow: hidden;
}

.coming-ui-header,
.coming-ui-sidebar,
.coming-ui-panel {
  position: absolute;
  border: 1px solid rgba(98, 143, 224, 0.5);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(106, 155, 240, 0.2) 0%, rgba(95, 151, 242, 0.08) 100%);
}

.coming-ui-header {
  top: 16px;
  left: 16px;
  right: 16px;
  height: 62px;
  border-radius: 14px;
}

.coming-ui-sidebar {
  top: 92px;
  left: 16px;
  bottom: 16px;
  width: 208px;
}

.coming-ui-panel-a {
  top: 92px;
  left: 238px;
  right: 16px;
  height: 184px;
}

.coming-ui-panel-b {
  top: 290px;
  left: 238px;
  width: 38%;
  height: 154px;
}

.coming-ui-panel-c {
  top: 290px;
  right: 16px;
  width: 34%;
  height: 154px;
}

.coming-ui-panel-d {
  top: 458px;
  left: 238px;
  width: 28%;
  bottom: 16px;
}

.coming-ui-panel-e {
  top: 458px;
  left: calc(238px + 30%);
  right: 16px;
  bottom: 16px;
}

.coming-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(233, 242, 255, 0.76);
  border-bottom: 1px solid var(--coming-line);
  backdrop-filter: blur(14px);
}

.coming-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 0;
}

.coming-brand-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.coming-brand-link.has-logo .coming-brand-name {
  display: none;
}

.coming-top .mk-logo-shell.has-logo {
  max-width: min(54vw, 300px);
  height: clamp(40px, 4.8vw, 50px);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.coming-top .mk-logo-shell.has-logo .mk-logo {
  width: auto;
  max-width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(62, 87, 196, 0.14));
}

.coming-brand-name {
  font-size: clamp(21px, 2.3vw, 31px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

.coming-page .coming-brand-name,
.coming-page .mk-logo-mark {
  font-family: var(--coming-font-family);
}

.coming-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.coming-nav a:not(.btn) {
  text-decoration: none;
  color: #2d385e;
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 10px;
}

.coming-nav a:not(.btn):hover {
  background: #e4edff;
}

.coming-main {
  position: relative;
  z-index: 1;
  padding: 30px 0 52px;
}

.coming-hero {
  padding: 18px 0 20px;
}

.coming-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: stretch;
}

.coming-copy {
  animation: mk-rise 540ms ease both;
}

.coming-copy h1 {
  margin: 0 0 16px;
  line-height: 1.02;
  max-width: 17ch;
  font-size: clamp(40px, 5.8vw, 68px);
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.coming-copy p {
  margin: 0;
  max-width: 56ch;
  color: var(--coming-muted);
  font-size: 18px;
  line-height: 1.6;
}

.coming-status-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(101, 150, 247, 0.5);
  border-radius: 24px;
  padding: 22px 22px;
  color: #f3f7ff;
  background:
    linear-gradient(155deg, var(--coming-panel) 0%, var(--coming-panel-2) 58%, rgba(15, 72, 134, 0.78) 100%);
  box-shadow: 0 22px 44px rgba(16, 42, 104, 0.28);
  backdrop-filter: blur(10px);
}

.coming-status-card::before {
  content: "";
  position: absolute;
  inset: -50% auto auto 52%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(89, 180, 255, 0.28) 0%, rgba(89, 180, 255, 0) 70%);
  pointer-events: none;
}

.coming-status-card h2 {
  margin: 0;
  font-size: 32px;
  color: #f5f8ff;
  letter-spacing: -0.01em;
}

.coming-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.coming-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #d0ffe9;
  background: rgba(46, 187, 133, 0.2);
  border: 1px solid rgba(87, 216, 165, 0.62);
  box-shadow: 0 0 0 6px rgba(38, 164, 116, 0.11);
}

.coming-status-note {
  margin: 0 0 14px;
  color: #c0d2f5;
  font-size: 14px;
  line-height: 1.4;
}

.coming-readiness {
  border: 1px solid rgba(127, 171, 255, 0.4);
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: linear-gradient(160deg, rgba(9, 31, 74, 0.4) 0%, rgba(14, 45, 101, 0.42) 100%);
  margin-bottom: 12px;
}

.coming-readiness-meta {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #cae0ff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.coming-readiness-meta strong {
  color: #f6fcff;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.coming-readiness-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(190, 215, 255, 0.16);
  overflow: hidden;
}

.coming-readiness-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35c2ff 0%, #5ce0c5 36%, #8df0bf 100%);
  box-shadow: 0 0 14px rgba(96, 226, 202, 0.5);
  transition: width 420ms ease;
}

.coming-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.coming-status-grid article {
  border: 1px solid rgba(138, 178, 255, 0.34);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(13, 37, 86, 0.48) 0%, rgba(16, 54, 116, 0.34) 100%);
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.coming-status-grid span {
  color: #b8cef5;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.coming-status-grid strong {
  color: #f4f9ff;
  font-size: 15px;
  letter-spacing: -0.01em;
}

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

.coming-timeline li {
  position: relative;
  color: #dce7ff;
  padding: 12px 12px 12px 36px;
  border-radius: 14px;
  border: 1px solid rgba(133, 169, 243, 0.35);
  background: linear-gradient(152deg, rgba(10, 31, 75, 0.5) 0%, rgba(11, 39, 91, 0.4) 100%);
}

.coming-timeline li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 17px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(130, 177, 255, 0.88);
  background: rgba(10, 39, 88, 0.9);
  box-shadow: 0 0 0 5px rgba(90, 150, 244, 0.14);
}

.coming-timeline li.is-complete::before {
  border-color: #73f2cb;
  background: #4be3bf;
  box-shadow: 0 0 0 5px rgba(80, 214, 177, 0.18);
}

.coming-timeline li.is-current {
  border-color: rgba(124, 194, 255, 0.64);
  background: linear-gradient(152deg, rgba(12, 38, 86, 0.72) 0%, rgba(12, 54, 112, 0.56) 100%);
}

.coming-timeline li.is-current::before {
  border-color: #95d7ff;
  background: #4fb9ff;
  box-shadow: 0 0 0 5px rgba(95, 194, 255, 0.22);
}

.coming-timeline-kicker {
  margin: 0 0 4px;
  color: #a9c7fb;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.coming-timeline strong {
  display: block;
  margin-bottom: 4px;
  font-size: 22px;
  color: #f8fbff;
  letter-spacing: -0.01em;
}

.coming-timeline span {
  color: #c0d2f3;
  font-size: 14px;
  line-height: 1.45;
}

.coming-section {
  padding: 20px 0 28px;
}

.coming-signup {
  position: relative;
  border: 1px solid rgba(98, 142, 238, 0.44);
  border-radius: 28px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 28px;
  align-items: start;
  background:
    linear-gradient(152deg, rgba(11, 28, 74, 0.86) 0%, rgba(18, 44, 104, 0.84) 56%, rgba(21, 75, 142, 0.8) 100%);
  box-shadow: 0 22px 48px rgba(13, 37, 95, 0.25);
  backdrop-filter: blur(10px);
}

.coming-signup::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(173, 210, 255, 0.12);
  pointer-events: none;
}

.coming-signup h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 48px);
  max-width: 20ch;
  color: #f4f8ff;
  letter-spacing: -0.02em;
}

.coming-signup p {
  color: #c4d5fa;
  margin: 0 0 12px;
  font-size: 18px;
}

.coming-capabilities {
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
}

.coming-capabilities-title {
  margin: 0;
  color: #9fc7ff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.coming-capability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.coming-capability-tags span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #e9f3ff;
  border: 1px solid rgba(129, 177, 255, 0.48);
  background: linear-gradient(155deg, rgba(16, 52, 113, 0.52) 0%, rgba(22, 83, 150, 0.38) 100%);
}

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

.coming-checks li {
  position: relative;
  padding: 10px 12px 10px 34px;
  color: #e4edff;
  font-size: 15px;
  line-height: 1.4;
  border-radius: 12px;
  border: 1px solid rgba(126, 171, 255, 0.3);
  background: linear-gradient(155deg, rgba(13, 36, 89, 0.45) 0%, rgba(16, 52, 118, 0.34) 100%);
}

.coming-checks li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #53a2ff, #2ce0cf);
  box-shadow: 0 0 0 4px rgba(64, 149, 255, 0.17);
}

.coming-form {
  display: grid;
  gap: 0;
  align-self: center;
}

.coming-form-shell {
  border: 1px solid rgba(113, 162, 255, 0.45);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(9, 25, 63, 0.66) 0%, rgba(12, 35, 83, 0.57) 100%);
  box-shadow: 0 18px 34px rgba(9, 31, 80, 0.28);
  padding: 18px;
  display: grid;
  gap: 16px;
}

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

.coming-form label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #cddcff;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.coming-form label.is-invalid {
  color: #ffd5df;
}

.coming-form input {
  min-height: 50px;
  border: 1px solid rgba(124, 172, 255, 0.56);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  background: linear-gradient(180deg, rgba(7, 17, 45, 0.58) 0%, rgba(10, 24, 60, 0.68) 100%);
  color: #f4f8ff;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.coming-form input.is-invalid {
  border-color: #ff8aad;
  box-shadow: 0 0 0 3px rgba(255, 120, 165, 0.2);
}

.coming-form input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.coming-form input[type="number"]::-webkit-inner-spin-button,
.coming-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.coming-form input:focus {
  outline: none;
  border-color: #6dc0ff;
  box-shadow: 0 0 0 3px rgba(74, 170, 255, 0.26);
  background: linear-gradient(180deg, rgba(8, 20, 50, 0.68) 0%, rgba(11, 30, 75, 0.74) 100%);
}

.coming-form input.is-invalid:focus {
  border-color: #ff90b0;
  box-shadow: 0 0 0 3px rgba(255, 120, 165, 0.26);
}

.coming-form input::placeholder {
  color: rgba(215, 228, 255, 0.56);
}

.coming-field-full {
  grid-column: 1 / -1;
}

.coming-join-btn {
  width: 100%;
  min-height: 54px;
  font-size: 22px;
  font-weight: 800;
  border-radius: 14px;
  letter-spacing: 0.01em;
  background: linear-gradient(122deg, #2d6dff 0%, #1f86f0 45%, #17bbdc 100%);
  box-shadow: 0 18px 34px rgba(15, 96, 190, 0.34);
}

.coming-join-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 36px rgba(16, 102, 198, 0.36);
}

.coming-join-btn:disabled {
  cursor: wait;
  opacity: 0.88;
  transform: none;
  box-shadow: 0 12px 24px rgba(15, 96, 190, 0.24);
}

.coming-form-note {
  margin: 0;
  color: #a9c1ef;
  font-size: 13px;
  min-height: 20px;
}

.coming-form-note.is-success {
  color: #bcffe4;
}

.coming-form-note.is-error {
  color: #ffd4de;
}

.coming-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--coming-line);
  padding: 18px 0 28px;
}

.coming-footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.coming-footer-brand-link .coming-brand-name {
  font-size: clamp(18px, 2vw, 24px);
}

.coming-footer .mk-logo-shell.has-logo {
  max-width: min(46vw, 280px);
  height: clamp(34px, 3.8vw, 44px);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.coming-footer .mk-logo-shell.has-logo .mk-logo {
  width: auto;
  max-width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  object-fit: contain;
  filter: drop-shadow(0 1px 8px rgba(62, 87, 196, 0.12));
}

.coming-footer .mk-copyright {
  margin: 0;
  color: #6173a3;
}

.coming-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.coming-footer-links a {
  color: #24325f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.coming-footer-links a:hover {
  color: var(--coming-primary);
}

.coming-integrations {
  padding-top: 4px;
}

.coming-integrations-shell {
  border-radius: 16px;
  border: 1px solid var(--coming-line);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 16px 30px rgba(44, 79, 160, 0.09);
  padding: 14px;
}

.coming-integrations-shell h2 {
  margin: 0 0 10px;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #334f8b;
}

.coming-integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.coming-integration-logo {
  border-radius: 11px;
  overflow: hidden;
}

.coming-integration-logo .app-store-logo-banner {
  min-height: 74px;
  border-radius: 11px;
  border-color: rgba(97, 127, 201, 0.28);
  padding: 10px;
}

.coming-integration-logo .app-store-logo-image-banner {
  max-height: 48px;
}

.coming-integration-logo .app-store-logo-wordmark {
  font-size: clamp(16px, 1.85vw, 24px);
}

.coming-orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(70px);
  pointer-events: none;
  z-index: -2;
  opacity: 0.6;
}

.coming-orb-a {
  width: 360px;
  height: 360px;
  background: rgba(42, 130, 244, 0.34);
  top: -140px;
  left: -80px;
}

.coming-orb-b {
  width: 360px;
  height: 360px;
  background: rgba(33, 188, 222, 0.28);
  top: 8%;
  right: -140px;
}

.coming-orb-c {
  width: 420px;
  height: 420px;
  background: rgba(87, 151, 255, 0.26);
  bottom: -200px;
  left: 26%;
}

@media (max-width: 980px) {
  .coming-main {
    padding: 24px 0 44px;
  }

  .coming-hero {
    padding: 12px 0 18px;
  }

  .coming-ui-hint {
    inset: 72px 0 12px;
    opacity: 0.11;
  }

  .coming-ui-frame {
    width: 98vw;
    height: min(70vh, 700px);
  }

  .coming-ui-sidebar {
    width: 160px;
  }

  .coming-ui-panel-a,
  .coming-ui-panel-b,
  .coming-ui-panel-d,
  .coming-ui-panel-e {
    left: 190px;
  }

  .coming-ui-panel-b,
  .coming-ui-panel-c {
    height: 128px;
  }

  .coming-hero-grid,
  .coming-signup {
    grid-template-columns: minmax(0, 1fr);
  }

  .coming-signup {
    padding: 20px;
    gap: 22px;
  }

  .coming-form {
    align-self: start;
  }

  .coming-form-shell {
    max-width: 700px;
    margin: 0 auto;
  }

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

  .coming-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .coming-wrap {
    width: min(calc(100vw - 28px), 720px);
  }

  .coming-topbar {
    padding: 12px 0;
  }

  .coming-main {
    padding: 20px 0 38px;
  }

  .coming-hero {
    padding: 8px 0 16px;
  }

  .coming-ui-hint {
    opacity: 0.09;
  }

  .coming-ui-frame {
    border-radius: 20px;
    height: min(62vh, 560px);
  }

  .coming-ui-sidebar {
    width: 118px;
  }

  .coming-ui-panel-a,
  .coming-ui-panel-b,
  .coming-ui-panel-d,
  .coming-ui-panel-e {
    left: 146px;
  }

  .coming-copy h1 {
    font-size: clamp(31px, 9vw, 42px);
    line-height: 1.04;
    margin-bottom: 12px;
    max-width: 16ch;
  }

  .coming-status-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .coming-status-card {
    border-radius: 20px;
    padding: 18px;
  }

  .coming-status-card h2 {
    font-size: 30px;
  }

  .coming-status-grid article {
    padding: 10px 11px;
  }

  .coming-timeline strong {
    font-size: 20px;
  }

  .coming-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .coming-copy p {
    font-size: 16px;
    line-height: 1.55;
  }

  .coming-signup {
    border-radius: 22px;
    padding: 18px;
    gap: 18px;
  }

  .coming-signup h2 {
    font-size: clamp(34px, 8vw, 40px);
    margin-bottom: 8px;
  }

  .coming-signup p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  .coming-checks li {
    font-size: 14px;
  }

  .coming-form-shell {
    border-radius: 16px;
    padding: 16px;
  }

  .coming-form label {
    font-size: 12px;
  }

  .coming-form input {
    min-height: 48px;
  }

  .coming-join-btn {
    min-height: 52px;
    font-size: 18px;
  }

  .coming-form-note {
    font-size: 14px;
    line-height: 1.4;
  }

  .coming-footer-wrap {
    justify-content: center;
    text-align: center;
  }

  .coming-footer-links {
    margin-left: 0;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .coming-wrap {
    width: min(calc(100vw - 20px), 520px);
  }

  .coming-ui-hint {
    display: none;
  }

  .coming-orb {
    opacity: 0.44;
    filter: blur(56px);
  }

  .coming-main {
    padding: 16px 0 30px;
  }

  .coming-brand-name {
    font-size: clamp(24px, 7.2vw, 30px);
  }

  .coming-copy h1 {
    font-size: clamp(30px, 10.8vw, 38px);
    max-width: 14ch;
  }

  .coming-status-card {
    border-radius: 18px;
    padding: 16px;
  }

  .coming-status-card h2 {
    font-size: 28px;
  }

  .coming-status-pill {
    font-size: 11px;
    padding: 4px 9px;
    box-shadow: 0 0 0 4px rgba(38, 164, 116, 0.11);
  }

  .coming-readiness {
    padding: 10px 10px 9px;
  }

  .coming-status-grid strong {
    font-size: 16px;
  }

  .coming-timeline {
    gap: 8px;
  }

  .coming-timeline li {
    border-radius: 12px;
    padding: 10px 10px 10px 32px;
  }

  .coming-timeline li::before {
    left: 12px;
    top: 14px;
  }

  .coming-timeline strong {
    font-size: 19px;
    margin-bottom: 3px;
  }

  .coming-timeline span {
    font-size: 13px;
  }

  .coming-signup {
    border-radius: 20px;
    padding: 14px;
    gap: 16px;
  }

  .coming-signup h2 {
    font-size: clamp(32px, 12vw, 38px);
  }

  .coming-signup p {
    font-size: 15px;
  }

  .coming-capabilities-title {
    font-size: 10px;
  }

  .coming-capability-tags {
    gap: 6px;
  }

  .coming-capability-tags span {
    font-size: 10px;
    padding: 6px 9px;
  }

  .coming-checks {
    gap: 8px;
  }

  .coming-checks li {
    border-radius: 10px;
    padding: 9px 10px 9px 30px;
    font-size: 13px;
  }

  .coming-checks li::before {
    left: 12px;
    top: 14px;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 3px rgba(64, 149, 255, 0.2);
  }

  .coming-form-shell {
    border-radius: 14px;
    padding: 14px;
    gap: 14px;
  }

  .coming-form-grid {
    gap: 10px;
  }

  .coming-form label {
    font-size: 11px;
    gap: 5px;
  }

  .coming-form input {
    min-height: 46px;
    border-radius: 12px;
  }

  .coming-join-btn {
    min-height: 50px;
    font-size: 17px;
  }

  .coming-form-note {
    min-height: 0;
    font-size: 13px;
  }

  .coming-footer {
    padding: 16px 0 24px;
  }

  .coming-footer .mk-copyright {
    font-size: 12px;
    line-height: 1.4;
  }

  .coming-footer-links a {
    font-size: 12px;
  }
}

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

.mk-flow-step {
  border-color: #d5e4f4;
  background: #fff;
  box-shadow: 0 10px 20px rgba(23, 62, 102, 0.08);
  color: #264b6b;
  padding: 14px;
}

.mk-results-grid {
  margin-bottom: 14px;
}

.mk-quote-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.mk-quote-row-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mk-quote-card {
  border-color: var(--line);
  background: #f8faff;
}

.mk-quote-card p {
  margin: 0 0 10px;
  color: #4a557f;
  line-height: 1.7;
}

.mk-quote-card strong {
  color: #394165;
  font-size: 13px;
}

.mk-final-cta {
  padding-bottom: 36px;
}

.mk-final-card {
  border-color: var(--line);
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 14% 0%, rgba(77, 91, 255, 0.1) 0%, transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(111, 120, 255, 0.12) 0%, transparent 40%),
    #ffffff;
}

.mk-final-card h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 40px);
}

.mk-final-card p {
  margin: 0 auto 14px;
  max-width: 62ch;
  color: var(--mk-muted);
}

.mk-final-card .row-actions {
  justify-content: center;
}

.marketing-footer {
  border-top: 1px solid var(--mk-line);
  background: rgba(255, 255, 255, 0.86);
}

.mk-footer-wrap {
  padding: 16px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mk-footer-branding {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mk-footer-copy {
  display: grid;
  gap: 2px;
}

.mk-copyright {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.mk-footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mk-footer-links a {
  text-decoration: none;
  color: #4a5887;
  font-weight: 600;
  font-size: 13px;
}

.mk-footer-links a:hover {
  color: var(--accent);
}

.marketing-doc .mk-doc-main {
  padding: 24px 0 18px;
}

.marketing-doc .mk-doc-section {
  padding: 22px 0 10px;
}

.marketing-doc .mk-doc-section h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
}

.mk-doc-intro {
  margin: 0 0 14px;
  color: var(--muted);
  max-width: 74ch;
  line-height: 1.7;
  font-size: 16px;
}

.mk-doc-card {
  padding: 20px;
  border-color: var(--line);
  display: grid;
  gap: 10px;
}

.mk-doc-card h2 {
  margin: 10px 0 2px;
  font-size: clamp(21px, 2.7vw, 28px);
}

.mk-doc-card h3 {
  margin: 8px 0 2px;
  font-size: 18px;
}

.mk-doc-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.mk-doc-card a {
  color: var(--accent);
}

.mk-legal-page .mk-doc-main {
  padding: 22px 0 18px;
}

.mk-legal-shell {
  padding: 24px 0 10px;
}

.mk-legal-wrap {
  display: grid;
  gap: 14px;
}

.mk-legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  border-color: var(--line);
  background:
    radial-gradient(500px 180px at -5% -25%, rgba(77, 91, 255, 0.14), transparent 60%),
    radial-gradient(420px 190px at 102% 110%, rgba(77, 91, 255, 0.1), transparent 62%),
    #ffffff;
  padding: 20px;
  box-shadow: 0 12px 26px rgba(28, 42, 120, 0.08);
}

.mk-legal-hero .eyebrow {
  margin-bottom: 8px;
}

.mk-legal-hero h1 {
  margin: 0 0 6px;
  font-size: clamp(30px, 4.8vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.mk-legal-hero .mk-doc-intro {
  margin-bottom: 0;
  max-width: 72ch;
}

.mk-legal-hero-meta {
  min-width: min(340px, 100%);
  display: grid;
  gap: 7px;
  border-radius: 14px;
  border: 1px solid #d5defd;
  background: linear-gradient(180deg, #f9fbff 0%, #f4f7ff 100%);
  padding: 12px 14px;
}

.mk-legal-hero-meta p {
  margin: 0;
  color: #4f618f;
  font-size: 13px;
  line-height: 1.45;
}

.mk-legal-hero-meta strong {
  color: #253764;
}

.mk-legal-hero-meta a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.mk-legal-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.33fr) minmax(0, 0.67fr);
  gap: 14px;
  align-items: start;
}

.mk-legal-side {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 14px;
  border-color: var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  padding: 16px;
  box-shadow: none;
}

.mk-legal-side-block h2,
.mk-legal-side-block h3 {
  margin: 0 0 8px;
  color: #1e315e;
  letter-spacing: -0.01em;
}

.mk-legal-side-block h2 {
  font-size: 15px;
}

.mk-legal-side-block h3 {
  font-size: 14px;
}

.mk-legal-nav {
  display: grid;
  gap: 5px;
}

.mk-legal-nav a {
  display: block;
  border-radius: 8px;
  border: 1px solid transparent;
  color: #465988;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  padding: 7px 9px;
}

.mk-legal-nav a:hover {
  border-color: #d2dcfb;
  background: #f2f6ff;
  color: #30457a;
}

.mk-legal-checks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.mk-legal-checks li {
  position: relative;
  margin: 0;
  padding-left: 18px;
  color: #4f618f;
  font-size: 13px;
  line-height: 1.45;
}

.mk-legal-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(77, 91, 255, 0.16);
}

.mk-legal-article {
  border-color: var(--line);
  padding: 18px;
  display: grid;
  gap: 0;
}

.mk-legal-block {
  padding: 12px 2px 14px;
  border-bottom: 1px solid #e0e6fa;
  scroll-margin-top: 100px;
}

.mk-legal-block:first-child {
  padding-top: 2px;
}

.mk-legal-block:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.mk-legal-block h2 {
  margin: 0 0 6px;
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.2;
}

.mk-legal-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.mk-legal-block p + p {
  margin-top: 9px;
}

.mk-legal-block a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.mk-legal-block a:hover,
.mk-legal-hero-meta a:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {
  .mk-legal-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .mk-legal-hero-meta {
    min-width: 0;
  }

  .mk-legal-grid {
    grid-template-columns: 1fr;
  }

  .mk-legal-side {
    position: static;
  }
}

@media (max-width: 640px) {
  .mk-legal-hero,
  .mk-legal-side,
  .mk-legal-article {
    padding: 14px;
    border-radius: 14px;
  }

  .mk-legal-nav a {
    font-size: 12px;
    padding: 6px 8px;
  }

  .mk-legal-block {
    scroll-margin-top: 88px;
  }
}

.mk-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.marketing-footer p {
  margin: 0;
  color: #4a5887;
  font-weight: 600;
}

@keyframes mk-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.auth-panels {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.auth-card {
  padding: 18px;
}

.auth-card h2 {
  margin: 0 0 12px;
}

.admin-auth-card {
  padding: 22px;
  border-color: #ccd7ff;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  display: grid;
  gap: 10px;
}

.admin-auth-card-head {
  display: grid;
  gap: 4px;
}

.admin-auth-card-head h2 {
  margin: 0;
  font-size: 35px;
  line-height: 1.04;
}

.admin-auth-card-head p {
  margin: 0;
  color: #5d6892;
  font-size: 14px;
}

.admin-auth-card label {
  margin-bottom: 8px;
  color: #56618b;
  font-size: 12px;
  font-weight: 600;
}

.admin-auth-card input {
  margin-top: 6px;
  border-radius: 12px;
  padding: 12px 13px;
}

.admin-auth-card input::placeholder {
  color: #9ea9ce;
}

.admin-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.admin-auth-actions .btn {
  min-width: 136px;
}

.admin-auth-actions .btn-soft {
  border-color: #d2dcff;
  background: #eef2ff;
}

.admin-auth-note {
  margin-top: 0;
}

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #62709a;
  margin-bottom: 9px;
}

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

input,
select,
textarea {
  width: 100%;
  margin-top: 4px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-surface);
  color: var(--field-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  padding: 10px 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 1px 2px rgba(24, 39, 87, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

input[type="number"]:not(.number-input-with-arrows) {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]:not(.number-input-with-arrows)::-webkit-outer-spin-button,
input[type="number"]:not(.number-input-with-arrows)::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].number-input-with-arrows {
  appearance: auto;
  -moz-appearance: auto;
}

input[type="number"].number-input-with-arrows::-webkit-outer-spin-button,
input[type="number"].number-input-with-arrows::-webkit-inner-spin-button {
  -webkit-appearance: auto;
  margin: 0;
}

input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder);
  font-weight: 500;
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--field-border-hover);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--field-focus);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 0 3px rgba(77, 91, 255, 0.14);
}

textarea {
  min-height: 80px;
  resize: vertical;
}

input.datetime-composer-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

.datetime-composer-shell {
  margin-top: 4px;
}

.datetime-composer-grid {
  display: grid;
  grid-template-columns: minmax(168px, 1.65fr) repeat(3, minmax(92px, 1fr));
  gap: 8px;
  align-items: end;
}

.datetime-composer-field {
  margin: 0;
  display: grid;
  gap: 5px;
}

.datetime-composer-field > span {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #5d6992;
}

.datetime-composer-field input,
.datetime-composer-field select {
  margin: 0;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;
}

.datetime-composer-period-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.datetime-composer-period-tab {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #ffffff;
  color: #39476f;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.datetime-composer-period-tab.is-active {
  border-color: #6a7dff;
  background: #edf1ff;
  color: #3347c7;
}

.datetime-composer-period-tab:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 91, 255, 0.16);
}

.datetime-composer-period-tab:disabled {
  cursor: not-allowed;
}

.datetime-composer-shell.is-disabled {
  opacity: 0.72;
}

.datetime-composer-shell.is-disabled .datetime-composer-field input,
.datetime-composer-shell.is-disabled .datetime-composer-field select {
  cursor: not-allowed;
}

.datetime-composer-shell.is-disabled .datetime-composer-period-tab {
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .datetime-composer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .datetime-composer-field-date {
    grid-column: 1 / -1;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  transition: transform 120ms ease, opacity 120ms ease;
}

.btn:hover {
  opacity: 0.95;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn-soft {
  background: var(--bg-soft);
  color: var(--accent);
  border-color: var(--line);
}

@media (max-width: 1100px) {
  .admin-auth-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-auth-card {
    order: -1;
  }

  .admin-auth-intro-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .auth-shell-admin {
    padding: 20px 14px 26px;
  }

  .admin-auth-intro {
    padding: 20px;
    gap: 14px;
  }

  .admin-auth-intro h1 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .admin-auth-intro-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-auth-info {
    padding: 16px;
  }

  .admin-auth-info h2 {
    font-size: 26px;
  }

  .admin-auth-card {
    padding: 16px;
  }

  .admin-auth-card-head h2 {
    font-size: 29px;
  }

  .admin-auth-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 980px) {
  .auth-portal-frame {
    width: min(900px, 94vw);
    height: min(72vh, 560px);
  }

  .auth-portal-sidebar {
    width: 150px;
  }

  .auth-portal-panel-a,
  .auth-portal-panel-b {
    left: 182px;
  }

  .auth-portal-panel-a {
    height: 150px;
  }

  .auth-portal-panel-b,
  .auth-portal-panel-c {
    top: 246px;
  }
}

@media (max-width: 640px) {
  .app-auth-page .auth-shell-signin {
    padding: 16px;
  }

  .auth-signin-card {
    border-radius: 16px;
    padding: 24px 20px;
  }

  .auth-signin-card h1 {
    font-size: clamp(31px, 11vw, 40px);
  }

  .auth-signin-card h2 {
    font-size: clamp(28px, 10vw, 36px);
  }

  .auth-portal-frame {
    width: min(96vw, 520px);
    height: min(62vh, 410px);
    border-radius: 20px;
  }

  .auth-portal-sidebar,
  .auth-portal-panel-c {
    display: none;
  }

  .auth-portal-topbar {
    left: 16px;
    right: 16px;
    top: 16px;
    height: 50px;
  }

  .auth-portal-panel-a,
  .auth-portal-panel-b {
    left: 16px;
    right: 16px;
    width: auto;
  }

  .auth-portal-panel-a {
    top: 78px;
    height: 96px;
  }

  .auth-portal-panel-b {
    top: 184px;
    bottom: 16px;
  }
}

.app-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
  height: 100dvh;
  width: 100%;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  background: #f8faff;
  box-shadow: var(--shadow);
}

.sidebar {
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #f9fbff 0%, #f2f5ff 100%);
  padding: 16px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-mobile-head,
.sidebar-mobile-utilities,
.mobile-header-theme-toggle,
.mobile-menu-toggle,
.mobile-menu-backdrop,
.mobile-bottom-nav,
.dashboard-calendar-mobile-day-button,
.dashboard-calendar-event-dots,
.dashboard-calendar-mobile-agenda {
  display: none;
}

.brand-block {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 14px;
}

.brand {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-block small {
  color: var(--muted);
}

.quick-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.menu {
  display: grid;
  gap: 12px;
}

.menu-draggable-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-radius: 10px;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.menu-draggable-content {
  min-width: 0;
  display: grid;
}

.menu-draggable-content > .menu-item,
.menu-draggable-content > .menu-section {
  width: 100%;
}

.menu-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  min-height: 38px;
  border: 0;
  background: transparent;
  padding: 0;
  color: #7b86b0;
  font-size: 12px;
  letter-spacing: -1px;
  user-select: none;
  cursor: grab;
}

.menu-drag-handle:active {
  cursor: grabbing;
}

.menu-drag-handle:focus-visible {
  outline: 2px solid #5f6dff;
  outline-offset: 2px;
}

.menu-draggable-row.is-dragging {
  opacity: 0.58;
}

.menu-draggable-row.is-drop-target {
  background: rgba(100, 124, 255, 0.08);
  box-shadow: inset 0 2px 0 rgba(69, 95, 248, 0.78);
}

.menu-draggable-row.is-drop-target-after {
  box-shadow: inset 0 -2px 0 rgba(69, 95, 248, 0.78);
}

.menu-section {
  display: grid;
  gap: 5px;
}

.menu-row-group {
  display: grid;
  gap: 4px;
}

.menu-heading,
.menu-subheading,
.availability-local-nav-heading {
  font-size: 12px;
  font-weight: var(--sidebar-nav-heading-weight);
  text-transform: uppercase;
  letter-spacing: var(--sidebar-nav-heading-letter-spacing);
  color: var(--accent);
  padding: 2px 6px;
}

.menu-item,
.menu-subitem,
.availability-local-nav-item {
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: #394165;
  border-radius: 10px;
  padding: 10px 11px;
  font-weight: var(--sidebar-nav-item-font-weight);
  font-size: var(--sidebar-nav-item-font-size);
  line-height: var(--sidebar-nav-item-line-height);
  cursor: pointer;
}

.menu-item:hover,
.menu-subitem:hover,
.availability-local-nav-item:hover {
  background: #e9efff;
}

.menu-item.active {
  background: #dde6ff;
  color: #2332ba;
  border-color: #c5d3ff;
}

.settings-menu-group {
  display: grid;
  gap: 4px;
}

.menu-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-parent::after {
  content: "▸";
  color: var(--muted);
  font-size: 12px;
}

.menu-parent.expanded::after {
  content: "▾";
  color: #2332ba;
}

.menu-submenu {
  display: grid;
  gap: 4px;
  padding-left: 10px;
}

.menu-subitem {
  color: #394165;
}

.menu-subitem.active {
  background: #dde6ff;
  color: #2332ba;
  border-color: #c5d3ff;
}

.menu-subgroup {
  display: grid;
  gap: 4px;
  padding-left: 10px;
}

.menu-subgroup-list {
  display: grid;
  gap: 4px;
}

.menu-subheading {
  padding: 4px 8px 2px;
}

.availability-sidebar-menu {
  gap: 6px;
}

.products-sidebar-menu {
  gap: 6px;
}

.menu-sidebar-divider {
  width: 100%;
  height: 1px;
  background: #dbe3f8;
  border-radius: 999px;
  margin: 4px 0 2px;
}

.menu-sidebar-note {
  margin: 0;
  padding: 6px 10px;
  color: #6a7699;
  font-size: 12px;
  line-height: 1.35;
}

.menu-sidebar-back {
  margin-bottom: 8px;
  border: 0;
  background: linear-gradient(135deg, #5a54f4 0%, #4f56ff 100%);
  color: #ffffff;
}

.menu-sidebar-back:hover {
  background: linear-gradient(135deg, #5751f0 0%, #4b53fb 100%);
}

.menu-sidebar-overview {
  margin-bottom: 2px;
}

.products-sidebar-item {
  width: 100%;
}

.availability-sidebar-item {
  width: 100%;
}

.workspace {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  container-type: inline-size;
  container-name: workspace;
}

.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 8;
}

.search-wrap {
  grid-column: 2;
  max-width: none;
  width: 100%;
  position: relative;
}

.search-wrap > input:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.top-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 8px;
  align-items: center;
  --topbar-action-height: 38px;
  min-height: var(--topbar-action-height);
  align-content: center;
}

.top-actions > * {
  align-self: center;
}

.top-actions > .btn,
.top-actions > .chip,
.top-actions > .topbar-theme-toggle {
  height: var(--topbar-action-height);
  min-height: var(--topbar-action-height);
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.top-actions > .btn {
  padding: 0 14px;
  font-size: 12px;
  line-height: 1;
}

.top-actions > .chip {
  padding: 0 12px;
  line-height: 1;
}

.top-actions > .topbar-theme-toggle {
  padding: 0 10px;
  line-height: 1;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.top-actions > .topbar-support-badge {
  min-height: calc(var(--topbar-action-height) - 6px);
  height: calc(var(--topbar-action-height) - 6px);
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, #ccd5eb);
  background:
    linear-gradient(140deg, rgba(244, 248, 255, 0.98) 0%, rgba(231, 246, 241, 0.96) 100%);
  color: #1d5561;
  text-decoration: none;
  line-height: 1;
  gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(38, 66, 99, 0.08);
}

.topbar-support-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10927a 0%, #33c0a2 100%);
  box-shadow: 0 0 0 4px rgba(16, 146, 122, 0.12);
}

.topbar-support-badge:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, #c2d0ea);
  color: #144856;
  transform: translateY(-1px);
}

.topbar-support-badge:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(38, 66, 99, 0.08);
}

.topbar-theme-toggle-label {
  line-height: 1;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.topbar-theme-toggle-track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #c3cfff;
  background: #d6e0ff;
  position: relative;
  flex: 0 0 42px;
  transition: background 140ms ease, border-color 140ms ease;
}

.topbar-theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(19, 24, 47, 0.26);
  transition: transform 140ms ease, background 140ms ease;
}

.topbar-theme-toggle[aria-checked="true"] .topbar-theme-toggle-track {
  background: #3f5fae;
  border-color: #5d7fd5;
}

.topbar-theme-toggle[aria-checked="true"] .topbar-theme-toggle-thumb {
  transform: translateX(18px);
  background: #f4f7ff;
}

.topbar-theme-toggle:focus-visible .topbar-theme-toggle-track {
  box-shadow: 0 0 0 3px rgba(77, 91, 255, 0.22);
}

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #edf1ff;
  color: #3443c6;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
}

.topbar-user-chip {
  appearance: none;
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  line-height: 1;
  padding: 0 10px;
  text-align: left;
  color: inherit;
  text-decoration: none;
  max-width: min(320px, 46vw);
}

.topbar-user-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.topbar-user-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.topbar-user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topbar-user-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.topbar-user-avatar-fallback {
  font-size: 11px;
  font-weight: 800;
  color: color-mix(in srgb, var(--accent) 64%, var(--text));
}

.topbar-user-name {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-payg-credits-chip {
  border-color: #b9d5c8;
  background:
    radial-gradient(120% 120% at 100% -26%, rgba(54, 203, 157, 0.2), transparent 58%),
    linear-gradient(150deg, #f5fffb 0%, #edf6ff 100%);
  color: #1f5d58;
  gap: 7px;
  padding-inline: 11px;
}

.topbar-payg-credits-chip:hover {
  background:
    radial-gradient(120% 120% at 100% -26%, rgba(54, 203, 157, 0.24), transparent 58%),
    linear-gradient(150deg, #ebfcf6 0%, #e4f2ff 100%);
}

.topbar-payg-credits-chip.is-readonly {
  opacity: 0.92;
}

.topbar-payg-credits-main {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.topbar-payg-credits-meta {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.9;
  white-space: nowrap;
}

.topbar-payg-credits-chip.is-credits-debit {
  animation: payg-credits-chip-debit 820ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

.topbar-payg-credits-chip.is-credits-credit {
  animation: payg-credits-chip-credit 820ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

.topbar-payg-credits-main.is-credits-debit,
.billing-payg-wallet-value.is-credits-debit,
.billing-payg-credits-metric-value.is-credits-debit {
  animation: payg-credits-value-debit 820ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

.topbar-payg-credits-main.is-credits-credit,
.billing-payg-wallet-value.is-credits-credit,
.billing-payg-credits-metric-value.is-credits-credit {
  animation: payg-credits-value-credit 820ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

@keyframes payg-credits-chip-debit {
  0% {
    box-shadow: 0 0 0 0 rgba(184, 52, 91, 0);
    transform: translateY(0);
  }
  28% {
    box-shadow: 0 0 0 3px rgba(184, 52, 91, 0.2);
    transform: translateY(-1px);
  }
  60% {
    box-shadow: 0 0 0 1px rgba(184, 52, 91, 0.14);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(184, 52, 91, 0);
    transform: translateY(0);
  }
}

@keyframes payg-credits-chip-credit {
  0% {
    box-shadow: 0 0 0 0 rgba(43, 168, 120, 0);
    transform: translateY(0);
  }
  28% {
    box-shadow: 0 0 0 3px rgba(43, 168, 120, 0.22);
    transform: translateY(-1px);
  }
  60% {
    box-shadow: 0 0 0 1px rgba(43, 168, 120, 0.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(43, 168, 120, 0);
    transform: translateY(0);
  }
}

@keyframes payg-credits-value-debit {
  0% {
    transform: scale(1);
    color: inherit;
  }
  28% {
    transform: scale(1.09);
    color: #b4365c;
  }
  58% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
    color: inherit;
  }
}

@keyframes payg-credits-value-credit {
  0% {
    transform: scale(1);
    color: inherit;
  }
  28% {
    transform: scale(1.09);
    color: #21805d;
  }
  58% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
    color: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-payg-credits-chip.is-credits-debit,
  .topbar-payg-credits-chip.is-credits-credit,
  .topbar-payg-credits-main.is-credits-debit,
  .topbar-payg-credits-main.is-credits-credit,
  .billing-payg-wallet-value.is-credits-debit,
  .billing-payg-wallet-value.is-credits-credit,
  .billing-payg-credits-metric-value.is-credits-debit,
  .billing-payg-credits-metric-value.is-credits-credit {
    animation: none;
  }
}

@media (max-width: 1480px) {
  .topbar {
    grid-template-columns: 1fr;
    padding: 10px 14px;
  }

  .search-wrap,
  .top-actions {
    grid-column: 1;
  }

  .top-actions {
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: 0;
  }

  .top-actions > * {
    min-width: 0;
  }

  .topbar-user-chip {
    max-width: min(100%, 360px);
  }

  .topbar-payg-credits-chip {
    max-width: 100%;
  }
}

@container workspace (max-width: 1480px) {
  .topbar {
    grid-template-columns: 1fr;
    padding: 10px 14px;
  }

  .search-wrap,
  .top-actions {
    grid-column: 1;
  }

  .top-actions {
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: 0;
  }

  .top-actions > * {
    min-width: 0;
  }

  .topbar-user-chip {
    max-width: min(100%, 360px);
  }

  .topbar-payg-credits-chip {
    max-width: 100%;
  }
}

.content-area {
  padding: 18px;
  max-width: var(--workspace-content-max-width);
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

.platform-admin-page .content-area {
  max-width: min(98vw, 1760px);
}

body.workspace-products-wide .content-area {
  max-width: min(96vw, 1640px);
}

#view-container {
  display: grid;
  gap: var(--workspace-section-gap);
  align-content: start;
}

#view-container > * {
  margin-top: 0;
  margin-bottom: 0;
  min-width: 0;
}

.view-head {
  margin-bottom: var(--workspace-section-gap);
}

.view-head h1 {
  margin: 0 0 4px;
  font-size: 36px;
}

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

@media (max-width: 1024px) {
  .platform-admin-page .app-shell {
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .platform-admin-page .sidebar {
    position: static;
    top: auto;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 12px;
  }

  .platform-admin-page .workspace {
    overflow-y: visible;
  }

  .platform-admin-page .content-area {
    padding: 14px;
  }

  .platform-admin-page .menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .platform-admin-page .view-head h1 {
    font-size: clamp(28px, 5.2vw, 34px);
  }
}

@media (max-width: 700px) {
  .platform-admin-page .auth-shell-admin {
    padding-inline: 12px;
  }

  .platform-admin-page .sidebar {
    padding: 10px;
  }

  .platform-admin-page .brand {
    font-size: 20px;
  }

  .platform-admin-page .platform-brand-logo {
    width: min(168px, 100%);
    max-height: 64px;
    padding: 6px 8px;
  }

  .platform-admin-page .quick-actions .btn {
    width: 100%;
  }

  .platform-admin-page .menu {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    grid-template-columns: none;
  }

  .platform-admin-page .menu-draggable-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .platform-admin-page .menu-drag-handle {
    margin-top: 0;
  }

  .platform-admin-page .menu-section {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .platform-admin-page .menu-draggable-content > .menu-item,
  .platform-admin-page .menu-draggable-content > .menu-section {
    width: auto;
  }

  .platform-admin-page .menu-parent::after {
    display: none;
  }

  .platform-admin-page .menu-submenu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
  }

  .platform-admin-page .menu-item,
  .platform-admin-page .menu-subitem {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 9px 11px;
    font-size: 14px;
  }

  .platform-admin-page .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .platform-admin-page .search-wrap,
  .platform-admin-page .top-actions {
    grid-column: auto;
  }

  .platform-admin-page .top-actions {
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .platform-admin-page .top-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .platform-admin-page .chip {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
  }

  .platform-admin-page .content-area {
    padding: 12px;
  }

  .platform-admin-page .view-head h1 {
    font-size: clamp(26px, 9vw, 32px);
  }

  .platform-admin-page .view-head p {
    font-size: 14px;
    line-height: 1.45;
  }

  .platform-admin-page .panel-pad {
    padding: 12px;
  }

  .platform-admin-page .inline-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .platform-admin-page .inline-form .btn {
    width: 100%;
  }

  .platform-admin-page .row-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .platform-admin-page .row-actions .btn {
    width: 100%;
  }

  .platform-admin-page .user-row-actions,
  .platform-admin-page .plans-row-actions,
  .platform-admin-page .waitlist-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .platform-admin-page .plans-table {
    min-width: 680px;
  }

  .platform-admin-page .waitlist-table {
    min-width: 760px;
  }

  .platform-admin-page th,
  .platform-admin-page td {
    padding: 8px 6px;
  }
}

@media (max-width: 480px) {
  .platform-admin-page .top-actions {
    grid-template-columns: 1fr;
  }

  .platform-admin-page .plans-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 14px;
  }
}

.grid {
  display: grid;
  gap: var(--workspace-element-gap);
}

.metrics-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.metric {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.metric h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.metric strong {
  font-size: 26px;
}

.metric-subcopy {
  margin: 6px 0 0;
  color: #66739c;
  font-size: 11px;
  line-height: 1.35;
}

.reports-shell {
  display: grid;
  gap: var(--workspace-section-gap);
}

.reports-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.reports-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reports-tabs-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.reports-tab {
  border: 1px solid var(--line);
  background: #fff;
  color: #4e5a81;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}

.reports-tab.active {
  background: #eef1ff;
  border-color: #96a7ff;
  color: #3f4cc8;
}

.customer-directory-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.customer-directory-tab .badge {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  padding: 0 7px;
}

.customer-editor-tabs {
  margin-top: 6px;
}

.customer-editor-shell {
  display: grid;
  gap: 14px;
}

.customer-editor-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.customer-editor-hero-profile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.customer-editor-hero-avatar {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid #d8e1ff;
  background: linear-gradient(135deg, #f2f5ff 0%, #e8eefc 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3c4fa8;
  font-weight: 800;
  font-size: 26px;
  overflow: hidden;
  flex: 0 0 64px;
}

.customer-editor-hero-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-editor-hero-avatar-fallback {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.customer-editor-title-stack {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.customer-editor-title-stack h3 {
  margin: 0;
}

.customer-editor-title-stack p {
  margin: 0;
  color: #6f7588;
  font-size: 14px;
}

.customer-editor-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.customer-editor-hero-meta span {
  border: 1px solid #dbe3ff;
  border-radius: 999px;
  background: #f6f8ff;
  color: #49557f;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
}

.customer-editor-hero-actions {
  margin-left: auto;
}

.customer-editor-tabs-redesign {
  margin-top: 0;
}

.customer-editor-metrics-redesign {
  margin-top: 0;
}

.customer-editor-content-shell {
  display: grid;
  gap: 14px;
}

.customer-edit-section {
  display: grid;
  gap: 14px;
}

.customer-edit-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.customer-edit-section-title {
  display: grid;
  gap: 4px;
}

.customer-edit-section-title h3 {
  margin: 0;
}

.customer-edit-section-title p {
  margin: 0;
  color: #6f7588;
  font-size: 14px;
}

.customer-section-pill {
  border: 1px solid #dbe3ff;
  border-radius: 999px;
  background: #f5f8ff;
  color: #4a5a8f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  white-space: nowrap;
}

.customer-section-pill.is-good {
  border-color: #cbeedc;
  background: #eaf8f0;
  color: #1d8454;
}

.customer-section-pill.is-warning {
  border-color: #f2de9f;
  background: #fff8e5;
  color: #8a5d0a;
}

.customer-edit-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 12px;
}

.customer-edit-card {
  border: 1px solid #dfe5fb;
  border-radius: 14px;
  background: #fbfcff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.customer-edit-card h4 {
  margin: 0;
  color: #242b42;
  font-size: 16px;
}

.customer-edit-contact-form,
.customer-edit-social-form,
.customer-edit-notes-form,
.customer-edit-avatar-form {
  gap: 12px;
}

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

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

.customer-edit-field-grid label,
.customer-edit-upload-field,
.customer-edit-field-full {
  display: grid;
  gap: 6px;
  margin: 0;
}

.customer-edit-field-grid label > span,
.customer-edit-upload-field > span,
.customer-edit-field-full > span {
  color: #596489;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.customer-edit-field-full {
  grid-column: 1 / -1;
}

.customer-edit-form-actions {
  justify-content: flex-start;
}

.customer-edit-card-avatar {
  align-content: start;
}

.customer-edit-avatar-card {
  margin-bottom: 0;
}

.customer-edit-avatar-card .profile-avatar-form {
  justify-content: flex-start;
}

.customer-edit-avatar-summary {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.customer-edit-avatar-shell {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  border: 1px solid #dbe2fb;
  background: #f4f6ff;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 88px;
}

.customer-edit-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-edit-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #596489;
  text-align: center;
  padding: 6px;
}

.customer-edit-avatar-placeholder span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #e8edff;
  color: #4356be;
  font-weight: 800;
  font-size: 18px;
}

.customer-edit-avatar-placeholder small {
  font-size: 11px;
  color: #6b779d;
}

.customer-edit-avatar-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.customer-edit-avatar-copy strong {
  color: #2a3148;
  font-size: 15px;
}

.customer-edit-avatar-copy span {
  color: #6f7588;
  font-size: 12px;
  word-break: break-word;
}

.customer-edit-avatar-actions {
  justify-content: flex-start;
}

.customer-edit-helper-callout {
  border: 1px solid #dce5ff;
  border-radius: 12px;
  background: #f6f8ff;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.customer-edit-helper-callout strong {
  color: #334386;
  font-size: 13px;
}

.customer-edit-helper-callout p {
  margin: 0;
  color: #5d6a93;
  font-size: 13px;
}

.customer-settings-section {
  gap: 12px;
}

.customer-settings-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.customer-settings-grid {
  display: grid;
  gap: 12px;
}

.customer-settings-card {
  border: 1px solid #dde5ff;
  border-radius: 14px;
  background: #fbfcff;
  padding: 14px;
  gap: 12px;
}

.customer-settings-card-head {
  display: grid;
  gap: 4px;
}

.customer-settings-card-head h4 {
  margin: 0;
  color: #252d49;
  font-size: 17px;
}

.customer-settings-card-head p {
  margin: 0;
  color: #65739a;
  font-size: 13px;
}

.customer-settings-toggle-group {
  display: grid;
  gap: 10px;
}

.customer-settings-toggle {
  background: #f7f9ff;
}

.customer-settings-notes-field {
  display: grid;
  gap: 6px;
}

.customer-settings-notes-field > span,
.customer-settings-select-field > span {
  color: #596489;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.customer-settings-select-field {
  display: grid;
  gap: 6px;
}

.customer-settings-select-field > small {
  color: #7381a7;
  font-size: 12px;
}

.customer-settings-picker {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px 12px;
}

.customer-settings-picker label > span {
  color: #596489;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.customer-settings-picker label > small {
  color: #7381a7;
  font-size: 12px;
}

.customer-settings-multi-select {
  min-height: 132px;
}

.customer-settings-actions {
  justify-content: flex-start;
}

.customer-social-overview {
  border: 1px solid #dce5ff;
  border-radius: 12px;
  background:
    radial-gradient(130% 120% at 100% -30%, rgba(86, 107, 255, 0.1), transparent 50%),
    #f8faff;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.customer-social-overview p {
  margin: 0;
  color: #5f6c95;
  font-size: 13px;
}

.customer-social-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-social-status-chip {
  border: 1px solid #d4ddff;
  border-radius: 999px;
  background: #ffffff;
  color: #435396;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
}

.customer-social-status-chip.is-empty {
  color: #6876a1;
}

.customer-social-grid {
  gap: 10px 12px;
}

.customer-social-field {
  border: 1px solid #dfe6ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  gap: 8px;
}

.customer-social-label-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3f4e84;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.customer-social-platform-token {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #cdd8ff;
  background: #edf2ff;
  color: #3e52ba;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}

.customer-social-field small {
  color: #6a77a1;
  font-size: 12px;
}

.customer-notes-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.95fr) minmax(0, 1.4fr);
  gap: 12px;
}

.customer-notes-guide {
  align-content: start;
  gap: 8px;
}

.customer-notes-guide-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #5f6d95;
  font-size: 13px;
}

.customer-notes-form-card {
  border: 1px solid #dde5ff;
  border-radius: 14px;
  background: #fbfcff;
  padding: 14px;
  gap: 12px;
}

.customer-notes-hint {
  margin: 0;
  color: #6a77a1;
}

.customer-billing-section {
  gap: 12px;
}

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

.customer-billing-kpi-card {
  border: 1px solid #dde5ff;
  border-radius: 14px;
  background: linear-gradient(140deg, #ffffff 0%, #f8faff 100%);
  padding: 12px;
  display: grid;
  gap: 4px;
}

.customer-billing-kpi-card h4 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #65739a;
}

.customer-billing-kpi-card strong {
  font-size: 34px;
  line-height: 1;
  color: #202744;
}

.customer-billing-kpi-card small {
  color: #6f7da3;
  font-size: 12px;
}

.customer-billing-balance-form {
  border: 1px solid #dde5ff;
  border-radius: 14px;
  background: #fbfcff;
  padding: 14px;
  gap: 12px;
}

.customer-billing-balance-head {
  display: grid;
  gap: 4px;
}

.customer-billing-balance-head h4 {
  margin: 0;
  color: #252d49;
}

.customer-billing-balance-head p {
  margin: 0;
  color: #68749b;
  font-size: 13px;
}

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

.customer-billing-balance-grid label {
  display: grid;
  gap: 6px;
}

.customer-billing-balance-grid label > span {
  color: #596489;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.customer-billing-balance-grid label > small {
  color: #7381a7;
  font-size: 12px;
}

.customer-billing-balance-net {
  border: 1px dashed #cfd9fb;
  border-radius: 12px;
  background: #f4f7ff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.customer-billing-balance-net span {
  color: #5b678f;
  font-weight: 600;
}

.customer-billing-balance-net strong {
  color: #253ca8;
  font-size: 20px;
}

.customer-edit-notes-form textarea {
  min-height: 160px;
}

.customer-password-reset-shell {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 96% -30%, rgba(86, 107, 255, 0.12), transparent 50%),
    #f8faff;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, auto);
  align-items: end;
  gap: 12px;
}

.customer-password-reset-copy {
  display: grid;
  gap: 8px;
}

.customer-password-reset-copy h4 {
  margin: 0;
  color: #25304f;
  font-size: 16px;
}

.customer-password-reset-helper {
  margin: 0;
  color: #5d678b;
}

.customer-password-reset-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #5f6b90;
  font-size: 13px;
}

.account-settings-profile-tabs {
  margin-top: 10px;
  margin-bottom: 14px;
}

.white-label-panel {
  display: grid;
  gap: 14px;
}

.white-label-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.white-label-hero-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.white-label-hero-copy h3 {
  margin: 0;
}

.white-label-hero-copy p {
  margin: 6px 0 0;
}

.white-label-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.white-label-preview-card {
  border: 1px solid #d9e1ff;
  background: #f8faff;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 6px;
}

.white-label-preview-label {
  color: #5f6d99;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.white-label-preview-card code {
  display: block;
  font-size: 13px;
  color: #2b3968;
  word-break: break-word;
}

.white-label-preview-card .badge {
  justify-self: flex-start;
}

.white-label-preview-card .muted-note {
  margin: 0;
}

.white-label-config-form {
  gap: 10px;
}

.white-label-enable-only-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

.white-label-enable-only-btn {
  min-width: 240px;
}

.white-label-enable-toggle {
  margin: 0;
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.white-label-enable-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.white-label-enable-toggle-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.white-label-enable-toggle-copy strong {
  color: #24305a;
  font-size: 14px;
}

.white-label-enable-toggle-copy small {
  color: #5f6d99;
  font-size: 12px;
  line-height: 1.35;
}

.white-label-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 12px;
}

.white-label-config-grid label {
  display: grid;
  gap: 6px;
}

.white-label-config-actions {
  flex-wrap: wrap;
}

.white-label-advanced-config {
  margin: 0;
  border: 1px dashed #cfd9fb;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px 12px;
}

.white-label-advanced-config summary {
  cursor: pointer;
  color: #354477;
  font-size: 13px;
  font-weight: 700;
}

.white-label-advanced-config[open] {
  background: #fbfcff;
}

.white-label-advanced-config label {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.white-label-advanced-config .muted-note {
  margin: 8px 0 0;
}

.white-label-setup-guide {
  border: 1px solid #dce4ff;
  background: #fbfcff;
  border-radius: 12px;
  padding: 12px 14px;
}

.white-label-setup-guide h4 {
  margin: 0 0 8px;
  color: #23315a;
  font-size: 14px;
}

.white-label-setup-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: #596894;
  font-size: 14px;
}

.white-label-setup-steps li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.white-label-setup-steps li .badge {
  margin-top: 1px;
}

.white-label-setup-steps li .muted-note {
  flex-basis: 100%;
  margin: 0;
}

.white-label-alert {
  border-radius: 12px;
  border: 1px solid #ebd8ab;
  background: #fff8e8;
  color: #7a5a12;
  padding: 10px 12px;
  font-size: 13px;
}

.white-label-alert code {
  color: inherit;
}

.white-label-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}

.white-label-status-card {
  border: 1px solid #d9e1ff;
  background: #fbfcff;
  display: grid;
  gap: 12px;
}

.white-label-status-card .toolbar {
  margin-bottom: 0;
}

.white-label-status-card h4 {
  margin: 4px 0 0;
  color: #58638d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.white-label-checks-list {
  gap: 8px;
}

.white-label-check-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  border: 1px solid #e3e9ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  align-items: start;
}

.white-label-check-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.white-label-check-copy strong {
  color: #25305a;
  font-size: 14px;
}

.white-label-check-copy .muted-note {
  margin: 0;
}

.white-label-dns-table-wrap {
  border: 1px solid #e3e9ff;
  border-radius: 10px;
  background: #ffffff;
}

.white-label-dns-table {
  min-width: 700px;
}

.white-label-dns-table code {
  word-break: break-word;
  color: #2d3a66;
  font-size: 12px;
}

.white-label-dns-empty {
  border: 1px solid #e3e9ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.white-label-dns-empty strong {
  color: #263461;
  font-size: 14px;
}

.white-label-dns-empty ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #5d6a90;
  font-size: 13px;
}

.white-label-dns-empty p {
  margin: 0;
}

.white-label-checked-at {
  margin-top: -4px;
}

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

.download-permissions-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.download-permissions-header-copy h3 {
  margin: 0;
}

.download-permissions-header-copy .muted-note {
  margin: 6px 0 0;
}

.download-permissions-header-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.download-permissions-form {
  gap: 14px;
}

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

.download-settings-card,
.download-permissions-surface,
.download-permissions-block {
  border: 1px solid #dce4ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #f9fbff 0%, #f4f7ff 100%);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.download-settings-card-head,
.download-permissions-block-head {
  display: grid;
  gap: 4px;
}

.download-settings-card-head h4,
.download-permissions-block-head h4 {
  margin: 0;
  color: #25335e;
  font-size: 16px;
}

.download-settings-card-head .muted-note,
.download-permissions-block-head .muted-note {
  margin: 0;
}

.download-settings-inline-grid,
.download-permissions-inline-grid {
  align-items: end;
}

.download-permissions-options {
  display: grid;
  gap: 10px;
}

.download-permissions-option {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.download-permissions-option-input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent);
  place-self: center;
}

.download-permissions-option-content {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.download-permissions-option-content strong {
  color: #25335e;
  font-size: 14px;
}

.download-permissions-option-content .muted-note {
  margin: 0;
}

.download-permissions-option-input:checked + .download-permissions-option-content {
  border-color: #97a8ff;
  background: #f1f4ff;
  box-shadow: inset 0 0 0 1px rgba(97, 118, 233, 0.18);
}

.download-settings-live-summary,
.download-permissions-summary,
.download-permissions-readonly {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.download-settings-live-summary .muted-note,
.download-permissions-summary .muted-note,
.download-permissions-readonly .muted-note {
  margin: 0;
}

.download-permissions-summary-label {
  font-size: 11px;
  color: #6676a5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.download-permissions-summary-badges,
.download-permissions-readonly-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.download-settings-preview-tile,
.download-permissions-example-card,
.download-permissions-filename-preview {
  border: 1px dashed #c6d2ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  display: grid;
  gap: 5px;
}

.download-settings-preview-tile code,
.download-permissions-example-card code,
.download-permissions-filename-preview code {
  font-size: 13px;
  color: #26335f;
  word-break: break-word;
}

.download-settings-field {
  margin: 0;
  display: grid;
  gap: 6px;
}

.download-settings-note {
  margin: 0;
}

.download-settings-actions {
  justify-content: flex-end;
}

.download-permissions-readonly-redesign {
  gap: 10px;
}

.download-permissions-readonly-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.download-permissions-readonly-item {
  border: 1px solid #dde5ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.download-permissions-readonly-item span {
  color: #60709b;
  font-size: 12px;
}

.download-permissions-readonly-item strong {
  color: #23315a;
  font-size: 14px;
}

@media (max-width: 980px) {
  .download-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .download-settings-actions {
    justify-content: stretch;
  }

  .download-settings-actions .btn {
    width: 100%;
  }

  .download-permissions-readonly-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.legal-settings-panel {
  display: grid;
  gap: 14px;
}

.legal-workbench-panel {
  gap: 16px;
}

.legal-settings-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.legal-settings-header-copy h3 {
  margin: 0;
}

.legal-settings-header-copy .muted-note {
  margin: 6px 0 0;
}

.legal-settings-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.legal-workbench-hero {
  border: 1px solid #dce4ff;
  border-radius: 14px;
  background: linear-gradient(120deg, #f8faff 0%, #eef2ff 100%);
  padding: 14px;
}

.legal-workbench-hero-copy h3 {
  margin: 0;
}

.legal-workbench-hero-copy .muted-note {
  margin: 6px 0 0;
}

.legal-section-card {
  border: 1px solid #dce4ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #f9fbff 0%, #f4f7ff 100%);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.legal-section-head {
  display: grid;
  gap: 4px;
}

.legal-section-head h4 {
  margin: 0;
  color: #25335e;
  font-size: 16px;
}

.legal-section-head .muted-note {
  margin: 0;
}

.legal-settings-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.legal-workbench-top-grid {
  align-items: stretch;
}

.legal-workbench-card {
  align-content: start;
}

.legal-settings-form {
  gap: 14px;
}

.legal-settings-rules-card {
  display: grid;
  gap: 10px;
}

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

.legal-settings-toggle {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px 14px;
}

.legal-settings-toggle-input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent);
}

.legal-settings-toggle-copy {
  display: grid;
  gap: 5px;
}

.legal-settings-toggle-copy strong {
  color: #24335c;
  font-size: 14px;
}

.legal-settings-toggle-copy .muted-note {
  margin: 0;
}

.legal-acknowledgement-field {
  margin: 0;
  display: grid;
  gap: 6px;
}

.legal-workbench-helper {
  margin: 0;
}

.legal-settings-preview-card {
  display: grid;
  gap: 10px;
}

.legal-preview-surface {
  border: 1px dashed #c7d4ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.legal-preview-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.legal-preview-checkbox {
  margin: 0;
  border: 1px solid #dce4ff;
  border-radius: 10px;
  background: #f8faff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 10px;
}

.legal-preview-checkbox input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--accent);
}

.legal-preview-checkbox span {
  color: #24335c;
  font-size: 14px;
  line-height: 1.4;
}

.legal-preview-note {
  margin: 0;
}

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

.legal-preview-checklist-item {
  border: 1px solid #dce4ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 9px 11px;
  display: grid;
  gap: 4px;
}

.legal-preview-checklist-item span {
  font-size: 12px;
  color: #60709b;
}

.legal-preview-checklist-item strong {
  font-size: 14px;
  color: #26335f;
}

.legal-documents-shell {
  display: grid;
  gap: 10px;
}

.legal-documents-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

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

.legal-document-field {
  margin: 0;
  display: grid;
  gap: 8px;
}

.legal-document-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid #d6e1ff;
  border-radius: 10px;
  background: #f7faff;
}

.legal-document-tool-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #304571;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.legal-document-tool-btn:hover {
  border-color: #b8c9ff;
  background: #ffffff;
  color: #1f325f;
}

.legal-document-tool-btn:focus-visible {
  outline: none;
  border-color: #5f78ff;
  box-shadow: 0 0 0 3px rgba(77, 103, 250, 0.2);
}

.legal-document-tool-btn--italic span {
  font-style: italic;
}

.legal-document-editor {
  min-height: 170px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid #ccd8ff;
  border-radius: 12px;
  background: #ffffff;
  color: #1f2b4d;
  padding: 12px 13px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.legal-document-editor:focus {
  outline: none;
  border-color: #6682ff;
  box-shadow: 0 0 0 2px rgba(95, 114, 247, 0.16);
}

.legal-document-editor:empty::before {
  content: attr(data-placeholder);
  color: #7f90bb;
}

.legal-document-editor p,
.legal-document-editor ul,
.legal-document-editor ol {
  margin: 0 0 10px;
}

.legal-document-editor p:last-child,
.legal-document-editor ul:last-child,
.legal-document-editor ol:last-child {
  margin-bottom: 0;
}

.legal-document-editor ul,
.legal-document-editor ol {
  padding-left: 22px;
}

.legal-document-editor a {
  color: #3656c8;
  text-decoration: underline;
}

.legal-document-source-input {
  display: none;
}

.legal-document-field--card .legal-document-editor {
  border-color: #ccd8ff;
  background: #ffffff;
}

.legal-document-field--wide {
  grid-column: 1 / -1;
}

.legal-document-field--wide .legal-document-editor {
  min-height: 140px;
}

.legal-settings-actions {
  justify-content: flex-end;
}

.legal-workbench-footer-actions {
  margin-top: 2px;
}

.legal-files-shell {
  margin-top: 0;
  display: grid;
  gap: 10px;
}

.legal-files-shell-redesign {
  background: linear-gradient(180deg, #f9fbff 0%, #f4f7ff 100%);
}

.legal-files-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.legal-files-head-copy {
  display: grid;
  gap: 4px;
}

.legal-files-head-copy h4 {
  margin: 0;
  color: #2e3a64;
}

.legal-files-head-copy .muted-note {
  margin: 0;
}

.legal-file-upload-form {
  gap: 10px;
}

.legal-file-upload-form-redesign {
  position: relative;
}

.legal-file-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.legal-file-upload-dropzone {
  width: 100%;
  border: 1px dashed #c6d3ff;
  border-radius: 10px;
  background: #f8faff;
  color: #32406b;
  padding: 10px 12px;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
}

.legal-file-upload-dropzone strong {
  font-size: 13px;
}

.legal-file-upload-dropzone span {
  font-size: 12px;
  color: #62709a;
}

.legal-file-upload-dropzone:hover {
  border-color: #9caeff;
  background: #f2f5ff;
}

.legal-file-upload-dropzone:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 91, 255, 0.16);
}

.legal-file-upload-actions {
  gap: 10px;
}

.legal-files-list-wrap {
  display: grid;
  gap: 8px;
}

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

.legal-files-item {
  border: 1px solid #dde5ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.legal-files-list-readonly .legal-files-item {
  justify-content: flex-start;
}

.legal-files-link {
  color: #3748a7;
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}

.legal-files-link:hover {
  text-decoration: underline;
}

.legal-files-remove-btn {
  min-width: 88px;
}

.legal-files-empty {
  margin: 0;
}

.legal-readonly-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.legal-readonly-item {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}

.legal-readonly-item span {
  color: #60709b;
  font-size: 12px;
}

.legal-readonly-item strong {
  color: #23315a;
  font-size: 14px;
}

@media (max-width: 980px) {
  .legal-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-preview-checklist {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .legal-toggle-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-documents-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-settings-actions {
    justify-content: stretch;
  }

  .legal-files-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-file-upload-actions .btn,
  .legal-settings-actions .btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .white-label-config-grid,
  .white-label-preview-grid,
  .white-label-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .white-label-enable-only-btn {
    width: 100%;
    min-width: 0;
  }

  .white-label-enable-toggle {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .white-label-enable-toggle .badge {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }
}

.customer-editor-tab {
  border-radius: 9px;
}

.customer-editor-metrics {
  margin-top: 12px;
}

.customer-directory-shell,
.customer-teams-shell {
  border-color: #c9d6ff;
  background:
    radial-gradient(120% 120% at 98% -24%, rgba(90, 113, 255, 0.14), transparent 52%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.customer-directory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.customer-directory-head-copy {
  display: grid;
  gap: 6px;
}

.customer-directory-head-copy h3 {
  margin: 0;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.customer-directory-head-copy p {
  margin: 0;
  color: #5f6c97;
  font-size: 14px;
  max-width: 62ch;
}

.customer-directory-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  width: min(100%, 600px);
}

.customer-directory-metric {
  border: 1px solid #d8e0ff;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #f3f6ff 100%);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.customer-directory-metric span {
  color: #5b6994;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}

.customer-directory-metric strong {
  color: #1f2749;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

.customer-directory-toolbar {
  border: 1px solid #d7e0ff;
  border-radius: 14px;
  background: #f7f9ff;
  padding: 10px;
  margin-bottom: 14px;
}

.customer-directory-actions {
  align-self: center;
}

.customers-toolbar-form-redesign {
  margin-bottom: 0;
  grid-template-columns: minmax(240px, 360px) auto auto;
  gap: 8px;
}

.customer-directory-table-wrap {
  border: 1px solid #dbe3ff;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.clients-directory-table thead th {
  color: #6c7288;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.clients-directory-table {
  min-width: 1220px;
}

.clients-directory-table td {
  vertical-align: middle;
}

.customer-directory-shell .clients-directory-table thead th,
.customer-teams-shell .clients-directory-table thead th {
  background: #f4f7ff;
  border-bottom-color: #dbe4ff;
  padding-top: 12px;
  padding-bottom: 12px;
}

.customer-directory-shell .clients-directory-table td,
.customer-teams-shell .clients-directory-table td {
  padding-top: 11px;
  padding-bottom: 11px;
}

.clients-directory-actions-col,
.customer-directory-shell .clients-directory-table td:last-child,
.customer-teams-shell .clients-directory-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.clients-sort-trigger {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0;
  cursor: pointer;
}

.clients-sort-trigger:hover {
  color: #4e5a81;
}

.clients-sort-trigger.is-active {
  color: #3f4cc8;
}

.clients-directory-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.clients-directory-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  background: linear-gradient(150deg, #9b9fad 0%, #7f8391 100%);
  color: #fff;
  font-weight: 800;
  font-size: 21px;
  overflow: hidden;
}

.clients-directory-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clients-directory-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.clients-directory-name-copy {
  display: grid;
  gap: 3px;
}

.clients-directory-name-copy strong {
  font-size: 15px;
  font-weight: 500;
  color: #373b47;
  line-height: 1.25;
}

.clients-directory-name-copy span {
  color: #777e91;
  font-size: 12px;
  line-height: 1.3;
}

.clients-directory-phone-cell {
  white-space: nowrap;
}

.clients-directory-phone-flag {
  font-size: 17px;
  line-height: 1;
  margin-right: 8px;
}

.customer-directory-row:hover td {
  background: #f8faff;
}

.customer-directory-row.is-active td {
  background: #eef2ff;
}

.customer-directory-empty-row td {
  text-align: center;
  color: #687295;
  font-size: 14px;
  font-weight: 600;
  padding: 28px 10px;
}

.clients-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.clients-row-link {
  border: none;
  background: transparent;
  color: #4a52df;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.clients-row-link:hover {
  text-decoration: underline;
}

.clients-row-link-danger {
  color: #dd2f2f;
}

.clients-row-link.is-disabled {
  color: #c4c8d4;
  cursor: not-allowed;
  text-decoration: none;
}

.client-avatar-preview {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.customer-password-reset-row {
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.customer-password-reset-row .btn {
  min-width: 240px;
}

.customer-password-reset-permission {
  margin: 0;
  max-width: 320px;
  text-align: right;
  color: #62709a;
}

.customer-client-listings-grid {
  margin-top: 8px;
}

@media (max-width: 1120px) {
  .customer-edit-details-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-settings-summary {
    justify-content: flex-start;
  }

  .customer-notes-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-password-reset-shell {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .customer-password-reset-row {
    align-items: flex-start;
  }

  .customer-password-reset-permission {
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .customer-editor-hero-profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .customer-editor-hero-actions {
    margin-left: 0;
    width: 100%;
  }

  .customer-editor-hero-actions .btn {
    width: 100%;
  }

  .customer-edit-field-grid,
  .customer-edit-field-grid-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-password-reset-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-password-reset-row .btn {
    width: 100%;
    min-width: 0;
  }

  .customer-social-status-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-settings-summary {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-section-pill {
    white-space: normal;
  }

  .customer-billing-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-billing-kpi-card strong {
    font-size: 28px;
  }

  .customer-billing-balance-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.customer-team-status-pill,
.customer-team-count-pill,
.customer-team-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.customer-team-status-pill.is-active {
  background: #e7f8ef;
  color: #1b8352;
}

.customer-team-status-pill.is-inactive {
  background: #f3f4f8;
  color: #7b8092;
}

.customer-team-count-pill,
.customer-team-role-pill {
  background: #eef1ff;
  color: #4a52df;
}

.customer-teams-table {
  min-width: 1080px;
}

.customer-client-teams-table th,
.customer-client-teams-table td {
  vertical-align: middle;
}

.customer-team-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.customer-team-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  flex: 0 0 42px;
  overflow: hidden;
  background: linear-gradient(150deg, #9b9fad 0%, #7f8391 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.customer-team-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-team-avatar-fallback {
  font-size: 15px;
}

.customer-team-name-copy {
  display: grid;
  gap: 2px;
}

.customer-team-name-copy strong {
  font-size: 15px;
  line-height: 1.2;
  color: #2f3442;
}

.customer-team-website-link {
  color: #4a52df;
  font-size: 12px;
  text-decoration: none;
}

.customer-team-website-link:hover {
  text-decoration: underline;
}

.customer-team-website-empty {
  font-size: 12px;
  color: #9aa1b4;
}

.customer-team-members-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 42px;
}

.customer-team-members-cell strong {
  line-height: 1.2;
  color: #2f3442;
}

.customer-team-members-cell span {
  font-size: 12px;
  color: #6f7588;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .customer-directory-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 420px);
  }
}

.customer-team-modal {
  width: min(860px, 94vw);
  max-height: min(92vh, 960px);
  overflow: auto;
  border: 1px solid #cfd9ff;
  background:
    radial-gradient(120% 120% at 100% -24%, rgba(106, 131, 255, 0.12), transparent 58%),
    #ffffff;
  box-shadow: 0 24px 60px rgba(18, 29, 65, 0.28);
}

.customer-team-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e9ff;
}

.customer-team-modal-title-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.customer-team-modal-title-copy p {
  margin: 0;
  font-size: 13px;
  color: #62709b;
}

.customer-team-modal-head-meta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-team-modal-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid #d4defa;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #4a5a8e;
  background: #f7f9ff;
}

.customer-team-modal-count-pill.is-status {
  text-transform: capitalize;
}

.customer-team-modal-head h3 {
  margin: 0;
}

.customer-team-modal-form {
  display: grid;
  gap: 12px;
}

.customer-team-modal-section {
  border: 1px solid #dce5ff;
  border-radius: 14px;
  background: #f9fbff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.customer-team-modal-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-team-modal-section-copy {
  display: grid;
  gap: 4px;
}

.customer-team-modal-section-copy h4 {
  margin: 0;
  color: #24315c;
  font-size: 17px;
}

.customer-team-modal-section-copy p {
  margin: 0;
  color: #63729c;
  font-size: 13px;
  line-height: 1.45;
}

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

.customer-team-modal-grid > label {
  margin: 0;
}

.customer-team-field-span2 {
  grid-column: 1 / -1;
}

.customer-team-download-card {
  grid-column: 1 / -1;
  border: 1px solid #d8e1ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fbff 0%, #f4f7ff 100%);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.customer-team-download-head {
  display: grid;
  gap: 3px;
}

.customer-team-download-head strong {
  color: #22315f;
  font-size: 14px;
  line-height: 1.2;
}

.customer-team-download-head span {
  color: #5f6c97;
  font-size: 12px;
  line-height: 1.45;
}

.customer-team-download-field {
  margin: 0;
}

.customer-team-download-hint {
  margin: 0;
  color: #6a769b;
  font-size: 12px;
}

.customer-team-modal-customer-head {
  align-items: center;
}

.customer-team-modal-customer-section {
  border: 1px solid #dce5ff;
  border-radius: 14px;
  background: #f9fbff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.customer-team-modal-search-input-wrap {
  position: relative;
}

.customer-team-modal-search-input-wrap .search-suggestions-menu {
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: 220px;
}

.customer-team-modal-selected-inputs {
  display: none;
}

.customer-team-modal-selected-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.customer-team-selected-customer-row {
  border: 1px solid #dfe4f5;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fafbff;
}

.customer-team-selected-customer-copy {
  display: grid;
  gap: 2px;
}

.customer-team-selected-customer-copy strong {
  color: #2f3442;
  line-height: 1.2;
}

.customer-team-selected-customer-copy small {
  color: #6f7588;
  font-size: 12px;
}

.customer-team-selected-customer-remove {
  padding: 6px 10px;
}

.customer-team-modal-footnotes {
  display: grid;
  gap: 4px;
}

.customer-team-modal-footnote {
  margin: 0;
  font-size: 12px;
}

.customer-team-modal-actions {
  margin-top: 2px;
  justify-content: flex-end;
  gap: 10px;
}

.customer-team-modal-actions .btn {
  min-width: 110px;
}

.customer-team-avatar-card {
  margin-bottom: 0;
}

.customer-team-avatar-card .profile-avatar-form {
  justify-content: flex-start;
  gap: 14px;
}

.customer-team-avatar-preview-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.customer-pricing-plan-modal {
  width: min(1660px, calc(100vw - 12px));
  max-height: calc(100vh - 12px);
}

.customer-pricing-plan-form {
  gap: 12px;
}

.customer-pricing-plan-coupon-note {
  display: block;
  margin-top: 8px;
  line-height: 1.45;
}

.customer-pricing-plan-form-head {
  align-items: flex-start;
}

.customer-pricing-plan-completion {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-pricing-plan-modal .products-editor-accordion-card {
  border-color: #dbe3f6;
  border-radius: 12px;
  background: #ffffff;
}

.customer-pricing-plan-modal .products-editor-accordion-card.is-open {
  background: #ffffff;
}

.customer-pricing-plan-modal .products-editor-accordion-toggle {
  padding: 12px 14px;
  background: #f8faff;
}

.customer-pricing-plan-modal .products-editor-accordion-card.is-open .products-editor-accordion-toggle {
  border-bottom: 1px solid #e6ecfb;
}

.customer-pricing-plan-modal .products-editor-accordion-toggle:hover {
  background: #f4f8ff;
}

.customer-pricing-plan-modal .products-editor-accordion-body {
  padding: 12px 14px 14px;
  max-height: min(50vh, 500px);
}

.customer-pricing-plan-modal .customer-pricing-plan-assignments-card .products-editor-accordion-body {
  max-height: none;
  overflow: visible;
}

.customer-pricing-plan-assignment-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.customer-pricing-plan-assignment-panel {
  position: relative;
  border: 1px solid #dbe3f6;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  padding: 0;
  display: grid;
  gap: 0;
  min-height: 0;
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.customer-pricing-plan-assignment-accordion > summary {
  list-style: none;
  cursor: pointer;
}

.customer-pricing-plan-assignment-accordion > summary::-webkit-details-marker {
  display: none;
}

.customer-pricing-plan-assignment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e7edfb;
  background: linear-gradient(180deg, #fbfcff 0%, #f7faff 100%);
}

.customer-pricing-plan-assignment-accordion:not([open]) .customer-pricing-plan-assignment-head {
  border-bottom-color: transparent;
}

.customer-pricing-plan-assignment-head-copy {
  display: grid;
  gap: 2px;
}

.customer-pricing-plan-assignment-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.customer-pricing-plan-assignment-kicker {
  color: #5e74c8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.customer-pricing-plan-assignment-head strong {
  display: block;
  color: #1f2a4d;
  font-size: 18px;
  line-height: 1.2;
}

.customer-pricing-plan-assignment-head small {
  display: block;
  color: #5e6a95;
  font-size: 12px;
  line-height: 1.45;
}

.customer-pricing-plan-assignment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #d4dffd;
  background: #f1f5ff;
  color: #4860ae;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 10px;
  white-space: nowrap;
}

.customer-pricing-plan-assignment-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid #5c6ea5;
  border-bottom: 2px solid #5c6ea5;
  transform: rotate(45deg);
  transition: transform 140ms ease;
  margin-top: 2px;
}

.customer-pricing-plan-assignment-accordion[open] .customer-pricing-plan-assignment-chevron {
  transform: rotate(-135deg);
  margin-top: 6px;
}

.customer-pricing-plan-assignment-body {
  display: grid;
  gap: 14px;
  padding: 14px 16px 16px;
  overflow: visible;
}

.customer-pricing-plan-assignment-toolbar {
  padding: 0;
}

.customer-pricing-plan-assignment-search-wrap {
  position: relative;
  z-index: 3;
}

.customer-pricing-plan-assignment-search-wrap-dropup .search-suggestions-menu {
  top: auto;
  bottom: calc(100% + 8px);
}

.customer-pricing-plan-assignment-toolbar input[type="search"] {
  width: 100%;
}

.customer-pricing-plan-assignment-hidden-inputs {
  display: none;
}

.customer-pricing-plan-assignment-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #dfe7fb;
  border-radius: 12px;
  background: #f7faff;
  color: #60709f;
  line-height: 1.5;
}

.customer-pricing-plan-assignment-results,
.customer-pricing-plan-assignment-selected-shell {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e4ebfb;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfdff 0%, #f7faff 100%);
}

.customer-pricing-plan-assignment-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-pricing-plan-assignment-section-head strong {
  display: block;
  color: #25335e;
  font-size: 13px;
  line-height: 1.25;
}

.customer-pricing-plan-assignment-section-head small {
  display: block;
  color: #68779e;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 2px;
}

.customer-pricing-plan-assignment-search-results,
.customer-pricing-plan-assignment-selected-list {
  display: grid;
  gap: 8px;
}

.customer-pricing-plan-assignment-result-card,
.customer-pricing-plan-assignment-selected-card {
  border: 1px solid #dde6fc;
  border-radius: 14px;
  background: #ffffff;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.customer-pricing-plan-assignment-result-card:hover {
  border-color: #cad9ff;
  background: #fbfcff;
  box-shadow: 0 8px 18px rgba(95, 121, 195, 0.08);
  transform: translateY(-1px);
}

.customer-pricing-plan-assignment-selected-card {
  background: #fbfcff;
}

.customer-pricing-plan-assignment-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.customer-pricing-plan-assignment-inline-action {
  min-width: 88px;
  justify-content: center;
}

.customer-pricing-plan-assignment-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef1ff;
  color: #4854d8;
  font-weight: 700;
  flex: 0 0 38px;
}

.customer-pricing-plan-assignment-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.customer-pricing-plan-assignment-copy strong {
  color: #25335e;
  line-height: 1.25;
}

.customer-pricing-plan-assignment-copy small {
  color: #68779e;
  font-size: 12px;
  line-height: 1.4;
}

.customer-pricing-plan-assignment-empty {
  margin: 0;
  padding: 10px 4px;
  text-align: left;
}

.customer-pricing-plan-rules-shell {
  display: grid;
  gap: 12px;
}

.customer-pricing-plan-rule-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  position: relative;
  z-index: 1;
}

.customer-pricing-plan-rule-tabs .products-services-tabs-divider {
  display: none;
}

.customer-pricing-plan-rule-tabs .products-services-tab {
  border: 1px solid #d7e1fb;
  border-radius: 999px;
  background: #f8faff;
  color: #4b5d8d;
  font-size: 13px;
  line-height: 1.2;
  padding: 7px 12px;
  margin: 0;
  cursor: pointer;
}

.customer-pricing-plan-rule-tabs .products-services-tab.active {
  color: #3158ee;
  border-color: #c7d5ff;
  background: #eef4ff;
}

.customer-pricing-plan-rule-panel {
  display: grid;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.customer-pricing-plan-rule-panel[hidden] {
  display: none !important;
}

.customer-pricing-plan-rule-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.customer-pricing-plan-rule-panel-head strong {
  color: #1f2a4d;
  font-size: 16px;
}

.customer-pricing-plan-rule-panel-head small {
  display: block;
  margin-top: 3px;
  color: #5e6a95;
  font-size: 12px;
}

.customer-pricing-plan-rule-list {
  display: grid;
  gap: 10px;
}

.customer-pricing-plan-rule-panel .customer-pricing-plan-rule-row {
  gap: 12px;
  border: 1px solid #e8eefc;
  border-radius: 16px;
  background: #fbfcff;
  padding: 12px 14px;
  box-shadow: none;
}

.customer-pricing-plan-rule-panel .customer-pricing-plan-rule-row-tiered {
  align-items: flex-start;
  gap: 0;
  background: #ffffff;
}

.customer-pricing-plan-rule-inline-meta {
  color: #56618b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.customer-pricing-plan-rule-meta-stack {
  display: grid;
  gap: 3px;
}

.customer-pricing-plan-rule-panel .customer-pricing-plan-rule-range-list {
  margin-top: 10px;
  padding-left: 0;
  border-left: 0;
}

.customer-pricing-plan-rule-panel .payroll-product-rate-headline {
  align-items: flex-start;
  gap: 6px;
}

.customer-pricing-plan-rule-panel .payroll-product-rate-pricing {
  gap: 4px;
}

.customer-pricing-plan-rule-panel .payroll-product-tier-rate-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px 0;
  border-bottom: 1px solid #e6ecfb;
}

.customer-pricing-plan-rule-panel .payroll-product-tier-rate-row:first-child {
  border-top: 1px solid #e6ecfb;
}

.customer-pricing-plan-rule-panel .payroll-product-tier-rate-bullet {
  width: 24px;
  height: 24px;
  border-color: #d8e3ff;
  background: #f4f7ff;
}

.customer-pricing-plan-rule-panel .payroll-product-tier-rate-controls {
  gap: 12px;
}

.customer-pricing-plan-rule-panel .payroll-product-tier-rate-payout {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
}

.customer-pricing-plan-rule-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.customer-pricing-plan-rule-control-label {
  color: #6f7ca6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.customer-pricing-plan-rule-price-input {
  justify-content: flex-end;
}

.customer-pricing-plan-rule-price-input input {
  width: 126px;
}

.customer-pricing-plan-rule-range-price-input input {
  width: 112px;
}

.customer-pricing-plan-actions {
  align-items: center;
}

.customer-pricing-plan-actions .team-delete-btn {
  margin-right: auto;
}

@media (max-width: 640px) {
  .customer-team-modal {
    width: 94vw;
  }

  .customer-team-modal-head {
    align-items: stretch;
  }

  .customer-team-modal-head-meta {
    margin-left: 0;
  }

  .customer-team-modal-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-pricing-plan-assignment-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-pricing-plan-form-head {
    align-items: flex-start;
  }

  .customer-pricing-plan-completion {
    width: 100%;
  }

  .customer-pricing-plan-completion .payroll-rates-completion {
    flex: 1 1 120px;
  }

  .customer-pricing-plan-assignment-head {
    flex-wrap: wrap;
  }

  .customer-pricing-plan-assignment-count {
    order: 3;
  }

  .customer-pricing-plan-assignment-note {
    margin-left: 0;
    margin-right: 0;
  }

  .customer-pricing-plan-assignment-body {
    padding: 12px;
  }

  .customer-pricing-plan-assignment-result-card,
  .customer-pricing-plan-assignment-selected-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .customer-pricing-plan-assignment-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .customer-pricing-plan-assignment-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .customer-pricing-plan-assignment-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .customer-pricing-plan-rule-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .customer-pricing-plan-rule-control-label {
    width: 100%;
  }

  .customer-pricing-plan-rule-price-input {
    width: 100%;
    justify-content: flex-start;
  }

  .customer-pricing-plan-rule-price-input input {
    width: 100%;
  }

  .customer-team-selected-customer-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .customer-team-selected-customer-remove {
    width: 100%;
  }

  .customer-team-modal-actions {
    justify-content: stretch;
  }

  .customer-team-modal-actions .btn {
    flex: 1 1 auto;
  }
}

.reports-filter-form {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.reports-filter-form label {
  margin-bottom: 0;
}

.reports-filter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-self: end;
}

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

.reports-kpi-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.reports-kpi-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.reports-kpi-card span {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.reports-kpi-card strong {
  font-size: 34px;
  color: #4f5c82;
  line-height: 1.1;
}

.reports-kpi-card-primary strong {
  font-size: 34px;
}

.reports-kpi-trend {
  font-size: 13px;
  font-weight: 700;
}

.reports-kpi-note {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.reports-kpi-trend.positive {
  color: #1f8a4d;
}

.reports-kpi-trend.negative {
  color: #d14b4b;
}

.reports-kpi-trend.neutral {
  color: #6f7a9e;
}

.reports-summary-grid {
  display: grid;
  gap: var(--workspace-section-gap);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.reports-month-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 230px;
}

.reports-month-bar {
  display: grid;
  gap: 6px;
  text-align: center;
}

.reports-month-bar small {
  color: var(--muted);
  font-weight: 700;
}

.reports-month-bar span {
  color: #566188;
  font-size: 12px;
}

.reports-month-bar-track {
  height: 150px;
  border-radius: 10px;
  background: #ecf0ff;
  border: 1px solid #dfe5fa;
  padding: 6px;
  display: flex;
  align-items: flex-end;
}

.reports-month-bar-fill {
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, #74bb62 0%, #3e8a3b 100%);
  min-height: 4px;
}

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

.reports-hbar-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 10px;
  align-items: center;
}

.reports-hbar-row span {
  font-weight: 700;
  color: #58658f;
  font-size: 12px;
}

.reports-hbar-row strong {
  min-width: 30px;
  text-align: right;
  color: #495577;
}

.reports-hbar-track {
  height: 10px;
  border-radius: 999px;
  background: #ecf0ff;
  border: 1px solid #dfe5fa;
  overflow: hidden;
}

.reports-hbar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, #4d5bff 0%, #9db2ff 100%);
}

.reports-donut-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 1fr);
  gap: 18px;
  align-items: center;
}

.reports-donut-wrap {
  display: grid;
  place-items: center;
}

.reports-donut {
  width: min(100%, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--reports-donut-gradient, conic-gradient(#d8deef 0% 100%));
  position: relative;
}

.reports-donut::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #eef2ff;
}

.reports-donut-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 3px;
}

.reports-donut-center strong {
  font-size: 34px;
  color: #4d5a81;
  line-height: 1.1;
}

.reports-donut-center span {
  color: #7a84a5;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

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

.reports-legend li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dashed #e6ebff;
  padding-bottom: 7px;
}

.reports-legend-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4d587f;
  font-weight: 700;
  min-width: 0;
}

.reports-legend-value {
  color: #6f7ca3;
  font-size: 12px;
  white-space: nowrap;
}

.reports-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}

.reports-empty-row {
  color: var(--muted);
  font-size: 13px;
}

.panel-pad {
  padding: var(--workspace-panel-padding);
}

.stack {
  display: grid;
  gap: var(--workspace-element-gap);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--workspace-element-gap);
  margin-bottom: var(--workspace-element-gap);
  flex-wrap: wrap;
}

.inline-form {
  display: grid;
  gap: var(--workspace-element-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--workspace-form-min-col), 1fr));
  margin-bottom: var(--workspace-element-gap);
  align-items: end;
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
}

.team-member-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-members-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

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

.team-capacity-panel {
  border-color: #c8d7ff;
  background:
    radial-gradient(110% 130% at 102% -30%, rgba(92, 118, 255, 0.14), transparent 58%),
    linear-gradient(145deg, #ffffff 0%, #f6f9ff 100%);
}

.team-capacity-value {
  margin-bottom: 10px;
}

.team-filters-panel {
  background: #eef1ff;
  border-color: #cbd4ff;
}

.team-filters-form {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(170px, 1fr)) auto;
  align-items: end;
}

.team-filters-form label {
  margin-bottom: 0;
  color: #37446b;
  font-size: 13px;
  font-weight: 600;
}

.team-filters-form input,
.team-filters-form select {
  margin-top: 8px;
}

.team-filters-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  justify-self: end;
  align-self: end;
}

.team-invite-panel {
  border-style: dashed;
  border-color: #c6d0ff;
}

.team-create-modal {
  width: min(880px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
}

.team-create-modal h3 {
  margin: 0;
}

.team-create-form {
  gap: 14px;
}

.team-create-card {
  border: 1px solid #d4ddfb;
  border-radius: 12px;
  background: #f8faff;
  padding: 18px;
  display: grid;
  gap: 12px;
}

.team-create-card h4 {
  margin: 0;
  font-size: 24px;
}

.team-create-card .muted-note {
  margin: 0;
}

.team-create-grid-two {
  gap: 12px;
}

.team-home-base-inline {
  display: grid;
  gap: 10px;
  border: 1px dashed #c7d1f7;
  border-radius: 10px;
  background: #f5f7ff;
  padding: 12px;
}

.team-home-base-inline .muted-note {
  margin: 0;
}

.team-home-base-inline-details {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed #d4dbf7;
}

.team-home-base-inline-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

.team-home-base-inline-location-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: end;
}

.team-create-actions {
  justify-content: flex-end;
}

.team-service-provider-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.team-service-provider-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: 0 0 18px;
}

.team-service-provider-toggle span {
  display: grid;
  gap: 3px;
}

.team-service-provider-toggle strong {
  color: #2f3a62;
  font-size: 22px;
  font-weight: 600;
}

.team-service-provider-toggle small {
  color: #525d84;
  font-size: 14px;
  line-height: 1.45;
}

.team-daypart-override-shell {
  border: 1px solid #dbe3fb;
  border-radius: 12px;
  background: #f9fbff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.team-daypart-override-shell.is-collapsed {
  gap: 6px;
}

.team-daypart-override-head {
  display: grid;
  gap: 4px;
}

.team-daypart-override-head h4 {
  margin: 0;
  color: #2b3658;
  font-size: 22px;
  line-height: 1.2;
}

.team-daypart-override-head .muted-note {
  margin: 0;
}

.team-daypart-override-shell .team-service-provider-toggle strong {
  font-size: 16px;
}

.team-daypart-override-shell .team-service-provider-toggle small {
  font-size: 13px;
}

.daypart-override-head {
  padding: 8px 10px;
}

.daypart-override-details {
  display: grid;
  gap: 0;
}

.daypart-override-details[hidden] {
  display: none !important;
}

.team-daypart-override-shell.is-collapsed .daypart-override-details {
  display: none;
}

.daypart-override-grid {
  padding: 8px 10px 4px;
}

.daypart-override-grid.is-disabled {
  opacity: 0.68;
}

.daypart-override-row.is-disabled {
  background: #f5f8ff;
}

.daypart-override-note {
  margin: 0;
  padding: 0 4px 2px;
}

.account-daypart-override-shell {
  margin-top: 4px;
}

.team-calendar-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.team-calendar-color-input {
  width: 112px;
  min-width: 112px;
  height: 38px;
  border: 1px solid #d3daf1;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
}

.team-calendar-color-sample {
  --team-calendar-color: #4d5bff;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--team-calendar-color);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.team-table-panel {
  overflow: hidden;
}

.team-members-table {
  min-width: 760px;
}

.team-members-table th,
.team-members-table td {
  padding: 14px 12px;
  vertical-align: middle;
}

.team-members-table th {
  background: #f4f6ff;
}

.team-members-table .badge {
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
}

.team-table-name-cell {
  min-width: 220px;
}

.team-member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #cfd7f3;
  background: #eef2ff;
  flex: 0 0 48px;
}

.team-member-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 30px;
  color: #3b4370;
  background: linear-gradient(135deg, #9ea2ad 0%, #858a96 100%);
  color: #fff;
}

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

.team-kebab-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  background: #fff;
  border-color: #d5dced;
  color: #46527a;
}

.team-kebab-btn:hover {
  background: #f5f7ff;
}

.team-delete-btn {
  color: #8d2230;
  border-color: #e8b9c1;
}

.team-editor-modal form.stack {
  gap: 12px;
}

.team-editor-grid-compact {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-editor-grid-address {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.team-login-access-card {
  border: 1px solid #d4ddfb;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
}

.team-login-access-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.team-login-access-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-login-access-card h4 {
  margin: 0;
  font-size: 15px;
  color: #1f2a4b;
}

.team-login-access-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #46527a;
}

.team-login-access-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.team-login-access-pill.is-ready {
  background: #e8f7f0;
  color: #1e8b5c;
}

.team-login-access-pill.is-missing {
  background: #fff2dd;
  color: #99601a;
}

.team-login-access-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.team-login-access-btn {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.team-products-field {
  display: grid;
  gap: 10px;
}

.team-products-field-title {
  color: #1f2a4b;
  font-size: 15px;
  font-weight: 700;
}

.team-products-picker {
  border: 1px solid #d4ddfb;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.team-products-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.team-products-toolbar-copy {
  display: grid;
  gap: 4px;
}

.team-products-selection-summary {
  color: #5d6991;
  font-size: 12px;
  font-weight: 600;
}

.team-products-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-products-toolbar-btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.team-products-search {
  margin: 0;
}

.team-products-search input[type="search"] {
  width: 100%;
  border: 1px solid #d4ddfb;
  border-radius: 10px;
  background: #ffffff;
  min-height: 40px;
  padding: 9px 11px;
}

.team-products-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}

.team-product-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #d4ddfb;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  min-height: 64px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.team-product-option-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.team-product-option:hover {
  border-color: #c1cdff;
  background: #f7faff;
}

.team-product-option.is-selected {
  border-color: #5f6df6;
  background: rgba(82, 96, 243, 0.08);
  box-shadow: inset 0 0 0 1px rgba(82, 96, 243, 0.22);
}

.team-product-option.is-disabled {
  opacity: 0.72;
  cursor: not-allowed;
  background: #f5f7ff;
}

.team-product-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 16px;
  accent-color: #4f5eff;
}

.team-product-option-name {
  color: #2f3a62;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.team-product-option-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-product-option-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.team-product-option-status.is-active {
  background: #e8f7f0;
  color: #1e8b5c;
}

.team-product-option-status.is-inactive {
  background: #fff2dd;
  color: #99601a;
}

.team-product-option-price {
  color: #59689a;
  font-size: 12px;
  font-weight: 600;
}

.team-products-empty {
  margin: 0;
  padding: 2px 2px 0;
}

.team-photo-preview img {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #dbe2f8;
  background: #eef2ff;
}

@media (max-width: 1200px) {
  .team-filters-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .team-filters-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .team-filters-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-filters-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    flex-wrap: wrap;
  }

  .team-members-header h3 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .team-create-grid-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-home-base-inline-row,
  .team-home-base-inline-location-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-products-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-products-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .team-products-toolbar-actions {
    width: 100%;
  }

  .team-products-toolbar-btn {
    flex: 1 1 auto;
  }

  .team-login-access-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .team-login-access-actions {
    justify-content: flex-start;
  }

  .team-create-actions {
    justify-content: stretch;
  }

  .team-create-actions .btn {
    flex: 1 1 auto;
  }

  .team-service-provider-toggle strong {
    font-size: 18px;
  }

  .team-members-actions,
  .team-filters-actions {
    width: 100%;
  }

  .team-editor-modal {
    width: min(100%, 100%);
    padding: 18px;
  }

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

  .team-editor-grid-address {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .team-editor-grid-compact {
    grid-template-columns: minmax(0, 1fr);
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 9px;
  border-bottom: 1px solid #e8ecff;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.drag-handle-cell {
  width: 34px;
}

.drag-handle {
  display: inline-block;
  color: #7e88ad;
  cursor: grab;
  user-select: none;
  font-weight: 700;
  letter-spacing: 0.04em;
}

tbody[data-nav-scope] tr[data-nav-item] {
  cursor: grab;
}

tbody[data-nav-scope] tr[data-nav-item].dragging {
  opacity: 0.55;
  background: #edf3ff;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
}

.badge.good {
  background: #dbf8ed;
  color: var(--good);
}

.badge.warn {
  background: #fff2d8;
  color: #b56f00;
}

.badge.bad {
  background: #ffe2e2;
  color: #bf2020;
}

.badge.neutral {
  background: #edf1ff;
  color: #5061cb;
}

.cards {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

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

.billing-shell {
  display: grid;
  gap: clamp(16px, 1.8vw, 24px);
  width: min(1240px, 100%);
  margin: 0 auto;
}

.referrals-shell {
  display: grid;
  gap: var(--workspace-section-gap);
}

.loyalty-shell {
  display: grid;
  gap: var(--workspace-section-gap);
}

.loyalty-hero-panel {
  position: relative;
  overflow: hidden;
  border-color: #c9d7ff;
  background:
    radial-gradient(120% 120% at 96% -20%, rgba(91, 119, 255, 0.22), transparent 50%),
    radial-gradient(120% 140% at -8% 118%, rgba(44, 197, 155, 0.12), transparent 52%),
    linear-gradient(145deg, #f6f9ff 0%, #ffffff 56%, #f3faff 100%);
}

.loyalty-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.loyalty-hero-head h3 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 26ch;
}

.loyalty-hero-note {
  margin: 9px 0 0;
  max-width: 68ch;
}

.loyalty-tabs-panel {
  border-style: solid;
  border-color: #c9d7ff;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.loyalty-program-tabs {
  margin-bottom: 0;
}

.loyalty-tab-copy {
  margin: 0;
}

.loyalty-metrics-panel {
  border-color: #c9d7ff;
  background:
    radial-gradient(120% 120% at 96% -20%, rgba(91, 119, 255, 0.2), transparent 50%),
    linear-gradient(145deg, #f7f9ff 0%, #ffffff 56%, #f5fbff 100%);
}

.referrals-hero-panel {
  position: relative;
  overflow: hidden;
  border-color: #c9d7ff;
  background:
    radial-gradient(120% 120% at 96% -20%, rgba(91, 119, 255, 0.26), transparent 50%),
    radial-gradient(120% 140% at -8% 118%, rgba(44, 197, 155, 0.16), transparent 52%),
    linear-gradient(145deg, #f6f9ff 0%, #ffffff 56%, #f3faff 100%);
}

.referrals-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.referrals-hero-head h3 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

.referrals-hero-note {
  margin: 9px 0 0;
  max-width: 62ch;
}

.referrals-cycle-badge {
  padding: 7px 11px;
  font-size: 11px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.referrals-metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.loyalty-health-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.referrals-metric {
  border-color: #d7dfff;
  background: rgba(255, 255, 255, 0.94);
}

.referrals-metric strong {
  font-size: 30px;
  color: #263470;
}

.referrals-create-panel {
  border-style: dashed;
  border-color: #c7d4ff;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.referrals-readonly-panel {
  border-style: solid;
}

.referrals-create-form {
  grid-template-columns: minmax(250px, 1.2fr) minmax(180px, 1fr) auto auto;
  margin-bottom: 8px;
}

.referrals-create-form .btn {
  justify-self: start;
}

.referrals-create-random-btn {
  min-width: 116px;
}

.referrals-create-submit-btn {
  min-width: 148px;
}

.referrals-codes-panel,
.referrals-referees-panel {
  overflow: hidden;
}

.referrals-table {
  min-width: 980px;
}

.referrals-table th {
  background: #f4f7ff;
}

.referrals-table td {
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: middle;
}

.referrals-code-name,
.referrals-referee-name {
  font-weight: 700;
  color: #2b3868;
}

.referrals-code-meta {
  margin-top: 2px;
  color: #6e7aa1;
  font-size: 12px;
}

.referrals-actions {
  justify-content: flex-end;
}

.referrals-actions .btn {
  min-width: 94px;
}

.referrals-delete-btn {
  color: #8d2230;
  border-color: #e8b9c1;
  background: #fff7f8;
}

.referrals-delete-btn:hover {
  background: #ffedf0;
}

.loyalty-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.loyalty-rule-explainer {
  margin-top: -2px;
  padding: 10px 12px;
  border: 1px dashed #c7d4ff;
  border-radius: 10px;
  background: #f8fbff;
}

.loyalty-referral-helper-list {
  display: grid;
  gap: 6px;
  margin-top: -2px;
  padding: 10px 12px;
  border: 1px dashed #c7d4ff;
  border-radius: 10px;
  background: #f8fbff;
}

.loyalty-referral-helper-list p {
  margin: 0;
}

.loyalty-table {
  min-width: 920px;
}

.loyalty-row-actions {
  justify-content: flex-end;
}

.loyalty-settings-summary {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.loyalty-settings-summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #d7dfff;
  background: rgba(255, 255, 255, 0.92);
}

.loyalty-settings-summary-item span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6d7ba1;
}

.loyalty-settings-form {
  max-width: 900px;
}

.loyalty-settings-toggle {
  margin-bottom: 0;
}

.loyalty-settings-actions {
  margin-top: 4px;
  justify-content: space-between;
}

@media (max-width: 1080px) {
  .loyalty-hero-head,
  .referrals-hero-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .referrals-cycle-badge {
    white-space: normal;
  }

  .referrals-create-form {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 780px) {
  .referrals-create-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .referrals-create-form .btn {
    width: 100%;
  }

  .referrals-actions {
    justify-content: flex-start;
  }

  .loyalty-row-actions {
    justify-content: flex-start;
  }

  .loyalty-settings-actions {
    justify-content: flex-start;
  }

  .loyalty-table {
    min-width: 760px;
  }

  .referrals-table {
    min-width: 840px;
  }

  .referrals-metric strong {
    font-size: 26px;
  }
}

.billing-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.billing-panel-head h3 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.billing-kicker {
  margin: 0 0 6px;
  color: #4b5ea5;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.billing-membership-panel {
  position: relative;
  overflow: hidden;
  border-color: #c2d2ff;
  background:
    radial-gradient(130% 110% at 104% -24%, rgba(96, 113, 255, 0.24), transparent 52%),
    radial-gradient(120% 130% at -10% 124%, rgba(28, 188, 151, 0.14), transparent 54%),
    linear-gradient(145deg, #f7f9ff 0%, #ffffff 56%, #f1f6ff 100%);
}

.billing-membership-panel::after {
  content: "";
  position: absolute;
  top: -64px;
  right: -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(125, 135, 255, 0.28) 0%, rgba(125, 135, 255, 0) 72%);
  pointer-events: none;
}

.billing-membership-badge {
  font-size: 12px;
  padding: 7px 12px;
}

.billing-membership-flags {
  justify-content: flex-end;
  gap: 10px;
}

.billing-upgrade-trigger {
  min-height: 34px;
  padding-inline: 14px;
  border-color: #bacdff;
  background:
    radial-gradient(130% 130% at 100% -28%, rgba(99, 117, 255, 0.16), transparent 60%),
    linear-gradient(155deg, #f6f9ff 0%, #edf3ff 100%);
  color: #3249b7;
  box-shadow: 0 8px 16px rgba(63, 83, 195, 0.14);
}

.billing-upgrade-trigger:hover {
  background:
    radial-gradient(130% 130% at 100% -28%, rgba(99, 117, 255, 0.2), transparent 60%),
    linear-gradient(155deg, #edf2ff 0%, #e5edff 100%);
}

.billing-metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(182px, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}

.billing-metric {
  border-color: #c7d6ff;
  background: linear-gradient(170deg, #ffffff 0%, #f2f7ff 100%);
  box-shadow: 0 10px 24px rgba(48, 67, 157, 0.09);
}

.billing-metric h4 {
  color: #58689f;
  letter-spacing: 0.06em;
}

.billing-metric strong {
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.billing-metric-plan strong,
.billing-metric-price strong {
  color: #22326f;
}

.billing-metric-price {
  background:
    radial-gradient(100% 120% at 100% -16%, rgba(92, 111, 255, 0.2), transparent 58%),
    linear-gradient(170deg, #ffffff 0%, #eff5ff 100%);
}

.billing-metric-price strong {
  font-size: clamp(27px, 2.3vw, 40px);
}

.billing-plan-note {
  margin-top: 2px;
  max-width: 82ch;
  line-height: 1.6;
}

.billing-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 10px;
}

.billing-insight-card {
  border: 1px solid #cad8ff;
  border-radius: 12px;
  padding: 12px;
  background:
    radial-gradient(110% 120% at 100% -24%, rgba(90, 109, 255, 0.14), transparent 56%),
    linear-gradient(155deg, #ffffff 0%, #f4f8ff 100%);
}

.billing-insight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.billing-insight-percent {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a5f9d;
}

.billing-insight-value {
  margin: 2px 0 8px;
  color: #1e2d64;
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 800;
  line-height: 1.2;
}

.billing-insight-copy {
  margin: 6px 0 0;
}

.billing-usage-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e5ecff;
  overflow: hidden;
}

.billing-usage-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5d6eff 0%, #37caa3 100%);
}

.billing-activation-banner {
  margin-top: 14px;
  border: 1px solid #cad6ff;
  border-radius: 14px;
  background: linear-gradient(130deg, #eef3ff 0%, #f8faff 72%);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.billing-activation-title {
  margin: 0 0 3px;
  color: #2c3c7e;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

.billing-activation-copy {
  margin: 0;
  color: #4e5d90;
  font-size: 14px;
}

.dashboard-activation-panel {
  border-color: #cfd8ff;
  background:
    radial-gradient(120% 140% at 50% -18%, rgba(96, 118, 255, 0.18), transparent 54%),
    radial-gradient(100% 130% at 10% 120%, rgba(63, 202, 163, 0.12), transparent 52%),
    linear-gradient(145deg, #f7f9ff 0%, #ffffff 72%);
}

.dashboard-mobile-quick-actions {
  display: none;
}

.dashboard-activation-notice {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding: 10px 6px;
}

.dashboard-activation-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #cbd6ff;
  background: rgba(255, 255, 255, 0.9);
  color: #3a4fc1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-activation-notice h3 {
  margin: 0;
  color: #1f2d57;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
}

.dashboard-activation-copy {
  max-width: 660px;
  margin: 0;
  color: #53648f;
  font-size: 16px;
  line-height: 1.6;
}

.dashboard-activation-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.dashboard-activation-meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #d8e0ff;
  background: rgba(255, 255, 255, 0.78);
  color: #41527f;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-activation-actions {
  display: flex;
  justify-content: center;
}

.dashboard-activation-actions .btn {
  min-width: 220px;
}

.billing-payment-panel {
  border-color: #c8d7ff;
  background:
    radial-gradient(120% 120% at 104% -26%, rgba(98, 116, 255, 0.16), transparent 56%),
    linear-gradient(145deg, #ffffff 0%, #f6f9ff 100%);
}

.billing-payment-panel-readonly {
  background: linear-gradient(145deg, #ffffff 0%, #f7faff 100%);
}

.billing-security-badge {
  font-size: 11px;
  padding: 5px 10px;
}

.billing-payment-intro {
  margin: 2px 0 12px;
  max-width: 82ch;
  line-height: 1.6;
}

.billing-method-card {
  border: 1px solid #d7e1ff;
  border-radius: 12px;
  background: #f6f9ff;
  padding: 12px 13px;
  margin-bottom: 0;
}

.billing-method-card-hero {
  border-color: #c4d4ff;
  background:
    radial-gradient(110% 120% at 95% -24%, rgba(99, 116, 255, 0.2), transparent 54%),
    linear-gradient(145deg, #f8faff 0%, #edf3ff 100%);
  box-shadow: 0 12px 24px rgba(52, 72, 171, 0.09);
}

.billing-method-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.billing-method-label {
  margin: 0 0 4px;
  color: #6070a4;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.billing-method-value {
  margin: 0;
  color: #1c2a61;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.1;
  font-weight: 800;
}

.billing-method-purpose {
  font-size: 11px;
  padding: 5px 10px;
}

.billing-method-contact {
  margin: 6px 0 0;
}

.billing-payment-actions {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.billing-payment-actions.is-paired {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.billing-payment-actions .btn {
  min-height: 40px;
  padding-inline: 18px;
  width: 100%;
  justify-content: center;
}

.billing-cancel-btn {
  border-color: #f0c6d4;
  background: #fff7fb;
  color: #b92f62;
}

.billing-cancel-btn:hover {
  background: #ffeef6;
}

.billing-payment-form {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 0;
}

.billing-payment-form .billing-field-contact {
  grid-column: span 2;
}

.billing-payment-submit {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.billing-payment-submit .btn {
  min-height: 42px;
  padding-inline: 20px;
}

.billing-security-note {
  margin-top: 12px;
}

.billing-payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.2fr);
  gap: 12px;
  align-items: start;
}

.billing-method-card-compact {
  align-self: start;
  min-height: 0;
  height: fit-content;
  padding: 7px 9px;
  display: grid;
  gap: 3px;
}

.billing-method-card-compact .billing-method-top {
  align-items: center;
}

.billing-method-card-compact .billing-method-value {
  font-size: clamp(12px, 0.95vw, 17px);
  line-height: 1.15;
}

.billing-method-card-compact .billing-method-contact {
  margin-top: 0;
}

.billing-payment-actions-card {
  border: 1px solid #cfe0ff;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 100% -28%, rgba(93, 111, 255, 0.16), transparent 58%),
    linear-gradient(155deg, #ffffff 0%, #f5f9ff 100%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}

.billing-payment-actions-card .muted-note {
  margin: 0;
}

.billing-payg-wallet-card {
  border: 1px solid #ccdaff;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 100% -24%, rgba(72, 207, 165, 0.12), transparent 56%),
    linear-gradient(160deg, #ffffff 0%, #f3fbff 100%);
  padding: 10px 11px;
  display: grid;
  gap: 4px;
}

.billing-payg-wallet-value {
  margin: 0;
  color: #1e366f;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.08;
  font-weight: 800;
}

.billing-payg-wallet-meta {
  margin: 0;
}

.billing-payg-wallet-welcome {
  display: grid;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid #d8e4ff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.billing-payg-wallet-welcome-badge {
  width: fit-content;
}

.billing-payg-wallet-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.billing-payg-wallet-stat {
  appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid #cfe0ff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  padding: 7px 8px;
  display: grid;
  gap: 2px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.billing-payg-wallet-stat:hover {
  border-color: #8eb0ff;
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

.billing-payg-wallet-stat:focus-visible {
  outline: none;
  border-color: #5977ff;
  box-shadow: 0 0 0 2px rgba(89, 119, 255, 0.22);
}

.billing-payg-wallet-stat span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #5f6f9c;
}

.billing-payg-wallet-stat strong {
  color: #1e366f;
  font-size: 14px;
  line-height: 1.2;
}

.billing-payg-topup-btn {
  border-color: #b9d7cc;
  background: linear-gradient(150deg, #f4fffb 0%, #ecf8ff 100%);
  color: #235e58;
}

.billing-payg-topup-btn:hover {
  background: linear-gradient(150deg, #eafbf5 0%, #e4f3ff 100%);
}

.billing-invoices-panel {
  border-color: #c7d5ff;
  background:
    radial-gradient(120% 120% at 104% -24%, rgba(94, 112, 255, 0.14), transparent 56%),
    linear-gradient(145deg, #ffffff 0%, #f6f9ff 100%);
}

.billing-history-note {
  max-width: 72ch;
}

.billing-history-preview {
  margin-top: 12px;
  border: 1px solid #cfddff;
  border-radius: 12px;
  padding: 11px 12px;
  background:
    radial-gradient(120% 120% at 100% -26%, rgba(95, 112, 255, 0.14), transparent 56%),
    linear-gradient(160deg, #ffffff 0%, #f4f8ff 100%);
}

.billing-history-preview ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.billing-history-preview li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 9px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.72);
}

.billing-history-preview li span {
  color: #5d6b98;
  font-size: 12px;
}

.billing-history-preview li strong {
  color: #22316a;
  font-size: 13px;
}

.billing-history-pagination,
.billing-invoices-modal-pagination {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.billing-history-pagination .listing-results-summary,
.billing-invoices-modal-pagination .listing-results-summary,
.listing-results-footer .listing-results-summary {
  order: 1;
  margin-right: auto;
}

.billing-history-pagination .listing-results-pagination,
.billing-invoices-modal-pagination .listing-results-pagination,
.listing-results-footer .listing-results-pagination {
  order: 2;
  margin-left: auto;
}

.billing-invoices-modal {
  width: min(980px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-color: #cfd9ff;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.billing-invoices-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.billing-invoices-modal-head h3 {
  margin: 0;
  font-size: clamp(26px, 2.3vw, 36px);
}

.billing-invoices-intro {
  margin: 4px 0 0;
  color: #5c688f;
}

.billing-invoices-table-wrap {
  border: 1px solid #d9e2ff;
  border-radius: 12px;
  background: #ffffff;
}

.billing-invoices-table thead th {
  background: #f3f6ff;
}

.billing-invoices-table th,
.billing-invoices-table td {
  vertical-align: middle;
}

.billing-invoice-download-btn {
  min-height: 34px;
  padding: 7px 11px;
}

.billing-wallet-ledger-modal {
  width: min(1160px, calc(100% - 14px));
  padding: 18px;
  display: grid;
  gap: 12px;
  background:
    radial-gradient(115% 135% at 100% -35%, rgba(97, 124, 255, 0.12), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.billing-wallet-ledger-modal .billing-invoices-modal-head {
  margin-bottom: 0;
}

.billing-wallet-ledger-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.billing-wallet-ledger-filter.is-active {
  border-color: #8ea9ff;
  background: linear-gradient(150deg, #eef3ff 0%, #e6edff 100%);
  color: #2d4fe4;
}

.billing-wallet-ledger-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.billing-wallet-ledger-summary-card {
  border: 1px solid #d8e2ff;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.84);
  padding: 9px 10px;
  display: grid;
  gap: 2px;
}

.billing-wallet-ledger-summary-card span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: #6270a0;
}

.billing-wallet-ledger-summary-card strong {
  color: #1f3470;
  font-size: 20px;
  line-height: 1.1;
}

.billing-wallet-ledger-table-wrap {
  overflow: auto;
}

.billing-wallet-ledger-table th,
.billing-wallet-ledger-table td {
  white-space: nowrap;
  vertical-align: top;
}

.billing-wallet-ledger-table td:last-child {
  min-width: 220px;
  white-space: normal;
}

.billing-wallet-ledger-table tbody tr:hover {
  background: #f6f9ff;
}

.billing-wallet-ledger-listing {
  min-width: 240px;
  display: grid;
  gap: 3px;
}

.billing-wallet-ledger-listing-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: #1f3fbc;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  padding: 0;
  cursor: pointer;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.billing-wallet-ledger-listing-link:hover {
  color: #2f58ef;
  text-decoration-color: currentColor;
}

.billing-wallet-ledger-listing-link:focus-visible {
  outline: 2px solid rgba(79, 112, 244, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

.billing-wallet-ledger-listing-meta {
  color: #5f6f9b;
  font-size: 12px;
  line-height: 1.35;
}

.billing-wallet-ledger-listing-empty {
  color: #7b87ab;
}

.billing-wallet-ledger-amount {
  font-weight: 700;
}

.billing-wallet-ledger-amount.is-credit {
  color: #177253;
}

.billing-wallet-ledger-amount.is-debit {
  color: #b13a5b;
}

.billing-activation-modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-color: #cfd9ff;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.billing-activation-backdrop {
  overflow-y: auto;
  align-items: flex-start;
}

.billing-payg-topup-modal {
  width: min(900px, calc(100% - 28px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-color: #c8d7ff;
  background:
    radial-gradient(120% 135% at 100% -22%, rgba(67, 205, 162, 0.14), transparent 56%),
    radial-gradient(120% 140% at -4% -28%, rgba(91, 112, 255, 0.08), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.billing-payg-topup-modal-head {
  margin-bottom: 0;
}

.billing-payg-topup-head-copy h3 {
  margin: 0;
}

.billing-payg-topup-current {
  border: 1px solid #cfddff;
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(110% 130% at 100% -20%, rgba(67, 205, 162, 0.14), transparent 56%),
    radial-gradient(120% 150% at -8% 112%, rgba(91, 112, 255, 0.08), transparent 58%),
    linear-gradient(160deg, #ffffff 0%, #f2f9ff 100%);
  display: grid;
  gap: 10px;
}

.billing-payg-topup-current-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.billing-payg-topup-current-credits {
  margin: 0;
  color: #1f2f6c;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.05;
  font-weight: 800;
}

.billing-payg-topup-current-main .billing-upgrade-current-level-label {
  display: block;
  margin-bottom: 4px;
}

.billing-payg-topup-estimated {
  border: 1px solid #cfe0ff;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  text-align: right;
  min-width: 148px;
  box-shadow: 0 10px 24px rgba(81, 115, 212, 0.08);
}

.billing-payg-topup-estimated span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: #61709b;
}

.billing-payg-topup-estimated strong {
  font-size: 28px;
  line-height: 1;
  color: #1f3772;
}

.billing-payg-topup-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.billing-payg-topup-balance-chip {
  border: 1px solid #d3e1ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  padding: 9px 10px;
  display: grid;
  gap: 2px;
}

.billing-payg-topup-balance-chip span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: #5f6f9c;
}

.billing-payg-topup-balance-chip strong {
  color: #1e366f;
  font-size: 14px;
  line-height: 1.2;
}

.billing-payg-topup-form {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.billing-payg-topup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.billing-payg-topup-entry-card,
.billing-payg-topup-live-card {
  border: 1px solid #d5e1ff;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  padding: 14px;
  display: grid;
  gap: 12px;
  box-shadow: 0 12px 28px rgba(81, 115, 212, 0.06);
}

.billing-payg-topup-live-card {
  align-self: stretch;
  background:
    radial-gradient(120% 130% at 100% -12%, rgba(67, 205, 162, 0.09), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 255, 0.98) 100%);
}

.billing-payg-topup-live-card .muted-note {
  margin: 0;
}

.billing-payg-topup-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.billing-payg-topup-section-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: #4c5f99;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.billing-payg-topup-section-copy {
  margin: 6px 0 0;
  color: #5c6c98;
  font-size: 13px;
  line-height: 1.45;
}

.billing-payg-topup-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid #d7e3ff;
  border-radius: 999px;
  background: rgba(91, 112, 255, 0.08);
  color: #3d56c0;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.billing-payg-topup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.billing-payg-topup-fields label {
  margin: 0;
  display: grid;
  gap: 6px;
}

.billing-payg-topup-live-quote {
  margin: 0;
  color: #1f2f6c;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
}

.billing-payg-topup-summary-list {
  display: grid;
  gap: 8px;
}

.billing-payg-topup-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(210, 224, 255, 0.85);
}

.billing-payg-topup-summary-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.billing-payg-topup-summary-row:last-child {
  padding-bottom: 0;
}

.billing-payg-topup-summary-row span {
  color: #60709b;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}

.billing-payg-topup-summary-row strong {
  color: #21356f;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  text-align: right;
}

.billing-payg-topup-footnote {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed #d7e3ff;
}

.billing-payg-topup-provider-note {
  margin: 0;
  border-radius: 12px;
  padding: 10px 11px;
}

.billing-payg-topup-provider-lock,
.billing-payg-topup-provider-empty {
  margin: 0;
}

.billing-payg-topup-form .billing-provider-note {
  margin-bottom: 0;
}

.billing-payg-topup-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px dashed #d7e3ff;
  padding-top: 6px;
}

.billing-payg-topup-actions {
  margin-top: 0;
  justify-content: flex-end;
}

.billing-upgrade-modal {
  width: min(1120px, calc(100% - 24px));
  max-height: calc(100vh - 52px);
  overflow: auto;
  padding: 14px;
  display: grid;
  gap: 8px;
  border-color: #c8d7ff;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 98% -18%, rgba(97, 116, 255, 0.14), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 20px 44px rgba(25, 42, 92, 0.2);
}

.billing-upgrade-modal.is-payg {
  width: min(1120px, calc(100% - 24px));
}

.billing-upgrade-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #d7e2ff;
}

.billing-upgrade-modal-head h3 {
  margin: 0;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.05;
}

.billing-upgrade-modal .billing-invoices-intro {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.billing-upgrade-modal-head .btn {
  min-height: 38px;
  padding: 8px 14px;
}

.billing-upgrade-current {
  border: 1px solid #cfddff;
  border-radius: 12px;
  padding: 10px 12px;
  background:
    radial-gradient(110% 130% at 100% -24%, rgba(97, 116, 255, 0.12), transparent 58%),
    linear-gradient(160deg, #ffffff 0%, #f3f8ff 100%);
  display: grid;
  gap: 5px;
}

.billing-upgrade-current-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.billing-upgrade-current-level-wrap {
  display: grid;
  gap: 1px;
}

.billing-upgrade-current-level-label {
  color: #5670bc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.billing-upgrade-current-main strong {
  color: #1f2f6c;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.1;
}

.billing-upgrade-current-main span {
  color: #3347a7;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 700;
}

.billing-upgrade-current .muted-note {
  margin: 0;
  max-width: none;
  font-size: 11px;
  line-height: 1.35;
}

.billing-upgrade-membership-current {
  gap: 2px;
}

.billing-upgrade-membership-current .billing-method-label {
  margin-bottom: 0;
}

.billing-upgrade-pricing-note {
  margin: 0;
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: #2f4eb0;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-wrap: nowrap;
}

.billing-upgrade-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.billing-upgrade-plan-card {
  border: 1px solid #cddcff;
  border-radius: 14px;
  padding: 10px 10px 8px;
  background:
    radial-gradient(120% 130% at 100% -24%, rgba(95, 112, 255, 0.1), transparent 58%),
    linear-gradient(165deg, #ffffff 0%, #f6f9ff 100%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 8px 20px rgba(44, 67, 140, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  height: auto;
}

.billing-upgrade-plan-card:hover {
  border-color: #95b0ff;
  box-shadow: 0 14px 26px rgba(44, 67, 140, 0.16);
  transform: translateY(-2px);
}

.billing-upgrade-plan-card.is-current {
  border-color: #8aa6ff;
  box-shadow: 0 0 0 1px rgba(95, 118, 255, 0.16), 0 10px 18px rgba(44, 67, 140, 0.12);
}

.billing-upgrade-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.billing-upgrade-plan-name {
  margin: 0;
  color: #1f2f6a;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  line-height: 0.98;
}

.billing-upgrade-plan-mode {
  margin: 0;
  color: #5f72a9;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.billing-upgrade-plan-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.billing-upgrade-plan-price {
  margin: 0;
  color: #223582;
  font-size: clamp(28px, 2.25vw, 36px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.billing-upgrade-plan-standard-under-price {
  margin: 0;
  color: #6d81b9;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
}

.billing-upgrade-plan-current-badge {
  border-color: #8ea6ff;
  background: #ecf1ff;
  color: #3552b9;
  font-size: 10px;
}

.billing-upgrade-plan-discount-badge {
  width: fit-content;
  padding: 3px 8px;
  font-size: 10px;
}

.billing-upgrade-plan-meta,
.billing-upgrade-plan-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.28;
}

.billing-upgrade-plan-benefits {
  display: grid;
  gap: 2px;
}

.billing-upgrade-plan-benefits p {
  margin: 0;
  position: relative;
  padding-left: 20px;
  color: #4d629e;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
}

.billing-upgrade-plan-card .muted-note {
  margin: 0;
  line-height: 1.25;
}

.billing-upgrade-plan-benefits p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(160deg, #4d5cff 0%, #6677ff 100%);
  box-shadow: 0 0 0 2px rgba(94, 116, 255, 0.14);
}

.billing-enterprise-estimator {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  border-top: 1px dashed #cfd9ff;
  padding-top: 8px;
}

.billing-enterprise-heading {
  margin: 0;
  color: #4a61af;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.billing-enterprise-estimate-label {
  margin: 0;
  color: #5f6f9c;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.billing-enterprise-estimate-label strong {
  color: #33489f;
}

.billing-enterprise-estimate-row {
  display: grid;
  gap: 2px;
}

.billing-enterprise-estimate-standard {
  margin: 0;
  color: #7288bf;
  font-size: 11px;
  line-height: 1.3;
}

.billing-enterprise-estimate-meta {
  margin: 0;
  color: #556a9f;
  font-size: 11px;
  line-height: 1.35;
}

.billing-enterprise-slider {
  --billing-enterprise-slider-progress: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  height: 18px;
  background: transparent;
}

.billing-enterprise-slider::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #5163ff 0%,
    #5f74ff var(--billing-enterprise-slider-progress),
    #dbe4ff var(--billing-enterprise-slider-progress),
    #dbe4ff 100%
  );
  border: 1px solid #c6d6ff;
}

.billing-enterprise-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #5b6dff;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(67, 87, 176, 0.35);
  margin-top: -5px;
}

.billing-enterprise-slider::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: #dbe4ff;
  border: 1px solid #c6d6ff;
}

.billing-enterprise-slider::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5163ff 0%, #5f74ff 100%);
}

.billing-enterprise-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #5b6dff;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(67, 87, 176, 0.35);
}

.billing-enterprise-slider:focus-visible {
  outline: 2px solid rgba(77, 91, 255, 0.35);
  outline-offset: 2px;
}

.billing-upgrade-plan-card .row-actions {
  margin-top: 2px;
}

.billing-upgrade-plan-card .btn {
  width: 100%;
  justify-content: center;
  min-height: 38px;
  font-size: 15px;
  border-radius: 12px;
}

.billing-upgrade-empty {
  margin-top: 2px;
  border: 1px dashed #c8d9ff;
  border-radius: 12px;
  padding: 14px;
  background: #f8faff;
}

.billing-upgrade-empty p {
  margin: 0;
  color: #243471;
  font-weight: 700;
}

.billing-upgrade-empty .muted-note {
  margin-top: 6px;
  font-weight: 500;
}

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

.billing-activation-intro {
  margin-bottom: 16px;
}

.invoice-page {
  min-height: 100vh;
  background: #f2f5ff;
}

.invoice-shell {
  width: min(1120px, calc(100% - 28px));
  margin: 26px auto;
}

.invoice-root {
  display: grid;
  gap: 12px;
}

.invoice-loading {
  border: 1px solid #d5defd;
  border-radius: 14px;
  background: #ffffff;
  color: #667092;
  padding: 28px;
  text-align: center;
}

.invoice-card {
  border-color: #d1dbff;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  display: grid;
  gap: 16px;
}

.invoice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e5eafe;
  padding-bottom: 14px;
}

.invoice-kicker {
  margin: 0;
  font-weight: 700;
  color: #5f6aa0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.invoice-head h1 {
  margin: 3px 0 0;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.06;
}

.invoice-brand-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.invoice-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  border: 0;
  background: transparent;
  padding: 0;
}

.invoice-brand-fallback {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #d9e2ff;
  background: #eef3ff;
  color: #304686;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.invoice-brand-name {
  color: #2a3f7b;
  font-weight: 700;
  font-size: 15px;
}

.invoice-subtitle {
  margin: 6px 0 0;
  color: #617096;
  font-weight: 600;
}

.invoice-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.invoice-notice {
  margin: 0;
  border: 1px solid #cfe0ff;
  border-radius: 10px;
  background: #f2f7ff;
  color: #3a4f82;
  padding: 10px 12px;
}

.invoice-notice.is-error {
  border-color: #f4c9d0;
  background: #fff3f6;
  color: #8f2747;
}

.invoice-error {
  margin: 0;
  color: #7a2f4a;
}

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

.invoice-meta-card {
  border: 1px solid #dce4ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
}

.invoice-meta-card h4 {
  margin: 0;
  font-size: 13px;
  color: #5f6e98;
}

.invoice-meta-card p {
  margin: 6px 0 0;
  color: #1e2a4e;
  font-weight: 600;
}

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

.invoice-party-card {
  border: 1px solid #dce4ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
}

.invoice-party-card h4 {
  margin: 0 0 7px;
  color: #5f6e98;
  font-size: 13px;
}

.invoice-party-card p {
  margin: 0;
}

.invoice-property-address {
  display: grid;
  gap: 3px;
}

.invoice-property-line {
  margin: 0;
}

.invoice-customer-team {
  margin-top: 3px !important;
  margin-bottom: 4px !important;
  color: #5c6892;
  font-weight: 600;
}

.invoice-items-wrap {
  border: 1px solid #dfe5fb;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.invoice-items-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.invoice-items-table thead th {
  padding: 11px 18px;
  background: #f8faff;
  border-bottom: 1px solid #e7ecfb;
  color: #7180a7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.invoice-items-table thead .invoice-items-col-qty {
  text-align: center;
}

.invoice-items-table thead .invoice-items-col-price,
.invoice-items-table thead .invoice-items-col-total {
  text-align: right;
}

.invoice-items-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid #edf1fb;
  color: #233053;
  vertical-align: top;
}

.invoice-items-table tbody tr:last-child td {
  border-bottom: none;
}

.invoice-items-cell-item {
  color: #223055;
  font-weight: 500;
  line-height: 1.45;
}

.invoice-items-item-name {
  color: inherit;
  font-weight: 500;
}

.invoice-items-item-description {
  margin-top: 4px;
  color: #6b7a9f;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.invoice-items-col-qty,
.invoice-items-cell-qty {
  width: 72px;
  text-align: center;
  color: #5c6b93;
  font-variant-numeric: tabular-nums;
}

.invoice-items-col-price,
.invoice-items-col-total,
.invoice-items-cell-money {
  width: 160px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.invoice-items-cell-money.is-total {
  font-weight: 600;
  color: #1f2c52;
}

.invoice-items-table.has-no-quantity .invoice-items-col-total,
.invoice-items-table.has-no-quantity .invoice-items-cell-money.is-total {
  width: 146px;
}

.invoice-items-table.has-no-quantity .invoice-items-col-item,
.invoice-items-table.has-no-quantity .invoice-items-cell-item {
  width: auto;
}

.pricing-plan-price-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  line-height: 1.1;
}

.pricing-plan-price-stack-inline {
  align-items: flex-start;
}

.pricing-plan-price-original {
  color: #7b88ab;
  font-size: 0.84em;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
}

.pricing-plan-price-current {
  color: inherit;
  font-weight: 800;
}

.invoice-items-cell-money .pricing-plan-price-stack,
.listing-order-item-price .pricing-plan-price-stack,
.order-payment-item-total .pricing-plan-price-stack,
.photographer-order-money .pricing-plan-price-stack,
.cp-product-price .pricing-plan-price-stack {
  align-items: flex-end;
}

.invoice-items-cell-money .pricing-plan-price-stack {
  width: 100%;
}

.invoice-items-cell-money .pricing-plan-price-original {
  font-size: 12px;
}

.invoice-items-cell-money .pricing-plan-price-current {
  font-size: inherit;
}

.invoice-totals {
  border-top: 1px solid #e4e9ff;
  padding-top: 12px;
  margin-left: auto;
  min-width: min(420px, 100%);
  display: grid;
  gap: 6px;
}

.invoice-totals p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #4d5d87;
}

.invoice-totals p strong {
  color: #202d52;
}

.invoice-deposit {
  border-top: 1px solid #e4e9ff;
  padding-top: 12px;
  margin-left: auto;
  margin-top: 8px;
  min-width: min(420px, 100%);
  display: grid;
  gap: 6px;
}

.invoice-deposit h4 {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6274a5;
}

.invoice-deposit p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #4d5d87;
}

.invoice-deposit p strong {
  color: #202d52;
}

.invoice-footer-actions {
  border-top: 1px solid #e5eafe;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.invoice-footer-actions-main,
.invoice-footer-actions-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invoice-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.invoice-status-pill.is-paid {
  background: #dff6ea;
  color: #0f7a4f;
}

.invoice-status-pill.is-partial {
  background: #fef2de;
  color: #956500;
}

.invoice-status-pill.is-unpaid {
  background: #fee8ea;
  color: #b83640;
}

.invoice-status-pill.is-canceled {
  background: #efe9f1;
  color: #6f4d7d;
}

.invoice-pay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(18, 26, 51, 0.45);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: 18px;
}

.invoice-pay-modal {
  width: min(560px, 100%);
  border: 1px solid #d3dcff;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 22px 60px rgba(18, 29, 65, 0.24);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.invoice-pay-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.invoice-pay-modal-head h3 {
  margin: 0;
  color: #1e2a4e;
}

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

.invoice-pay-form label {
  display: grid;
  gap: 6px;
  color: #56618b;
  font-weight: 600;
}

.invoice-pay-form input,
.invoice-pay-form select,
.invoice-pay-form textarea {
  width: 100%;
}

.invoice-pay-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.invoice-pay-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.invoice-pay-checkout-status {
  border: 1px solid #d7e2ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.invoice-pay-checkout-status p {
  margin: 0;
  color: #45588f;
}

.invoice-pay-checkout-status.is-error {
  border-color: #f0c3cf;
  background: #fff6f8;
}

.invoice-pay-checkout-status.is-error p {
  color: #a13e57;
}

.invoice-pay-checkout-kicker {
  color: #2d3f84;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.invoice-pay-modal.is-checkout {
  width: min(720px, 100%);
}

.invoice-pay-checkout-panel {
  display: grid;
  gap: 12px;
}

.invoice-pay-checkout-copy {
  display: grid;
  gap: 6px;
}

.invoice-pay-checkout-subtitle,
.invoice-pay-checkout-amount {
  margin: 0;
  color: #45588f;
}

.invoice-pay-checkout-amount strong {
  color: #1e2a4e;
}

.invoice-pay-embedded {
  border: 1px solid #d7e2ff;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  min-height: 560px;
}

.invoice-pay-embedded-frame {
  min-height: 560px;
}

.invoice-pay-checkout-footnote {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed #d8e1ff;
  border-radius: 12px;
  background: #f8fbff;
  color: #45588f;
}

@media (max-width: 900px) {
  .invoice-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-party-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .invoice-shell {
    width: min(1120px, calc(100% - 16px));
    margin: 12px auto 18px;
  }

  .invoice-head {
    flex-direction: column;
  }

  .invoice-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .invoice-totals {
    min-width: 0;
    width: 100%;
  }

  .invoice-deposit {
    min-width: 0;
    width: 100%;
  }

  .invoice-footer-actions {
    flex-wrap: wrap;
  }

  .invoice-brand-line {
    margin-bottom: 6px;
  }

  .invoice-brand-logo,
  .invoice-brand-fallback {
    width: 34px;
    height: 34px;
  }

  .invoice-pay-modal {
    padding: 12px;
  }

  .invoice-pay-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .invoice-pay-embedded,
  .invoice-pay-embedded-frame {
    min-height: 460px;
  }
}

@media print {
  .invoice-page {
    background: #ffffff;
  }

  .invoice-shell {
    width: 100%;
    margin: 0;
  }

  .invoice-head-actions,
  .invoice-footer-actions,
  .invoice-notice {
    display: none !important;
  }
}

.billing-modal-current-method {
  border: 1px solid #d5e0ff;
  border-radius: 12px;
  background: #f5f8ff;
  padding: 12px;
  margin-bottom: 12px;
}

.billing-provider-note {
  border: 1px solid #d7e2ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  margin-bottom: 14px;
}

.billing-provider-title {
  margin: 0 0 4px;
  color: #2d3f84;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.billing-provider-copy {
  margin: 0;
  color: #4f5d8d;
}

.billing-provider-note .row-actions {
  margin-top: 10px;
}

.billing-provider-managed-shell {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.billing-provider-managed-status {
  border: 1px solid #d7e2ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.billing-provider-managed-status p {
  margin: 0;
  color: #435483;
}

.billing-provider-managed-status.is-error {
  border-color: #f1c2cf;
  background: #fff6f8;
}

.billing-provider-managed-status.is-error p {
  color: #a33e57;
}

.billing-payment-method-embedded,
.billing-payment-method-square {
  border: 1px solid #d7e2ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

.billing-payment-method-embedded {
  min-height: 620px;
}

.billing-payment-method-embedded-frame {
  min-height: 620px;
}

.billing-payment-method-embedded-frame iframe {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
}

.billing-payment-method-square {
  min-height: 170px;
  padding: 14px;
}

.billing-provider-managed-actions {
  justify-content: flex-end;
}

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

.billing-provider-managed-footnote {
  margin: 0;
  grid-column: 1 / -1;
  border: 1px dashed #d4defd;
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px 10px;
}

.billing-activation-form .row-actions {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .billing-activation-modal {
    max-height: calc(100vh - 24px);
  }

  .billing-payment-method-embedded,
  .billing-payment-method-embedded-frame,
  .billing-payment-method-embedded-frame iframe {
    min-height: 560px;
  }

  .billing-payment-form .billing-field-contact {
    grid-column: span 1;
  }

  .billing-payment-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-membership-flags {
    justify-content: flex-start;
  }

  .billing-insight-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-activation-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-activation-banner .btn {
    width: 100%;
  }

  .dashboard-activation-notice {
    max-width: 100%;
    padding-inline: 0;
  }

  .dashboard-activation-notice h3 {
    font-size: clamp(24px, 7vw, 32px);
  }

  .dashboard-activation-copy {
    font-size: 15px;
  }

  .dashboard-activation-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .dashboard-activation-actions {
    width: 100%;
  }

  .dashboard-activation-actions .btn {
    width: 100%;
  }

  .dashboard-appointments-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-activation-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-payg-topup-layout,
  .billing-payg-topup-balance-grid,
  .billing-payg-topup-fields,
  .billing-payg-topup-note-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-payg-topup-current-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-payg-topup-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-payg-topup-estimated {
    width: 100%;
    text-align: left;
  }

  .billing-payg-wallet-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .billing-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-panel-head h3 {
    font-size: clamp(22px, 7vw, 30px);
  }

  .billing-metrics-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-metric strong {
    font-size: clamp(22px, 7vw, 30px);
  }

  .billing-payg-wallet-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-insight-value {
    font-size: clamp(18px, 6.4vw, 24px);
  }

  .billing-method-value {
    font-size: 15px;
  }

  .billing-method-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-payment-submit {
    grid-column: 1 / -1;
  }

  .billing-payment-submit .btn {
    width: 100%;
  }

  .billing-payment-actions .btn {
    width: 100%;
  }

  .billing-payment-actions.is-paired {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-payment-actions-card {
    padding: 11px;
  }

  .billing-payg-topup-modal {
    padding: 12px;
  }

  .billing-payg-topup-actions .btn {
    width: 100%;
  }

  .billing-invoices-modal-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-invoices-modal-head .btn {
    width: 100%;
  }

  .billing-upgrade-modal-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-upgrade-modal-head .btn {
    width: 100%;
  }

  .billing-wallet-ledger-filters {
    flex-direction: column;
  }

  .billing-wallet-ledger-filter {
    width: 100%;
  }

  .billing-wallet-ledger-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-wallet-ledger-modal {
    padding: 14px;
  }

  .billing-wallet-ledger-listing {
    min-width: 170px;
  }

  .billing-upgrade-current-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-upgrade-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.logo-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8faff;
  padding: 12px;
  margin-bottom: 12px;
  display: grid;
  gap: 12px;
}

.logo-preview {
  max-width: 220px;
  max-height: 90px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain;
  padding: 8px;
}

.logo-placeholder {
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
  max-width: 280px;
  background: #fff;
}

.platform-assets-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.platform-assets-note {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #d6dffd;
  border-radius: 10px;
  background: linear-gradient(180deg, #f3f6ff 0%, #eef3ff 100%);
  color: #415082;
  font-size: 13px;
  line-height: 1.5;
}

.platform-assets-note strong {
  color: #2f4294;
}

.platform-assets-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.platform-asset-card {
  border: 1px solid #d5defd;
  border-radius: 14px;
  background: #f8faff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.platform-asset-head {
  display: grid;
  gap: 4px;
}

.platform-asset-head h4 {
  margin: 0;
  font-size: 16px;
  color: #1f2b5d;
}

.platform-asset-head p {
  margin: 0;
}

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

.platform-asset-preview-shell {
  border: 1px solid #d5defd;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

.platform-asset-preview-shell.is-logo {
  min-height: 92px;
}

.platform-asset-preview-shell.is-square {
  min-height: 132px;
}

.platform-asset-preview-shell.is-landscape {
  min-height: 172px;
}

.platform-asset-preview {
  max-width: 100%;
  max-height: 210px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.platform-asset-placeholder {
  color: #67749c;
  font-size: 13px;
  text-align: center;
  max-width: 26ch;
}

.platform-asset-selected-file {
  margin: 0;
  min-height: 18px;
  color: #5f6d97;
  font-size: 12px;
}

.platform-asset-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.platform-asset-actions .btn,
.platform-asset-actions .platform-asset-choose-btn {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
  line-height: 1.2;
  justify-content: center;
}

.platform-asset-choose-btn {
  cursor: pointer;
}

.platform-asset-help {
  margin: 0;
}

.platform-smtp-test-shell {
  margin-top: 8px;
  border-top: 1px solid #e4eaff;
  padding-top: 12px;
  display: grid;
  gap: 8px;
}

.profile-avatar-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  margin-bottom: 12px;
}

.profile-avatar-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #232f56;
  margin-bottom: 10px;
}

.profile-avatar-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.profile-avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #dbe2f8;
  background: #eef2ff;
  flex: 0 0 56px;
}

.profile-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #3b4370;
}

.profile-avatar-actions {
  gap: 10px;
}

.profile-avatar-actions .btn {
  min-width: 84px;
}

.settings-brand-panel {
  display: grid;
  gap: 14px;
}

.settings-brand-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-brand-heading-copy h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
}

.settings-brand-heading-copy .muted-note {
  margin: 6px 0 0;
}

.settings-brand-pill-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-brand-logo-card {
  margin-bottom: 0;
  display: grid;
  gap: 10px;
}

.settings-brand-logo-note {
  margin: -4px 0 0;
}

.settings-brand-logo-form {
  justify-content: flex-start;
  gap: 12px;
}

.settings-brand-logo-form .logo-preview {
  max-width: 184px;
  max-height: 86px;
}

.settings-brand-logo-form .logo-placeholder {
  margin: 0;
}

.settings-brand-logo-actions {
  gap: 8px;
}

.settings-brand-form {
  gap: 12px;
}

.settings-brand-block {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.settings-brand-block-head {
  display: grid;
  gap: 4px;
}

.settings-brand-block-head h4 {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
}

.settings-brand-block-head .muted-note {
  margin: 0;
}

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

.settings-brand-grid label {
  margin-bottom: 0;
}

.settings-brand-field-wide {
  grid-column: 1 / -1;
}

.settings-brand-inline-note {
  margin: 0;
}

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

.settings-brand-theme-grid label {
  margin-bottom: 0;
}

.settings-brand-theme-hex-control {
  position: relative;
  margin-top: 6px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.settings-brand-theme-hex-swatch {
  width: 56px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  padding: 0;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.settings-brand-theme-hex-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-brand-theme-hex-input {
  margin-top: 0;
  height: 42px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.01em;
  flex: 1;
}

.settings-brand-theme-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.settings-brand-theme-grid--typography {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-brand-theme-preview {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--bg-soft);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.settings-brand-theme-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-brand-theme-preview h5 {
  margin: 0;
  font-size: 14px;
}

.settings-brand-theme-preview p {
  margin: 0;
  font-size: 12px;
}

.settings-brand-theme-preview-reset {
  white-space: nowrap;
}

.settings-brand-theme-preview-card {
  border: 1px solid var(--portal-preview-border, var(--line));
  border-radius: 10px;
  background: var(--portal-preview-surface, var(--panel));
  color: var(--portal-preview-text, var(--text));
  font-family: var(--portal-preview-font, inherit);
  font-size: var(--portal-preview-font-size, 14px);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.settings-brand-theme-preview-card strong {
  color: var(--portal-preview-heading, var(--text));
  font-family: var(--portal-preview-heading-font, inherit);
  font-size: 1.06em;
  line-height: 1.2;
}

.settings-brand-theme-preview-meta {
  color: var(--portal-preview-muted, var(--muted));
  font-size: 0.9em;
}

.settings-brand-theme-preview-pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--portal-preview-accent, var(--accent));
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.settings-brand-submit {
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.settings-brand-submit .btn {
  min-width: 260px;
}

.customer-portal-redesign {
  display: grid;
  gap: 14px;
}

.customer-portal-redesign-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customer-portal-redesign-board-head {
  align-items: flex-end;
}

.customer-portal-redesign-board-head > div {
  min-width: 0;
}

.customer-portal-redesign-save-btn {
  min-width: 240px;
  white-space: nowrap;
}

.customer-portal-redesign-form {
  margin-top: 12px;
  gap: 12px;
}

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

.customer-portal-redesign-grid label {
  margin-bottom: 0;
}

.customer-portal-redesign-field-wide {
  grid-column: 1 / -1;
}

.customer-portal-redesign-toggle {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.customer-portal-redesign-toggle input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
}

.customer-portal-redesign-toggle span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.customer-portal-redesign-toggle strong {
  font-size: 14px;
  color: #273153;
}

.customer-portal-redesign-toggle small {
  font-size: 12px;
  color: #6b7597;
  line-height: 1.35;
}

.customer-portal-redesign-url {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--bg-soft);
  padding: 10px 12px;
  display: grid;
  gap: 5px;
}

.customer-portal-redesign-url-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6371a3;
}

.customer-portal-redesign-url a {
  font-weight: 600;
}

.customer-portal-logins-table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.customer-portal-logins-table {
  min-width: 860px;
}

.customer-portal-logins-table th {
  padding: 8px 10px;
}

.customer-portal-logins-table td {
  padding: 8px 10px;
  line-height: 1.3;
}

.customer-portal-logins-table tbody td {
  vertical-align: middle;
}

.customer-portal-logins-table th:nth-child(1),
.customer-portal-logins-table td:nth-child(1) {
  width: 22%;
}

.customer-portal-logins-table th:nth-child(2),
.customer-portal-logins-table td:nth-child(2) {
  width: 24%;
}

.customer-portal-logins-table th:nth-child(3),
.customer-portal-logins-table td:nth-child(3) {
  width: 8%;
}

.customer-portal-logins-table th:nth-child(4),
.customer-portal-logins-table td:nth-child(4) {
  width: 8%;
}

.customer-portal-logins-table th:nth-child(5),
.customer-portal-logins-table td:nth-child(5) {
  width: 16%;
  white-space: nowrap;
}

.customer-portal-logins-table th:nth-child(6),
.customer-portal-logins-table td:nth-child(6) {
  width: 11%;
}

.customer-portal-logins-table th:nth-child(7),
.customer-portal-logins-table td:nth-child(7) {
  width: 11%;
}

.customer-portal-logins-table .portal-logins-customer-cell {
  min-width: 220px;
}

.customer-portal-logins-table .portal-logins-customer-cell .muted-note {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.2;
}

.customer-portal-logins-table .portal-logins-status-cell select,
.customer-portal-logins-status-cell select {
  min-width: 120px;
  width: auto;
  margin-top: 0;
  padding: 8px 10px;
}

.customer-portal-logins-table .portal-logins-actions-cell,
.customer-portal-logins-actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.customer-portal-logins-table .portal-logins-actions-cell .btn,
.customer-portal-logins-actions-cell .btn {
  padding: 7px 10px;
  border-radius: 10px;
  min-height: 34px;
  white-space: nowrap;
}

html[data-theme="dark"] .customer-portal-redesign-toggle {
  background: rgba(13, 23, 44, 0.75);
  border-color: rgba(156, 174, 255, 0.3);
}

html[data-theme="dark"] .customer-portal-redesign-url {
  background: rgba(14, 24, 45, 0.75);
  border-color: rgba(156, 174, 255, 0.34);
}

html[data-theme="dark"] .customer-portal-logins-table-wrap {
  border-color: rgba(156, 174, 255, 0.26);
  background: rgba(13, 23, 44, 0.75);
}

@media (max-width: 640px) {
  .profile-avatar-form {
    align-items: flex-start;
  }

  .profile-avatar-actions {
    width: 100%;
  }

  .platform-assets-grid {
    grid-template-columns: 1fr;
  }

  .platform-asset-actions {
    grid-template-columns: 1fr;
  }

  .platform-asset-actions .btn {
    width: 100%;
  }

  .platform-asset-choose-btn {
    width: 100%;
  }

  .settings-brand-grid,
  .settings-brand-theme-grid,
  .settings-brand-theme-grid--typography {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-brand-submit .btn {
    width: 100%;
    min-width: 0;
  }

  .settings-brand-theme-preview-reset {
    width: 100%;
  }

  .customer-portal-redesign-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-portal-redesign-save-btn {
    width: 100%;
    min-width: 0;
  }
}

.feature-list {
  margin: 8px 0;
  padding-left: 20px;
  color: #34406a;
  display: grid;
  gap: 5px;
}

.feature-list small {
  color: var(--muted);
}

.plan-editor {
  border-top: 1px solid #ebefff;
  margin-top: 10px;
  padding-top: 10px;
}

.feature-json {
  min-height: 140px;
  font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
  font-size: 12px;
}

.settings-grid {
  display: grid;
  gap: var(--workspace-element-gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.settings-grid .full-span {
  grid-column: 1 / -1;
}

.settings-tabs-shell {
  margin-bottom: 12px;
}

.settings-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.settings-tab-btn {
  border: 1px solid #cfdaff;
  background: #f8faff;
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  display: grid;
  gap: 3px;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.settings-tab-btn:hover {
  border-color: #b8c8ff;
  background: #f3f7ff;
}

.settings-tab-btn.is-active {
  border-color: #5f74ff;
  background: linear-gradient(135deg, #eef2ff 0%, #f9fbff 100%);
  box-shadow: 0 8px 20px rgba(79, 97, 203, 0.14);
}

.settings-tab-title {
  color: #1f2b5d;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}

.settings-tab-desc {
  color: #5f6e9d;
  font-size: 12px;
  line-height: 1.35;
}

.settings-tab-content {
  display: grid;
  gap: 12px;
}

.platform-settings-hero {
  position: relative;
  overflow: hidden;
  border-color: #c9d8ff;
  background:
    radial-gradient(120% 150% at 96% -20%, rgba(77, 91, 255, 0.24), transparent 46%),
    radial-gradient(100% 120% at -10% 120%, rgba(17, 182, 157, 0.14), transparent 52%),
    linear-gradient(135deg, #f5f8ff 0%, #ffffff 58%, #f2f8ff 100%);
  display: grid;
  gap: 18px;
}

.platform-settings-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4e61ad;
}

.platform-settings-hero h3 {
  margin: 0;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #182247;
}

.platform-settings-hero-copy .muted-note {
  margin: 10px 0 0;
  max-width: 78ch;
  line-height: 1.6;
}

.platform-settings-metrics-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.platform-settings-metric {
  border: 1px solid #d7e1ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px;
  display: grid;
  gap: 4px;
}

.platform-settings-metric-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6072af;
}

.platform-settings-metric-value {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #253468;
}

.platform-settings-metric-detail {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #5b6a99;
}

.platform-settings-layout {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.platform-settings-rail {
  position: sticky;
  top: 74px;
  border-color: #d2ddff;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  display: grid;
  gap: 12px;
}

.platform-settings-rail.settings-tabs-shell {
  margin-bottom: 0;
}

.platform-settings-rail-head h4 {
  margin: 0;
  font-size: 20px;
  color: #202a57;
}

.platform-settings-rail-head .muted-note {
  margin: 6px 0 0;
}

.platform-settings-tabs {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.platform-settings-tab-btn {
  border: 1px solid #d5deff;
  border-radius: 13px;
  background: #f8faff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.platform-settings-tab-btn:hover {
  border-color: #bbcaff;
  background: #f2f6ff;
}

.platform-settings-tab-btn.is-active {
  border-color: #4d62e9;
  background: linear-gradient(135deg, #eef2ff 0%, #f8fbff 100%);
  box-shadow: 0 12px 24px rgba(72, 96, 209, 0.16);
}

.platform-settings-tab-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, #3142a8 0%, #5168ff 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.platform-settings-tab-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.platform-settings-tab-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5f70aa;
}

.platform-settings-tab-marker {
  min-width: 46px;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4b61dc;
}

.platform-settings-tab-btn:not(.is-active) .platform-settings-tab-marker {
  color: transparent;
}

.platform-settings-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.platform-settings-active-panel {
  border-color: #d4deff;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.platform-settings-active-head {
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
}

.platform-settings-active-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4f65c9;
}

.platform-settings-active-head h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #1f2a56;
}

.platform-settings-active-panel .muted-note {
  margin: 0;
}

.platform-settings-active-helper {
  margin: 10px 0 0;
  color: #4f5d8c;
  font-size: 13px;
}

.platform-settings-active-helper code {
  font-size: 12px;
}

.platform-settings-content {
  gap: 14px;
}

.platform-settings-form {
  gap: 12px;
}

.platform-settings-module {
  border-color: #d4deff;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(40, 63, 166, 0.08);
}

.platform-settings-actions {
  justify-content: flex-end;
}

.storage-guide-list,
.storage-pricing-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: #3f4d79;
  font-size: 13px;
  line-height: 1.5;
}

.storage-guide-list li,
.storage-pricing-list li {
  margin: 0;
}

.storage-json-preview {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #cfdafd;
  background: #f6f9ff;
  overflow-x: auto;
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  color: #1f2a56;
}

.storage-json-preview code {
  display: block;
  white-space: pre;
}

@media (max-width: 1120px) {
  .platform-settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-settings-rail {
    position: static;
  }

  .platform-settings-tabs {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .platform-settings-hero {
    gap: 14px;
  }

  .platform-settings-hero h3 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .platform-settings-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .platform-settings-tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: 8px;
    padding-bottom: 4px;
  }

  .platform-settings-tabs::-webkit-scrollbar {
    height: 8px;
  }

  .platform-settings-tabs::-webkit-scrollbar-thumb {
    background: #d3dcfb;
    border-radius: 999px;
  }

  .platform-settings-tab-btn {
    flex: 0 0 280px;
  }

  .platform-settings-actions {
    justify-content: stretch;
  }

  .platform-settings-actions .btn {
    width: 100%;
  }
}

.settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbff;
  padding: 12px;
}

.settings-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.settings-toggle-copy {
  display: grid;
  gap: 4px;
}

.settings-toggle-copy strong {
  color: #2d375d;
  font-size: 13px;
  line-height: 1.3;
}

.settings-toggle-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-toggle code {
  font-size: 11px;
}

.client-restricted-photographers-picker[hidden] {
  display: none;
}

.plans-table {
  min-width: 980px;
}

.waitlist-table {
  min-width: 1180px;
}

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

.waitlist-redesign-hero {
  display: grid;
  gap: 16px;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(94, 119, 255, 0.16) 0%, rgba(94, 119, 255, 0) 58%),
    linear-gradient(160deg, #f9fbff 0%, #f2f6ff 100%);
}

.waitlist-redesign-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.waitlist-redesign-hero-copy {
  display: grid;
  gap: 7px;
}

.waitlist-redesign-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #cdd8ff;
  background: #f5f8ff;
  color: #3c4bcf;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.waitlist-redesign-hero-copy h3 {
  margin: 0;
  color: #1f2950;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.waitlist-redesign-hero-copy p {
  margin: 0;
  color: #5b6892;
  max-width: 70ch;
}

.waitlist-redesign-notify-btn {
  min-width: 190px;
}

.waitlist-redesign-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.waitlist-redesign-kpi {
  border: 1px solid #ccd8ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 11px 12px;
  display: grid;
  gap: 4px;
}

.waitlist-redesign-kpi span {
  color: #5d6a93;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.waitlist-redesign-kpi strong {
  font-size: 27px;
  color: #1e274e;
  line-height: 1.05;
}

.waitlist-redesign-controls {
  display: grid;
}

.waitlist-redesign-filter {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(160px, 0.8fr)) auto;
  gap: 10px;
  align-items: end;
}

.waitlist-redesign-field {
  display: grid;
  gap: 4px;
}

.waitlist-redesign-field span {
  font-size: 12px;
  font-weight: 600;
  color: #5d6a93;
}

.waitlist-redesign-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.waitlist-redesign-filter-actions .btn {
  white-space: nowrap;
}

.waitlist-redesign-results {
  padding-bottom: 12px;
}

.waitlist-redesign-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.waitlist-redesign-results-head h3 {
  margin: 0;
}

.waitlist-redesign-results-head p {
  margin: 0;
  color: #5d6a93;
  font-weight: 600;
}

.waitlist-redesign-results-list {
  padding-top: 14px;
}

.waitlist-redesign-list {
  display: grid;
  gap: 12px;
}

.waitlist-card {
  border: 1px solid #cfdaff;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.waitlist-card.is-notified {
  border-left: 3px solid #33ad78;
}

.waitlist-card.is-waitlisted {
  border-left: 3px solid #5f6dff;
}

.waitlist-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.waitlist-card-head-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.waitlist-card-identity h4 {
  margin: 0;
  color: #1f2950;
  font-size: 17px;
  line-height: 1.1;
}

.waitlist-card-identity p {
  margin: 2px 0 0;
  color: #5d6a93;
  font-size: 12px;
}

.waitlist-card-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.waitlist-meta-pill {
  border: 1px dashed #d5dfff;
  border-radius: 10px;
  background: #f8faff;
  padding: 7px 9px;
  display: grid;
  gap: 2px;
}

.waitlist-meta-pill span {
  color: #60709e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.waitlist-meta-pill strong {
  color: #27345f;
  font-size: 13px;
  line-height: 1.3;
}

.waitlist-card-insights {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 8px;
}

.waitlist-card-insight {
  border: 1px solid #d4ddff;
  border-radius: 11px;
  background: #f9fbff;
  padding: 8px 10px;
  display: grid;
  gap: 3px;
}

.waitlist-card-insight span {
  margin: 0;
  font-size: 10px;
  color: #57679a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.waitlist-card-insight strong {
  color: #27345f;
  font-size: 13px;
  line-height: 1.3;
}

.waitlist-card-insight p {
  margin: 0;
  color: #60709e;
  font-size: 12px;
  line-height: 1.35;
}

.waitlist-redesign-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.waitlist-redesign-actions-inline .btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 14px;
}

.waitlist-redesign-empty {
  border: 1px dashed #cfd9ff;
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  background: #f8faff;
}

.waitlist-redesign-empty h4 {
  margin: 0;
  color: #27335f;
}

.waitlist-redesign-empty p {
  margin: 6px 0 0;
  color: #60709e;
}

@media (max-width: 1200px) {
  .waitlist-redesign-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .waitlist-redesign-filter {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(160px, 1fr));
  }

  .waitlist-redesign-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

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

  .waitlist-card-insights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .waitlist-redesign-hero-top {
    flex-direction: column;
    align-items: stretch;
  }

  .waitlist-redesign-notify-btn {
    width: 100%;
  }

  .waitlist-redesign-kpis {
    grid-template-columns: 1fr;
  }

  .waitlist-redesign-kpi strong {
    font-size: 24px;
  }

  .waitlist-redesign-filter {
    grid-template-columns: 1fr;
  }

  .waitlist-redesign-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .waitlist-redesign-filter-actions .btn {
    width: 100%;
  }

  .waitlist-redesign-results-head {
    display: grid;
    gap: 4px;
  }

  .waitlist-card {
    padding: 12px;
  }

  .waitlist-card-head {
    display: grid;
    gap: 8px;
  }

  .waitlist-card-head-right {
    justify-content: flex-start;
  }

  .waitlist-card-meta {
    grid-template-columns: 1fr;
  }

  .waitlist-card-insights {
    grid-template-columns: 1fr;
  }

  .waitlist-redesign-actions-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .waitlist-redesign-actions-inline .btn {
    width: 100%;
  }

  .waitlist-redesign-actions-inline .team-delete-btn {
    grid-column: 1 / -1;
  }
}

.plans-plan-name {
  color: #2c3455;
  font-weight: 700;
  margin-bottom: 2px;
}

.plans-plan-id {
  color: var(--muted);
  font-size: 12px;
}

.plans-plan-description {
  color: #52608a;
  font-size: 12px;
  margin-top: 5px;
  max-width: 42ch;
}

.plans-includes {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
  color: #33406a;
  font-size: 12px;
}

.plans-includes-empty {
  color: var(--muted);
  font-size: 12px;
}

.plans-action-cell {
  white-space: nowrap;
}

.plans-row-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-modal-backdrop {
  z-index: 1100;
}

.plans-modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 10px;
}

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

.plans-modal-head h3 {
  margin: 0;
}

.plans-modal-head p {
  margin: 5px 0 0;
  color: var(--muted);
}

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

.plans-modal-grid .full-span {
  grid-column: 1 / -1;
}

.plans-id-chip {
  border: 1px dashed #cfd9ff;
  border-radius: 10px;
  background: #f6f9ff;
  padding: 10px 12px;
  color: #37416e;
  font-size: 13px;
}

.plans-feature-input {
  min-height: 140px;
}

.plans-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.user-row-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.user-edit-modal {
  width: min(720px, 100%);
}

.user-edit-summary {
  border: 1px dashed #cfd9ff;
  border-radius: 10px;
  background: #f6f9ff;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.user-edit-summary strong {
  color: #222f60;
}

.user-edit-summary span {
  color: #566393;
  font-size: 13px;
}

.user-activate-toggle {
  margin-top: 2px;
}

.brand-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.platform-brand-row {
  width: 100%;
}

.platform-brand-logo {
  display: block;
  width: min(190px, 100%);
  max-height: 72px;
  object-fit: contain;
  border-radius: 14px;
  border: 0;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
}

.platform-brand-row.has-logo {
  gap: 0;
}

.tenant-brand-row {
  align-items: center;
  gap: 10px;
}

.tenant-brand-row .brand-logo {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  padding: 0;
}

.tenant-brand-row .brand-mark {
  width: 84px;
  height: 84px;
  border-radius: 14px;
}

.brand-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 12px;
  border: 0;
  background: transparent;
  padding: 0;
}

.brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: #1f2d4d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.card h3 {
  margin: 0 0 8px;
}

.card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.app-store-catalog-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.app-store-catalog-section {
  display: grid;
  gap: 8px;
}

.app-store-section-toolbar {
  margin-bottom: 0;
  min-height: 0;
}

.app-store-section-toolbar h3 {
  margin: 0;
  line-height: 1.25;
}

.app-store-section-description {
  margin: 0;
  line-height: 1.45;
}

.app-store-catalog-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 12px;
  border: 1px solid #d8dde9;
}

.app-store-catalog-card.is-enabled {
  border-color: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18);
}

.app-store-catalog-card.is-coming-soon {
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.app-store-catalog-logo-wrap {
  position: relative;
  width: 100%;
}

.app-store-coming-soon-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.app-store-catalog-card.is-coming-soon .app-store-logo-image {
  filter: grayscale(1);
  opacity: 0.72;
}

.app-store-catalog-card.is-coming-soon .app-store-logo-wordmark,
.app-store-catalog-card.is-coming-soon .app-store-catalog-title,
.app-store-catalog-card.is-coming-soon .app-store-catalog-subtitle {
  color: #64748b;
}

.app-store-catalog-body {
  display: grid;
  gap: 8px;
}

.app-store-catalog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.app-store-catalog-title {
  margin: 0;
  color: #1f2937;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
}

.app-store-catalog-subtitle {
  margin: 0;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.4;
}

.app-store-logo {
  background: var(--logo-bg, #3f4a76);
  color: var(--logo-fg, #ffffff);
}

.app-store-logo-banner {
  width: 100%;
  min-height: 118px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(31, 41, 55, 0.08);
  padding: 16px;
  text-align: center;
}

.app-store-logo-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.app-store-logo-image-banner {
  max-height: 72px;
}

.app-store-logo-image-badge {
  max-width: 36px;
  max-height: 36px;
}

.app-store-logo-wordmark {
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-store-logo-fallback.is-hidden,
.app-store-logo-image.is-hidden {
  display: none;
}

.app-store-logo-badge {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.03em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.app-store-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.app-store-status-chip.is-enabled {
  background: #dcfce7;
  color: #15803d;
}

.app-store-status-chip.is-disabled {
  background: #f3f4f6;
  color: #374151;
}

.app-store-status-chip.is-coming-soon {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.app-store-detail-hero {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.app-store-detail-hero-copy {
  display: grid;
  gap: 6px;
}

.app-store-detail-hero-copy p {
  margin: 0;
}

.integration-setup-tabs {
  margin: 8px 0 6px;
  gap: 8px;
  flex-wrap: wrap;
}

.integration-setup-tab {
  min-width: 132px;
}

.integration-setup-tab.is-active {
  border-color: #9ab0ff;
  background:
    radial-gradient(90% 120% at 102% -24%, rgba(116, 138, 255, 0.22), transparent 60%),
    #edf2ff;
  color: #253a8f;
  font-weight: 700;
}

.integration-settings-shell {
  margin-top: 6px;
  display: grid;
  gap: 10px;
}

.integration-cubicasa-mode-fieldset {
  margin: 0;
  border: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.integration-cubicasa-mode-fieldset legend {
  margin: 0;
  padding: 0;
  color: #223264;
  font-size: 14px;
  font-weight: 800;
}

.integration-cubicasa-mode-options {
  display: grid;
  gap: 8px;
}

.integration-cubicasa-mode-option {
  border: 1px solid #d2dcff;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.integration-cubicasa-mode-option:hover {
  border-color: #b8ccff;
  background: #f3f7ff;
}

.integration-cubicasa-mode-option.is-selected,
.integration-cubicasa-mode-option:has(input:checked) {
  border-color: #8ca5ff;
  background: #edf3ff;
}

.integration-cubicasa-mode-option input[type="radio"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  appearance: auto;
  -webkit-appearance: radio;
  accent-color: var(--accent);
}

.integration-cubicasa-mode-option input[type="radio"]:focus {
  box-shadow: none;
}

.integration-cubicasa-mode-option > span {
  display: grid;
  gap: 3px;
}

.integration-cubicasa-mode-option strong {
  color: #23366f;
  font-size: 14px;
  line-height: 1.35;
}

.integration-cubicasa-mode-option small {
  color: #5c6896;
  font-size: 12px;
  line-height: 1.45;
}

.integration-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.integration-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.integration-badge--migration {
  background: #cffafe;
  color: #0f766e;
  border: 1px solid #99f6e4;
}

.integration-card-meta {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.integration-card-meta p {
  margin: 0;
  font-size: 13px;
}

.integration-credential-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d9e1fb;
}

.integration-payment-fee-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d9e1fb;
}

.integration-payment-fee-shell {
  border: 1px solid #d7e2ff;
  border-radius: 20px;
  padding: 16px;
  display: grid;
  gap: 16px;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(86, 109, 255, 0.16), transparent 52%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 18px 46px rgba(35, 52, 93, 0.07);
}

.integration-payment-fee-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.integration-payment-fee-heading {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.integration-payment-fee-kicker {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5d72ad;
}

.integration-payment-fee-heading h3 {
  margin: 0;
  color: #1f2b4d;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.integration-payment-fee-heading p {
  margin: 0;
  color: #596c96;
  font-size: 13px;
  line-height: 1.55;
  max-width: 620px;
}

.integration-payment-fee-rate-card {
  flex: 0 0 220px;
  min-width: 220px;
  border: 1px solid rgba(196, 209, 250, 0.9);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 250, 255, 0.94) 100%);
  padding: 11px 14px;
  display: grid;
  gap: 4px;
  box-shadow: 0 16px 34px rgba(79, 99, 216, 0.08);
}

.integration-payment-fee-rate-label {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d72ad;
}

.integration-payment-fee-rate-card strong {
  color: #1f2b4d;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.integration-payment-fee-rate-card small {
  color: #60739e;
  font-size: 12px;
  line-height: 1.45;
}

.integration-payment-fee-toggle-card {
  border: 1px solid #cbd8ff;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.96) 100%);
  padding: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.integration-payment-fee-toggle-card:hover {
  border-color: #b8c8ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(79, 99, 216, 0.08);
}

.integration-payment-fee-toggle-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}

.integration-payment-fee-toggle-input input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  min-width: 46px;
  height: 28px;
  margin: 0;
  border: 1px solid #c8d6fb;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4f7ff 0%, #ebf0fb 100%);
  box-shadow: inset 0 1px 2px rgba(34, 51, 93, 0.08);
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.integration-payment-fee-toggle-input input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(34, 51, 93, 0.18);
  transition: transform 0.18s ease;
}

.integration-payment-fee-toggle-input input[type="checkbox"]:checked {
  border-color: #5469f0;
  background: linear-gradient(135deg, #6070ff 0%, #4f8dff 100%);
}

.integration-payment-fee-toggle-input input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

.integration-payment-fee-toggle-input input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(79, 99, 216, 0.18),
    inset 0 1px 2px rgba(34, 51, 93, 0.08);
}

.integration-payment-fee-toggle-input input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.integration-payment-fee-toggle-copy {
  display: grid;
  gap: 5px;
}

.integration-payment-fee-toggle-copy strong {
  color: #1f2b4d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.integration-payment-fee-toggle-copy small {
  color: #5e729f;
  font-size: 13px;
  line-height: 1.55;
}

.integration-payment-fee-toggle-pill {
  align-self: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.integration-payment-fee-toggle-pill.is-enabled {
  color: #0a7f4f;
  background: #d9f7e9;
}

.integration-payment-fee-toggle-pill.is-disabled {
  color: #5f6d8d;
  background: #eef2fb;
}

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

.integration-payment-fee-advanced {
  display: grid;
  gap: 14px;
  border: 1px solid #d9e4ff;
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(249, 251, 255, 0.94) 100%);
}

.integration-payment-fee-advanced-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.integration-payment-fee-advanced-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.integration-payment-fee-advanced-head span {
  color: #6578ab;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.integration-payment-fee-advanced-head h4 {
  margin: 0;
  color: #1f2b4d;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.integration-payment-fee-advanced-head p {
  margin: 0;
  color: #5e719b;
  font-size: 13px;
  line-height: 1.5;
  max-width: 720px;
}

.integration-payment-fee-source-card {
  margin: 0;
  border: 1px solid #d2ddfb;
  border-radius: 16px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.integration-payment-fee-source-card:hover {
  border-color: #bacaff;
  background: #fbfcff;
}

.integration-payment-fee-source-card input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 1.5px solid #9fb3e9;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(34, 51, 93, 0.08);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.integration-payment-fee-source-card input[type="radio"]:checked {
  border-color: #4f63d8;
  background:
    radial-gradient(circle at center, #4f63d8 0 38%, transparent 42%),
    #ffffff;
}

.integration-payment-fee-source-card input[type="radio"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(79, 99, 216, 0.18),
    inset 0 1px 2px rgba(34, 51, 93, 0.08);
}

.integration-payment-fee-source-copy {
  display: grid;
  gap: 4px;
}

.integration-payment-fee-source-copy strong {
  color: #22335d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.integration-payment-fee-source-copy small {
  color: #5d709d;
  font-size: 12px;
  line-height: 1.5;
}

.integration-payment-fee-source-rate {
  grid-column: 2;
  color: #3f50d2;
  font-size: 13px;
  font-weight: 800;
}

.integration-payment-fee-source-card.is-selected,
.integration-payment-fee-source-card:has(input[type="radio"]:checked) {
  border-color: #7f95ff;
  background:
    linear-gradient(180deg, #f9fbff 0%, #f2f6ff 100%);
  box-shadow:
    0 0 0 3px rgba(79, 99, 216, 0.08),
    0 12px 26px rgba(79, 99, 216, 0.08);
}

.integration-payment-fee-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.integration-payment-fee-fields-stack {
  display: grid;
  gap: 12px;
}

.integration-payment-fee-input {
  display: grid;
  gap: 8px;
}

.integration-payment-fee-label-panel {
  border: 1px solid #dce6ff;
  border-radius: 16px;
  background: #ffffff;
  padding: 14px;
}

.integration-payment-fee-input > span {
  color: #32456f;
  font-size: 13px;
  font-weight: 700;
}

.integration-payment-fee-input > small {
  color: #61739d;
  font-size: 12px;
  line-height: 1.5;
}

.integration-payment-fee-custom-panel {
  border: 1px dashed #ccd8fb;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(248, 250, 255, 0.92);
  display: grid;
  gap: 12px;
}

.integration-payment-fee-custom-head {
  display: grid;
  gap: 2px;
}

.integration-payment-fee-custom-head strong {
  color: #22335d;
  font-size: 14px;
  font-weight: 700;
}

.integration-payment-fee-custom-head span {
  color: #60739e;
  font-size: 12px;
  line-height: 1.5;
}

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

.integration-payment-fee-footer {
  border-top: 1px dashed #d9e1fb;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.integration-payment-fee-note {
  margin: 0;
  color: #60739e;
  font-size: 13px;
  line-height: 1.55;
  max-width: 620px;
}

.integration-payment-fee-form:not(:has(input[name="processing_fee_rate_source"][value="custom"]:checked))
  .integration-payment-fee-custom-panel,
.integration-payment-fee-form:not(:has(input[name="processing_fee_rate_source"][value="custom"]:checked))
  .integration-payment-fee-note--custom {
  display: none;
}

.integration-payment-fee-form:not(:has(input[name="pass_processing_fee_to_customer"]:checked))
  .integration-payment-fee-rate-card,
.integration-payment-fee-form:not(:has(input[name="pass_processing_fee_to_customer"]:checked))
  .integration-payment-fee-advanced,
.integration-payment-fee-form:not(:has(input[name="pass_processing_fee_to_customer"]:checked))
  .integration-payment-fee-note {
  display: none;
}

.integration-payment-fee-form:not(:has(input[name="pass_processing_fee_to_customer"]:checked))
  .integration-payment-fee-footer {
  display: none;
}

.integration-calendar-sync-options-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d9e1fb;
}

.integration-calendar-sync-options-row {
  border: 1px solid #d4defa;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f9fbff;
}

.integration-calendar-sync-toggle {
  margin: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: #465988;
}

.integration-calendar-sync-copy {
  display: grid;
  gap: 2px;
}

.integration-calendar-sync-title {
  font-family: var(--font-body-family);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #28375d;
}

.integration-calendar-sync-copy small {
  font-family: var(--font-body-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: #5f729f;
}

.integration-calendar-sync-save {
  flex: 0 0 auto;
  min-width: 92px;
}

@media (max-width: 760px) {
  .integration-payment-fee-header,
  .integration-payment-fee-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .integration-payment-fee-rate-card {
    min-width: 0;
    width: 100%;
  }

  .integration-payment-fee-toggle-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .integration-payment-fee-toggle-pill {
    grid-column: 2;
    justify-self: flex-start;
  }

  .integration-payment-fee-source-grid,
  .integration-payment-fee-custom-grid {
    grid-template-columns: 1fr;
  }

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

  .integration-settings-card-header,
  .integration-settings-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .integration-settings-card-meta {
    justify-content: stretch;
  }

  .integration-settings-card-stat {
    width: 100%;
  }

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

  .integration-switch-toggle-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .integration-switch-toggle-pill {
    grid-column: 2;
    justify-self: flex-start;
  }

  .integration-payment-fee-footer .btn {
    width: 100%;
  }

  .integration-settings-card-footer .btn {
    width: 100%;
  }

  .integration-calendar-sync-options-row {
    flex-direction: column;
    align-items: stretch;
  }

  .integration-calendar-sync-save {
    width: 100%;
  }
}

.integration-toggle-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.integration-toggle-option input[type="checkbox"] {
  width: auto;
  margin: 2px 0 0;
}

.integration-toggle-option span {
  display: grid;
  gap: 2px;
}

.integration-auth-guide-panel {
  margin-top: 12px;
  border: 1px solid #d4defa;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 102% -20%, rgba(79, 99, 216, 0.12), transparent 50%),
    linear-gradient(180deg, #fbfdff 0%, #f5f8ff 100%);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.integration-auth-guide-header {
  display: grid;
  gap: 2px;
}

.integration-auth-guide-title {
  margin: 0;
  color: #1f2a57;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.integration-auth-guide-subtitle {
  margin: 0;
  color: #5c6896;
  font-size: 12px;
  line-height: 1.5;
}

.integration-auth-guide-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.integration-auth-guide-list li {
  margin: 0;
  color: #3a4972;
  font-size: 13px;
  line-height: 1.5;
}

.integration-auth-guide-list li::marker {
  color: #4f63d8;
  font-weight: 700;
}

.integration-settings-card {
  margin-top: 12px;
  border: 1px solid #d7e2ff;
  border-radius: 20px;
  padding: 16px;
  display: grid;
  gap: 16px;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(86, 109, 255, 0.14), transparent 52%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 18px 46px rgba(35, 52, 93, 0.07);
}

.integration-settings-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.integration-settings-card-heading {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.integration-settings-card-kicker {
  color: #5d72ad;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.integration-settings-card-heading h3 {
  margin: 0;
  color: #1f2b4d;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.integration-settings-card-heading p {
  margin: 0;
  color: #596c96;
  font-size: 13px;
  line-height: 1.55;
  max-width: 680px;
}

.integration-settings-card-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.integration-settings-card-stat {
  border: 1px solid rgba(196, 209, 250, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  padding: 10px 13px;
  display: grid;
  gap: 4px;
  min-width: 178px;
  box-shadow: 0 16px 34px rgba(79, 99, 216, 0.08);
}

.integration-settings-card-stat span {
  color: #5d72ad;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.integration-settings-card-stat strong {
  color: #1f2b4d;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.integration-settings-card-body {
  display: grid;
  gap: 14px;
}

.integration-settings-card-footer {
  border-top: 1px dashed #d9e1fb;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.integration-connection-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.integration-connection-stat {
  border: 1px solid #dce6ff;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  padding: 13px 14px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.integration-connection-stat span {
  color: #5d72ad;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.integration-connection-stat strong {
  color: #1f2b4d;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.integration-settings-card + .row-actions,
.integration-connection-summary-card + .row-actions {
  margin-top: 14px;
}

.integration-credential-form,
.integration-calendar-sync-options-form {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.integration-settings-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.integration-settings-field {
  display: grid;
  gap: 8px;
  color: #32456f;
  font-size: 13px;
  font-weight: 700;
}

.integration-settings-field input,
.integration-settings-field select,
.integration-settings-field textarea {
  width: 100%;
  font-weight: 500;
}

.integration-settings-inner-form {
  display: grid;
  gap: 14px;
}

.integration-switch-toggle-card {
  border: 1px solid #cbd8ff;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.96) 100%);
  padding: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.integration-switch-toggle-card:hover {
  border-color: #b8c8ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(79, 99, 216, 0.08);
}

.integration-switch-toggle-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.integration-switch-toggle-input input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  min-width: 46px;
  height: 28px;
  margin: 0;
  border: 1px solid #c8d6fb;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4f7ff 0%, #ebf0fb 100%);
  box-shadow: inset 0 1px 2px rgba(34, 51, 93, 0.08);
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.integration-switch-toggle-input input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(34, 51, 93, 0.18);
  transition: transform 0.18s ease;
}

.integration-switch-toggle-input input[type="checkbox"]:checked {
  border-color: #5469f0;
  background: linear-gradient(135deg, #6070ff 0%, #4f8dff 100%);
}

.integration-switch-toggle-input input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

.integration-switch-toggle-input input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(79, 99, 216, 0.18),
    inset 0 1px 2px rgba(34, 51, 93, 0.08);
}

.integration-switch-toggle-input input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.integration-switch-toggle-copy {
  display: grid;
  gap: 5px;
}

.integration-switch-toggle-copy strong {
  color: #1f2b4d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.integration-switch-toggle-copy small {
  color: #5e729f;
  font-size: 13px;
  line-height: 1.55;
}

.integration-switch-toggle-pill {
  align-self: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.integration-switch-toggle-pill.is-enabled {
  color: #0a7f4f;
  background: #d9f7e9;
}

.integration-switch-toggle-pill.is-disabled {
  color: #5f6d8d;
  background: #eef2fb;
}

@media (max-width: 760px) {
  .integration-settings-card-header,
  .integration-settings-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .integration-settings-card-meta {
    justify-content: stretch;
  }

  .integration-settings-card-stat {
    width: 100%;
  }

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

  .integration-switch-toggle-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .integration-switch-toggle-pill {
    grid-column: 2;
    justify-self: flex-start;
  }

  .integration-settings-card-footer .btn {
    width: 100%;
  }
}

.tipping-setup-shell {
  display: grid;
  gap: 10px;
}

.tipping-setup-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.tipping-setup-panel {
  margin-top: 0;
}

.tipping-setup-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.tipping-setup-list li {
  margin: 0;
  color: #3a4972;
  font-size: 13px;
  line-height: 1.5;
}

.tipping-setup-list li::marker {
  color: #4f63d8;
  font-weight: 700;
}

.tipping-setup-warning {
  margin: 0;
  border: 1px solid #fdba74;
  border-radius: 10px;
  background: #fff7ed;
  color: #9a3412;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.5;
}

.migration-top-shell {
  border: 1px solid #cedbff;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 98% -24%, rgba(77, 91, 255, 0.2), transparent 44%),
    radial-gradient(110% 120% at -10% 120%, rgba(16, 185, 129, 0.14), transparent 56%),
    linear-gradient(145deg, #f5f8ff 0%, #ffffff 56%, #f4f9ff 100%);
  padding: 14px;
  display: grid;
  gap: 14px;
}

.migration-top-kicker {
  margin: 0 0 6px;
  color: #4d60b7;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.migration-top-head h3 {
  margin: 0;
  color: #1a2451;
  font-size: clamp(27px, 2.8vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.migration-top-head .muted-note {
  margin: 8px 0 0;
  max-width: 76ch;
  line-height: 1.58;
}

.migration-top-metrics-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.migration-top-metric {
  border: 1px solid #d6e0ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.93);
  padding: 11px 12px;
  display: grid;
  gap: 3px;
}

.migration-top-metric-label {
  margin: 0;
  color: #6172a9;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.migration-top-metric-value {
  margin: 0;
  color: #243467;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.migration-top-metric-detail {
  margin: 0;
  color: #5d6b96;
  font-size: 12px;
  line-height: 1.5;
}

.migration-command-grid {
  margin-top: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(280px, 1.1fr) minmax(300px, 0.9fr);
}

.migration-command-card {
  border-color: #d3ddff;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 18px rgba(45, 67, 164, 0.08);
}

.migration-selected-workspace {
  margin: 10px 0 6px;
  color: #5b678f;
}

.migration-selected-workspace strong {
  color: #243265;
}

.migration-provider-tabs {
  margin: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.migration-provider-tab {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid #d2ddff;
  border-radius: 12px;
  background: #f7faff;
  min-height: 44px;
  padding: 8px 10px;
}

.migration-provider-tab-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #2b3b72;
}

.migration-provider-tab.is-active {
  border-color: #4d62e8;
  background:
    radial-gradient(80% 110% at 102% -30%, rgba(77, 91, 255, 0.2), transparent 60%),
    linear-gradient(145deg, #eef2ff 0%, #f7faff 100%);
  box-shadow: 0 10px 18px rgba(62, 86, 199, 0.16);
}

.migration-workbench-grid {
  margin-top: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
}

.migration-workbench-card {
  border-color: #d2ddff;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 10px 22px rgba(40, 62, 156, 0.08);
}

.migration-provider-meta {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}

.migration-provider-meta p {
  margin: 0;
}

.migration-connection-actions {
  margin-top: 2px;
}

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

.migration-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid #d7e0ff;
  border-radius: 10px;
  background: #f7faff;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #2f3e73;
}

.migration-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.migration-checkbox-dry-run {
  grid-column: 1 / -1;
  border-style: dashed;
  border-color: #bccbff;
  background: #f3f7ff;
}

.migration-latest-run {
  border: 1px dashed #c7d4ff;
  border-radius: 11px;
  background: #f6f9ff;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}

.migration-latest-run-label {
  margin: 0;
  color: #6372a7;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.migration-latest-run-value {
  margin: 0;
  color: #243467;
  font-size: 14px;
  font-weight: 700;
}

.migration-latest-run-detail {
  margin: 0;
  color: #5d6994;
  font-size: 12px;
}

.migration-run-actions {
  justify-content: flex-end;
}

.migration-webhook-note {
  margin-top: 8px;
}

.migration-runs-panel table {
  min-width: 920px;
}

.migration-run-detail-metrics {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.migration-run-detail-metrics p {
  margin: 0;
}

.migration-webhook-panel input[readonly] {
  background: #f8fafc;
}

@media (max-width: 1160px) {
  .migration-command-grid,
  .migration-workbench-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .migration-top-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .migration-provider-tabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
  }

  .migration-provider-tab {
    flex: 0 0 240px;
  }

  .migration-entity-toggle-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .migration-run-actions .btn,
  .migration-connection-actions .btn {
    width: 100%;
  }

  .migration-run-actions,
  .migration-connection-actions {
    justify-content: stretch;
  }
}

.payroll-rates-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid #dbe3f5;
  border-radius: 10px;
}

.payroll-shell {
  display: grid;
  gap: 14px;
}

.payroll-modal {
  width: min(1080px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: auto;
}

.payroll-modal .toolbar {
  margin-bottom: 12px;
}

.payroll-header-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.payroll-header-logo {
  display: inline-flex;
  align-items: center;
}

.payroll-workbench {
  display: grid;
  gap: 14px;
}

.payroll-workbench-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.payroll-workbench-head h3 {
  margin: 0;
}

.payroll-workbench-head .muted-note {
  margin: 6px 0 0;
}

.payroll-overview-card {
  border: 1px solid #d4def7;
  border-radius: 14px;
  padding: 14px;
  background:
    radial-gradient(120% 120% at 100% -30%, rgba(78, 94, 255, 0.18), transparent 48%),
    linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  display: grid;
  gap: 14px;
}

.payroll-overview-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.payroll-overview-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.payroll-overview-brand p {
  margin: 0;
}

.payroll-overview-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payroll-overview-steps span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c6d3f9;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  color: #324883;
  background: rgba(255, 255, 255, 0.8);
}

.payroll-overview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.payroll-overview-metrics article {
  border: 1px solid #d5def7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.payroll-overview-metrics article span {
  color: #5a6792;
  font-size: 12px;
  font-weight: 600;
}

.payroll-overview-metrics article strong {
  color: #1a264b;
  font-size: 22px;
  line-height: 1.1;
}

.payroll-step-card {
  border-radius: 14px;
}

.payroll-step-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.payroll-step-head h3 {
  margin: 0;
}

.payroll-step-head p {
  margin: 4px 0 0;
  color: #5d6994;
}

.payroll-step-index {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3158ee;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 28px;
  margin-top: 2px;
}

.payroll-rates-form {
  gap: 12px;
}

.payroll-rates-modal {
  width: min(940px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
}

.payroll-rates-modal .toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border-bottom: 1px solid #e4eafb;
  padding-bottom: 10px;
}

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

.payroll-rates-form-note {
  margin: 0;
}

.payroll-rates-completion {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid #d8e1f8;
  border-radius: 999px;
  padding: 5px 10px;
  background: #f8faff;
}

.payroll-rates-completion span {
  color: #55628d;
  font-weight: 600;
  font-size: 12px;
}

.payroll-rates-completion strong {
  color: #243156;
  font-size: 12px;
}

.payroll-member-rate-list {
  display: grid;
  gap: 10px;
}

.payroll-member-rate-card {
  border: 1px solid #dbe3f6;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.payroll-member-rate-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #f8faff;
}

.payroll-member-rate-card summary::-webkit-details-marker {
  display: none;
}

.payroll-member-rate-card summary::after {
  content: "+";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #cfdbff;
  color: #4b5d8d;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-left: 8px;
}

.payroll-member-rate-card[open] summary::after {
  content: "-";
  background: #3158ee;
  border-color: #3158ee;
  color: #ffffff;
}

.payroll-member-rate-head {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.payroll-member-rate-card summary strong {
  display: block;
  color: #1f2a4d;
  margin-bottom: 0;
  line-height: 1.2;
  font-size: 18px;
}

.payroll-member-rate-card summary span {
  color: #5e6a95;
  font-size: 13px;
}

.payroll-member-rate-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-left: auto;
  gap: 6px;
}

.payroll-member-rate-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.payroll-member-rate-action-btn {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  min-height: 0;
}

.payroll-rate-sync-modal {
  width: min(460px, calc(100vw - 24px));
}

.payroll-member-rate-progress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #d8e1fb;
  background: #ffffff;
  color: #4f5f8f;
  font-size: 12px;
  font-weight: 700;
}

.payroll-member-rate-meta span:last-child {
  color: #1f2a4d;
  font-weight: 800;
  font-size: 16px;
}

.payroll-member-rate-body {
  border-top: 1px solid #e6ecfb;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.payroll-member-rate-card .payroll-product-rate-row {
  gap: 12px;
  border: 1px solid #e8eefc;
  border-radius: 16px;
  background: #fbfcff;
  padding: 12px 14px;
  box-shadow: none;
}

.payroll-member-rate-card .payroll-product-rate-row-tiered {
  align-items: flex-start;
  gap: 0;
  background: #ffffff;
}

.payroll-member-rate-card .payroll-product-rate-headline {
  align-items: flex-start;
  gap: 6px;
}

.payroll-member-rate-card .payroll-product-rate-pricing {
  gap: 4px;
}

.payroll-member-rate-card .payroll-product-rate-input-wrap {
  align-self: center;
}

.payroll-member-rate-card .payroll-product-tier-rate-list {
  margin-top: 10px;
  padding-left: 0;
  border-left: 0;
}

.payroll-member-rate-card .payroll-product-tier-rate-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px 0;
  border-bottom: 1px solid #e6ecfb;
}

.payroll-member-rate-card .payroll-product-tier-rate-row:first-child {
  border-top: 1px solid #e6ecfb;
}

.payroll-member-rate-card .payroll-product-tier-rate-bullet {
  width: 24px;
  height: 24px;
  border-color: #d8e3ff;
  background: #f4f7ff;
}

.payroll-member-rate-card .payroll-product-tier-rate-controls {
  gap: 12px;
}

.payroll-member-rate-card .payroll-product-tier-rate-payout {
  border: 0;
  background: transparent;
  padding: 0;
  color: #5e6a95;
}

.payroll-member-rate-card .payroll-rate-money-input input {
  width: 112px;
}

.payroll-product-rate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #dde6fc;
  border-radius: 10px;
  background: #ffffff;
  padding: 9px 10px;
}

.payroll-product-rate-row-tiered {
  grid-template-columns: minmax(0, 1fr);
  border-color: #d2e0ff;
  background: linear-gradient(180deg, #fcfeff 0%, #f7fbff 100%);
  padding: 10px 10px;
}

.payroll-product-rate-copy {
  min-width: 0;
}

.payroll-product-rate-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.payroll-product-rate-copy strong {
  display: block;
  color: #26345a;
  line-height: 1.25;
  font-size: 16px;
  margin-bottom: 2px;
}

.payroll-product-rate-input-wrap {
  display: inline-grid;
  justify-items: end;
  align-items: center;
}

.payroll-product-rate-pricing {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.payroll-product-rate-inline-meta {
  color: #56618b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.payroll-product-rate-kind {
  color: #3553a0;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #c6d6ff;
  border-radius: 999px;
  background: #eef4ff;
  padding: 2px 9px;
  line-height: 1.2;
}

.payroll-product-tier-rate-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding-left: 14px;
  border-left: 2px solid #e0e8ff;
}

.payroll-product-tier-rate-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #d9e4fc;
  border-radius: 9px;
  background: #ffffff;
  padding: 8px 10px 8px 8px;
}

.payroll-product-tier-rate-row-fallback {
  border-style: dashed;
  background: #f9fbff;
}

.payroll-product-tier-rate-bullet {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #cbd9ff;
  background: #f3f7ff;
  color: #3b5089;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.payroll-product-tier-rate-main {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.payroll-product-tier-rate-title {
  color: #253a6a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.payroll-product-tier-rate-sub {
  color: #5b6893;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.payroll-product-tier-rate-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.payroll-product-tier-rate-payout {
  color: #384d84;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #d2deff;
  border-radius: 999px;
  background: #f0f5ff;
  padding: 3px 9px;
  line-height: 1.2;
}

.payroll-rate-money-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

.payroll-rate-money-input > span {
  color: #394a7a;
  font-weight: 700;
  font-size: 14px;
}

.payroll-rate-money-input input {
  margin-top: 0;
  width: 108px;
  min-height: 40px;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}

.payroll-product-rate-state {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #f3c8b8;
  background: #fff3ee;
  color: #a44d2f;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  line-height: 1.2;
}

.payroll-product-rate-payout {
  color: #384f89;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #cfdcff;
  border-radius: 999px;
  background: #eef3ff;
  padding: 2px 8px;
  line-height: 1.2;
}

.payroll-run-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payroll-run-presets-label {
  color: #5a6792;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.payroll-run-presets .btn {
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.2;
}

.payroll-run-row-selected td {
  background: #eef3ff;
}

.payroll-runs-panel .table-wrap {
  margin-top: 8px;
}

.payroll-runs-panel table {
  border-collapse: separate;
  border-spacing: 0;
}

.payroll-runs-panel thead th,
.payroll-runs-panel tbody td {
  vertical-align: middle;
  text-align: center;
}

.payroll-runs-panel thead th {
  background: #f3f6ff;
}

.payroll-runs-panel tbody td {
  padding: 14px 10px;
}

.payroll-runs-panel tbody tr:hover td {
  background: #f8faff;
}

.payroll-runs-panel td:last-child {
  min-width: 170px;
}

.payroll-runs-panel td .row-actions {
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.payroll-step-actions {
  align-items: center;
  gap: 10px;
}

.payroll-rates-table {
  min-width: 760px;
}

.payroll-rates-table thead th {
  position: sticky;
  top: 0;
  background: #f7f9ff;
  z-index: 1;
}

.payroll-rates-table th:first-child,
.payroll-rates-table td:first-child {
  min-width: 220px;
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 2;
}

.payroll-rates-table thead th:first-child {
  background: #f7f9ff;
  z-index: 3;
}

.payroll-rate-input {
  min-width: 92px;
}

.payroll-run-form textarea {
  min-height: 84px;
}

.payroll-run-detail-metrics {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.payroll-run-detail-metrics p {
  margin: 0;
}

@media (max-width: 840px) {
  .payroll-modal {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }

  .payroll-rates-modal {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
  }

  .payroll-rates-modal .toolbar {
    position: static;
  }

  .payroll-rates-form-head {
    align-items: flex-start;
  }

  .payroll-rates-completion {
    width: 100%;
    justify-content: space-between;
  }

  .payroll-member-rate-card summary {
    flex-wrap: wrap;
  }

  .payroll-member-rate-meta {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .payroll-member-rate-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .payroll-member-rate-card summary::after {
    margin-left: auto;
  }

  .payroll-product-rate-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .payroll-product-rate-copy strong {
    white-space: normal;
  }

  .payroll-product-rate-input-wrap {
    justify-items: stretch;
  }

  .payroll-product-rate-pricing {
    justify-content: flex-start;
  }

  .payroll-product-rate-headline {
    display: grid;
    gap: 4px;
  }

  .payroll-product-tier-rate-list {
    margin-top: 5px;
    padding-left: 9px;
  }

  .payroll-product-tier-rate-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .payroll-product-tier-rate-bullet {
    display: none;
  }

  .payroll-product-tier-rate-controls {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .payroll-rate-money-input {
    width: 100%;
    justify-content: flex-start;
  }

  .payroll-rate-money-input input {
    width: 100%;
  }

  .payroll-product-tier-rate-controls .payroll-rate-money-input {
    width: auto;
  }

  .payroll-product-tier-rate-controls .payroll-rate-money-input input {
    width: 92px;
  }

  .payroll-step-actions .muted-note {
    width: 100%;
  }

  .payroll-run-presets-label {
    width: 100%;
  }
}

.platform-oauth-callback {
  border: 1px solid #d3deff;
  border-radius: 14px;
  background:
    radial-gradient(130% 100% at 105% -20%, rgba(73, 89, 247, 0.15), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  padding: 14px;
  margin-top: 10px;
}

.platform-oauth-callback .muted-note {
  margin-top: 10px;
  line-height: 1.55;
}

.platform-oauth-groups {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.platform-oauth-group {
  border: 1px solid #d2ddff;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 98% -20%, rgba(77, 91, 255, 0.12), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.platform-oauth-group-head {
  display: grid;
  gap: 4px;
}

.platform-oauth-group-head h4 {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1d2854;
}

.platform-oauth-group-head .muted-note {
  margin: 0;
  max-width: 74ch;
  line-height: 1.55;
}

.platform-oauth-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.platform-oauth-card {
  border-color: #d4def8;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  display: grid;
  gap: 10px;
  box-shadow: 0 10px 20px rgba(37, 56, 138, 0.08);
}

.platform-oauth-provider-banner {
  min-height: 90px;
  position: relative;
  overflow: hidden;
}

.platform-oauth-provider-banner .app-store-logo-wordmark {
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.06;
}

.platform-oauth-provider-monogram {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.platform-oauth-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.platform-oauth-card-title-row h4 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #1f2a57;
}

.platform-oauth-card-description {
  margin: 0;
  line-height: 1.5;
}

.platform-oauth-fields {
  display: grid;
  gap: 8px;
}

.platform-oauth-fields label {
  margin-bottom: 0;
  font-size: 12px;
  color: #5b6691;
}

.platform-oauth-fields input {
  margin-top: 6px;
}

.platform-oauth-clear-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: #5d688f;
}

.platform-oauth-clear-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.platform-oauth-meta {
  display: grid;
  gap: 4px;
}

.platform-oauth-meta .muted-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.platform-oauth-integrations {
  border-top: 1px dashed #d3dcf4;
  padding-top: 9px;
  display: grid;
  gap: 6px;
}

.platform-oauth-actions {
  margin-top: 2px;
}

.platform-oauth-actions .btn {
  min-width: 148px;
}

.platform-oauth-test-note {
  margin: -2px 0 0;
  font-size: 12px;
}

.platform-oauth-integrations-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #6374b8;
}

.platform-oauth-integration-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.platform-oauth-integration-tags .badge {
  font-size: 11px;
}

.platform-oauth-card--stripe .platform-oauth-provider-banner {
  border-color: rgba(99, 91, 255, 0.45);
}

.platform-oauth-card--google .platform-oauth-provider-banner {
  border-color: rgba(15, 23, 42, 0.14);
}

.platform-oauth-card--microsoft .platform-oauth-provider-banner {
  border-color: rgba(37, 99, 235, 0.24);
}

@media (max-width: 720px) {
  .app-store-catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .app-store-logo-wordmark {
    font-size: 30px;
  }

  .app-store-detail-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .platform-oauth-group {
    padding: 10px;
  }

  .platform-oauth-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-oauth-provider-banner {
    min-height: 74px;
  }

  .platform-oauth-provider-banner .app-store-logo-wordmark {
    font-size: 25px;
  }

  .platform-oauth-card-title-row h4 {
    font-size: 20px;
  }
}

.products-main-content {
  gap: 12px;
}

.availability-page-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.availability-local-nav {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 8px;
  position: sticky;
  top: 74px;
}

.availability-back-btn {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #5a54f4 0%, #4f56ff 100%);
  color: #ffffff;
  font-size: 13px;
}

.availability-local-nav-group {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.availability-local-nav-item {
  width: 100%;
  background: #ffffff;
}

.availability-local-nav-item:hover {
  background: #eef2ff;
}

.availability-local-nav-item.active {
  background: #eef1ff;
  border-color: #d8dffe;
  color: #25369e;
}

.availability-main-content {
  gap: 12px;
}

.availability-overview-group {
  border-top: 1px solid #e9edf9;
  padding-top: 18px;
}

.availability-overview-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.availability-overview-group h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  color: #222b48;
}

.availability-overview-group .muted-note {
  margin-top: 7px;
}

.availability-overview-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.availability-overview-card {
  width: 100%;
  border: 1px solid #dbe1f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}

.availability-overview-card:hover {
  border-color: #c9d2ef;
  box-shadow: 0 5px 14px rgba(32, 52, 114, 0.08);
}

.availability-overview-card > * {
  pointer-events: none;
}

.availability-overview-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #edf1ff;
  background: #f7f9ff;
  color: #4f5876;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
}

.availability-overview-copy {
  display: grid;
  gap: 2px;
}

.availability-overview-copy strong {
  color: #273047;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.availability-overview-copy span {
  color: #68718d;
  font-size: 16px;
  line-height: 1.4;
}

.availability-section-shell {
  display: grid;
  gap: 12px;
}

.availability-section-head h2 {
  margin: 0;
  font-size: 30px;
  color: #222b48;
}

.business-hours-editor {
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  overflow: hidden;
}

.business-hours-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 92px minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid #e8edfb;
}

.business-hours-row:first-child {
  border-top: 0;
}

.business-hours-day strong {
  font-size: 14px;
  color: #293354;
}

.business-hours-open-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #4b567a;
  font-size: 13px;
}

.business-hours-open-toggle input {
  width: auto;
  margin: 0;
}

.business-hours-row label {
  margin: 0;
  font-size: 12px;
  color: #5b6486;
}

.business-hours-time-label {
  display: inline-block;
  margin-bottom: 4px;
}

.business-hours-row input[type="time"] {
  width: 100%;
  margin: 0;
}

.business-hours-row input[type="time"]:disabled {
  background: #f3f5fc;
  color: #9ca4bf;
}

.business-hours-advanced summary {
  cursor: pointer;
  color: #3e4b7a;
  font-weight: 700;
}

.business-hours-advanced .muted-note {
  margin-top: 8px;
  margin-bottom: 8px;
}

.availability-business-hours-note {
  margin: 0 0 14px;
}

.availability-business-hours-form {
  gap: 16px;
}

.availability-business-hours-editor {
  border: 0;
  border-radius: 0;
  overflow: visible;
  display: grid;
  gap: 12px;
}

.availability-business-hours-row {
  grid-template-columns: minmax(140px, 1fr) 100px minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #ffffff;
  align-items: end;
}

.availability-business-hours-row.is-closed {
  background: #f9fbff;
}

.availability-business-hours-day {
  display: grid;
  gap: 2px;
  align-self: center;
}

.availability-business-hours-day strong {
  font-size: 15px;
}

.availability-business-hours-day-meta {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a84a6;
}

.availability-business-hours-row.is-open .availability-business-hours-day-meta {
  color: #2f8a55;
}

.availability-business-hours-open-toggle {
  justify-self: start;
  align-self: center;
  padding: 5px 10px;
  border: 1px solid #dbe1f0;
  border-radius: 999px;
  background: #f7f9ff;
}

.availability-business-hours-time-field {
  display: grid;
  gap: 6px;
}

.availability-business-hours-time-label {
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6a7598;
}

.availability-business-hours-row input[type="time"] {
  height: 40px;
}

.availability-business-hours-row.is-closed input[type="time"] {
  background: #f4f7ff;
  border-color: #d3ddff;
  color: #9ca5c5;
}

.availability-business-hours-actions {
  justify-content: flex-end;
  border-top: 1px solid #e8edfb;
  padding-top: 12px;
}

.twilight-availability-panel {
  display: grid;
  gap: 12px;
}

.twilight-default-card {
  border: 1px solid #dbe1f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  overflow: hidden;
}

.twilight-default-card-head {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(280px, 1fr);
  align-items: start;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e8edfb;
}

.twilight-default-card-kicker {
  margin: 0 0 4px;
  color: #5d74d7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twilight-default-card-copy h3 {
  margin: 0;
  color: #273047;
  font-size: 36px;
  line-height: 1.1;
}

.twilight-default-card-copy p {
  margin: 8px 0 0;
  color: #67708d;
  line-height: 1.5;
  max-width: 620px;
}

.twilight-default-card-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-self: center;
}

.twilight-summary-chip {
  border: 1px solid #dbe3fb;
  border-radius: 12px;
  background: #f7f9ff;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}

.twilight-summary-chip span {
  color: #63709a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.twilight-summary-chip strong {
  color: #283254;
  font-size: 20px;
  line-height: 1.1;
}

.twilight-summary-chip small {
  color: #6f7c9f;
  font-size: 12px;
}

.twilight-grid-head {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 120px 120px 120px;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-bottom: 1px solid #e8edfb;
  background: #f6f8ff;
  color: #62709b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.twilight-grid-head span {
  text-align: center;
}

.twilight-grid-head span:first-child {
  text-align: left;
}

.twilight-grid-body {
  display: grid;
  gap: 8px;
  padding: 10px 14px 6px;
}

.twilight-grid-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 120px 120px 120px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 9px 8px;
  border: 1px solid #e6ebf9;
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.twilight-grid-row:hover {
  border-color: #ced9f8;
  background: #fcfdff;
  box-shadow: 0 8px 18px rgba(20, 38, 86, 0.06);
}

.twilight-grid-day-wrap {
  display: grid;
  gap: 2px;
  padding-left: 6px;
}

.twilight-grid-day {
  color: #2b3454;
  font-size: 15px;
  font-weight: 700;
}

.twilight-grid-day-meta {
  color: #6f7c9f;
  font-size: 12px;
}

.twilight-grid-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #dce4fb;
  border-radius: 10px;
  background: #f8faff;
  color: #4d5a84;
  font-size: 12px;
  font-weight: 700;
}

.twilight-grid-check span {
  display: none;
}

.twilight-grid-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #4f5df3;
}

.twilight-grid-note {
  margin: 0;
  padding: 2px 22px 12px;
  color: #6b7594;
  font-size: 13px;
  line-height: 1.45;
}

.twilight-card-actions {
  justify-content: flex-end;
  border-top: 1px solid #e8edfb;
  padding: 12px 22px 18px;
}

.twilight-card-actions .btn {
  min-width: 170px;
}

@media (max-width: 760px) {
  .twilight-default-card-head {
    padding: 16px 14px 12px;
  }

  .twilight-default-card-copy h3 {
    font-size: 29px;
  }

  .twilight-default-card-summary {
    grid-template-columns: 1fr;
  }

  .twilight-grid-head {
    display: none;
  }

  .twilight-grid-body {
    padding: 10px;
  }

  .twilight-grid-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .twilight-grid-check {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-content: flex-start;
  }

  .twilight-grid-check span {
    display: inline;
  }

  .twilight-grid-check input {
    order: -1;
  }

  .twilight-grid-note {
    padding: 0 14px 12px;
  }

  .twilight-card-actions {
    justify-content: stretch;
    padding: 10px 14px 14px;
  }

  .twilight-card-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.booking-limits-form {
  gap: 16px;
}

.booking-limits-hero {
  border: 1px solid #d9e2ff;
  border-radius: 16px;
  background: linear-gradient(145deg, #f3f7ff 0%, #ffffff 62%);
  padding: 18px 20px;
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.booking-limits-hero::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(96, 122, 255, 0.2) 0%, rgba(96, 122, 255, 0) 72%);
  pointer-events: none;
}

.booking-limits-hero-main {
  display: grid;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.booking-limits-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  line-height: 1.2;
  color: #4f5f96;
  font-weight: 800;
}

.booking-limits-hero h3 {
  margin: 0;
  font-size: 49px;
  line-height: 1.02;
  color: #223053;
  max-width: 920px;
}

.booking-limits-hero .muted-note {
  margin: 0;
  max-width: 760px;
}

.booking-limits-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.booking-limits-summary span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d5defd;
  border-radius: 999px;
  background: #ffffff;
  color: #3d4d78;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
}

.booking-limits-summary strong {
  color: #29365d;
  margin-left: 4px;
}

.booking-limits-layout {
  display: grid;
  gap: 14px;
}

.booking-limits-card {
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.booking-limits-card-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid #e8edfb;
}

.booking-limits-card-head h3 {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  color: #232d4b;
}

.booking-limits-card-head .muted-note {
  margin-top: 4px;
}

.booking-limits-card-body {
  padding: 14px 18px;
  display: grid;
  gap: 12px;
}

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

.booking-limits-field {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #2f3959;
  font-weight: 700;
}

.booking-limits-rule {
  padding: 12px;
  border: 1px solid #e4e9fa;
  border-radius: 12px;
  background: #fbfcff;
}

.booking-limits-toggle {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #303a5a;
  font-weight: 700;
}

.booking-limits-toggle input {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.booking-limits-inline-field {
  display: grid;
  grid-template-columns: minmax(110px, 220px) auto;
  align-items: stretch;
  max-width: 430px;
}

.booking-limits-inline-field input {
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.booking-limits-inline-field span {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #b9c7ff;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: #f7f9ff;
  color: #44507a;
  font-size: 14px;
  line-height: 1.3;
}

.booking-limits-travel-toggle {
  align-content: start;
}

.booking-limits-impact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.booking-limits-impact-list li {
  margin: 0;
  border: 1px solid #e4e9fa;
  border-radius: 10px;
  background: #fbfcff;
  padding: 10px 12px;
  color: #3a4669;
  font-size: 14px;
  line-height: 1.45;
}

.booking-limits-impact-list strong {
  color: #27345a;
}

.booking-limits-actions {
  justify-content: flex-end;
  border-top: 1px solid #e8edfb;
  padding-top: 12px;
}

.booking-limits-redesign .booking-limits-form-v2 {
  gap: 12px;
}

.booking-limits-redesign .booking-limits-intro-board {
  gap: 8px;
  background: #ffffff;
}

.booking-limits-redesign .booking-limits-intro-head {
  align-items: center;
}

.booking-limits-redesign .booking-limits-intro-head h2 {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-family: "Sora", "Segoe UI", sans-serif;
  color: #223256;
}

.booking-limits-redesign .booking-limits-intro-head .muted-note {
  margin-top: 0;
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.45;
  color: #50618a;
}

.booking-limits-redesign .booking-limits-metrics .tax-rates-metric strong {
  font-size: 28px;
  font-weight: 700;
  font-family: "Sora", "Segoe UI", sans-serif;
}

.booking-limits-redesign .booking-limits-metrics .tax-rates-metric span {
  font-size: 12px;
  letter-spacing: 0.04em;
}

.booking-limits-redesign .booking-limits-board {
  display: grid;
  gap: 8px;
}

.booking-limits-redesign .booking-limits-v2-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.booking-limits-redesign .booking-limits-window-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.booking-limits-redesign .booking-limits-travel-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.booking-limits-redesign .booking-limits-rule {
  height: 100%;
  border-color: #d9e3f7;
  background: #ffffff;
  gap: 6px;
  padding: 9px 10px;
}

.booking-limits-redesign .booking-limits-field {
  color: #2f3d63;
  font-weight: 600;
}

.booking-limits-redesign .booking-limits-field > span {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.booking-limits-redesign .booking-limits-rule .muted-note {
  margin-top: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #5b6d95;
}

.booking-limits-redesign .booking-limits-inline-field {
  max-width: 100%;
}

.booking-limits-redesign .booking-limits-inline-field input,
.booking-limits-redesign .booking-limits-inline-field select {
  width: 100%;
}

.booking-limits-redesign .booking-limits-inline-field span {
  font-weight: 600;
}

.booking-limits-redesign .booking-limits-toggle-with-helper {
  align-items: flex-start;
}

.booking-limits-redesign .booking-limits-toggle-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.35;
  font-weight: 600;
  color: #2f3d63;
}

.booking-limits-redesign .tax-rates-board-head h3 {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #24365b;
}

.booking-limits-redesign .tax-rates-board-head .muted-note {
  font-size: 12px;
  line-height: 1.45;
  color: #5b6d95;
}

.booking-limits-helper-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #9cb0ea;
  background: #edf2ff;
  color: #3453be;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  flex: 0 0 auto;
}

.booking-limits-helper-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #d3ddf9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  z-index: 24;
}

.booking-limits-helper-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  width: min(340px, 72vw);
  border-radius: 12px;
  border: 1px solid #d3ddf9;
  background: #ffffff;
  color: #33456f;
  box-shadow: 0 14px 28px rgba(27, 42, 89, 0.16);
  padding: 10px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 25;
}

.booking-limits-helper-tooltip:hover::before,
.booking-limits-helper-tooltip:hover::after,
.booking-limits-helper-tooltip:focus-visible::before,
.booking-limits-helper-tooltip:focus-visible::after {
  opacity: 1;
}

.booking-limits-helper-tooltip:hover::after,
.booking-limits-helper-tooltip:focus-visible::after {
  transform: translateX(-50%) translateY(-2px);
}

.booking-limits-redesign .booking-limits-impact-board {
  gap: 10px;
}

.booking-limits-redesign .booking-limits-impact-list {
  margin: 0;
  gap: 10px;
}

.booking-limits-redesign .booking-limits-impact-list li {
  background: #ffffff;
  border-color: #dde6f8;
  font-size: 15px;
  line-height: 1.48;
  color: #2f3f66;
}

.booking-limits-redesign .booking-limits-actions-v2 {
  border-top: 0;
  padding-top: 0;
}

.booking-limits-redesign .booking-limits-explain-list {
  display: grid;
  gap: 8px;
}

.booking-limits-redesign .booking-limits-explain-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  border: 1px solid #dde6f8;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px 12px;
}

.booking-limits-redesign .booking-limits-explain-key {
  color: #2f416f;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

.booking-limits-redesign .booking-limits-explain-item p {
  margin: 0;
  color: #5d6f97;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 1320px) {
  .booking-limits-redesign .booking-limits-window-grid,
  .booking-limits-redesign .booking-limits-travel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.appointment-settings-redesign .appointment-settings-form-v2 {
  gap: 12px;
}

.appointment-settings-redesign .appointment-settings-intro-board {
  padding-block: 18px;
}

.appointment-settings-redesign .appointment-settings-intro-head {
  align-items: center;
}

.appointment-settings-redesign .appointment-settings-intro-head h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  color: #223056;
}

.appointment-settings-redesign .appointment-settings-intro-head .muted-note {
  margin: 0;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.45;
}

.appointment-settings-redesign .appointment-settings-board {
  display: grid;
  gap: 10px;
}

.appointment-settings-redesign .appointment-settings-grid {
  display: grid;
  gap: 10px;
}

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

.appointment-settings-redesign .appointment-settings-rule {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d7e2f3;
  border-radius: 12px;
  background: #ffffff;
}

.appointment-settings-redesign .appointment-settings-recipient-grid {
  display: grid;
  gap: 8px;
}

.appointment-settings-redesign .appointment-settings-toggle-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #dce6f7;
  border-radius: 10px;
  background: #f9fbff;
}

.appointment-settings-redesign .appointment-settings-toggle-card small {
  margin: 0;
  color: #5d6f97;
  font-size: 13px;
  line-height: 1.4;
  padding-left: 24px;
}

.appointment-settings-redesign .appointment-settings-toggle {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #26385f;
  font-weight: 700;
  line-height: 1.35;
}

.appointment-settings-redesign .appointment-settings-toggle input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.appointment-settings-redesign .appointment-settings-help {
  margin: 0;
  color: #5d6f97;
  font-size: 12px;
  line-height: 1.4;
}

.appointment-settings-redesign .appointment-settings-field {
  margin: 0;
  display: grid;
  gap: 5px;
  color: #30416b;
  font-weight: 600;
}

.appointment-settings-redesign .appointment-settings-field > span {
  font-size: 13px;
  line-height: 1.35;
}

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

.appointment-settings-redesign .appointment-settings-inline-field {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  align-items: stretch;
}

.appointment-settings-redesign .appointment-settings-inline-field input,
.appointment-settings-redesign .appointment-settings-inline-field select {
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.appointment-settings-redesign .appointment-settings-inline-field span {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #b9c7ff;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: #f7f9ff;
  color: #44507a;
  font-size: 14px;
  line-height: 1.3;
}

.appointment-settings-redesign .appointment-settings-note {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #dbe5ff;
  border-radius: 10px;
  background: #f7f9ff;
  color: #4a5884;
  font-size: 12px;
  line-height: 1.45;
}

.appointment-settings-redesign .appointment-settings-main-actions {
  justify-content: flex-end;
}

.appointment-settings-redesign .appointment-settings-actions-v2 {
  border-top: 1px solid #dfe8f6;
  padding-top: 12px;
}

.scheduling-settings-form {
  gap: 16px;
}

.scheduling-settings-hero {
  border: 1px solid #d9e2ff;
  border-radius: 16px;
  background: linear-gradient(145deg, #f3f7ff 0%, #ffffff 62%);
  padding: 18px 20px;
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.scheduling-settings-hero::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(96, 122, 255, 0.22) 0%, rgba(96, 122, 255, 0) 72%);
  pointer-events: none;
}

.scheduling-settings-hero-main {
  display: grid;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.scheduling-settings-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5ea3;
}

.scheduling-settings-hero h3 {
  margin: 0;
  font-size: 38px;
  line-height: 1.05;
  color: #222c49;
  max-width: 880px;
}

.scheduling-settings-hero .muted-note {
  margin: 0;
  max-width: 760px;
  position: relative;
  z-index: 1;
}

.scheduling-settings-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.scheduling-settings-summary span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c6d3ff;
  border-radius: 12px;
  background: #ffffff;
  color: #344778;
  padding: 7px 11px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}

.scheduling-settings-summary strong {
  color: #233056;
  margin-left: 4px;
}

.scheduling-settings-card {
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.scheduling-settings-card-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e8edfb;
}

.scheduling-settings-card-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  color: #232d4b;
}

.scheduling-settings-card-head .muted-note {
  margin-top: 4px;
}

.scheduling-settings-choice-list {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}

.scheduling-settings-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #d8e0f6;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px 14px;
  margin: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.scheduling-settings-choice:hover {
  border-color: #b4c7ff;
}

.scheduling-settings-choice.is-selected {
  border-color: #8ea8ff;
  background: #f3f6ff;
  box-shadow: 0 0 0 1px rgba(86, 107, 255, 0.18);
}

.scheduling-settings-choice input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.scheduling-settings-choice-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.scheduling-settings-choice-copy strong {
  color: #293353;
  font-size: 28px;
  line-height: 1.15;
}

.scheduling-settings-choice-copy small {
  color: #526187;
  font-size: 14px;
  line-height: 1.4;
}

.scheduling-settings-choice-bestfor {
  color: #2f3f7a;
  font-weight: 700;
  margin-top: 2px;
}

.scheduling-settings-footnote {
  margin: -2px 16px 12px;
}

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

.scheduling-settings-field {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #2a3557;
  font-weight: 600;
}

.scheduling-settings-field select {
  max-width: 320px;
}

.scheduling-settings-field-wide {
  grid-column: 1 / -1;
}

.scheduling-settings-field small {
  margin: 0;
  color: #5a6791;
  font-size: 13px;
  line-height: 1.35;
}

.scheduling-settings-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 8px 10px;
  margin: 0;
  color: #2f3a5f;
  font-weight: 700;
}

.scheduling-settings-toggle input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.scheduling-settings-toggle span {
  line-height: 1.35;
}

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

.scheduling-settings-toggle-card {
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #fbfcff;
  padding: 12px;
}

.scheduling-settings-toggle-card small {
  grid-column: 2;
  margin: 0;
  color: #5a6791;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.scheduling-settings-actions {
  justify-content: flex-end;
  border-top: 1px solid #e8edfb;
  padding-top: 14px;
}

@media (min-width: 1200px) {
  .booking-limits-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

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

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

.availability-sync-card {
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 150px;
}

.availability-sync-card h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
  color: #232d4b;
}

.availability-sync-card p {
  margin: 0;
  min-height: 24px;
}

.availability-sync-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.availability-sync-card-head .badge {
  white-space: nowrap;
}

.availability-sync-card-copy {
  max-width: 480px;
  line-height: 1.4;
}

.availability-sync-card .btn {
  justify-self: start;
  width: auto;
  min-width: 150px;
}

.availability-sync-actions {
  margin-top: 4px;
}

.territory-service-shell,
.territory-existing-shell {
  display: grid;
  gap: 16px;
}

.territory-service-shell-redesign {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 18px;
}

.territory-page-v2 {
  gap: 14px;
}

.territory-page-v3 {
  gap: 16px;
}

.territory-page-v4 {
  gap: 18px;
}

.territory-page-v5 {
  gap: 12px;
  border-color: #dbe3f5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(35, 54, 106, 0.04);
}

.territory-page-v6 {
  gap: 22px;
  border-color: #d6e0f6;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  box-shadow: 0 1px 0 rgba(35, 54, 106, 0.04);
  padding: 24px;
}

.territory-page-v6-head {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 20px;
  align-items: start;
}

.territory-page-v6-copy {
  display: grid;
  gap: 8px;
}

.territory-page-v6-copy h3 {
  margin: 0;
  color: #1f2e53;
  font-size: 42px;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.territory-page-v6-copy .muted-note {
  margin: 0;
  color: #5f6d91;
  max-width: 780px;
  font-size: 15px;
  line-height: 1.5;
}

.territory-page-v6-metrics-grid {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.territory-page-v6-metric {
  border: 1px solid #d7e1f8;
  border-radius: 13px;
  background: #ffffff;
  padding: 14px 15px;
  box-shadow: 0 1px 0 rgba(34, 52, 101, 0.03);
}

.territory-page-v6-metric h4 {
  margin-bottom: 2px;
  color: #55658e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.territory-page-v6-metric strong {
  color: #1f2f56;
  font-size: 30px;
  line-height: 1;
}

.territory-policy-card-v6 {
  border: 1px solid #d7e2fb;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7faff 0%, #f2f6ff 100%);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.territory-policy-card-v6 .territory-policy-card-head {
  display: grid;
  gap: 3px;
}

.territory-policy-card-v6 .territory-policy-card-head strong {
  color: #23345d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.territory-policy-card-v6 .territory-policy-card-head span {
  color: #60709a;
  font-size: 13px;
}

.territory-policy-card-v6 .territory-policy-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.8fr);
  gap: 12px 14px;
}

.territory-policy-card-v6 .territory-policy-grid label {
  margin: 0;
  display: grid;
  gap: 6px;
}

.territory-policy-card-v6 .territory-policy-grid label > span {
  color: #3f517f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.territory-policy-card-v6 .territory-policy-grid select,
.territory-policy-card-v6 .territory-policy-grid textarea {
  border-color: #c9d6fb;
  background: #ffffff;
}

.territory-policy-card-v6 .territory-policy-actions {
  margin-top: 0;
}

.territory-page-v6-list-card {
  border: 1px solid #dce4fa;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.territory-map-list-v6 {
  border: 0;
  background: transparent;
  overflow: visible;
  display: grid;
  gap: 10px;
}

.territory-map-row-v6 {
  border: 1px solid #dbe4fb;
  border-radius: 12px;
  background: #fbfcff;
  padding: 12px 14px;
}

.territory-map-row-v6:first-child {
  border-top: 1px solid #dbe4fb;
}

.territory-map-row-main-v6 {
  gap: 14px;
}

.territory-map-row-copy-v6 {
  gap: 6px;
}

.territory-map-row-copy-v6 .territory-map-row-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.territory-map-row-copy-v6 .territory-map-row-headline strong {
  font-size: 24px;
  color: #1f2e52;
  line-height: 1.1;
}

.territory-map-row-copy-v6 .territory-map-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #5f6f96;
  font-size: 13px;
  line-height: 1.35;
}

.territory-map-row-copy-v6 small {
  color: #62749f;
  font-size: 13px;
  line-height: 1.4;
}

.territory-map-row-copy-v6 .territory-map-row-note {
  color: #3f5aa6;
}

.territory-map-row-team-v6 {
  gap: 8px;
}

.territory-page-v6 .territory-create-shell.territory-create-shell-v6 {
  margin-left: 0;
  width: 100%;
  border: 1px solid #dbe4fb;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.territory-create-summary-v6 {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #f7faff 0%, #f0f5ff 100%);
}

.territory-create-summary-v6::marker {
  display: none;
}

.territory-create-summary-v6::-webkit-details-marker {
  display: none;
}

.territory-create-summary-v6::after {
  content: "New Service Area";
  border: 1px solid #c7d6ff;
  border-radius: 999px;
  background: #ffffff;
  color: #3348bb;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  line-height: 1;
  white-space: nowrap;
}

.territory-create-shell-v6[open] .territory-create-summary-v6 {
  border-bottom: 1px solid #dbe4fb;
}

.territory-create-shell-v6[open] .territory-create-summary-v6::after {
  content: "Hide Builder";
}

.territory-create-shell-body-v6 {
  padding: 16px;
  background: #f8faff;
}

.territory-page-v6 .territory-create-workspace {
  grid-template-columns: minmax(0, 1.22fr) minmax(350px, 1fr);
  gap: 14px;
}

.territory-page-v6 .territory-v6-map-panel,
.territory-page-v6 .territory-v6-builder-panel {
  border: 1px solid #dbe4fb;
  border-radius: 13px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(37, 55, 106, 0.03);
}

.territory-page-v6 .territory-v6-map-stage {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 12px;
}

.territory-page-v6 .territory-workspace-head {
  margin-bottom: 12px;
}

.territory-page-v6 .territory-workspace-head h4 {
  font-size: 24px;
  line-height: 1.1;
}

.territory-page-v6 .territory-map-tools {
  gap: 10px;
}

.territory-page-v6 .territory-map-mode-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.territory-page-v6 .territory-map-mode-toggle .btn {
  min-height: 34px;
  padding: 7px 11px;
}

.territory-page-v6 .territory-map-search-row {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

.territory-page-v6 .territory-map-search-row .btn {
  min-height: 42px;
  padding-inline: 15px;
}

.territory-page-v6 .territory-search-results {
  max-height: 240px;
}

.territory-page-v6 .territory-search-result-row {
  padding: 12px 14px;
}

.territory-page-v6 .territory-search-result-main {
  font-size: 16px;
}

.territory-page-v6 .territory-search-result-meta {
  font-size: 12px;
}

.territory-page-v6 .territory-draw-toolbar {
  border: 1px dashed #cfdbff;
  border-radius: 12px;
  background: #f7faff;
  padding: 12px 13px;
  display: grid;
  gap: 10px;
}

.territory-page-v6 .territory-draw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.territory-page-v6 .territory-draw-actions .btn {
  min-height: 34px;
  padding-inline: 12px;
}

.territory-page-v6 .territory-map-canvas,
.territory-page-v6 .territory-map-fallback {
  min-height: 440px;
}

.territory-page-v6 .territory-map-home-base-note {
  font-size: 12px;
  line-height: 1.4;
}

.territory-page-v6 .territory-map-empty {
  padding: 12px 13px;
  font-size: 15px;
}

.territory-page-v6 .territory-map-live-legend {
  padding: 12px 14px;
}

.territory-page-v6 .territory-v6-builder-panel .territory-builder-form {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  gap: 12px;
}

.territory-page-v7 {
  gap: 14px;
}

.territory-page-v7 .territory-v7-header {
  border-color: #d2ddeb;
}

.territory-page-v7 .territory-v7-header-main {
  align-items: center;
}

.territory-page-v7 .territory-v7-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.territory-page-v7 .tax-rates-hero-text {
  max-width: 72ch;
}

.territory-page-v7 .territory-v7-list-board,
.territory-page-v7 .territory-v7-policy-board,
.territory-page-v7 .territory-v7-builder-board {
  display: grid;
  gap: 12px;
}

.territory-page-v7 .territory-map-list-v7 {
  border: 0;
  background: transparent;
  display: grid;
  gap: 8px;
}

.territory-page-v7 .territory-map-row-v6 {
  border: 1px solid #dbe3f6;
  border-radius: 12px;
  padding: 11px 12px;
  background: #fdfefe;
}

.territory-page-v7 .territory-map-row-copy-v6 .territory-map-row-headline strong {
  font-size: 19px;
}

.territory-page-v7 .territory-map-row-copy-v6 small,
.territory-page-v7 .territory-map-row-copy-v6 .territory-map-row-meta {
  font-size: 12px;
}

.territory-policy-card-v7 {
  border: 1px solid #d9e3f7;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fbff 0%, #f5f9ff 100%);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.territory-policy-card-v7 .territory-policy-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.75fr);
  gap: 10px 12px;
}

.territory-policy-card-v7 .territory-policy-grid label {
  margin: 0;
  display: grid;
  gap: 6px;
}

.territory-policy-card-v7 .territory-policy-grid label > span {
  color: #3f517f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.territory-policy-card-v7 .territory-policy-grid select,
.territory-policy-card-v7 .territory-policy-grid textarea {
  border-color: #c8d6f8;
}

.order-create-backdrop.territory-v7-builder-modal-host {
  position: fixed;
  inset: 0;
  z-index: 1400;
  padding: 22px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  background: rgba(15, 22, 51, 0.42);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.order-create-backdrop.territory-v7-policy-modal-host {
  position: fixed;
  inset: 0;
  z-index: 1450;
  padding: 22px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  background: rgba(15, 22, 51, 0.42);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.territory-policy-modal-v7 {
  width: min(980px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  border: 1px solid #d8e2f5;
  border-radius: 16px;
  background: #f8fbff;
  box-shadow: 0 18px 42px rgba(16, 24, 58, 0.24);
  overflow-y: auto;
  display: grid;
  gap: 12px;
}

.territory-policy-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.territory-policy-modal-head h3 {
  margin: 0 0 3px;
}

.territory-policy-modal-head .muted-note {
  margin: 0;
}

.territory-policy-modal-v7 .territory-policy-card-v7 {
  margin: 0;
}

.territory-policy-modal-v8 {
  width: min(1000px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  border: 1px solid #d8e3f8;
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 100%);
  box-shadow: 0 16px 36px rgba(13, 22, 52, 0.2);
  display: grid;
  gap: 14px;
}

.territory-policy-modal-head-v8 {
  padding-bottom: 12px;
  border-bottom: 1px solid #dfe7f8;
}

.territory-policy-modal-title-block {
  display: grid;
  gap: 5px;
}

.territory-policy-modal-eyebrow {
  margin: 0;
  color: #4a5a86;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.territory-policy-modal-head-v8 h3 {
  margin: 0;
  color: #1f2a49;
  font-size: clamp(28px, 2.5vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-family: "Sora", "Segoe UI", sans-serif;
}

.territory-policy-modal-head-v8 .muted-note {
  margin: 0;
  max-width: 78ch;
  color: #526188;
  font-size: 16px;
  line-height: 1.4;
}

.territory-policy-close-btn {
  min-height: 44px;
  min-width: 92px;
}

.territory-policy-modal-body-v8 {
  display: grid;
  gap: 14px;
}

.territory-policy-context-v8 {
  border: 1px solid #d7e2fa;
  border-left: 4px solid #5a68ff;
  border-radius: 12px;
  background: #f4f8ff;
  padding: 12px 14px;
  display: grid;
  gap: 5px;
}

.territory-policy-context-v8 strong {
  color: #2d3c63;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  font-family: "Sora", "Segoe UI", sans-serif;
}

.territory-policy-context-v8 p {
  margin: 0;
  color: #556892;
  font-size: 14px;
  line-height: 1.45;
}

.territory-policy-card-v8 {
  border: 1px solid #d9e4f8;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  gap: 14px;
}

.territory-policy-layout-v8 {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.2fr);
  gap: 14px;
}

.territory-policy-panel-v8 {
  border: 1px solid #d8e2f7;
  border-radius: 12px;
  background: #fbfdff;
  padding: 13px;
  display: grid;
  gap: 9px;
}

.territory-policy-panel-v8 h4 {
  margin: 0;
  color: #22325a;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-family: "Sora", "Segoe UI", sans-serif;
}

.territory-policy-panel-v8 p {
  margin: 0;
  color: #5a6c97;
  font-size: 14px;
  line-height: 1.4;
}

.territory-policy-panel-v8 label {
  margin: 0;
  display: grid;
  gap: 7px;
}

.territory-policy-panel-v8 label > span {
  color: #394c78;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.territory-policy-panel-v8 select,
.territory-policy-panel-v8 textarea {
  border-color: #c8d7f8;
  background: #ffffff;
}

.territory-policy-actions-v8 {
  border-top: 1px solid #e1e8f8;
  padding-top: 14px;
  margin-top: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.territory-policy-actions-v8 .btn {
  min-height: 44px;
  min-width: 120px;
}

.territory-builder-modal-v7 {
  width: min(1240px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  border: 1px solid #d8e2f5;
  border-radius: 16px;
  background: #f8fbff;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.territory-builder-modal-v7 .territory-create-summary-v7 {
  display: none;
}

.territory-builder-modal-v7 .territory-create-shell-body-v7 {
  padding: 16px;
  background: #f8fbff;
  overflow-y: auto;
}

.territory-builder-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.territory-builder-modal-kicker {
  margin: 0 0 3px;
  color: #3f4f81;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.territory-builder-modal-head h3 {
  margin: 0 0 3px;
}

.territory-builder-modal-head .muted-note {
  margin: 0;
}

.territory-page-v7 .territory-create-shell.territory-create-shell-v7 {
  width: 100%;
  margin: 0;
  border: 1px solid #d8e2f4;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.territory-v7-builder-modal-host .territory-create-shell.territory-create-shell-v7.territory-builder-modal-v7 {
  width: min(1240px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  border-radius: 16px;
  margin: auto;
}

.territory-create-summary-v7 {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(180deg, #f9fcff 0%, #f3f8ff 100%);
}

.territory-create-summary-v7::marker {
  display: none;
}

.territory-create-summary-v7::-webkit-details-marker {
  display: none;
}

.territory-create-summary-v7 .territory-create-summary-copy {
  display: grid;
  gap: 3px;
}

.territory-create-summary-v7 .territory-create-summary-label {
  font-size: 11px;
  letter-spacing: 0.05em;
}

.territory-create-summary-v7 .territory-create-summary-copy strong {
  font-size: 29px;
  line-height: 1.08;
}

.territory-create-summary-v7 .territory-create-summary-copy small {
  color: #56688f;
  font-size: 13px;
}

.territory-create-summary-v7 .territory-create-summary-pill {
  border: 1px solid #c9d8ff;
  border-radius: 999px;
  background: #ffffff;
  min-height: 34px;
  padding: 8px 12px;
  color: transparent;
  font-size: 0;
  line-height: 1;
  white-space: nowrap;
}

.territory-create-summary-v7 .territory-create-summary-pill::after {
  content: "Open Builder";
  color: #3348bb;
  font-size: 12px;
  font-weight: 700;
}

.territory-create-shell-v7[open] .territory-create-summary-v7 {
  border-bottom: 1px solid #dce5f8;
}

.territory-create-shell-v7[open] .territory-create-summary-v7 .territory-create-summary-pill::after {
  content: "Hide Builder";
}

.territory-create-shell-body-v7 {
  padding: 14px;
  background: #f8fbff;
}

.territory-page-v7 .territory-create-workspace-v7 {
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr);
  gap: 16px;
}

.territory-page-v7 .territory-v7-map-panel,
.territory-page-v7 .territory-v7-builder-panel {
  border: 1px solid #dbe4f6;
  border-radius: 13px;
  background: #ffffff;
  padding: 14px;
}

.territory-page-v7 .territory-v7-map-stage {
  border: 0;
  background: transparent;
  padding: 0;
}

.territory-page-v7 .territory-map-search-row {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

.territory-page-v7 .territory-radius-controls {
  grid-template-columns: minmax(170px, 1fr) 170px;
}

.territory-page-v7 .territory-map-canvas,
.territory-page-v7 .territory-map-fallback {
  min-height: 410px;
}

.territory-page-v7 .territory-map-live-legend {
  margin-top: 6px;
}

.territory-page-v7 .territory-builder-form.territory-v7-form {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.territory-page-v7 .territory-v7-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.territory-page-v7 .territory-auto-coverage-note-v7,
.territory-page-v7 .territory-v2-coverage-block-v7 {
  background: #f8fbff;
}

.territory-page-v7 .territory-radius-controls {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 180px);
}

.territory-page-v5-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 2px 0;
}

.territory-page-v5-copy {
  display: grid;
  gap: 4px;
  min-width: 280px;
}

.territory-page-v5-copy h3 {
  margin: 0;
  color: #202c4a;
  font-size: 30px;
  line-height: 1.06;
}

.territory-page-v5-copy .muted-note {
  margin: 0;
  color: #5b6788;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.45;
}

.territory-page-v5-metrics-grid {
  width: min(560px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.territory-page-v5-metric {
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid #d9e2f7;
  background: #fdfefe;
  box-shadow: none;
}

.territory-page-v5-metric h4 {
  margin-bottom: 3px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.territory-page-v5-metric strong {
  font-size: 26px;
  line-height: 1.06;
}

.territory-policy-banner-v5 {
  border-left-width: 3px;
  background: #f7f9ff;
  border-color: #dbe3f7;
  color: #2f3b57;
  border-radius: 10px;
  padding: 10px 12px;
}

.territory-page-v5-list-card {
  border: 1px solid #dbe3f5;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.territory-map-list-v5 {
  border: 0;
  background: transparent;
  overflow: visible;
  display: grid;
  gap: 8px;
}

.territory-map-list-v5 .territory-map-row {
  border: 1px solid #dce4f8;
  border-radius: 10px;
  background: #fcfdff;
  padding: 10px 12px;
}

.territory-map-list-v5 .territory-map-row:first-child {
  border-top: 1px solid #dce4f8;
}

.territory-map-list-v5 .territory-map-list-empty {
  border: 1px dashed #d3ddf0;
  border-radius: 12px;
  background: #f9fbff;
}

.territory-page-v5 .territory-create-shell.territory-create-shell-v5 {
  margin-left: 0;
  width: 100%;
  border: 1px solid #dbe3f5;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.territory-page-v5 .territory-create-shell.territory-create-shell-v5[open] {
  width: 100%;
  margin-left: 0;
}

.territory-create-summary-v5 {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
}

.territory-create-summary-v5::marker {
  display: none;
}

.territory-create-summary-v5::-webkit-details-marker {
  display: none;
}

.territory-create-summary-v5::after {
  content: "Open Builder";
  border: 1px solid #ccdafb;
  border-radius: 999px;
  background: #eef3ff;
  color: #3048b7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 11px;
  white-space: nowrap;
}

.territory-create-shell-v5[open] .territory-create-summary-v5 {
  border-bottom: 1px solid #dbe3f5;
  background: #f7faff;
}

.territory-create-shell-v5[open] .territory-create-summary-v5::after {
  content: "Hide Builder";
}

.territory-create-shell-body-v5 {
  padding: 12px;
  background: #f8faff;
}

.territory-page-v5 .territory-create-workspace {
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 1fr);
  gap: 12px;
}

.territory-page-v5 .territory-v5-map-panel,
.territory-page-v5 .territory-v5-builder-panel {
  border: 1px solid #dbe3f8;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
}

.territory-page-v5 .territory-v5-map-stage {
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
}

.territory-page-v5 .territory-v5-builder-panel .territory-builder-form {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.territory-page-v5 .territory-workspace-head {
  gap: 2px;
  margin-bottom: 8px;
}

.territory-page-v5 .territory-workspace-head h4 {
  font-size: 20px;
  line-height: 1.12;
}

.territory-page-v5 .territory-v2-step-label {
  font-size: 10px;
  letter-spacing: 0.05em;
}

.territory-page-v5 .territory-map-tools {
  gap: 8px;
}

.territory-page-v5 .territory-map-method-help {
  font-size: 13px;
  line-height: 1.35;
}

.territory-page-v5 .territory-map-search-row {
  gap: 6px;
}

.territory-page-v5 .territory-map-search-row .btn {
  min-height: 38px;
  padding-inline: 14px;
}

.territory-page-v5 .territory-search-results {
  max-height: 188px;
}

.territory-page-v5 .territory-search-results-empty {
  padding: 10px 12px;
  font-size: 12px;
}

.territory-page-v5 .territory-search-result-row {
  padding: 8px 11px;
  gap: 1px;
}

.territory-page-v5 .territory-search-result-main {
  font-size: 14px;
}

.territory-page-v5 .territory-search-result-meta {
  font-size: 11px;
}

.territory-page-v5 .territory-map-canvas,
.territory-page-v5 .territory-map-fallback {
  min-height: 320px;
}

.territory-page-v5 .territory-map-fallback-embed,
.territory-page-v5 .territory-map-fallback-empty {
  min-height: 320px;
}

.territory-page-v5 .territory-map-fallback-frame {
  min-height: 280px;
}

.territory-page-v5 .territory-map-home-base-note {
  font-size: 12px;
  line-height: 1.35;
}

.territory-page-v5 .territory-map-empty {
  padding: 10px 12px;
  font-size: 14px;
}

.territory-page-v5 .territory-map-live-legend {
  padding: 8px 10px;
  gap: 6px;
}

.territory-page-v5 .territory-map-live-legend-head strong {
  font-size: 12px;
}

.territory-page-v5 .territory-map-live-legend-head span {
  font-size: 11px;
}

.territory-page-v5 .territory-map-legend-copy strong {
  font-size: 11px;
}

.territory-page-v5 .territory-map-legend-copy small {
  font-size: 10px;
}

.territory-page-v5 .territory-builder-form {
  gap: 10px;
}

.territory-page-v5 .territory-builder-form-head {
  gap: 3px;
}

.territory-page-v5 .territory-builder-form-head h4 {
  font-size: 22px;
  line-height: 1.12;
}

.territory-page-v5 .territory-builder-form-head .muted-note {
  font-size: 13px;
  line-height: 1.35;
}

.territory-page-v5 .territory-card-grid-v2 {
  gap: 10px;
}

.territory-page-v5 .territory-v2-coverage-block {
  padding: 9px;
  gap: 8px;
}

.territory-page-v5 .territory-coverage-chip-list {
  min-height: 40px;
  padding: 7px;
  gap: 5px;
}

.territory-page-v5 .territory-builder-advanced {
  padding: 9px 10px;
}

.territory-page-v5 .territory-builder-advanced[open] summary {
  margin-bottom: 8px;
}

.territory-page-v5 .territory-builder-actions {
  margin-top: 2px;
}

.territory-page-v4-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 1fr);
  gap: 16px;
  align-items: stretch;
  border: 1px solid #dbe4ff;
  border-radius: 14px;
  background: linear-gradient(135deg, #f3f7ff 0%, #ffffff 62%);
  padding: 16px;
}

.territory-page-v4-hero-copy {
  display: grid;
  gap: 8px;
}

.territory-page-v4-kicker {
  margin: 0;
  color: #455a91;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.territory-page-v4-hero-copy h3 {
  margin: 0;
  font-size: 36px;
  line-height: 1.02;
  color: #1f2d4f;
}

.territory-page-v4-hero-copy .muted-note {
  margin: 0;
  max-width: 760px;
  color: #536590;
}

.territory-page-v4-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.territory-page-v4-metric {
  border: 1px solid #d8e1fb;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 2px;
  box-shadow: 0 1px 0 rgba(36, 53, 105, 0.04);
}

.territory-page-v4-metric span {
  color: #4f6396;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.territory-page-v4-metric strong {
  color: #222f55;
  font-size: 24px;
  line-height: 1.1;
}

.territory-page-v4-metric small {
  color: #6978a1;
  font-size: 12px;
  line-height: 1.3;
}

.territory-page-v4-list-card {
  border: 1px solid #dce4fb;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.territory-map-list-v4 {
  border: 0;
  background: transparent;
  overflow: visible;
  display: grid;
  gap: 10px;
}

.territory-map-list-v4 .territory-map-row {
  border: 1px solid #dce3f9;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(36, 53, 105, 0.04);
  padding: 12px 14px;
}

.territory-map-list-v4 .territory-map-row:first-child {
  border-top: 1px solid #dce3f9;
}

.territory-map-row-is-inactive {
  background: #f9fbff;
}

.territory-map-list-v4 .territory-map-list-empty {
  border: 1px dashed #cad8ff;
  border-radius: 12px;
  background: #f7faff;
  min-height: 96px;
  padding: 18px;
}

.territory-create-shell-v4 {
  margin-left: 0;
  width: 100%;
  border: 1px solid #d5e1ff;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(33, 50, 103, 0.04);
}

.territory-create-summary-v4 {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  background: linear-gradient(180deg, #f7fbff 0%, #edf3ff 100%);
}

.territory-create-summary-v4::marker {
  display: none;
}

.territory-create-summary-v4::-webkit-details-marker {
  display: none;
}

.territory-create-summary-v4::after {
  content: "Open Builder";
  border: 1px solid #c2d3ff;
  border-radius: 999px;
  background: #ffffff;
  color: #3048b7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 11px;
  white-space: nowrap;
}

.territory-create-shell-v4[open] .territory-create-summary-v4 {
  border-bottom: 1px solid #dbe4ff;
}

.territory-create-shell-v4[open] .territory-create-summary-v4::after {
  content: "Hide Builder";
}

.territory-create-summary-copy {
  display: grid;
  gap: 3px;
}

.territory-create-summary-label {
  color: #4d5d87;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.territory-create-summary-copy strong {
  color: #243256;
  font-size: 19px;
  line-height: 1.2;
}

.territory-create-summary-copy small {
  color: #5f7099;
  font-size: 13px;
  line-height: 1.35;
}

.territory-create-shell-body-v4 {
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.territory-create-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

.territory-v4-map-panel,
.territory-v4-builder-panel {
  height: 100%;
  border-color: #d8e2fb;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(36, 53, 105, 0.03);
}

.territory-workspace-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.territory-workspace-head h4 {
  margin: 0;
  color: #223154;
  font-size: 20px;
  line-height: 1.2;
}

.territory-v4-map-stage {
  gap: 10px;
}

.territory-page-v2-hero {
  display: grid;
  gap: 4px;
}

.territory-page-v3-hero h3 {
  font-size: 30px;
  line-height: 1.1;
}

.territory-page-v2-hero h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.08;
  color: #212b49;
}

.territory-page-v2-hero .muted-note {
  margin: 0;
}

.territory-map-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.territory-map-toolbar h3 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  color: #222c49;
}

.territory-map-toolbar .muted-note {
  margin-top: 6px;
}

.territory-policy-banner {
  display: grid;
  gap: 4px;
  border: 1px solid #ccd9ff;
  border-radius: 12px;
  border-left: 4px solid #4f61d8;
  background: linear-gradient(180deg, #f2f6ff 0%, #ecf2ff 100%);
  color: #2b3863;
  padding: 12px 14px 12px 12px;
}

.territory-policy-banner strong {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.territory-policy-banner span {
  font-size: 13px;
  line-height: 1.45;
}

.territory-builder-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.35fr);
}

.territory-builder-layout-v2 {
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.4fr);
}

.territory-v3-map-panel,
.territory-v3-builder-panel {
  border: 1px solid #dbe3fb;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px;
}

.territory-v3-map-stage {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.territory-v3-map-tools {
  gap: 12px;
}

.territory-v3-form {
  border: 0;
  background: transparent;
  padding: 0;
}

.territory-builder-form {
  margin-top: 0;
  border: 1px solid #dbe3fb;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.territory-builder-form-head {
  display: grid;
  gap: 4px;
}

.territory-builder-form-head h4 {
  margin: 0;
  color: #25304f;
  font-size: 19px;
  line-height: 1.2;
}

.territory-builder-form-head .muted-note {
  margin: 0;
}

.territory-v2-form {
  gap: 14px;
}

.territory-card-grid-v2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.territory-auto-coverage-note {
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  background: #f6f9ff;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}

.territory-auto-coverage-note span {
  color: #3d4d79;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.territory-auto-coverage-note strong {
  color: #223258;
  font-size: 17px;
  line-height: 1.2;
}

.territory-auto-coverage-note .muted-note {
  margin: 0;
}

.territory-v2-coverage-block {
  border: 1px solid #dce4fb;
  border-radius: 12px;
  background: #f9fbff;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.territory-v2-coverage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.territory-v2-coverage-head span {
  color: #2b3860;
  font-size: 13px;
  font-weight: 700;
}

.btn-xs {
  padding: 5px 9px;
  font-size: 12px;
  min-height: 28px;
}

.territory-coverage-chip-list {
  min-height: 44px;
  border: 1px dashed #ccd7fb;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.territory-coverage-chip-empty {
  color: #69789f;
  font-size: 12px;
  line-height: 1.3;
}

.territory-coverage-chip {
  border: 1px solid #cfdbff;
  border-radius: 999px;
  background: #edf2ff;
  color: #2a3f76;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.territory-coverage-chip:hover {
  background: #e3ebff;
  border-color: #b9caff;
}

.territory-v2-coverage-textarea {
  margin: 0;
}

.territory-builder-advanced {
  border: 1px solid #dee6ff;
  border-radius: 12px;
  background: #f9fbff;
  padding: 10px;
}

.territory-builder-advanced summary {
  cursor: pointer;
  user-select: none;
  color: #303f6d;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.territory-builder-advanced summary::marker {
  display: none;
}

.territory-builder-advanced summary::-webkit-details-marker {
  display: none;
}

.territory-builder-advanced summary::before {
  content: "▸";
  color: #4a5a86;
  font-size: 12px;
  line-height: 1;
  transform-origin: center;
  transition: transform 140ms ease;
}

.territory-builder-advanced[open] summary::before {
  transform: rotate(90deg);
}

.territory-builder-advanced[open] summary {
  margin-bottom: 10px;
}

.territory-create-shell {
  margin-left: auto;
}

.territory-create-shell[open] {
  width: min(920px, 100%);
}

.territory-create-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.territory-create-summary::marker {
  display: none;
}

.territory-create-summary::-webkit-details-marker {
  display: none;
}

.territory-create-form {
  margin-top: 12px;
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.territory-map-stage {
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.territory-v2-map-stage {
  gap: 12px;
}

.territory-v2-step-label {
  color: #32416f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.territory-map-tools {
  display: grid;
  gap: 10px;
}

.territory-map-method-help {
  margin: 0;
}

.territory-radius-controls {
  border: 1px solid #d9e3ff;
  border-radius: 12px;
  background: #f8fbff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(150px, 190px);
  gap: 10px;
  align-items: end;
}

.territory-radius-controls.is-disabled {
  opacity: 0.62;
}

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

.territory-radius-field span {
  color: #32416f;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.territory-radius-field select,
.territory-radius-field input {
  min-height: 42px;
}

.territory-radius-note {
  grid-column: 1 / -1;
  margin: 0;
}

.territory-map-search-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
}

.territory-map-search-row input {
  min-width: 0;
}

.territory-search-results {
  border: 1px solid #d9e3ff;
  border-radius: 12px;
  background: #ffffff;
  max-height: 214px;
  overflow: auto;
  display: grid;
}

.territory-search-results.is-empty {
  min-height: 74px;
}

.territory-search-results-empty {
  padding: 12px 13px;
  color: #5f7099;
  font-size: 13px;
  line-height: 1.4;
}

.territory-search-result-row {
  border: 0;
  border-top: 1px solid #ebeffb;
  background: #ffffff;
  text-align: left;
  padding: 9px 12px;
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.territory-search-result-row:first-child {
  border-top: 0;
}

.territory-search-result-row:hover {
  background: #f8faff;
}

.territory-search-result-row.is-selected {
  background: #eef3ff;
}

.territory-search-result-main {
  color: #243459;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.territory-search-result-meta {
  color: #60709a;
  font-size: 12px;
  line-height: 1.35;
}

.territory-search-preview {
  border: 1px solid #d6e0ff;
  border-radius: 14px;
  background: #f8faff;
  padding: 10px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.territory-search-preview-map {
  width: 100%;
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #cfdcff;
  background: #e7eeff;
}

.territory-search-preview-copy {
  display: grid;
  gap: 6px;
}

.territory-search-preview-copy strong {
  color: #24345e;
  font-size: 20px;
  line-height: 1.2;
}

.territory-search-preview-copy span {
  color: #576892;
  font-size: 13px;
  line-height: 1.4;
}

.territory-map-canvas {
  width: 100%;
  min-height: 380px;
  border: 1px solid #d8e0ff;
  border-radius: 12px;
  overflow: hidden;
  background: #eef2ff;
}

.territory-map-draw-control .territory-map-draw-btn {
  width: 30px;
  height: 30px;
  border: 0;
  background: #ffffff;
  color: #22355f;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

.territory-map-draw-control .territory-map-radius-btn {
  width: 30px;
  height: 30px;
  border: 0;
  background: #ffffff;
  color: #22355f;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

.territory-map-draw-control .territory-map-draw-btn:hover {
  background: #f2f6ff;
}

.territory-map-draw-control .territory-map-radius-btn:hover {
  background: #f2f6ff;
}

.territory-map-draw-control .territory-map-draw-btn.is-active {
  background: #eef2ff;
  color: #304cff;
}

.territory-map-draw-control .territory-map-draw-btn.is-ready {
  background: #4d5bff;
  color: #ffffff;
}

.territory-map-draw-control .territory-map-radius-btn.is-active {
  background: #eef2ff;
  color: #304cff;
}

.territory-map-fallback {
  width: 100%;
  min-height: 380px;
  border: 1px solid #d8e0ff;
  border-radius: 12px;
  overflow: hidden;
  background: #eef2ff;
}

.territory-map-fallback-embed {
  min-height: 380px;
  display: grid;
  grid-template-rows: 1fr auto;
}

.territory-map-fallback-frame {
  width: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}

.territory-map-fallback-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #dbe1f0;
  background: #ffffff;
  color: #4f5e85;
  font-size: 13px;
}

.territory-map-fallback-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.territory-map-fallback-meta a {
  color: #3346c7;
  font-weight: 700;
  text-decoration: none;
}

.territory-map-fallback-empty {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  color: #44537b;
  font-weight: 600;
}

.territory-map-home-base-note {
  margin: 0;
}

.territory-map-empty {
  margin: 0;
  border: 1px dashed #d4ddfb;
  border-radius: 12px;
  color: #40527f;
  background: #f6f8ff;
  padding: 12px;
  font-weight: 600;
}

.territory-map-live-legend {
  margin-top: 2px;
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #fbfdff;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.territory-map-live-legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.territory-map-live-legend-head strong {
  color: #2b3758;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.territory-map-live-legend-head span {
  color: #5a6993;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.territory-map-overlay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5d6d97;
  font-size: 12px;
  line-height: 1.4;
}

.territory-map-overlay-toggle input {
  width: 14px;
  height: 14px;
}

.territory-map-live-legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.territory-map-live-legend-empty {
  color: #6677a3;
  font-size: 12px;
  line-height: 1.4;
}

.territory-map-legend-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.territory-map-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(30, 48, 105, 0.2);
  flex-shrink: 0;
}

.territory-map-legend-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.territory-map-legend-copy strong {
  color: #2b3758;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}

.territory-map-legend-copy small {
  color: #60709a;
  font-size: 11px;
  line-height: 1.2;
}

.territory-map-list {
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.territory-map-list-empty {
  min-height: 88px;
  padding: 16px 18px;
  display: grid;
  gap: 4px;
  align-content: center;
  background: linear-gradient(180deg, #fbfcff 0%, #f6f9ff 100%);
}

.territory-map-list-empty strong {
  color: #2c385a;
  font-size: 15px;
  line-height: 1.3;
}

.territory-map-list-empty span {
  color: #60709a;
  font-size: 13px;
  line-height: 1.4;
}

.territory-map-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #e9eefb;
}

.territory-map-row:first-child {
  border-top: 0;
}

.territory-map-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.territory-map-row-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
}

.territory-map-row-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.territory-map-row-copy strong {
  color: #273048;
  font-size: 16px;
  line-height: 1.2;
}

.territory-map-row-copy span {
  color: #637091;
  font-size: 13px;
  line-height: 1.4;
}

.territory-map-row-copy-v2 {
  gap: 3px;
}

.territory-map-row-copy-v2 small {
  color: #6a789f;
  font-size: 12px;
  line-height: 1.35;
}

.territory-map-row-team {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.territory-edit-btn {
  color: #2a4ecf;
  border-color: #c8d7ff;
  background: #f3f7ff;
}

.territory-edit-btn:hover {
  background: #eaf1ff;
}

.territory-delete-btn {
  color: #8a2f2f;
  border-color: #efc5c5;
  background: #fff5f5;
}

.territory-delete-btn:hover {
  background: #ffe9e9;
}

.territory-map-row-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.territory-map-row-status-active {
  color: #0d8b5f;
  background: #e6f8ef;
  border: 1px solid #b8ebcf;
}

.territory-map-row-status-inactive {
  color: #8a2f2f;
  background: #ffeaea;
  border: 1px solid #f4b5b5;
}

.territory-map-row-team .muted-note {
  margin: 0;
}

.territory-member-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #d0d7ea;
  background: #f2f5ff;
  color: #3d4a7c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.territory-member-avatar-extra {
  border-style: dashed;
  background: #ffffff;
  color: #5f698d;
}

.section-headline h3 {
  margin: 0;
  color: #25304f;
  font-size: 24px;
  line-height: 1.2;
}

.section-headline .muted-note {
  margin-top: 5px;
}

.territory-existing-grid {
  display: grid;
  gap: 12px;
}

.territory-current-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.territory-current-list-head h4 {
  margin: 0;
  color: #233153;
  font-size: 19px;
}

.territory-current-list-head span {
  color: #5e6a8d;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.territory-card {
  border: 1px solid #dbe1f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.territory-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.territory-card-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.territory-card-title h3 {
  margin: 0;
  color: #25304f;
  font-size: 20px;
  line-height: 1.2;
}

.territory-card-title .muted-note {
  margin-top: 4px;
}

.territory-card-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.territory-card-grid label {
  margin: 0;
  color: #5f698b;
  font-size: 12px;
  display: grid;
  gap: 4px;
}

.territory-color-field {
  min-width: 0;
}

.territory-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.territory-color-input {
  width: 112px;
  min-width: 112px;
  height: 38px;
  margin-top: 0;
  border: 1px solid #d3daf1;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
}

.territory-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.territory-color-input::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}

.territory-color-input::-moz-color-swatch {
  border: 0;
  border-radius: 6px;
}

.territory-card-grid textarea {
  min-height: 86px;
  resize: vertical;
}

.territory-card-grid-wide {
  grid-column: 1 / -1;
}

.territory-card-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.territory-tab-btn {
  border: 1px solid #d8def3;
  border-radius: 999px;
  background: #f8faff;
  color: #4d5779;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 7px 13px;
  cursor: pointer;
}

.territory-tab-btn.active {
  border-color: #c6d2ff;
  background: #eef2ff;
  color: #3344c6;
}

.territory-tab-panel {
  border: 1px solid #e2e8f8;
  border-radius: 10px;
  background: #fbfcff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.territory-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334066;
  font-size: 13px;
  font-weight: 700;
}

.territory-inline-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.territory-team-list {
  display: grid;
  gap: 8px;
}

.territory-team-help {
  margin: 0 0 2px;
}

.territory-team-option {
  margin: 0;
  border: 1px solid #d7dff9;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.territory-team-option input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.territory-team-option-copy {
  display: grid;
  gap: 2px;
}

.territory-team-option-copy strong {
  color: #263159;
  font-size: 13px;
}

.territory-team-option-copy small {
  color: #647099;
  font-size: 12px;
}

.products-overview-group {
  border-top: 1px solid #e9edf9;
  padding-top: 18px;
}

.products-overview-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.products-overview-group h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  color: #222b48;
}

.products-overview-group .muted-note {
  margin-top: 7px;
}

.products-overview-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.products-overview-grid-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 520px;
}

.products-overview-card {
  width: 100%;
  border: 1px solid #dbe1f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}

.products-overview-card:hover {
  border-color: #c9d2ef;
  box-shadow: 0 5px 14px rgba(32, 52, 114, 0.08);
}

.products-overview-card > * {
  pointer-events: none;
}

.products-overview-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #edf1ff;
  background: #f7f9ff;
  color: #4f5876;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.products-overview-copy {
  display: grid;
  gap: 2px;
}

.products-overview-copy strong {
  color: #273047;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.products-overview-copy span {
  color: #68718d;
  font-size: 16px;
  line-height: 1.4;
}

.products-catalog-shell {
  display: grid;
  gap: 14px;
}

.products-services-head {
  border-top: 1px solid #e9edf9;
  border-bottom: 1px solid #e9edf9;
  padding: 12px 0 8px;
  margin-bottom: 8px;
}

.products-services-head h2 {
  margin: 0;
  font-size: 28px;
  color: #1f2641;
}

.products-services-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.products-services-tabs-divider {
  width: 1px;
  height: 28px;
  background: #d7def2;
  border-radius: 999px;
  flex: 0 0 auto;
}

.products-services-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6a738f;
  font-weight: 700;
  font-size: 20px;
  padding: 9px 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.products-services-tab svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.products-services-tab.active {
  color: #4b54eb;
  border-bottom-color: #4b54eb;
}

.products-services-tab-add {
  position: relative;
  border: 1px solid #cad6fb;
  border-radius: 999px;
  background: #f7f9ff;
  color: #4b54eb;
  font-size: 0;
  font-weight: 600;
  line-height: 0;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  align-self: center;
  flex: 0 0 auto;
}

.products-services-tab-add::before,
.products-services-tab-add::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.products-services-tab-add::before {
  width: 12px;
  height: 2px;
}

.products-services-tab-add::after {
  width: 2px;
  height: 12px;
}

.products-services-tab-add:hover {
  background: #ebf0ff;
  border-color: #b9c9fa;
}

.products-catalog-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  border: 1px solid #dee5fa;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fbff 0%, #f3f7ff 100%);
  padding: 10px 12px;
}

.products-catalog-toolbar-meta {
  display: grid;
  gap: 4px;
  margin-right: auto;
}

.products-catalog-toolbar-count {
  margin: 0;
  color: #4f5b84;
  font-size: 13px;
}

.products-catalog-toolbar-count strong {
  color: #253058;
}

.products-catalog-toolbar-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.products-catalog-toolbar-stat {
  border: 1px solid #d7dff8;
  border-radius: 999px;
  background: #ffffff;
  color: #5c688f;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.2;
}

.products-catalog-toolbar-stat strong {
  color: #2f3a63;
}

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

.products-catalog-toolbar h3 {
  margin: 0;
}

.products-new-btn {
  padding-inline: 16px;
}

.products-catalog-filters {
  border: 1px solid #d7def3;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7f9ff 0%, #f1f5ff 100%);
  margin-bottom: 14px;
}

.products-catalog-filters label {
  margin: 0;
  padding: 14px;
  font-size: 13px;
  color: #39466f;
  font-weight: 600;
}

.products-catalog-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.products-catalog-filters input,
.products-catalog-filters select {
  margin-top: 7px;
  background: #ffffff;
}

.products-filter-actions {
  grid-column: 1 / -1;
  border-top: 1px solid #dce3f8;
  background: #e9eeff;
  padding: 13px 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.products-catalog-table-wrap {
  border: 1px solid #dde3f4;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.products-catalog-table {
  width: 100%;
  border-collapse: collapse;
}

.products-catalog-table th {
  color: #737d98;
  background: #fafbff;
}

.products-catalog-table td {
  border-bottom: 1px solid #e8ecf8;
  vertical-align: middle;
}

.products-catalog-table tbody tr:last-child td {
  border-bottom: 0;
}

.products-list-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid #e4e9f8;
}

.products-list-table td {
  vertical-align: middle;
  padding: 10px 12px;
}

.products-list-table tbody tr {
  transition: background-color 0.18s ease;
}

.products-list-table tbody tr:hover td {
  background: #f9fbff;
}

.products-handle-cell {
  width: 32px;
  vertical-align: middle !important;
  color: #6f7995;
  font-size: 16px;
}

.products-info-cell strong {
  display: block;
  color: #273047;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.products-info-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.products-reorder-handle {
  width: 20px;
  height: 20px;
  border: 1px solid #d7e0ff;
  border-radius: 7px;
  background: #f3f6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}

.products-reorder-handle:active {
  cursor: grabbing;
}

.products-list-table tbody tr:hover .products-reorder-handle {
  border-color: #c4cff2;
  background: #eef3ff;
}

.products-reorder-handle-icon {
  width: 8px;
  height: 12px;
  background-image: radial-gradient(circle, #7b86a6 1px, transparent 1px);
  background-size: 4px 4px;
  background-position: 0 0;
}

.products-info-image {
  width: 86px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e0e6f6;
  background: #f5f7ff;
  flex-shrink: 0;
}

.products-info-image-placeholder {
  width: 86px;
  height: 62px;
  border-radius: 8px;
  border: 1px dashed #d5dcef;
  background: #f7f9ff;
  color: #7e87a3;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  flex-shrink: 0;
}

.products-info-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.products-info-cell p {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: #2f395b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.products-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.products-meta-chip {
  border: 1px solid #d8e0f8;
  border-radius: 999px;
  background: #f7f9ff;
  color: #546289;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  padding: 3px 8px;
}

.products-info-copy small {
  color: #6a7493;
  font-size: 12px;
}

.products-category-cell,
.products-status-cell {
  vertical-align: middle;
}

.products-category-cell {
  vertical-align: middle;
}

.products-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.products-tag-pill {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid #cdddff;
  background: #e6eeff;
  color: #3757b4;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

.products-tag-pill + .products-tag-pill {
  margin-left: 0;
}

.products-active-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

.products-active-pill.active {
  background: #d8f6e3;
  color: #1b8f54;
}

.products-active-pill.inactive {
  background: #ffe2e2;
  color: #bf2020;
}

.products-price-cell {
  color: #2c3454;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  vertical-align: middle;
}

.products-actions-cell {
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

.products-actions-cell .row-actions {
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: nowrap;
}

.products-list-table {
  table-layout: auto;
}

.products-list-table tr.is-dragging {
  opacity: 0.55;
}

.products-list-table tr.is-dragging .products-reorder-handle {
  border-color: #4b54eb;
  background: #eef2ff;
}

.products-list-table tr.products-drop-before td {
  box-shadow: inset 0 2px 0 #4b54eb;
  background: #f7f9ff;
}

.products-list-table tr.products-drop-after td {
  box-shadow: inset 0 -2px 0 #4b54eb;
  background: #f7f9ff;
}

.products-list-table th:nth-child(2),
.products-list-table td:nth-child(2) {
  width: 140px;
}

.products-list-table th:nth-child(3),
.products-list-table td:nth-child(3) {
  width: 120px;
}

.products-list-table th:nth-child(4),
.products-list-table td:nth-child(4) {
  width: 240px;
}

.products-list-table th:nth-child(5),
.products-list-table td:nth-child(5) {
  width: 150px;
  text-align: right;
  white-space: nowrap;
}

.products-edit-link {
  border: 0;
  background: transparent;
  color: #4351ec;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.products-editor-modal {
  width: min(560px, 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  max-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  position: relative;
}

.products-editor-modal-wide {
  width: min(920px, 100%);
}

.team-editor-modal {
  width: min(1040px, 100%);
  border: 1px solid #d6ddfa;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 24px;
}

.team-editor-modal .toolbar {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e3e9ff;
}

.team-editor-modal .stack {
  gap: 14px;
  padding-right: 6px;
}

.team-editor-modal .profile-avatar-card {
  border-color: #d7dffb;
  background: #f8faff;
}

.team-editor-modal .business-hours-editor {
  border: 1px solid #dde5ff;
  border-radius: 12px;
  background: #fbfcff;
  padding: 12px;
}

.team-editor-modal .team-products-field-title {
  color: #2f3a62;
  font-weight: 700;
}

.package-editor-modal {
  width: min(1020px, calc(100vw - 28px));
}

.products-editor-modal h3 {
  margin: 0;
}

.products-editor-modal .toolbar {
  flex-shrink: 0;
}

.products-editor-modal .stack {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.products-categories-modal {
  width: min(680px, 100%);
}

.products-tabs-modal {
  width: min(900px, calc(100vw - 28px));
}

.products-tabs-modal-redesign {
  border: 1px solid #d8e0f7;
  border-radius: 16px;
  background: linear-gradient(180deg, #fdfefe 0%, #f5f8ff 100%);
  padding: 18px;
}

.products-tabs-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4eafc;
  margin-bottom: 12px;
}

.products-tabs-modal-head-copy {
  display: grid;
  gap: 6px;
}

.products-tabs-modal-head-copy h3 {
  margin: 0;
  color: #1f2b4e;
}

.products-tabs-modal-head-copy p {
  margin: 0;
  color: #637098;
  font-size: 13px;
  line-height: 1.45;
  max-width: 560px;
}

.products-editor-accordion-card {
  border: 1px solid #dbe3f7;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfdff 0%, #f7faff 100%);
  overflow: hidden;
}

.products-editor-accordion-card.is-open {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.products-editor-accordion-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
}

.products-editor-accordion-toggle:hover {
  background: rgba(255, 255, 255, 0.45);
}

.products-editor-accordion-toggle:focus-visible {
  outline: 2px solid #4351ec;
  outline-offset: -2px;
}

.products-editor-accordion-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.products-editor-accordion-copy strong {
  color: #1f2b4e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.products-editor-accordion-copy small {
  color: #67749a;
  font-size: 12px;
  line-height: 1.45;
}

.products-editor-accordion-chevron {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  flex-shrink: 0;
  border-right: 2px solid #6b7aa6;
  border-bottom: 2px solid #6b7aa6;
  transform: rotate(45deg);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.products-editor-accordion-card.is-open .products-editor-accordion-chevron {
  transform: rotate(-135deg);
}

.products-editor-accordion-body {
  padding: 0 18px 18px;
  max-height: min(56vh, 540px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.products-editor-accordion-fields {
  display: grid;
  gap: 14px;
}

.products-tabs-editor-form {
  margin-bottom: 12px;
}

.products-tabs-form-shell {
  border: 1px solid #d8e0f5;
  border-radius: 12px;
  background: #f9fbff;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.products-tabs-name-field {
  margin: 0;
}

.products-tabs-name-field input {
  margin-top: 6px;
}

.products-tabs-form-hint {
  margin: -3px 0 0;
}

.products-tabs-categories-card {
  border: 1px solid #dbe3f8;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.products-tabs-categories-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.products-tabs-categories-head strong {
  color: #1f2c50;
  font-weight: 600;
}

.products-tabs-categories-head small {
  border: 1px solid #d5ddf7;
  border-radius: 999px;
  background: #f4f7ff;
  color: #4b5d8f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 10px;
  white-space: nowrap;
}

.products-tabs-categories-grid {
  border: 1px solid #dbe3f8;
  border-radius: 10px;
  background: #fbfcff;
  padding: 10px;
  min-height: 110px;
  max-height: 250px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.products-tab-category-option {
  margin: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #dbe3f4;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.products-tab-category-option:hover {
  border-color: #c9d4f0;
  background: #fafcff;
}

.products-tab-category-option input[type="checkbox"] {
  margin: 0 !important;
}

.products-tab-category-option-copy {
  display: grid;
  gap: 2px;
}

.products-tab-category-option-copy strong {
  color: #2f3a61;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.products-tab-category-option-copy small {
  color: #6b779a;
  font-size: 11px;
  line-height: 1.35;
}

.products-tab-category-option input[type="checkbox"]:checked + .products-tab-category-option-copy strong {
  color: #3f4fe1;
}

.products-tabs-editor-actions {
  justify-content: flex-start;
}

.products-tabs-list-panel {
  border: 1px solid #dbe3f8;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.products-tabs-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.products-tabs-list-head strong {
  color: #20305a;
  font-weight: 600;
}

.products-tabs-list-head small {
  border: 1px solid #d7e0f8;
  border-radius: 999px;
  background: #f6f9ff;
  color: #53628f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 9px;
}

.products-tabs-table-wrap {
  border-radius: 10px;
}

.products-tab-name-cell {
  min-width: 220px;
}

.products-tab-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.products-tab-name-text {
  color: #273047;
  font-weight: 600;
  line-height: 1.2;
}

.products-tab-reorder-handle {
  width: 22px;
  height: 34px;
  padding: 0;
}

.products-tabs-table-wrap tbody tr:hover .products-tab-reorder-handle {
  border-color: #c4cff2;
  background: #eef3ff;
}

.products-tabs-table-wrap tr.is-dragging {
  opacity: 0.58;
}

.products-tabs-table-wrap tr.is-dragging .products-tab-reorder-handle {
  border-color: #4b54eb;
  background: #eef2ff;
}

.products-tabs-table-wrap tr.products-drop-before td {
  box-shadow: inset 0 2px 0 #4b54eb;
  background: #f7f9ff;
}

.products-tabs-table-wrap tr.products-drop-after td {
  box-shadow: inset 0 -2px 0 #4b54eb;
  background: #f7f9ff;
}

.products-tabs-row-actions {
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
}

.products-tab-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.products-tab-chip {
  border: 1px solid #d7dff9;
  border-radius: 999px;
  background: #f4f7ff;
  color: #3f538b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 9px;
}

.products-tab-usage-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  border: 1px solid #d6def7;
  border-radius: 999px;
  background: #f5f8ff;
  color: #2f446f;
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
}

.products-categories-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
}

.products-categories-create-form label {
  margin: 0;
}

.products-categories-create-actions {
  display: flex;
  gap: 10px;
}

.products-categories-table-wrap {
  border: 1px solid #dde3f4;
  border-radius: 10px;
}

.products-categories-table {
  width: 100%;
  border-collapse: collapse;
}

.products-categories-table th {
  color: #737d98;
  background: #fafbff;
}

.products-categories-table td {
  border-bottom: 1px solid #e8ecf8;
  vertical-align: middle;
}

.products-categories-table th:last-child,
.products-categories-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.products-categories-table tbody tr:last-child td {
  border-bottom: 0;
}

.products-editor-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.products-editor-grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

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

.products-editor-grid-five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.products-editor-options-panel {
  border: 1px solid #d7def3;
  border-radius: 12px;
  background: #f7f9ff;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.products-editor-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.products-editor-toggle-card {
  margin: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #dbe3f4;
  border-radius: 8px;
  background: #fff;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.products-editor-toggle-card:hover {
  border-color: #c9d4f0;
  background: #fafcff;
}

.products-editor-toggle-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 !important;
  place-self: center;
}

.products-editor-toggle-copy {
  display: grid;
  gap: 0;
  min-width: 0;
}

.products-editor-toggle-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: #2f3a61;
  line-height: 1.25;
}

.products-editor-toggle-card:has(input[type="checkbox"]:checked) {
  border-color: #bccbf0;
  background: #f6f8ff;
}

.products-editor-toggle-card:has(input[type="checkbox"]:checked) .products-editor-toggle-copy strong {
  color: #3e50d2;
}

.products-editor-toggle-copy small {
  font-size: 12px;
  font-weight: 500;
  color: #6a7697;
  line-height: 1.35;
}

.products-editor-solar-panel {
  border: 1px dashed #ccd7f7;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.products-editor-solar-head {
  display: grid;
  gap: 2px;
}

.products-editor-solar-head strong {
  font-size: 15px;
  color: #24305a;
}

.products-editor-solar-head small {
  color: #6e7ba2;
  font-size: 12px;
}

.products-editor-solar-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.products-editor-radio-pill {
  margin: 0;
  position: relative;
}

.products-editor-radio-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.products-editor-radio-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #ced8f7;
  background: #f4f7ff;
  color: #4c5f8f;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.products-editor-radio-pill:hover span {
  border-color: #a9baf3;
  color: #344777;
}

.products-editor-radio-pill input[type="radio"]:checked + span {
  border-color: #5368ff;
  background: #eef1ff;
  color: #2942ea;
}

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

.products-editor-image-preview {
  display: grid;
  gap: 6px;
}

.products-editor-image-preview img {
  width: min(220px, 100%);
  max-height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #d8dff2;
  background: #f5f7ff;
}

.products-image-upload-card {
  border: 1px solid #d7def3;
  border-radius: 12px;
  background: #f7f9ff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.products-image-upload-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #24305a;
}

.products-image-upload-shell {
  --products-image-preview-height: clamp(220px, 36vh, 360px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 10px;
  align-items: stretch;
}

.products-image-upload-shell.is-compact {
  --products-image-preview-height: clamp(185px, 30vh, 290px);
  grid-template-columns: minmax(0, 1fr) 96px;
}

.products-image-upload-shell.is-gallery {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.products-image-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.products-image-upload-main {
  border: 1px solid #d9e2fb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  min-height: 220px;
  height: var(--products-image-preview-height);
  display: grid;
  place-items: center;
  position: relative;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.products-image-upload-shell.is-compact .products-image-upload-main {
  min-height: 185px;
}

.products-image-upload-main[data-action] {
  cursor: pointer;
}

.products-image-upload-shell.is-gallery .products-image-upload-main.is-gallery-dropzone {
  min-height: 66px;
  height: auto;
  border-style: dashed;
  border-color: #c8d5f8;
  background: #ffffff;
  padding: 10px 12px;
  place-items: center;
  gap: 2px;
}

.products-image-upload-gallery-drop-title {
  color: #4b5c8f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.products-image-upload-gallery-drop-sub {
  color: #7783a8;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.products-image-upload-main img,
.products-image-upload-main video {
  width: 100%;
  height: 100%;
  display: block;
  background: #f3f6ff;
}

.products-image-upload-main img {
  object-fit: cover;
  object-position: center center !important;
}

.products-image-upload-main video {
  object-fit: contain;
}

.products-image-upload-placeholder {
  color: #6a759c;
  font-size: 13px;
  font-weight: 600;
}

.products-image-upload-drop-hint {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #6071a8;
  background: rgba(245, 248, 255, 0.92);
  border: 1px dashed #cdd8f8;
  border-radius: 999px;
  padding: 4px 8px;
  pointer-events: none;
}

.products-image-upload-main.has-preview .products-image-upload-drop-hint {
  background: rgba(15, 23, 42, 0.56);
  border-color: rgba(232, 238, 255, 0.7);
  color: #f4f7ff;
}

.products-image-upload-main.is-drag-over {
  border-color: #5b6fff;
  background: #eef2ff;
  box-shadow: inset 0 0 0 2px rgba(91, 111, 255, 0.18);
}

.products-image-upload-side {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: var(--products-image-preview-height);
  overflow-y: auto;
  padding-right: 2px;
  align-self: start;
}

.products-image-upload-side.is-gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.products-image-upload-thumb {
  border: 1px solid #d6def7;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.products-image-upload-side.is-gallery-grid .products-image-upload-thumb {
  aspect-ratio: 4 / 3;
}

.products-image-upload-thumb img,
.products-image-upload-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center !important;
  display: block;
}

.products-image-upload-thumb.is-active {
  border-color: #4d5bff;
  box-shadow: 0 0 0 2px rgba(77, 91, 255, 0.22);
}

.products-image-upload-thumb.is-draggable {
  cursor: grab;
}

.products-image-upload-thumb.is-draggable:active {
  cursor: grabbing;
}

.products-image-upload-thumb.is-dragging {
  opacity: 0.66;
  border-color: #4d5bff;
  box-shadow: 0 8px 18px rgba(35, 54, 104, 0.22);
}

.products-image-upload-thumb.products-thumb-drop-before {
  box-shadow: inset 0 3px 0 #4d5bff;
}

.products-image-upload-thumb.products-thumb-drop-after {
  box-shadow: inset 0 -3px 0 #4d5bff;
}

.products-image-upload-thumb-drag {
  position: absolute;
  left: 6px;
  top: 6px;
  transform: none;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1px solid rgba(205, 216, 248, 0.98);
  background: rgba(243, 246, 255, 0.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5b6b9f;
  pointer-events: none;
}

.products-image-upload-thumb-drag .products-reorder-handle-icon {
  width: 8px;
  height: 12px;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 4px 4px;
  background-position: 0 0;
}

.products-image-upload-thumb.is-readonly {
  cursor: default;
}

.products-image-upload-side-empty {
  border: 1px dashed #cbd7ff;
  border-radius: 10px;
  background: #fff;
  color: #6a759c;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 8px;
  text-align: center;
}

.products-image-upload-actions {
  gap: 10px;
}

.products-image-upload-actions .btn {
  min-width: 120px;
}

.products-media-panel {
  gap: 12px;
}

.products-media-dropzone {
  border: 1px dashed #c8d5f8;
  border-radius: 12px;
  background: #ffffff;
  padding: 16px;
  min-height: 76px;
  display: grid;
  place-items: center;
  gap: 3px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.products-media-dropzone-title {
  color: #4b5c8f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.products-media-dropzone-sub {
  color: #7b87ab;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.products-media-dropzone.is-drag-over {
  border-color: #5b6fff;
  background: #eef2ff;
  box-shadow: inset 0 0 0 2px rgba(91, 111, 255, 0.18);
}

.products-media-gallery {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.products-media-gallery.is-empty {
  grid-template-columns: minmax(0, 1fr);
}

.products-media-gallery-empty {
  border: 1px dashed #d6def7;
  border-radius: 12px;
  background: #fbfcff;
  min-height: 104px;
  padding: 16px;
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
  color: #6a759c;
}

.products-media-gallery-empty strong {
  color: #24305a;
  font-size: 14px;
  font-weight: 700;
}

.products-media-gallery .products-image-upload-thumb,
.products-media-gallery-tile {
  min-height: 132px;
  aspect-ratio: 4 / 3;
}

.products-media-gallery .products-image-upload-thumb {
  border-radius: 14px;
}

.products-media-gallery .products-image-upload-thumb-drag {
  left: 8px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
}

.products-media-gallery-delete {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(213, 224, 250, 0.98);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: #ea4335;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(27, 39, 88, 0.12);
  transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.products-media-gallery-delete:hover {
  transform: translateY(-1px);
  border-color: rgba(239, 68, 68, 0.28);
  background: #fff5f5;
  box-shadow: 0 8px 18px rgba(27, 39, 88, 0.16);
}

.products-media-gallery-delete:focus-visible,
.products-media-gallery-tile-open:focus-visible {
  outline: 2px solid rgba(77, 91, 255, 0.42);
  outline-offset: 2px;
}

.products-media-gallery-delete svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.products-media-gallery-tile-badge {
  position: absolute;
  left: 8px;
  right: auto;
  top: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fbff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.products-media-gallery-tile-badge-main {
  left: 8px;
  right: auto;
  top: auto;
  bottom: 8px;
  background: rgba(77, 91, 255, 0.92);
}

.products-media-gallery-tile {
  border: 1px solid #d6def7;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
  display: grid;
}

.products-media-gallery-photo {
  min-width: 0;
}

.products-media-gallery-tile img,
.products-media-gallery-tile video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.products-media-gallery-tile-video video {
  background: #0f172a;
}

.products-media-gallery-tile-tour {
  padding: 14px 12px;
  align-content: space-between;
  justify-items: start;
  text-align: left;
  color: #24305a;
  background: linear-gradient(145deg, #eef3ff 0%, #ffffff 100%);
  cursor: pointer;
}

.products-media-gallery-tile-open {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: 8px;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
}

.products-media-gallery-tour-mark {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: #4d5bff;
}

.products-media-gallery-tour-host {
  color: #24305a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.products-media-gallery-tour-copy {
  color: #6e7ba2;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

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

.products-media-link-modal-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14, 23, 48, 0.28);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  z-index: 30;
}

.products-media-link-modal {
  width: min(460px, calc(100% - 32px));
  border-radius: 16px;
  border: 1px solid #dbe3f7;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.22);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.products-media-link-modal .toolbar {
  margin: 0;
  padding: 0;
  border: 0;
}

.products-media-link-modal .toolbar h3 {
  margin: 0;
}

.products-media-tour-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.products-sqft-range-panel {
  border: 1px solid #d7def3;
  border-radius: 10px;
  background: #f7f9ff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.products-sqft-range-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.products-sqft-range-head h4 {
  margin: 0;
}

.products-sqft-range-list {
  display: grid;
  gap: 8px;
}

.products-sqft-range-row {
  border: 1px solid #dfe5f7;
  border-radius: 9px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
}

.products-sqft-range-row-product {
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
}

.products-sqft-range-row-product.is-digital {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}

.products-sqft-range-row-package {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}

.products-product-variant-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.products-product-variant-row.is-digital {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.products-sqft-range-row label {
  margin: 0;
}

.products-sqft-range-actions {
  min-width: 80px;
}

.products-addon-main-panel {
  border: 1px solid #d7def3;
  border-radius: 10px;
  background: #f7f9ff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.products-addon-main-head {
  display: grid;
  gap: 2px;
}

.products-addon-main-head strong {
  color: #273047;
  font-weight: 600;
}

.products-addon-main-head small {
  color: #67728f;
  font-size: 12px;
}

.products-addon-main-grid {
  border: 1px solid #d7def3;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  min-height: 90px;
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 8px;
  align-content: start;
}

.products-category-panel {
  background: #f7f9ff;
}

.products-category-panel .products-addon-main-head {
  gap: 4px;
}

.products-category-panel .products-addon-main-head strong {
  font-size: 14px;
  font-weight: 600;
  color: #2b3760;
  line-height: 1.25;
}

.products-category-panel .products-addon-main-head small {
  font-size: 11px;
  font-weight: 500;
  color: #6a7697;
}

.products-category-panel .products-addon-main-grid {
  border-color: #dbe3f7;
  background: #ffffff;
  padding: 10px;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.products-category-option {
  margin: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #dbe3f4;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.products-category-option:hover {
  border-color: #c9d4f0;
  background: #fafcff;
}

.products-category-option input[type="checkbox"] {
  margin: 0 !important;
}

.products-category-option-copy {
  display: grid;
  gap: 0;
  min-width: 0;
}

.products-category-option-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: #2f3a61;
  line-height: 1.25;
}

.products-category-option input[type="checkbox"]:checked + .products-category-option-copy strong {
  color: #3e50d2;
}

.products-category-option:has(input[type="checkbox"]:checked) {
  border-color: #bccbf0;
  background: #f6f8ff;
}

:is(
    label:not(.theme-toggle-control) > input[type="checkbox"],
    td > input[type="checkbox"],
    th > input[type="checkbox"],
    .calendar-team-filter-checkbox,
    .team-service-provider-toggle input[type="checkbox"],
    .settings-toggle input[type="checkbox"],
    .integration-toggle-option input[type="checkbox"],
    .migration-checkbox input[type="checkbox"],
    .legal-preview-checkbox input[type="checkbox"],
    .white-label-enable-toggle input[type="checkbox"],
    .legal-settings-toggle-input,
    .business-hours-open-toggle input[type="checkbox"],
    .availability-business-hours-open-toggle input[type="checkbox"],
    .twilight-grid-check input[type="checkbox"],
    .booking-limits-toggle input[type="checkbox"],
    .appointment-settings-redesign .appointment-settings-toggle input[type="checkbox"],
    .territory-map-overlay-toggle input[type="checkbox"],
    .territory-inline-toggle input[type="checkbox"],
    .territory-team-option input[type="checkbox"],
    .products-category-option input[type="checkbox"],
    .products-tab-category-option input[type="checkbox"],
    .package-product-option input[type="checkbox"],
    .coupon-product-limit-option input[type="checkbox"],
    .products-editor-toggle-card input[type="checkbox"],
    .order-custom-checkbox input[type="checkbox"],
    .team-product-option input[type="checkbox"],
    .listing-website-visibility-toggle input[type="checkbox"],
    .property-website-visibility-toggle input[type="checkbox"],
    .order-appointment-item-option input[type="checkbox"],
    .order-appointment-member-option input[type="checkbox"],
    .order-team-member-option input[type="checkbox"],
    .of-save-card-inline input[type="checkbox"],
    .of-legal-checkbox input[type="checkbox"],
    .order-deposit-toggle-input,
    .storefront-order-form-inline-toggle input[type="checkbox"],
    .storefront-payment-method-toggle input[type="checkbox"],
    .storefront-deposit-override-toggle input[type="checkbox"],
    .storefront-order-field-required-toggle input[type="checkbox"]
  ) {
  -webkit-appearance: none;
  appearance: none;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  margin: 0 !important;
  box-sizing: border-box;
  border: 1px solid #b9c7e5;
  border-radius: 4px;
  background: #ffffff;
  background-image: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

:is(
    .products-category-option input[type="checkbox"],
    .products-tab-category-option input[type="checkbox"],
    .products-editor-toggle-card input[type="checkbox"],
    .team-service-provider-toggle input[type="checkbox"],
    .settings-toggle input[type="checkbox"],
    .white-label-enable-toggle input[type="checkbox"],
    .legal-settings-toggle-input,
    .twilight-grid-check input[type="checkbox"]
  ) {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  border-radius: 5px;
  place-self: center;
}

:is(
    label:not(.theme-toggle-control) > input[type="checkbox"],
    td > input[type="checkbox"],
    th > input[type="checkbox"],
    .calendar-team-filter-checkbox,
    .team-service-provider-toggle input[type="checkbox"],
    .settings-toggle input[type="checkbox"],
    .integration-toggle-option input[type="checkbox"],
    .migration-checkbox input[type="checkbox"],
    .legal-preview-checkbox input[type="checkbox"],
    .white-label-enable-toggle input[type="checkbox"],
    .legal-settings-toggle-input,
    .business-hours-open-toggle input[type="checkbox"],
    .availability-business-hours-open-toggle input[type="checkbox"],
    .twilight-grid-check input[type="checkbox"],
    .booking-limits-toggle input[type="checkbox"],
    .appointment-settings-redesign .appointment-settings-toggle input[type="checkbox"],
    .territory-map-overlay-toggle input[type="checkbox"],
    .territory-inline-toggle input[type="checkbox"],
    .territory-team-option input[type="checkbox"],
    .products-category-option input[type="checkbox"],
    .products-tab-category-option input[type="checkbox"],
    .package-product-option input[type="checkbox"],
    .coupon-product-limit-option input[type="checkbox"],
    .products-editor-toggle-card input[type="checkbox"],
    .order-custom-checkbox input[type="checkbox"],
    .team-product-option input[type="checkbox"],
    .listing-website-visibility-toggle input[type="checkbox"],
    .property-website-visibility-toggle input[type="checkbox"],
    .order-appointment-item-option input[type="checkbox"],
    .order-appointment-member-option input[type="checkbox"],
    .order-team-member-option input[type="checkbox"],
    .of-save-card-inline input[type="checkbox"],
    .of-legal-checkbox input[type="checkbox"],
    .order-deposit-toggle-input,
    .storefront-order-form-inline-toggle input[type="checkbox"],
    .storefront-payment-method-toggle input[type="checkbox"],
    .storefront-deposit-override-toggle input[type="checkbox"],
    .storefront-order-field-required-toggle input[type="checkbox"]
  )::after {
  content: none;
}

:is(
    label:not(.theme-toggle-control) > input[type="checkbox"],
    td > input[type="checkbox"],
    th > input[type="checkbox"],
    .calendar-team-filter-checkbox,
    .team-service-provider-toggle input[type="checkbox"],
    .settings-toggle input[type="checkbox"],
    .integration-toggle-option input[type="checkbox"],
    .migration-checkbox input[type="checkbox"],
    .legal-preview-checkbox input[type="checkbox"],
    .white-label-enable-toggle input[type="checkbox"],
    .legal-settings-toggle-input,
    .business-hours-open-toggle input[type="checkbox"],
    .availability-business-hours-open-toggle input[type="checkbox"],
    .twilight-grid-check input[type="checkbox"],
    .booking-limits-toggle input[type="checkbox"],
    .appointment-settings-redesign .appointment-settings-toggle input[type="checkbox"],
    .territory-map-overlay-toggle input[type="checkbox"],
    .territory-inline-toggle input[type="checkbox"],
    .territory-team-option input[type="checkbox"],
    .products-category-option input[type="checkbox"],
    .products-tab-category-option input[type="checkbox"],
    .package-product-option input[type="checkbox"],
    .coupon-product-limit-option input[type="checkbox"],
    .products-editor-toggle-card input[type="checkbox"],
    .order-custom-checkbox input[type="checkbox"],
    .team-product-option input[type="checkbox"],
    .listing-website-visibility-toggle input[type="checkbox"],
    .property-website-visibility-toggle input[type="checkbox"],
    .order-appointment-item-option input[type="checkbox"],
    .order-appointment-member-option input[type="checkbox"],
    .order-team-member-option input[type="checkbox"],
    .of-save-card-inline input[type="checkbox"],
    .of-legal-checkbox input[type="checkbox"],
    .order-deposit-toggle-input,
    .storefront-order-form-inline-toggle input[type="checkbox"],
    .storefront-payment-method-toggle input[type="checkbox"],
    .storefront-deposit-override-toggle input[type="checkbox"],
    .storefront-order-field-required-toggle input[type="checkbox"]
  ):checked {
  border-color: #4a5be8;
  background: linear-gradient(180deg, #f8faff 0%, #edf2ff 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.25 8.25L6.45 11.45L12.75 4.95' stroke='%234a5be8' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 0 1px rgba(74, 91, 232, 0.06);
}

:is(
    label:not(.theme-toggle-control) > input[type="checkbox"],
    td > input[type="checkbox"],
    th > input[type="checkbox"],
    .calendar-team-filter-checkbox,
    .team-service-provider-toggle input[type="checkbox"],
    .settings-toggle input[type="checkbox"],
    .integration-toggle-option input[type="checkbox"],
    .migration-checkbox input[type="checkbox"],
    .legal-preview-checkbox input[type="checkbox"],
    .white-label-enable-toggle input[type="checkbox"],
    .legal-settings-toggle-input,
    .business-hours-open-toggle input[type="checkbox"],
    .availability-business-hours-open-toggle input[type="checkbox"],
    .twilight-grid-check input[type="checkbox"],
    .booking-limits-toggle input[type="checkbox"],
    .appointment-settings-redesign .appointment-settings-toggle input[type="checkbox"],
    .territory-map-overlay-toggle input[type="checkbox"],
    .territory-inline-toggle input[type="checkbox"],
    .territory-team-option input[type="checkbox"],
    .products-category-option input[type="checkbox"],
    .products-tab-category-option input[type="checkbox"],
    .package-product-option input[type="checkbox"],
    .coupon-product-limit-option input[type="checkbox"],
    .products-editor-toggle-card input[type="checkbox"],
    .order-custom-checkbox input[type="checkbox"],
    .team-product-option input[type="checkbox"],
    .listing-website-visibility-toggle input[type="checkbox"],
    .property-website-visibility-toggle input[type="checkbox"],
    .order-appointment-item-option input[type="checkbox"],
    .order-appointment-member-option input[type="checkbox"],
    .order-team-member-option input[type="checkbox"],
    .of-save-card-inline input[type="checkbox"],
    .of-legal-checkbox input[type="checkbox"],
    .order-deposit-toggle-input,
    .storefront-order-form-inline-toggle input[type="checkbox"],
    .storefront-payment-method-toggle input[type="checkbox"],
    .storefront-deposit-override-toggle input[type="checkbox"],
    .storefront-order-field-required-toggle input[type="checkbox"]
  ):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 91, 232, 0.14);
}

input[type="checkbox"] {
  accent-color: #4a5be8;
}

.products-tab-category-option:has(input[type="checkbox"]:checked) {
  border-color: #bccbf0;
  background: #f6f8ff;
}

.package-products-grid {
  border: 1px solid #d7def3;
  border-radius: 10px;
  background: #f8faff;
  padding: 12px;
  min-height: 180px;
  max-height: 360px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.package-product-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid #dfe5f7;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
  margin: 0;
  cursor: pointer;
}

.package-product-option input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 2px 0 0 !important;
  flex: 0 0 auto;
}

.package-product-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.package-product-option-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: #273047;
  line-height: 1.3;
}

.package-product-option-copy small {
  color: #67728f;
  font-size: 12px;
  line-height: 1.35;
}

.package-products-empty {
  margin: 0;
  padding: 8px 2px;
}

.package-included-labels-panel {
  border: 1px solid #d7def3;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8faff 0%, #f3f7ff 100%);
  padding: 12px;
  display: grid;
  gap: 12px;
}

.package-included-labels-list {
  display: grid;
  gap: 10px;
}

.package-included-label-row {
  display: grid;
  gap: 10px;
  border: 1px solid #dfe5f7;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  margin: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.package-included-label-row-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.package-included-label-drag {
  width: 28px;
  height: 44px;
  border: 1px dashed #d5dcef;
  border-radius: 10px;
  background: #f6f9ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: grab;
  color: inherit;
  flex-shrink: 0;
}

.package-included-label-drag:active {
  cursor: grabbing;
}

.package-included-label-row-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.package-included-label-row-title strong {
  color: #273047;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.package-included-label-row-title small {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #d4def8;
  background: #f2f5ff;
  color: #52639f;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}

.package-included-label-input {
  margin: 0;
  display: grid;
  gap: 6px;
}

.package-included-label-input span {
  color: #66739f;
  font-size: 12px;
  font-weight: 700;
}

.package-included-label-input input {
  margin-top: 0;
}

.package-included-label-row.is-dragging {
  opacity: 0.62;
  border-color: #4b54eb;
  box-shadow: 0 0 0 2px rgba(75, 84, 235, 0.16);
}

.package-included-label-row.package-included-label-drop-before {
  box-shadow: inset 0 2px 0 #4b54eb;
  background: #f7f9ff;
}

.package-included-label-row.package-included-label-drop-after {
  box-shadow: inset 0 -2px 0 #4b54eb;
  background: #f7f9ff;
}

.packages-catalog-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.packages-table th:nth-child(2) {
  width: 90px;
}

.packages-table th:nth-child(3) {
  width: 170px;
}

.packages-table th:nth-child(4) {
  width: 140px;
}

.packages-table th:nth-child(5) {
  width: 110px;
}

.pricing-plans-shell {
  display: grid;
  gap: 14px;
}

.pricing-plans-head {
  border-bottom: 1px solid #e9edf9;
  padding-bottom: 10px;
}

.pricing-plans-head h2 {
  margin: 0;
  font-size: 50px;
  color: #1f2641;
}

.pricing-plans-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.pricing-plans-toolbar h3 {
  margin: 0;
}

.pricing-plans-toolbar .muted-note {
  margin-top: 6px;
  max-width: 80ch;
}

.pricing-plans-filters {
  margin-bottom: 14px;
}

.pricing-plan-library-list {
  display: grid;
  gap: 14px;
}

.pricing-plan-library-card {
  position: relative;
  border: 1px solid #d7e0f7;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(92, 123, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  padding: 18px 22px 18px 26px;
  box-shadow: 0 16px 32px rgba(31, 38, 65, 0.06);
  overflow: hidden;
}

.pricing-plan-library-card-accent {
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4f5dff 0%, #7fb8ff 100%);
}

.pricing-plan-library-card-body {
  display: grid;
  grid-template-columns: minmax(340px, 1.35fr) auto auto auto;
  gap: 18px;
  align-items: center;
}

.pricing-plan-library-card-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pricing-plan-library-card-title-row h4 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: #1f2641;
  letter-spacing: -0.02em;
}

.pricing-plan-library-card-copy {
  min-width: 0;
}

.pricing-plan-library-card-description {
  min-width: 0;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.4;
  color: #62709a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pricing-plan-library-card-stats {
  display: flex;
  gap: 14px;
  align-items: center;
}

.pricing-plan-library-stat {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-right: 14px;
}

.pricing-plan-library-stat:not(:last-child) {
  border-right: 1px solid #e2e9fb;
}

.pricing-plan-library-stat-coupon {
  min-width: 180px;
}

.pricing-plan-library-stat small {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7180a7;
}

.pricing-plan-library-stat strong {
  font-size: 17px;
  line-height: 1.2;
  color: #243053;
}

.pricing-plan-library-card-updated {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-width: 110px;
}

.pricing-plan-library-card-updated span {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7180a7;
}

.pricing-plan-library-card-updated strong {
  font-size: 17px;
  line-height: 1.2;
  color: #243053;
}

.pricing-plan-library-card-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 145px;
}

.pricing-plan-library-card-actions .products-edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #d5dced;
  border-radius: 12px;
  background: #fff;
  white-space: nowrap;
}

.pricing-plan-library-card-actions .products-delete-link {
  border-color: #f2c1ca;
  background: #fff7f8;
}

.products-delete-link {
  color: #e01f1f;
}

.travel-fees-shell {
  display: grid;
  gap: 14px;
}

.travel-fees-redesign .travel-fees-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #d2ddeb;
  background:
    radial-gradient(420px 210px at 8% 8%, rgba(68, 150, 189, 0.18), transparent 72%),
    radial-gradient(400px 190px at 92% 14%, rgba(42, 181, 125, 0.16), transparent 74%),
    linear-gradient(132deg, #f7fbff 0%, #f0f8f5 46%, #fffaf0 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.travel-fees-redesign .travel-fees-kicker {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 700;
  color: #3a5f79;
}

.travel-fees-redesign .travel-fees-hero h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #123246;
  font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
}

.travel-fees-redesign .travel-fees-hero-text {
  margin: 12px 0 0;
  max-width: 68ch;
  color: #3d5366;
  font-size: 15px;
}

.travel-fees-redesign .travel-fees-hero-cta {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.travel-fees-redesign .travel-fees-stat-row {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 650px;
}

.travel-fees-redesign .travel-fees-stat-chip {
  border: 1px solid #d0dfec;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}

.travel-fees-redesign .travel-fees-stat-chip span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5f7589;
  font-weight: 700;
}

.travel-fees-redesign .travel-fees-stat-chip strong {
  font-size: 24px;
  line-height: 1;
  color: #1a3548;
  font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
}

.travel-fees-redesign .travel-fees-board {
  border: 1px solid #d7e2ef;
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.96) 0%, rgba(245, 250, 255, 0.98) 100%);
}

.travel-fees-redesign .travel-fees-board-head h3 {
  margin: 0;
  font-size: 20px;
  color: #18354b;
}

.travel-fees-redesign .travel-fees-board-head .muted-note {
  margin: 6px 0 0;
}

.travel-fees-redesign .travel-fee-card-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.travel-fees-redesign .travel-fee-card {
  border: 1px solid #cfdbeb;
  border-radius: 16px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(16, 44, 63, 0.06);
  transform: translateY(0);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  animation: travel-fee-card-in 260ms ease both;
}

.travel-fees-redesign .travel-fee-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(17, 44, 61, 0.1);
  border-color: #bbcfde;
}

.travel-fees-redesign .travel-fee-card:nth-child(2) {
  animation-delay: 30ms;
}

.travel-fees-redesign .travel-fee-card:nth-child(3) {
  animation-delay: 60ms;
}

.travel-fees-redesign .travel-fee-card:nth-child(4) {
  animation-delay: 90ms;
}

.travel-fees-redesign .travel-fee-card:nth-child(5) {
  animation-delay: 120ms;
}

.travel-fees-redesign .travel-fee-card.is-inactive {
  background: #fcfdff;
  border-style: dashed;
  opacity: 0.94;
}

.travel-fees-redesign .travel-fee-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.travel-fees-redesign .travel-fee-type-chip {
  border-radius: 999px;
  border: 1px solid #cadceb;
  background: #f2f8ff;
  color: #275170;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.travel-fees-redesign .travel-fee-status-chip {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.travel-fees-redesign .travel-fee-status-chip.is-active {
  border: 1px solid #b8e7cf;
  background: #edf9f2;
  color: #1f7a4b;
}

.travel-fees-redesign .travel-fee-status-chip.is-inactive {
  border: 1px solid #d8deea;
  background: #f4f6fb;
  color: #5d6782;
}

.travel-fees-redesign .travel-fee-card h3 {
  margin: 0;
  font-size: 20px;
  color: #1c3445;
}

.travel-fees-redesign .travel-fee-card-amount {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  color: #1c4555;
  font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
}

.travel-fees-redesign .travel-fee-card-description {
  margin: 0;
  min-height: 40px;
  color: #627688;
}

.travel-fees-redesign .travel-fee-card-users {
  border: 1px solid #d8e2f0;
  border-radius: 12px;
  background: #f9fbff;
  padding: 9px 10px;
  display: grid;
  gap: 6px;
}

.travel-fees-redesign .travel-fee-card-users-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #667b90;
  font-weight: 700;
}

.travel-fees-redesign .travel-fee-card-actions {
  margin-top: 2px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.travel-fees-redesign .travel-fees-user-avatar {
  background: #2c5a78;
}

.travel-fees-redesign .travel-fees-empty {
  margin-top: 12px;
  border: 1px dashed #c8d8e8;
  border-radius: 14px;
  background: #ffffff;
  padding: 20px;
  display: grid;
  gap: 8px;
  justify-items: flex-start;
}

.travel-fees-redesign .travel-fees-empty h4 {
  margin: 0;
  font-size: 22px;
  color: #1d3547;
}

@keyframes travel-fee-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.travel-fees-table th:nth-child(1) {
  width: 18%;
}

.travel-fees-table th:nth-child(2) {
  width: 47%;
}

.travel-fees-table th:nth-child(3) {
  width: 15%;
}

.travel-fees-table th:nth-child(4) {
  width: 10%;
}

.travel-fees-user-empty {
  color: #727b98;
}

.travel-fees-users-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.travel-fee-assigned-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.travel-fees-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #8f919b;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.travel-fees-user-avatar-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.travel-fees-user-extra {
  color: #66708f;
  font-size: 12px;
  font-weight: 700;
}

.travel-fee-editor-modal {
  width: min(920px, 100%);
  max-height: calc(100vh - 52px);
  overflow-y: auto;
}

.travel-fee-editor-modal .toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff 82%);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e6ebff;
}

.travel-fee-modal-form {
  display: grid;
  gap: 14px;
}

.travel-fee-config-shell {
  border: 1px solid #d7dff9;
  border-radius: 14px;
  background: #f9fbff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.travel-fee-config-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  background:
    radial-gradient(440px 210px at 8% 8%, rgba(84, 107, 255, 0.14), transparent 70%),
    radial-gradient(300px 180px at 96% 8%, rgba(48, 166, 126, 0.12), transparent 74%),
    linear-gradient(140deg, #f8fbff 0%, #f5f8ff 48%, #f7fffb 100%);
}

.travel-fee-config-kicker {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 700;
  color: #40537f;
}

.travel-fee-config-hero h4 {
  margin: 0;
  font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #20315d;
}

.travel-fee-config-hero .muted-note {
  max-width: 62ch;
}

.travel-fee-hero-meta {
  display: grid;
  gap: 8px;
  min-width: 210px;
}

.travel-fee-hero-stat {
  border: 1px solid #d4def8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.travel-fee-hero-stat span {
  color: #5f6d98;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}

.travel-fee-hero-stat strong {
  color: #1f315d;
  font-size: 14px;
}

.travel-fee-hero-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}

.travel-fee-hero-status.is-active {
  color: #0f8c58;
  background: #d8f6e8;
  border: 1px solid #a5e4c8;
}

.travel-fee-hero-status.is-inactive {
  color: #9b1831;
  background: #ffe6ea;
  border: 1px solid #ffc5ce;
}

.travel-fee-basics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 10px 12px;
}

.travel-fee-basics-name,
.travel-fee-basics-status {
  margin: 0;
}

.travel-fee-basics-description {
  grid-column: 1 / -1;
  margin: 0;
}

.travel-fee-type-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.travel-fee-type-option {
  border: 1px solid #d2dcff;
  border-radius: 12px;
  background: #ffffff;
  color: #253465;
  text-align: left;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.travel-fee-type-option-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.travel-fee-type-option-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(145deg, #546fff 0%, #3c58f4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.travel-fee-type-option-icon-text {
  font-size: 11px;
  letter-spacing: 0.06em;
}

.travel-fee-type-option[data-value="flat"] .travel-fee-type-option-icon {
  background: linear-gradient(145deg, #4f7bff 0%, #4063f6 100%);
}

.travel-fee-type-option[data-value="percent"] .travel-fee-type-option-icon {
  background: linear-gradient(145deg, #1f9f86 0%, #14856f 100%);
}

.travel-fee-type-option[data-value="distance"] .travel-fee-type-option-icon {
  background: linear-gradient(145deg, #ed8f2e 0%, #d97706 100%);
}

.travel-fee-type-option[data-value="drive_time"] .travel-fee-type-option-icon {
  background: linear-gradient(145deg, #8d61ff 0%, #7148df 100%);
}

.travel-fee-type-option strong {
  font-size: 14px;
  line-height: 1.2;
}

.travel-fee-type-option small {
  color: #5f6e99;
  font-size: 12px;
  line-height: 1.35;
}

.travel-fee-type-option:hover {
  border-color: #95a7ff;
  background: #f9fbff;
}

.travel-fee-type-option.is-active {
  border-color: #6676ff;
  background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%);
  box-shadow: 0 0 0 1px rgba(102, 118, 255, 0.18);
}

.travel-fee-type-option.is-active .travel-fee-type-option-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 0 2px rgba(84, 108, 255, 0.2);
}

.travel-fee-amount-wrap {
  margin: 0;
}

.travel-fee-quick-rule {
  margin: 0;
  border: 1px solid #d4defc;
  border-radius: 10px;
  background: #ffffff;
  padding: 9px 11px;
  font-size: 13px;
  color: #3f4f79;
}

.travel-fee-distance-config {
  border: 1px solid #d6ddff;
  border-radius: 12px;
  background: #f8faff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.travel-fee-distance-head h4 {
  margin: 0;
  color: #263260;
  font-size: 16px;
}

.travel-fee-distance-head .muted-note {
  margin-top: 4px;
}

.travel-fee-distance-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.travel-fee-distance-meta {
  margin: 0;
}

.travel-fee-distance-rules {
  border: 1px solid #dbe3ff;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.travel-fee-distance-rules .muted-note {
  margin: 0;
}

.travel-fee-distance-rule-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #3c476f;
  font-size: 13px;
}

.travel-fee-distance-rule-list strong {
  color: #1f2d63;
}

.travel-fee-distance-rule-more:empty {
  display: none;
}

.travel-fee-origin-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.travel-fee-map-preview-wrap {
  display: grid;
  gap: 8px;
}

.travel-fee-map-canvas {
  width: 100%;
  height: 220px;
  border: 1px solid #d8e0ff;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f8fc;
}

.travel-fee-map-meta {
  margin: 0;
}

.travel-fee-assign-users {
  border: 1px solid #d6ddff;
  border-radius: 12px;
  background: #f8faff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.travel-fee-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding-top: 12px;
  margin-top: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 18px);
}

.travel-fee-assign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.travel-fee-assigned-summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.travel-fee-assigned-text {
  color: #4b567e;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  padding-left: 2px;
}

.travel-fee-assign-modal {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.travel-fee-assign-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 22, 52, 0.44);
}

.travel-fee-assign-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 64px);
  overflow: auto;
  border-radius: 12px;
  padding: 18px;
  display: grid;
  gap: 12px;
}

.travel-fee-assign-list {
  display: grid;
  gap: 8px;
}

.travel-fee-team-option {
  margin: 0;
  border: 1px solid #d7dff9;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.travel-fee-team-option input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.travel-fee-team-option-copy {
  display: grid;
  gap: 2px;
}

.travel-fee-team-option-copy strong {
  font-size: 13px;
  color: #25305a;
}

.travel-fee-team-option-copy small {
  color: #647099;
  font-size: 12px;
}

@media (max-width: 920px) {
  .travel-fees-redesign .travel-fees-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .travel-fees-redesign .travel-fees-hero-cta {
    justify-content: flex-start;
  }

  .travel-fees-redesign .travel-fees-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .travel-fees-redesign .travel-fee-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .travel-fees-redesign .travel-fee-card-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .travel-fee-config-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .travel-fee-hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .travel-fees-redesign .travel-fees-stat-row {
    grid-template-columns: 1fr;
  }

  .tax-rates-v2 .tax-rates-metrics {
    grid-template-columns: 1fr;
  }

  .coupons-redesign .coupons-stat-row {
    grid-template-columns: 1fr;
  }

  .travel-fee-distance-grid,
  .travel-fee-origin-grid {
    grid-template-columns: 1fr;
  }

  .travel-fee-editor-modal {
    width: min(100%, 100%);
  }

  .travel-fee-basics-grid,
  .travel-fee-type-picker,
  .travel-fee-hero-meta {
    grid-template-columns: 1fr;
  }

  .travel-fee-assign-row {
    align-items: stretch;
  }

  .travel-fee-assign-row .btn {
    width: 100%;
  }

  .travel-fee-map-canvas {
    height: 190px;
  }
}

.tax-rates-shell {
  display: grid;
  gap: 14px;
}

.tax-rates-v2 .tax-rates-header {
  border: 1px solid #d2ddeb;
  background:
    radial-gradient(420px 210px at 8% 8%, rgba(83, 109, 255, 0.12), transparent 72%),
    radial-gradient(400px 190px at 92% 14%, rgba(21, 157, 108, 0.1), transparent 74%),
    linear-gradient(132deg, #f8fbff 0%, #f4f7ff 50%, #f7fff9 100%);
  display: grid;
  gap: 14px;
}

.tax-rates-v2 .tax-rates-header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.tax-rates-v2 .tax-rates-title-wrap {
  min-width: 0;
}

.tax-rates-v2 .tax-rates-kicker {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 700;
  color: #3c4c79;
}

.tax-rates-v2 h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #1d2e52;
  font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
}

.tax-rates-v2 .tax-rates-hero-text {
  margin: 12px 0 0;
  max-width: 68ch;
  color: #4e5f85;
  font-size: 15px;
}

.tax-rates-v2 .tax-rates-header-cta {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.tax-rates-v2 .tax-rates-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tax-rates-v2 .tax-rates-metric {
  border: 1px solid #d1dcf4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}

.tax-rates-v2 .tax-rates-metric span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #637399;
  font-weight: 700;
}

.tax-rates-v2 .tax-rates-metric strong {
  font-size: 22px;
  line-height: 1;
  color: #223764;
  font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
}

.tax-rates-v2 .tax-rates-board {
  border: 1px solid #d7e2ef;
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.96) 0%, rgba(245, 250, 255, 0.98) 100%);
}

.tax-rates-v2 .tax-rates-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.tax-rates-v2 .tax-rates-board-head h3 {
  margin: 0;
  font-size: 20px;
  color: #1f345d;
}

.tax-rates-v2 .tax-rates-board-head .muted-note {
  margin: 0;
}

.tax-rates-empty {
  margin-top: 12px;
  min-height: 200px;
  border: 1px dashed #ccd8f6;
  border-radius: 14px;
  background: #f9fbff;
  padding: 16px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 10px;
}

.tax-rates-empty-icon {
  width: 44px;
  height: 44px;
  border: 1px solid #b9c8f8;
  border-radius: 999px;
  color: #5b6fff;
  background: #eef3ff;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tax-rates-empty h4 {
  margin: 8px 0 0;
  color: #1f2641;
}

.tax-rates-empty p {
  margin: 0;
  color: #5f6f95;
  max-width: 56ch;
}

.tax-rates-table-wrap {
  margin-top: 12px;
}

.tax-rates-table .tax-rates-name {
  color: #1f2f58;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.tax-rates-table .tax-rates-region {
  color: #44557f;
}

.tax-rates-rate-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #c9d8ff;
  background: #edf2ff;
  color: #2946c8;
  font-weight: 700;
}

.tax-rates-actions-cell {
  min-width: 126px;
}

.tax-rates-table th:nth-child(1) {
  width: 28%;
}

.tax-rates-table th:nth-child(2) {
  width: 28%;
}

.tax-rates-table th:nth-child(3) {
  width: 14%;
}

.tax-rates-table th:nth-child(4) {
  width: 16%;
}

.coupons-shell {
  display: grid;
  gap: 14px;
}

.coupons-redesign .coupons-hero {
  border: 1px solid #d2ddeb;
  background:
    radial-gradient(420px 210px at 8% 8%, rgba(96, 116, 255, 0.16), transparent 72%),
    radial-gradient(400px 190px at 92% 14%, rgba(236, 154, 53, 0.14), transparent 74%),
    linear-gradient(132deg, #f7fbff 0%, #f4f7ff 46%, #fff9f1 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.coupons-redesign .coupons-kicker {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 700;
  color: #4f5d88;
}

.coupons-redesign .coupons-hero h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #1d2e52;
  font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
}

.coupons-redesign .coupons-hero-text {
  margin: 12px 0 0;
  max-width: 68ch;
  color: #4e5f85;
  font-size: 15px;
}

.coupons-redesign .coupons-hero-cta {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.coupons-redesign .coupons-stat-row {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 650px;
}

.coupons-redesign .coupons-stat-chip {
  border: 1px solid #d0dcf5;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}

.coupons-redesign .coupons-stat-chip span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #637399;
  font-weight: 700;
}

.coupons-redesign .coupons-stat-chip strong {
  font-size: 24px;
  line-height: 1;
  color: #223764;
  font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
}

.coupons-redesign .coupons-board {
  border: 1px solid #d7e2ef;
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.96) 0%, rgba(245, 250, 255, 0.98) 100%);
}

.coupons-redesign .coupons-board-head h3 {
  margin: 0;
  font-size: 20px;
  color: #1f345d;
}

.coupons-redesign .coupons-board-head .muted-note {
  margin: 6px 0 0;
}

.coupons-table-wrap {
  margin-top: 12px;
}

.coupons-name {
  color: #1f2f58;
}

.coupons-amount-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #c9d8ff;
  background: #edf2ff;
  color: #2b48c9;
  font-weight: 700;
}

.coupons-redeemed-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d6deee;
  background: #f5f8ff;
  color: #495b87;
  font-weight: 700;
}

.coupons-promo-code {
  display: inline-flex;
  align-items: center;
  border: 1px dashed #b9c6ea;
  border-radius: 8px;
  background: #f8faff;
  color: #273a7e;
  font-family: "Space Grotesk", "Sora", "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
}

.coupons-actions-cell {
  min-width: 126px;
}

.coupon-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.coupon-code-row input {
  margin-top: 0;
}

.coupon-code-random-btn {
  white-space: nowrap;
  padding: 8px 12px;
}

.coupon-product-limit-group {
  margin: 0;
  border: 1px solid #d8dff2;
  border-radius: 12px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.coupon-product-limit-group legend {
  padding: 0 4px;
  color: #4e5c8d;
  font-size: 12px;
  font-weight: 700;
}

.coupon-product-limit-group .muted-note {
  margin: 0;
}

.coupon-product-limit-list {
  display: grid;
  gap: 6px;
  max-height: 164px;
  overflow-y: auto;
  padding-right: 4px;
}

.coupon-product-limit-option {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2f3d6e;
  font-size: 13px;
  font-weight: 600;
}

.coupon-product-limit-option input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

.coupons-table th:nth-child(1) {
  width: 28%;
}

.coupons-table th:nth-child(2) {
  width: 14%;
}

.coupons-table th:nth-child(3) {
  width: 16%;
}

.coupons-table th:nth-child(4) {
  width: 30%;
}

.coupons-promo-empty {
  color: #727b98;
  font-size: 13px;
}

.coupons-empty {
  margin-top: 12px;
  min-height: 220px;
  border: 1px dashed #ccd8f6;
  border-radius: 14px;
  background: #f9fbff;
  padding: 16px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 10px;
}

.coupons-empty-icon {
  width: 44px;
  height: 44px;
  border: 1px solid #b9c8f8;
  border-radius: 999px;
  color: #5b6fff;
  background: #eef3ff;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.coupons-empty h4 {
  margin: 8px 0 0;
  color: #1f2641;
}

.coupons-empty p {
  margin: 0;
  color: #5f6f95;
  max-width: 56ch;
}

.product-filters-shell {
  display: grid;
  gap: 14px;
}

.product-filters-table th:nth-child(1) {
  width: 19%;
}

.product-filters-table th:nth-child(2) {
  width: 22%;
}

.product-filters-table th:nth-child(3) {
  width: 11%;
}

.product-filters-table th:nth-child(4) {
  width: 19%;
}

.product-filters-table th:nth-child(5) {
  width: 19%;
}

.product-filters-usage-cell {
  white-space: nowrap;
}

.product-filters-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #3f63f3;
  color: #3f63f3;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
}

.products-plan-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.products-plan-card {
  display: grid;
  gap: 7px;
}

.listing-layout {
  gap: 14px;
}

.listing-filter-panel {
  padding: 18px;
  border: 1px solid #d6defa;
  border-radius: 14px;
  background: linear-gradient(180deg, #f5f8ff 0%, #eef3ff 100%);
  box-shadow: 0 8px 20px rgba(53, 73, 156, 0.06);
}

.listing-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.listing-panel-head-copy {
  display: grid;
  gap: 2px;
}

.listing-panel-head h3 {
  margin: 0;
}

.listing-panel-head p {
  margin: 0;
  color: #58638a;
}

.listing-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid #d9e3ff;
  border-radius: 12px;
  background: #f8fbff;
}

.listing-filters-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: end;
}

.listing-filter-field {
  margin: 0;
  display: grid;
  gap: 5px;
}

.listing-filter-field span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #505a7f;
}

.listing-filters input,
.listing-filters select {
  margin-top: 0;
  background: #fff;
}

.listing-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.listing-filter-actions .btn {
  white-space: nowrap;
}

.listing-filter-actions .btn.is-active {
  background: #e8eeff;
  border-color: #b8c8ff;
  color: #3048d9;
}

.listing-more-filters {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed #d6e0ff;
}

.listing-more-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
}

.listing-create-shell {
  margin-top: 12px;
  border-top: 1px solid #dce2fb;
  padding-top: 12px;
}

.listing-create-shell h4 {
  margin: 0 0 8px;
}

.listing-results-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 10px;
}

.listing-results-title h3 {
  margin: 0;
}

.listing-results-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.listing-results-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.listing-results-page-size {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.listing-results-page-size span {
  font-size: 12px;
  font-weight: 700;
  color: #56618b;
  white-space: nowrap;
}

.listing-results-page-size select {
  min-width: 84px;
  min-height: 36px;
  margin: 0;
}

.listing-results-pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid #d9e3ff;
  border-radius: 999px;
  background: #f8fbff;
}

.listing-results-pagination .btn {
  min-height: 28px;
  padding: 5px 10px;
}

.listing-results-pagination span {
  font-size: 12px;
  font-weight: 700;
  color: #4a577f;
  white-space: nowrap;
}

.listing-results-summary {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #5d6a93;
  white-space: nowrap;
}

.listing-results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.listing-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-items: start;
}

.listing-card-grid.is-detail-view {
  grid-template-columns: minmax(0, 1fr);
}

.listing-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(39, 54, 129, 0.08);
  overflow: hidden;
}

.listing-thumb {
  border: none;
  width: 100%;
  min-height: 136px;
  padding: 0;
  cursor: pointer;
  position: relative;
  text-align: left;
  color: #fff;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.listing-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--listing-thumb-a) 0%, var(--listing-thumb-b) 100%);
}

.listing-thumb.has-media-thumb::before {
  background:
    var(--listing-thumb-image),
    linear-gradient(135deg, var(--listing-thumb-a) 0%, var(--listing-thumb-b) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.listing-thumb > * {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.listing-thumb-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.listing-thumb-status-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(22, 32, 76, 0.18);
}

.listing-thumb-status-icon.is-good {
  background: linear-gradient(180deg, #e2fdf1 0%, #d2f5e6 100%);
  border-color: #9ddfc3;
  color: #0a714f;
}

.listing-thumb-status-icon.is-warn {
  background: linear-gradient(180deg, #fff4dd 0%, #ffebc4 100%);
  border-color: #f0cb7e;
  color: #9b6200;
}

.listing-thumb-status-icon.is-danger {
  background: linear-gradient(180deg, #ffe9e9 0%, #ffd7d7 100%);
  border-color: #f2b3b3;
  color: #9b1c1c;
}

.listing-thumb-status-icon.is-neutral {
  background: linear-gradient(180deg, #eef3ff 0%, #e2e9ff 100%);
  border-color: #c5d2ff;
  color: #3444ab;
}

.listing-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.listing-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.05;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(22, 32, 76, 0.12);
}

.listing-chip::before {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.listing-chip-good {
  background: linear-gradient(180deg, #e2fdf1 0%, #d2f5e6 100%);
  border-color: #9ddfc3;
  color: #0a714f;
}

.listing-chip-good::before {
  content: "✓";
  color: #0a714f;
  background: rgba(10, 113, 79, 0.16);
}

.listing-chip-warn {
  background: linear-gradient(180deg, #fff4dd 0%, #ffebc4 100%);
  border-color: #f0cb7e;
  color: #9b6200;
}

.listing-chip-warn::before {
  content: "$";
  color: #9b6200;
  background: rgba(155, 98, 0, 0.14);
}

.listing-chip-neutral {
  background: linear-gradient(180deg, #eef3ff 0%, #e2e9ff 100%);
  border-color: #c5d2ff;
  color: #3444ab;
}

.listing-chip-neutral::before {
  content: "•";
  color: #3444ab;
  background: rgba(52, 68, 171, 0.14);
}

.listing-card-body {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.listing-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.listing-card-title-row .listing-thumb-status-icons {
  margin-top: 2px;
  flex-shrink: 0;
}

.listing-card-body h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.18;
}

.listing-card-location {
  margin: 0;
  color: var(--muted);
}

.listing-card-client,
.listing-card-contact {
  margin: 0;
  color: #4f5a81;
  font-size: 14px;
}

.listing-card-order {
  border-top: 1px solid #e7ecff;
  border-bottom: 1px solid #e7ecff;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #4a557b;
}

.listing-card-order strong {
  color: #232c4e;
}

.listing-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #5f6a91;
  font-size: 12px;
}

.listing-detail-panel {
  overflow: hidden;
}

.listing-detail-panel-full {
  grid-column: 1 / -1;
}

.listing-detail-topbar {
  padding: 14px 14px 10px;
  display: flex;
  justify-content: flex-end;
}

.listing-detail-hero {
  padding: 18px;
  min-height: 170px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--listing-thumb-a) 0%, var(--listing-thumb-b) 100%);
  color: #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.listing-detail-hero.has-media-hero {
  background:
    linear-gradient(135deg, rgba(19, 29, 67, 0.58) 0%, rgba(26, 38, 95, 0.46) 100%),
    var(--listing-hero-image),
    linear-gradient(135deg, var(--listing-thumb-a) 0%, var(--listing-thumb-b) 100%);
  background-size: cover, cover, cover;
  background-position: center center, center center, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.listing-detail-hero h2 {
  margin: 0 0 5px;
  font-size: clamp(28px, 3.2vw, 36px);
  color: #f8fbff;
  text-shadow: 0 2px 12px rgba(11, 16, 40, 0.28);
}

.listing-detail-hero p {
  margin: 0 0 9px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(11, 16, 40, 0.28);
}

.listing-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.listing-detail-grid {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.listing-info-card {
  border: 1px solid #e5eaff;
  border-radius: 12px;
  padding: 12px;
  background: #f8faff;
}

.listing-info-card h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #58628a;
}

.listing-info-card p {
  margin: 0 0 6px;
  color: #344066;
  font-size: 14px;
}

.listing-status-badges {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.listing-client-actions {
  margin-top: 8px;
}

.listing-customer-header {
  margin-top: 6px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.listing-customer-list {
  margin-top: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.listing-customer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-self: center;
}

.listing-customer-download-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 14px;
}

.listing-customer-download-btn .listing-gallery-action-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.listing-download-lock-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.listing-download-lock-btn,
.listing-download-lock-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #ccd7ff;
  background: #eef2ff;
  color: #4459bc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.16s ease;
}

.listing-transfer-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
}

.listing-transfer-glyph {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.listing-download-lock-btn:active {
  transform: scale(0.95);
}

.listing-delete-btn {
  border-color: #f2ccda;
  background: #fff4f8;
  color: #c83a72;
}

.listing-delete-btn:hover {
  background: #ffe8f1;
  border-color: #e9acc3;
  color: #b71f5f;
}

.listing-download-lock-btn.is-locked,
.listing-download-lock-icon.is-locked {
  background: #ffeae7;
  border-color: #f8c8c1;
  color: #bc4b39;
}

.listing-download-lock-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7) rotate(-14deg);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.24, 0.8, 0.2, 1);
  pointer-events: none;
}

.listing-download-lock-btn.is-locked .listing-download-lock-glyph-locked,
.listing-download-lock-icon.is-locked .listing-download-lock-glyph-locked,
.listing-download-lock-btn:not(.is-locked) .listing-download-lock-glyph-unlocked,
.listing-download-lock-icon:not(.is-locked) .listing-download-lock-glyph-unlocked {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  animation: listing-lock-glyph-in 0.24s ease;
}

.listing-download-lock-btn.is-locked .listing-download-lock-glyph-unlocked,
.listing-download-lock-icon.is-locked .listing-download-lock-glyph-unlocked,
.listing-download-lock-btn:not(.is-locked) .listing-download-lock-glyph-locked,
.listing-download-lock-icon:not(.is-locked) .listing-download-lock-glyph-locked {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7) rotate(14deg);
}

.listing-customer-add-btn {
  flex: 0 0 auto;
}

@keyframes listing-lock-glyph-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.62) rotate(-12deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

.listing-customer-add-card {
  border: 1px dashed #c9d5ff;
  border-radius: 10px;
  background: #f8faff;
  min-height: 92px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 4px;
  text-align: left;
  color: #33468f;
  cursor: pointer;
  font: inherit;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.listing-customer-add-card:hover {
  background: #eef3ff;
  border-color: #b3c4ff;
}

.listing-customer-add-card strong {
  font-size: 14px;
  font-weight: 700;
}

.listing-customer-add-card small {
  color: #5d6997;
  font-size: 12px;
}

.listing-customer-empty {
  grid-column: 1 / -1;
  border: 1px dashed #d6defa;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
}

.listing-customer-row {
  border: 1px solid #e3e9ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}

.listing-customer-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}

.listing-customer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  background: linear-gradient(145deg, #92a6ff 0%, #6d7ef0 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
}

.listing-customer-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-customer-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.listing-customer-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  position: relative;
  overflow: visible;
}

.listing-customer-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.listing-customer-copy strong {
  color: #263564;
  font-size: 14px;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-customer-copy span {
  font-size: 12px;
  color: #5e6994;
}

.listing-customer-company {
  line-height: 1.35;
}

.listing-customer-contact {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 230px;
  max-width: min(320px, calc(100vw - 88px));
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid #d2dcff;
  background: #f8faff;
  box-shadow: 0 14px 32px rgba(35, 52, 118, 0.18);
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(-7px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.listing-customer-contact::before {
  content: "";
  position: absolute;
  left: 16px;
  top: -6px;
  width: 10px;
  height: 10px;
  background: #f8faff;
  border-left: 1px solid #d2dcff;
  border-top: 1px solid #d2dcff;
  transform: rotate(45deg);
}

.listing-customer-contact span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-customer-contact.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.listing-customer-expand-btn {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid #d3dcff;
  background: #eff3ff;
  color: #4a5fbe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.listing-customer-expand-btn:hover {
  background: #e7eeff;
  border-color: #c3d1ff;
}

.listing-customer-expand-icon {
  width: 8px;
  height: 8px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.listing-customer-expand-btn.is-open .listing-customer-expand-icon {
  transform: rotate(-135deg) translateY(-1px);
}

.listing-customer-expand-btn.is-open {
  background: #dfe8ff;
  border-color: #b8c8ff;
}

.listing-customer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex: 0 0 auto;
  align-self: center;
}

.listing-customer-primary {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  color: #2f469f;
  background: #e9efff;
  border: 1px solid #ccd7ff;
}

.listing-client-actions input[data-role="listing-customer-search"] {
  flex: 1 1 180px;
  min-width: 180px;
  margin-top: 0;
}

.listing-media-wrap {
  padding: 22px 18px 20px;
  display: grid;
  gap: 16px;
}

.listing-media-wrap h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.listing-accordion {
  border: 1px solid #e3e9ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  overflow: clip;
}

.listing-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  transition: background 0.2s ease;
}

.listing-accordion summary:focus-visible {
  outline: 2px solid #6a7dff;
  outline-offset: -2px;
}

.listing-accordion summary:hover {
  background: #f4f7ff;
}

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

.listing-accordion-main {
  display: grid;
  gap: 1px;
}

.listing-accordion-title {
  font-size: 20px;
  line-height: 1.18;
  font-weight: 700;
  color: #1c2440;
}

.listing-accordion-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: #66739f;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.listing-accordion-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.listing-accordion-add-btn {
  white-space: nowrap;
}

.listing-accordion-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  background: #edf1ff;
  color: #4654c0;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #d4dcff;
}

.listing-accordion-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #d4dcff;
  color: #4a5ebf;
  font-size: 0;
  line-height: 1;
  transition: transform 0.2s ease;
}

.listing-accordion-chevron::before,
.listing-secondary-chevron::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.2s ease;
}

.listing-accordion[open] summary {
  background: linear-gradient(180deg, #f5f8ff 0%, #f0f5ff 100%);
}

.listing-accordion-body {
  border-top: 1px solid #e6edff;
  padding: 14px 16px 16px;
  display: grid;
  gap: 12px;
}

.listing-accordion-body p {
  margin: 0;
  color: #586289;
  font-size: 14px;
}

.listing-media-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid #dfe7ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fbff 0%, #f2f6ff 100%);
  padding: 10px;
}

.listing-media-toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.listing-media-sort-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4f5c88;
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.listing-media-sort-select select {
  margin-top: 0;
  min-width: 180px;
  min-height: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 14px;
}

.listing-media-order-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #32448a;
  background: #eaf0ff;
  border: 1px solid #cdd9ff;
  border-radius: 999px;
  min-height: 40px;
  padding: 9px 13px;
}

.listing-media-order-hint.is-inactive {
  color: #5e6a96;
  background: #f4f6fd;
  border-color: #dce2f8;
}

.listing-media-order-hint-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: #fff;
  color: #3e52b3;
  border: 1px solid #c5d4ff;
}

.listing-media-sync-btn {
  font-size: 13px;
  min-height: 40px;
  padding: 9px 14px;
  border-color: #bfcfff;
}

.listing-media-group-btn {
  font-size: 13px;
  min-height: 40px;
  padding: 9px 14px;
}

.listing-media-group-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.listing-media-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d3ddff;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #3c4ca4;
  background: #eef3ff;
}

.listing-media-group-chip em {
  font-style: normal;
  color: #5d6aa1;
  opacity: 0.9;
}

.listing-media-bulk-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.listing-media-bulk-actions .btn {
  font-size: 13px;
  min-height: 40px;
  padding: 9px 14px;
}

.listing-media-selection-sticky {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 16px);
  width: min(980px, calc(100vw - 28px));
  z-index: 260;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.2s ease;
}

.listing-media-selection-sticky.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.listing-media-selection-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #c9d6ff;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(17, 29, 74, 0.94) 0%, rgba(22, 35, 90, 0.94) 100%);
  box-shadow: 0 16px 38px rgba(16, 26, 74, 0.32);
  padding: 10px 12px;
}

.listing-media-selection-sticky-summary {
  margin: 0;
  color: #eef3ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.listing-media-selection-sticky-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.listing-media-selection-sticky-actions .btn {
  font-size: 12px;
  padding: 7px 11px;
  white-space: nowrap;
}

.listing-gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  contain: layout style;
}

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

.listing-files-empty {
  border: 1px dashed #d9e4ff;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  background: #f7faff;
}

.listing-files-row {
  border: 1px solid #dfe7ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 8px 20px rgba(47, 68, 155, 0.07);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.listing-files-row.is-selected {
  border-color: #8ea7ff;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  box-shadow:
    0 0 0 2px rgba(108, 129, 255, 0.2),
    0 12px 24px rgba(45, 68, 170, 0.12);
}

.listing-files-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.listing-files-select-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid #cfd9ff;
  background: #f2f6ff;
  color: #3850ae;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.listing-files-select-toggle:hover {
  border-color: #b9c8ff;
  background: #e8efff;
}

.listing-files-select-toggle.is-selected {
  border-color: #7f9cff;
  background: #dce7ff;
  color: #213d9a;
}

.listing-files-select-indicator {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #bad0ff;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.listing-files-select-toggle.is-selected .listing-files-select-indicator {
  border-color: #7e9cff;
  background: #5b7eff;
  color: #fff;
}

.listing-files-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 28px;
  border-radius: 9px;
  border: 1px solid #d1dcff;
  background: #eef3ff;
  color: #34479a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 8px;
}

.listing-files-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.listing-files-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #263564;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-files-copy span {
  font-size: 12px;
  color: #6170a0;
}

.listing-files-row-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.listing-file-visibility-btn,
.listing-file-visibility-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid #d2dcff;
}

.listing-file-visibility-chip {
  background: #eef3ff;
  color: #3550a8;
}

.listing-file-visibility-btn {
  white-space: nowrap;
}

.listing-file-visibility-btn.is-public,
.listing-file-visibility-chip.is-public {
  border-color: #bfe8d5;
  background: #e9f8f0;
  color: #14654a;
}

.listing-file-visibility-btn.is-private,
.listing-file-visibility-chip.is-private {
  border-color: #f0d4a4;
  background: #fff3dc;
  color: #7b4a13;
}

.listing-files-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.listing-gallery-card {
  border: 1px solid #dfe7ff;
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 10px;
  color: #374266;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 8px 22px rgba(47, 68, 155, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  content-visibility: auto;
  contain-intrinsic-size: 460px 420px;
  contain: layout paint style;
  touch-action: pan-y;
}

.listing-gallery-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.listing-gallery-card-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.listing-gallery-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  color: #34479a;
  background: #ecf1ff;
  border: 1px solid #cfd9ff;
}

.listing-action-target-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #8f2610;
  background: #ffe2da;
  border: 1px solid #f39a86;
}

.listing-tour-provider-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  color: #3047a0;
  background: #edf2ff;
  border: 1px solid #d2dcff;
}

.listing-media-group-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  color: #2f4a8f;
  background: #e5f0ff;
  border: 1px solid #c6d9ff;
}

.listing-room-label-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  color: #3047a0;
  background: #edf3ff;
  border: 1px solid #cad8ff;
  white-space: nowrap;
}

button.listing-room-label-badge {
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

button.listing-room-label-badge:hover {
  transform: translateY(-1px);
  background: #e4edff;
  border-color: #b8cbff;
}

.listing-room-label-badge.is-empty {
  color: #54639c;
  background: #f2f5ff;
  border-style: dashed;
}

.listing-room-label-badge.is-manual {
  color: #0f4c3a;
  background: #e4f8f0;
  border-color: #bcebd8;
}

.listing-media-hidden-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  color: #74411d;
  background: #fff4df;
  border: 1px solid #f2dab2;
}

.listing-media-action-needed-badge {
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid #f1c6ba;
  background: #fff0ec;
  color: #b83f2d;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.listing-media-action-needed-badge:hover {
  transform: translateY(-1px);
  background: #ffe7e1;
  border-color: #eeb3a4;
}

.listing-media-action-needed-badge span {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  color: #9f3322;
  border: 1px solid #efc9bf;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 0 5px;
}

.listing-gallery-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border-radius: 8px;
  background: #f3f6ff;
  border: 1px solid #d7e0ff;
  color: #5a6aa5;
  font-size: 14px;
  letter-spacing: 1px;
  user-select: none;
  -webkit-user-select: none;
}

.listing-gallery-card.is-draggable .listing-gallery-drag-handle {
  cursor: grab;
}

.listing-gallery-card.is-draggable {
  cursor: default;
}

.listing-gallery-card.is-draggable:hover {
  transform: none;
  border-color: #dfe7ff;
  box-shadow: 0 8px 22px rgba(47, 68, 155, 0.08);
}

.listing-gallery-card.is-draggable .listing-gallery-drag-handle:hover {
  background: #e8efff;
  border-color: #c4d2ff;
  color: #3f52ab;
}

.listing-gallery-card.is-draggable .listing-gallery-drag-handle:active {
  cursor: grabbing;
  transform: scale(0.96);
}

.listing-gallery-card.is-dragging {
  opacity: 0.65;
  transform: scale(0.98) rotate(0.2deg);
  border-color: #91a8ff;
  box-shadow: 0 16px 34px rgba(37, 57, 145, 0.26);
}

.listing-gallery-card.is-dragging-bundle {
  opacity: 0.84;
  border-color: #9db1ff;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
  box-shadow: 0 10px 24px rgba(52, 78, 175, 0.14);
}

.listing-gallery-media {
  position: relative;
  border: 1px solid #e3eaff;
  border-radius: 10px;
  overflow: hidden;
  background: #eef2ff;
  aspect-ratio: 4 / 3;
  contain: paint;
}

.listing-gallery-media.is-selectable-media {
  cursor: pointer;
}

.listing-gallery-media.is-selectable-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.listing-gallery-media.is-selectable-media:hover::after {
  border-color: rgba(139, 162, 255, 0.75);
  background: rgba(86, 116, 235, 0.06);
}

.listing-gallery-media img,
.listing-gallery-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-gallery-media img.is-broken {
  display: none;
}

.listing-gallery-media.is-video-media {
  aspect-ratio: 16 / 9;
  background: #0f1429;
}

.listing-gallery-media.is-video-media.is-video-portrait {
  aspect-ratio: 9 / 16;
  max-height: min(72vh, 680px);
}

.listing-gallery-media.is-video-media video {
  object-fit: contain;
  background: transparent;
}

.listing-gallery-media.is-tour-media {
  aspect-ratio: 16 / 9;
  background: #0f1429;
}

.listing-gallery-media.is-tour-media .listing-gallery-tour-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0f1429;
}

.listing-gallery-card.is-selected {
  border-color: #8ea7ff;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  box-shadow:
    0 0 0 2px rgba(108, 129, 255, 0.22),
    0 12px 26px rgba(45, 68, 170, 0.14);
}

.listing-gallery-card.is-selected .listing-gallery-media {
  border-color: #aec0ff;
}

.listing-gallery-card.is-selected .listing-gallery-media.is-selectable-media::after {
  border-color: rgba(105, 133, 255, 0.92);
  background: rgba(74, 99, 205, 0.14);
}

.listing-gallery-card.is-selected .listing-gallery-order-badge {
  background: #dce6ff;
  border-color: #b3c5ff;
  color: #2f44a3;
}

.listing-gallery-card.is-action-needed {
  border-color: #ee8f77;
  background: linear-gradient(180deg, #fff7f4 0%, #fff 100%);
  box-shadow:
    0 0 0 2px rgba(236, 111, 84, 0.2),
    0 10px 22px rgba(198, 79, 52, 0.18);
}

.listing-gallery-card.is-action-focus {
  animation: listing-action-focus-pulse 1.3s ease;
}

.listing-gallery-card.is-action-target {
  border-color: #e24d2a;
  background: linear-gradient(180deg, #fff3ef 0%, #fff 100%);
  box-shadow:
    0 0 0 3px rgba(226, 77, 42, 0.34),
    0 12px 28px rgba(196, 68, 38, 0.28);
}

.listing-gallery-card.is-action-target .listing-gallery-media {
  border-color: #f08a73;
  box-shadow: inset 0 0 0 2px rgba(226, 77, 42, 0.22);
}

.listing-gallery-card.is-action-target .listing-gallery-order-badge {
  background: #ffe2da;
  border-color: #f39a86;
  color: #8f2610;
}

@keyframes listing-action-focus-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(227, 110, 82, 0.46);
    border-color: #efb3a4;
  }
  100% {
    box-shadow:
      0 0 0 16px rgba(227, 110, 82, 0),
      0 8px 22px rgba(47, 68, 155, 0.08);
    border-color: #dfe7ff;
  }
}

.listing-gallery-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #4f5c88;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.listing-gallery-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.listing-gallery-actions .btn {
  padding: 7px 10px;
  font-size: 12px;
}

.listing-gallery-actions .btn.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.listing-gallery-actions .listing-gallery-action-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  position: relative;
}

.listing-gallery-actions .listing-gallery-action-btn.is-note {
  margin-right: 0;
  border-color: #f1c6ba;
  background: #fff1ed;
  color: #b33a29;
}

.listing-gallery-actions .listing-gallery-action-btn.is-note:hover {
  border-color: #e6a895;
  background: #ffe5de;
  color: #9f2f20;
}

.listing-gallery-action-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #b83f2d;
  color: #fff;
  border: 1px solid #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.listing-gallery-actions .listing-gallery-action-btn.is-danger {
  border-color: #f2ccda;
  background: #fff4f8;
  color: #cd3b74;
}

.listing-gallery-actions .listing-gallery-action-btn.is-danger:hover {
  background: #ffe8f1;
  border-color: #e7aac1;
  color: #b81f5e;
}

.listing-gallery-action-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.listing-gallery-selection-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(202, 215, 255, 0.95);
  color: #33457f;
  background: rgba(245, 249, 255, 0.9);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.listing-gallery-selection-badge.is-selected {
  border-color: rgba(154, 177, 255, 0.95);
  color: #233f9f;
  background: rgba(227, 236, 255, 0.94);
}

.listing-gallery-empty-cell {
  list-style: none;
  grid-column: 1 / -1;
  border: 1px dashed #d6deff;
  border-radius: 12px;
  background: #f9fbff;
  display: grid;
  place-items: center;
  min-height: 86px;
}

.listing-asset-form {
  border-top: 1px dashed #dce4ff;
  padding-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.listing-asset-form input {
  margin-top: 0;
}

.listing-asset-form select {
  margin-top: 0;
}

.listing-asset-form-tours {
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.6fr) minmax(0, 1fr) auto;
}

.listing-asset-empty {
  margin: 0;
  color: #6c77a2;
  padding: 18px 0;
  text-align: center;
}

.listing-delivery-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.listing-delivery-form label {
  margin: 0;
}

.listing-secondary-sections {
  border-top: 1px solid var(--line);
  padding: 22px 18px 24px;
  display: grid;
  gap: 24px;
}

.listing-secondary-section {
  display: grid;
  gap: 12px;
}

.listing-secondary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.listing-secondary-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.listing-secondary-row {
  border: 1px solid #dfe7ff;
  border-radius: 12px;
  background: #fff;
}

.listing-secondary-row > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.listing-secondary-row > summary::-webkit-details-marker {
  display: none;
}

.listing-secondary-row-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.listing-secondary-row-main strong {
  color: #212e57;
  font-size: 16px;
  font-weight: 700;
}

.listing-secondary-row-main span {
  color: #5f6a93;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-secondary-inline-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.listing-secondary-inline-actions .btn {
  padding: 7px 12px;
}

.listing-secondary-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f6a93;
  font-size: 0;
  line-height: 1;
  transition: transform 0.16s ease;
}

.listing-accordion[open] .listing-accordion-chevron,
.listing-secondary-row[open] .listing-secondary-chevron {
  transform: none;
}

.listing-accordion[open] .listing-accordion-chevron::before,
.listing-secondary-row[open] .listing-secondary-chevron::before {
  transform: translateY(1px) rotate(-135deg);
}

.listing-secondary-pill,
.listing-secondary-count-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #cfe0ff;
  background: #edf5ff;
  color: #3f5ab0;
}

.listing-secondary-body {
  border-top: 1px solid #edf2ff;
  padding: 11px 14px;
  display: grid;
  gap: 8px;
  background: #fbfcff;
}

.listing-secondary-row-media-match {
  border: 1px solid #e3e9ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  overflow: clip;
}

.listing-secondary-row-media-match > summary {
  padding: 12px 16px;
  min-height: 60px;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.2s ease;
}

.listing-secondary-row-media-match > summary:focus-visible {
  outline: 2px solid #6a7dff;
  outline-offset: -2px;
}

.listing-secondary-row-media-match > summary:hover {
  background: #f4f7ff;
}

.listing-secondary-row-media-match .listing-secondary-row-main strong {
  font-size: 20px;
  line-height: 1.18;
  color: #1c2440;
}

.listing-secondary-row-media-match .listing-secondary-pill,
.listing-secondary-row-media-match .listing-secondary-count-badge {
  padding: 0 8px;
  min-width: 30px;
  height: 24px;
  justify-content: center;
  background: #edf1ff;
  border-color: #d4dcff;
  color: #4654c0;
}

.listing-secondary-row-media-match .listing-secondary-inline-actions {
  gap: 10px;
}

.listing-secondary-row-media-match .listing-secondary-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #d4dcff;
  color: #4a5ebf;
  font-size: 0;
  line-height: 1;
  transition: transform 0.2s ease;
}

.listing-secondary-row-media-match[open] > summary {
  background: linear-gradient(180deg, #f5f8ff 0%, #f0f5ff 100%);
}

.listing-secondary-row-media-match > .listing-secondary-body {
  border-top: 1px solid #e6edff;
  padding: 14px 16px 16px;
}

.listing-property-details-stack {
  gap: 14px;
}

.listing-property-card {
  border: 1px solid #dfe7ff;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.listing-property-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf2ff;
  background: #f7f9ff;
}

.listing-property-card-head h4 {
  margin: 0;
  color: #202d57;
  font-size: 17px;
}

.listing-property-card-head .btn {
  padding: 7px 12px;
}

.listing-property-form {
  padding: 14px;
  display: grid;
  gap: 14px;
}

.listing-property-form-main {
  gap: 16px;
}

.listing-property-read-grid {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.listing-property-read-item {
  border: 1px solid #e3eaff;
  border-radius: 10px;
  background: #fbfdff;
  padding: 10px 11px;
  display: grid;
  gap: 6px;
}

.listing-property-read-item span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d6a95;
  font-weight: 700;
}

.listing-property-read-item strong {
  margin: 0;
  color: #1f2c54;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.listing-property-read-item-wide {
  grid-column: 1 / -1;
}

html[data-theme="dark"] .listing-property-read-item {
  border-color: #334877;
  background: #12203a;
}

html[data-theme="dark"] .listing-property-read-item span {
  color: #9eb1dc;
}

html[data-theme="dark"] .listing-property-read-item strong {
  color: #e4edff;
}

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

.listing-property-main-grid .listing-property-field {
  margin: 0;
}

.listing-property-main-grid .listing-property-field-wide {
  grid-column: 1 / -1;
}

.listing-property-form label {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #334272;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}

.listing-property-form label small {
  display: block;
  color: #5f6c98;
  font-weight: 500;
  font-size: 13px;
}

.listing-property-form input,
.listing-property-form select,
.listing-property-form textarea {
  margin-top: 0;
  font-weight: 400;
  color: #1e2b52;
}

.listing-property-form textarea {
  resize: vertical;
  min-height: 120px;
}

.listing-property-form-actions {
  display: flex;
  justify-content: flex-end;
}

.listing-property-price-input {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  border: 1px solid #cfd9ff;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.listing-property-price-input > span {
  display: grid;
  place-items: center;
  height: 100%;
  font-weight: 700;
  color: #53608d;
  background: #f4f7ff;
  border-right: 1px solid #d9e2ff;
}

.listing-property-price-input > input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.listing-secondary-body p {
  margin: 0;
  color: #35406a;
  font-size: 14px;
}

.listing-secondary-empty {
  margin: 0;
  color: #5f6a93;
  border: 1px dashed #d8e1ff;
  border-radius: 12px;
  background: #fafbff;
  padding: 12px;
}

.listing-secondary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.listing-secondary-stat {
  border: 1px solid #e1e8ff;
  border-radius: 10px;
  background: #fff;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.listing-secondary-stat strong {
  font-size: 13px;
  color: #304071;
}

.listing-secondary-stat em {
  font-style: normal;
  font-weight: 700;
  color: #4458b7;
}

.listing-marketing-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 320px));
  justify-content: start;
  align-items: start;
}

.listing-marketing-card {
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  display: grid;
  min-height: 100%;
}

.listing-marketing-artwork {
  --marketing-tone-a: #78d1ff;
  --marketing-tone-b: #5c6cf2;
  --marketing-overlay-top: rgba(13, 21, 52, 0.18);
  --marketing-overlay-bottom: rgba(23, 34, 89, 0.7);
  --marketing-text: #f4f7ff;
  --marketing-subtext: rgba(232, 239, 255, 0.96);
  --marketing-muted: rgba(222, 230, 255, 0.92);
  --marketing-chip-bg: rgba(19, 28, 66, 0.58);
  --marketing-chip-border: rgba(221, 231, 255, 0.42);
  --marketing-chip-text: #eef4ff;
  --marketing-cta-bg: rgba(245, 248, 255, 0.94);
  --marketing-cta-text: #253986;
  --marketing-cta-border: rgba(241, 244, 255, 0.86);
  --marketing-surface: #ffffff;
  --marketing-surface-alt: #f7faff;
  --marketing-surface-panel: rgba(255, 255, 255, 0.84);
  --marketing-border: #dbe4ff;
  --marketing-shadow: 0 16px 34px rgba(29, 41, 88, 0.12);
  --marketing-title: #23325f;
  --marketing-copy: #53618f;
  --marketing-desc: #48557f;
  --marketing-artwork-image-1: linear-gradient(145deg, var(--marketing-tone-a) 0%, var(--marketing-tone-b) 100%);
  --marketing-artwork-image-2: var(--marketing-artwork-image-1);
  --marketing-artwork-image-3: var(--marketing-artwork-image-1);
  --marketing-artwork-image-4: var(--marketing-artwork-image-1);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--marketing-border);
  background: var(--marketing-surface);
  box-shadow: var(--marketing-shadow);
}

.listing-marketing-artwork.variant-tile {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.listing-marketing-artwork.variant-picker {
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(30, 43, 92, 0.12);
}

.listing-marketing-artwork.variant-preview {
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(24, 36, 84, 0.18);
}

.listing-marketing-artwork.format-social_square {
  aspect-ratio: 1 / 1;
}

.listing-marketing-artwork.format-social_portrait {
  aspect-ratio: 4 / 5;
}

.listing-marketing-artwork.format-story_vertical {
  aspect-ratio: 9 / 16;
}

.listing-marketing-artwork.format-social_landscape {
  aspect-ratio: 16 / 9;
}

.listing-marketing-artwork.format-email_banner {
  aspect-ratio: 3 / 1;
}

.listing-marketing-artwork.format-email_feature {
  aspect-ratio: 5 / 3;
}

.listing-marketing-artwork.format-print_letter {
  aspect-ratio: 8.5 / 11;
}

.listing-marketing-artwork.format-print_landscape {
  aspect-ratio: 11 / 8.5;
}

.listing-marketing-artwork.format-print_postcard {
  aspect-ratio: 6 / 4;
}

.listing-marketing-artwork-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: linear-gradient(145deg, var(--marketing-tone-a) 0%, var(--marketing-tone-b) 100%);
  color: var(--marketing-text);
}

.listing-marketing-artwork.family-sheet .listing-marketing-artwork-canvas,
.listing-marketing-artwork.family-collage .listing-marketing-artwork-canvas,
.listing-marketing-artwork.family-postcard .listing-marketing-artwork-canvas,
.listing-marketing-artwork.family-contact .listing-marketing-artwork-canvas {
  background: var(--marketing-surface);
  color: var(--marketing-title);
}

.listing-marketing-artwork-image-frame,
.listing-marketing-artwork-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background-image: var(--listing-marketing-artwork-thumb-image), var(--marketing-artwork-image-1);
  background-size: cover;
  background-position: center;
}

.listing-marketing-artwork-image-frame::after,
.listing-marketing-artwork-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(10, 17, 35, 0.1) 100%);
}

.listing-marketing-artwork-thumb.is-secondary {
  --listing-marketing-artwork-thumb-image: var(--marketing-artwork-image-2, var(--marketing-artwork-image-1));
}

.listing-marketing-artwork-thumb.is-tertiary {
  --listing-marketing-artwork-thumb-image: var(--marketing-artwork-image-3, var(--marketing-artwork-image-1));
}

.listing-marketing-artwork-thumb.is-quaternary {
  --listing-marketing-artwork-thumb-image: var(--marketing-artwork-image-4, var(--marketing-artwork-image-1));
}

.listing-marketing-artwork-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.listing-marketing-artwork-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--marketing-chip-border);
  background: var(--marketing-chip-bg);
  color: var(--marketing-chip-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(23, 33, 74, 0.14);
}

.listing-marketing-artwork-chip.is-price {
  background: rgba(255, 247, 219, 0.96);
  border-color: rgba(232, 194, 105, 0.6);
  color: #8d6412;
}

.listing-marketing-artwork-chip.is-badge {
  background: rgba(240, 234, 255, 0.96);
  border-color: rgba(173, 155, 255, 0.58);
  color: #5543ba;
}

.listing-marketing-artwork-chip.is-surface {
  background: rgba(18, 29, 68, 0.58);
}

.listing-marketing-artwork-copy,
.listing-marketing-artwork-sheet-copy,
.listing-marketing-artwork-collage-copy,
.listing-marketing-artwork-postcard-copy,
.listing-marketing-artwork-contact-panel {
  display: grid;
  gap: 10px;
}

.listing-marketing-artwork h4 {
  margin: 0;
  font-size: clamp(20px, 2.7vw, 42px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.listing-marketing-artwork.variant-picker h4 {
  font-size: clamp(14px, 2vw, 24px);
}

.listing-marketing-artwork.variant-tile h4 {
  font-size: clamp(16px, 2.1vw, 28px);
}

.listing-marketing-artwork-subheadline,
.listing-marketing-artwork-description {
  margin: 0;
}

.listing-marketing-artwork-subheadline {
  color: inherit;
  opacity: 0.92;
  font-size: clamp(12px, 1.4vw, 18px);
  line-height: 1.35;
  font-weight: 600;
}

.listing-marketing-artwork-description {
  color: var(--marketing-desc);
  font-size: 13px;
  line-height: 1.5;
}

.listing-marketing-artwork-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.listing-marketing-artwork-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(223, 231, 255, 0.34);
  color: var(--marketing-subtext);
  font-size: 12px;
  font-weight: 700;
}

.listing-marketing-artwork.family-sheet .listing-marketing-artwork-stats span,
.listing-marketing-artwork.family-collage .listing-marketing-artwork-stats span,
.listing-marketing-artwork.family-postcard .listing-marketing-artwork-stats span,
.listing-marketing-artwork.family-contact .listing-marketing-artwork-stats span {
  background: #f1f5ff;
  border-color: #dce5ff;
  color: #3a4a7d;
}

.listing-marketing-artwork-contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--marketing-surface-panel);
  color: var(--marketing-title);
  min-width: 0;
}

.listing-marketing-artwork-contact.is-compact {
  padding: 8px 10px;
}

.listing-marketing-artwork-contact-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.listing-marketing-artwork-contact-avatar.is-fallback {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #8ca1ff 0%, #596ce7 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.listing-marketing-artwork-contact-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.listing-marketing-artwork-contact-copy strong,
.listing-marketing-artwork-contact-copy span,
.listing-marketing-artwork-contact-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-marketing-artwork-contact-copy strong {
  color: var(--marketing-title);
  font-size: 14px;
}

.listing-marketing-artwork-contact-copy span,
.listing-marketing-artwork-contact-copy small {
  color: #5a6895;
  font-size: 12px;
}

.listing-marketing-artwork-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  width: fit-content;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--marketing-cta-bg);
  border: 1px solid var(--marketing-cta-border);
  color: var(--marketing-cta-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(21, 31, 73, 0.15);
}

.listing-marketing-artwork-cta.is-compact {
  min-height: 32px;
  padding: 0 14px;
}

.listing-marketing-artwork-meta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.listing-marketing-artwork-layout {
  width: 100%;
  height: 100%;
}

.listing-marketing-artwork-layout-hero {
  position: relative;
  display: grid;
  min-height: 100%;
}

.listing-marketing-artwork-layout-hero .listing-marketing-artwork-image-frame.is-primary {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image: var(--marketing-artwork-image-1);
}

.listing-marketing-artwork-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--marketing-overlay-top) 0%, var(--marketing-overlay-bottom) 100%);
}

.listing-marketing-artwork-hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 3vw, 30px);
}

.listing-marketing-artwork-floating-stack {
  position: absolute;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(14px, 2vw, 20px);
  display: grid;
  gap: 10px;
  width: clamp(110px, 22%, 170px);
}

.listing-marketing-artwork-floating-stack .listing-marketing-artwork-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  border: 1px solid rgba(230, 237, 255, 0.4);
  box-shadow: 0 18px 30px rgba(11, 18, 43, 0.22);
}

.listing-marketing-artwork-layout-sheet,
.listing-marketing-artwork-layout-collage,
.listing-marketing-artwork-layout-postcard,
.listing-marketing-artwork-layout-contact {
  display: grid;
  min-height: 100%;
  background: var(--marketing-surface);
}

.listing-marketing-artwork-layout-sheet {
  grid-template-rows: minmax(46%, 1fr) auto;
}

.listing-marketing-artwork-sheet-hero {
  position: relative;
  padding: 16px;
  display: grid;
  align-content: start;
}

.listing-marketing-artwork-sheet-hero .listing-marketing-artwork-image-frame.is-primary {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image: var(--marketing-artwork-image-1);
}

.listing-marketing-artwork-sheet-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.9fr);
  gap: 18px;
  padding: 18px;
}

.listing-marketing-artwork-sheet-side {
  display: grid;
  align-content: start;
  gap: 12px;
}

.listing-marketing-artwork-layout-collage {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.listing-marketing-artwork-collage-copy {
  padding: 18px;
  align-content: start;
}

.listing-marketing-artwork-collage-media {
  padding: 18px 18px 18px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.listing-marketing-artwork-collage-media .listing-marketing-artwork-image-frame.is-primary {
  grid-column: 1 / span 2;
  min-height: 0;
  background-image: var(--marketing-artwork-image-1);
}

.listing-marketing-artwork-collage-media .listing-marketing-artwork-thumb {
  min-height: 0;
}

.listing-marketing-artwork-layout-postcard,
.listing-marketing-artwork-layout-contact {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.listing-marketing-artwork-postcard-media,
.listing-marketing-artwork-contact-media {
  padding: 18px;
}

.listing-marketing-artwork-postcard-media .listing-marketing-artwork-image-frame.is-primary,
.listing-marketing-artwork-contact-media .listing-marketing-artwork-image-frame.is-primary {
  width: 100%;
  height: 100%;
  min-height: 0;
  background-image: var(--marketing-artwork-image-1);
}

.listing-marketing-artwork-postcard-copy,
.listing-marketing-artwork-contact-panel {
  padding: 18px 18px 18px 0;
  align-content: start;
}

.listing-marketing-artwork-layout-story {
  position: relative;
  display: grid;
  min-height: 100%;
}

.listing-marketing-artwork-layout-story .listing-marketing-artwork-image-frame.is-primary {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image: var(--marketing-artwork-image-1);
}

.listing-marketing-artwork-story-sheen {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18) 0%, transparent 32%),
    linear-gradient(180deg, rgba(14, 21, 48, 0.18) 0%, rgba(17, 27, 56, 0.74) 100%);
}

.listing-marketing-artwork-story-top,
.listing-marketing-artwork-story-band,
.listing-marketing-artwork-story-bottom {
  position: relative;
  z-index: 1;
}

.listing-marketing-artwork-story-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
}

.listing-marketing-artwork-story-top .listing-marketing-artwork-thumb.is-story {
  width: 92px;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  border: 1px solid rgba(233, 239, 255, 0.42);
  box-shadow: 0 20px 30px rgba(10, 18, 44, 0.22);
}

.listing-marketing-artwork-story-band {
  align-self: end;
  margin: auto 18px 18px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(238, 244, 255, 0.18) 100%);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(228, 235, 255, 0.22);
}

.listing-marketing-artwork-story-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 18px;
}

.listing-marketing-artwork.tone-cobalt {
  --marketing-tone-a: #84d6ff;
  --marketing-tone-b: #4672f0;
  --marketing-overlay-top: rgba(15, 36, 92, 0.14);
  --marketing-overlay-bottom: rgba(20, 62, 151, 0.74);
  --marketing-chip-bg: rgba(15, 44, 107, 0.56);
  --marketing-cta-text: #1d4f96;
}

.listing-marketing-artwork.tone-emerald {
  --marketing-tone-a: #85dfdc;
  --marketing-tone-b: #2e8d83;
  --marketing-overlay-top: rgba(9, 46, 48, 0.12);
  --marketing-overlay-bottom: rgba(12, 83, 73, 0.76);
  --marketing-chip-bg: rgba(10, 77, 68, 0.54);
  --marketing-cta-bg: #e5fff7;
  --marketing-cta-text: #0c6b66;
}

.listing-marketing-artwork.tone-sunset {
  --marketing-tone-a: #ffb8d7;
  --marketing-tone-b: #9f5298;
  --marketing-overlay-top: rgba(84, 30, 61, 0.12);
  --marketing-overlay-bottom: rgba(133, 56, 101, 0.78);
  --marketing-chip-bg: rgba(106, 42, 83, 0.54);
  --marketing-cta-bg: #fff1f8;
  --marketing-cta-text: #963a70;
}

.listing-marketing-artwork.tone-slate {
  --marketing-tone-a: #a4b5dc;
  --marketing-tone-b: #5b6a9b;
  --marketing-overlay-top: rgba(26, 32, 61, 0.12);
  --marketing-overlay-bottom: rgba(60, 68, 110, 0.76);
  --marketing-chip-bg: rgba(31, 41, 74, 0.6);
  --marketing-cta-bg: #ecf0fb;
  --marketing-cta-text: #334677;
}

.listing-marketing-artwork.tone-gold {
  --marketing-tone-a: #ffe0a3;
  --marketing-tone-b: #b17d28;
  --marketing-overlay-top: rgba(77, 54, 14, 0.12);
  --marketing-overlay-bottom: rgba(137, 94, 23, 0.76);
  --marketing-chip-bg: rgba(111, 77, 23, 0.54);
  --marketing-cta-bg: #fff6de;
  --marketing-cta-text: #856115;
}

.listing-marketing-artwork.tone-noir {
  --marketing-tone-a: #8d96ab;
  --marketing-tone-b: #242836;
  --marketing-overlay-top: rgba(9, 10, 13, 0.14);
  --marketing-overlay-bottom: rgba(18, 18, 24, 0.82);
  --marketing-chip-bg: rgba(20, 21, 29, 0.6);
  --marketing-cta-bg: #f3f4f9;
  --marketing-cta-text: #2a2f41;
}

.listing-marketing-artwork.variant-picker .listing-marketing-artwork-hero-content,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-sheet-hero,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-sheet-body,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-collage-copy,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-collage-media,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-postcard-media,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-postcard-copy,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-contact-media,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-contact-panel,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-story-top,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-story-band,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-story-bottom {
  padding: 12px;
}

.listing-marketing-artwork.variant-picker .listing-marketing-artwork-floating-stack {
  width: 96px;
  right: 12px;
  bottom: 12px;
}

.listing-marketing-artwork.variant-picker .listing-marketing-artwork-chip,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-stats span,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-cta {
  transform: scale(0.92);
  transform-origin: left center;
}

.listing-marketing-artwork.variant-picker .listing-marketing-artwork-contact {
  padding: 8px 10px;
}

.listing-marketing-artwork.variant-picker .listing-marketing-artwork-contact-avatar {
  width: 34px;
  height: 34px;
}

.listing-marketing-artwork.variant-picker .listing-marketing-artwork-contact-copy strong {
  font-size: 12px;
}

.listing-marketing-artwork.variant-picker .listing-marketing-artwork-contact-copy span,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-contact-copy small,
.listing-marketing-artwork.variant-picker .listing-marketing-artwork-description {
  font-size: 11px;
}

.listing-marketing-artwork.variant-tile .listing-marketing-artwork-contact {
  max-width: 280px;
}

@media (max-width: 1100px) {
  .listing-marketing-artwork-layout-collage,
  .listing-marketing-artwork-layout-postcard,
  .listing-marketing-artwork-layout-contact,
  .listing-marketing-artwork-sheet-body {
    grid-template-columns: 1fr;
  }

  .listing-marketing-artwork-collage-media,
  .listing-marketing-artwork-postcard-copy,
  .listing-marketing-artwork-contact-panel {
    padding: 0 18px 18px;
  }

  .listing-marketing-artwork-postcard-media,
  .listing-marketing-artwork-contact-media {
    padding: 18px 18px 0;
  }
}

@media (max-width: 720px) {
  .listing-marketing-artwork-story-bottom,
  .listing-marketing-artwork-meta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .listing-marketing-artwork-story-top {
    flex-direction: column;
  }

  .listing-marketing-artwork-floating-stack {
    position: static;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.listing-marketing-card-preview {
  --listing-flyer-overlay: linear-gradient(180deg, rgba(6, 12, 34, 0.18) 0%, rgba(6, 12, 34, 0.64) 100%);
  --listing-flyer-chip-bg: rgba(16, 25, 61, 0.46);
  --listing-flyer-chip-border: rgba(216, 229, 255, 0.42);
  --listing-flyer-chip-color: #eef4ff;
  --listing-flyer-cta-bg: rgba(234, 242, 255, 0.95);
  --listing-flyer-cta-color: #273986;
  position: relative;
  border-bottom: 1px solid #e5edff;
  background:
    linear-gradient(155deg, rgba(35, 55, 128, 0.68) 0%, rgba(66, 94, 204, 0.48) 44%, rgba(28, 41, 90, 0.74) 100%),
    var(--listing-flyer-image),
    linear-gradient(145deg, var(--listing-flyer-color-a, #66c8f5) 0%, var(--listing-flyer-color-b, #4d5ff3) 100%);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4 / 5;
}

.listing-marketing-card-preview.format-social_square {
  aspect-ratio: 1 / 1;
}

.listing-marketing-card-preview.format-social_portrait {
  aspect-ratio: 4 / 5;
}

.listing-marketing-card-preview.format-story_vertical {
  aspect-ratio: 9 / 16;
}

.listing-marketing-card-preview.format-social_landscape {
  aspect-ratio: 16 / 9;
}

.listing-marketing-card-preview.format-email_banner {
  aspect-ratio: 3 / 1;
}

.listing-marketing-card-preview.format-email_feature {
  aspect-ratio: 5 / 3;
}

.listing-marketing-card-preview.format-print_letter {
  aspect-ratio: 8.5 / 11;
}

.listing-marketing-card-preview.format-print_landscape {
  aspect-ratio: 11 / 8.5;
}

.listing-marketing-card-preview.format-print_postcard {
  aspect-ratio: 6 / 4;
}

.listing-marketing-card-overlay {
  position: absolute;
  inset: 0;
  background: var(--listing-flyer-overlay);
  padding: 12px;
  display: grid;
  align-content: end;
  gap: 4px;
  color: #f1f6ff;
}

.listing-marketing-card-preview.layout-top .listing-marketing-card-overlay {
  align-content: start;
}

.listing-marketing-card-preview.layout-center .listing-marketing-card-overlay {
  align-content: center;
  text-align: center;
}

.listing-marketing-card-preview.layout-split .listing-marketing-card-overlay {
  align-content: space-between;
}

.listing-marketing-card-preview.tone-indigo {
  --listing-flyer-overlay: linear-gradient(180deg, rgba(12, 19, 48, 0.2) 0%, rgba(24, 38, 90, 0.7) 100%);
}

.listing-marketing-card-preview.tone-cobalt {
  --listing-flyer-overlay: linear-gradient(180deg, rgba(12, 32, 84, 0.22) 0%, rgba(27, 66, 143, 0.72) 100%);
}

.listing-marketing-card-preview.tone-emerald {
  --listing-flyer-overlay: linear-gradient(180deg, rgba(11, 47, 56, 0.24) 0%, rgba(16, 73, 78, 0.72) 100%);
  --listing-flyer-chip-bg: rgba(14, 66, 69, 0.58);
  --listing-flyer-cta-bg: #e5fff7;
  --listing-flyer-cta-color: #0c6b66;
}

.listing-marketing-card-preview.tone-sunset {
  --listing-flyer-overlay: linear-gradient(180deg, rgba(59, 24, 46, 0.24) 0%, rgba(124, 52, 89, 0.74) 100%);
  --listing-flyer-chip-bg: rgba(90, 36, 68, 0.56);
  --listing-flyer-cta-bg: #fff1f8;
  --listing-flyer-cta-color: #963a70;
}

.listing-marketing-card-preview.tone-slate {
  --listing-flyer-overlay: linear-gradient(180deg, rgba(19, 26, 46, 0.22) 0%, rgba(53, 62, 97, 0.72) 100%);
  --listing-flyer-chip-bg: rgba(31, 41, 74, 0.6);
  --listing-flyer-cta-bg: #ecf0fb;
  --listing-flyer-cta-color: #334677;
}

.listing-marketing-card-preview.tone-gold {
  --listing-flyer-overlay: linear-gradient(180deg, rgba(62, 45, 16, 0.24) 0%, rgba(119, 82, 24, 0.74) 100%);
  --listing-flyer-chip-bg: rgba(102, 70, 24, 0.58);
  --listing-flyer-cta-bg: #fff6de;
  --listing-flyer-cta-color: #856115;
}

.listing-marketing-card-preview.tone-noir {
  --listing-flyer-overlay: linear-gradient(180deg, rgba(10, 10, 12, 0.26) 0%, rgba(25, 25, 31, 0.8) 100%);
  --listing-flyer-chip-bg: rgba(25, 25, 31, 0.68);
  --listing-flyer-cta-bg: #f3f4f9;
  --listing-flyer-cta-color: #2a2f41;
}

.listing-marketing-template-chip {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--listing-flyer-chip-bg);
  border: 1px solid var(--listing-flyer-chip-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--listing-flyer-chip-color);
}

.listing-marketing-card-overlay strong {
  font-size: 20px;
  line-height: 1.08;
}

.listing-marketing-card-overlay span {
  font-size: 13px;
  opacity: 0.95;
}

.listing-marketing-card-overlay em {
  font-style: normal;
  margin-top: 3px;
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--listing-flyer-cta-bg);
  color: var(--listing-flyer-cta-color);
  font-size: 12px;
  font-weight: 800;
}

.listing-marketing-card-body {
  padding: 10px 11px 12px;
  display: grid;
  gap: 7px;
}

.listing-marketing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.listing-marketing-card-head h4 {
  margin: 0;
  color: #23325f;
  font-size: 17px;
}

.listing-marketing-card-meta,
.listing-marketing-card-updated {
  margin: 0;
  font-size: 13px;
  color: #5c6996;
}

.listing-marketing-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.listing-marketing-card-actions .btn {
  padding: 7px 11px;
  font-size: 12px;
}

.listing-marketing-modal {
  width: min(1280px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 14px;
  position: relative;
}

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

.listing-marketing-modal-head h3 {
  margin: 0;
}

.listing-marketing-modal-head p {
  margin: 6px 0 0;
  color: #58648f;
  max-width: 70ch;
}

.listing-marketing-modal-form {
  display: grid;
  gap: 12px;
}

.listing-marketing-modal-shell {
  display: grid;
  gap: 14px;
}

.listing-marketing-modal-topline {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
  align-items: start;
}

.listing-marketing-modal-grid.listing-marketing-modal-grid--top {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.listing-marketing-modal-block {
  border: 1px solid #dce5ff;
  border-radius: 12px;
  background: #f9fbff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.listing-marketing-modal-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.listing-marketing-modal-block-head strong {
  display: block;
  color: #22305e;
  font-size: 16px;
}

.listing-marketing-modal-block-head p {
  margin: 5px 0 0;
  color: #5b6895;
  line-height: 1.45;
}

.listing-marketing-section-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 5px;
  color: #6574a2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.listing-marketing-customer-preview {
  border: 1px solid #dce5ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.listing-marketing-customer-preview-card {
  border: 1px solid #d8e3ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.listing-marketing-customer-preview-card.is-empty {
  background: #f8fbff;
}

.listing-marketing-customer-preview-avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #d7e1ff;
  background: #eef3ff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.listing-marketing-customer-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-marketing-customer-preview-avatar.is-fallback {
  color: #eef4ff;
  background: linear-gradient(135deg, #8fd3ff 0%, #5a6df0 100%);
  font-size: 28px;
  font-weight: 800;
}

.listing-marketing-customer-preview-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.listing-marketing-customer-preview-copy strong {
  color: #24315f;
  font-size: 16px;
  line-height: 1.25;
}

.listing-marketing-customer-preview-copy span {
  color: #4f5f95;
  font-size: 13px;
  font-weight: 700;
}

.listing-marketing-customer-preview-copy small {
  color: #62709e;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

.listing-marketing-customer-preview-note {
  color: #5b6895;
  font-size: 12px;
  line-height: 1.45;
}

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

.listing-marketing-modal-grid label {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #2f3d6e;
  font-weight: 700;
}

.listing-marketing-modal-grid input,
.listing-marketing-modal-grid select {
  margin-top: 0;
}

.listing-marketing-primary-photo-field {
  border: 1px solid #dce5ff;
  border-radius: 12px;
  background: #f9fbff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.listing-marketing-primary-photo-label {
  color: #2f3d6e;
  font-size: 13px;
  font-weight: 700;
}

.listing-marketing-primary-photo-trigger {
  width: 100%;
  border: 1px solid #d8e3ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  color: #2a3661;
  cursor: pointer;
}

.listing-marketing-primary-photo-trigger:hover {
  border-color: #9ab3ff;
  box-shadow: inset 0 0 0 1px rgba(78, 97, 230, 0.18);
}

.listing-marketing-primary-photo-thumb {
  width: 92px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px solid #d7e1ff;
  overflow: hidden;
  background: linear-gradient(135deg, #8fd3ff 0%, #5a6df0 100%);
  display: grid;
  place-items: center;
}

.listing-marketing-primary-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-marketing-primary-photo-placeholder {
  color: #f2f6ff;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
}

.listing-marketing-primary-photo-copy {
  display: grid;
  gap: 4px;
}

.listing-marketing-primary-photo-copy strong {
  color: #253563;
  font-size: 14px;
  line-height: 1.3;
}

.listing-marketing-primary-photo-copy small {
  color: #5f6d99;
  font-size: 12px;
  line-height: 1.35;
}

.listing-marketing-primary-photo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #c7d6ff;
  background: #eef3ff;
  color: #4457a2;
  font-weight: 700;
  font-size: 12px;
  padding: 7px 11px;
  white-space: nowrap;
}

.listing-marketing-photo-picker-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(16, 24, 58, 0.45);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 16px;
}

.listing-marketing-photo-picker {
  width: min(940px, 100%);
  max-height: min(78vh, 820px);
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #d7e2ff;
  background: #f9fbff;
}

.listing-marketing-photo-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.listing-marketing-photo-picker-head h4 {
  margin: 0;
}

.listing-marketing-photo-picker-head p {
  margin: 4px 0 0;
  color: #5c6a96;
}

.listing-marketing-photo-picker-actions {
  display: flex;
  gap: 8px;
}

.listing-marketing-photo-picker-actions .btn.is-selected {
  border-color: #7e98ff;
  box-shadow: inset 0 0 0 1px rgba(88, 108, 235, 0.28);
  background: #edf3ff;
}

.listing-marketing-photo-picker-grid {
  border: 1px solid #d9e4ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  overflow: auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.listing-marketing-photo-option {
  border: 1px solid #d6e2ff;
  border-radius: 10px;
  background: #fdfefe;
  display: grid;
  gap: 6px;
  padding: 8px;
  text-align: left;
  color: #2a3765;
  cursor: pointer;
}

.listing-marketing-photo-option:hover {
  border-color: #9bb2ff;
  box-shadow: inset 0 0 0 1px rgba(78, 97, 230, 0.18);
}

.listing-marketing-photo-option.is-selected {
  border-color: #708dff;
  box-shadow: inset 0 0 0 1px rgba(78, 97, 230, 0.3);
  background: #f3f7ff;
}

.listing-marketing-photo-option-thumb {
  display: grid;
  place-items: center;
  border: 1px solid #d4e0ff;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #8fd3ff 0%, #5a6df0 100%);
}

.listing-marketing-photo-option-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-marketing-photo-option-placeholder {
  color: #edf2ff;
  font-size: 11px;
  font-weight: 700;
}

.listing-marketing-photo-option-label {
  font-size: 12px;
  line-height: 1.35;
  color: #3e4d80;
  word-break: break-word;
}

@media (max-width: 1100px) {
  .listing-marketing-modal-topline {
    grid-template-columns: 1fr;
  }

  .listing-marketing-photo-picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.listing-marketing-template-grid {
  border: 1px solid #dce5ff;
  border-radius: 12px;
  background: #f9fbff;
  padding: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.listing-flyer-template-tile {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.listing-flyer-template-tile input {
  margin: 4px 0 0;
  accent-color: var(--accent);
}

.listing-flyer-template-meta {
  --listing-template-overlay: linear-gradient(180deg, rgba(7, 15, 36, 0.2) 0%, rgba(7, 15, 36, 0.62) 100%);
  --listing-template-chip-bg: rgba(16, 25, 61, 0.44);
  --listing-template-cta-bg: rgba(236, 242, 255, 0.95);
  --listing-template-cta-color: #2a3f8c;
  border: 1px solid #d8e3ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 9px 10px;
  display: grid;
  gap: 6px;
  min-height: 100%;
}

.listing-flyer-template-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d7e3ff;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, #66c8f5 0%, #4d5ff3 100%);
}

.listing-flyer-template-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--listing-template-overlay);
}

.listing-flyer-template-preview.format-social_square {
  aspect-ratio: 1 / 1;
}

.listing-flyer-template-preview.format-social_portrait,
.listing-flyer-template-preview.format-print_letter {
  aspect-ratio: 4 / 5;
}

.listing-flyer-template-preview.format-story_vertical {
  aspect-ratio: 9 / 16;
}

.listing-flyer-template-preview.format-social_landscape,
.listing-flyer-template-preview.format-email_banner {
  aspect-ratio: 16 / 9;
}

.listing-flyer-template-preview.format-email_feature,
.listing-flyer-template-preview.format-print_postcard {
  aspect-ratio: 5 / 3;
}

.listing-flyer-template-preview.format-print_landscape {
  aspect-ratio: 11 / 8.5;
}

.listing-flyer-template-preview-chip,
.listing-flyer-template-preview-title,
.listing-flyer-template-preview-subtitle,
.listing-flyer-template-preview-cta {
  position: absolute;
  left: 8px;
  z-index: 1;
  display: block;
  border-radius: 999px;
}

.listing-flyer-template-preview-chip {
  top: 8px;
  width: 52px;
  height: 10px;
  background: var(--listing-template-chip-bg);
}

.listing-flyer-template-preview-title {
  bottom: 28px;
  width: 66%;
  height: 9px;
  border-radius: 6px;
  background: rgba(245, 248, 255, 0.92);
}

.listing-flyer-template-preview-subtitle {
  bottom: 15px;
  width: 54%;
  height: 7px;
  border-radius: 6px;
  background: rgba(220, 230, 255, 0.9);
}

.listing-flyer-template-preview-cta {
  bottom: 8px;
  width: 36px;
  height: 8px;
  background: var(--listing-template-cta-bg);
  border: 1px solid rgba(224, 234, 255, 0.95);
}

.listing-flyer-template-preview.layout-top .listing-flyer-template-preview-title {
  top: 26px;
  bottom: auto;
}

.listing-flyer-template-preview.layout-top .listing-flyer-template-preview-subtitle {
  top: 39px;
  bottom: auto;
}

.listing-flyer-template-preview.layout-top .listing-flyer-template-preview-cta {
  top: 50px;
  bottom: auto;
}

.listing-flyer-template-preview.layout-center .listing-flyer-template-preview-title {
  top: 44%;
  bottom: auto;
  transform: translateY(-50%);
  left: 50%;
  width: 64%;
  margin-left: -32%;
}

.listing-flyer-template-preview.layout-center .listing-flyer-template-preview-subtitle {
  top: 56%;
  bottom: auto;
  transform: translateY(-50%);
  left: 50%;
  width: 48%;
  margin-left: -24%;
}

.listing-flyer-template-preview.layout-center .listing-flyer-template-preview-cta {
  top: 68%;
  bottom: auto;
  transform: translateY(-50%);
  left: 50%;
  margin-left: -18px;
}

.listing-flyer-template-preview.layout-split .listing-flyer-template-preview-title {
  left: auto;
  right: 8px;
  width: 48%;
}

.listing-flyer-template-preview.layout-split .listing-flyer-template-preview-subtitle {
  left: auto;
  right: 8px;
  width: 38%;
}

.listing-flyer-template-preview.layout-split .listing-flyer-template-preview-cta {
  left: auto;
  right: 8px;
}

.listing-flyer-template-preview.tone-indigo {
  --listing-template-overlay: linear-gradient(180deg, rgba(12, 19, 48, 0.2) 0%, rgba(24, 38, 90, 0.7) 100%);
}

.listing-flyer-template-preview.tone-cobalt {
  --listing-template-overlay: linear-gradient(180deg, rgba(12, 32, 84, 0.22) 0%, rgba(27, 66, 143, 0.72) 100%);
}

.listing-flyer-template-preview.tone-emerald {
  --listing-template-overlay: linear-gradient(180deg, rgba(11, 47, 56, 0.24) 0%, rgba(16, 73, 78, 0.72) 100%);
  --listing-template-chip-bg: rgba(14, 66, 69, 0.58);
  --listing-template-cta-bg: #e5fff7;
}

.listing-flyer-template-preview.tone-sunset {
  --listing-template-overlay: linear-gradient(180deg, rgba(59, 24, 46, 0.24) 0%, rgba(124, 52, 89, 0.74) 100%);
  --listing-template-chip-bg: rgba(90, 36, 68, 0.56);
  --listing-template-cta-bg: #fff1f8;
}

.listing-flyer-template-preview.tone-slate {
  --listing-template-overlay: linear-gradient(180deg, rgba(19, 26, 46, 0.22) 0%, rgba(53, 62, 97, 0.72) 100%);
  --listing-template-chip-bg: rgba(31, 41, 74, 0.6);
  --listing-template-cta-bg: #ecf0fb;
}

.listing-flyer-template-preview.tone-gold {
  --listing-template-overlay: linear-gradient(180deg, rgba(62, 45, 16, 0.24) 0%, rgba(119, 82, 24, 0.74) 100%);
  --listing-template-chip-bg: rgba(102, 70, 24, 0.58);
  --listing-template-cta-bg: #fff6de;
}

.listing-flyer-template-preview.tone-noir {
  --listing-template-overlay: linear-gradient(180deg, rgba(10, 10, 12, 0.26) 0%, rgba(25, 25, 31, 0.8) 100%);
  --listing-template-chip-bg: rgba(25, 25, 31, 0.68);
  --listing-template-cta-bg: #f3f4f9;
}

.listing-flyer-template-meta strong {
  color: #293765;
  font-size: 14px;
  line-height: 1.2;
}

.listing-flyer-template-meta em {
  font-style: normal;
  color: #4f5f95;
  font-size: 12px;
  font-weight: 700;
}

.listing-flyer-template-meta small {
  color: #62719f;
  font-size: 12px;
  line-height: 1.35;
}

.listing-flyer-template-tile input:checked + .listing-flyer-template-meta {
  border-color: #95adff;
  box-shadow: inset 0 0 0 1px rgba(83, 101, 232, 0.28);
  background: linear-gradient(180deg, #ffffff 0%, #f2f6ff 100%);
}

.listing-marketing-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  font-weight: 700;
  color: #3e4b7a;
}

.listing-marketing-toggle input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
}

.listing-marketing-toggle small {
  grid-column: 2;
  color: #5f6d99;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.listing-website-body {
  gap: 14px;
}

.listing-website-config-form {
  display: grid;
  gap: 14px;
}

.listing-website-visibility-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3c4a7b;
  font-weight: 600;
  margin: 0;
}

.listing-website-visibility-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.listing-website-link-stack {
  display: grid;
  gap: 10px;
}

.listing-website-link-stack label {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #2f3d6e;
  font-weight: 700;
}

.listing-website-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.listing-website-link-row input {
  margin-top: 0;
}

.listing-website-link-row .btn {
  padding: 7px 12px;
}

.listing-website-status-banner {
  border-radius: 12px;
  border: 1px solid #d8e2ff;
  background: #f7f9ff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.listing-website-status-banner strong {
  color: #22305e;
}

.listing-website-status-banner p {
  margin: 4px 0 0;
  color: #53608b;
}

.listing-website-status-banner.is-active {
  border-color: #b8efd1;
  background: #eafbf1;
}

.listing-website-status-banner.is-active strong,
.listing-website-status-banner.is-active p {
  color: #1b5e3d;
}

.listing-website-analytics-panel {
  border: 1px solid #dde5ff;
  border-radius: 12px;
  background: #f7f9ff;
  padding: 12px 14px;
}

.listing-website-analytics-panel h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #243164;
}

.listing-website-analytics-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.listing-website-analytics-grid article {
  border: 1px solid #dfe7ff;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.listing-website-analytics-grid article span {
  font-size: 12px;
  color: #5a6797;
  font-weight: 600;
}

.listing-website-analytics-grid article strong {
  font-size: 24px;
  line-height: 1;
  color: #2a3a72;
}

.listing-website-analytics-grid article small {
  color: #6a769f;
}

.listing-website-stats-btn {
  width: 100%;
  margin-top: 10px;
}

.listing-website-editor-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.listing-website-editor-grid label {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #2f3d6e;
  font-weight: 700;
}

.listing-website-editor-grid select {
  margin-top: 0;
}

.property-websites-shell {
  display: grid;
  gap: 14px;
}

.property-website-defaults-form {
  display: grid;
  gap: 12px;
}

.property-website-defaults-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.property-website-defaults-controls {
  display: grid;
  gap: 12px;
}

.property-website-defaults-controls-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.property-website-defaults-controls label {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #2f3d6e;
  font-weight: 700;
}

.property-website-defaults-controls select {
  margin-top: 0;
}

.property-website-defaults-controls-row > label {
  flex: 1 1 240px;
  max-width: 320px;
}

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

.property-website-defaults-actions .btn {
  white-space: nowrap;
}

.property-website-defaults-layout .property-website-visibility-toggle {
  width: min(760px, 100%);
  margin: 0 auto;
}

.property-website-preview-shell {
  border: 1px solid #d8e2ff;
  border-radius: 14px;
  background: #f8faff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.property-website-preview-head h4 {
  margin: 0;
  color: #263569;
  text-align: center;
}

.property-website-preview-head p {
  margin: 4px 0 0;
  color: #5a6796;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.property-website-preview-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.property-website-preview-toggle {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #d0dbff;
  border-radius: 10px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.property-website-preview-toggle legend {
  margin-right: 4px;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #506198;
  font-weight: 700;
}

.property-website-preview-toggle label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #27366e;
  font-size: 12px;
  font-weight: 700;
}

.property-website-preview-toggle input[type="radio"] {
  margin: 0;
}

.property-website-preview-frame {
  width: 100%;
  min-height: 640px;
  border: 1px solid #cdd8ff;
  border-radius: 10px;
  background: #fff;
}

.property-websites-create-form {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}

.property-websites-create-form label {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #2f3d6e;
  font-weight: 700;
}

.property-websites-create-form input,
.property-websites-create-form select {
  margin-top: 0;
}

.property-websites-create-actions {
  display: flex;
  align-items: flex-end;
}

.property-websites-empty {
  border: 1px dashed #d7e0ff;
  border-radius: 12px;
  background: #f9fbff;
  padding: 14px;
  color: #4a5886;
}

.property-websites-empty strong {
  display: block;
  color: #2a3872;
  margin-bottom: 4px;
}

.property-websites-empty p {
  margin: 0;
}

.property-website-card {
  box-shadow: none;
}

.property-website-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.property-website-card-head h4 {
  margin: 0;
  color: #1f2c58;
}

.property-website-card-head p {
  margin: 5px 0 0;
  color: #5f6c98;
}

.property-website-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.property-website-card-form {
  display: grid;
  gap: 12px;
}

.property-website-link-stack {
  display: grid;
  gap: 9px;
}

.property-website-link-stack label {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #2f3d6e;
  font-weight: 700;
}

.property-website-link-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.property-website-link-row input {
  margin-top: 0;
}

.property-website-link-row .btn {
  padding: 7px 12px;
}

.property-website-analytics-panel {
  border: 1px solid #dde5ff;
  border-radius: 12px;
  background: #f7f9ff;
  padding: 12px 14px;
}

.property-website-analytics-panel h5 {
  margin: 0 0 9px;
  font-size: 15px;
  color: #253265;
}

.property-website-analytics-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.property-website-analytics-grid article {
  border: 1px solid #dfe7ff;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.property-website-analytics-grid article span {
  color: #5a6797;
  font-size: 12px;
  font-weight: 600;
}

.property-website-analytics-grid article strong {
  color: #27366d;
  font-size: 23px;
  line-height: 1;
}

.property-website-edit-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.property-website-edit-grid label {
  margin: 0;
  display: grid;
  gap: 6px;
  color: #2f3d6e;
  font-weight: 700;
}

.property-website-edit-grid select {
  margin-top: 0;
}

.property-website-visibility-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed #d5deff;
  border-radius: 10px;
  padding: 10px 11px;
  background: #fbfcff;
  color: #3b4a7e;
  font-weight: 600;
}

.property-website-visibility-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.property-website-card-actions {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.listing-order-amount-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: #eef2ff;
  border: 1px solid #d3ddff;
  color: #364a9d;
  font-size: 12px;
  font-weight: 800;
}

.listing-order-amount-chip-paid {
  background: #dcfce8;
  border-color: #bbefd0;
  color: #1f7646;
}

.listing-order-amount-chip-partial {
  background: #fff3da;
  border-color: #ffe0a4;
  color: #9f6700;
}

.listing-order-amount-chip-unpaid {
  background: #ffe6e3;
  border-color: #ffc7bf;
  color: #c32c1b;
}

.listing-order-amount-chip-canceled {
  background: #fff0e5;
  border-color: #f4cfad;
  color: #a85d1c;
}

.listing-order-amount-chip-neutral {
  background: #eef2ff;
  border-color: #d3ddff;
  color: #364a9d;
}

.listing-order-view-btn {
  border-color: #dadde8;
  background: #eceff4;
  color: #3f475d;
}

.listing-order-view-btn:hover {
  background: #e1e5ee;
  border-color: #cfd5e2;
  color: #30384f;
}

.listing-order-launch-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border-color: #d9deea;
  background: #f5f7fb;
  color: #374168;
  font-size: 16px;
}

.listing-order-launch-btn:hover {
  background: #e9edf5;
  border-color: #ccd5e6;
}

.listing-order-card .listing-secondary-body {
  padding: 0;
  gap: 0;
  background: #fff;
}

.listing-order-body {
  overflow: hidden;
}

.listing-order-items-list {
  display: grid;
  gap: 0;
}

.listing-order-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #eef2fb;
}

.listing-order-item-main {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #2f3b63;
  font-size: 17px;
}

.listing-order-item-main span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-order-item-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #5850e7;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  font-size: 15px;
}

.listing-order-item-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listing-order-item-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: #4b567f;
  font-size: 15px;
  white-space: nowrap;
}

.listing-order-item-price small {
  color: #6f7999;
  font-size: 13px;
}

.listing-order-item-price strong {
  color: #2a3354;
  font-size: 18px;
}

.listing-order-item-price strong .pricing-plan-price-current {
  font-size: 18px;
}

.listing-order-empty-items {
  margin: 0;
  padding: 16px;
  color: #5f6b93;
  border-top: 1px solid #eef2fb;
}

.listing-order-totals-row {
  border-top: 1px solid #dfe5f3;
  background: #f3f5fa;
  padding: 11px 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  color: #505a7d;
  font-size: 13px;
}

.listing-order-meta-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.listing-order-meta-grid p {
  margin: 0;
}

.listing-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
}

.listing-activity-section {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  padding-bottom: 0;
}

.listing-activity-row .listing-secondary-body {
  background: #fbfcff;
  padding: 12px 14px;
}

.listing-activity-empty {
  margin: 0;
  border: 1px dashed #dbe4ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 18px 14px;
  text-align: center;
}

.listing-activity-list li {
  border: 1px solid #e2e8ff;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.listing-activity-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.listing-activity-copy strong {
  color: #253463;
  font-size: 14px;
}

.listing-activity-copy span {
  color: #5f6a93;
  font-size: 12px;
}

.listing-activity-list time {
  color: #68739c;
  font-size: 12px;
  white-space: nowrap;
}

.listing-empty-state {
  text-align: center;
}

.listing-empty-state p {
  margin: 8px 0;
  color: var(--muted);
}

.daily-bars {
  display: grid;
  gap: 6px;
}

.bar-row {
  display: grid;
  gap: 6px;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
}

.bar-track {
  height: 9px;
  border-radius: 999px;
  background: #e6ecff;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(135deg, #4d5bff 0%, #89a3ff 100%);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.calendar-weekdays div {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-scroll {
  overflow-x: auto;
}

.calendar-scroll .calendar-weekdays,
.calendar-scroll .calendar-grid {
  min-width: 760px;
}

.calendar-cell {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  min-height: 108px;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.calendar-cell.muted {
  background: #f7f9ff;
  border-style: dashed;
}

.calendar-cell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.calendar-day-number {
  font-weight: 700;
}

.calendar-day-count {
  font-size: 11px;
  color: var(--muted);
}

.calendar-events {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #2e3b66;
}

.calendar-events li {
  line-height: 1.3;
}

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

.dashboard-metrics-fixed .metrics-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-revision-panel {
  border: 1px solid #f0cfca;
  background: linear-gradient(180deg, #fff9f7 0%, #fff6f2 100%);
}

.dashboard-revision-notice {
  border: 1px solid #f1d7d2;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.dashboard-revision-summary {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dashboard-revision-summary strong {
  color: #253464;
  font-size: 15px;
}

.dashboard-revision-summary span {
  color: #5e6991;
  font-size: 12px;
}

.dashboard-revision-modal {
  width: min(980px, calc(100vw - 40px));
}

.dashboard-revision-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.dashboard-revision-list-wrap {
  max-height: min(62vh, 620px);
  overflow: auto;
  padding-right: 2px;
  margin-bottom: 10px;
}

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

.dashboard-revision-item {
  border: 1px solid #f1d7d2;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.dashboard-revision-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dashboard-revision-copy strong {
  color: #253464;
  font-size: 15px;
}

.dashboard-revision-copy span {
  color: #5e6991;
  font-size: 12px;
}

.dashboard-revision-copy p {
  margin: 2px 0 0;
  color: #3f4f84;
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-revision-copy small {
  color: #6a759e;
  font-size: 11px;
}

@media (max-width: 760px) {
  .dashboard-revision-notice {
    grid-template-columns: 1fr;
  }

  .dashboard-revision-notice .btn {
    justify-self: start;
  }

  .dashboard-revision-item {
    grid-template-columns: 1fr;
  }

  .dashboard-revision-item .btn {
    justify-self: start;
  }
}

.dashboard-summary-table td {
  vertical-align: middle;
}

.dashboard-appointments-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.calendar-day-action-target {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.calendar-day-action-target:hover {
  border-color: #93a5ff;
  box-shadow: 0 8px 20px rgba(29, 46, 118, 0.08);
  transform: translateY(-1px);
}

.calendar-day-action-target:focus-visible {
  outline: 2px solid #4c63ff;
  outline-offset: 1px;
}

.calendar-day-action-target * {
  pointer-events: none;
}

.calendar-view-layout {
  gap: 14px;
}

.calendar-main-panel {
  margin-bottom: 6px;
}

.calendar-main-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.calendar-main-layout.no-team-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.calendar-team-sidebar {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
  display: grid;
  gap: 12px;
  align-content: start;
}

.calendar-team-sidebar-head {
  display: grid;
  gap: 8px;
}

.calendar-team-sidebar-head h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
}

.calendar-team-sidebar-note {
  margin: 2px 0 0;
  color: #5a678f;
  font-size: 12px;
  line-height: 1.35;
}

.calendar-team-filter-actions {
  display: flex;
  gap: 6px;
}

.calendar-team-filter-action {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.calendar-team-filter-list {
  display: grid;
  gap: 8px;
  max-height: 480px;
  overflow: auto;
  padding-right: 2px;
}

.calendar-team-filter-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #dbe2ff;
  border-radius: 10px;
  padding: 9px 10px;
  background: #f7f9ff;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.calendar-team-filter-item:hover {
  border-color: #bec9ff;
  background: #eef3ff;
}

.calendar-team-filter-item:focus-within {
  border-color: #7f96ff;
  box-shadow: 0 0 0 2px rgba(88, 110, 255, 0.18);
}

.calendar-team-filter-item.is-active {
  border-color: #a9b7ff;
  background: #eef2ff;
}

.calendar-team-filter-checkbox {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: #4d5bff;
}

.calendar-team-filter-name {
  font-size: 13px;
  font-weight: 600;
  color: #1e2948;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-team-filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--team-calendar-color, #4d5bff);
  flex: 0 0 auto;
}

.calendar-team-filter-dot.is-unassigned {
  background: #8d97bb;
}

.calendar-month-scroll .calendar-weekdays,
.calendar-month-scroll .calendar-grid {
  min-width: 980px;
}

.calendar-month-weekdays {
  gap: 0;
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.calendar-month-weekdays div {
  background: #f6f8ff;
  border-right: 1px solid var(--line);
  padding: 9px 6px;
  color: #1f2947;
}

.calendar-month-weekdays div:last-child {
  border-right: none;
}

.calendar-month-grid {
  gap: 0;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: #fff;
}

.calendar-month-grid .calendar-cell {
  border-radius: 0;
  border: 0;
}

.calendar-month-cell {
  min-height: 148px;
  padding: 6px 6px 8px;
  border-right: 1px solid #e2e7fa !important;
  border-bottom: 1px solid #e2e7fa !important;
  align-content: start;
  background: #fff;
}

.calendar-month-cell.is-weekend {
  background: #f6f8ff;
}

.calendar-month-cell.is-today {
  background: #fdf8e7;
}

.calendar-month-cell.is-selected {
  box-shadow: inset 0 0 0 2px rgba(77, 91, 255, 0.32);
}

.calendar-month-grid .calendar-cell:nth-child(7n) {
  border-right: 0 !important;
}

.calendar-month-grid .calendar-cell:nth-last-child(-n + 7) {
  border-bottom: 0 !important;
}

.calendar-month-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.calendar-month-day-number {
  font-size: 15px;
  font-weight: 700;
  color: #1f2947;
}

.calendar-day-number-action {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.calendar-day-number-action:hover {
  text-decoration: underline;
}

.calendar-month-cell.muted .calendar-month-day-number {
  color: #9ea7c6;
}

.calendar-month-day-count {
  font-size: 12px;
  color: #6472a1;
  font-weight: 700;
}

.calendar-month-events {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
}

.calendar-month-event {
  border-radius: 4px;
  background: var(--calendar-event-bg, #64748b);
  color: var(--calendar-event-fg, #fff);
  border: 1px solid var(--calendar-event-border, transparent);
  padding: 6px 8px;
  display: grid;
  gap: 3px;
  line-height: 1.25;
}

.calendar-month-event strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--calendar-event-fg, #fff);
}

.calendar-month-event span {
  font-size: 12px;
  color: var(--calendar-event-sub, rgba(255, 255, 255, 0.92));
}

.calendar-month-event-team {
  font-size: 11px;
  color: var(--calendar-event-team, rgba(255, 255, 255, 0.84));
  line-height: 1.2;
}

.calendar-month-event-button {
  width: 100%;
  border: none;
  text-align: left;
  cursor: pointer;
}

.calendar-month-event-button:hover {
  filter: brightness(0.95);
}

.calendar-month-event-button:focus-visible {
  outline: 2px solid #4c63ff;
  outline-offset: 1px;
}

.calendar-month-event.reserve {
  background: transparent;
  border: 1px solid var(--calendar-reserve-color, #6b4dff);
  color: #1f2947;
}

.calendar-month-event.reserve strong {
  color: var(--calendar-reserve-color, #6b4dff);
}

.calendar-month-event.reserve span {
  color: #2f3b61;
}

.calendar-month-event.reserve .calendar-month-event-team {
  color: var(--calendar-reserve-color, #6b4dff);
}

.calendar-month-event.time-off {
  background: #c86a09;
}

.calendar-day-action-target .calendar-month-event-button {
  pointer-events: auto;
}

.calendar-day-action-target .calendar-month-event-button * {
  pointer-events: none;
}

.calendar-month-empty {
  font-size: 12px;
  color: #8d97bb;
  padding-top: 2px;
}

.calendar-month-more {
  font-size: 12px;
  font-weight: 700;
  color: #5c6ac0;
}

.calendar-availability-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  align-items: start;
}

.calendar-availability-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.calendar-availability-panel h4 {
  margin: 0;
  font-size: 22px;
}

.calendar-side-group {
  display: grid;
  gap: 8px;
}

.calendar-side-group > strong {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #4f5c88;
}

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

.calendar-side-item {
  border: 1px solid #e3e8fd;
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  gap: 5px;
  background: #fbfcff;
}

.calendar-side-item strong {
  font-size: 12px;
}

.calendar-side-item span {
  color: #5f6b93;
  font-size: 12px;
}

.calendar-side-empty {
  color: #8a95bc;
  font-size: 12px;
  border: 1px dashed #d7def6;
  border-radius: 8px;
  padding: 8px 10px;
}

.calendar-day-select-btn {
  width: 100%;
  border: 1px solid #d8dff9;
  background: #f8faff;
  color: #445180;
  border-radius: 8px;
  padding: 7px;
  display: grid;
  gap: 4px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.calendar-day-select-btn * {
  pointer-events: none;
}

.calendar-day-select-btn strong {
  color: #1f2947;
}

.calendar-day-select-btn.is-selected {
  border-color: #95a7ff;
  background: #eef2ff;
}

.calendar-reserve-form {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.calendar-reserved-spots-panel {
  gap: 12px;
}

.calendar-reserved-spots-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.calendar-reserved-spots-summary {
  margin: 0;
  border: 1px solid #d6defa;
  background: #f5f8ff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #3e4d84;
}

.calendar-reserved-spots-list {
  display: grid;
  gap: 10px;
}

.calendar-reserved-spots-empty {
  border: 1px dashed #cfdbff;
  border-radius: 12px;
  padding: 20px;
  background: #f9fbff;
  text-align: center;
  color: #5a6896;
  font-weight: 600;
}

.calendar-reserved-spots-empty p {
  margin: 0;
}

.calendar-reserved-spot-card {
  border: 1px solid #d9e1ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.calendar-reserved-spot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.calendar-reserved-spot-client-wrap {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.calendar-reserved-spot-client {
  margin: 0;
  font-size: 21px;
  line-height: 1.15;
}

.calendar-reserved-spot-team,
.calendar-reserved-spot-address {
  margin: 0;
  color: #4c5a86;
  font-size: 13px;
  line-height: 1.35;
}

.calendar-reserved-spot-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.calendar-reserved-spot-meta-item {
  border: 1px solid #e0e7ff;
  border-radius: 10px;
  background: #f7f9ff;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.calendar-reserved-spot-meta-item span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6a78a3;
  font-weight: 700;
}

.calendar-reserved-spot-meta-item strong {
  font-size: 13px;
  line-height: 1.3;
  color: #1d2947;
}

.calendar-reserved-spot-actions {
  display: flex;
  justify-content: flex-end;
}

.calendar-reserved-spot-actions .row-actions {
  justify-content: flex-end;
}

.btn-soft.is-active {
  background: #dfe6ff;
  border-color: #adbaf5;
}

@media (max-width: 1260px) {
  .dashboard-metrics-fixed .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dashboard-metrics-fixed .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-availability-layout {
    grid-template-columns: 1fr;
  }

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

  .calendar-month-cell {
    min-height: 130px;
  }

  .calendar-month-event strong,
  .calendar-month-event span {
    font-size: 11px;
  }

  .calendar-day-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-reserved-spot-head {
    flex-direction: column;
  }

  .calendar-reserved-spot-actions {
    justify-content: flex-start;
  }

  .calendar-reservation-action-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .dashboard-metrics-fixed .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-metrics-fixed .metric {
    position: relative;
    display: grid;
    min-height: 86px;
    align-content: space-between;
    overflow: hidden;
    border-color: #dce4ff;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff 0%, #f7f9ff 100%);
    box-shadow: 0 10px 24px rgba(53, 68, 151, 0.07);
    padding: 12px;
  }

  .dashboard-metrics-fixed .metric::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #4d5bff;
    opacity: 0.84;
  }

  .dashboard-metrics-fixed .metric:nth-child(2)::before {
    background: #14a88b;
  }

  .dashboard-metrics-fixed .metric:nth-child(3)::before {
    background: #f59f0a;
  }

  .dashboard-metrics-fixed .metric:nth-child(4)::before {
    background: #16a2d7;
  }

  .dashboard-metrics-fixed .metric:nth-child(5)::before {
    background: #7c5cff;
  }

  .dashboard-metrics-fixed .metric:nth-child(6)::before {
    background: #ef6a8a;
  }

  .dashboard-metrics-fixed .metric h4 {
    margin: 0;
    color: #657191;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.18;
  }

  .dashboard-metrics-fixed .metric strong {
    display: block;
    color: #121a33;
    font-size: clamp(22px, 7vw, 30px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin-top: 10px;
  }
}

.toaster-space {
  height: 46px;
}

.muted-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.address-autocomplete-menu {
  position: fixed;
  z-index: 2000;
  border: 1px solid #d7defa;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(16, 24, 58, 0.18);
  padding: 6px;
  display: grid;
  gap: 4px;
  max-height: min(320px, 40vh);
  overflow: auto;
}

.address-autocomplete-menu[hidden] {
  display: none !important;
}

.address-autocomplete-menu button {
  border: none;
  background: transparent;
  color: #1f2947;
  text-align: left;
  font-size: 14px;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  display: grid;
  gap: 2px;
}

.address-autocomplete-menu button:hover,
.address-autocomplete-menu button.is-active {
  background: #eef2ff;
  color: #1a2550;
}

.address-autocomplete-option-main {
  display: block;
  font-weight: 600;
  color: #1f2947;
}

.address-autocomplete-option-meta {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: #5f6b92;
}

.order-create-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 28, 58, 0.44);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 900;
}

.order-create-modal {
  width: min(760px, 100%);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
}

.order-create-modal h3 {
  margin: 0 0 12px;
  font-size: 34px;
}

.order-create-modal p {
  margin: 0 0 22px;
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.65;
}

.order-create-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
}

.order-create-choice-divider {
  background: #dbe2ff;
  border-radius: 999px;
}

.order-create-choice {
  min-height: 88px;
  border-radius: 10px;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  line-height: 1.25;
}

.order-create-actions {
  display: flex;
  justify-content: flex-start;
}

.quick-create-listing-modal {
  width: min(980px, 100%);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.quick-create-listing-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quick-create-listing-modal-head h3 {
  margin: 0;
  font-size: 42px;
}

.quick-create-listing-modal-intro {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.quick-create-listing-form {
  display: grid;
  gap: 12px;
}

.quick-create-listing-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-create-listing-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.quick-create-listing-field.is-wide {
  grid-column: 1 / -1;
}

.quick-create-listing-field span {
  color: #4d587b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quick-create-listing-field input {
  margin-top: 0;
}

.quick-create-listing-customer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.quick-create-listing-map .address-map-preview,
.quick-create-listing-map .address-map-preview-empty {
  margin-top: 0;
}

.quick-create-listing-actions {
  justify-content: flex-end;
}

.listing-media-modal {
  width: min(1140px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 10px;
}

.listing-media-modal-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.listing-media-modal-head h3 {
  margin: 0;
}

.listing-media-modal p {
  margin: 0;
  color: var(--muted);
}

.listing-media-cloud-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.listing-media-modal-form {
  display: grid;
  gap: 10px;
}

.listing-media-upload-progress {
  border: 1px solid #dbe4ff;
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f8faff 0%, #f1f5ff 100%);
  display: grid;
  gap: 8px;
}

.listing-media-upload-progress-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #273a84;
  font-weight: 700;
  font-size: 13px;
}

.listing-media-upload-progress p {
  margin: 0;
  color: #506090;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-media-upload-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #dce5ff;
}

.listing-media-upload-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.05)),
    linear-gradient(90deg, #4e5bff 0%, #67a3ff 100%);
  transition: width 0.2s ease;
}

.listing-media-upload-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #b7c6ff;
  border-top-color: #4d5bff;
  animation: listing-media-spin 0.9s linear infinite;
}

.listing-media-modal .btn.is-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.listing-customer-modal {
  width: min(560px, 100%);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.listing-transfer-modal {
  width: min(760px, 100%);
  padding: 28px;
  gap: 16px;
}

.listing-revision-modal {
  width: min(700px, 100%);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.listing-revision-modal p {
  margin: 0;
  color: var(--muted);
}

.listing-revision-note-list-wrap {
  border: 1px solid #d9e3ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px;
  max-height: min(56vh, 480px);
  overflow: auto;
}

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

.listing-revision-note-item {
  border: 1px solid #e1e9ff;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.listing-revision-note-copy {
  display: grid;
  gap: 5px;
}

.listing-revision-note-copy strong {
  color: #243566;
  font-size: 13px;
}

.listing-revision-note-copy p {
  margin: 0;
  color: #384a7f;
  font-size: 14px;
  line-height: 1.5;
}

.listing-revision-note-item time {
  font-size: 12px;
  color: #66729c;
}

.listing-media-group-modal {
  width: min(620px, 100%);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.listing-media-group-modal p {
  margin: 0;
  color: var(--muted);
}

.listing-media-group-selection {
  color: #2f458f;
  font-weight: 600;
}

.listing-media-group-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.listing-media-group-create input {
  margin-top: 0;
}

.listing-media-group-options {
  border: 1px solid #d7e1ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fbff 0%, #f4f7ff 100%);
  padding: 10px;
  max-height: min(320px, 45vh);
  overflow: auto;
  display: grid;
  gap: 8px;
}

.listing-media-group-option {
  width: 100%;
  border: 1px solid #d3ddff;
  border-radius: 10px;
  background: #ffffff;
  color: #24356f;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.listing-media-group-option-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.listing-media-group-option.is-draggable {
  cursor: default;
}

.listing-media-group-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid #d7e0ff;
  background: #f3f6ff;
  color: #5a6aa5;
  font-size: 12px;
  letter-spacing: 1px;
  user-select: none;
  -webkit-user-select: none;
}

.listing-media-group-option.is-draggable .listing-media-group-drag-handle {
  cursor: grab;
}

.listing-media-group-option.is-draggable .listing-media-group-drag-handle:active {
  cursor: grabbing;
}

.listing-media-group-option.is-dragging {
  opacity: 0.7;
  border-color: #9ab0ff;
  box-shadow: 0 12px 24px rgba(41, 61, 144, 0.2);
}

.listing-media-group-option.listing-media-group-drop-before {
  box-shadow: inset 0 2px 0 #7f9cff;
}

.listing-media-group-option.listing-media-group-drop-after {
  box-shadow: inset 0 -2px 0 #7f9cff;
}

.listing-media-group-option:hover {
  border-color: #b9cbff;
  background: #f2f6ff;
}

.listing-media-group-option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.listing-media-group-option em {
  font-style: normal;
  color: #556395;
}

.listing-media-group-empty {
  margin: 0;
  border: 1px dashed #cfdbff;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.listing-cubicasa-import-modal {
  width: min(720px, 100%);
}

.listing-cubicasa-modal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.listing-cubicasa-summary-pill {
  border: 1px solid #d3ddff;
  border-radius: 10px;
  background: #f7f9ff;
  padding: 8px 10px;
  display: grid;
  gap: 2px;
}

.listing-cubicasa-summary-pill span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5f6f9f;
}

.listing-cubicasa-summary-pill strong {
  font-size: 14px;
  color: #253765;
}

.listing-cubicasa-order-list {
  border: 1px solid #d7e1ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fbff 0%, #f4f7ff 100%);
  padding: 10px;
  max-height: min(360px, 48vh);
  overflow: auto;
  display: grid;
  gap: 8px;
}

.listing-cubicasa-order-list.is-loading {
  min-height: 110px;
  align-content: center;
}

.listing-cubicasa-order-option {
  border: 1px solid #d2dcff;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.listing-cubicasa-order-option:hover {
  border-color: #b8ccff;
  background: #f2f6ff;
}

.listing-cubicasa-order-option input {
  margin: 2px 0 0;
}

.listing-cubicasa-order-option.is-selected {
  border-color: #8aa6ff;
  background: #eef3ff;
}

.listing-cubicasa-order-copy {
  display: grid;
  gap: 4px;
}

.listing-cubicasa-order-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.listing-cubicasa-order-meta {
  color: #5c6896;
  font-size: 12px;
  line-height: 1.5;
}

.listing-cubicasa-order-copy strong {
  color: #23366f;
  font-size: 14px;
  line-height: 1.35;
}

.listing-cubicasa-order-badge {
  padding: 3px 7px;
  font-size: 10px;
}

.listing-cubicasa-order-copy span {
  color: #5c6896;
  font-size: 12px;
  line-height: 1.5;
}

.listing-cubicasa-status-badge {
  border: 1px solid #d4dbef;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #f3f5fb;
  color: #3f4a68;
}

.listing-cubicasa-status-badge.is-ready {
  border-color: #9be6cb;
  background: #dcf8eb;
  color: #166c45;
}

.listing-cubicasa-status-badge.is-processing {
  border-color: #f6daa4;
  background: #fff4d8;
  color: #8a5b05;
}

.listing-cubicasa-status-badge.is-error {
  border-color: #f7c8d2;
  background: #ffe9ee;
  color: #b02646;
}

.listing-cubicasa-import-error {
  margin: 0;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff1f2;
  color: #9f1239;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.listing-customer-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.listing-customer-modal-head h3 {
  margin: 0;
  font-size: 24px;
}

.listing-customer-modal p {
  margin: 0;
  color: var(--muted);
}

.listing-transfer-modal-note {
  margin: -4px 0 0;
  color: #5d6997;
  font-size: 13px;
  line-height: 1.45;
}

.listing-transfer-modal p {
  max-width: 62ch;
}

.listing-transfer-modal .listing-transfer-modal-note {
  font-size: 14px;
}

.listing-transfer-modal .listing-customer-modal-search {
  gap: 14px;
}

.listing-transfer-modal .listing-transfer-orders-toggle {
  margin-top: 2px;
}

.listing-customer-modal-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.listing-customer-modal-search-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.listing-customer-modal-search-input-wrap {
  position: relative;
}

.listing-transfer-selected-card {
  border: 1px solid #bfd3ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfdff 0%, #f3f7ff 100%);
  box-shadow: 0 12px 28px rgba(37, 55, 123, 0.1);
  padding: 12px 14px 13px;
  display: grid;
  gap: 10px;
}

.listing-transfer-selected-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.listing-transfer-selected-card-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #c7d3ff;
  background: #eaf0ff;
  color: #4054b7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
}

.listing-transfer-selected-card-check {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #34c989 0%, #21b973 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(34, 185, 115, 0.22);
}

.listing-transfer-selected-card-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.listing-transfer-selected-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #93a6ff 0%, #6f82f3 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(88, 108, 219, 0.18);
}

.listing-transfer-selected-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-transfer-selected-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.listing-transfer-selected-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.listing-transfer-selected-name {
  color: #1f2948;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-transfer-selected-brokerage {
  color: #4d6097;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-transfer-selected-meta {
  color: #5f6d96;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-transfer-selected-helper {
  color: #4f6d96;
  font-size: 12px;
  line-height: 1.4;
}

.listing-transfer-orders-toggle {
  display: grid;
  gap: 6px;
  border: 1px solid #d9e3ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 12px;
}

.listing-transfer-orders-toggle label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.listing-transfer-orders-toggle input[type="checkbox"] {
  margin-top: 2px;
}

.listing-transfer-orders-title {
  display: block;
  color: #243566;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.listing-transfer-orders-toggle small {
  display: block;
  color: #5d6997;
  font-size: 12px;
  line-height: 1.45;
}

.listing-transfer-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.customer-lookup-input-wrap {
  position: relative;
}

.customer-lookup-input-wrap.is-selected input:not([type="hidden"]) {
  border-color: #7f91ff;
  box-shadow: 0 0 0 3px rgba(80, 101, 255, 0.12);
}

.customer-lookup-input-wrap.is-selected-hide-input input:not([type="hidden"]) {
  display: none;
}

.customer-lookup-input-wrap.is-selected-hide-input .customer-lookup-selected-state {
  margin-top: 0;
}

.customer-lookup-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.customer-lookup-action-row.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.customer-lookup-action-row .btn {
  width: 100%;
}

.customer-lookup-selected-state {
  margin-top: 8px;
  border: 1px solid #d7defa;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8faff 0%, #f4f7ff 100%);
  padding: 10px 11px;
  display: grid;
  gap: 0;
}

.customer-lookup-selected-state.is-transfer-selection {
  margin-top: 0;
  padding: 14px 15px;
  background: linear-gradient(180deg, #fbfcff 0%, #f3f7ff 100%);
  box-shadow: 0 8px 18px rgba(39, 56, 122, 0.08);
}

.customer-lookup-selected-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.customer-lookup-selected-main-transfer {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.customer-lookup-selected-copy-wrap {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.customer-lookup-selected-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #93a6ff 0%, #6f82f3 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
  overflow: hidden;
}

.customer-lookup-selected-avatar-transfer {
  width: 44px;
  height: 44px;
  font-size: 14px;
  box-shadow: 0 6px 16px rgba(88, 108, 219, 0.2);
}

.customer-lookup-selected-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-lookup-selected-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.customer-lookup-selected-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.customer-lookup-selected-copy-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.customer-lookup-selected-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.customer-lookup-selected-check {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #b8c6ff;
  background: #e8eeff;
  color: #3f53b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.customer-lookup-selected-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #c2d0ff;
  background: #e9efff;
  color: #3e51b2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 9px;
}

.customer-lookup-selected-name {
  color: #1f2948;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-lookup-selected-submeta {
  color: #4c5f96;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-lookup-selected-meta {
  color: #596a98;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-customer-modal-search input {
  margin-top: 0;
}

.listing-customer-modal-search-input-wrap .search-suggestions-menu {
  top: calc(100% + 8px);
  z-index: 1200;
  border: 1px solid #d7defa;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(16, 24, 58, 0.18);
  padding: 6px;
  max-height: min(280px, 40vh);
}

.listing-customer-modal-search-input-wrap .search-suggestions-option {
  border: 1px solid transparent;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2947;
  padding: 10px 11px;
  display: grid;
  gap: 2px;
}

.listing-customer-modal-search-input-wrap .search-suggestions-option:hover,
.listing-customer-modal-search-input-wrap .search-suggestions-option:focus-visible {
  background: #f4f7ff;
  border-color: #d4defd;
  outline: none;
}

.search-suggestions-option-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: inherit;
}

.search-suggestions-option-meta {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: #68749b;
}

.listing-customer-modal-search-input-wrap .search-suggestions-empty {
  color: #677299;
  font-size: 13px;
  padding: 10px;
}

.listing-delivery-modal {
  width: min(700px, 100%);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.listing-delivery-modal p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.listing-delivery-modal-form {
  display: grid;
  gap: 10px;
}

.listing-delivery-recipient-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}

.listing-delivery-mode-grid {
  margin: 0;
  padding: 0;
  border: none;
  display: grid;
  gap: 10px;
}

.listing-delivery-mode-grid legend {
  font-size: 12px;
  font-weight: 700;
  color: #4d587b;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.listing-delivery-mode-option {
  border: 1px solid #d3daf1;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafbff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.listing-delivery-mode-option input[type="radio"] {
  margin-top: 2px;
}

.listing-delivery-mode-option strong {
  color: #2a3353;
  font-size: 14px;
}

.listing-delivery-mode-option span {
  color: #5d688d;
  font-size: 12px;
  line-height: 1.45;
}

.listing-delivery-schedule-fields {
  margin-top: 10px;
  display: none;
  gap: 6px;
}

.listing-delivery-mode-option input[type="radio"]:checked ~ div .listing-delivery-schedule-fields {
  display: grid;
}

.listing-delivery-schedule-label {
  color: #4d587b;
  font-size: 12px;
  font-weight: 700;
}

.listing-delivery-preview-modal {
  width: min(780px, 100%);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.listing-delivery-preview-modal p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.listing-delivery-preview-field {
  width: 100%;
  min-height: 88px;
  resize: vertical;
}

.listing-delivery-preview-body {
  min-height: 240px;
}

.notifications-overview-panel {
  background:
    radial-gradient(circle at 100% -25%, rgba(104, 123, 255, 0.15) 0%, transparent 52%),
    linear-gradient(145deg, #f5f8ff 0%, #eef3ff 78%);
  border-color: #d6e0ff;
}

.notifications-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.notifications-overview-head h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.14;
}

.notifications-overview-head .muted-note {
  margin: 6px 0 0;
}

.notifications-overview-metrics {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.notifications-overview-metric {
  border: 1px solid #d7e1ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.notifications-overview-metric strong {
  font-size: 24px;
  line-height: 1;
  color: #1f2b5d;
}

.notifications-overview-metric span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6777a8;
}

.notifications-template-panel {
  display: grid;
  gap: 12px;
}

.notifications-template-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.notifications-template-panel-head h3 {
  margin: 0;
}

.notifications-template-panel-head .muted-note {
  margin: 6px 0 0;
}

.notifications-template-panel-stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.notifications-template-panel-stats span {
  border: 1px solid #d7e1ff;
  background: #f8faff;
  border-radius: 999px;
  padding: 5px 10px;
  color: #4f5f92;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.notifications-template-table-wrap {
  border: 1px solid #d9e2ff;
  border-radius: 12px;
  background: #ffffff;
}

.notifications-template-table {
  min-width: 1080px;
}

.notifications-template-table th,
.notifications-template-table td {
  vertical-align: middle;
}

.notifications-template-table th:nth-child(3),
.notifications-template-table th:nth-child(4),
.notifications-template-table th:nth-child(5),
.notifications-template-table th:nth-child(6),
.notifications-template-table td:nth-child(1),
.notifications-template-table td:nth-child(3),
.notifications-template-table td:nth-child(4),
.notifications-template-table td:nth-child(5),
.notifications-template-table td:nth-child(6) {
  white-space: nowrap;
}

.notifications-template-title {
  display: inline-block;
  min-width: 220px;
  font-weight: 600;
  color: #25325b;
}

.notifications-template-description {
  display: block;
  min-width: 320px;
  max-width: 520px;
  color: #4f5f92;
  line-height: 1.45;
}

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

.notifications-template-actions .btn {
  min-width: 64px;
  white-space: nowrap;
}

.notifications-template-select {
  margin-top: 0;
  width: auto;
  min-width: 74px;
}

.notifications-template-select--status {
  min-width: 112px;
}

.notification-template-body-modal {
  width: min(900px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 10px;
}

.notification-template-body-backdrop {
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.notification-template-body-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
}

.notification-template-body-modal-head h3 {
  margin: 0;
}

.notification-template-body-modal-heading {
  display: grid;
  gap: 2px;
}

.notification-template-body-modal-template-name {
  margin: 0;
  color: #53628e;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
}

.notification-template-body-editor-group {
  display: grid;
  gap: 6px;
  margin-top: 0;
}

.notification-template-body-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.notification-template-body-editor-head > span {
  color: #33446f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.notification-template-body-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.notification-template-body-editor-toolgroup {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cfd9f8;
  border-radius: 8px;
  overflow: hidden;
  background: #f8faff;
}

.notification-template-editor-tool {
  border: 0;
  border-right: 1px solid #dbe4ff;
  border-radius: 0;
  min-width: 44px;
  padding: 7px 10px;
  line-height: 1.1;
  box-shadow: none;
  background: #ffffff;
}

.notification-template-body-editor-toolgroup .notification-template-editor-tool:last-child {
  border-right: 0;
}

.notification-template-editor-tool strong,
.notification-template-editor-tool em,
.notification-template-editor-tool s {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.notification-template-body-editor-input {
  width: 100%;
  min-height: 220px;
  resize: vertical;
}

.notification-template-variable-bar {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  border: 1px solid #dbe3fb;
  border-radius: 10px;
  background: #f7faff;
  padding: 10px 12px;
}

.notification-template-variable-bar-label {
  color: #5a6a95;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.notification-template-variable-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notification-template-variable-chip {
  appearance: none;
  border: 1px solid #cfdcfe;
  border-radius: 999px;
  background: #ffffff;
  color: #37508f;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.notification-template-variable-chip:hover,
.notification-template-variable-chip:focus-visible {
  border-color: #b3c7ff;
  background: #edf3ff;
  outline: none;
}

.notification-template-variable-chip:active {
  transform: translateY(1px);
}

.notification-template-rendered-preview {
  border: 1px solid #dbe2fb;
  border-radius: 12px;
  background: #f8faff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.notification-template-rendered-preview h4 {
  margin: 0;
  color: #25325b;
}

.notification-template-rendered-frame {
  border: 1px solid #dbe2fb;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
}

.notification-template-rendered-iframe {
  display: block;
  width: 100%;
  height: min(62vh, 640px);
  min-height: 420px;
  border: 1px solid #d7e0fb;
  border-radius: 8px;
  background: #ffffff;
}

.notifications-template-help {
  display: block;
  margin-top: 5px;
  line-height: 1.45;
}

html[data-theme="dark"] .notifications-overview-panel {
  background:
    radial-gradient(circle at 100% -30%, rgba(110, 132, 255, 0.22) 0%, transparent 55%),
    linear-gradient(145deg, #162342 0%, #111b33 82%);
  border-color: rgba(156, 174, 255, 0.26);
}

html[data-theme="dark"] .notifications-overview-metric,
html[data-theme="dark"] .notifications-template-table-wrap {
  background: rgba(12, 22, 43, 0.78);
  border-color: rgba(156, 174, 255, 0.28);
}

html[data-theme="dark"] .notifications-overview-metric strong {
  color: var(--text);
}

html[data-theme="dark"] .notifications-template-title {
  color: var(--text);
}

html[data-theme="dark"] .notifications-template-description {
  color: #aebce7;
}

html[data-theme="dark"] .notifications-template-panel-stats span {
  background: rgba(22, 33, 60, 0.85);
  border-color: rgba(156, 174, 255, 0.3);
  color: #a8b6ea;
}

html[data-theme="dark"] .notification-template-rendered-preview {
  background: rgba(14, 24, 45, 0.68);
  border-color: rgba(156, 174, 255, 0.3);
}

html[data-theme="dark"] .notification-template-body-modal-template-name {
  color: #cad4f4;
}

html[data-theme="dark"] .notification-template-body-editor-head > span {
  color: #b9c7ee;
}

html[data-theme="dark"] .notification-template-body-editor-toolgroup {
  border-color: rgba(156, 174, 255, 0.32);
  background: rgba(13, 23, 44, 0.7);
}

html[data-theme="dark"] .notification-template-editor-tool {
  border-color: rgba(156, 174, 255, 0.34);
  background: rgba(22, 35, 66, 0.84);
  color: #d9e4ff;
  border-right-color: rgba(156, 174, 255, 0.34);
}

html[data-theme="dark"] .notification-template-editor-tool:hover,
html[data-theme="dark"] .notification-template-editor-tool:focus-visible {
  border-color: rgba(181, 195, 255, 0.55);
  background: rgba(35, 52, 94, 0.86);
}

html[data-theme="dark"] .notification-template-variable-bar {
  border-color: rgba(156, 174, 255, 0.32);
  background: rgba(13, 23, 44, 0.7);
}

html[data-theme="dark"] .notification-template-variable-bar-label {
  color: #9bb0e9;
}

html[data-theme="dark"] .notification-template-variable-chip {
  border-color: rgba(156, 174, 255, 0.34);
  background: rgba(22, 35, 66, 0.84);
  color: #d9e4ff;
}

html[data-theme="dark"] .notification-template-variable-chip:hover,
html[data-theme="dark"] .notification-template-variable-chip:focus-visible {
  border-color: rgba(181, 195, 255, 0.55);
  background: rgba(35, 52, 94, 0.86);
}

html[data-theme="dark"] .notification-template-rendered-preview h4 {
  color: var(--text);
}

html[data-theme="dark"] .notification-template-rendered-frame {
  background: rgba(12, 22, 43, 0.88);
  border-color: rgba(156, 174, 255, 0.3);
}

html[data-theme="dark"] .notification-template-rendered-iframe {
  background: #0f1a34;
  border-color: rgba(156, 174, 255, 0.28);
}

@media (max-width: 860px) {
  .notifications-overview-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-template-body-backdrop {
    padding: 12px;
  }

  .notification-template-body-modal {
    max-height: calc(100vh - 24px);
  }

  .notification-template-rendered-iframe {
    height: min(58vh, 560px);
    min-height: 320px;
  }
}

.search-suggestions-menu,
.listing-customer-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1200;
  border: 1px solid #d7defa;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(16, 24, 58, 0.18);
  padding: 6px;
  max-height: min(280px, 40vh);
  overflow-y: auto;
}

.search-suggestions-menu[hidden],
.listing-customer-search-results[hidden] {
  display: none;
}

.search-suggestions-option,
.listing-customer-search-option {
  appearance: none;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2947;
  text-align: left;
  padding: 10px 11px;
  display: grid;
  gap: 2px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}

.search-suggestions-option:hover,
.search-suggestions-option:focus-visible,
.search-suggestions-option.is-active,
.listing-customer-search-option:hover,
.listing-customer-search-option:focus-visible {
  background: #f4f7ff;
  border-color: #d4defd;
  outline: none;
}

.search-suggestions-empty,
.listing-customer-search-empty {
  padding: 10px;
  font-size: 13px;
  color: #677299;
}

.listing-media-dropzone {
  position: relative;
  border: 2px dashed #c8d4ff;
  border-radius: 12px;
  background: #f7f9ff;
  padding: 28px 16px;
  text-align: center;
  display: grid;
  gap: 5px;
  cursor: pointer;
}

.listing-media-dropzone strong {
  color: #2f3a67;
  font-size: 16px;
}

.listing-media-dropzone span {
  color: #61709f;
  font-size: 13px;
}

.listing-media-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.listing-media-dropzone.is-drag-over {
  border-color: #5666ff;
  background: #edf1ff;
}

.listing-media-dropzone.is-uploading {
  cursor: wait;
  opacity: 0.75;
}

.listing-media-dropzone.is-uploading input[type="file"] {
  pointer-events: none;
}

.listing-media-selected {
  border: 1px solid #e4eaff;
  border-radius: 10px;
  padding: 10px;
  background: #fbfcff;
}

.listing-media-selected p {
  margin: 0;
  color: #61709f;
  font-size: 13px;
}

.listing-media-file-list {
  margin: 0;
  padding-left: 18px;
  max-height: 170px;
  overflow: auto;
  display: grid;
  gap: 4px;
  color: #3a4670;
  font-size: 13px;
}

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

.calendar-day-action-modal {
  width: min(560px, 100%);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
}

.calendar-reservation-action-modal {
  width: min(620px, 100%);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
}

.calendar-time-off-modal {
  width: min(640px, 100%);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
}

.calendar-reserve-modal {
  width: min(980px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
}

.calendar-reserve-modal .calendar-reserve-modal-intro {
  margin: 0 0 18px;
  color: var(--muted);
}

.calendar-reserve-modal .calendar-reserve-form {
  margin-bottom: 12px;
}

.calendar-order-editor-modal {
  width: min(1320px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
}

.calendar-day-action-modal h3 {
  margin: 0 0 10px;
}

.calendar-day-action-modal p {
  margin: 0 0 18px;
  color: var(--muted);
}

.calendar-reservation-action-modal h3 {
  margin: 0 0 10px;
}

.calendar-time-off-modal h3 {
  margin: 0 0 10px;
}

.calendar-reservation-action-modal > p {
  margin: 0 0 16px;
  color: var(--muted);
}

.calendar-time-off-intro {
  margin: 0 0 16px;
  color: var(--muted);
}

.calendar-time-off-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.calendar-reservation-action-details {
  display: grid;
  gap: 6px;
  border: 1px solid #dce4ff;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
  background: #f8faff;
}

.calendar-reservation-action-details p {
  margin: 0;
  color: #2d3a64;
  font-size: 13px;
  line-height: 1.35;
}

.calendar-reservation-action-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.calendar-reservation-action-actions .btn {
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
  justify-content: center;
  white-space: nowrap;
}

.calendar-reservation-action-btn {
  min-width: 0;
}

.calendar-reservation-action-btn-secondary {
  flex: 0.85 1 0;
}

.calendar-reservation-action-btn-primary {
  flex: 1.3 1 0;
}

.calendar-day-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.calendar-day-action-choice {
  min-height: 92px;
  display: grid;
  gap: 4px;
  align-content: center;
  text-align: center;
}

.calendar-day-action-choice strong {
  font-size: 15px;
}

.calendar-day-action-choice span {
  font-size: 12px;
  color: #dfe5ff;
}

.order-editor-top {
  margin-bottom: 12px;
}

.order-editor-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.order-editor-top-meta {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 0;
  flex: 1 1 auto;
}

.order-editor-top-order-id {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1c2644;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.order-editor-shell {
  position: relative;
  display: grid;
  gap: 10px;
}

.order-canceled-lock-banner {
  border: 1px solid #f0c7d6;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff6fa 0%, #fff0f6 100%);
  color: #8f3356;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}

.order-canceled-lock-banner strong {
  font-size: 14px;
  line-height: 1.2;
}

.order-canceled-lock-banner span {
  font-size: 12px;
  color: #9d4466;
}

.order-editor-readonly-scope {
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 0;
  display: grid;
  gap: 0;
}

.order-editor-shell.is-canceled .order-editor-readonly-scope {
  opacity: 0.72;
  filter: grayscale(0.26);
}

.order-canceled-strike {
  position: relative;
  height: 0;
  margin: 4px 0 6px;
  z-index: 12;
  pointer-events: none;
}

.order-canceled-strike::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  border-top: 3px solid rgba(191, 61, 111, 0.55);
}

.order-canceled-strike span {
  position: absolute;
  left: 50%;
  top: -17px;
  transform: translateX(-50%) rotate(-8deg);
  border: 1px solid #e7b5c9;
  border-radius: 999px;
  background: #fff1f7;
  color: #b33f68;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.order-editor-top > .toolbar {
  align-items: flex-start;
}

.order-editor-top-customer {
  flex: 1 1 420px;
  min-width: min(100%, 320px);
}

.order-editor-top-actions {
  width: auto;
  margin-left: auto;
  justify-content: flex-end;
  align-items: center;
}

.order-editor-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.order-editor-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  z-index: 40;
  border-radius: 12px;
  border: 1px solid #dbe3ff;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(20, 31, 74, 0.16);
  padding: 10px;
}

.order-editor-menu .btn {
  width: 100%;
  justify-content: flex-start;
}

.order-editor-menu-danger {
  border-color: #f2c7d7;
  background: #fff7fb;
  color: #c53168;
}

.order-editor-menu-danger:hover {
  background: #ffeef6;
}

.order-status-popover-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.order-status-popover-toggle {
  min-width: 170px;
  justify-content: center;
}

.order-status-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(230px, 82vw);
  z-index: 40;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(20, 31, 74, 0.16);
  display: grid;
  gap: 8px;
}

.order-status-popover .muted-note {
  margin: 0;
  font-size: 12px;
}

.order-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.order-results-title h3 {
  margin: 0;
}

.order-results-controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.order-results-controls .order-search-form {
  flex: 1 1 520px;
  min-width: min(520px, 100%);
}

.order-results-controls .order-results-create-btn {
  margin-left: auto;
}

.order-filter-panel {
  margin-bottom: 6px;
}

.order-panel-head {
  margin-bottom: 10px;
}

.order-filters-form {
  align-items: end;
}

.order-filters-grid {
  grid-template-columns: minmax(280px, 1.8fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(120px, 0.55fr);
}

.order-page-size-field select {
  min-width: 84px;
}

.order-filter-actions {
  justify-content: flex-end;
}

.order-results-page-size {
  margin: 0;
}

.order-results-footer {
  margin-top: 10px;
}

.customer-results-footer {
  margin-top: 12px;
  padding-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.customer-results-footer .listing-results-summary {
  margin: 0;
  color: #53608a;
  font-weight: 700;
}

.customer-results-footer .listing-results-pagination {
  padding: 4px;
  border: 1px solid #d8e1ff;
  border-radius: 999px;
  background: #f7f9ff;
  gap: 6px;
}

.customer-results-footer .listing-results-pagination .btn {
  min-width: 72px;
  min-height: 34px;
  padding: 7px 11px;
}

@media (max-width: 760px) {
  .customer-results-footer .listing-results-pagination {
    width: 100%;
    justify-content: space-between;
  }

  .customer-results-footer .listing-results-pagination .btn {
    flex: 1 1 auto;
  }
}

.order-postponed-section {
  margin-bottom: 12px;
  border: 1px solid #e2d7ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8f5ff 0%, #fbf9ff 100%);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.order-postponed-head {
  display: grid;
  gap: 2px;
}

.order-postponed-head h4 {
  margin: 0;
  color: #2f2458;
  font-size: 18px;
}

.order-postponed-head p {
  margin: 0;
  color: #64568e;
  font-size: 13px;
}

.order-postponed-table-wrap {
  border: 1px solid #ddd2fd;
  border-radius: 10px;
  background: #fff;
}

.order-postponed-table th,
.order-postponed-table td {
  vertical-align: middle;
}

.order-postponed-table th:last-child,
.order-postponed-table td:last-child {
  white-space: nowrap;
}

.order-postponed-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f0ebff;
  color: #5132b8;
  border: 1px solid #d8ccff;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.order-search-form {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.order-filter-selects {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  min-width: 280px;
}

.order-search-form input {
  width: 100%;
  margin-top: 0;
}

.order-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.orders-table th,
.orders-table td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.orders-table th {
  white-space: nowrap;
}

.orders-table td:nth-child(1),
.orders-table td:nth-child(5),
.orders-table td:nth-child(6),
.orders-table td:nth-child(8),
.orders-table td:nth-child(9) {
  white-space: nowrap;
}

.orders-table td:nth-child(1),
.orders-table td:nth-child(2),
.orders-table td:nth-child(5),
.orders-table td:nth-child(6),
.orders-table td:nth-child(7),
.orders-table td:nth-child(8),
.orders-table td:nth-child(9) {
  vertical-align: middle;
}

.order-id-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.order-list-row.is-clickable {
  cursor: pointer;
}

.order-list-row.is-clickable:hover td {
  background: #f7f9ff;
}

.order-list-row.is-clickable:focus-visible {
  outline: 2px solid #c7d4ff;
  outline-offset: -2px;
}

.order-list-row.is-canceled td {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #8f96b0;
  color: #7f869d;
  background: #fff7f9;
}

.order-list-row.is-canceled .order-main-text,
.order-list-row.is-canceled .order-sub-text {
  color: inherit;
}

.order-list-row.is-canceled .badge {
  opacity: 0.84;
}

.order-list-row.is-clickable.is-canceled:hover td {
  background: #fff0f4;
}

.order-main-text {
  display: block;
  font-weight: 600;
  color: #242a44;
}

.order-sub-text {
  display: block;
  color: #6c7594;
  font-size: 12px;
  margin-top: 2px;
}

.order-customer-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.order-customer-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  background: linear-gradient(145deg, #92a6ff 0%, #6d7ef0 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
}

.order-customer-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-customer-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.order-customer-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.order-appointment-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  color: #2f43b0;
  background: #e7ecff;
}

.order-editor-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
}

.order-editor-side {
  align-content: start;
}

.order-draft-inline-form {
  margin-bottom: 10px;
}

.order-payments-panel {
  display: grid;
  gap: 12px;
}

.order-payment-item-list {
  display: grid;
  gap: 0;
}

.order-payment-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e8ecff;
}

.order-payment-item:first-child {
  border-top: 1px solid #e8ecff;
}

.order-payment-item.is-deleted {
  border-bottom-color: #ecdcc2;
}

.order-payment-item.is-deleted .order-payment-item-copy strong {
  color: #5f4b31;
}

.order-payment-item.is-deleted .order-payment-item-total {
  color: #6a5537;
}

.order-payment-item-copy {
  display: grid;
  gap: 4px;
  align-content: start;
}

.order-payment-item-copy strong {
  font-size: 17px;
  color: #1f2641;
}

.order-payment-item-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.order-travel-fee-inline-editor {
  display: grid;
  gap: 8px;
  min-width: min(100%, 260px);
}

.order-travel-fee-inline-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.order-travel-fee-inline-field span {
  color: #6a769f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

.order-travel-fee-inline-field input {
  margin-top: 0;
  width: 100%;
  min-width: 0;
}

.order-travel-fee-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.order-travel-fee-inline-actions .btn {
  min-width: 88px;
  white-space: nowrap;
}

.order-payment-item-total {
  font-weight: 700;
  color: #27315a;
  white-space: nowrap;
}

.order-payment-item-total .pricing-plan-price-current {
  font-size: inherit;
}

.order-payment-empty {
  border: 1px dashed #d5defc;
  border-radius: 10px;
  background: #f8faff;
  color: #5f6b92;
  padding: 14px 12px;
  font-size: 14px;
}

.order-deleted-items-block {
  display: grid;
  gap: 6px;
  border: 1px solid #ead8b9;
  border-radius: 10px;
  background: #fff8ee;
  padding: 8px 10px;
}

.order-deleted-items-block .toolbar {
  margin-bottom: 0;
}

.order-deleted-items-block .toolbar h4 {
  margin: 0;
  font-size: 14px;
  color: #634a28;
}

.order-deleted-items-block .order-payment-item {
  gap: 10px;
  padding: 10px 0;
}

.order-deleted-items-block .order-payment-item:last-child {
  border-bottom: none;
}

.order-deleted-items-block .order-payment-item-copy {
  gap: 2px;
}

.order-deleted-items-block .order-payment-item-copy strong {
  font-size: 16px;
}

.order-deleted-items-block .order-payment-item-side {
  gap: 6px;
  align-self: start;
}

.order-deleted-items-block .order-item-action-group {
  gap: 6px;
}

.order-deleted-items-block .order-item-qty-pill {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

.order-deleted-items-block .order-recover-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.order-deleted-items-block .order-delete-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.order-payment-item-list-deleted .order-payment-item:first-child {
  border-top: none;
}

.order-deleted-items-block-table {
  margin-top: 2px;
}

.order-payment-link-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.order-payment-link-row-adjustments {
  margin-left: auto;
}

.order-payment-add-form {
  display: grid;
  gap: 8px;
  border: 1px solid #dbe4ff;
  border-radius: 10px;
  background: #f8faff;
  padding: 10px;
}

.order-payment-add-form input {
  margin-top: 0;
}

.order-payment-add-form select {
  margin-top: 0;
}

.order-catalog-picker {
  position: relative;
  min-width: 0;
}

.order-catalog-picker-input {
  margin-top: 0;
  padding-right: 42px;
}

.order-catalog-picker-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #3f4f89;
  transform: translateY(-50%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease;
}

.order-catalog-picker-toggle:hover {
  background: #edf2ff;
  color: #2b3e93;
}

.order-catalog-picker-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 92, 206, 0.2);
}

.order-catalog-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  border: 1px solid #d7defb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(16, 24, 58, 0.17);
  padding: 6px;
  display: grid;
  gap: 4px;
  max-height: 290px;
  overflow: auto;
}

.order-catalog-picker-menu[hidden] {
  display: none;
}

.order-catalog-picker-option {
  border: 1px solid transparent;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2947;
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
  display: grid;
  gap: 4px;
}

.order-catalog-picker-option span {
  pointer-events: none;
}

.order-catalog-picker-option:hover,
.order-catalog-picker-option.is-active {
  background: #f4f7ff;
  border-color: #d4defd;
}

.order-catalog-picker-option-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.order-catalog-picker-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 7px;
}

.order-catalog-picker-kind.is-product {
  background: #eaf0ff;
  color: #3351bb;
}

.order-catalog-picker-kind.is-package {
  background: #e8f7f2;
  color: #1f7f63;
}

.order-catalog-picker-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2947;
  line-height: 1.35;
}

.order-catalog-picker-meta {
  color: #68749b;
  font-size: 12px;
  line-height: 1.2;
  white-space: normal;
  text-align: right;
}

.order-catalog-picker-meta .pricing-plan-price-stack {
  align-items: flex-end;
}

.order-catalog-picker-meta .pricing-plan-price-original {
  font-size: 11px;
}

.order-catalog-picker-empty {
  color: #677299;
  font-size: 13px;
  padding: 10px;
}

.order-payment-add-form-product {
  grid-template-columns: minmax(0, 1.7fr) minmax(170px, 230px) 88px auto;
  column-gap: 10px;
  align-items: end;
}

.order-payment-add-form-product select[data-role="order-product-sqft-range"][hidden] {
  display: none;
}

.order-payment-add-form-product select[data-role="order-product-sqft-range"]:disabled {
  display: none;
}

.order-payment-add-form input[name="quantity"] {
  width: 80px;
  max-width: 80px;
  justify-self: start;
}

.order-payment-add-form-product > .btn {
  min-width: 92px;
  white-space: nowrap;
}

.calendar-reserve-products-panel .table-wrap table td {
  vertical-align: middle;
}

.calendar-reserve-qty-cell {
  width: 110px;
}

.calendar-reserve-item-qty-input {
  margin-top: 0;
  width: 80px;
  max-width: 80px;
  min-width: 80px;
}

.order-payment-add-form-product .order-payment-add-form-product-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.order-payment-add-form-product .order-payment-add-form-product-actions .btn {
  min-width: 92px;
  white-space: nowrap;
}

.order-payment-add-form-custom {
  grid-template-columns: minmax(200px, 1.4fr) minmax(130px, 0.9fr) minmax(90px, 110px) minmax(180px, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  align-items: end;
}

.order-payment-add-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.order-payment-add-field span {
  color: #6a769f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.order-payment-add-field input,
.order-payment-add-field select {
  margin-top: 0;
}

.order-payment-add-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.order-payment-add-actions .btn {
  min-width: 92px;
  white-space: nowrap;
}

.order-payment-summary {
  margin-top: 4px;
  border-top: 1px solid #e8ecff;
  padding-top: 10px;
  display: grid;
  gap: 4px;
  justify-items: end;
}

.order-payment-summary p {
  margin: 0;
}

.order-payment-deposit-summary {
  justify-self: end;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #e8ecff;
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}

.order-payment-deposit-summary p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-payment-deposit-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #65739f;
  font-weight: 700;
}

.order-payment-deposit-paid-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.order-collect-payment-deposit-summary {
  justify-self: end;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #e8ecff;
  display: grid;
  gap: 4px;
  width: min(320px, 100%);
}

.order-collect-payment-deposit-summary p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-collect-payment-deposit-summary p span {
  color: #5f6d95;
}

.order-collect-payment-deposit-summary p strong {
  color: #1f2947;
}

.order-collect-payment-deposit-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #65739f;
  font-weight: 700;
}

.order-collect-payment-deposit-paid-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.order-payment-history-empty {
  border-top: 1px solid #e8ecff;
  border-bottom: 1px solid #e8ecff;
  padding: 26px 0;
  text-align: center;
}

.order-payment-history-empty p {
  margin: 0;
  color: #6e789a;
}

.order-payment-history-list {
  border-top: 1px solid #e8ecff;
  border-bottom: 1px solid #e8ecff;
  display: grid;
}

.order-payment-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eef2ff;
}

.order-payment-history-row.is-refunded {
  background: #fcfdff;
}

.order-payment-history-row:last-child {
  border-bottom: none;
}

.order-payment-history-copy {
  display: grid;
  gap: 2px;
}

.order-payment-history-copy strong {
  color: #1f2947;
  font-size: 14px;
}

.order-payment-history-copy span,
.order-payment-history-copy small {
  color: #6a769f;
  font-size: 12px;
}

.order-payment-history-main {
  min-width: 0;
}

.order-payment-history-main strong {
  line-height: 1.25;
}

.order-payment-history-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-payment-history-refund-note {
  color: #9f3158;
  font-weight: 700;
}

.order-payment-history-amount {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.order-payment-history-amount strong {
  color: #1f2947;
}

.order-payment-history-amount span {
  color: #6a769f;
  font-size: 12px;
}

.order-payment-refund-trigger {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 11px;
  border-color: #cfd9fb;
  background: #f4f7ff;
  color: #4a60cc;
}

.order-payment-refund-trigger:hover {
  opacity: 1;
  border-color: #b7c6f8;
  background: #eaf0ff;
}

.order-payment-refund-trigger:disabled {
  opacity: 0.55;
}

.order-payment-refund-trigger-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-payment-reminder-card {
  border: 1px solid #dbe4ff;
  border-radius: 10px;
  background: #fcfdff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.order-payment-reminder-card h4 {
  margin: 0;
  font-size: 24px;
  color: #20274a;
}

.order-deposit-card {
  border-color: #d4e0ff;
  background: #f8fbff;
}

.order-deposit-panel {
  display: grid;
  gap: 12px;
}

.order-deposit-head {
  margin-bottom: 0;
}

.order-deposit-form {
  gap: 12px;
}

.order-deposit-toggle-card {
  margin: 0;
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}

.order-deposit-toggle-input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent);
  place-self: center;
}

.order-deposit-toggle-copy {
  display: grid;
  gap: 4px;
}

.order-deposit-toggle-copy strong {
  color: #25325b;
  font-size: 14px;
}

.order-deposit-toggle-copy .muted-note {
  margin: 0;
}

.order-deposit-percent-card {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.order-deposit-percent-card.is-disabled {
  opacity: 0.68;
}

.order-deposit-percent-head {
  display: grid;
  gap: 2px;
}

.order-deposit-percent-head strong {
  color: #25325b;
  font-size: 14px;
}

.order-deposit-percent-head span {
  color: #6a789f;
  font-size: 12px;
}

.order-deposit-percent-field {
  width: min(230px, 100%);
  margin: 0;
  position: relative;
}

.order-deposit-percent-field input {
  margin-top: 0;
  padding-right: 38px;
}

.order-deposit-percent-field span {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #5f6d95;
  font-size: 13px;
  font-weight: 700;
}

.order-deposit-summary-card {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.order-deposit-summary-card .badge {
  width: fit-content;
}

.order-deposit-summary-label {
  font-size: 11px;
  color: #6676a5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.order-deposit-summary {
  margin: 0;
}

.order-payment-gateway-card {
  border-color: #d7e4ff;
  background: #fcfdff;
}

.order-payment-gateway-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.order-payment-gateway-grid input {
  margin-top: 4px;
}

.order-payment-gateway-summary {
  margin: 0;
}

.order-payment-reminder-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-payment-reminder-grid input {
  margin-top: 4px;
}

.order-payment-reminder-summary {
  margin: 0;
}

.order-payment-balance-row {
  border-top: 1px solid #e8ecff;
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
  color: #2c365d;
}

.order-payment-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.order-draft-summary {
  margin-top: 10px;
  border-top: 1px solid #e8ecff;
  padding-top: 10px;
  display: grid;
  gap: 4px;
  justify-items: end;
}

.order-draft-summary p {
  margin: 0;
}

.order-adjustments-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
  justify-content: end;
  align-items: end;
}

.order-adjustments-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.order-discount-applied-note {
  justify-self: end;
  text-align: right;
}

.order-item-inline-input {
  margin-top: 0;
  min-width: 96px;
  max-width: 140px;
  padding: 8px 10px;
}

.order-item-action-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.order-item-qty-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #d4defd;
  background: #f5f8ff;
  color: #334db4;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.order-edit-icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
  border-color: #d5defd;
  background: #f2f6ff;
  color: #3652c6;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.order-edit-icon-btn:hover {
  opacity: 1;
  background: #e9f0ff;
  border-color: #bccbfb;
  color: #2742b7;
}

.order-edit-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(54, 82, 198, 0.2);
}

.order-edit-icon-svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  pointer-events: none;
}

.order-delete-icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
  border-color: #f2ccda;
  background: #fff4f8;
  color: #cd3b74;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.order-delete-icon-btn:hover {
  opacity: 1;
  background: #ffe8f1;
  border-color: #e7aac1;
  color: #b81f5e;
}

.order-delete-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(205, 59, 116, 0.2);
}

.order-delete-icon-svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.order-recover-icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
  border-color: #cfe6bd;
  background: #f2feea;
  color: #2f8a42;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.order-recover-icon-btn:hover {
  opacity: 1;
  background: #e8fadb;
  border-color: #b9dca1;
  color: #236c33;
}

.order-recover-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 138, 66, 0.18);
}

.order-recover-icon-svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  pointer-events: none;
}

.order-draft-address-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1fr) minmax(90px, 0.5fr) minmax(120px, 0.65fr);
  align-items: end;
}

.order-address-panel.is-locked .stack > label > input,
.order-address-panel.is-locked .order-draft-address-grid input {
  background: #f5f7ff;
  border-color: #d8e0ff;
  color: #65739a;
  box-shadow: none;
}

.order-address-panel.is-locked .stack > label > input::placeholder,
.order-address-panel.is-locked .order-draft-address-grid input::placeholder {
  color: #8a96bb;
}

.order-address-panel.is-locked .stack > label > input:focus,
.order-address-panel.is-locked .order-draft-address-grid input:focus {
  outline: none;
  box-shadow: none;
}

.order-address-lock-banner {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid #d8e0ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8faff 0%, #f3f6ff 100%);
  color: #566585;
}

.order-address-lock-banner strong {
  color: #202b4d;
  font-size: 13px;
  line-height: 1.3;
}

.order-address-lock-banner span {
  font-size: 12px;
  line-height: 1.45;
}

.order-reservation-notes-text {
  margin: 0;
  color: #3d4a74;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.order-territory-notice {
  margin-top: 8px;
  border: 1px solid #f0c7c7;
  border-radius: 10px;
  background: #fff4f4;
  color: #6e2b2b;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.order-territory-notice strong {
  font-size: 13px;
  line-height: 1.35;
}

.order-territory-notice span {
  font-size: 12px;
  line-height: 1.5;
}

.address-map-preview {
  margin-top: 10px;
  border: 1px solid #d8e0ff;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f8ff;
}

.address-map-preview-frame {
  display: block;
  width: 100%;
  height: 230px;
  border: 0;
}

.address-map-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-top: 1px solid #d8e0ff;
  color: #546087;
  font-size: 12px;
}

.address-map-preview-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-map-preview-meta a {
  color: #3947d9;
  font-weight: 700;
  text-decoration: none;
}

.address-map-preview-meta a:hover {
  text-decoration: underline;
}

.address-map-preview-empty {
  margin-top: 10px;
  border: 1px dashed #ccd7ff;
  border-radius: 12px;
  background: #f7f9ff;
  color: #66739a;
  font-size: 13px;
  padding: 12px;
}

.order-draft-client-form {
  border-top: 1px dashed #e3e8ff;
  padding-top: 8px;
}

.order-selected-customer-group {
  display: grid;
  gap: 8px;
}

.order-selected-customer-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid #dce4ff;
  border-radius: 10px;
  background: #f8faff;
  padding: 10px 12px;
}

.order-selected-customer-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  background: linear-gradient(145deg, #92a6ff 0%, #6d7ef0 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
}

.order-selected-customer-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-selected-customer-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.order-selected-customer-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.order-selected-customer-card strong {
  color: #222947;
  font-size: 14px;
}

.order-selected-customer-card span {
  color: #65739b;
  font-size: 12px;
}

.order-selected-customer-card small {
  color: #5d6a95;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.order-customer-modal {
  width: min(680px, 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 10px;
}

.order-customer-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-customer-modal-head h3 {
  margin: 0;
}

.order-customer-modal p {
  margin: 0;
  color: var(--muted);
}

.order-customer-modal-fields {
  display: grid;
  gap: 10px;
}

.order-customer-modal-field {
  display: grid;
  gap: 6px;
}

.order-customer-modal-field h4 {
  margin: 0;
  font-size: 15px;
  color: #212a49;
}

.order-customer-modal-field .muted-note {
  margin: 0;
}

.order-customer-modal-search-input-wrap {
  position: relative;
}

.order-customer-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.order-customer-modal-search-input-wrap .search-suggestions-menu {
  top: calc(100% + 8px);
  z-index: 1200;
  border: 1px solid #d7defa;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(16, 24, 58, 0.18);
  padding: 6px;
  max-height: min(280px, 40vh);
}

.order-customer-modal-search-input-wrap .search-suggestions-option {
  border: 1px solid transparent;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2947;
  padding: 10px 11px;
  display: grid;
  gap: 2px;
}

.order-customer-modal-search-input-wrap .search-suggestions-option:hover,
.order-customer-modal-search-input-wrap .search-suggestions-option:focus-visible {
  background: #f4f7ff;
  border-color: #d4defd;
  outline: none;
}

.order-customer-modal-search-input-wrap .search-suggestions-option-meta {
  color: #68749b;
}

.order-customer-modal-search-input-wrap .search-suggestions-empty {
  color: #677299;
  font-size: 13px;
  padding: 10px;
}

.customer-create-modal {
  width: min(760px, 100%);
  border-radius: 14px;
  padding: 20px;
  display: grid;
  gap: 12px;
}

.customer-create-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-create-modal-title-wrap {
  display: grid;
  gap: 4px;
}

.customer-create-modal-title-wrap h3 {
  margin: 0;
}

.customer-create-modal-intro {
  margin: 0;
  color: #5e6b94;
  line-height: 1.45;
}

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

.customer-create-section {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfcff 0%, #f7f9ff 100%);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.customer-create-section-optional {
  gap: 8px;
}

.customer-create-grid-two {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-create-field {
  margin: 0;
  display: grid;
  gap: 6px;
}

.customer-create-field > span {
  color: #5a678f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.customer-create-help-text {
  margin: 0;
}

.customer-create-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.order-collect-payment-modal {
  width: min(980px, 100%);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.order-collect-payment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-collect-payment-head h3 {
  margin: 0;
}

.order-collect-payment-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.order-collect-payment-summary,
.order-collect-payment-method {
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  background: #fcfdff;
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.order-collect-payment-summary h4,
.order-collect-payment-method h4 {
  margin: 0;
  font-size: 20px;
}

.order-collect-payment-method h5 {
  margin: 0;
  font-size: 15px;
  color: #1f2947;
}

.order-collect-payment-summary-grid {
  display: grid;
  gap: 5px;
}

.order-collect-payment-summary-grid p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.order-collect-payment-summary-grid p span {
  color: #5f6d95;
}

.order-collect-payment-summary-grid p strong {
  color: #1f2947;
}

.order-collect-payment-amount-options {
  border: 1px solid #dbe4ff;
  border-radius: 10px;
  background: #f8faff;
  padding: 10px;
  margin: 0;
  display: grid;
  gap: 8px;
}

.order-collect-payment-amount-options legend {
  padding: 0 4px;
  color: #5e6d97;
  font-size: 12px;
  font-weight: 700;
}

.order-collect-amount-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.order-collect-amount-option input[type="radio"] {
  width: auto;
  margin: 0;
}

.order-collect-payment-card-fields {
  display: grid;
  gap: 10px;
  border: 1px solid #dbe4ff;
  border-radius: 10px;
  background: #f8faff;
  padding: 10px;
}

.order-collect-payment-card-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-collect-payment-manual-note {
  margin: 0;
}

.order-collect-payment-processing-fee-row {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #3f4f82;
}

.order-collect-payment-due-now {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: #25326a;
}

.order-collect-payment-due-now strong {
  font-size: 20px;
}

.order-collect-payment-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.order-payment-details-modal {
  width: min(720px, 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.order-payment-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-payment-details-head h3 {
  margin: 0;
}

.order-payment-details-form {
  display: grid;
  gap: 10px;
}

.order-payment-details-form input[disabled] {
  color: #2e385d;
  background: #f7f9ff;
}

.order-payment-details-refund-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-payment-details-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.order-discount-modal {
  width: min(640px, 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.order-discount-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-discount-modal-head h3 {
  margin: 0;
}

.order-discount-modal p {
  margin: 0;
  color: var(--muted);
}

.order-discount-source-list {
  display: grid;
  gap: 8px;
}

.order-discount-source-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe3ff;
  border-radius: 10px;
  background: #f8faff;
  padding: 10px 12px;
  margin: 0;
}

.order-discount-source-option.is-disabled {
  opacity: 0.6;
}

.order-discount-source-option input[type="radio"] {
  margin: 0;
  width: auto;
}

.order-discount-manual-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-discount-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.order-item-editor-modal {
  width: min(700px, 100%);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 14px;
  color-scheme: light;
}

.order-item-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-item-editor-head h3 {
  margin: 0;
}

.order-item-editor-modal p {
  margin: 0;
  color: var(--muted);
}

.order-item-editor-summary {
  font-size: 15px;
  line-height: 1.4;
}

.order-item-editor-item-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #dbe3ff;
  border-radius: 12px;
  background: #f8faff;
}

.order-item-editor-item-name {
  font-size: 18px;
  line-height: 1.35;
  color: #1f2a4d;
}

.order-item-editor-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-item-editor-item-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #50608f;
  font-size: 12px;
  font-weight: 700;
}

.order-item-editor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.order-item-editor-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.order-item-editor-field-compact {
  max-width: 220px;
}

.order-item-editor-field-wide {
  grid-column: 1 / -1;
}

.order-item-editor-field > span {
  color: #596489;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.order-item-editor-field input,
.order-item-editor-field select {
  min-height: 44px;
}

.order-item-editor-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.order-item-editor-actions .btn {
  min-width: 120px;
}

@media (max-width: 760px) {
  .order-item-editor-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .order-item-editor-field-compact {
    max-width: 100%;
  }

  .order-item-editor-actions .btn {
    min-width: 0;
  }
}

.order-appointments-section {
  display: grid;
  gap: 12px;
}

.order-appointment-card-list {
  display: grid;
  gap: 12px;
}

.order-appointments-empty {
  border: 1px dashed #d5defc;
  border-radius: 10px;
  background: #f8faff;
  color: #5f6b92;
  padding: 12px;
  font-size: 14px;
}

.order-appointments-add-row {
  display: flex;
  justify-content: flex-end;
}

.order-appointment-card {
  border: 1px solid #dbe3fb;
  border-radius: 10px;
  background: #fcfdff;
  padding: 14px;
  display: grid;
  gap: 10px;
  position: relative;
}

.order-appointment-card.is-canceled {
  background: #fff8f8;
  border-color: #f2c9c9;
}

.order-appointment-card.is-postponed {
  background: #fffaf1;
  border-color: #f3dfb2;
}

.order-appointment-card.is-canceled::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  border-top: 2px solid rgba(202, 78, 78, 0.55);
  pointer-events: none;
}

.order-appointment-card.is-canceled .order-appointment-card-head h4,
.order-appointment-card.is-canceled .order-appointment-card-body,
.order-appointment-card.is-canceled .order-appointment-card-col p,
.order-appointment-card.is-canceled .order-appointment-item-list,
.order-appointment-card.is-canceled .order-appointment-team-list {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.order-appointment-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-appointment-card-head h4 {
  margin: 0;
  font-size: 32px;
  color: #1f2641;
}

.order-appointment-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-appointment-card-body {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #e7ecfb;
  border-bottom: 1px solid #e7ecfb;
  padding: 12px 0;
}

.order-appointment-card-col {
  display: grid;
  gap: 8px;
}

.order-appointment-card-col p {
  margin: 0;
  display: grid;
  gap: 2px;
}

.order-appointment-item-list,
.order-appointment-team-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}

.order-appointment-team-list li {
  display: grid;
  gap: 1px;
}

.order-appointment-team-list li span {
  color: #6a738f;
  font-size: 12px;
}

.order-appointment-card-foot {
  color: #6a738f;
  font-size: 13px;
}

@media (max-width: 900px) {
  .order-payment-add-form-product,
  .order-payment-add-form-custom,
  .order-payment-gateway-grid,
  .order-payment-reminder-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-deposit-percent-field {
    width: 100%;
  }

  .order-payment-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-payment-item-side {
    justify-content: flex-start;
  }

  .order-travel-fee-inline-editor {
    width: 100%;
    min-width: 0;
  }

  .order-travel-fee-inline-actions {
    justify-content: flex-start;
  }

  .order-payment-footer-actions {
    justify-content: flex-start;
  }

  .order-payment-footer-actions .btn {
    width: 100%;
  }

  .order-payment-history-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .order-payment-history-amount {
    justify-items: start;
  }

  .order-payment-refund-trigger {
    width: 100%;
    min-width: 0;
  }

  .order-payment-add-actions {
    grid-column: auto;
    justify-content: flex-start;
  }

  .order-payment-add-actions .btn {
    width: auto;
    min-width: 0;
  }

  .order-payment-add-form-product .order-payment-add-form-product-actions {
    justify-content: flex-start;
  }

  .order-payment-add-form-product .order-payment-add-form-product-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .order-payment-link-row-adjustments {
    margin-left: 0;
  }

  .order-appointment-card-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .order-collect-payment-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-collect-payment-deposit-summary {
    justify-self: stretch;
    width: 100%;
  }

  .order-collect-payment-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-collect-payment-actions {
    justify-content: stretch;
  }

  .order-collect-payment-actions .btn {
    width: 100%;
  }

  .order-payment-details-refund-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.order-fields-panel {
  display: grid;
  gap: 10px;
}

.order-fields-toolbar {
  margin-bottom: 0;
}

.order-fields-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid #dbe3ff;
  border-radius: 999px;
  background: #f5f8ff;
  color: #55679d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.order-fields-source-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed #d5defc;
  border-radius: 10px;
  background: #f8faff;
  color: #5f6b92;
  font-size: 13px;
  line-height: 1.35;
}

.order-custom-fields {
  max-height: 340px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  background: #f8faff;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.order-field-input {
  margin: 0;
  display: grid;
  gap: 6px;
}

.order-field-input-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #5b6893;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.order-field-required {
  color: #c0386d;
  font-weight: 800;
}

.order-field-input input,
.order-field-input select,
.order-field-input textarea {
  margin-top: 0;
  background: #ffffff;
}

.order-field-input.is-textarea {
  grid-column: 1 / -1;
}

.order-field-input.is-textarea textarea {
  min-height: 84px;
}

.order-custom-fields-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px;
  border: 1px dashed #d4defd;
  border-radius: 10px;
  background: #ffffff;
}

.order-custom-fields-empty .muted-note {
  margin: 0;
}

.order-custom-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid #dbe4ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  min-height: 42px;
}

.order-custom-checkbox.is-checkbox {
  grid-column: 1 / -1;
}

.order-custom-checkbox span {
  color: #27315a;
  font-size: 13px;
  font-weight: 600;
}

.order-custom-checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .order-custom-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.order-appointments-modal {
  width: min(940px, 100%);
  max-height: calc(100vh - 60px);
  overflow: auto;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 10px;
  position: relative;
}

.order-appointments-modal h3 {
  margin: 0;
  font-size: 30px;
}

.order-appointments-modal p {
  margin: 0 0 4px;
  color: var(--muted);
}

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

.order-appointments-editor-layout {
  display: grid;
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.order-appointments-slot-list {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
  padding-right: 2px;
}

.order-appointments-slot-hint {
  margin: 0;
}

.order-appointments-slot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.order-appointments-slot-row.is-canceled .order-appointments-slot-select {
  background: #fff8f8;
  border-color: #f2c9c9;
}

.order-appointments-slot-row.is-canceled .order-appointments-slot-select strong,
.order-appointments-slot-row.is-canceled .order-appointments-slot-select span {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.order-appointments-editor-pane {
  display: grid;
  gap: 12px;
}

.order-appointments-slot-row.is-active .order-appointments-slot-select {
  border-color: #5568ff;
  background: #eef2ff;
}

.order-appointments-slot-select {
  border: 1px solid #d6defc;
  border-radius: 10px;
  background: #f8faff;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  cursor: pointer;
}

.order-appointments-slot-select strong {
  font-size: 15px;
  color: #1f2945;
}

.order-appointments-slot-select span {
  font-size: 13px;
  color: #5d6a96;
}

.order-appointments-slot-select small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6a7393;
}

.order-appointments-slot-row.is-canceled .order-appointments-slot-select small {
  color: #bb3f3f;
}

.order-appointments-edit-form {
  border: 1px solid #dce3fb;
  border-radius: 10px;
  background: #fbfcff;
  padding: 12px;
}

.order-appointments-time-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.order-appointments-time-grid label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #4f5d88;
}

.order-appointments-time-grid input,
.order-appointments-time-grid select {
  margin-top: 4px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 16px;
}

.order-appointments-items-fieldset,
.order-appointments-team-fieldset {
  border: 1px solid #dce3fb;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.order-appointments-items-fieldset legend,
.order-appointments-team-fieldset legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 13px;
  color: #243057;
}

.order-appointment-item-option,
.order-appointment-member-option {
  border: 1px solid #dce3fb;
  border-radius: 10px;
  background: #f8faff;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.order-appointment-item-option input[type="checkbox"],
.order-appointment-member-option input[type="checkbox"] {
  width: auto;
  margin-top: 2px;
}

.order-appointment-item-option span,
.order-appointment-member-option span {
  display: grid;
  gap: 2px;
}

.order-appointment-item-option span strong,
.order-appointment-member-option span strong {
  font-size: 14px;
}

.order-appointment-item-option span small,
.order-appointment-member-option span small {
  color: #5f6c96;
  font-size: 12px;
}

.order-appointment-item-meta {
  font-weight: 600;
}

.order-appointments-slot-create {
  border: 1px dashed #cfd8fc;
  border-radius: 10px;
  background: #f8faff;
  padding: 10px;
  display: grid;
  gap: 8px;
  opacity: 0.8;
  transition: opacity 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.order-appointments-slot-create .order-appointments-time-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.order-appointments-slot-create .order-appointments-time-grid label:first-child {
  grid-column: 1 / -1;
}

.order-appointments-slot-create:hover,
.order-appointments-slot-create:focus-within {
  opacity: 1;
  border-color: #9fafef;
  background: #f4f7ff;
}

.order-appointments-slot-create-title {
  font-size: 14px;
  font-weight: 700;
  color: #67739d;
}

.order-appointments-slot-create .btn {
  width: 100%;
}

.order-appointments-slot-create.is-open {
  border-color: #9fafef;
  background: #f4f7ff;
  opacity: 1;
}

.order-appointments-create-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 25, 59, 0.54);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 3;
}

.order-appointments-create-modal {
  width: min(560px, 100%);
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 10px;
  box-shadow: 0 20px 40px rgba(16, 24, 58, 0.24);
}

.order-appointments-create-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-appointments-create-modal-head h4 {
  margin: 0;
  font-size: 20px;
}

.order-appointments-create-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.order-with-appointment-modal {
  width: min(1360px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 20px 48px rgba(16, 24, 58, 0.24);
  display: grid;
  gap: 12px;
}

.order-with-appointment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-with-appointment-head h3 {
  margin: 0;
  font-size: 36px;
}

.order-modal-close-icon {
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.order-with-appointment-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
  align-items: start;
}

.order-with-appointment-layout .panel {
  box-shadow: none;
}

.order-with-appointment-details-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-with-appointment-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.order-intake-section {
  border: 1px solid #e4e9ff;
  border-radius: 12px;
  background: #fbfcff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.order-intake-section + .order-intake-section {
  margin-top: 12px;
}

.order-intake-section .toolbar {
  margin: 0;
}

.order-intake-section .toolbar h4 {
  margin: 0;
  color: #202a49;
  font-size: 22px;
  line-height: 1.15;
}

.order-team-members-list {
  display: grid;
  gap: 8px;
}

.order-team-member-search {
  margin: 0;
  display: grid;
  gap: 0;
}

.order-team-member-search > span {
  display: none;
}

.order-team-member-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid #e3e8ff;
  border-radius: 9px;
  background: #fbfcff;
}

.order-team-member-option input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.order-team-member-option.is-disabled {
  opacity: 0.68;
  background: #f5f7ff;
}

.order-team-member-option.is-busy {
  opacity: 0.58;
  background: #f2f4fa;
  border-color: #d8dfef;
}

.order-team-member-option.is-busy .order-team-member-name {
  color: #57648b;
}

.order-team-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  overflow: hidden;
  border: 1px solid #d8e0fb;
  background: linear-gradient(145deg, #95a8ff 0%, #7587f2 100%);
  color: #fff;
}

.order-team-member-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-team-member-avatar-fallback {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.order-team-member-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.order-team-member-name {
  color: #1f2947;
  font-weight: 700;
}

.order-team-member-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-team-member-busy-note {
  color: #8b6f3b;
  font-weight: 700;
}

.order-team-members-empty-search {
  margin: -2px 0 0;
}

.order-link-button {
  border: none;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.order-link-button:hover {
  text-decoration: underline;
}

.order-subtotal-row {
  margin: 4px 0 0;
  text-align: right;
}

.order-subtotal-note-right {
  margin: 4px 0 0 auto;
  max-width: min(460px, 100%);
  text-align: right;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #11162e;
  color: #fff;
  border-radius: 11px;
  padding: 10px 13px;
  box-shadow: 0 12px 24px rgba(5, 9, 33, 0.35);
  z-index: 999;
}

@media (max-width: 1050px) {
  body.mobile-menu-open {
    overflow: hidden;
  }

  .mk-hero-shell {
    grid-template-columns: 1fr;
  }

  .mk-story-grid {
    grid-template-columns: 1fr;
  }

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

  .mk-feature-row,
  .mk-feature-row-reverse {
    grid-template-columns: 1fr;
  }

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

  .mk-mobile-row {
    grid-template-columns: 1fr;
  }

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

  .mk-quote-row-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-contact-grid {
    grid-template-columns: 1fr;
  }

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

  .mk-flow {
    grid-template-columns: 1fr;
  }

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

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

  .app-shell {
    grid-template-columns: 1fr;
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-shell.mobile-menu-open {
    overflow: hidden;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(86vw, 360px);
    height: 100dvh;
    max-height: none;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 0 18px 18px 0;
    padding: 16px;
    transform: translateX(-104%);
    transition: transform 180ms ease;
    box-shadow: 22px 0 42px rgba(18, 27, 62, 0.18);
    overscroll-behavior: contain;
  }

  .app-shell.mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    border: 0;
    background: rgba(18, 27, 62, 0.36);
    backdrop-filter: blur(2px);
  }

  .app-shell.mobile-menu-open .mobile-menu-backdrop {
    display: block;
  }

  .sidebar-mobile-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
  }

  .mobile-menu-close {
    min-height: 34px;
    padding: 0 12px;
  }

  .brand-block {
    margin-bottom: 14px;
  }

  .menu {
    display: grid;
    gap: 12px;
    overflow: visible;
    padding-bottom: 4px;
  }

  .menu-section,
  .menu-row-group,
  .menu-subgroup,
  .menu-submenu,
  .menu-subgroup-list {
    display: grid;
    gap: 5px;
    padding-left: 0;
  }

  .menu-heading,
  .menu-subheading {
    display: block;
    margin-top: 2px;
    padding: 5px 8px 2px;
  }

  .menu-parent::after {
    display: inline;
  }

  .menu-item,
  .menu-subitem {
    display: flex;
    align-items: center;
    white-space: normal;
    width: 100%;
    min-height: 44px;
  }

  .sidebar-mobile-utilities {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #dbe3f8;
  }

  .sidebar-mobile-util {
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ffffff;
    color: #34405f;
    text-decoration: none;
    padding: 9px 11px;
    display: grid;
    gap: 2px;
    text-align: left;
    cursor: pointer;
    font: inherit;
  }

  .sidebar-mobile-util-title {
    color: #1f2947;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
  }

  .sidebar-mobile-util-subtitle {
    color: #68749c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
  }

  .sidebar-mobile-theme-toggle {
    justify-content: space-between;
    min-height: 46px;
    padding: 9px 11px;
  }

  .sidebar-mobile-logout {
    color: #4c57d9;
    font-weight: 800;
  }

  .workspace {
    width: 100%;
    min-width: 0;
  }

  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    grid-column: 1;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
  }

  .mobile-menu-toggle-icon {
    width: 18px;
    display: grid;
    gap: 4px;
  }

  .mobile-menu-toggle-icon span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .search-wrap {
    grid-column: 2;
    min-width: 0;
  }

  .top-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: 100%;
    min-width: 0;
  }

  .topbar-user-chip {
    min-width: 0;
    max-width: min(46vw, 280px);
  }

  .listing-filters {
    grid-template-columns: 1fr;
  }

  .listing-filters-grid {
    grid-template-columns: 1fr 1fr;
  }

  .listing-more-filters-grid {
    grid-template-columns: 1fr 1fr;
  }

  .listing-results-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-results-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .listing-results-footer {
    width: 100%;
    justify-content: flex-start;
  }

  .availability-page-layout {
    grid-template-columns: 1fr;
  }

  .availability-local-nav {
    position: static;
  }

  .availability-overview-grid {
    grid-template-columns: 1fr;
  }

  .availability-sync-grid {
    grid-template-columns: 1fr;
  }

  .business-hours-row {
    grid-template-columns: 1fr 1fr;
  }

  .business-hours-day {
    grid-column: 1 / -1;
  }

  .availability-business-hours-row {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .availability-business-hours-day {
    grid-column: 1 / -1;
  }

  .availability-business-hours-open-toggle {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .availability-business-hours-actions {
    justify-content: flex-start;
  }

  .twilight-default-card-head {
    grid-template-columns: 1fr;
  }

  .twilight-grid-head,
  .twilight-grid-row {
    grid-template-columns: minmax(135px, 1fr) 92px 92px 92px;
  }

  .twilight-default-card-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .twilight-grid-body {
    padding-left: 10px;
    padding-right: 10px;
  }

  .appointment-settings-redesign .appointment-settings-inline-field {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .appointment-settings-redesign .appointment-settings-inline-field input,
  .appointment-settings-redesign .appointment-settings-inline-field select {
    border-radius: 10px;
  }

  .appointment-settings-redesign .appointment-settings-inline-field span {
    border-left: 1px solid #b9c7ff;
    border-radius: 10px;
    padding: 8px 12px;
  }

  .appointment-settings-redesign .appointment-settings-toggle-card small {
    padding-left: 0;
  }

  .appointment-settings-redesign .appointment-settings-fee-grid,
  .appointment-settings-redesign .appointment-settings-two-col {
    grid-template-columns: 1fr;
  }

  .appointment-settings-redesign .appointment-settings-main-actions {
    justify-content: flex-start;
  }

  .booking-limits-grid {
    grid-template-columns: 1fr;
  }

  .booking-limits-redesign .booking-limits-v2-grid {
    grid-template-columns: 1fr;
  }

  .booking-limits-redesign .booking-limits-explain-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .booking-limits-hero h3 {
    font-size: 30px;
    line-height: 1.1;
  }

  .booking-limits-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .booking-limits-layout {
    grid-template-columns: 1fr;
  }

  .booking-limits-inline-field {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .booking-limits-inline-field input {
    border-radius: 10px;
  }

  .booking-limits-inline-field span {
    border-left: 1px solid #b9c7ff;
    border-radius: 10px;
    padding: 8px 12px;
  }

  .booking-limits-actions {
    justify-content: flex-start;
  }

  .booking-limits-helper-tooltip::after {
    width: min(300px, 82vw);
  }

  .scheduling-settings-hero h3 {
    font-size: 28px;
  }

  .scheduling-settings-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .scheduling-settings-choice-list {
    grid-template-columns: 1fr;
  }

  .scheduling-settings-choice-copy strong {
    font-size: 16px;
  }

  .scheduling-settings-grid,
  .scheduling-settings-toggle-grid {
    grid-template-columns: 1fr;
  }

  .scheduling-settings-field select {
    max-width: 100%;
  }

  .scheduling-settings-toggle-card small {
    grid-column: 1;
  }

  .scheduling-settings-actions {
    justify-content: flex-start;
  }

  .twilight-card-actions {
    align-items: stretch;
  }

  .territory-map-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .territory-page-v4-hero {
    grid-template-columns: 1fr;
  }

  .territory-page-v5-head {
    flex-direction: column;
    align-items: stretch;
  }

  .territory-page-v6 {
    padding: 14px;
    gap: 14px;
  }

  .territory-page-v6-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .territory-page-v6-copy h3 {
    font-size: 27px;
  }

  .territory-page-v6-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .territory-page-v6-metric:last-child {
    grid-column: 1 / -1;
  }

  .territory-policy-card-v6 .territory-policy-grid {
    grid-template-columns: 1fr;
  }

  .territory-create-summary-v6 {
    align-items: flex-start;
  }

  .territory-page-v6 .territory-create-workspace {
    grid-template-columns: 1fr;
  }

  .territory-page-v6 .territory-map-search-row {
    grid-template-columns: 1fr;
  }

  .territory-page-v6 .territory-map-canvas,
  .territory-page-v6 .territory-map-fallback {
    min-height: 300px;
  }

  .territory-page-v7 .tax-rates-header-main {
    grid-template-columns: 1fr;
  }

  .territory-page-v7 .tax-rates-header-cta {
    justify-content: flex-start;
  }

  .territory-page-v7 .territory-v7-header-actions {
    justify-content: flex-start;
  }

  .territory-page-v7 .tax-rates-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .territory-page-v7 .territory-policy-card-v7 .territory-policy-grid {
    grid-template-columns: 1fr;
  }

  .order-create-backdrop.territory-v7-builder-modal-host {
    padding: 12px;
  }

  .order-create-backdrop.territory-v7-policy-modal-host {
    padding: 12px;
  }

  .territory-policy-modal-v7 {
    width: min(980px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
  }

  .territory-policy-modal-head {
    flex-direction: column;
    align-items: stretch;
  }

  .territory-policy-modal-v8 {
    width: min(1000px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
  }

  .territory-policy-modal-head-v8 h3 {
    font-size: 27px;
  }

  .territory-policy-layout-v8 {
    grid-template-columns: 1fr;
  }

  .territory-builder-modal-v7 {
    width: min(1240px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
  }

  .territory-v7-builder-modal-host .territory-create-shell.territory-create-shell-v7.territory-builder-modal-v7 {
    width: min(1240px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
  }

  .territory-builder-modal-head {
    flex-direction: column;
    align-items: stretch;
  }

  .territory-page-v7 .territory-create-summary-v7 {
    align-items: flex-start;
  }

  .territory-page-v7 .territory-create-summary-v7 .territory-create-summary-copy strong {
    font-size: 24px;
  }

  .territory-page-v7 .territory-create-workspace-v7 {
    grid-template-columns: 1fr;
  }

  .territory-page-v7 .territory-map-search-row {
    grid-template-columns: 1fr;
  }

  .territory-page-v7 .territory-radius-controls {
    grid-template-columns: 1fr;
  }

  .territory-page-v7 .territory-map-canvas,
  .territory-page-v7 .territory-map-fallback {
    min-height: 300px;
  }

  .territory-page-v7 .territory-v7-form-grid {
    grid-template-columns: 1fr;
  }

  .territory-page-v5-copy h3 {
    font-size: 26px;
  }

  .territory-page-v5-metrics-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .territory-page-v5-metric:last-child {
    grid-column: 1 / -1;
  }

  .territory-create-summary-v5 {
    align-items: flex-start;
  }

  .territory-page-v4-metrics {
    grid-template-columns: 1fr;
  }

  .territory-create-summary-v4 {
    align-items: flex-start;
  }

  .territory-create-summary-v4::after {
    margin-top: 2px;
  }

  .territory-create-workspace {
    grid-template-columns: 1fr;
  }

  .territory-map-search-row {
    grid-template-columns: 1fr;
  }

  .territory-search-preview {
    grid-template-columns: 1fr;
  }

  .territory-search-preview-map {
    min-height: 200px;
  }

  .territory-builder-layout {
    grid-template-columns: 1fr;
  }

  .territory-current-list-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .territory-create-shell {
    margin-left: 0;
    width: 100%;
  }

  .territory-create-summary {
    width: 100%;
  }

  .territory-map-canvas {
    min-height: 280px;
  }

  .territory-map-fallback,
  .territory-map-fallback-embed,
  .territory-map-fallback-empty {
    min-height: 280px;
  }

  .territory-map-fallback-frame {
    min-height: 240px;
  }

  .territory-map-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .territory-map-row-team {
    justify-content: flex-start;
  }

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

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

  .products-editor-grid-two,
  .products-editor-grid-three,
  .products-editor-grid-four,
  .products-editor-grid-five,
  .products-editor-options-grid,
  .products-editor-flags {
    grid-template-columns: 1fr;
  }

  .package-products-grid {
    grid-template-columns: 1fr;
    max-height: 320px;
  }

  .products-category-panel .products-addon-main-grid {
    grid-template-columns: 1fr;
  }

  .products-image-upload-shell {
    grid-template-columns: 1fr;
  }

  .products-image-upload-side {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding-bottom: 2px;
  }

  .products-image-upload-thumb {
    flex: 0 0 84px;
    width: 84px;
  }

  .products-media-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .products-media-dropzone {
    min-height: 68px;
    padding: 14px;
  }

  .products-media-link-modal-backdrop {
    padding: 16px;
  }

  .products-sqft-range-row {
    grid-template-columns: 1fr;
  }

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

  .settings-tabs {
    grid-template-columns: 1fr;
  }

  .plans-table {
    min-width: 760px;
  }

  .plans-modal-head {
    flex-direction: column;
    align-items: stretch;
  }

  .plans-modal-grid {
    grid-template-columns: 1fr;
  }

  .pricing-plans-toolbar {
    flex-direction: column;
  }

  .listing-filter-actions {
    justify-content: flex-start;
  }

  .listing-detail-topbar {
    justify-content: flex-start;
  }

  .listing-secondary-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-secondary-inline-actions {
    margin-left: 0;
    flex-wrap: wrap;
  }

  .listing-website-link-row,
  .property-website-link-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .listing-website-analytics-grid,
  .property-website-analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-website-editor-grid,
  .property-website-edit-grid {
    grid-template-columns: 1fr;
  }

  .property-websites-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-website-defaults-layout {
    grid-template-columns: 1fr;
  }

  .property-website-defaults-controls-row > label {
    flex: 1 1 220px;
    max-width: none;
  }

  .property-website-preview-frame {
    min-height: 520px;
  }

  .property-websites-create-actions {
    grid-column: 1 / -1;
  }

  .listing-media-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-media-toolbar-left {
    width: 100%;
  }

  .listing-media-order-hint {
    width: 100%;
    justify-content: center;
  }

  .listing-media-bulk-actions {
    width: 100%;
  }

  .listing-media-selection-sticky {
    width: calc(100vw - 24px);
    bottom: 12px;
  }

  .listing-media-selection-sticky-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .listing-media-selection-sticky-summary {
    white-space: normal;
    text-align: center;
  }

  .listing-media-selection-sticky-actions {
    justify-content: center;
  }

  .listing-order-totals-row {
    justify-content: flex-start;
  }

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

  .listing-marketing-modal-grid.listing-marketing-modal-grid--top {
    grid-template-columns: 1fr;
  }

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

  .listing-marketing-photo-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-editor-grid {
    grid-template-columns: 1fr;
  }

  .order-editor-top-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .order-editor-top-order-id {
    font-size: 30px;
  }

  .order-draft-address-grid {
    grid-template-columns: 1fr 1fr;
  }

  .address-map-preview-frame {
    height: 210px;
  }

  .order-with-appointment-layout {
    grid-template-columns: 1fr;
  }

  .order-with-appointment-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-search-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 760px) {
  .topbar {
    display: flex;
    gap: 8px;
    min-height: 58px;
    padding: 8px 10px;
  }

  .mobile-menu-toggle {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 999px;
  }

  .top-actions {
    display: none;
  }

  .mobile-header-theme-toggle {
    display: inline-flex;
    flex: 0 0 56px;
    width: 56px;
    min-width: 56px;
    min-height: 40px;
    border-radius: 999px;
    padding: 0 7px;
    align-items: center;
    justify-content: center;
  }

  .search-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  .search-wrap > input {
    min-height: 40px;
    margin-top: 0;
    border-radius: 999px;
    font-size: 14px;
    padding: 9px 13px;
  }

  .content-area {
    padding: 14px 10px calc(18px + env(safe-area-inset-bottom));
    max-width: 100vw;
    overflow-x: hidden;
  }

  .view-head h1 {
    font-size: 28px;
    line-height: 1.1;
  }

  .dashboard-mobile-quick-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin: -2px 0 2px;
    padding-bottom: 4px;
  }

  .dashboard-mobile-quick-actions .btn {
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    font-size: 15px;
  }

  #view-container,
  .panel,
  .panel-pad,
  .toolbar,
  .row-actions,
  .inline-form {
    min-width: 0;
    max-width: 100%;
  }

  .panel-pad {
    padding: 14px;
  }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .toolbar .row-actions {
    overflow-x: visible;
    overflow-y: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .toolbar .row-actions > * {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .calendar-view-layout,
  .calendar-main-panel,
  .calendar-main-layout,
  .calendar-month-scroll {
    min-width: 0;
    max-width: 100%;
  }

  .calendar-main-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-team-sidebar {
    order: 2;
  }

  .calendar-month-scroll {
    overflow-x: visible;
  }

  .calendar-month-scroll .calendar-weekdays {
    display: none;
  }

  .calendar-month-scroll .calendar-grid,
  .calendar-month-grid {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-month-grid {
    border-top: 1px solid var(--line);
    border-radius: 12px;
  }

  .calendar-month-cell {
    min-height: 0;
    padding: 10px;
    border-right: 0 !important;
    border-bottom: 1px solid #e2e7fa !important;
  }

  .calendar-month-grid .calendar-cell:nth-last-child(-n + 7) {
    border-bottom: 1px solid #e2e7fa !important;
  }

  .calendar-month-grid .calendar-cell:last-child {
    border-bottom: 0 !important;
  }

  .calendar-month-day-head {
    justify-content: flex-start;
  }

  .calendar-month-day-number {
    min-width: 28px;
  }

  .dashboard-calendar-panel {
    padding: 14px 12px 16px;
    overflow: hidden;
  }

  .dashboard-calendar-toolbar {
    margin-bottom: 6px;
  }

  .dashboard-calendar-toolbar h3 {
    display: none;
  }

  .dashboard-calendar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  .dashboard-calendar-month-label {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    color: #17213f;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
  }

  .dashboard-calendar-actions > button[data-action="dashboard-calendar-prev-month"],
  .dashboard-calendar-actions > button[data-action="dashboard-calendar-next-month"],
  .dashboard-calendar-actions > button[data-action="dashboard-calendar-current-month"] {
    grid-row: 1;
    min-width: 34px;
    min-height: 34px;
    border-radius: 999px;
    padding: 0 10px;
  }

  .dashboard-calendar-actions > button[data-action="dashboard-calendar-prev-month"],
  .dashboard-calendar-actions > button[data-action="dashboard-calendar-next-month"] {
    width: 34px;
    padding: 0;
    font-size: 0;
  }

  .dashboard-calendar-actions > button[data-action="dashboard-calendar-prev-month"]::before,
  .dashboard-calendar-actions > button[data-action="dashboard-calendar-next-month"]::before {
    font-size: 19px;
    line-height: 1;
  }

  .dashboard-calendar-actions > button[data-action="dashboard-calendar-prev-month"]::before {
    content: "‹";
  }

  .dashboard-calendar-actions > button[data-action="dashboard-calendar-next-month"]::before {
    content: "›";
  }

  .dashboard-calendar-actions > button[data-action="dashboard-calendar-current-month"] {
    font-size: 12px;
  }

  .dashboard-calendar-actions > button[data-action="calendar-toggle-reserve-form"],
  .dashboard-calendar-actions > button[data-action="calendar-day-add-booking"],
  .dashboard-calendar-actions > button[data-action="calendar-open-time-off-modal"] {
    min-height: 34px;
    border-radius: 999px;
    font-size: 12px;
    padding: 0 12px;
  }

  .dashboard-calendar-actions > button[data-action="calendar-toggle-reserve-form"] {
    grid-row: 1;
  }

  .dashboard-calendar-actions > button[data-action="calendar-day-add-booking"] {
    display: none;
  }

  .dashboard-calendar-actions > button[data-action="calendar-open-time-off-modal"] {
    grid-column: 1 / -1;
  }

  .dashboard-calendar-panel .calendar-main-layout {
    display: block;
  }

  .dashboard-calendar-panel .calendar-team-sidebar {
    display: none;
  }

  .dashboard-calendar-panel .calendar-month-scroll {
    overflow: visible;
  }

  .dashboard-calendar-panel .calendar-month-scroll .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 0;
  }

  .dashboard-calendar-panel .calendar-month-weekdays {
    border: 0;
    margin: 10px 0 8px;
    gap: 0;
  }

  .dashboard-calendar-panel .calendar-month-weekdays div {
    border: 0;
    background: transparent;
    color: #7b849f;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0;
    text-transform: none;
  }

  .dashboard-calendar-panel .calendar-month-scroll .calendar-grid,
  .dashboard-calendar-panel .calendar-month-grid {
    min-width: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px 0;
  }

  .dashboard-calendar-panel .calendar-month-grid {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .dashboard-calendar-panel .calendar-month-cell {
    min-height: 46px;
    border: 0 !important;
    border-radius: 12px;
    background: transparent;
    padding: 4px 1px;
    align-content: center;
    justify-items: center;
    gap: 3px;
    pointer-events: none;
  }

  .dashboard-calendar-panel .calendar-month-cell.muted {
    visibility: hidden;
  }

  .dashboard-calendar-panel .calendar-month-cell.is-weekend,
  .dashboard-calendar-panel .calendar-month-cell.is-today {
    background: transparent;
  }

  .dashboard-calendar-panel .calendar-month-day-head {
    display: grid;
    justify-content: center;
  }

  .dashboard-calendar-panel .calendar-month-day-number,
  .dashboard-calendar-panel .calendar-month-day-count,
  .dashboard-calendar-panel .calendar-month-events,
  .dashboard-calendar-panel .calendar-month-empty,
  .dashboard-calendar-panel .calendar-month-more {
    display: none;
  }

  .dashboard-calendar-panel .dashboard-calendar-mobile-day-button {
    appearance: none;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #222b44;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    width: 28px;
    height: 28px;
    padding: 0;
    pointer-events: auto;
    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  }

  .dashboard-calendar-panel .calendar-month-cell.is-today .dashboard-calendar-mobile-day-button {
    box-shadow: inset 0 0 0 1px rgba(77, 91, 255, 0.34);
  }

  .dashboard-calendar-panel .calendar-month-cell.is-selected .dashboard-calendar-mobile-day-button {
    background: #4d5bff;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 8px 16px rgba(77, 91, 255, 0.24);
  }

  .dashboard-calendar-panel .dashboard-calendar-event-dots {
    display: flex;
    justify-content: center;
    gap: 3px;
    min-height: 5px;
  }

  .dashboard-calendar-panel .dashboard-calendar-event-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--dashboard-calendar-dot-color, #4d5bff);
  }

  .dashboard-calendar-mobile-agenda {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e3e8f7;
  }

  .dashboard-calendar-mobile-agenda-head {
    display: grid;
    gap: 0;
  }

  .dashboard-calendar-mobile-agenda-head span {
    color: #77809c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .dashboard-calendar-mobile-agenda-head strong {
    color: #17213f;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
  }

  .dashboard-calendar-mobile-agenda-list {
    display: grid;
    gap: 10px;
  }

  .dashboard-calendar-agenda-card {
    appearance: none;
    width: 100%;
    border: 1px solid #dfe5f5;
    border-left: 4px solid var(--dashboard-calendar-agenda-color, #4d5bff);
    border-radius: 12px;
    background: #ffffff;
    color: inherit;
    display: block;
    padding: 12px 12px 12px 14px;
    text-align: left;
    font: inherit;
  }

  .dashboard-calendar-agenda-card.is-clickable {
    cursor: pointer;
  }

  .dashboard-calendar-agenda-card-main {
    display: grid;
    gap: 6px;
  }

  .dashboard-calendar-agenda-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #5e6680;
    font-size: 12px;
    font-weight: 800;
  }

  .dashboard-calendar-agenda-card strong {
    color: #1d263f;
    font-size: 14px;
    line-height: 1.35;
  }

  .dashboard-calendar-agenda-card p,
  .dashboard-calendar-agenda-empty {
    margin: 0;
    color: #6a7391;
    font-size: 12px;
    line-height: 1.4;
  }

  .dashboard-calendar-agenda-empty {
    border: 1px dashed #d5ddf0;
    border-radius: 12px;
    background: #f8faff;
    padding: 14px;
  }
}

@media (max-width: 700px) {
  .order-status-popover {
    width: min(220px, 92vw);
  }

  .listing-media-wrap {
    padding: 14px;
    gap: 10px;
  }

  .listing-secondary-sections {
    padding: 16px 14px 18px;
    gap: 18px;
  }

  .listing-secondary-section {
    gap: 10px;
  }

  .listing-media-wrap h3 {
    font-size: 20px;
  }

  .listing-accordion summary {
    padding: 12px 14px;
    min-height: 56px;
  }

  .listing-accordion-title {
    font-size: 17px;
  }

  .listing-accordion-subtitle {
    font-size: 10px;
  }

  .listing-accordion-badge {
    min-width: 28px;
    height: 22px;
    font-size: 11px;
  }

  .listing-customer-modal-search {
    grid-template-columns: 1fr;
  }

  .listing-customer-modal-search .btn {
    width: 100%;
  }

  .listing-media-group-modal {
    padding: 16px;
  }

  .listing-media-group-create {
    grid-template-columns: 1fr;
  }

  .listing-media-group-create .btn {
    width: 100%;
  }

  .mk-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .marketing-top .mk-logo-shell.has-logo {
    max-width: min(68vw, 280px);
    height: clamp(38px, 10vw, 48px);
  }

  .listing-secondary-row > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .listing-secondary-row-main {
    width: 100%;
    justify-content: space-between;
  }

  .listing-secondary-inline-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .listing-website-link-row,
  .property-website-link-row {
    grid-template-columns: 1fr;
  }

  .listing-website-link-row .btn,
  .property-website-link-row .btn {
    width: 100%;
  }

  .listing-website-status-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-website-analytics-grid,
  .property-website-analytics-grid {
    grid-template-columns: 1fr;
  }

  .property-websites-create-form {
    grid-template-columns: 1fr;
  }

  .property-website-defaults-controls-row {
    flex-direction: column;
    align-items: stretch;
  }

  .property-website-defaults-controls-row > label {
    max-width: none;
  }

  .property-website-defaults-actions {
    justify-content: center;
  }

  .property-website-preview-toolbar {
    flex-wrap: wrap;
    justify-content: center;
  }

  .property-website-preview-toggle {
    width: auto;
    justify-content: center;
  }

  .property-website-preview-frame {
    min-height: 420px;
  }

  .property-website-card-head {
    flex-direction: column;
  }

  .property-website-card-badges {
    justify-content: flex-start;
  }

  .property-website-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .listing-property-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-property-form-actions {
    justify-content: flex-start;
  }

  .listing-property-main-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .listing-property-read-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .listing-property-main-grid .listing-property-field-wide {
    grid-column: auto;
  }

  .listing-secondary-stats,
  .listing-order-meta-grid {
    grid-template-columns: 1fr;
  }

  .listing-order-item-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-order-item-main {
    width: 100%;
  }

  .listing-order-item-price {
    width: 100%;
    justify-content: flex-end;
  }

  .listing-order-totals-row {
    justify-content: flex-start;
    gap: 10px;
  }

  .listing-activity-list li {
    flex-direction: column;
  }

  .listing-activity-list time {
    white-space: normal;
  }

  .marketing-nav {
    width: 100%;
  }

  .marketing-nav > a[href^="#"] {
    display: none;
  }

  .marketing-doc .marketing-nav > a:not(.btn) {
    display: none;
  }

  .marketing-nav .btn {
    flex: 1;
  }

  .mk-stage-note-a {
    right: 10px;
    top: 10px;
  }

  .mk-stage-note-b {
    left: 10px;
    bottom: 10px;
  }

  .mk-metrics,
  .mk-process-grid,
  .mk-quote-row {
    grid-template-columns: 1fr;
  }

  .mk-app-grid,
  .mk-plan-grid,
  .mk-quote-row-4 {
    grid-template-columns: 1fr;
  }

  .mk-plan-card h3 {
    font-size: 24px;
  }

  .mk-plan-card-price {
    font-size: 34px;
  }

  .mk-plan-card-stats {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mk-chat-bubble {
    max-width: 100%;
  }

  .mk-stage-floating {
    max-width: 170px;
    min-width: 0;
  }

  .mk-map-canvas {
    min-height: 350px;
  }

  .mk-map-node {
    position: static;
    margin: 10px 10px 0;
    display: inline-flex;
  }

  .mk-map-line {
    display: none;
  }

  .mk-footer-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .mk-footer-links {
    order: 3;
  }

  .reports-filter-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .reports-tabs-row {
    align-items: stretch;
  }

  .reports-tabs-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }

  .reports-month-chart {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reports-hbar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .reports-kpi-card strong,
  .reports-kpi-card-primary strong {
    font-size: 32px;
  }

  .menu {
    display: grid;
    gap: 10px;
    overflow: visible;
    padding-bottom: 16px;
  }

  .menu-section,
  .menu-row-group,
  .menu-subgroup,
  .menu-submenu,
  .menu-subgroup-list {
    display: grid;
    gap: 5px;
    padding-left: 0;
  }

  .menu-heading,
  .menu-subheading {
    display: block;
  }

  .menu-parent::after {
    display: inline;
  }

  .menu-item,
  .menu-subitem {
    white-space: normal;
    width: 100%;
  }

  .topbar {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .top-actions {
    display: none;
  }

  .mobile-menu-toggle {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .search-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobile-header-theme-toggle {
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    min-height: 38px;
  }

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

  .view-head h1 {
    font-size: 29px;
  }

  .products-overview-group h2 {
    font-size: 29px;
  }

  .products-overview-grid {
    grid-template-columns: 1fr;
  }

  .products-overview-copy strong {
    font-size: 17px;
  }

  .products-overview-copy span {
    font-size: 14px;
  }

  .products-services-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }

  .products-services-tab {
    font-size: 16px;
  }

  .products-tabs-modal {
    width: min(900px, 100%);
  }

  .products-tabs-modal-head {
    flex-direction: column;
    align-items: stretch;
  }

  .products-tabs-categories-grid {
    grid-template-columns: 1fr;
  }

  .pricing-plans-head h2 {
    font-size: 34px;
  }

  .tax-rates-v2 .tax-rates-header-main {
    grid-template-columns: 1fr;
  }

  .tax-rates-v2 h2 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .tax-rates-v2 .tax-rates-header-cta {
    justify-content: flex-start;
  }

  .tax-rates-v2 .tax-rates-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coupons-redesign .coupons-hero {
    grid-template-columns: 1fr;
  }

  .coupons-redesign .coupons-hero h2 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .coupons-redesign .coupons-hero-cta {
    justify-content: flex-start;
  }

  .coupons-redesign .coupons-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .products-catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .products-catalog-toolbar-meta {
    margin-right: 0;
  }

  .products-catalog-toolbar-actions {
    justify-content: flex-start;
  }

  .products-catalog-filters {
    grid-template-columns: 1fr;
  }

  .products-categories-create-form {
    grid-template-columns: 1fr;
  }

  .products-filter-actions {
    grid-column: auto;
  }

  .products-list-table td {
    padding: 10px 10px;
  }

  .products-info-cell strong {
    font-size: 16px;
  }

  .products-info-cell p {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }

  .products-info-image,
  .products-info-image-placeholder {
    width: 74px;
    height: 56px;
  }

  .products-list-table .products-reorder-handle {
    width: 20px;
    height: 20px;
  }

  .products-editor-grid-two,
  .products-editor-grid-three,
  .products-editor-grid-four,
  .products-editor-grid-five,
  .products-editor-options-grid,
  .products-editor-flags {
    grid-template-columns: 1fr;
  }

  .package-products-grid {
    grid-template-columns: 1fr;
    max-height: 300px;
  }

  .products-sqft-range-row {
    grid-template-columns: 1fr;
  }

  .pricing-plan-library-card {
    padding: 16px;
  }

  .pricing-plan-library-card-body {
    grid-template-columns: 1fr;
  }

  .pricing-plan-library-card-updated {
    justify-items: start;
    min-width: 0;
  }

  .pricing-plan-library-card-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .pricing-plan-library-card-stats {
    gap: 12px;
    flex-wrap: wrap;
  }

  .pricing-plan-library-stat {
    min-width: 0;
    flex: 1 1 140px;
    padding-right: 0;
  }

  .pricing-plan-library-stat:not(:last-child) {
    border-right: 0;
  }

  .pricing-plan-library-card-description {
    max-width: 100%;
    white-space: normal;
  }

  .listing-filters {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .listing-filters-grid {
    grid-template-columns: 1fr;
  }

  .listing-more-filters-grid {
    grid-template-columns: 1fr;
  }

  .listing-filter-actions {
    justify-content: flex-start;
  }

  .listing-results-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .listing-results-pagination {
    width: 100%;
    justify-content: space-between;
    border-radius: 12px;
  }

  .listing-results-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

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

  .listing-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-customer-row {
    gap: 8px;
  }

  .listing-customer-header {
    flex-direction: column;
  }

  .listing-customer-header-actions {
    width: 100%;
    justify-content: center;
  }

  .listing-customer-list {
    grid-template-columns: 1fr;
  }

  .listing-customer-add-btn {
    width: auto;
  }

  .listing-customer-add-card {
    min-height: 78px;
  }

  .listing-customer-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .listing-gallery-grid {
    grid-template-columns: 1fr;
  }

  .listing-files-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .listing-files-row-main,
  .listing-files-row-right {
    width: 100%;
  }

  .listing-files-row-right {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .listing-files-actions {
    margin-left: auto;
  }

  .listing-marketing-card-grid {
    grid-template-columns: 1fr;
  }

  .listing-media-sort-select {
    width: 100%;
  }

  .listing-media-sort-select select {
    width: 100%;
    min-width: 0;
  }

  .listing-media-toolbar-left {
    display: grid;
    width: 100%;
    gap: 8px;
  }

  .listing-media-bulk-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .listing-media-bulk-actions .btn {
    width: 100%;
  }

  .listing-media-selection-sticky {
    width: calc(100vw - 14px);
    bottom: 10px;
  }

  .listing-media-selection-sticky-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .listing-media-selection-sticky-actions .btn {
    width: 100%;
  }

  .listing-asset-form {
    grid-template-columns: 1fr;
  }

  .listing-media-modal {
    padding: 16px;
  }

  .listing-marketing-modal {
    padding: 16px;
  }

  .listing-marketing-modal-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-marketing-modal-grid {
    grid-template-columns: 1fr;
  }

  .listing-marketing-customer-preview-card {
    grid-template-columns: 1fr;
  }

  .listing-marketing-template-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .listing-marketing-primary-photo-trigger {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .listing-marketing-primary-photo-thumb {
    width: 78px;
  }

  .listing-marketing-customer-preview-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .listing-marketing-primary-photo-cta {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .listing-marketing-photo-picker {
    max-height: min(86vh, 860px);
    padding: 12px;
  }

  .listing-marketing-photo-picker-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-marketing-photo-picker-grid {
    grid-template-columns: 1fr;
  }

  .listing-media-cloud-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .listing-delivery-form {
    grid-template-columns: 1fr;
  }

  .order-create-backdrop {
    padding: 12px;
  }

  .order-create-modal {
    padding: 18px;
  }

  .order-create-modal h3 {
    font-size: 29px;
  }

  .order-create-choice-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .order-create-choice-divider {
    display: none;
  }

  .quick-create-listing-modal {
    padding: 16px;
  }

  .quick-create-listing-modal-head h3 {
    font-size: 32px;
  }

  .quick-create-listing-grid {
    grid-template-columns: 1fr;
  }

  .quick-create-listing-actions {
    justify-content: stretch;
  }

  .quick-create-listing-actions .btn {
    width: 100%;
  }

  .order-draft-address-grid {
    grid-template-columns: 1fr;
  }

  .order-customer-modal-actions {
    justify-content: stretch;
  }

  .order-customer-modal-actions .btn {
    width: 100%;
  }

  .customer-create-grid-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-create-actions {
    justify-content: stretch;
  }

  .customer-create-actions .btn {
    width: 100%;
  }

  .order-discount-manual-grid {
    grid-template-columns: 1fr;
  }

  .order-discount-modal-actions {
    justify-content: stretch;
  }

  .order-discount-modal-actions .btn {
    width: 100%;
  }

  .address-map-preview-frame {
    height: 190px;
  }

  .order-appointments-modal {
    padding: 14px;
  }

  .order-appointments-modal h3 {
    font-size: 26px;
  }

  .order-appointments-modal-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .order-appointments-modal-head .btn {
    width: 100%;
  }

  .order-appointments-editor-layout {
    grid-template-columns: 1fr;
  }

  .order-appointments-slot-list {
    max-height: none;
    overflow: visible;
  }

  .order-appointments-slot-row {
    grid-template-columns: 1fr;
  }

  .order-appointments-slot-row .btn {
    width: 100%;
  }

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

  .order-appointments-create-modal-backdrop {
    padding: 10px;
  }

  .order-appointments-create-modal {
    width: 100%;
  }

  .order-appointments-create-modal-actions {
    justify-content: stretch;
  }

  .order-appointments-create-modal-actions .btn {
    width: 100%;
  }

  .order-with-appointment-modal {
    padding: 12px;
  }

  .calendar-reserve-modal {
    padding: 16px;
  }

  .calendar-order-editor-modal {
    padding: 10px;
  }

  .order-with-appointment-head h3 {
    font-size: 28px;
  }

  .order-with-appointment-details-grid {
    grid-template-columns: 1fr;
  }

  .order-search-form {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .order-filter-selects {
    min-width: 0;
    width: 100%;
  }

  .order-postponed-table {
    min-width: 640px;
  }
}

/* Public Order Form */
.order-form-page {
  --of-font-family: "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, "Arial Nova", Arial, "Segoe UI", sans-serif;
  --of-section-gap: clamp(14px, 1.4vw, 18px);
  --of-subsection-gap: clamp(10px, 1vw, 14px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--of-font-family);
  background:
    radial-gradient(740px 280px at 8% -4%, rgba(45, 99, 255, 0.16), transparent 60%),
    radial-gradient(620px 220px at 96% 4%, rgba(16, 185, 129, 0.13), transparent 64%),
    linear-gradient(180deg, #f7f9ff 0%, #eef3fb 100%);
}

.order-form-page * {
  font-family: inherit;
}

.order-form-page *::before,
.order-form-page *::after {
  font-family: inherit;
}

.order-form-page.of-embedded {
  min-height: 0;
  display: block;
  background: transparent;
}

.order-form-page.of-embedded .aurora {
  display: none;
}

.order-form-page.of-embedded .of-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 12px;
}

.order-form-page.of-embedded .panel,
.order-form-page.of-embedded .of-step-shell,
.order-form-page.of-embedded .of-stage {
  border-radius: 12px;
}

.order-form-page.of-embedded .of-header {
  border-color: #d8e2fb;
  box-shadow: none;
  padding: 16px;
}

.order-form-page.of-embedded .of-form-title {
  font-size: clamp(30px, 4.2vw, 42px);
}

.order-form-page.of-embedded .of-form-subtitle {
  font-size: 15px;
}

.order-form-page.of-embedded .of-step-shell {
  padding: 10px;
}

.order-form-page.of-embedded .of-stage {
  min-height: 0;
  box-shadow: none;
}

.order-form-page.of-embedded-customer-portal .of-services-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.order-form-page.of-embedded-customer-portal .of-services-layout.has-cart {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
}

.order-form-page.of-embedded-customer-portal .of-services-layout-side {
  position: sticky;
  top: 12px;
  right: auto;
  width: 100%;
  z-index: 10;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  margin: 0;
}

.order-form-page.of-embedded-customer-portal .of-services-layout-side:not(.has-items) {
  display: none;
}

.order-form-page.of-embedded-customer-portal .of-services-cart-drawer {
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(23, 37, 78, 0.14);
  backdrop-filter: none;
}

.order-form-page.of-embedded-customer-portal .of-services-cart-drawer.has-items {
  box-shadow: 0 14px 28px rgba(29, 46, 94, 0.16);
}

.of-shell {
  width: min(1180px, calc(100vw - 96px));
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(14px, 2.8vh, 24px) 0 clamp(18px, 4vh, 40px);
  flex: 0 1 auto;
  display: grid;
  gap: var(--of-section-gap);
  align-content: flex-start;
}

.order-form-page.of-route-directory .of-shell {
  align-content: center;
}

.order-form-page.of-route-directory .of-stage {
  min-height: 0;
}

.order-form-page.of-route-directory .of-header {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.order-form-page.of-route-detail .of-header {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 18px 20px;
}

.order-form-page.of-route-detail .of-header-pills,
.order-form-page.of-route-detail .of-header-side {
  display: none;
}

.order-form-page.of-route-detail .of-form-subtitle {
  max-width: 640px;
}

.order-form-page.of-route-directory .of-header-pills,
.order-form-page.of-route-directory .of-header-side {
  display: none;
}

.order-form-page.of-route-directory .of-form-subtitle {
  max-width: 620px;
}

.of-header {
  position: relative;
  overflow: hidden;
  border: 1px solid #d6e3ff;
  background:
    radial-gradient(320px 180px at 4% 8%, rgba(77, 91, 255, 0.13), transparent 72%),
    radial-gradient(360px 210px at 95% 100%, rgba(16, 185, 129, 0.13), transparent 76%),
    linear-gradient(132deg, #ffffff 0%, #f4f7ff 60%, #edf8f2 100%);
  box-shadow: 0 18px 34px rgba(21, 32, 58, 0.09);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.of-header-main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  align-content: start;
}

.of-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.of-brand-copy {
  display: grid;
  gap: 4px;
}

.of-logo-shell {
  width: 58px;
  height: 58px;
  border-radius: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: none;
}

.of-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

.of-logo-mark {
  font-family: inherit;
  font-weight: 800;
  color: #2e43d3;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.of-brand-name {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6d99;
  font-weight: 800;
}

.of-form-title {
  margin: 0;
  font-size: clamp(34px, 4.1vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.of-form-subtitle {
  margin: 0;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.35;
  color: #51648f;
}

.of-header-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.of-header-pill {
  border: 1px solid #ccd9fb;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #3c4fc5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 7px 12px;
}

.of-header-side {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.of-header-stat {
  border: 1px solid #cad9fb;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  padding: 12px;
  display: grid;
  gap: 4px;
  box-shadow: 0 10px 22px rgba(19, 32, 65, 0.08);
}

.of-header-stat strong {
  color: #23346c;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.of-header-stat span {
  color: #53658f;
  font-size: 13px;
  line-height: 1.35;
}

.of-step-shell {
  padding: 12px;
}

.of-step-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.of-step-pill {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d8e0f4;
  border-radius: 13px;
  padding: 8px 12px;
  background: #fff;
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  font-family: inherit;
  color: #334155;
  white-space: nowrap;
  cursor: default;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.of-step-pill.is-loading {
  border-color: #d7e2f7;
  background: linear-gradient(180deg, #fbfcff 0%, #f3f7ff 100%);
  color: #64748b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.of-step-pill > span {
  display: inline-flex;
  align-items: center;
}

.of-step-checkout-label {
  display: inline-flex;
  align-items: center;
}

.of-step-checkout-count-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.of-step-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid #c7d5fb;
  background: #f1f5ff;
  color: #2f45ba;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.of-step-cart-badge.is-highlight {
  border-color: #5364ff;
  background: #e8edff;
  color: #1d35c4;
}

.of-step-pill.is-cart-highlight {
  border-color: #6074ff;
  background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%);
  box-shadow: 0 0 0 3px rgba(86, 106, 255, 0.2);
  animation: of-step-cart-pulse 360ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

@keyframes of-step-cart-pulse {
  0% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-1px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.of-step-cart-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  border: 1px solid #d5def3;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 16px 34px rgba(20, 31, 74, 0.16);
  padding: 10px;
  display: grid;
  gap: 9px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 130ms ease, transform 130ms ease;
  pointer-events: none;
  z-index: 24;
}

.of-step-cart-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #fdfefe;
  border-left: 1px solid #d5def3;
  border-top: 1px solid #d5def3;
  transform: rotate(45deg);
}

.of-step-checkout-count-wrap:hover .of-step-cart-popover,
.of-step-checkout-count-wrap:focus-within .of-step-cart-popover {
  opacity: 1;
  transform: translateY(0);
}

.of-step-pill.active .of-step-cart-popover {
  display: none;
}

.of-step-cart-popover-title {
  display: block;
  margin: 0;
  color: #3f56c7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.of-step-cart-popover-list {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 6px;
}

.of-step-cart-popover-row {
  width: 100%;
  border: 1px solid #d7e2fb;
  border-radius: 10px;
  background: #f9fbff;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.of-step-cart-popover-row span {
  color: #2a3f71;
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.of-step-cart-popover-row strong {
  color: #1f3263;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.of-step-cart-popover-more {
  display: block;
  margin: -1px 0 0;
  color: #556997;
  font-size: 11px;
  font-weight: 700;
}

.of-step-cart-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #d7e2fb;
  padding-top: 8px;
  margin-top: 1px;
}

.of-step-cart-popover-footer span {
  color: #425784;
  font-size: 12px;
  font-weight: 700;
}

.of-step-cart-popover-footer strong {
  color: #1f3263;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.of-step-pill.is-clickable {
  cursor: pointer;
}

.of-step-pill.is-clickable:hover {
  border-color: #c5d4ff;
  background: #f4f7ff;
}

.of-step-pill.active {
  border-color: #4d5bff;
  color: #2d3cff;
  background: #ecf0ff;
}

.of-step-pill.done {
  border-color: #a8ead1;
  color: #0b9568;
  background: #e9faf2;
}

.of-step-pill.done.is-clickable:hover {
  border-color: #95ddbF;
  color: #0b9568;
  background: #e5f8ef;
}

.of-step-number {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  font-size: 11px;
}

.of-access-panel {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.of-access-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.of-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--of-section-gap);
}

.of-stage {
  min-height: 440px;
  border: 1px solid #d9e1f3;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(22, 28, 45, 0.08);
  display: grid;
  gap: var(--of-section-gap);
  align-content: start;
}

.of-stage > * {
  min-width: 0;
}

.of-stage-loading {
  min-height: 440px;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 30px;
}

.of-stage-loading-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #edf2ff 0%, #f7faff 100%);
  border: 1px solid #e2e9fb;
}

.of-stage-loading-bar-title {
  width: min(360px, 72%);
  height: 24px;
}

.of-stage-loading-bar-subtitle {
  width: min(240px, 48%);
  height: 14px;
}

.of-stage-loading-card {
  border: 1px solid #d9e1f3;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 16px 30px rgba(22, 28, 45, 0.05);
  padding: 24px;
  display: grid;
  gap: 14px;
}

.of-stage-loading-row {
  height: 58px;
  border-radius: 16px;
  border: 1px solid #e2e9fb;
  background: linear-gradient(90deg, #f8fbff 0%, #eef3ff 100%);
}

.of-stage-loading-row.is-short {
  width: min(240px, 40%);
}

.of-directory-intro,
.of-directory-hero {
  border: 1px solid #d6e2ff;
  border-radius: 18px;
  background: linear-gradient(132deg, #ffffff 0%, #f4f7ff 72%, #eef9f2 100%);
  padding: 20px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 0;
}

.of-directory-intro-main,
.of-directory-hero-main {
  display: grid;
  gap: 6px;
}

.of-directory-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4054d8;
}

.of-directory-intro h2,
.of-directory-hero h2 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 46px);
  letter-spacing: -0.02em;
}

.of-directory-intro .muted-note,
.of-directory-hero .muted-note {
  margin: 0;
  font-size: 16px;
  max-width: 740px;
}

.of-directory-intro-side {
  display: flex;
  align-items: center;
}

.of-directory-intro-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccd9ff;
  border-radius: 999px;
  background: #ffffff;
  color: #3f53cb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px;
}

.of-directory-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.of-directory-card {
  --of-accent: #4d5bff;
  --of-accent-soft: #eef2ff;
  border: 1px solid #d7e2ff;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(24, 38, 92, 0.08);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.of-directory-card-media {
  position: relative;
  aspect-ratio: 16 / 8;
  background: linear-gradient(140deg, var(--of-accent-soft) 0%, #e8f1ff 100%);
}

.of-directory-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 41, 0.05) 0%, rgba(8, 16, 41, 0.12) 100%);
  pointer-events: none;
}

.of-directory-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.of-directory-card-media-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--of-accent-soft) 0%, #edf4ff 60%, #e9f8ef 100%);
}

.of-directory-card-media-fallback span {
  color: #4b5a87;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 800;
}

.of-directory-card-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  background: rgba(18, 32, 77, 0.52);
  color: #f2f5ff;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.of-directory-card-index {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 1;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.of-directory-card-residential {
  --of-accent: #4363ff;
  --of-accent-soft: #e8eeff;
}

.of-directory-card-short-term {
  --of-accent: #1f9271;
  --of-accent-soft: #e6f7f1;
}

.of-directory-card-commercial {
  --of-accent: #6270b8;
  --of-accent-soft: #edf0ff;
}

.of-directory-card-general {
  --of-accent: #4d5bff;
  --of-accent-soft: #eef2ff;
}

.of-directory-card-body {
  padding: 16px;
  display: grid;
  gap: 10px;
}

.of-directory-card h3 {
  margin: 0;
  font-size: 24px;
}

.of-directory-card p {
  margin: 0;
}

.of-directory-card-helper {
  color: #5f6f97;
  font-size: 13px;
}

.of-directory-card-meta {
  display: grid;
  gap: 5px;
}

.of-directory-card-meta span {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: #647198;
}

.of-directory-card-meta code {
  display: block;
  border: 1px solid #d8e0f4;
  border-radius: 10px;
  background: #f8faff;
  color: #2f3f73;
  font-size: 12px;
  font-family: inherit;
  padding: 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.of-directory-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

.of-directory-card-cta {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  font-size: 18px;
}

.of-directory-card-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.of-directory-empty {
  margin-top: 12px;
}

.of-stage-head h2 {
  margin: 0 0 6px;
  font-size: clamp(23px, 3.5vw, 30px);
  letter-spacing: -0.02em;
}

.of-stage-head .muted-note {
  margin: 0;
  font-size: 14px;
}

.of-stage-head-with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.of-stage-head-copy {
  min-width: 0;
  flex: 1 1 420px;
}

.of-stage-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.of-stage-head-actions .btn {
  min-width: 200px;
}

.of-checkout-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.of-checkout-stage-copy {
  display: grid;
  gap: 6px;
}

.of-checkout-stage-account {
  border: 1px solid #d5def3;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8fbff 0%, #f4f8ff 100%);
  padding: 9px 12px;
  min-width: min(360px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.of-checkout-stage-account.is-authenticated {
  border-color: #c7daf6;
  background: linear-gradient(145deg, #eff8ff 0%, #f2f6ff 100%);
}

.of-checkout-stage-account-title {
  margin: 0;
  color: #1f315f;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.of-checkout-stage-account-subtitle {
  margin: 0;
  color: #5a6d9b;
  font-size: 13px;
  line-height: 1.3;
}

.of-checkout-stage-account-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.of-checkout-stage-account-inline-note {
  margin: 0;
  color: #5a6d9b;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.of-category-block + .of-category-block {
  margin-top: 12px;
}

.of-category-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.of-category-head h2 {
  margin: 0;
  font-size: 21px;
}

.of-category-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.of-order-type-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.of-order-type-btn {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 12px;
  display: grid;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}

.of-order-type-btn strong {
  font-size: 16px;
  color: var(--text);
}

.of-order-type-btn span {
  color: var(--muted);
  font-size: 12px;
}

.of-order-type-btn.active,
.of-order-type-btn:hover {
  border-color: var(--accent);
  background: #eef2ff;
}

.of-service-kind-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 12px;
  margin: 6px 0 16px;
  position: sticky;
  top: 10px;
  z-index: 22;
  padding: 8px 10px;
  border: 1px solid #d8e2fb;
  border-radius: 16px;
  background: rgba(247, 250, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  z-index: 30;
}

.of-service-kind-tab {
  border: 1px solid #d4def6;
  border-radius: 14px;
  background: #ffffff;
  color: #2f3c67;
  padding: 12px 20px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
  position: relative;
  z-index: 31;
}

.of-service-kind-tab small {
  border-radius: 999px;
  background: #eff3ff;
  color: #2d3fff;
  min-width: 30px;
  min-height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.of-service-kind-tab.active,
.of-service-kind-tab:hover {
  border-color: #4d5bff;
  background: #edf2ff;
  color: #2236cc;
}

.of-service-tabs {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  position: relative;
  z-index: 30;
}

.of-service-tab {
  border: 1px solid #d9e1f3;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  z-index: 31;
}

.of-service-tab small {
  border-radius: 999px;
  background: #edf2ff;
  color: #2e3dff;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

.of-service-tab.active,
.of-service-tab:hover {
  border-color: #4d5bff;
  color: #2d3cff;
  background: #edf2ff;
}

.of-category-image {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.of-product-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.of-product-card {
  border: 1px solid #cfdbf5;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
  min-height: 300px;
  align-items: stretch;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.of-product-card:hover {
  border-color: #9fb5ef;
  box-shadow: 0 18px 36px rgba(32, 42, 68, 0.1);
  transform: translateY(-2px);
}

.of-product-card.is-adding {
  animation: of-card-add-pop 240ms cubic-bezier(0.18, 0.85, 0.24, 1);
  border-color: #7e95ff;
  box-shadow: 0 20px 42px rgba(58, 78, 160, 0.2);
}

.of-product-card.is-selected {
  border-color: #9db2ff;
  box-shadow: 0 16px 34px rgba(52, 76, 152, 0.15);
}

@keyframes of-card-add-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-4px) scale(1.008);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.of-product-media {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-right: 1px solid #e2e8f8;
  background: #eef3ff;
  overflow: hidden;
  position: relative;
}

.of-product-media-gallery {
  isolation: isolate;
}

.of-product-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(149, 168, 223, 0.9);
  background: rgba(255, 255, 255, 0.9);
  color: #24376f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 10px 24px rgba(33, 47, 87, 0.2);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.of-product-media-nav:hover {
  background: rgba(255, 255, 255, 1);
  border-color: #6b84d8;
  color: #1d2f63;
}

.of-product-media-nav:active {
  transform: translateY(-50%) scale(0.96);
}

.of-product-media-nav-prev {
  left: 12px;
}

.of-product-media-nav-next {
  right: 12px;
}

.of-product-media-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #24376f;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(149, 168, 223, 0.8);
  z-index: 2;
}

.of-product-media img,
.of-product-media video,
.of-product-media iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.of-product-media img {
  object-fit: cover;
}

.of-product-media video {
  object-fit: cover;
  background: #0f172a;
}

.of-product-media iframe {
  border: 0;
  background: #fff;
}

.of-product-media-fallback {
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  background: linear-gradient(140deg, #26a6c5 0%, #4d5bff 50%, #7128c8 100%);
}

.of-product-media-fallback span {
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  font-family: inherit;
}

.of-product-media-fallback small {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.of-product-copy {
  padding: 18px 20px 16px;
  display: grid;
  gap: 11px;
  align-content: start;
  min-width: 0;
}

.of-product-copy h3 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 33px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.of-product-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.of-product-kind {
  border-radius: 999px;
  border: 1px solid #c6d3ff;
  background: #edf2ff;
  color: #3450e6;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  white-space: nowrap;
}

.of-product-submeta {
  margin: -2px 0 0;
  color: #4a5a87;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.of-product-description {
  margin: 0;
  color: #41507b;
  font-size: 16px;
  line-height: 1.58;
}

.of-product-description-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 7px;
  color: #41507b;
  font-size: 15px;
  line-height: 1.48;
}

.of-product-description-list li {
  margin: 0;
}

.of-product-description-list li::marker {
  color: #4d5bff;
}

.of-package-includes {
  display: grid;
  gap: 6px;
}

.of-package-includes-label {
  margin: 0;
  color: #415285;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.of-package-includes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.of-package-include-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  border: 1px solid #d4ddf5;
  background: #f5f8ff;
  padding: 6px 12px;
  color: #334375;
  font-size: 14px;
  font-weight: 700;
}

.of-package-include-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #cdd8f3;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3b4fb8;
}

.of-package-include-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.of-package-includes-more {
  color: #5f6e9f;
  font-size: 12px;
  font-weight: 700;
}

.of-product-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #e2e8f8;
  padding-top: 12px;
  margin-top: 2px;
}

.of-product-price-label {
  font-size: 17px;
  font-weight: 800;
  color: #273863;
  letter-spacing: -0.01em;
}

.of-product-price-label .pricing-plan-price-stack,
.of-summary-item strong .pricing-plan-price-stack {
  align-items: flex-end;
}

.of-summary-item strong .pricing-plan-price-stack,
.of-services-cart-row-side .pricing-plan-price-stack,
.of-step-cart-popover-row strong .pricing-plan-price-stack {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.of-summary-item strong .pricing-plan-price-original,
.of-services-cart-row-side .pricing-plan-price-original,
.of-step-cart-popover-row strong .pricing-plan-price-original {
  color: #66749a;
  font-size: 0.84em;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(102, 116, 154, 0.88);
  text-decoration-skip-ink: none;
}

.of-product-price-label .pricing-plan-price-current,
.of-summary-item strong .pricing-plan-price-current {
  font-size: inherit;
}

.of-add-btn {
  min-width: 146px;
  min-height: 44px;
}

.of-add-btn-remove {
  border-color: #efc6cf;
  background: linear-gradient(180deg, #fff8fa 0%, #ffeff2 100%);
  color: #a92d45;
}

.of-add-btn-remove:hover {
  border-color: #e2a2b2;
  background: linear-gradient(180deg, #fff1f5 0%, #ffe6ec 100%);
  color: #8d2339;
}

.of-selected-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.of-added-pill {
  min-height: 44px;
  border: 1px solid #badfc9;
  border-radius: 999px;
  background: linear-gradient(180deg, #effcf4 0%, #e6f7ee 100%);
  color: #1f7a4f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.of-remove-btn {
  min-width: 98px;
  min-height: 44px;
  border-color: #efc6cf;
  background: linear-gradient(180deg, #fff8fa 0%, #ffeff2 100%);
  color: #a92d45;
}

.of-remove-btn:hover {
  border-color: #e2a2b2;
  background: linear-gradient(180deg, #fff1f5 0%, #ffe6ec 100%);
  color: #8d2339;
}

.of-qty-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d2dcf2;
  border-radius: 999px;
  padding: 5px 10px;
  background: #fff;
}

.of-qty-control span {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
}

.of-qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #d2dcf2;
  background: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.of-qty-btn:hover {
  border-color: #4d5bff;
  color: #2d3cff;
}

.of-addon-shell {
  margin-top: 16px;
}

.of-address-field {
  display: grid;
  gap: 8px;
}

.of-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 800;
  color: #4a5a86;
}

.of-step-section-divider {
  margin: 12px 2px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #5c6c97;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.of-step-section-divider::before,
.of-step-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(177, 194, 231, 0) 0%, #c9d7f6 50%, rgba(177, 194, 231, 0) 100%);
}

.of-step-section-divider span {
  white-space: nowrap;
  color: #536491;
}

.of-property-entry-panel {
  border: 1px solid #d7e3ff;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 12px;
  display: grid;
  gap: 10px;
  box-shadow: 0 14px 28px rgba(29, 43, 78, 0.07);
}

.of-property-entry-head {
  border: 1px solid #dbe6fb;
  border-radius: 14px;
  background: linear-gradient(145deg, #fbfdff 0%, #f2f7ff 100%);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.of-property-entry-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4054d8;
}

.of-property-entry-head h3 {
  margin: 0;
  font-size: clamp(20px, 2.7vw, 26px);
  letter-spacing: -0.02em;
}

.of-property-entry-head .muted-note {
  margin: 0;
}

.of-property-form {
  border: 1px solid #dbe5fb;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px;
}

.of-property-form > .of-address-field {
  border: 1px solid #d8e3f9;
  border-radius: 13px;
  background: linear-gradient(180deg, #fcfdff 0%, #f7fbff 100%);
  padding: 10px;
}

.of-property-service-area-notice {
  border: 1px solid #f0c7c7;
  border-radius: 13px;
  background: linear-gradient(180deg, #fff8f8 0%, #fff3f3 100%);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.of-property-service-area-notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.of-property-service-area-notice h3 {
  margin: 0;
  font-size: 18px;
}

.of-property-service-area-notice .muted-note {
  margin: 0;
  color: #6e2b2b;
}

.of-pricing-first-banner {
  border: 1px solid #d4e1ff;
  border-radius: 16px;
  background: linear-gradient(132deg, #f7f9ff 0%, #eef4ff 60%, #e9f8ef 100%);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.of-pricing-first-banner + .of-property-entry-panel {
  margin-top: 0;
}

.of-pricing-first-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4054d8;
}

.of-pricing-first-banner h3 {
  margin: 0 0 4px;
  font-size: clamp(19px, 2.5vw, 24px);
  letter-spacing: -0.02em;
}

.of-pricing-first-banner .muted-note {
  margin: 0;
}

.of-pricing-first-actions {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 8px;
}

.of-pricing-first-actions .muted-note {
  text-align: right;
  max-width: 280px;
  font-size: 13px;
}

.of-property-sqft-row {
  max-width: min(560px, 100%);
}

.of-sqft-input {
  min-height: 58px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  padding-top: 10px;
  padding-bottom: 10px;
}

.of-sqft-input::-webkit-outer-spin-button,
.of-sqft-input::-webkit-inner-spin-button {
  margin: 0;
}

.of-sqft-input[type="number"] {
  -moz-appearance: textfield;
}

.of-address-input-wrap {
  position: relative;
}

.of-address-suggestions {
  position: absolute;
  inset: calc(100% + 8px) 0 auto;
  z-index: 26;
  border: 1px solid #cfdaf3;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 38px rgba(18, 25, 38, 0.16);
  max-height: 260px;
  overflow: auto;
  padding: 5px;
}

.of-address-suggestion {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 10px;
  padding: 10px 10px;
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.of-address-suggestion-main {
  font-weight: 700;
  color: #1f2937;
}

.of-address-suggestion-sub {
  font-size: 13px;
  color: #667085;
}

.of-address-suggestion-empty {
  padding: 10px 11px;
  color: #5f6f99;
  font-size: 13px;
  font-weight: 600;
}

.of-address-suggestion:hover,
.of-address-suggestion.active {
  background: #edf2ff;
}

.of-property-address-details {
  border: 1px solid #d5def3;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
  padding: 13px;
  display: grid;
  gap: 10px;
}

.of-property-address-details-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.of-property-address-details-head h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.of-property-address-details-head p {
  margin: 0;
}

.of-property-address-grid {
  row-gap: 12px;
}

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

.of-services-layout {
  position: relative;
  display: block;
}

.of-services-add-feedback {
  margin: 0 0 12px;
  border: 1px solid #b8e8cd;
  border-radius: 12px;
  background: linear-gradient(120deg, #f2fff6 0%, #ebfff5 60%, #e9f7ff 100%);
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  animation: of-services-add-feedback-in 180ms cubic-bezier(0.2, 0.8, 0.28, 1);
}

.of-services-add-feedback-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid #8bd7ab;
  background: #dcffe9;
  color: #117548;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  flex: 0 0 20px;
}

.of-services-add-feedback p {
  margin: 0;
  color: #1c4f3a;
  font-size: 14px;
  line-height: 1.3;
}

.of-services-add-feedback p strong {
  color: #165b3d;
}

@keyframes of-services-add-feedback-in {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.of-services-service-area-notice {
  border: 1px solid #f0c7c7;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff8f8 0%, #fff3f3 100%);
  padding: 10px 12px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.of-services-service-area-notice strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7f2c2c;
  white-space: nowrap;
}

.of-services-service-area-notice span {
  margin: 0;
  color: #6e2b2b;
  font-size: 14px;
  line-height: 1.35;
}

.of-services-layout-side {
  position: fixed;
  top: clamp(118px, 15vh, 156px);
  right: max(
    16px,
    calc((100vw - min(1180px, calc(100vw - 96px))) / 2 - min(300px, calc(100vw - 28px)) - 16px)
  );
  width: min(300px, calc(100vw - 28px));
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(18px, 0, 0);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.of-services-layout-side.has-items {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.of-services-layout-main {
  display: grid;
  gap: var(--of-subsection-gap);
}

.of-service-group {
  display: grid;
  gap: var(--of-subsection-gap);
}

.of-service-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.of-service-group-head h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.of-service-group-head span {
  border: 1px solid #d2defa;
  border-radius: 999px;
  background: #f2f6ff;
  color: #3450bf;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
}

.of-service-groups-secondary-shell {
  border-top: 1px dashed #d2def8;
  margin-top: 2px;
  padding-top: 12px;
  display: grid;
  gap: 14px;
}

.of-service-groups-secondary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.of-service-groups-secondary-head h3 {
  margin: 0;
  font-size: 16px;
}

.of-service-groups-secondary-head .muted-note {
  margin: 0;
}

.of-service-group-secondary + .of-service-group-secondary {
  border-top: 1px solid #e1e9fb;
  padding-top: 14px;
}

.of-services-footer {
  margin-top: 2px;
}

.of-services-cart-drawer {
  position: relative;
  width: 100%;
  border: 1px solid #cfdcf8;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.97) 0%, rgba(242, 247, 255, 0.98) 100%);
  box-shadow: 0 18px 34px rgba(20, 34, 66, 0.14);
  backdrop-filter: blur(8px);
  padding: 12px;
  display: grid;
  gap: 10px;
  transform-origin: center left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}

.of-services-cart-drawer.has-items {
  border-color: #bcd0ff;
  box-shadow: 0 22px 40px rgba(41, 61, 126, 0.18);
}

.of-services-cart-drawer.is-highlight {
  border-color: #7f95ff;
}

.of-services-cart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.of-services-cart-kicker {
  margin: 0;
  color: #3d55cc;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.of-services-cart-head h3 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.of-services-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #c7d5fb;
  background: #f1f5ff;
  color: #2f45ba;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  text-align: center;
}

.of-services-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.of-services-cart-row {
  border: 1px solid #dbe4fb;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.of-services-cart-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.of-services-cart-row strong {
  display: block;
  color: #22335f;
  font-size: 14px;
  line-height: 1.2;
}

.of-services-cart-row p {
  margin: 2px 0 0;
  color: #5f6f99;
  font-size: 12px;
}

.of-services-cart-row-side {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.of-services-cart-row > span,
.of-services-cart-row-side > span {
  color: #24397b;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.of-services-cart-remove {
  width: 24px;
  height: 24px;
  border: 1px solid #c7d5fb;
  border-radius: 999px;
  background: #f2f5ff;
  color: #4a5ed6;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.of-services-cart-remove:hover {
  border-color: #9eb3f4;
  background: #e8eeff;
}

.of-services-cart-includes {
  display: grid;
  gap: 4px;
}

.of-services-cart-includes-label {
  margin: 0;
  color: #5a6e9a;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.of-services-cart-include-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.of-services-cart-include-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #cfdbfb;
  border-radius: 999px;
  background: #f3f7ff;
  color: #304787;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
}

.of-services-cart-include-icon {
  width: 13px;
  height: 13px;
  border: 1px solid #bfd0fb;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #4a62d7;
  flex-shrink: 0;
}

.of-services-cart-include-icon svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.of-services-cart-includes-more {
  margin: 0;
  color: #5f7096;
  font-size: 11px;
  font-weight: 700;
}

.of-services-cart-more {
  margin: -2px 0 0;
  color: #5f6f99;
  font-size: 12px;
  font-weight: 700;
}

.of-services-cart-empty {
  margin: 0;
  border: 1px dashed #cedaf7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 12px;
  text-align: center;
  color: #5f6f99;
  font-size: 13px;
}

.of-services-cart-actions {
  display: grid;
  gap: 8px;
}

.of-services-cart-actions .btn {
  width: 100%;
  min-width: 0;
}

.of-map-card {
  border: 1px solid #d5def3;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
  padding: 11px;
  display: grid;
  gap: 8px;
}

.of-map-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.of-map-card-head h3 {
  margin: 0;
  font-size: 17px;
}

.of-map-card-head p {
  margin: 0;
}

.of-map-empty {
  margin: 0;
  border: 1px dashed #c7d4ef;
  border-radius: 12px;
  background: #fff;
  padding: 30px 12px;
  text-align: center;
}

.of-map-frame {
  width: 100%;
  height: 220px;
  border: 1px solid #d4ddf2;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.of-property-actions {
  margin-top: 0;
  border-top: 1px solid #dbe6fd;
  padding-top: 10px;
  justify-content: flex-end;
}

.of-property-actions .btn {
  min-width: 220px;
}

.of-review-card {
  border: 1px solid #d2def8;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  box-shadow: inset 0 -1px 0 rgba(45, 66, 168, 0.05);
}

.of-review-card-emphasis {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border-color: #cfdbf9;
}

.of-review-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.of-review-card p {
  margin: 0 0 3px;
}

.of-checkout-summary {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fbfcff;
}

.of-checkout-summary h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.of-summary-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e8fb;
}

.of-summary-card-head h3 {
  margin: 0;
}

.of-summary-card-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9d7ff;
  border-radius: 999px;
  background: #eef3ff;
  color: #2f45ba;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  white-space: nowrap;
}

.of-checkout-deposit-highlight {
  margin: 0 0 10px;
  border: 1px solid #b9c8ff;
  border-radius: 12px;
  background: linear-gradient(145deg, #eef2ff 0%, #f6f8ff 100%);
  padding: 12px;
  display: grid;
  gap: 4px;
}

.of-checkout-deposit-kicker {
  margin: 0;
  color: #3a4ecb;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.of-checkout-deposit-amount {
  margin: 0;
  color: #1d2c7d;
  font-size: clamp(28px, 4.8vw, 36px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.of-checkout-deposit-note {
  margin: 0;
  color: #3b4f7c;
  font-size: 13px;
  line-height: 1.4;
}

.of-checkout-deposit-note strong {
  color: #243772;
}

.of-pricing-locked-box {
  border-color: #c9d8ff;
  background: linear-gradient(140deg, #f7faff 0%, #f2f6ff 100%);
}

.of-pricing-locked-box.is-adjusted {
  border-color: #98afff;
  background:
    radial-gradient(280px 170px at 92% 12%, rgba(80, 102, 255, 0.12), transparent 76%),
    linear-gradient(140deg, #f4f8ff 0%, #edf3ff 100%);
}

.of-pricing-locked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.of-pricing-locked-kicker {
  margin: 0;
  color: #3550cf;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.of-pricing-locked-head span {
  border: 1px solid #c6d5ff;
  border-radius: 999px;
  background: #eef3ff;
  color: #2c45ba;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  white-space: nowrap;
}

.of-pricing-adjustment-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.of-pricing-adjustment-list li {
  border: 1px solid #d4e0ff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.of-pricing-adjustment-list li span {
  color: #23386f;
  font-size: 13px;
  font-weight: 700;
}

.of-pricing-adjustment-list li strong {
  color: #2442a7;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.of-pricing-adjustment-more {
  margin: 8px 0 0;
  color: #49608f;
  font-size: 12px;
  font-weight: 700;
}

.of-login-prompt {
  margin: 0 0 10px;
}

.of-day-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.of-day-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.of-day-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

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

.of-slot-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 6px 8px;
  font-weight: 600;
  cursor: pointer;
}

.of-slot-btn.selected,
.of-slot-btn:hover {
  border-color: var(--accent);
  background: #ebefff;
  color: var(--accent);
}

.of-checkout-form {
  gap: var(--of-subsection-gap);
}

.of-checkout-layout-redesign {
  gap: var(--of-section-gap);
}

.of-checkout-main-stack {
  gap: var(--of-section-gap);
}

.of-checkout-layout {
  display: block;
}

.of-checkout-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
  gap: 22px;
  align-items: start;
}

.of-checkout-main,
.of-checkout-aside {
  display: grid;
  gap: 12px;
}

.of-checkout-main-panel {
  border: 1px solid #cddaf8;
  border-radius: 18px;
  background: linear-gradient(180deg, #f9fbff 0%, #f3f8ff 100%);
  padding: 16px;
  box-shadow: 0 14px 30px rgba(35, 54, 146, 0.08);
}

.of-checkout-aside-panel {
  border: 1px solid #c6d5f7;
  border-radius: 18px;
  background: linear-gradient(180deg, #f5f9ff 0%, #edf3ff 100%);
  padding: 14px;
  box-shadow: 0 16px 30px rgba(38, 56, 146, 0.1);
  position: relative;
}

.of-checkout-aside-panel::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -12px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, #d4def8 12%, #d4def8 88%, transparent 100%);
  pointer-events: none;
}

.of-checkout-main-panel > .of-checkout-summary,
.of-checkout-main-panel > .of-pricing-locked-box {
  border-color: #cfdbf9;
  background: #ffffff;
  box-shadow: 0 3px 0 rgba(39, 61, 160, 0.04);
}

.of-checkout-aside-panel > .of-checkout-summary,
.of-checkout-aside-panel > .of-checkout-charge-now,
.of-checkout-aside-panel > .of-checkout-actions {
  border-color: #cfdbf9;
  background: #ffffff;
  box-shadow: 0 3px 0 rgba(39, 61, 160, 0.04);
}

.of-checkout-aside {
  position: sticky;
  top: 14px;
}

.of-checkout-layout .of-account-callout {
  margin-bottom: 0;
}

.of-checkout-legal-row {
  margin-top: var(--of-section-gap);
  border: 1px solid #cddaf8;
  border-radius: 18px;
  background: linear-gradient(180deg, #f9fbff 0%, #f3f7ff 100%);
  padding: 16px;
  box-shadow: 0 14px 30px rgba(35, 54, 146, 0.08);
}

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

.of-contact-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.of-contact-grid > * {
  min-width: 0;
}

.of-contact-stack {
  display: grid;
  gap: 8px;
}

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

.of-contact-grid-contact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.of-contact-field-half {
  grid-column: span 3;
}

.of-contact-field-third {
  grid-column: span 2;
}

.of-checkout-field {
  display: grid;
  gap: 6px;
  align-content: start;
}

.of-contact-field-label {
  display: block;
  color: #62709a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.of-checkout-field-label {
  color: #334c80;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.of-phone-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.of-input-hint {
  margin: 0;
  color: #6075a6;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.of-input-hint.is-success {
  color: #197b4e;
}

.of-input-hint.is-warning {
  color: #99681a;
}

.of-input-hint.is-error {
  color: #bd3f51;
}

.of-checkout-review-grid {
  margin-top: 6px;
  gap: 10px;
}

.of-checkout-review-grid-stacked {
  grid-template-columns: minmax(0, 1fr);
}

.of-checkout-step-card {
  padding: 16px;
  border-color: #d3ddf7;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.of-details-card {
  border: 1px solid #d5def3;
  border-radius: 14px;
  background: #fbfcff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.of-details-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.of-details-card-head h3 {
  margin: 0;
  font-size: 20px;
}

.of-details-card-head p {
  margin: 0;
}

.of-account-callout {
  border: 1px solid #d5def3;
  border-radius: 16px;
  background: linear-gradient(145deg, #f8fbff 0%, #f4f8ff 100%);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
}

.of-account-callout.is-authenticated {
  border-color: #c7daf6;
  background: linear-gradient(145deg, #eff8ff 0%, #f2f6ff 100%);
}

.of-account-callout.is-loading {
  background: linear-gradient(145deg, #f7f9ff 0%, #f3f6ff 100%);
}

.of-account-callout-compact {
  margin: 0;
}

.of-account-callout-copy {
  display: grid;
  gap: 4px;
}

.of-account-kicker {
  margin: 0;
  color: #4258cb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.of-account-callout-copy h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.of-account-callout-copy .muted-note {
  margin: 0;
}

.of-account-email {
  margin: 0;
  color: #233a6f;
  font-size: 13px;
  font-weight: 700;
}

.of-account-callout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.of-account-client-lookup {
  grid-column: 1 / -1;
  border-top: 1px solid #d9e3fb;
  padding-top: 9px;
  display: grid;
  gap: 7px;
}

.of-account-client-lookup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.of-account-client-lookup-head strong {
  color: #25396f;
  font-size: 13px;
}

.of-account-client-lookup-wrap input {
  min-height: 40px;
}

.of-checkout-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dee7fb;
}

.of-checkout-section-head h3 {
  margin: 0;
}

.of-checkout-section-head .muted-note {
  margin: 0;
  max-width: 42ch;
}

.of-login-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(11, 17, 38, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.of-login-modal {
  width: min(560px, calc(100vw - 28px));
  border: 1px solid #cdd8f9;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 12px;
  box-shadow: 0 26px 50px rgba(16, 24, 58, 0.24);
}

.of-login-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.of-login-modal-head h3 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.of-login-modal-head .muted-note {
  margin: 4px 0 0;
}

.of-login-form {
  gap: 10px;
}

.of-login-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.of-login-error {
  margin: 0;
  border: 1px solid #f1cbc5;
  border-radius: 10px;
  background: #fff3f1;
  color: #a53b2f;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 11px;
}

.of-embedded-payment-hosted {
  border: 1px solid #d4def7;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.of-embedded-payment-hosted .muted-note {
  margin: 0;
}

.of-embedded-payment-hosted .of-actions {
  justify-content: flex-start;
  gap: 8px;
}

.of-upsell-modal {
  width: min(760px, calc(100vw - 28px));
}

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

.of-upsell-row {
  border: 1px solid #d5def3;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.of-upsell-row-copy {
  display: grid;
  gap: 4px;
}

.of-upsell-row-copy h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.of-upsell-row-copy .muted-note {
  margin: 0;
}

.of-upsell-row-price {
  margin: 0;
  color: #1f3f96;
  font-weight: 700;
}

.of-custom-fields {
  border: 1px solid #d5def3;
  border-radius: 14px;
  padding: 12px;
  background: #fbfcff;
  display: grid;
  gap: 10px;
}

.of-custom-fields h3 {
  margin: 0;
  font-size: 20px;
}

.of-custom-fields-grid {
  display: grid;
  gap: 10px;
}

.of-custom-field-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.of-custom-field-help {
  margin: 0;
  font-size: 12px;
}

.of-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.of-radio-option {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.of-legal-box {
  border-color: #d3ddf7;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.of-referral-coupon-box {
  border-color: #d5def3;
}

.of-referral-coupon-box .of-referral-coupon-item {
  border: 0;
  background: transparent;
  padding: 0;
}

.of-checkout-referral-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.of-checkout-referral-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.of-referral-coupon-item {
  border: 1px solid #d7e2f8;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.of-checkout-coupon-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.of-coupon-apply-col {
  display: grid;
  gap: 6px;
}

.of-coupon-apply-label {
  display: block;
  height: 18px;
}

.of-coupon-apply-btn {
  min-width: 124px;
  min-height: 42px;
}

.of-coupon-compact-box {
  border-color: #d5def3;
  background: #fbfdff;
  padding: 10px 11px;
  gap: 8px;
}

.of-checkout-coupon-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.of-checkout-coupon-compact-grid label {
  margin-bottom: 0;
}

.of-coupon-apply-btn-compact {
  min-width: 96px;
  min-height: 40px;
  padding: 0 14px;
}

.of-coupon-feedback {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

.of-coupon-feedback.is-success {
  color: #188253;
}

.of-coupon-feedback.is-error {
  color: #c5334b;
}

.of-checkout-summary-card {
  border-color: #ccd8fb;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(38, 56, 146, 0.09);
}

.of-payment-box {
  border-color: #cedcf8;
  background: #f8fbff;
}

.of-checkout-payment-panel {
  border-color: #ccd8fb;
  background: linear-gradient(180deg, #fdfdff 0%, #f7faff 100%);
  box-shadow: 0 8px 20px rgba(35, 54, 146, 0.08);
  display: grid;
  gap: 10px;
}

.of-payment-box .of-radio-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.of-payment-provider-group .of-radio-option {
  min-height: 44px;
}

.of-payment-box .of-radio-option {
  border: 1px solid #cdd9f8;
  border-radius: 12px;
  background: #ffffff;
  padding: 9px 11px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.of-payment-box .of-radio-option span {
  font-size: 14px;
}

.of-payment-profile-options {
  display: grid;
  gap: 8px;
}

.of-payment-profile-option {
  border: 1px solid #cdd9f8;
  border-radius: 12px;
  background: #ffffff;
  padding: 9px 11px;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.of-payment-profile-option.is-active {
  border-color: #5f72f7;
  box-shadow: 0 0 0 1px rgba(95, 114, 247, 0.15) inset;
  background: #f5f8ff;
}

.of-payment-profile-option input[type="radio"] {
  margin: 0;
}

.of-payment-profile-copy {
  display: grid;
  gap: 2px;
}

.of-payment-profile-copy strong {
  font-size: 14px;
  line-height: 1.2;
  color: #1f315f;
}

.of-payment-profile-copy small {
  font-size: 12px;
  line-height: 1.25;
  color: #5a6d9b;
}

.of-card-entry-shell {
  border: 1px solid #d4def8;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.of-card-entry-shell.is-saved {
  background: #f5f8ff;
}

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

.of-card-entry-grid label {
  display: grid;
  gap: 5px;
}

.of-card-saved-line {
  margin: 0;
  color: #1f315f;
}

.of-summary-item.is-discount strong {
  color: #1b8b59;
}

.of-save-card-row {
  border: 1px solid #d6e0f8;
  border-radius: 10px;
  background: #f8faff;
  padding: 7px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.of-save-card-row.is-disabled {
  opacity: 0.72;
}

.of-save-card-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #233f7f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.of-save-card-inline.is-disabled {
  cursor: not-allowed;
}

.of-save-card-inline input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.of-save-card-row .muted-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.of-tip-box {
  border-color: #ccd8fb;
  background: linear-gradient(180deg, #fdfdff 0%, #f7faff 100%);
  box-shadow: 0 8px 20px rgba(35, 54, 146, 0.06);
  display: grid;
  gap: 4px;
  padding: 7px 9px;
}

.of-tip-box .of-checkout-section-head {
  align-items: center;
  gap: 6px;
}

.of-tip-box .of-checkout-section-head h3 {
  font-size: 15px;
}

.of-tip-box .of-checkout-section-head .muted-note {
  font-size: 12px;
}

.of-tip-inline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.of-tip-options {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.of-tip-option {
  position: relative;
  border: 1px solid #cdd9f8;
  border-radius: 9px;
  background: #ffffff;
  min-height: 32px;
  min-width: 0;
  padding: 4px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  flex: 0 0 auto;
  min-inline-size: 60px;
}

.of-tip-option.is-active {
  border-color: #5f72f7;
  background: #eef3ff;
  box-shadow: 0 0 0 1px rgba(95, 114, 247, 0.2) inset;
}

.of-tip-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.of-tip-option-value {
  font-size: 12px;
  line-height: 1.1;
  font-weight: 800;
  color: #213464;
}

.of-tip-custom-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cdd9f8;
  border-radius: 9px;
  background: #ffffff;
  min-height: 32px;
  padding: 3px 7px;
  color: #2f4479;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
  width: 132px;
  justify-content: space-between;
  overflow: hidden;
}

.of-tip-custom-row {
  display: contents;
}

.of-tip-custom-inline.is-active {
  border-color: #5f72f7;
  background: #eef3ff;
  box-shadow: 0 0 0 1px rgba(95, 114, 247, 0.2) inset;
}

.of-tip-custom-inline input {
  width: 74px;
  min-width: 0;
  min-height: 28px;
  text-align: right;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1.2;
  box-sizing: border-box;
  appearance: none;
  -moz-appearance: textfield;
}

.of-tip-custom-inline input::-webkit-outer-spin-button,
.of-tip-custom-inline input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.of-coupon-input-wrap {
  display: block;
  margin: 0;
}

.of-tip-added-inline {
  margin: 0;
  color: #34508e;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  flex: 0 0 auto;
  min-inline-size: 64px;
}

.of-legal-docs {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.of-legal-doc {
  border: 1px solid #d8e1f4;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px 10px;
}

.of-legal-doc summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #23386e;
}

.of-legal-doc-body {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: #334155;
  max-height: 220px;
  overflow: auto;
}

.of-legal-doc-body p,
.of-legal-doc-body ul,
.of-legal-doc-body ol {
  margin: 0 0 8px;
}

.of-legal-doc-body p:last-child,
.of-legal-doc-body ul:last-child,
.of-legal-doc-body ol:last-child {
  margin-bottom: 0;
}

.of-legal-doc-body ul,
.of-legal-doc-body ol {
  padding-left: 18px;
}

.of-legal-doc-body li + li {
  margin-top: 4px;
}

.of-legal-doc-body a {
  color: #324fb2;
  text-decoration: underline;
}

.of-legal-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #dce4f8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.of-legal-links-shell {
  margin: 0;
  min-width: 220px;
  flex: 1 1 280px;
}

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

.of-legal-checkbox {
  margin: 0;
  border: 1px solid #cfdbfa;
  border-radius: 999px;
  background: #ffffff;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  max-width: 100%;
  width: fit-content;
  flex: 0 1 auto;
}

.of-legal-checkbox:hover {
  border-color: #b8c9f8;
  background: #fafdff;
}

.of-legal-checkbox input {
  margin: 0;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.of-legal-checkbox-copy {
  display: inline-block;
  color: #2d3f78;
  font-size: 13px;
  line-height: 1.35;
}

.of-actions {
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.of-actions .btn {
  min-height: 45px;
  min-width: 164px;
}

.of-checkout-actions {
  margin-top: 0;
  border: 1px solid #cdd9fb;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.of-checkout-actions .btn {
  min-width: 0;
  width: 100%;
}

.of-checkout-charge-now {
  border: 1px solid #cdd9fd;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  padding: 12px 14px;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.of-checkout-charge-now-copy {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.of-checkout-charge-now-label {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4861db;
}

.of-checkout-charge-now-note {
  margin: 3px 0 0;
}

.of-checkout-charge-now-amount {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 44px);
  line-height: 1;
  font-weight: 900;
  color: #1f3172;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.of-review-primary {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1f2d52;
  font-weight: 800;
}

.of-review-inline {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #d5def3;
}

.of-summary h2 {
  margin: 0 0 10px;
}

.of-summary-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.of-summary-item {
  border: 1px solid #d7e2fb;
  border-radius: 11px;
  background: #f9fbff;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.of-summary-item-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.of-summary-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.of-summary-item-head span {
  color: #1f315f;
  font-size: 14px;
  font-weight: 700;
}

.of-summary-item-head small {
  border: 1px solid #c8d8ff;
  border-radius: 999px;
  background: #eef3ff;
  color: #3650bc;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
}

.of-summary-package-includes {
  display: grid;
  gap: 6px;
}

.of-summary-package-includes-label {
  margin: 0;
  color: #556997;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
}

.of-summary-package-include-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.of-summary-package-include-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #cfdbfb;
  border-radius: 999px;
  background: #f3f7ff;
  color: #304787;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
}

.of-summary-package-include-icon {
  width: 14px;
  height: 14px;
  border: 1px solid #bfd0fb;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #4a62d7;
  flex-shrink: 0;
}

.of-summary-package-include-icon svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.of-summary-package-includes-more {
  margin: 0;
  color: #4b618f;
  font-size: 11px;
  font-weight: 700;
}

.of-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.of-summary-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.of-summary-meta-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d0dcfb;
  border-radius: 999px;
  background: #f4f7ff;
  color: #3850af;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
}

.of-summary-item strong,
.of-summary-row strong {
  text-align: right;
}

.of-summary-item strong {
  color: #1f3263;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  padding-top: 2px;
}

.of-success {
  padding: 18px;
}

.of-success h2 {
  margin: 0 0 8px;
}

/* Storefront builder */
.storefront-tabs-shell {
  padding: 10px 12px;
}

.storefront-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.storefront-tab-btn {
  border: 1px solid #cad4f2;
  border-radius: 10px;
  background: #f4f7ff;
  color: #364b82;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.storefront-tab-btn:hover {
  border-color: #97abeb;
  background: #e9efff;
}

.storefront-tab-btn.active {
  border-color: #4d5bff;
  background: #e9edff;
  color: #2f3fff;
}

.storefront-order-form-modal {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 20px;
  border: 1px solid #c9d7ff;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
  box-shadow: 0 24px 52px rgba(31, 57, 151, 0.16);
}

.storefront-order-form-shell {
  display: grid;
  gap: 16px;
}

.storefront-order-form-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #d5e1ff;
  border-radius: 16px;
  background: linear-gradient(132deg, #ffffff 0%, #f4f7ff 56%, #edf8f2 100%);
  padding: 16px 18px;
}

.storefront-order-form-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4a5fe6;
}

.storefront-order-form-modal-head h3 {
  margin: 4px 0 0;
  font-size: 34px;
  line-height: 1.04;
}

.storefront-order-form-modal-head p {
  margin: 8px 0 0;
  max-width: 760px;
}

.storefront-order-form-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.storefront-order-form-form {
  gap: 16px;
}

.storefront-order-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  align-items: start;
}

.storefront-order-form-card {
  border: 1px solid #d6e1ff;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.storefront-order-form-card h4 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}

.storefront-order-form-card h5 {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  color: #2f3f73;
}

.storefront-order-form-card-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.storefront-order-form-card-headline .muted-note {
  margin: 5px 0 0;
}

.storefront-order-form-basic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.storefront-order-form-basic-grid label {
  margin: 0;
}

.storefront-order-form-card-full {
  grid-column: 1 / -1;
}

.storefront-order-form-card-category {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

.storefront-order-form-card-payments {
  gap: 12px;
}

.storefront-order-form-subsection {
  display: grid;
  gap: 10px;
}

.storefront-order-form-thumbnail-block,
.storefront-payment-method-panel {
  border: 1px solid #d8e3ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  padding: 12px;
}

.storefront-order-form-thumbnail-head {
  margin-bottom: -2px;
}

.storefront-order-form-thumbnail-preview {
  border: 1px solid #d9e3ff;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f8ff;
}

.storefront-order-form-thumbnail-preview img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.storefront-order-form-thumbnail-note {
  margin: -2px 0 2px;
}

.storefront-order-form-modal .products-image-upload-shell.is-compact {
  --products-image-preview-height: clamp(140px, 21vh, 220px);
  grid-template-columns: minmax(0, 1fr) 84px;
}

.storefront-order-form-modal .products-image-upload-shell.is-compact .products-image-upload-main {
  min-height: 140px;
}

.storefront-order-form-modal .products-image-upload-side {
  gap: 6px;
}

.storefront-order-form-inline-toggle {
  border: 1px solid #d3deff;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #2f3f73;
  font-weight: 600;
}

.storefront-order-form-inline-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--accent);
}

.storefront-service-tab-order {
  border: 1px solid #d5e0ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  padding: 12px;
}

.storefront-service-tab-order h5 {
  margin: 0;
  font-size: 15px;
  color: #2f3f73;
}

.storefront-service-tab-order .muted-note {
  margin: 4px 0 0;
}

.storefront-service-tab-order-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.storefront-service-tab-order-grid label {
  margin: 0;
}

.storefront-service-tab-order-grid select {
  margin-top: 4px;
}

.storefront-payment-method-list {
  display: grid;
  gap: 10px;
}

.storefront-payment-method-toggle {
  border: 1px solid #d3deff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.storefront-payment-method-toggle:hover {
  border-color: #b9cbff;
  box-shadow: 0 8px 18px rgba(77, 91, 255, 0.08);
}

.storefront-payment-method-toggle.is-active {
  border-color: #9bb3ff;
  background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%);
}

.storefront-payment-method-toggle.is-disabled {
  border-style: dashed;
  background: #f6f8ff;
  box-shadow: none;
  opacity: 0.86;
}

.storefront-payment-method-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}

.storefront-payment-method-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  margin-top: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--accent);
}

.storefront-payment-method-toggle input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.storefront-payment-method-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.storefront-payment-method-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.storefront-payment-method-copy strong {
  color: #2f3f73;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.storefront-payment-method-badge {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border: 1px solid transparent;
}

.storefront-payment-method-badge.is-active {
  background: #e8f8ef;
  border-color: #b9e8cd;
  color: #157347;
}

.storefront-payment-method-badge.is-idle {
  background: #eff3ff;
  border-color: #d3ddff;
  color: #3e4f80;
}

.storefront-payment-method-badge.is-disabled {
  background: #f5f6fa;
  border-color: #e2e6f2;
  color: #6b7596;
}

.storefront-payment-method-toggle .muted-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}

.storefront-order-form-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.storefront-order-form-section-head h5 {
  margin: 0;
}

.storefront-order-form-section-head span {
  border: 1px solid #d3dcff;
  border-radius: 999px;
  background: #f7f9ff;
  color: #3f4e7d;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
}

.storefront-category-grid {
  display: grid;
  gap: 10px;
}

.storefront-category-row {
  border: 1px solid #d9e2ff;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.storefront-category-row-meta h4 {
  margin: 0;
  font-size: 14px;
}

.storefront-category-row-meta .muted-note {
  margin: 2px 0 0;
  font-size: 12px;
}

.storefront-category-row-controls {
  gap: 8px;
}

.storefront-category-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin: 0;
}

.storefront-deposit-override-card {
  border: 1px solid #d4e0ff;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #fbfcff 0%, #f4f7ff 100%);
  display: grid;
  gap: 10px;
}

.storefront-deposit-override-card.is-enabled {
  border-color: #afc4ff;
  box-shadow: 0 10px 20px rgba(77, 91, 255, 0.08);
}

.storefront-deposit-override-head {
  display: grid;
  gap: 4px;
}

.storefront-deposit-override-head .muted-note {
  margin: 0;
}

.storefront-deposit-override-toggle {
  border: 1px solid #d6e1ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
}

.storefront-deposit-override-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--accent);
}

.storefront-deposit-override-toggle > span {
  display: grid;
  gap: 2px;
}

.storefront-deposit-override-toggle strong {
  color: #2f3f73;
  font-size: 14px;
}

.storefront-deposit-override-toggle .muted-note {
  margin: 0;
  font-size: 12px;
}

.storefront-deposit-override-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 260px);
}

.storefront-deposit-percent-field {
  position: relative;
  margin-top: 4px;
}

.storefront-deposit-percent-field input {
  margin-top: 0;
  padding-right: 34px;
}

.storefront-deposit-percent-field span {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #55659a;
  font-weight: 700;
  pointer-events: none;
}

.storefront-deposit-override-summary {
  border: 1px dashed #c7d4ff;
  border-radius: 10px;
  background: #f8faff;
  padding: 8px 10px;
  line-height: 1.4;
}

.storefront-order-form-advanced {
  border: 1px dashed #c7d3ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px 12px;
  display: grid;
  gap: 10px;
}

.storefront-order-form-advanced summary {
  cursor: pointer;
  font-weight: 700;
  color: #3c4b78;
}

.storefront-order-form-actions {
  justify-content: space-between;
  border-top: 1px solid #dbe4ff;
  padding: 14px 2px 2px;
  margin-top: 4px;
}

.storefront-share-cell {
  display: grid;
  gap: 6px;
}

.storefront-share-link {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  text-decoration: none;
}

.storefront-copy-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.storefront-forms-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid #cdd8ff;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
  display: grid;
  gap: 14px;
}

.storefront-forms-shell::before {
  content: "";
  position: absolute;
  inset: -52% auto auto -96px;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(77, 91, 255, 0.16) 0%, rgba(77, 91, 255, 0) 72%);
  pointer-events: none;
}

.storefront-forms-shell > * {
  position: relative;
  z-index: 1;
}

.storefront-forms-hero {
  border: 1px solid #d8e1ff;
  border-radius: 16px;
  background: linear-gradient(140deg, #ffffff 0%, #f3f6ff 58%, #edf9f2 100%);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.storefront-forms-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4a5fe6;
}

.storefront-forms-hero h3 {
  margin: 0;
  font-size: 34px;
  line-height: 1.04;
}

.storefront-forms-copy {
  margin: 8px 0 0;
  max-width: 760px;
}

.storefront-forms-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.storefront-directory-display-modal {
  width: min(640px, 100%);
  padding: 0;
  overflow: hidden;
}

.storefront-directory-display-stack {
  gap: 14px;
  padding: 18px;
}

.storefront-directory-display-head {
  border: 1px solid #d9e2ff;
  border-radius: 14px;
  background: linear-gradient(140deg, #ffffff 0%, #f5f8ff 58%, #eef9f2 100%);
  padding: 14px;
  display: grid;
  gap: 6px;
}

.storefront-directory-display-head .storefront-forms-kicker {
  margin: 0;
}

.storefront-directory-display-modal h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
}

.storefront-directory-display-modal p {
  margin: 0;
}

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

.storefront-directory-setting-card {
  border: 1px solid #d7e1ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.storefront-directory-setting-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.storefront-directory-setting-copy strong {
  color: #1f2a52;
  font-size: 16px;
  line-height: 1.2;
}

.storefront-directory-setting-copy .muted-note {
  font-size: 13px;
  line-height: 1.45;
}

.storefront-directory-setting-control {
  position: relative;
  width: 50px;
  height: 28px;
  flex: 0 0 auto;
}

.storefront-directory-setting-control input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.storefront-directory-setting-switch {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid #c6d4ff;
  background: #edf2ff;
  transition: background 120ms ease, border-color 120ms ease;
}

.storefront-directory-setting-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(31, 57, 151, 0.2);
  transition: transform 120ms ease;
}

.storefront-directory-setting-control input[type="checkbox"]:checked + .storefront-directory-setting-switch {
  background: linear-gradient(135deg, #4d5bff 0%, #6f8dff 100%);
  border-color: #4d5bff;
}

.storefront-directory-setting-control
  input[type="checkbox"]:checked
  + .storefront-directory-setting-switch::after {
  transform: translateX(22px);
}

.storefront-directory-setting-control input[type="checkbox"]:focus-visible + .storefront-directory-setting-switch {
  outline: 2px solid rgba(77, 91, 255, 0.35);
  outline-offset: 2px;
}

.storefront-directory-display-footnote {
  border: 1px dashed #cbd8ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px 12px;
}

.storefront-directory-display-actions {
  justify-content: flex-end;
  border-top: 1px solid #dce5ff;
  padding-top: 12px;
}

html[data-theme="dark"] .storefront-directory-display-head {
  border-color: #385488;
  background: linear-gradient(140deg, #132346 0%, #112243 58%, #112c37 100%);
}

html[data-theme="dark"] .storefront-directory-setting-card {
  border-color: #3d598f;
  background: linear-gradient(180deg, #122242 0%, #10203d 100%);
}

html[data-theme="dark"] .storefront-directory-setting-copy strong {
  color: #e3ecff;
}

html[data-theme="dark"] .storefront-directory-setting-copy .muted-note {
  color: #9fb3de;
}

html[data-theme="dark"] .storefront-directory-setting-switch {
  border-color: #44639d;
  background: #14294d;
}

html[data-theme="dark"] .storefront-directory-setting-switch::after {
  background: #dce7ff;
  box-shadow: 0 2px 8px rgba(2, 7, 19, 0.45);
}

html[data-theme="dark"] .storefront-directory-display-footnote {
  border-color: #456298;
  background: #122442;
  color: #9fb3de;
}

html[data-theme="dark"] .storefront-directory-display-actions {
  border-top-color: #3a5488;
}

.storefront-forms-stats {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.storefront-forms-stat {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  text-align: center;
}

.storefront-forms-stat strong {
  font-size: 21px;
  line-height: 1;
  color: #2f3fff;
}

.storefront-forms-stat span {
  font-size: 12px;
  color: #667091;
}

.storefront-forms-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.storefront-form-card {
  border: 1px solid #d6e0ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow: 0 8px 18px rgba(31, 57, 151, 0.06);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.storefront-form-card.is-dragging {
  opacity: 0.6;
  box-shadow: 0 12px 24px rgba(31, 57, 151, 0.14);
}

.storefront-form-card.storefront-order-form-drop-before {
  border-color: #4d5bff;
  box-shadow:
    inset 0 3px 0 #4d5bff,
    0 8px 18px rgba(31, 57, 151, 0.1);
}

.storefront-form-card.storefront-order-form-drop-after {
  border-color: #4d5bff;
  box-shadow:
    inset 0 -3px 0 #4d5bff,
    0 8px 18px rgba(31, 57, 151, 0.1);
}

.storefront-form-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.storefront-form-card-head h4 {
  margin: 0;
  font-size: 18px;
}

.storefront-form-card-head .muted-note {
  margin: 6px 0 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.storefront-form-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.storefront-form-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  font-size: 13px;
  color: #495579;
}

.storefront-form-card-meta strong {
  color: #25386e;
}

.storefront-form-card-actions {
  display: grid;
  grid-template-columns: 40px repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.storefront-form-card-actions .btn {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
}

.storefront-order-form-drag-handle-compact {
  padding: 8px 0;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.storefront-order-form-drag-handle {
  cursor: grab;
}

.storefront-order-form-drag-handle:active {
  cursor: grabbing;
}

.storefront-forms-empty {
  border: 1px dashed #bcccff;
  border-radius: 14px;
  background: linear-gradient(180deg, #f9fbff 0%, #f1f5ff 100%);
  padding: 18px;
  display: grid;
  gap: 8px;
}

.storefront-forms-empty h4 {
  margin: 0;
  font-size: 18px;
}

.storefront-forms-empty .muted-note {
  margin: 0;
}

.storefront-forms-empty-actions {
  margin-top: 4px;
}

.storefront-list-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.storefront-fields-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid #cdd8ff;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
}

.storefront-fields-shell::before {
  content: "";
  position: absolute;
  inset: -60% auto auto -80px;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(77, 91, 255, 0.18) 0%, rgba(77, 91, 255, 0) 72%);
  pointer-events: none;
}

.storefront-fields-shell > * {
  position: relative;
  z-index: 1;
}

.storefront-fields-shell-empty {
  display: grid;
  gap: 14px;
}

.storefront-fields-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #d8e1ff;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f3f6ff 100%);
  padding: 14px;
}

.storefront-fields-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4a5fe6;
}

.storefront-fields-hero h3 {
  margin: 0;
  font-size: 24px;
}

.storefront-fields-copy {
  margin: 8px 0 0;
  max-width: 720px;
}

.storefront-fields-form {
  margin-top: 10px;
  gap: 14px;
}

.storefront-fields-section-divider {
  position: relative;
  height: 14px;
  margin: 0 2px 4px;
}

.storefront-fields-section-divider::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  transform: translateY(-50%);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(77, 91, 255, 0.34) 0%, rgba(77, 91, 255, 0.08) 100%);
}

.storefront-fields-toolbar {
  border: 1px solid #d8e1ff;
  border-radius: 14px;
  background: #fbfcff;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.storefront-fields-toolbar-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.storefront-fields-current {
  display: grid;
  gap: 4px;
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  padding: 10px 12px;
  min-width: 260px;
}

.storefront-fields-current-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4a5fe6;
}

.storefront-fields-current h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
}

.storefront-fields-current .muted-note {
  margin: 0;
}

.storefront-fields-form-select {
  margin: 0;
  display: grid;
  gap: 6px;
  min-width: min(360px, 100%);
}

.storefront-fields-form-select select {
  margin: 0;
}

.storefront-fields-switcher {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.storefront-fields-switch-pill {
  border: 1px solid #cfd9ff;
  border-radius: 14px;
  background: #ffffff;
  color: #3c4d81;
  padding: 14px 20px;
  min-width: min(230px, 100%);
  min-height: 88px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.storefront-fields-switch-pill:hover {
  border-color: #a9bbff;
  box-shadow: 0 6px 16px rgba(47, 63, 255, 0.12);
  transform: translateY(-1px);
}

.storefront-fields-switch-pill.is-active {
  border-color: #5b6bff;
  background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
  box-shadow: 0 10px 24px rgba(47, 63, 255, 0.16);
}

.storefront-fields-switch-pill-name {
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 800;
  line-height: 1.06;
}

.storefront-fields-switch-pill-meta {
  font-size: 13px;
  font-weight: 700;
  color: #6473a3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.storefront-fields-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-fields-stat {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  text-align: center;
}

.storefront-fields-stat strong {
  font-size: 20px;
  line-height: 1;
  color: #2f3fff;
}

.storefront-fields-stat span {
  font-size: 12px;
  color: #667091;
}

.storefront-order-fields-list {
  display: grid;
  gap: 12px;
}

.storefront-order-fields-empty {
  padding: 16px;
  border: 1px dashed #bcccff;
  border-radius: 14px;
  background: linear-gradient(180deg, #f9fbff 0%, #f1f5ff 100%);
  display: grid;
  gap: 8px;
}

.storefront-order-fields-empty h4 {
  margin: 0;
  font-size: 17px;
}

.storefront-order-fields-empty .muted-note {
  margin: 0;
}

.storefront-order-fields-template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.storefront-order-fields-template-tags span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #ccd8ff;
  background: #ffffff;
  color: #435380;
  font-size: 12px;
  font-weight: 700;
}

.storefront-order-field-row {
  border: 1px solid #d6e0ff;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow: 0 8px 18px rgba(31, 57, 151, 0.06);
  display: grid;
  gap: 10px;
}

.storefront-order-field-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.storefront-order-field-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.storefront-order-field-head-actions .btn {
  width: 96px;
  justify-content: center;
  text-align: center;
  padding-inline: 0;
}

.storefront-order-field-drag-handle {
  width: 24px;
  min-width: 24px;
  height: 34px;
  border: 1px dashed #d2dcff;
  border-radius: 8px;
  background: #f7f9ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  cursor: grab;
}

.storefront-order-field-drag-handle:hover {
  border-color: #c5d2fb;
  background: #eef3ff;
}

.storefront-order-field-drag-handle:focus-visible {
  outline: 2px solid #4d5bff;
  outline-offset: 2px;
}

.storefront-order-field-drag-handle .products-reorder-handle-icon {
  width: 8px;
  height: 14px;
}

.storefront-order-field-drag-handle:active {
  cursor: grabbing;
}

.storefront-order-field-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.storefront-order-field-title-copy {
  display: grid;
  gap: 5px;
  align-content: center;
}

.storefront-order-field-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(160deg, #4d5bff 0%, #7381ff 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.storefront-order-field-title-copy h4 {
  margin: 0;
  font-size: 15px;
}

.storefront-order-field-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.storefront-order-field-remove {
  padding: 7px 10px;
  min-height: 0;
  white-space: nowrap;
}

.storefront-order-field-toggle {
  padding: 7px 10px;
  min-height: 0;
  white-space: nowrap;
}

.storefront-order-field-body {
  display: grid;
  gap: 10px;
}

.storefront-order-field-row.is-collapsed .storefront-order-field-body {
  display: none;
}

.storefront-order-field-row.is-dragging {
  opacity: 0.62;
  box-shadow: 0 10px 24px rgba(31, 57, 151, 0.14);
}

.storefront-order-field-row.storefront-order-field-drop-before {
  border-top: 3px solid #4d5bff;
}

.storefront-order-field-row.storefront-order-field-drop-after {
  border-bottom: 3px solid #4d5bff;
}

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

.storefront-order-field-grid-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storefront-order-field-required-toggle {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid #d7e0fb;
  border-radius: 10px;
  background: #f8faff;
  padding: 8px 10px;
  min-height: 44px;
}

.storefront-order-field-options {
  grid-column: 1 / -1;
}

.storefront-order-field-options textarea {
  min-height: 86px;
}

.storefront-order-fields-actions {
  justify-content: flex-end;
  border-top: 1px solid #dbe4ff;
  padding-top: 12px;
  margin-top: 4px;
}

@media (max-width: 1280px) {
  .storefront-forms-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .storefront-forms-hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .storefront-forms-hero-actions .btn {
    width: 100%;
    min-width: 0;
  }

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

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

  .storefront-form-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .storefront-form-card-badges {
    justify-content: flex-start;
  }

  .storefront-form-card-actions {
    grid-template-columns: 40px repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .storefront-form-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storefront-order-form-drag-handle-compact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .of-shell {
    width: min(1040px, 96vw);
    max-width: none;
    padding: 14px 0 22px;
  }

  .order-form-page.of-route-directory .of-shell {
    align-content: flex-start;
  }

  .of-header {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .of-form-title {
    font-size: clamp(34px, 8.5vw, 44px);
  }

  .of-form-subtitle {
    font-size: 16px;
  }

  .of-header-pills {
    gap: 7px;
  }

  .of-header-pill {
    padding: 6px 10px;
    font-size: 11px;
  }

  .of-header-side {
    grid-template-columns: 1fr;
  }

  .of-header-stat {
    padding: 10px;
  }

  .of-header-stat strong {
    font-size: 16px;
  }

  .of-services-layout {
    display: block;
  }

  .of-services-layout-side {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    z-index: auto;
    transform: none;
    margin-bottom: 12px;
  }

  .of-services-layout-side:not(.has-items) {
    display: none;
  }

  .of-services-cart-drawer {
    transform-origin: center;
  }

  .of-services-cart-head h3 {
    font-size: 20px;
  }

  .of-stage-head-with-action {
    display: grid;
    gap: 10px;
  }

  .of-stage-head-copy {
    flex: 1 1 auto;
  }

  .of-stage-head-actions {
    width: 100%;
  }

  .of-stage-head-actions .btn {
    width: 100%;
    min-width: 0;
  }

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

  .of-step-cart-popover {
    right: auto;
    left: 0;
    width: min(280px, calc(100vw - 40px));
  }

  .of-step-cart-popover::before {
    right: auto;
    left: 14px;
  }

  .of-checkout-layout {
    display: block;
  }

  .of-checkout-layout-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .of-checkout-aside {
    position: static;
  }

  .of-checkout-main-panel,
  .of-checkout-aside-panel,
  .of-checkout-legal-row {
    padding: 10px;
    border-radius: 14px;
  }

  .of-checkout-aside-panel::before {
    display: none;
  }

  .of-checkout-grid {
    grid-template-columns: 1fr;
  }

  .of-contact-grid {
    grid-template-columns: 1fr;
  }

  .of-contact-field-half,
  .of-contact-field-third {
    grid-column: span 1;
  }

  .of-phone-input-row {
    grid-template-columns: 1fr;
  }

  .of-card-entry-grid {
    grid-template-columns: 1fr;
  }

  .of-checkout-referral-grid {
    grid-template-columns: 1fr;
  }

  .of-checkout-referral-split {
    grid-template-columns: 1fr;
  }

  .of-checkout-coupon-grid {
    grid-template-columns: 1fr;
  }

  .of-coupon-apply-label {
    display: none;
  }

  .of-coupon-apply-btn {
    width: 100%;
  }

  .of-legal-docs {
    grid-template-columns: 1fr;
  }

  .of-legal-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .of-legal-links-shell {
    width: 100%;
    min-width: 0;
  }

  .of-legal-checkbox {
    border-radius: 12px;
    width: 100%;
  }

  .of-summary-card-head {
    flex-wrap: wrap;
  }

  .of-checkout-step-card {
    padding: 12px;
  }

  .of-access-form {
    grid-template-columns: 1fr;
  }

  .of-property-grid {
    grid-template-columns: 1fr;
  }

  .of-pricing-first-banner {
    grid-template-columns: 1fr;
  }

  .of-step-section-divider {
    margin: 10px 0 3px;
    gap: 8px;
  }

  .of-property-entry-panel {
    padding: 12px;
  }

  .of-property-entry-head {
    padding: 10px 12px;
  }

  .of-property-entry-head h3 {
    font-size: clamp(22px, 7vw, 29px);
  }

  .of-property-form {
    padding: 10px;
  }

  .of-property-form > .of-address-field {
    padding: 10px;
  }

  .of-property-sqft-row {
    max-width: none;
  }

  .of-service-kind-tabs {
    justify-content: flex-start;
    gap: 8px;
    top: 8px;
    padding: 6px 8px;
  }

  .of-service-group-head h3 {
    font-size: 16px;
  }

  .of-service-groups-secondary-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .of-service-kind-tab {
    font-size: 16px;
    min-height: 46px;
    padding: 10px 14px;
  }

  .of-service-kind-tab small {
    min-width: 26px;
    min-height: 26px;
    font-size: 12px;
  }

  .of-pricing-first-actions {
    justify-items: stretch;
  }

  .of-pricing-first-actions .muted-note {
    text-align: left;
  }

  .of-actions {
    flex-direction: column-reverse;
  }

  .of-checkout-actions {
    grid-template-columns: 1fr;
  }

  .of-checkout-charge-now {
    align-items: flex-start;
    flex-direction: column;
  }

  .of-checkout-charge-now-amount {
    white-space: normal;
  }

  .of-tip-inline-row {
    justify-content: flex-start;
  }

  .of-tip-options {
    flex-wrap: nowrap;
  }

  .of-tip-custom-row {
    display: contents;
  }

  .of-tip-custom-inline {
    width: 146px;
  }

  .of-tip-added-inline {
    min-inline-size: 70px;
  }

  .of-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .of-map-frame {
    height: 210px;
  }

  .of-details-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .of-checkout-stage-account {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .of-account-callout-copy h3 {
    font-size: clamp(22px, 6vw, 28px);
  }

  .of-account-callout-actions {
    justify-content: flex-start;
  }

  .of-account-client-lookup-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .of-checkout-stage-account-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .of-login-modal {
    width: min(560px, calc(100vw - 20px));
    padding: 14px;
  }

  .of-upsell-modal {
    width: min(760px, calc(100vw - 20px));
  }

  .of-upsell-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .of-upsell-row .btn {
    width: 100%;
  }

  .of-login-modal-head {
    flex-direction: column;
    align-items: stretch;
  }

  .of-login-modal-head h3 {
    font-size: 26px;
  }

  .of-product-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .of-product-media {
    min-height: 230px;
    border-right: 0;
    border-bottom: 1px solid #e2e8f8;
  }

  .of-product-copy {
    padding: 15px 16px 14px;
  }

  .of-product-copy h3 {
    font-size: clamp(22px, 6vw, 30px);
  }

  .of-product-price-label {
    font-size: 16px;
  }

  .of-directory-intro,
  .of-directory-hero {
    padding: 16px;
    grid-template-columns: 1fr;
  }

  .of-directory-intro-side,
  .of-directory-hero-side {
    justify-content: flex-start;
  }

  .storefront-order-form-modal {
    padding: 12px;
    max-height: calc(100vh - 20px);
  }

  .storefront-order-form-modal-head {
    flex-direction: column;
    align-items: stretch;
  }

  .storefront-order-form-modal-head h3 {
    font-size: 28px;
  }

  .storefront-order-form-hero-actions {
    justify-content: flex-start;
  }

  .storefront-order-form-grid {
    grid-template-columns: 1fr;
  }

  .storefront-order-form-basic-grid {
    grid-template-columns: 1fr;
  }

  .storefront-order-form-thumbnail-block,
  .storefront-payment-method-panel {
    padding: 10px;
  }

  .storefront-forms-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .storefront-forms-hero h3 {
    font-size: 28px;
  }

  .storefront-forms-hero-actions {
    justify-content: flex-start;
  }

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

  .storefront-directory-display-modal {
    max-height: calc(100vh - 20px);
  }

  .storefront-directory-display-stack {
    padding: 12px;
  }

  .storefront-directory-display-modal h3 {
    font-size: 28px;
  }

  .storefront-directory-setting-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .storefront-directory-setting-control {
    align-self: flex-end;
  }

  .storefront-directory-display-actions {
    justify-content: flex-start;
  }

  .storefront-form-card-meta {
    grid-template-columns: 1fr;
  }

  .storefront-fields-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .storefront-fields-toolbar {
    grid-template-columns: 1fr;
  }

  .storefront-fields-toolbar-top {
    align-items: stretch;
  }

  .storefront-fields-current,
  .storefront-fields-form-select {
    width: 100%;
    min-width: 0;
  }

  .storefront-fields-switcher {
    justify-content: stretch;
    gap: 8px;
  }

  .storefront-fields-switch-pill {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
    min-height: 74px;
    padding: 12px 14px;
  }

  .storefront-fields-switch-pill-name {
    font-size: clamp(16px, 4.8vw, 21px);
  }

  .storefront-fields-switch-pill-meta {
    font-size: 11px;
  }

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

  .storefront-tabs {
    width: 100%;
  }

  .storefront-tab-btn {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }

  .storefront-category-row {
    grid-template-columns: 1fr;
  }

  .storefront-deposit-override-grid {
    grid-template-columns: 1fr;
  }

  .storefront-service-tab-order-grid {
    grid-template-columns: 1fr;
  }

  .storefront-list-actions {
    justify-content: flex-start;
  }

  .storefront-order-field-grid,
  .storefront-order-field-grid-secondary {
    grid-template-columns: 1fr;
  }

  .storefront-order-field-row-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .storefront-order-field-head-actions {
    justify-content: flex-start;
  }

  .storefront-order-field-title-wrap {
    width: 100%;
  }

  .storefront-order-fields-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .storefront-order-fields-actions .btn {
    width: 100%;
  }

  .storefront-order-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .storefront-order-form-actions .btn {
    width: 100%;
  }

  .storefront-form-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.customer-portal-page {
  --cp-primary: var(--accent);
  --cp-secondary: var(--accent-2);
  --cp-background: var(--bg);
  --cp-surface: var(--panel);
  --cp-border: var(--line);
  --cp-text: var(--text);
  --cp-muted: var(--muted);
  --cp-font-family: "Space Grotesk", "Manrope", "Avenir Next", sans-serif;
  --cp-heading-font-family: "Sora", "Space Grotesk", sans-serif;
  --cp-base-font-size: 16px;
  --cp-heading-color: var(--text);
  color: var(--cp-text);
  font-family: var(--cp-font-family);
  font-size: var(--cp-base-font-size);
  background: linear-gradient(180deg, var(--cp-surface) 0%, var(--cp-background) 85%);
}

.customer-portal-page.cp-booting #cp-auth-shell,
.customer-portal-page.cp-booting #cp-app-shell {
  display: none !important;
}

.customer-portal-page h1,
.customer-portal-page h2,
.customer-portal-page h3,
.customer-portal-page h4 {
  font-family: var(--cp-heading-font-family);
  color: var(--cp-heading-color);
}

.customer-portal-page .listing-detail-hero h2 {
  color: #f8fbff;
}

.customer-portal-page .listing-detail-hero p {
  color: rgba(255, 255, 255, 0.92);
}

.customer-portal-page .auth-intro {
  border-color: var(--line);
  background: linear-gradient(135deg, var(--bg) 0%, var(--panel) 100%);
}

.customer-portal-page .eyebrow {
  background: var(--bg-soft);
  color: var(--accent);
}

.customer-portal-page input,
.customer-portal-page select,
.customer-portal-page textarea {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--text);
}

.customer-portal-shell {
  min-height: 100vh;
  height: 100dvh;
}

.cp-workspace {
  min-height: 0;
}

.customer-portal-page .cp-menu-section {
  grid-column: 1 / -1;
}

.cp-topbar {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) minmax(0, 1fr);
}

.cp-topbar-title-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cp-view-title {
  font-family: var(--cp-heading-font-family);
  color: var(--cp-heading-color);
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.01em;
}

.cp-content-area {
  max-width: var(--workspace-content-max-width);
}

.cp-content {
  display: grid;
  gap: 14px;
  min-width: 0;
  align-content: start;
}

.cp-content > * {
  min-width: 0;
}

.cp-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.cp-dashboard {
  gap: 18px;
}

.cp-dashboard-hero {
  border: 1px solid var(--cp-border);
  box-shadow: 0 16px 34px rgba(21, 36, 75, 0.08);
  background:
    radial-gradient(circle at -8% -46%, color-mix(in srgb, var(--cp-primary) 22%, transparent) 0%, transparent 56%),
    radial-gradient(circle at 110% -30%, color-mix(in srgb, var(--cp-secondary) 20%, transparent) 0%, transparent 48%),
    linear-gradient(152deg, var(--cp-background) 0%, var(--cp-surface) 82%);
}

.cp-dashboard .metric {
  border-color: var(--cp-border);
  background: linear-gradient(180deg, var(--cp-surface) 0%, var(--cp-background) 100%);
}

.cp-dashboard .metric strong {
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.05;
}

.cp-dashboard-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cp-dashboard-toolbar h3 {
  margin: 0 0 4px;
}

.cp-dashboard-toolbar .muted-note {
  margin: 0;
  max-width: 760px;
}

.cp-dashboard-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.cp-dashboard-metric {
  min-height: 150px;
  min-width: 0;
  padding: 16px;
  border-radius: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.cp-dashboard-metric.is-spotlight {
  grid-column: span 2;
  min-height: 170px;
  border-color: color-mix(in srgb, var(--cp-primary) 40%, var(--cp-border));
  background:
    radial-gradient(circle at 105% -18%, color-mix(in srgb, var(--cp-primary) 16%, transparent) 0%, transparent 52%),
    linear-gradient(150deg, var(--cp-surface) 0%, color-mix(in srgb, var(--cp-primary) 8%, var(--cp-background)) 100%);
}

.cp-dashboard-metric-kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--cp-muted);
}

.cp-dashboard-metric-value {
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--cp-heading-color);
  white-space: nowrap;
}

.cp-dashboard-metric-value.is-date {
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cp-dashboard-metric-note {
  margin: 0;
  font-size: 12px;
  color: var(--cp-muted);
  line-height: 1.35;
  min-width: 0;
}

@media (max-width: 1360px) {
  .cp-dashboard-metrics {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.cp-dashboard-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cp-dashboard-panel {
  border-color: var(--cp-border);
  box-shadow: 0 10px 24px rgba(19, 31, 65, 0.05);
  background: linear-gradient(180deg, var(--cp-surface) 0%, color-mix(in srgb, var(--cp-surface) 85%, var(--cp-background)) 100%);
}

.cp-dashboard-panel-toolbar {
  align-items: center;
}

.cp-dashboard-panel .toolbar h3 {
  margin-bottom: 2px;
}

.cp-dashboard-view-all-btn {
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 38px;
}

.cp-dashboard-table-wrap {
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--cp-surface) 0%, color-mix(in srgb, var(--cp-surface) 92%, var(--cp-background)) 100%);
  overflow: hidden;
  min-height: 220px;
}

.cp-dashboard-table {
  width: 100%;
  table-layout: fixed;
}

.cp-dashboard-table th,
.cp-dashboard-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cp-dashboard-orders-table {
  width: 100%;
  table-layout: fixed;
}

.cp-dashboard-orders-table th,
.cp-dashboard-orders-table td {
  white-space: normal;
  vertical-align: middle;
}

.cp-dashboard-orders-table th:nth-child(1),
.cp-dashboard-orders-table td:nth-child(1) {
  width: 74px;
  white-space: nowrap;
}

.cp-dashboard-orders-table th:nth-child(4),
.cp-dashboard-orders-table td:nth-child(4) {
  width: 112px;
}

.cp-dashboard-orders-table th:nth-child(5),
.cp-dashboard-orders-table td:nth-child(5) {
  width: 108px;
  white-space: nowrap;
  text-align: right;
}

.cp-dashboard-orders-table td:nth-child(2),
.cp-dashboard-orders-table td:nth-child(3) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cp-dashboard-empty-cell {
  text-align: center;
  color: var(--cp-muted);
  font-weight: 600;
  background: color-mix(in srgb, var(--cp-surface) 90%, var(--cp-background));
}

.cp-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--cp-border);
  background: color-mix(in srgb, var(--cp-primary) 12%, var(--cp-surface));
  color: var(--cp-heading-color);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cp-status-pill.is-good {
  border-color: #a9dfbe;
  background: #e9f9ef;
  color: #216445;
}

.cp-status-pill.is-neutral {
  border-color: var(--cp-border);
  background: color-mix(in srgb, var(--cp-primary) 10%, var(--cp-surface));
  color: var(--cp-heading-color);
}

.cp-status-pill.is-bad {
  border-color: #f0b5b5;
  background: #fff0f0;
  color: #8f2424;
}

.cp-dashboard-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.cp-dashboard-gallery .listing-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cp-dashboard-gallery .listing-card-body {
  flex: 1 1 auto;
}

.cp-dashboard-gallery .listing-card-footer {
  margin-top: auto;
}

.cp-dashboard-empty {
  margin: 0;
  border: 1px dashed var(--cp-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cp-surface) 90%, var(--cp-background));
  color: var(--cp-muted);
  text-align: center;
  padding: 16px;
}

.cp-listing-card {
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--cp-surface) 0%, var(--cp-background) 100%);
  overflow: hidden;
  display: grid;
  box-shadow: 0 12px 24px rgba(25, 36, 70, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cp-listing-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cp-primary) 45%, var(--cp-border));
  box-shadow: 0 16px 28px rgba(25, 36, 70, 0.12);
}

.cp-listing-card-media {
  position: relative;
  min-height: 176px;
  max-height: 176px;
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 6%, color-mix(in srgb, var(--cp-primary) 24%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--cp-surface) 70%, var(--cp-background)) 0%, var(--cp-background) 100%);
}

.cp-listing-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cp-listing-card-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 700;
  color: var(--cp-heading-color);
}

.cp-listing-card-media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 39, 0.08) 0%, rgba(7, 12, 32, 0.62) 100%);
  pointer-events: none;
}

.cp-listing-card-overlay-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cp-listing-card-overlay-top .cp-status-pill {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.9);
}

.cp-listing-card-overlay-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  background: rgba(17, 29, 60, 0.62);
  color: #f6f8ff;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cp-listing-card-overlay-bottom {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  gap: 3px;
  color: #f4f7ff;
}

.cp-listing-card-overlay-bottom strong {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.cp-listing-card-overlay-bottom span {
  font-size: 12px;
  color: rgba(244, 247, 255, 0.92);
}

.cp-listing-card-body {
  padding: 11px 12px 12px;
  display: grid;
  gap: 10px;
}

.cp-listing-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--cp-muted);
}

.cp-listing-card-actions {
  display: flex;
  justify-content: flex-end;
}

html[data-theme="dark"] .cp-dashboard-hero {
  border-color: color-mix(in srgb, var(--cp-border) 52%, #365183);
  box-shadow: 0 20px 34px rgba(4, 10, 24, 0.46);
  background:
    radial-gradient(circle at -8% -46%, color-mix(in srgb, var(--cp-primary) 28%, transparent) 0%, transparent 56%),
    radial-gradient(circle at 110% -30%, color-mix(in srgb, var(--cp-secondary) 24%, transparent) 0%, transparent 48%),
    linear-gradient(152deg, color-mix(in srgb, var(--cp-background) 28%, #132346) 0%, color-mix(in srgb, var(--cp-background) 18%, #10203f) 82%);
}

html[data-theme="dark"] .cp-dashboard-panel,
html[data-theme="dark"] .cp-dashboard-table-wrap,
html[data-theme="dark"] .cp-listing-card,
html[data-theme="dark"] .cp-dashboard-metric {
  border-color: color-mix(in srgb, var(--cp-border) 42%, #334877);
  background: color-mix(in srgb, var(--cp-surface) 26%, #121f39);
  color: color-mix(in srgb, var(--cp-text) 30%, #dce7ff);
}

html[data-theme="dark"] .cp-dashboard-metric.is-spotlight {
  border-color: color-mix(in srgb, var(--cp-primary) 52%, #4f6fb2);
  background:
    radial-gradient(circle at 105% -18%, color-mix(in srgb, var(--cp-primary) 34%, transparent) 0%, transparent 52%),
    linear-gradient(150deg, color-mix(in srgb, var(--cp-background) 24%, #132447) 0%, color-mix(in srgb, var(--cp-background) 30%, #14284d) 100%);
}

html[data-theme="dark"] .cp-dashboard-metric-kicker,
html[data-theme="dark"] .cp-dashboard-metric-note,
html[data-theme="dark"] .cp-listing-card-meta {
  color: color-mix(in srgb, var(--cp-muted) 38%, #9fb2de);
}

html[data-theme="dark"] .cp-dashboard-metric-value {
  color: color-mix(in srgb, var(--cp-heading-color) 34%, #e4edff);
}

html[data-theme="dark"] .cp-listing-card {
  box-shadow: 0 16px 28px rgba(4, 10, 24, 0.44);
}

html[data-theme="dark"] .cp-listing-card:hover {
  border-color: color-mix(in srgb, var(--cp-primary) 58%, #5878c4);
  box-shadow: 0 20px 34px rgba(4, 10, 24, 0.56);
}

html[data-theme="dark"] .cp-listing-card-media {
  background:
    radial-gradient(circle at 14% 6%, color-mix(in srgb, var(--cp-primary) 34%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--cp-background) 26%, #1a2d57) 0%, color-mix(in srgb, var(--cp-background) 20%, #122243) 100%);
}

html[data-theme="dark"] .cp-listing-card-overlay-chip {
  border-color: rgba(146, 170, 227, 0.58);
  background: rgba(12, 24, 49, 0.72);
  color: #e5eeff;
}

html[data-theme="dark"] .cp-listing-card-overlay-top .cp-status-pill {
  border-color: rgba(146, 170, 227, 0.54);
  background: rgba(13, 26, 52, 0.84);
  color: #d9e6ff;
}

html[data-theme="dark"] .cp-order-detail-card,
html[data-theme="dark"] .cp-order-detail-metrics article,
html[data-theme="dark"] .cp-order-detail-section,
html[data-theme="dark"] .cp-order-detail-overview-card {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .cp-order-embed-frame {
  border-color: #334877;
  background: #0f1b32;
}

html[data-theme="dark"] .cp-order-detail-metrics article span {
  color: #9fb2de;
}

html[data-theme="dark"] .cp-order-detail-metrics article strong,
html[data-theme="dark"] .cp-order-detail-section h4,
html[data-theme="dark"] .cp-order-detail-overview-card h4 {
  color: #e4edff;
}

html[data-theme="dark"] .photographer-order-hero {
  border-color: #39507f;
  background:
    radial-gradient(circle at 100% 0%, rgba(111, 141, 255, 0.24) 0%, transparent 36%),
    radial-gradient(circle at 0% 100%, rgba(54, 190, 145, 0.18) 0%, transparent 28%),
    linear-gradient(180deg, #172848 0%, #10203b 100%);
  box-shadow: none;
}

html[data-theme="dark"] .photographer-order-stat-card,
html[data-theme="dark"] .photographer-order-list-card,
html[data-theme="dark"] .photographer-order-empty,
html[data-theme="dark"] .photographer-order-overview-card {
  border-color: #334877;
  background: linear-gradient(180deg, #152542 0%, #0f1d36 100%);
  box-shadow: none;
}

html[data-theme="dark"] .photographer-order-appointment-card {
  border-color: #285363;
  background: linear-gradient(180deg, #15343e 0%, #102734 100%);
}

html[data-theme="dark"] .photographer-order-appointment-scheduler {
  border-color: #33507f;
  background: linear-gradient(180deg, #152949 0%, #11233f 100%);
}

html[data-theme="dark"] .photographer-order-appointment-scheduler-head strong,
html[data-theme="dark"] .photographer-order-appointment-scheduler-month-label {
  color: #e6eeff;
}

html[data-theme="dark"] .photographer-order-list-card-payout {
  background: linear-gradient(180deg, #152b42 0%, #11283c 100%);
}

html[data-theme="dark"] .photographer-order-kicker,
html[data-theme="dark"] .photographer-order-overview-label,
html[data-theme="dark"] .photographer-order-list-kicker,
html[data-theme="dark"] .photographer-order-stat-card span,
html[data-theme="dark"] .photographer-order-money span {
  color: #9fb2de;
}

html[data-theme="dark"] .photographer-order-hero h3,
html[data-theme="dark"] .photographer-order-section-head h4,
html[data-theme="dark"] .photographer-order-stat-card strong,
html[data-theme="dark"] .photographer-order-overview-card strong,
html[data-theme="dark"] .photographer-order-list-card-copy strong {
  color: #edf3ff;
}

html[data-theme="dark"] .photographer-order-hero .muted-note,
html[data-theme="dark"] .photographer-order-section-head p,
html[data-theme="dark"] .photographer-order-stat-card p,
html[data-theme="dark"] .photographer-order-overview-card p,
html[data-theme="dark"] .photographer-order-list-card-copy p,
html[data-theme="dark"] .photographer-order-empty {
  color: #aab8da;
}

html[data-theme="dark"] .photographer-order-qty-chip {
  border-color: #46608f;
  background: #1a2c4f;
  color: #dce7ff;
}

html[data-theme="dark"] .photographer-order-money strong {
  color: #7be1b8;
}

html[data-theme="dark"] .photographer-order-money .pricing-plan-price-current {
  color: #7be1b8;
}

html[data-theme="dark"] .photographer-order-overview-block + .photographer-order-overview-block {
  border-color: #334877;
}

.cp-settings-hero {
  background:
    radial-gradient(circle at 100% -30%, rgba(77, 91, 255, 0.12) 0%, transparent 48%),
    linear-gradient(145deg, #f8faff 0%, #ffffff 80%);
}

.cp-profile-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.cp-profile-avatar-column {
  display: grid;
  gap: 8px;
}

.cp-avatar-card {
  margin-bottom: 0;
}

.cp-avatar-card .profile-avatar-form {
  flex-direction: column;
  align-items: flex-start;
}

.cp-avatar-card .profile-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  flex: 0 0 96px;
}

.cp-avatar-card .profile-avatar-actions {
  width: 100%;
}

.cp-avatar-help {
  margin: 0;
}

.cp-profile-form {
  gap: 12px;
}

.cp-profile-main {
  gap: 12px;
}

.cp-profile-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fcfdff;
  display: grid;
  gap: 8px;
}

.cp-profile-group h4 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #2f3c6d;
}

.cp-profile-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.cp-profile-grid-business {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cp-profile-grid-social {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.cp-profile-grid label {
  margin-bottom: 0;
}

.cp-settings-tabs {
  margin-top: 0;
  margin-bottom: 0;
}

.cp-settings-menu-group {
  gap: 4px;
}

.cp-settings-submenu {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #d8e1ff;
}

.cp-settings-submenu .menu-subitem {
  font-size: 14px;
  padding: 8px 10px;
}

.cp-notifications-form {
  gap: 12px;
}

.cp-notification-template-section {
  display: grid;
  gap: 10px;
}

.cp-notification-template-head {
  display: grid;
  gap: 4px;
}

.cp-notification-template-head h4 {
  margin: 0;
  font-size: 16px;
}

.cp-notification-template-head .muted-note {
  margin: 0;
}

.cp-notification-template-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cp-payment-methods-shell {
  display: grid;
  gap: 12px;
}

.cp-payment-method-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 10px;
  background:
    radial-gradient(120% 140% at 100% -28%, rgba(77, 91, 255, 0.1), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.cp-payment-method-card-empty {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.cp-payment-method-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cp-payment-method-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d7798;
  margin-bottom: 4px;
}

.cp-payment-method-card-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  color: var(--heading);
}

.cp-payment-method-card-copy {
  margin: 0;
  color: var(--muted);
}

.cp-payment-method-card-actions {
  justify-content: flex-start;
}

.cp-payment-method-update-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 12px;
  background: #fbfcff;
}

.cp-payment-method-update-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cp-payment-method-update-head h4 {
  margin: 0;
  font-size: 20px;
  color: var(--heading);
}

.cp-payment-method-update-head .muted-note {
  margin: 4px 0 0;
}

.cp-payment-method-update-status {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.cp-payment-method-update-status p {
  margin: 0;
  color: var(--muted);
}

.cp-payment-method-update-status.is-error {
  border-color: #f0ccd7;
  background: #fff7fa;
}

.cp-payment-method-update-status.is-error p {
  color: #a2435f;
}

.cp-payment-method-update-embedded {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  min-height: 470px;
}

.cp-payment-method-update-embedded-frame {
  min-height: 470px;
}

.cp-payment-method-update-footnote {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed #d8e1ff;
  border-radius: 12px;
  background: #f8fbff;
}

.cp-order-payment-checkout-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 12px;
  background: #fbfcff;
}

.cp-order-payment-checkout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cp-order-payment-checkout-head h4 {
  margin: 0;
  font-size: 20px;
  color: var(--heading);
}

.cp-order-payment-embedded {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  min-height: 560px;
}

.cp-order-payment-embedded-frame {
  min-height: 560px;
}

.cp-order-payment-checkout-footnote {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed #d8e1ff;
  border-radius: 12px;
  background: #f8fbff;
}

.cp-order-detail-panel {
  margin-bottom: 12px;
}

.cp-order-detail-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  display: grid;
  gap: 14px;
}

.cp-order-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cp-order-detail-head h3 {
  margin: 0;
}

.cp-order-detail-head .muted-note {
  margin: 4px 0 0;
}

.cp-order-detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.cp-order-detail-metrics article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.cp-order-detail-metrics article span {
  color: #5e6a91;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-order-detail-metrics article strong {
  font-size: 16px;
  color: var(--heading);
}

.cp-order-detail-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.cp-order-detail-section h4 {
  margin: 0;
  color: var(--heading);
}

.cp-order-detail-shell {
  display: grid;
  gap: 12px;
}

.cp-order-detail-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.cp-order-detail-status-grid .metric strong {
  display: inline-flex;
  align-items: center;
}

.cp-order-detail-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.cp-order-detail-overview-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.cp-order-detail-overview-card h4 {
  margin: 0;
  color: var(--heading);
}

.cp-order-detail-overview-card .order-main-text {
  margin: 0;
}

.cp-order-detail-overview-card .order-sub-text {
  margin-top: 2px;
}

.cp-order-detail-customer {
  align-items: flex-start;
}

.photographer-order-detail-shell {
  gap: 18px;
}

.photographer-order-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(92, 124, 255, 0.16) 0%, transparent 38%),
    radial-gradient(circle at 0% 100%, rgba(61, 187, 146, 0.12) 0%, transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 64%, #f7faff 100%);
  box-shadow: 0 18px 42px rgba(37, 62, 118, 0.08);
  gap: 18px;
}

.photographer-order-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #5c7cff 0%, #3dbb92 100%);
}

.photographer-order-hero-head {
  position: relative;
  z-index: 1;
  gap: 16px;
}

.photographer-order-kicker {
  margin: 0 0 8px;
  color: #5067da;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.photographer-order-hero-head h3 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
}

.photographer-order-hero-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.photographer-order-hero-nav {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.photographer-order-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.photographer-order-metrics {
  position: relative;
  z-index: 1;
  gap: 12px;
}

.photographer-order-stat-card {
  min-height: 138px;
  border: 1px solid #d9e4ff;
  border-radius: 18px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, #f6f9ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  gap: 10px;
}

.photographer-order-stat-card span {
  color: #5e72c6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.photographer-order-stat-card strong {
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1.02;
}

.photographer-order-stat-card p {
  margin: 0;
  color: #5b6888;
  line-height: 1.5;
}

.photographer-order-stat-card.is-text strong {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.3;
}

.photographer-order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.photographer-order-section {
  border-radius: 20px;
  padding: 18px;
  gap: 16px;
  box-shadow: 0 12px 30px rgba(37, 62, 118, 0.06);
}

.photographer-order-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.photographer-order-section-head h4 {
  margin: 0;
  font-size: 20px;
}

.photographer-order-section-head p {
  margin: 6px 0 0;
  color: #64729a;
  line-height: 1.5;
}

.photographer-order-overview-card {
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 10px 24px rgba(38, 60, 110, 0.05);
  gap: 10px;
}

.photographer-order-overview-label {
  color: #5e72c6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.photographer-order-overview-card strong {
  font-size: 18px;
  line-height: 1.3;
}

.photographer-order-overview-card p {
  margin: 0;
  color: #5f6d94;
  line-height: 1.5;
}

.photographer-order-overview-card-combined {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.photographer-order-overview-block {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.photographer-order-overview-block + .photographer-order-overview-block {
  border-left: 1px solid #dbe4ff;
  padding-left: 16px;
}

.photographer-order-list {
  display: grid;
  gap: 12px;
}

.photographer-order-list-card {
  border: 1px solid #dbe4ff;
  border-radius: 18px;
  padding: 15px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 10px 24px rgba(38, 60, 110, 0.06);
}

.photographer-order-appointment-card {
  border-color: #caead9;
  background: linear-gradient(180deg, #ffffff 0%, #f2fbf7 100%);
  display: grid;
  gap: 12px;
}

.photographer-order-appointment-card-postponed {
  border-color: #efd7ac;
  background: linear-gradient(180deg, #ffffff 0%, #fff8ea 100%);
}

.photographer-order-appointment-card-canceled {
  border-color: #f3c7c7;
  background: linear-gradient(180deg, #ffffff 0%, #fff2f2 100%);
}

.photographer-order-appointment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.photographer-order-appointment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.photographer-order-appointment-scheduler {
  width: 100%;
  border: 1px solid #d8e2ff;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  display: grid;
  gap: 10px;
}

.photographer-order-appointment-scheduler-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.photographer-order-appointment-scheduler-head strong {
  color: #1f2a52;
  font-size: 15px;
}

.photographer-order-appointment-scheduler-month-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.photographer-order-appointment-scheduler-month-label {
  min-width: 150px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #4b5f93;
}

.photographer-order-appointment-scheduler .cp-calendar-day {
  min-height: 74px;
}

.photographer-order-appointment-scheduler-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.photographer-order-list-card-payout {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 55%, #f4fff8 100%);
}

.photographer-order-list-card-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.photographer-order-list-kicker {
  color: #5e72c6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.photographer-order-list-card-copy strong {
  color: var(--heading);
  font-size: 18px;
  line-height: 1.3;
}

.photographer-order-list-card-copy p {
  margin: 0;
  color: #66759a;
  line-height: 1.5;
}

.photographer-order-list-meta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.photographer-order-qty-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d7e2ff;
  border-radius: 999px;
  background: #eef3ff;
  color: #33456d;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.photographer-order-money {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
  flex-shrink: 0;
}

.photographer-order-money span {
  color: #6c7ca8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.photographer-order-money strong {
  color: #1d8b61;
  font-size: 28px;
  line-height: 1;
}

.photographer-order-money .pricing-plan-price-current {
  color: #1d8b61;
  font-size: 28px;
  line-height: 1;
}

.photographer-order-money .pricing-plan-price-original {
  font-size: 14px;
}

.photographer-order-empty {
  border: 1px dashed #cddcff;
  border-radius: 18px;
  padding: 24px;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f8ff 100%);
  color: #68779c;
  text-align: center;
  line-height: 1.5;
}

.cp-order-items-table th:nth-child(3),
.cp-order-items-table td:nth-child(3),
.cp-order-items-table th:nth-child(4),
.cp-order-items-table td:nth-child(4) {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .photographer-order-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .photographer-order-hero-actions {
    width: 100%;
    justify-items: start;
  }

  .photographer-order-hero-nav {
    justify-content: flex-start;
  }

  .photographer-order-badges {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .photographer-order-hero {
    padding: 16px;
  }

  .photographer-order-stat-card {
    min-height: auto;
  }

  .photographer-order-list-card {
    flex-direction: column;
  }

  .photographer-order-appointment-head {
    width: 100%;
    flex-direction: column;
  }

  .photographer-order-list-meta,
  .photographer-order-money {
    width: 100%;
    justify-content: flex-start;
    justify-items: start;
    text-align: left;
  }

  .photographer-order-appointment-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .photographer-order-appointment-scheduler-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .photographer-order-appointment-scheduler-month-controls {
    width: 100%;
  }

  .photographer-order-appointment-scheduler-month-label {
    flex: 1;
    min-width: 0;
  }

  .photographer-order-appointment-scheduler-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .photographer-order-overview-card-combined {
    grid-template-columns: minmax(0, 1fr);
  }

  .photographer-order-overview-block + .photographer-order-overview-block {
    border-left: 0;
    border-top: 1px solid #dbe4ff;
    padding-left: 0;
    padding-top: 16px;
  }
}

.cp-team-form {
  margin-top: 0;
  gap: 12px;
}

.cp-team-create-modal {
  width: min(940px, 96vw);
  max-height: min(92vh, 920px);
  overflow: auto;
  padding: 20px;
  display: grid;
  gap: 14px;
}

.cp-team-create-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cp-team-create-head-copy {
  display: grid;
  gap: 6px;
}

.cp-team-create-head-copy h3 {
  margin: 0;
}

.cp-team-create-head-copy .muted-note {
  margin: 0;
}

.cp-modal-kicker {
  margin: 0;
  color: #4f66db;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-team-create-form {
  gap: 12px;
}

.cp-team-create-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.cp-team-create-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cp-team-create-section-head h4 {
  margin: 0;
  font-size: 21px;
}

.cp-team-create-section-head .muted-note {
  margin: 2px 0 0;
  max-width: 520px;
}

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

.cp-team-form-grid label {
  display: grid;
  gap: 6px;
  margin-bottom: 0;
  color: #4e5b83;
  font-size: 13px;
  font-weight: 600;
}

.cp-team-form-grid label.is-full {
  grid-column: 1 / -1;
}

.cp-team-form-grid .muted-note {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}

.cp-team-account-preview {
  background: linear-gradient(135deg, #f9fbff 0%, #f2f6ff 58%, #edf9f5 100%);
}

.cp-team-create-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.cp-team-create-checklist li {
  position: relative;
  margin: 0;
  padding-left: 24px;
  color: #29385f;
  font-weight: 600;
  line-height: 1.4;
}

.cp-team-create-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5167ff 0%, #31c2a5 100%);
}

.cp-team-create-footnote {
  margin: 0;
}

@media (max-width: 840px) {
  .cp-team-create-modal {
    width: min(98vw, 98vw);
    padding: 14px;
  }

  .cp-team-create-head {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-team-create-head .btn {
    align-self: flex-end;
  }

  .cp-team-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

html[data-theme="dark"] .cp-team-create-card {
  border-color: #334877;
  background: linear-gradient(180deg, #13213d 0%, #101b33 100%);
}

html[data-theme="dark"] .cp-team-account-preview {
  background: linear-gradient(135deg, #162545 0%, #132742 58%, #113336 100%);
}

html[data-theme="dark"] .cp-modal-kicker {
  color: #8ea7ff;
}

html[data-theme="dark"] .cp-team-form-grid label {
  color: #b9c8ef;
}

html[data-theme="dark"] .cp-team-create-head-copy .muted-note,
html[data-theme="dark"] .cp-team-form-grid .muted-note,
html[data-theme="dark"] .cp-team-create-footnote {
  color: #9eb1dc;
}

html[data-theme="dark"] .cp-team-create-checklist li {
  color: #d8e6ff;
}

html[data-theme="dark"] .cp-settings-submenu {
  border-left-color: #304675;
}

html[data-theme="dark"] .cp-payment-method-card,
html[data-theme="dark"] .cp-payment-method-update-panel,
html[data-theme="dark"] .cp-payment-method-update-status,
html[data-theme="dark"] .cp-payment-method-update-embedded {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .cp-payment-method-card-title,
html[data-theme="dark"] .cp-payment-method-update-head h4 {
  color: #e7efff;
}

html[data-theme="dark"] .cp-payment-method-card-copy,
html[data-theme="dark"] .cp-payment-method-update-status p {
  color: #a9bbe6;
}

html[data-theme="dark"] .cp-payment-method-eyebrow {
  color: #9fb4e6;
}

html[data-theme="dark"] .cp-payment-method-update-status.is-error {
  border-color: #7e4461;
  background: #341f2c;
}

html[data-theme="dark"] .cp-payment-method-update-status.is-error p {
  color: #ffc1d3;
}

html[data-theme="dark"] .cp-payment-method-update-footnote {
  border-color: #385489;
  background: #172a4b;
  color: #c0d2ff;
}

.cp-team-table {
  min-width: 920px;
}

.cp-team-table td:nth-child(4),
.cp-team-table th:nth-child(4) {
  min-width: 220px;
}

.cp-team-table td:last-child,
.cp-team-table th:last-child {
  width: 120px;
  white-space: nowrap;
}

.cp-calendar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cp-calendar-controls strong {
  min-width: 180px;
  text-align: center;
}

.cp-scheduler-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: var(--of-section-gap, 12px);
  align-items: start;
}

.cp-scheduler-times {
  border: 1px solid #d4ddfb;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  padding: 12px;
  display: grid;
  gap: var(--of-subsection-gap, 10px);
  align-content: start;
}

.cp-scheduler-times-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cp-scheduler-times-head h3 {
  margin: 0;
  font-size: 17px;
}

.cp-scheduler-times-date {
  margin: 0;
  font-weight: 700;
  color: #2b3762;
}

.cp-scheduler-times-count {
  margin: 0;
}

.cp-scheduler-calendar {
  min-width: 0;
}

.cp-scheduler-slot-group {
  border: 1px solid #dce3fb;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: var(--of-subsection-gap, 8px);
}

.cp-scheduler-slot-group.is-twilight {
  border-color: #ced7ff;
  background: linear-gradient(180deg, #ffffff 0%, #f9faff 100%);
}

.cp-scheduler-slot-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cp-scheduler-slot-group-head h4 {
  margin: 0;
  font-size: 14px;
  color: #1f2a52;
}

.cp-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  color: #626983;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cp-calendar-weekdays span {
  display: flex;
  justify-content: center;
}

.cp-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.cp-calendar-day {
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  min-height: 86px;
  padding: 8px;
  display: grid;
  gap: 5px;
  text-align: left;
  color: #1d2440;
}

.cp-calendar-day:disabled {
  opacity: 1;
  cursor: default;
}

.cp-calendar-day-number {
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.cp-calendar-day-status {
  font-size: 11px;
  color: #67708a;
}

.cp-calendar-day-events {
  font-size: 11px;
  color: #3d56d8;
  font-weight: 600;
}

.cp-calendar-day.is-available {
  border-color: #c8d3ff;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.cp-calendar-day.is-available:hover {
  border-color: #95a8ff;
}

.cp-calendar-day.is-selected {
  border-color: #5f77ff;
  box-shadow: 0 0 0 1px rgba(95, 119, 255, 0.2) inset;
}

.cp-calendar-day.is-unavailable,
.cp-calendar-day.is-closed,
.cp-calendar-day.is-past {
  background: #f8f8fb;
  color: #7c8194;
}

.cp-calendar-day.is-unavailable::after,
.cp-calendar-day.is-closed::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  background: #bec3d1;
  transform: rotate(-9deg);
  transform-origin: center;
}

.cp-calendar-day.is-outside {
  opacity: 0.6;
  background: #fafbff;
}

.cp-calendar-day-panel {
  margin-top: 12px;
  border: 1px dashed #c8d0eb;
  border-radius: 10px;
  padding: 12px;
  background: #fdfdff;
}

.cp-calendar-day-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cp-calendar-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-calendar-slot-list-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 460px;
  overflow: auto;
  align-content: start;
  padding-right: 2px;
}

.cp-calendar-slot-list-sidebar .cp-calendar-slot {
  width: 100%;
  text-align: left;
}

.cp-calendar-slot {
  border: 1px solid #d2d9f5;
  background: #fff;
  color: #2f3a66;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
}

.cp-calendar-slot:hover {
  border-color: #8ea0ff;
}

.cp-calendar-slot.is-selected {
  background: #4d5bff;
  border-color: #4d5bff;
  color: #fff;
}

.cp-calendar-status.is-warning {
  margin-top: 8px;
  color: #775200;
  background: #fff6dd;
  border: 1px solid #f0d89a;
  border-radius: 8px;
  padding: 8px 10px;
}

.cp-book-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(12, 20, 44, 0.48);
  padding: 20px;
}

.cp-book-modal {
  width: min(720px, 96vw);
  max-height: min(88vh, 820px);
  overflow: auto;
}

.cp-book-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cp-book-modal-head h3 {
  margin-bottom: 4px;
}

.cp-order-upsell-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(84vh, 760px);
  overflow: hidden;
}

.cp-order-upsell-modal .of-upsell-list {
  max-height: min(54vh, 480px);
  overflow: auto;
  padding-right: 4px;
}

.cp-media-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  place-items: center;
  background: rgba(12, 20, 44, 0.74);
  padding: 20px;
}

.cp-media-lightbox {
  width: min(1320px, 96vw);
  max-height: 92vh;
  display: grid;
  gap: 10px;
}

.cp-media-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cp-media-lightbox-caption {
  margin: 0;
  color: #5e6a93;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.cp-media-lightbox-image-wrap {
  border: 1px solid #d7e1ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #1a2342 0%, #121a33 100%);
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 14px;
  min-height: 220px;
  max-height: calc(92vh - 84px);
}

.cp-media-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 140px);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(10, 19, 43, 0.26);
}

.cp-product-picker {
  display: grid;
  gap: 8px;
}

.cp-order-forms-shell {
  display: grid;
  gap: 16px;
}

.cp-order-embed-shell {
  display: grid;
  gap: 12px;
}

.cp-order-embed-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.cp-order-embed-frame {
  width: 100%;
  min-height: 1100px;
  border: 1px solid #d8e3ff;
  border-radius: 14px;
  background: #ffffff;
}

.cp-order-forms-intro {
  margin: 0;
}

.cp-order-forms-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cp-order-forms-grid .of-directory-card {
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.cp-order-forms-grid .of-directory-card[role="button"] {
  cursor: pointer;
}

.cp-order-forms-grid .of-directory-card[role="button"]:hover {
  transform: translateY(-2px);
  border-color: #c8d6ff;
  box-shadow: 0 14px 30px rgba(27, 44, 104, 0.1);
}

.cp-order-forms-grid .of-directory-card[role="button"]:focus-visible {
  outline: 3px solid rgba(77, 91, 255, 0.32);
  outline-offset: 2px;
}

.cp-order-forms-grid .of-directory-card.is-selected {
  border-color: #9fb2ff;
  box-shadow: 0 14px 32px rgba(77, 91, 255, 0.18);
}

.cp-order-forms-grid .of-directory-card .of-directory-card-cta {
  min-height: 44px;
  font-size: 16px;
}

.cp-order-forms-grid .of-directory-card .muted-note {
  min-height: 40px;
}

.cp-product-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.cp-product-row input[type="number"] {
  width: 90px;
}

.cp-product-price {
  font-weight: 700;
  color: var(--text);
}

.cp-product-price .pricing-plan-price-current {
  font-size: inherit;
}

@media (max-width: 720px) {
  .cp-topbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .cp-topbar-title-wrap {
    width: 100%;
    justify-content: flex-start;
  }

  .cp-content-area {
    max-width: 100%;
  }

  .cp-order-embed-head {
    justify-content: stretch;
  }

  .cp-order-embed-head .btn {
    width: 100%;
  }

  .cp-order-embed-frame {
    min-height: 920px;
  }

  .customer-portal-page .listing-filters-grid {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-metric,
  .cp-dashboard-metric.is-spotlight {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .cp-dashboard-toolbar .btn {
    width: 100%;
  }

  .cp-dashboard-split {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-panel-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .cp-dashboard-panel-toolbar .btn {
    width: 100%;
  }

  .cp-dashboard-gallery {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-table th,
  .cp-dashboard-table td {
    white-space: normal;
  }

  .cp-profile-layout {
    grid-template-columns: 1fr;
  }

  .cp-notification-template-list {
    grid-template-columns: 1fr;
  }

  .cp-avatar-card .profile-avatar-form {
    align-items: flex-start;
  }

  .cp-calendar-weekdays,
  .cp-calendar-grid {
    gap: 6px;
  }

  .cp-scheduler-shell {
    grid-template-columns: 1fr;
  }

  .cp-scheduler-times {
    order: 2;
  }

  .cp-scheduler-calendar {
    order: 1;
  }

  .cp-calendar-slot-list-sidebar {
    max-height: none;
  }

  .cp-calendar-day {
    min-height: 80px;
    padding: 7px;
  }

  .cp-calendar-controls {
    flex-wrap: wrap;
  }

  .cp-book-modal-backdrop {
    padding: 10px;
  }

  .cp-book-modal-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .cp-order-upsell-modal {
    width: min(760px, calc(100vw - 20px));
    max-height: min(88vh, 760px);
  }

  .cp-order-upsell-modal .of-upsell-list {
    max-height: min(56vh, 520px);
  }

  .cp-media-lightbox-backdrop {
    padding: 10px;
  }

  .cp-media-lightbox-head {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-media-lightbox-head .btn {
    width: 100%;
  }

  .cp-media-lightbox-image-wrap {
    padding: 10px;
    max-height: calc(92vh - 152px);
  }

  .cp-media-lightbox-image {
    max-height: calc(92vh - 180px);
  }

  .cp-product-row {
    grid-template-columns: 1fr;
  }

  .cp-product-row input[type="number"] {
    width: 100%;
  }

  .cp-order-forms-grid {
    grid-template-columns: 1fr;
  }
}

/* Clean marketing landing refresh */
.marketing-clean {
  --cln-line: #d8e0ff;
  --cln-line-strong: #cbd7ff;
  --cln-surface: #ffffff;
  --cln-surface-soft: #f7f9ff;
  --cln-shadow: 0 10px 24px rgba(46, 65, 165, 0.08);
  background:
    radial-gradient(960px 320px at 8% -12%, rgba(77, 91, 255, 0.11), transparent 62%),
    radial-gradient(960px 320px at 94% -14%, rgba(111, 120, 255, 0.09), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 56%, #f9fbff 100%);
}

.marketing-clean .marketing-wrap {
  width: min(93vw, 1180px);
}

.marketing-clean .marketing-top {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.marketing-clean .cln-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.marketing-clean .cln-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.marketing-clean .cln-nav a:not(.btn) {
  text-decoration: none;
  color: #33436d;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 14px;
}

.marketing-clean .cln-nav a:not(.btn):hover {
  background: #edf1ff;
}

.marketing-clean .cln-main {
  padding-bottom: 14px;
}

.marketing-clean .btn {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  box-shadow: 0 8px 16px rgba(77, 91, 255, 0.16);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.marketing-clean .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(77, 91, 255, 0.2);
}

.marketing-clean .btn-soft {
  box-shadow: none;
  border-color: var(--cln-line-strong);
}

.marketing-clean .btn-soft:hover {
  background: #edf2ff;
  box-shadow: none;
}

.marketing-clean .cln-hero {
  padding: 40px 0 20px;
}

.marketing-clean .cln-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
  align-items: stretch;
}

.marketing-clean .cln-hero-copy,
.marketing-clean .cln-hero-panel {
  animation: cln-rise 420ms ease both;
}

.marketing-clean .cln-hero-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 4.8vw, 52px);
  line-height: 1.05;
  max-width: 18ch;
  letter-spacing: -0.015em;
}

.marketing-clean .cln-hero-copy p {
  margin: 0 0 14px;
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.62;
  font-size: 16px;
}

.marketing-clean .cln-hero-panel {
  padding: 16px;
  border-color: var(--cln-line);
  background: linear-gradient(180deg, var(--cln-surface) 0%, var(--cln-surface-soft) 100%);
  box-shadow: var(--cln-shadow);
}

.marketing-clean .cln-hero-panel h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.12;
}

.marketing-clean .cln-step-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.marketing-clean .cln-step-list li {
  color: #3f4f7a;
  line-height: 1.45;
}

.marketing-clean .cln-step-list strong {
  display: block;
  margin-bottom: 2px;
  color: #2a3a62;
  font-size: 14px;
}

.marketing-clean .cln-step-list span {
  color: #60709a;
  font-size: 13px;
}

.marketing-clean .cln-hero-preview {
  margin-top: 12px;
  border: 1px solid var(--cln-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.marketing-clean .cln-preview-bar {
  height: 30px;
  border-bottom: 1px solid var(--cln-line);
  background: #f2f5ff;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.marketing-clean .cln-preview-bar span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c2cffb;
}

.marketing-clean .cln-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
}

.marketing-clean .cln-preview-col {
  display: grid;
  gap: 8px;
}

.marketing-clean .cln-preview-tile {
  min-height: 58px;
  border-radius: 8px;
  border: 1px solid var(--cln-line);
  background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%);
}

.marketing-clean .cln-preview-tile-lg {
  min-height: 82px;
}

.marketing-clean .cln-preview-tile-xl {
  min-height: 148px;
}

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

.marketing-clean .cln-proof-card {
  border-color: var(--cln-line);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: none;
}

.marketing-clean .cln-proof-card h3 {
  margin-bottom: 4px;
  font-size: 17px;
}

.marketing-clean .cln-section {
  padding: 36px 0 8px;
}

.marketing-clean .cln-section-soft {
  margin-top: 10px;
  border-top: 1px solid #e3e9ff;
  border-bottom: 1px solid #e3e9ff;
  background: linear-gradient(180deg, rgba(242, 246, 255, 0.7), rgba(249, 252, 255, 0.8));
}

.marketing-clean .cln-section-head {
  max-width: 760px;
  margin-bottom: 14px;
}

.marketing-clean .cln-section-head h2 {
  margin: 0 0 7px;
  font-size: clamp(30px, 3.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.marketing-clean .cln-section-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
  font-size: 15px;
}

.marketing-clean .cln-feature-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-clean .cln-feature-card {
  padding: 14px;
  border-color: var(--cln-line);
  box-shadow: var(--cln-shadow);
}

.marketing-clean .cln-feature-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.marketing-clean .cln-feature-card p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 14px;
}

.marketing-clean .cln-platform-visual {
  margin-top: 10px;
  padding: 14px;
  border-color: var(--cln-line);
  box-shadow: none;
  background: #fff;
}

.marketing-clean .cln-platform-lane {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.marketing-clean .cln-platform-chip {
  border-radius: 999px;
  border: 1px solid var(--cln-line-strong);
  background: #f1f5ff;
  color: #415393;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
}

.marketing-clean .cln-platform-line {
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, #b8c8ff 0%, #7f95ff 100%);
}

.marketing-clean .cln-platform-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.marketing-clean .cln-platform-panel {
  border: 1px solid var(--cln-line);
  border-radius: 10px;
  padding: 8px;
  background: #fafbff;
  display: grid;
  gap: 7px;
}

.marketing-clean .cln-platform-row {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d9e2ff 0%, #ecf1ff 100%);
}

.marketing-clean .cln-platform-row-wide {
  width: 82%;
}

.marketing-clean .cln-workflow-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-clean .cln-workflow-card {
  border-color: var(--cln-line);
  background: #ffffff;
  box-shadow: none;
  padding: 14px;
}

.marketing-clean .cln-step-number {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--cln-line-strong);
  background: #edf1ff;
  color: var(--accent);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.marketing-clean .cln-workflow-card h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.marketing-clean .cln-workflow-card p {
  font-size: 14px;
}

.marketing-clean .cln-flow-strip {
  margin-top: 8px;
  border-color: var(--cln-line);
  box-shadow: none;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.marketing-clean .cln-flow-node {
  border: 1px solid var(--cln-line-strong);
  background: #f1f5ff;
  color: #415393;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.marketing-clean .cln-flow-connector {
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, #b9c8ff 0%, #879bff 100%);
}

.marketing-clean .cln-kpi-grid {
  margin-top: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-clean .cln-kpi-card {
  padding: 12px;
  border-color: var(--cln-line);
  box-shadow: none;
}

.marketing-clean .cln-kpi-card h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.marketing-clean .cln-kpi-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.marketing-clean .cln-plan-label {
  margin: 0;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #c9d4ff;
  background: #eef2ff;
  color: #4055a4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.marketing-clean .cln-plan-label-inline {
  margin-bottom: 6px;
}

.marketing-clean .cln-plan-price {
  margin: 0;
  color: #263b90;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
}

.marketing-clean .cln-plan-price span {
  margin-left: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #5a6ca6;
}

.marketing-clean .cln-plan-btn {
  margin-top: 8px;
  width: 100%;
}

.marketing-clean .cln-payg-strip {
  border-color: #d4ddfc;
  padding: 14px;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  box-shadow: var(--cln-shadow);
}

.marketing-clean .cln-payg-strip h3 {
  margin: 2px 0 0;
  font-size: 30px;
  line-height: 1.04;
}

.marketing-clean .cln-payg-strip > p {
  margin: 0;
  color: var(--muted);
}

.marketing-clean .cln-pricing-compare {
  border-color: #d4ddfc;
  padding: 14px;
  display: grid;
  gap: 8px;
  box-shadow: var(--cln-shadow);
}

.marketing-clean .cln-pricing-scroll-hint {
  display: none;
  margin: 0;
  color: #5f709f;
  font-size: 12px;
}

.marketing-clean .cln-pricing-table-wrap {
  overflow-x: auto;
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  background: #fff;
}

.marketing-clean .cln-pricing-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.marketing-clean .cln-pricing-table thead th {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  background: #f6f8ff;
  border-bottom: 1px solid #dbe4ff;
  color: #405290;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.marketing-clean .cln-pricing-table thead th:first-child {
  min-width: 190px;
}

.marketing-clean .cln-pricing-table thead th.is-featured {
  background: linear-gradient(175deg, rgba(95, 113, 255, 0.13), #f6f8ff 45%);
}

.marketing-clean .cln-pricing-plan-head h3 {
  margin: 0 0 3px;
  color: #1f2a4e;
  font-size: 22px;
  line-height: 1.03;
  letter-spacing: -0.01em;
  text-transform: none;
}

.marketing-clean .cln-pricing-plan-head p {
  margin: 0;
  color: #263b90;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: none;
}

.marketing-clean .cln-pricing-plan-head p span {
  margin-left: 3px;
  color: #5a6ca6;
  font-size: 12px;
  font-weight: 700;
}

.marketing-clean .cln-pricing-table tbody th {
  padding: 11px 10px;
  border-bottom: 1px solid #edf1ff;
  color: #4d5f9d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: top;
  background: #fcfdff;
}

.marketing-clean .cln-pricing-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid #edf1ff;
  color: #304074;
  vertical-align: top;
}

.marketing-clean .cln-pricing-table tbody tr:last-child th,
.marketing-clean .cln-pricing-table tbody tr:last-child td {
  border-bottom: none;
}

.marketing-clean .cln-enterprise-estimate-row th,
.marketing-clean .cln-enterprise-estimate-row td {
  background: #f9fbff;
}

.marketing-clean .cln-enterprise-empty {
  color: #5f6fa0;
  font-size: 13px;
}

.marketing-clean .cln-enterprise-cell {
  min-width: 260px;
}

.marketing-clean .cln-enterprise-inline-title {
  margin: 0 0 6px;
  color: #4f619a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.marketing-clean .cln-unique-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.marketing-clean .cln-unique-list li {
  position: relative;
  padding-left: 13px;
  font-size: 13px;
  line-height: 1.4;
  color: #334579;
}

.marketing-clean .cln-unique-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #5c73ff;
}

.marketing-clean .cln-pricing-action-row th {
  background: #f8faff;
}

.marketing-clean .cln-pricing-action-row .cln-plan-btn {
  margin-top: 0;
  width: 100%;
  padding: 9px 8px;
  font-size: 13px;
  box-shadow: none;
}

.marketing-clean .cln-enterprise-slider {
  margin-top: 0;
  border: 1px solid #dde5ff;
  border-radius: 10px;
  padding: 9px;
  background: #f8faff;
}

.marketing-clean .cln-enterprise-slider label {
  margin: 0 0 4px;
  display: block;
  color: #5c6d9f;
  font-size: 11px;
  font-weight: 700;
}

.marketing-clean .cln-enterprise-slider input[type="range"] {
  margin-top: 0;
}

.marketing-clean .cln-enterprise-readout {
  margin: 8px 0 0;
  display: grid;
  gap: 2px;
}

.marketing-clean .cln-enterprise-readout strong {
  color: #334aa2;
  font-size: 15px;
}

.marketing-clean .cln-enterprise-readout span,
.marketing-clean .cln-enterprise-readout small {
  color: #6276b2;
  font-size: 11px;
}

.marketing-clean .cln-final {
  padding-bottom: 22px;
}

.marketing-clean .cln-final-card {
  border-color: var(--cln-line);
  text-align: center;
  padding: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(77, 91, 255, 0.1), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(111, 120, 255, 0.1), transparent 42%),
    #ffffff;
}

.marketing-clean .cln-final-card h2 {
  margin: 0 0 7px;
  font-size: clamp(28px, 3.4vw, 38px);
}

.marketing-clean .cln-final-card p {
  margin: 0 auto 12px;
  max-width: 60ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
}

.marketing-clean .cln-final-card .row-actions {
  justify-content: center;
}

@media (max-width: 1100px) {
  .marketing-clean .cln-hero-grid,
  .marketing-clean .cln-proof-grid,
  .marketing-clean .cln-feature-grid,
  .marketing-clean .cln-workflow-grid,
  .marketing-clean .cln-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-clean .cln-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .marketing-clean .cln-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .marketing-clean .cln-nav {
    width: 100%;
  }

  .marketing-clean .cln-nav .btn,
  .marketing-clean .cln-nav a:not(.btn) {
    flex: 1 1 auto;
    text-align: center;
  }

  .marketing-clean .cln-hero-grid,
  .marketing-clean .cln-proof-grid,
  .marketing-clean .cln-feature-grid,
  .marketing-clean .cln-workflow-grid,
  .marketing-clean .cln-kpi-grid,
  .marketing-clean .cln-plan-grid {
    grid-template-columns: 1fr;
  }

  .marketing-clean .cln-hero {
    padding-top: 30px;
  }

  .marketing-clean .cln-hero-copy h1 {
    max-width: 100%;
  }

  .marketing-clean .cln-platform-panels {
    grid-template-columns: 1fr;
  }

  .marketing-clean .cln-payg-strip,
  .marketing-clean .cln-pricing-compare {
    padding: 12px;
  }

  .marketing-clean .cln-pricing-table {
    min-width: 860px;
  }

  .marketing-clean .cln-pricing-scroll-hint {
    display: block;
  }

  .marketing-clean .cln-pricing-plan-head h3 {
    font-size: 20px;
  }

  .marketing-clean .cln-pricing-plan-head p {
    font-size: 23px;
  }
}

@media (max-width: 640px) {
  .marketing-clean .cln-hero-panel,
  .marketing-clean .cln-feature-card,
  .marketing-clean .cln-workflow-card,
  .marketing-clean .cln-kpi-card,
  .marketing-clean .cln-plan-card,
  .marketing-clean .cln-platform-visual,
  .marketing-clean .cln-final-card {
    padding: 12px;
  }

  .marketing-clean .cln-nav a:not(.btn) {
    padding: 7px 7px;
  }

  .marketing-clean .cln-flow-strip {
    justify-content: flex-start;
  }

  .marketing-clean .cln-flow-connector {
    display: none;
  }

  .marketing-clean .cln-plan-grid {
    grid-template-columns: 1fr;
  }

  .marketing-clean .cln-payg-strip h3 {
    font-size: 26px;
  }

  .marketing-clean .cln-plan-price {
    font-size: 30px;
  }

  .marketing-clean .cln-pricing-table {
    min-width: 760px;
    font-size: 13px;
  }

  .marketing-clean .cln-pricing-action-row .cln-plan-btn {
    font-size: 12px;
    padding: 8px 6px;
  }
}

@keyframes cln-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.property-site-page {
  --ps-nav-height: 56px;
  margin: 0;
  min-height: 100vh;
  background: #f9f9f9;
  color: #111;
  font-family: "Karla", sans-serif;
}

.property-site-page * {
  box-sizing: border-box;
}

.property-site-page.ps-no-scroll {
  overflow: hidden;
}

html.ps-lock-scroll,
.property-site-page.ps-lock-scroll {
  overflow: hidden;
}

.property-site-page h1,
.property-site-page h2,
.property-site-page h3 {
  margin: 0;
  font-family: "Rubik", sans-serif;
  color: #111;
}

.property-site-page p {
  margin: 0;
}

.property-site-page .ps-top-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(6, 6, 6, 0.2);
  backdrop-filter: blur(4px);
}

.property-site-page .ps-nav {
  width: min(1260px, calc(100% - 44px));
  margin: 0 auto;
  min-height: var(--ps-nav-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}

.property-site-page .ps-nav a {
  color: #fff;
  text-decoration: none;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.property-site-page .ps-nav a:hover {
  opacity: 0.88;
}

.property-site-page .ps-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: rgba(8, 12, 22, 0.34);
}

.property-site-page .ps-mode-switch button {
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  color: rgba(240, 246, 255, 0.9);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.property-site-page .ps-mode-switch button.active {
  color: #12203f;
  background: #fff;
}

.property-site-page .ps-hero {
  position: relative;
  min-height: clamp(360px, 60vh, 640px);
  overflow: hidden;
  background: #000;
  background-size: cover, cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: background-color 240ms ease;
}

.property-site-page .ps-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  pointer-events: none;
}

.property-site-page .ps-hero-image.is-active {
  opacity: 1;
}

.property-site-page .ps-hero-image.is-fading-out {
  opacity: 0;
}

.property-site-page .ps-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0.58) 100%);
  z-index: 2;
}

.property-site-page .ps-hero-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 33%;
  width: 1px;
  background: rgba(255, 255, 255, 0.6);
  z-index: 3;
}

.property-site-page .ps-hero-left {
  position: absolute;
  left: 11.5%;
  bottom: 34px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.property-site-page .ps-hero-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(32px, 2.7vw, 46px);
  line-height: 1.06;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.property-site-page .ps-scroll-link {
  display: inline-flex;
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 36px;
  line-height: 1;
}

.property-site-page .ps-hero-right {
  position: absolute;
  right: 44px;
  bottom: 38px;
  z-index: 4;
  width: min(520px, 46vw);
  text-align: right;
  color: #fff;
}

.property-site-page .ps-hero-price {
  margin: 0;
  font-size: clamp(56px, 6.2vw, 96px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.property-site-page .ps-hero-metrics {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.property-site-page .ps-hero-metrics li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: #fff;
  font-size: clamp(32px, 3.6vw, 60px);
  font-weight: 700;
  line-height: 1.02;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.property-site-page .ps-hero-metric-icon {
  width: clamp(18px, 0.58em, 30px);
  height: clamp(18px, 0.58em, 30px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.property-site-page .ps-hero-metric-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.property-site-page .ps-hero-metric-value {
  display: inline-block;
}

.property-site-page .ps-hero-nav {
  position: absolute;
  bottom: 10px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.property-site-page .ps-hero-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.property-site-page .ps-hero-prev {
  left: 12px;
}

.property-site-page .ps-hero-next {
  right: 12px;
}

.property-site-page .ps-content {
  width: min(1240px, calc(100% - 62px));
  margin: 88px auto 110px;
}

.property-site-page .ps-section {
  margin-bottom: 86px;
}

.property-site-page .ps-section.hidden {
  display: none;
}

.property-site-page .ps-section h2 {
  margin-bottom: 28px;
  font-size: clamp(34px, 2.2vw, 44px);
  line-height: 1.05;
}

.property-site-page .ps-details-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: 34px;
  align-items: start;
}

.property-site-page .ps-description {
  color: #222;
  font-size: clamp(17px, 1.05vw, 19px);
  line-height: 1.74;
}

.property-site-page .ps-detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.property-site-page .ps-detail-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.property-site-page .ps-detail-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
}

.property-site-page .ps-detail-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.property-site-page .ps-detail-text {
  display: grid;
  gap: 2px;
  font-size: clamp(16px, 0.98vw, 18px);
  line-height: 1.32;
  color: #111;
  font-weight: 600;
}

.property-site-page .ps-detail-text small {
  display: block;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #555;
  font-weight: 700;
}

.property-site-page .ps-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.property-site-page .ps-photo-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
}

.property-site-page .ps-photo-filter-chip {
  border: 1px solid rgba(12, 24, 58, 0.2);
  background: #eef2ff;
  color: #1d2a58;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.property-site-page .ps-photo-filter-chip span {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #2f46a2;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(132, 152, 237, 0.46);
  line-height: 1;
  padding: 0 5px;
}

.property-site-page .ps-photo-filter-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(50, 83, 200, 0.45);
  box-shadow: 0 8px 18px rgba(19, 40, 110, 0.12);
  background: #e7edff;
}

.property-site-page .ps-photo-filter-chip.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #4568ff 0%, #5f7dff 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(35, 63, 168, 0.28);
}

.property-site-page .ps-photo-filter-chip.is-active span {
  color: #2d43a0;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.66);
}

.property-site-page .ps-floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  width: min(1040px, 100%);
  margin: 0 auto;
}

.property-site-page .ps-thumb {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d7d7d7;
}

.property-site-page .ps-thumb button {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: transparent;
}

.property-site-page .ps-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 220ms ease;
}

.property-site-page .ps-thumb button:hover img {
  transform: scale(1.03);
}

.property-site-page .ps-more-wrap {
  margin-top: 26px;
  display: flex;
  justify-content: center;
}

.property-site-page .ps-more-btn {
  border: 0;
  border-radius: 2px;
  background: #070707;
  color: #fff;
  height: 30px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.property-site-page .ps-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  justify-items: center;
}

.property-site-page .ps-video-card {
  margin: 0;
  width: min(640px, 100%);
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.property-site-page .ps-video-card video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.property-site-page .ps-video-card.is-portrait {
  width: min(280px, 100%);
  aspect-ratio: var(--ps-video-ratio, 9 / 16);
  border-radius: 36px;
  border: 12px solid #101114;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.44);
  position: relative;
  overflow: hidden;
}

.property-site-page .ps-video-card.is-portrait::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  max-width: 130px;
  min-width: 86px;
  height: 16px;
  border-radius: 0 0 11px 11px;
  background: #06070b;
  z-index: 2;
}

.property-site-page .ps-video-card.is-portrait video {
  object-fit: cover;
}

.property-site-page .ps-tours-wrap {
  margin-top: 22px;
}

.property-site-page .ps-tours-wrap h3 {
  margin-bottom: 12px;
  font-size: 22px;
  text-align: center;
}

.property-site-page .ps-tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  justify-content: center;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.property-site-page .ps-tour-card {
  display: grid;
  gap: 12px;
}

.property-site-page .ps-tour-card-embed {
  width: min(980px, 100%);
  margin: 0 auto;
}

.property-site-page .ps-tour-card-external {
  width: min(760px, 100%);
  margin: 0 auto;
}

.property-site-page .ps-tour-embed-shell {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #cfd9ee;
  background: #0a0a0a;
}

.property-site-page .ps-tour-embed-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.property-site-page .ps-tour-embed-footer {
  display: grid;
  gap: 8px;
}

.property-site-page .ps-tour-provider-line {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.property-site-page .ps-tour-provider-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cdd9f2;
  background: #edf3ff;
  color: #28406f;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.property-site-page .ps-tour-provider-note {
  margin: 0;
  color: #3f547d;
  line-height: 1.45;
  font-size: 13px;
}

.property-site-page .ps-tour-preview-shell {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #cedaf4;
  background:
    radial-gradient(circle at 14% 16%, rgba(129, 173, 255, 0.34), transparent 54%),
    linear-gradient(145deg, #102955 0%, #081830 60%, #061124 100%);
}

.property-site-page .ps-tour-preview-shell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.property-site-page .ps-tour-preview-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #d8e6ff;
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 800;
  letter-spacing: 0.14em;
}

.property-site-page .ps-tour-open-btn {
  appearance: none;
  font: inherit;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-width: 128px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #3f5ea8;
  background: #1e3f8f;
  color: #f2f7ff;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
}

.property-site-page .ps-tour-open-btn:hover {
  background: #24499f;
}

.property-site-page .ps-tour-open-btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.65;
}

.property-site-page .ps-tour-open-btn:disabled {
  pointer-events: none;
  opacity: 0.65;
}

.property-site-page .ps-link-card {
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.property-site-page .ps-link-card h3 {
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
}

.property-site-page .ps-link-card a {
  color: #111;
  text-decoration: underline;
  font-weight: 700;
}

.property-site-page .ps-link-card .ps-tour-open-btn {
  color: #f2f7ff;
  text-decoration: none;
}

.property-site-page .ps-map-shell {
  border: 1px solid #d4d4d4;
  background: #f3f3f3;
  height: 420px;
  overflow: hidden;
  width: min(1040px, 100%);
  margin: 0 auto;
}

.property-site-page .ps-map-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.property-site-page .ps-contact-copy {
  margin-top: -6px;
  margin-bottom: 18px;
  color: #222;
  font-size: 18px;
}

.property-site-page #Videos > h2,
.property-site-page #FloorPlans > h2,
.property-site-page #Map > h2 {
  text-align: center;
}

.property-site-page .ps-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 22px;
}

.property-site-page .ps-agent-card {
  border: 1px solid #d7d7d7;
  background: #fff;
  padding: 18px;
}

.property-site-page .ps-agent-head h3 {
  font-size: 28px;
  line-height: 1.08;
}

.property-site-page .ps-agent-head p {
  margin-top: 8px;
  color: #555;
  font-size: 16px;
}

.property-site-page .ps-agent-meta {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.property-site-page .ps-agent-meta li {
  display: grid;
  gap: 2px;
}

.property-site-page .ps-agent-meta span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  font-weight: 700;
}

.property-site-page .ps-agent-meta a,
.property-site-page .ps-agent-meta strong {
  color: #111;
  font-size: 16px;
  line-height: 1.3;
}

.property-site-page .ps-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.property-site-page .ps-social-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

.property-site-page .ps-social-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.property-site-page .ps-social-handle {
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.property-site-page .ps-contact-form {
  display: grid;
  gap: 10px;
}

.property-site-page .ps-contact-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #111;
}

.property-site-page .ps-contact-form input,
.property-site-page .ps-contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #222;
  background: transparent;
  padding: 8px 0;
  color: #111;
  font-size: 15px;
  font-family: inherit;
}

.property-site-page .ps-contact-form input:focus,
.property-site-page .ps-contact-form textarea:focus {
  outline: none;
  border-bottom-color: #000;
}

.property-site-page .ps-contact-form button {
  margin-top: 8px;
  width: fit-content;
  border: 0;
  background: #070707;
  color: #fff;
  height: 34px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.property-site-page .ps-footer {
  padding: 22px 18px;
  background: #050505;
}

.property-site-page .ps-footer a {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.property-site-page .ps-footer img {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  object-fit: cover;
}

.property-site-page .ps-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.property-site-page .ps-lightbox img {
  max-width: min(1820px, 96vw);
  max-height: 94vh;
  object-fit: contain;
}

.property-site-page .ps-lightbox button {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
}

.property-site-page .ps-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed #d0d0d0;
  color: #666;
  background: #fff;
}

.property-site-page.is-access-locked .ps-top-nav,
.property-site-page.is-access-locked .ps-content,
.property-site-page.is-access-locked .ps-footer,
.property-site-page.is-access-locked .ps-top-nav * {
  pointer-events: none;
  user-select: none;
}

.property-site-page.is-access-locked .ps-hero,
.property-site-page.is-access-locked .ps-content,
.property-site-page.is-access-locked .ps-footer {
  filter: none;
  opacity: 1;
}

.property-site-page .ps-lock-backdrop {
  position: fixed;
  inset: 0;
  z-index: 138;
  background:
    linear-gradient(180deg, rgba(2, 6, 18, 0.26), rgba(0, 0, 0, 0.38)),
    rgba(0, 0, 0, 0.3);
  backdrop-filter: brightness(0.8) saturate(0.94);
  -webkit-backdrop-filter: brightness(0.8) saturate(0.94);
  pointer-events: auto;
}

.property-site-page .ps-lock-overlay {
  position: fixed;
  top: 56vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 140;
  width: min(620px, calc(100vw - 32px));
  background: transparent;
  pointer-events: none;
}

.property-site-page .ps-lock-overlay::before {
  content: none;
}

.property-site-page .ps-lock-overlay::after {
  content: none;
}

.property-site-page .ps-lock-card {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  overflow: auto;
  margin: 0;
  display: grid;
  gap: 16px;
  padding: 28px 28px 24px;
  border-radius: 28px;
  border: 1px solid rgba(176, 198, 244, 0.38);
  background:
    linear-gradient(180deg, rgba(249, 252, 255, 0.98), rgba(236, 244, 255, 0.96)),
    rgba(247, 251, 255, 0.97);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.42),
    0 18px 44px rgba(12, 32, 84, 0.22);
  pointer-events: auto;
  text-align: center;
  outline: none;
  animation: ps-lock-card-enter 240ms ease;
}

.property-site-page .ps-lock-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.property-site-page .ps-lock-header-copy {
  display: grid;
  gap: 10px;
}

.property-site-page .ps-lock-card h2 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.08;
  margin: 0;
  color: #203872;
  letter-spacing: -0.025em;
}

.property-site-page .ps-lock-card p {
  color: #31466f;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

@keyframes ps-lock-card-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.property-site-page .ps-lock-balance-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(181, 200, 239, 0.62);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  flex-wrap: wrap;
}

.property-site-page .ps-lock-balance-label {
  color: #6378a8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.property-site-page .ps-lock-balance {
  font-weight: 900;
  color: #1d3775;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
}

.property-site-page .ps-lock-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 0;
}

.property-site-page .ps-lock-pay-link,
.property-site-page .ps-lock-pay-disabled {
  min-height: 48px;
  min-width: 188px;
  padding: 0 26px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.property-site-page .ps-lock-pay-link {
  border-color: rgba(17, 35, 76, 0.92);
  background: linear-gradient(180deg, #213f82 0%, #183368 100%);
  color: #f5f8ff;
  box-shadow:
    0 14px 30px rgba(15, 31, 66, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.property-site-page .ps-lock-pay-link:hover:not(:disabled) {
  background: linear-gradient(180deg, #25488f 0%, #1b3974 100%);
  border-color: rgba(17, 35, 76, 0.98);
  box-shadow:
    0 18px 34px rgba(15, 31, 66, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.property-site-page .ps-lock-pay-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(72, 113, 205, 0.22),
    0 18px 34px rgba(15, 31, 66, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.property-site-page .ps-lock-pay-link:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
  box-shadow: none;
}

.property-site-page .ps-lock-pay-disabled {
  border-color: rgba(146, 163, 201, 0.4);
  background: rgba(244, 247, 253, 0.96);
  color: #60729a;
}

.property-site-page .ps-locked-media-card {
  gap: 12px;
}

.property-site-page .ps-locked-media-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(157, 181, 229, 0.44);
  background:
    radial-gradient(circle at 14% 16%, rgba(129, 173, 255, 0.34), transparent 54%),
    linear-gradient(145deg, #102955 0%, #081830 60%, #061124 100%);
}

.property-site-page .ps-locked-media-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.property-site-page .ps-locked-media-copy {
  display: grid;
  gap: 6px;
}

.property-site-page .ps-locked-media-copy p {
  color: #4b6192;
}

.property-site-page.variant-unbranded .ps-footer,
.property-site-page.variant-unbranded #ContactForm,
.property-site-page.variant-unbranded #ps-nav-contact {
  display: none;
}

.property-site-page.template-luxe-gallery {
  background: #0f1728;
  color: #e6edff;
}

.property-site-page.template-luxe-gallery h1,
.property-site-page.template-luxe-gallery h2,
.property-site-page.template-luxe-gallery h3 {
  color: #f4f7ff;
}

.property-site-page.template-luxe-gallery .ps-top-nav {
  border-bottom-color: rgba(167, 192, 255, 0.42);
  background: rgba(9, 15, 31, 0.68);
}

.property-site-page.template-luxe-gallery .ps-nav {
  justify-content: center;
  gap: 30px;
}

.property-site-page.template-luxe-gallery .ps-hero {
  background:
    linear-gradient(128deg, rgba(12, 21, 46, 0.48), rgba(6, 11, 23, 0.76)),
    var(--ps-hero-image, linear-gradient(140deg, #2a3a5c, #06090f));
}

.property-site-page.template-luxe-gallery .ps-hero-divider {
  display: none;
}

.property-site-page.template-luxe-gallery .ps-hero-left {
  left: 56px;
  bottom: 66px;
  align-items: flex-start;
}

.property-site-page.template-luxe-gallery .ps-hero-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: clamp(42px, 4.6vw, 76px);
  max-width: min(620px, 52vw);
}

.property-site-page.template-luxe-gallery .ps-scroll-link {
  width: 44px;
  height: 44px;
  font-size: 28px;
}

.property-site-page.template-luxe-gallery .ps-hero-right {
  right: 52px;
  bottom: 52px;
  text-align: left;
  background: rgba(8, 16, 34, 0.58);
  border: 1px solid rgba(167, 192, 255, 0.35);
  border-radius: 18px;
  padding: 18px 20px;
}

.property-site-page.template-luxe-gallery .ps-hero-price {
  font-size: clamp(50px, 5.4vw, 84px);
}

.property-site-page.template-luxe-gallery .ps-hero-metrics li {
  font-size: clamp(28px, 3.2vw, 46px);
}

.property-site-page.template-luxe-gallery .ps-section h2 {
  color: #dfe8ff;
}

.property-site-page.template-luxe-gallery .ps-description {
  color: #d2ddfa;
}

.property-site-page.template-luxe-gallery .ps-detail-text {
  color: #e8efff;
}

.property-site-page.template-luxe-gallery .ps-detail-text small {
  color: #9fb2e5;
}

.property-site-page.template-luxe-gallery .ps-detail-icon {
  color: #9eb6f6;
}

.property-site-page.template-luxe-gallery .ps-link-card,
.property-site-page.template-luxe-gallery .ps-agent-card,
.property-site-page.template-luxe-gallery .ps-map-shell {
  border-color: #2a3c63;
  background: #111c34;
}

.property-site-page.template-luxe-gallery .ps-link-card a,
.property-site-page.template-luxe-gallery .ps-agent-meta a,
.property-site-page.template-luxe-gallery .ps-agent-meta strong,
.property-site-page.template-luxe-gallery .ps-contact-copy {
  color: #dbe6ff;
}

.property-site-page.template-luxe-gallery .ps-contact-form label,
.property-site-page.template-luxe-gallery .ps-agent-meta span,
.property-site-page.template-luxe-gallery .ps-agent-head p {
  color: #9db1e0;
}

.property-site-page.template-luxe-gallery .ps-contact-form input,
.property-site-page.template-luxe-gallery .ps-contact-form textarea {
  border-bottom-color: #4e689e;
  color: #ecf1ff;
}

.property-site-page.template-luxe-gallery .ps-more-btn,
.property-site-page.template-luxe-gallery .ps-contact-form button {
  background: #2f57c5;
}

.property-site-page.template-luxe-gallery .ps-footer {
  background: #081124;
}

.property-site-page.template-editorial-story {
  background: #22161d;
  color: #f6e6ec;
  font-family: Georgia, "Times New Roman", serif;
}

.property-site-page.template-editorial-story h1,
.property-site-page.template-editorial-story h2,
.property-site-page.template-editorial-story h3 {
  color: #fff1f5;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
}

.property-site-page.template-editorial-story .ps-top-nav {
  border-bottom-color: rgba(236, 176, 196, 0.45);
  background: rgba(39, 20, 31, 0.7);
}

.property-site-page.template-editorial-story .ps-nav {
  justify-content: flex-start;
  gap: 26px;
}

.property-site-page.template-editorial-story .ps-nav a {
  letter-spacing: 0.06em;
}

.property-site-page.template-editorial-story .ps-hero {
  min-height: clamp(400px, 66vh, 700px);
  background:
    linear-gradient(122deg, rgba(61, 25, 41, 0.44), rgba(25, 11, 19, 0.8)),
    var(--ps-hero-image, linear-gradient(150deg, #5f2f44, #160f13));
}

.property-site-page.template-editorial-story .ps-hero-divider {
  left: 50%;
  background: rgba(255, 219, 232, 0.35);
}

.property-site-page.template-editorial-story .ps-hero-left {
  left: 6%;
  bottom: 44px;
  align-items: flex-start;
}

.property-site-page.template-editorial-story .ps-hero-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: clamp(38px, 4.2vw, 68px);
  max-width: min(700px, 56vw);
}

.property-site-page.template-editorial-story .ps-scroll-link {
  border-color: rgba(255, 228, 238, 0.88);
  color: #ffe8f1;
}

.property-site-page.template-editorial-story .ps-hero-right {
  right: 6%;
  bottom: 44px;
  width: min(420px, 38vw);
  text-align: right;
}

.property-site-page.template-editorial-story .ps-hero-price {
  font-size: clamp(52px, 5.7vw, 80px);
}

.property-site-page.template-editorial-story .ps-hero-metrics li {
  font-size: clamp(24px, 3vw, 42px);
}

.property-site-page.template-editorial-story .ps-content {
  width: min(1160px, calc(100% - 72px));
}

.property-site-page.template-editorial-story .ps-section h2 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffd8e6;
}

.property-site-page.template-editorial-story .ps-description {
  font-size: clamp(18px, 1.12vw, 20px);
  line-height: 1.9;
  color: #f0dbe3;
}

.property-site-page.template-editorial-story .ps-detail-icon {
  color: #ebb0c3;
}

.property-site-page.template-editorial-story .ps-detail-text,
.property-site-page.template-editorial-story .ps-link-card h3,
.property-site-page.template-editorial-story .ps-agent-head h3 {
  color: #ffe7ef;
}

.property-site-page.template-editorial-story .ps-detail-text small,
.property-site-page.template-editorial-story .ps-agent-meta span,
.property-site-page.template-editorial-story .ps-agent-head p {
  color: #cfa7b6;
}

.property-site-page.template-editorial-story .ps-link-card,
.property-site-page.template-editorial-story .ps-agent-card,
.property-site-page.template-editorial-story .ps-map-shell {
  border-color: #7d4b5f;
  background: #2f1c26;
}

.property-site-page.template-editorial-story .ps-link-card a,
.property-site-page.template-editorial-story .ps-agent-meta a,
.property-site-page.template-editorial-story .ps-agent-meta strong,
.property-site-page.template-editorial-story .ps-contact-copy {
  color: #ffe4ee;
}

.property-site-page.template-editorial-story .ps-contact-form label {
  color: #f2cedb;
}

.property-site-page.template-editorial-story .ps-contact-form input,
.property-site-page.template-editorial-story .ps-contact-form textarea {
  border-bottom-color: #b47b92;
  color: #fff3f8;
}

.property-site-page.template-editorial-story .ps-more-btn,
.property-site-page.template-editorial-story .ps-contact-form button {
  background: #8a3f5f;
}

.property-site-page.template-editorial-story .ps-footer {
  background: #170d12;
}

.property-site-page.template-minimal-mls {
  background: #f1f3f6;
  color: #101216;
}

.property-site-page.template-minimal-mls h1,
.property-site-page.template-minimal-mls h2,
.property-site-page.template-minimal-mls h3 {
  color: #111218;
}

.property-site-page.template-minimal-mls .ps-top-nav {
  border-bottom-color: #ccd1da;
  background: rgba(247, 249, 252, 0.9);
}

.property-site-page.template-minimal-mls .ps-nav {
  justify-content: flex-start;
  gap: 18px;
}

.property-site-page.template-minimal-mls .ps-nav a {
  color: #1a1f2b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.property-site-page.template-minimal-mls .ps-hero {
  min-height: clamp(350px, 58vh, 620px);
  background:
    linear-gradient(125deg, rgba(29, 35, 46, 0.5), rgba(8, 10, 13, 0.78)),
    var(--ps-hero-image, linear-gradient(145deg, #9ea4b2, #2e3138));
}

.property-site-page.template-minimal-mls .ps-hero-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.56) 78%, rgba(0, 0, 0, 0.75) 100%);
}

.property-site-page.template-minimal-mls .ps-hero-divider {
  display: none;
}

.property-site-page.template-minimal-mls .ps-hero-left {
  left: 34px;
  top: 96px;
  bottom: auto;
  align-items: flex-start;
  gap: 10px;
}

.property-site-page.template-minimal-mls .ps-hero-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: clamp(28px, 3.8vw, 52px);
  max-width: min(580px, 54vw);
}

.property-site-page.template-minimal-mls .ps-scroll-link {
  border-width: 1px;
  width: 38px;
  height: 38px;
  font-size: 24px;
}

.property-site-page.template-minimal-mls .ps-hero-right {
  right: 34px;
  bottom: 30px;
  width: min(420px, 44vw);
  text-align: left;
}

.property-site-page.template-minimal-mls .ps-hero-price {
  font-size: clamp(44px, 5.1vw, 72px);
}

.property-site-page.template-minimal-mls .ps-hero-metrics li {
  font-size: clamp(22px, 2.8vw, 34px);
}

.property-site-page.template-minimal-mls .ps-content {
  width: min(1080px, calc(100% - 44px));
  margin-top: 56px;
  margin-bottom: 74px;
}

.property-site-page.template-minimal-mls .ps-section {
  margin-bottom: 52px;
}

.property-site-page.template-minimal-mls .ps-section h2 {
  font-size: clamp(28px, 2vw, 36px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.property-site-page.template-minimal-mls .ps-photo-grid,
.property-site-page.template-minimal-mls .ps-floor-grid {
  gap: 10px;
}

.property-site-page.template-minimal-mls .ps-thumb,
.property-site-page.template-minimal-mls .ps-map-shell,
.property-site-page.template-minimal-mls .ps-agent-card,
.property-site-page.template-minimal-mls .ps-link-card {
  border: 1px solid #d1d7e1;
  border-radius: 0;
  background: #fff;
}

.property-site-page.template-minimal-mls .ps-contact-grid {
  grid-template-columns: 1fr;
}

.property-site-page.template-minimal-mls .ps-more-btn,
.property-site-page.template-minimal-mls .ps-contact-form button {
  border-radius: 0;
  background: #111;
}

.property-site-page.template-minimal-mls .ps-footer {
  background: #111;
}

.property-site-page.template-coastal-retreat {
  background: #eaf4fa;
  color: #12374c;
}

.property-site-page.template-coastal-retreat h1,
.property-site-page.template-coastal-retreat h2,
.property-site-page.template-coastal-retreat h3 {
  color: #0f3b52;
}

.property-site-page.template-coastal-retreat .ps-top-nav {
  border-bottom-color: rgba(134, 176, 197, 0.54);
  background: rgba(237, 248, 255, 0.84);
}

.property-site-page.template-coastal-retreat .ps-nav {
  justify-content: center;
  gap: 24px;
}

.property-site-page.template-coastal-retreat .ps-nav a {
  color: #155470;
}

.property-site-page.template-coastal-retreat .ps-hero {
  background:
    linear-gradient(128deg, rgba(34, 95, 122, 0.38), rgba(13, 41, 62, 0.62)),
    var(--ps-hero-image, linear-gradient(145deg, #8ac3dc, #134259));
}

.property-site-page.template-coastal-retreat .ps-hero-divider {
  left: 38%;
  background: rgba(255, 255, 255, 0.66);
}

.property-site-page.template-coastal-retreat .ps-hero-left {
  left: 8%;
}

.property-site-page.template-coastal-retreat .ps-hero-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: clamp(34px, 4vw, 64px);
  max-width: min(540px, 48vw);
}

.property-site-page.template-coastal-retreat .ps-hero-right {
  right: 40px;
  bottom: 40px;
  text-align: left;
  background: rgba(236, 249, 255, 0.9);
  border-radius: 16px;
  padding: 16px 18px;
}

.property-site-page.template-coastal-retreat .ps-hero-price {
  color: #13435d;
  text-shadow: none;
  font-size: clamp(46px, 5.2vw, 74px);
}

.property-site-page.template-coastal-retreat .ps-hero-metrics li {
  color: #1f5571;
  text-shadow: none;
  font-size: clamp(23px, 2.7vw, 36px);
}

.property-site-page.template-coastal-retreat .ps-content {
  margin-top: 72px;
}

.property-site-page.template-coastal-retreat .ps-section {
  margin-bottom: 48px;
  border: 1px solid #cce0ea;
  border-radius: 20px;
  background: #fff;
  padding: 30px;
}

.property-site-page.template-coastal-retreat .ps-section h2 {
  color: #0f4a67;
  margin-bottom: 20px;
}

.property-site-page.template-coastal-retreat .ps-description {
  color: #325f77;
}

.property-site-page.template-coastal-retreat .ps-detail-text {
  color: #163d53;
}

.property-site-page.template-coastal-retreat .ps-detail-text small {
  color: #5a8093;
}

.property-site-page.template-coastal-retreat .ps-detail-icon {
  color: #2a7598;
}

.property-site-page.template-coastal-retreat .ps-thumb,
.property-site-page.template-coastal-retreat .ps-link-card,
.property-site-page.template-coastal-retreat .ps-map-shell,
.property-site-page.template-coastal-retreat .ps-agent-card {
  border-color: #c8deea;
  border-radius: 14px;
}

.property-site-page.template-coastal-retreat .ps-contact-form input,
.property-site-page.template-coastal-retreat .ps-contact-form textarea {
  border-bottom-color: #5f8da6;
}

.property-site-page.template-coastal-retreat .ps-more-btn,
.property-site-page.template-coastal-retreat .ps-contact-form button {
  background: #2d84aa;
}

.property-site-page.template-coastal-retreat .ps-footer {
  background: #0e3c54;
}

.property-site-page.template-sunset-modern {
  background: #22111b;
  color: #ffe5da;
}

.property-site-page.template-sunset-modern h1,
.property-site-page.template-sunset-modern h2,
.property-site-page.template-sunset-modern h3 {
  color: #ffece2;
}

.property-site-page.template-sunset-modern .ps-top-nav {
  border-bottom-color: rgba(255, 200, 172, 0.46);
  background: rgba(47, 18, 31, 0.62);
}

.property-site-page.template-sunset-modern .ps-nav a {
  color: #ffd6c1;
}

.property-site-page.template-sunset-modern .ps-hero {
  background:
    linear-gradient(130deg, rgba(242, 113, 61, 0.45), rgba(74, 12, 41, 0.75)),
    var(--ps-hero-image, linear-gradient(145deg, #ff7b4a, #3a1024));
}

.property-site-page.template-sunset-modern .ps-hero-divider {
  display: none;
}

.property-site-page.template-sunset-modern .ps-hero-left {
  left: 7%;
  top: 122px;
  bottom: auto;
  align-items: flex-start;
}

.property-site-page.template-sunset-modern .ps-hero-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: clamp(40px, 4.8vw, 72px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  max-width: min(660px, 58vw);
}

.property-site-page.template-sunset-modern .ps-scroll-link {
  background: rgba(255, 240, 232, 0.2);
  border-color: rgba(255, 225, 210, 0.8);
}

.property-site-page.template-sunset-modern .ps-hero-right {
  right: 6%;
  bottom: 44px;
}

.property-site-page.template-sunset-modern .ps-hero-price {
  color: #fff2e9;
}

.property-site-page.template-sunset-modern .ps-hero-metrics li {
  color: #ffd8c5;
}

.property-site-page.template-sunset-modern .ps-section h2 {
  color: #ffb58f;
}

.property-site-page.template-sunset-modern .ps-description {
  color: #f4cfbf;
}

.property-site-page.template-sunset-modern .ps-detail-icon {
  color: #ff9d73;
}

.property-site-page.template-sunset-modern .ps-detail-text {
  color: #ffe7dd;
}

.property-site-page.template-sunset-modern .ps-detail-text small {
  color: #e7a889;
}

.property-site-page.template-sunset-modern .ps-link-card,
.property-site-page.template-sunset-modern .ps-agent-card,
.property-site-page.template-sunset-modern .ps-map-shell {
  border-color: #76415a;
  background: #2c1622;
}

.property-site-page.template-sunset-modern .ps-link-card a,
.property-site-page.template-sunset-modern .ps-agent-meta a,
.property-site-page.template-sunset-modern .ps-agent-meta strong,
.property-site-page.template-sunset-modern .ps-contact-copy {
  color: #ffe5d8;
}

.property-site-page.template-sunset-modern .ps-contact-form label,
.property-site-page.template-sunset-modern .ps-agent-meta span,
.property-site-page.template-sunset-modern .ps-agent-head p {
  color: #d59d83;
}

.property-site-page.template-sunset-modern .ps-contact-form input,
.property-site-page.template-sunset-modern .ps-contact-form textarea {
  border-bottom-color: #c3785b;
  color: #fff3ec;
}

.property-site-page.template-sunset-modern .ps-more-btn,
.property-site-page.template-sunset-modern .ps-contact-form button {
  background: #f2713d;
  color: #1b0912;
}

.property-site-page.template-sunset-modern .ps-footer {
  background: #180910;
}

.property-site-page.template-heritage-classic {
  background: #f6f1e7;
  color: #332d22;
  font-family: Georgia, "Times New Roman", serif;
}

.property-site-page.template-heritage-classic h1,
.property-site-page.template-heritage-classic h2,
.property-site-page.template-heritage-classic h3 {
  color: #322a1f;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
}

.property-site-page.template-heritage-classic .ps-top-nav {
  border-bottom-color: #c8b897;
  background: rgba(246, 241, 231, 0.94);
}

.property-site-page.template-heritage-classic .ps-nav {
  justify-content: center;
  gap: 22px;
}

.property-site-page.template-heritage-classic .ps-nav a {
  color: #5f4f35;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.property-site-page.template-heritage-classic .ps-hero {
  background:
    linear-gradient(122deg, rgba(66, 52, 32, 0.32), rgba(24, 18, 10, 0.64)),
    var(--ps-hero-image, linear-gradient(146deg, #8f7a5a, #302417));
}

.property-site-page.template-heritage-classic .ps-hero-divider {
  left: 30%;
  background: rgba(245, 233, 200, 0.76);
}

.property-site-page.template-heritage-classic .ps-hero-left {
  left: 6%;
  bottom: 30px;
}

.property-site-page.template-heritage-classic .ps-hero-title {
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 14px rgba(22, 13, 6, 0.45);
}

.property-site-page.template-heritage-classic .ps-scroll-link {
  border-color: #f5e8c8;
  color: #fff4dc;
}

.property-site-page.template-heritage-classic .ps-hero-right {
  right: 44px;
  bottom: 38px;
  text-align: left;
  background: rgba(247, 238, 220, 0.88);
  border: 1px solid #cdbd9d;
  border-radius: 14px;
  padding: 14px 16px;
}

.property-site-page.template-heritage-classic .ps-hero-price {
  color: #33291d;
  text-shadow: none;
  font-size: clamp(46px, 5vw, 70px);
}

.property-site-page.template-heritage-classic .ps-hero-metrics li {
  color: #554125;
  text-shadow: none;
  font-size: clamp(24px, 2.8vw, 38px);
}

.property-site-page.template-heritage-classic .ps-section h2 {
  color: #4d3e29;
  border-bottom: 1px solid #d6c6a6;
  padding-bottom: 8px;
}

.property-site-page.template-heritage-classic .ps-description {
  color: #4d432f;
}

.property-site-page.template-heritage-classic .ps-detail-icon {
  color: #7c6440;
}

.property-site-page.template-heritage-classic .ps-detail-text {
  color: #3d3222;
}

.property-site-page.template-heritage-classic .ps-detail-text small,
.property-site-page.template-heritage-classic .ps-agent-meta span {
  color: #8b7554;
}

.property-site-page.template-heritage-classic .ps-link-card,
.property-site-page.template-heritage-classic .ps-agent-card,
.property-site-page.template-heritage-classic .ps-map-shell {
  border-color: #d0c0a0;
  background: #fff9ee;
}

.property-site-page.template-heritage-classic .ps-link-card a,
.property-site-page.template-heritage-classic .ps-agent-meta a,
.property-site-page.template-heritage-classic .ps-agent-meta strong,
.property-site-page.template-heritage-classic .ps-contact-copy {
  color: #4b3f2b;
}

.property-site-page.template-heritage-classic .ps-contact-form label,
.property-site-page.template-heritage-classic .ps-agent-head p {
  color: #725f43;
}

.property-site-page.template-heritage-classic .ps-contact-form input,
.property-site-page.template-heritage-classic .ps-contact-form textarea {
  border-bottom-color: #8f7650;
  color: #372d1f;
}

.property-site-page.template-heritage-classic .ps-more-btn,
.property-site-page.template-heritage-classic .ps-contact-form button {
  background: #443321;
  color: #f5ecdb;
}

.property-site-page.template-heritage-classic .ps-footer {
  background: #3b2d1d;
}

@media (max-width: 1120px) {
  .property-site-page .ps-nav {
    width: min(1260px, calc(100% - 30px));
    gap: 22px;
  }

  .property-site-page .ps-content {
    width: min(1240px, calc(100% - 38px));
  }

  .property-site-page .ps-hero-left {
    left: 10%;
  }

  .property-site-page .ps-hero-right {
    right: 28px;
  }
}

@media (max-width: 900px) {
  .property-site-page .ps-hero-divider {
    left: 35%;
  }

  .property-site-page .ps-hero-left {
    left: 9%;
  }

  .property-site-page .ps-hero-price {
    font-size: clamp(44px, 7.5vw, 74px);
  }

  .property-site-page .ps-hero-metrics li {
    font-size: clamp(28px, 5.4vw, 52px);
  }

  .property-site-page .ps-details-layout {
    grid-template-columns: 1fr;
  }

  .property-site-page .ps-contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .property-site-page {
    --ps-nav-height: 52px;
  }

  .property-site-page .ps-top-nav {
    overflow-x: auto;
  }

  .property-site-page .ps-nav {
    width: max-content;
    min-width: 100%;
    justify-content: flex-start;
    padding: 0 14px;
    gap: 18px;
  }

  .property-site-page .ps-nav a {
    white-space: nowrap;
    font-size: 13px;
  }

  .property-site-page .ps-hero {
    min-height: clamp(340px, 56vh, 540px);
  }

  .property-site-page .ps-hero-divider {
    left: 36%;
  }

  .property-site-page .ps-hero-left {
    left: 8%;
    bottom: 18px;
  }

  .property-site-page .ps-hero-title {
    font-size: clamp(24px, 8vw, 36px);
  }

  .property-site-page .ps-scroll-link {
    width: 44px;
    height: 44px;
    font-size: 30px;
  }

  .property-site-page .ps-hero-right {
    right: 16px;
    bottom: 18px;
    width: min(380px, 58vw);
  }

  .property-site-page .ps-hero-metrics li {
    font-size: clamp(20px, 5.5vw, 34px);
  }

  .property-site-page .ps-content {
    width: min(1240px, calc(100% - 26px));
    margin-top: 54px;
    margin-bottom: 72px;
  }

  .property-site-page .ps-section {
    margin-bottom: 62px;
  }

  .property-site-page .ps-section h2 {
    font-size: clamp(30px, 8vw, 38px);
    margin-bottom: 20px;
  }

  .property-site-page .ps-photo-grid,
  .property-site-page .ps-floor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-site-page .ps-map-shell {
    height: 330px;
  }

  .property-site-page .ps-lightbox {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .property-site-page .ps-hero {
    min-height: clamp(300px, 52vh, 500px);
  }

  .property-site-page .ps-hero-divider {
    left: 34%;
  }

  .property-site-page .ps-hero-left {
    left: 6.5%;
  }

  .property-site-page .ps-hero-right {
    right: 12px;
    width: 61vw;
  }

  .property-site-page .ps-hero-price {
    font-size: clamp(40px, 12vw, 62px);
  }

  .property-site-page .ps-hero-metrics li {
    font-size: clamp(17px, 7.2vw, 30px);
  }

  .property-site-page .ps-content {
    width: min(1240px, calc(100% - 20px));
  }

  .property-site-page .ps-photo-grid,
  .property-site-page .ps-floor-grid {
    gap: 5px;
  }

  .property-site-page .ps-description {
    font-size: 16px;
  }
}

/* Distinct structural layouts for each property website theme */
.property-site-page.template-luxe-gallery .ps-top-nav {
  top: 14px;
  left: 50%;
  right: auto;
  width: auto;
  border: 1px solid rgba(176, 199, 246, 0.55);
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(10, 18, 37, 0.72);
  box-shadow: 0 14px 36px rgba(7, 14, 29, 0.38);
}

.property-site-page.template-luxe-gallery .ps-nav {
  width: auto;
  min-height: 0;
  padding: 7px 12px;
  justify-content: center;
  gap: 8px;
}

.property-site-page.template-luxe-gallery .ps-nav a {
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(238, 244, 255, 0.12);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.property-site-page.template-luxe-gallery .ps-mode-switch {
  margin-left: 4px;
}

.property-site-page.template-luxe-gallery .ps-photo-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(1) {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 360px;
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(2) {
  grid-row: span 2;
}

.property-site-page.template-editorial-story .ps-top-nav {
  top: 92px;
  left: 22px;
  right: auto;
  width: 190px;
  border: 1px solid rgba(234, 181, 202, 0.54);
  border-radius: 18px;
  background: rgba(42, 21, 32, 0.76);
}

.property-site-page.template-editorial-story .ps-nav {
  width: 100%;
  min-height: 0;
  padding: 12px 11px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

.property-site-page.template-editorial-story .ps-nav a {
  padding: 4px 6px;
  border-left: 2px solid transparent;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.property-site-page.template-editorial-story .ps-nav a:hover {
  border-left-color: rgba(255, 226, 238, 0.8);
}

.property-site-page.template-editorial-story .ps-mode-switch {
  margin-top: 8px;
  margin-left: 0;
  width: 100%;
  justify-content: space-between;
  border-radius: 12px;
}

.property-site-page.template-editorial-story .ps-photo-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 860px;
  margin: 0 auto;
}

.property-site-page.template-editorial-story .ps-photo-grid .ps-thumb {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(221, 174, 193, 0.44);
  aspect-ratio: 16 / 10;
}

.property-site-page.template-editorial-story .ps-photo-grid .ps-thumb:nth-child(even) {
  margin-left: auto;
  width: 86%;
}

.property-site-page.template-minimal-mls main {
  margin-left: 186px;
}

.property-site-page.template-minimal-mls .ps-top-nav {
  left: 0;
  right: auto;
  bottom: 0;
  width: 186px;
  border-right: 1px solid #ccd3de;
  border-bottom: 0;
  background: #f6f8fb;
  backdrop-filter: none;
}

.property-site-page.template-minimal-mls .ps-nav {
  width: 100%;
  min-height: 100%;
  padding: 20px 14px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

.property-site-page.template-minimal-mls .ps-mode-switch {
  margin-top: auto;
  margin-left: 0;
  background: #e9edf5;
  border-color: #ccd3df;
}

.property-site-page.template-minimal-mls .ps-mode-switch button {
  color: #22304f;
}

.property-site-page.template-minimal-mls .ps-photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.property-site-page.template-minimal-mls .ps-photo-grid .ps-thumb {
  aspect-ratio: 1 / 1;
}

.property-site-page.template-coastal-retreat .ps-top-nav {
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  border-radius: 0;
  border-bottom: 1px dashed rgba(122, 170, 192, 0.78);
  transform: none;
  background: rgba(235, 248, 255, 0.84);
}

.property-site-page.template-coastal-retreat .ps-nav {
  width: min(1260px, calc(100% - 34px));
  min-height: var(--ps-nav-height);
  padding: 0;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.property-site-page.template-coastal-retreat .ps-nav a {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.property-site-page.template-coastal-retreat .ps-mode-switch {
  margin-left: auto;
}

.property-site-page.template-coastal-retreat .ps-photo-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}

.property-site-page.template-coastal-retreat .ps-photo-grid .ps-thumb {
  flex: 0 0 min(68vw, 460px);
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
}

.property-site-page.template-sunset-modern main {
  margin-right: 84px;
}

.property-site-page.template-sunset-modern .ps-top-nav {
  left: auto;
  right: 0;
  bottom: 0;
  width: 84px;
  border-left: 1px solid rgba(255, 207, 182, 0.45);
  border-bottom: 0;
  background: rgba(30, 9, 19, 0.8);
}

.property-site-page.template-sunset-modern .ps-nav {
  width: 100%;
  min-height: 100%;
  padding: 16px 6px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.property-site-page.template-sunset-modern .ps-nav a {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.12em;
  font-size: 10px;
}

.property-site-page.template-sunset-modern .ps-mode-switch {
  margin-top: auto;
  margin-left: 0;
  flex-direction: column;
  border-radius: 14px;
  border-color: rgba(255, 208, 185, 0.55);
}

.property-site-page.template-sunset-modern .ps-mode-switch button {
  padding: 6px 7px;
}

.property-site-page.template-sunset-modern .ps-photo-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.property-site-page.template-sunset-modern .ps-photo-grid .ps-thumb {
  grid-column: span 4;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.property-site-page.template-sunset-modern .ps-photo-grid .ps-thumb:nth-child(3n + 1) {
  grid-column: span 8;
  aspect-ratio: 16 / 9;
}

.property-site-page.template-heritage-classic .ps-top-nav {
  top: 16px;
  left: 50%;
  right: auto;
  width: min(940px, calc(100% - 42px));
  border: 1px solid #cdb892;
  border-radius: 8px;
  transform: translateX(-50%);
  background: rgba(246, 241, 231, 0.96);
  box-shadow: 0 14px 28px rgba(66, 49, 25, 0.18);
}

.property-site-page.template-heritage-classic .ps-nav {
  width: 100%;
  min-height: 0;
  padding: 8px 14px;
  justify-content: center;
  gap: 0;
}

.property-site-page.template-heritage-classic .ps-nav a {
  padding: 0 16px;
  border-right: 1px solid #ccb996;
}

.property-site-page.template-heritage-classic .ps-nav a:last-of-type {
  border-right: 0;
}

.property-site-page.template-heritage-classic .ps-mode-switch {
  margin-left: 14px;
  border-color: #cbb895;
  background: #ece2d0;
}

.property-site-page.template-heritage-classic .ps-mode-switch button {
  color: #5f4f35;
}

.property-site-page.template-heritage-classic .ps-mode-switch button.active {
  color: #f4ebdb;
  background: #5a472f;
}

.property-site-page.template-heritage-classic .ps-photo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.property-site-page.template-heritage-classic .ps-photo-grid .ps-thumb {
  border: 8px solid #f2e5cc;
  box-shadow: 0 16px 36px rgba(74, 50, 17, 0.2);
  aspect-ratio: 4 / 5;
}

.property-site-page.template-heritage-classic .ps-photo-grid .ps-thumb img {
  filter: saturate(0.84) contrast(1.06);
}

.property-site-page.template-luxe-gallery .ps-hero-metrics li,
.property-site-page.template-minimal-mls .ps-hero-metrics li,
.property-site-page.template-coastal-retreat .ps-hero-metrics li,
.property-site-page.template-heritage-classic .ps-hero-metrics li {
  justify-content: flex-start;
}

/* Explicit light mode overrides so "Light" always renders as a light theme */
.property-site-page.mode-light {
  background: #f4f7fc;
  color: #1f2c47;
}

.property-site-page.mode-light h1,
.property-site-page.mode-light h2,
.property-site-page.mode-light h3 {
  color: #1a2540;
}

.property-site-page.mode-light .ps-top-nav {
  border-color: #cfd9ef;
  background: rgba(247, 250, 255, 0.9);
}

.property-site-page.mode-light .ps-nav a {
  color: #24365f;
}

.property-site-page.mode-light .ps-mode-switch {
  border-color: #c6d2ec;
  background: #eef4ff;
}

.property-site-page.mode-light .ps-mode-switch button {
  color: #2b3f6f;
}

.property-site-page.mode-light .ps-mode-switch button.active {
  color: #ffffff;
  background: #2d4f9b;
}

.property-site-page.mode-light .ps-hero-overlay {
  background: linear-gradient(180deg, rgba(242, 247, 255, 0.06) 0%, rgba(192, 210, 240, 0.34) 75%, rgba(165, 186, 224, 0.58) 100%);
}

.property-site-page.mode-light .ps-section {
  color: #233554;
}

.property-site-page.mode-light .ps-description,
.property-site-page.mode-light .ps-detail-text,
.property-site-page.mode-light .ps-link-card h3,
.property-site-page.mode-light .ps-contact-copy {
  color: #27395b;
}

.property-site-page.mode-light .ps-detail-text small,
.property-site-page.mode-light .ps-agent-meta span,
.property-site-page.mode-light .ps-agent-head p,
.property-site-page.mode-light .ps-contact-form label {
  color: #5b6f98;
}

.property-site-page.mode-light .ps-thumb,
.property-site-page.mode-light .ps-link-card,
.property-site-page.mode-light .ps-map-shell,
.property-site-page.mode-light .ps-agent-card,
.property-site-page.mode-light .ps-empty {
  background: #ffffff;
  border-color: #cfdaee;
  color: #223759;
}

.property-site-page.mode-light .ps-link-card a,
.property-site-page.mode-light .ps-agent-meta a,
.property-site-page.mode-light .ps-agent-meta strong {
  color: #1f3257;
}

.property-site-page.mode-light .ps-contact-form input,
.property-site-page.mode-light .ps-contact-form textarea {
  border-bottom-color: #6178a8;
  color: #1f3257;
}

.property-site-page.mode-light .ps-more-btn,
.property-site-page.mode-light .ps-contact-form button {
  background: #365fb7;
  color: #f5f9ff;
}

.property-site-page.mode-light .ps-footer {
  background: #dbe6f8;
}

.property-site-page.mode-light .ps-footer a {
  color: #1f3257;
}

.property-site-page.mode-light.template-luxe-gallery {
  background: #eef4ff;
  color: #1d2f52;
}

.property-site-page.mode-light.template-luxe-gallery .ps-top-nav {
  border-color: #bdd0f5;
  background: rgba(240, 247, 255, 0.95);
}

.property-site-page.mode-light.template-luxe-gallery .ps-nav a {
  color: #23427f;
  background: rgba(160, 186, 241, 0.23);
}

.property-site-page.mode-light.template-luxe-gallery .ps-hero {
  background:
    linear-gradient(128deg, rgba(223, 234, 255, 0.28), rgba(180, 200, 236, 0.42)),
    var(--ps-hero-image, linear-gradient(140deg, #a7bedf, #5f7399));
}

.property-site-page.mode-light.template-luxe-gallery .ps-hero-price,
.property-site-page.mode-light.template-luxe-gallery .ps-hero-metrics li {
  color: #19315f;
  text-shadow: none;
}

.property-site-page.mode-light.template-luxe-gallery .ps-hero-right {
  background: rgba(241, 247, 255, 0.92);
  border-color: #aac1eb;
}

.property-site-page.mode-light.template-luxe-gallery .ps-link-card,
.property-site-page.mode-light.template-luxe-gallery .ps-agent-card,
.property-site-page.mode-light.template-luxe-gallery .ps-map-shell {
  border-color: #bfd0ef;
  background: #ffffff;
}

.property-site-page.mode-light.template-luxe-gallery .ps-footer {
  background: #cddcf7;
}

.property-site-page.mode-light.template-editorial-story {
  background: #fff0f5;
  color: #552a3a;
}

.property-site-page.mode-light.template-editorial-story h1,
.property-site-page.mode-light.template-editorial-story h2,
.property-site-page.mode-light.template-editorial-story h3 {
  color: #5d2b3c;
}

.property-site-page.mode-light.template-editorial-story .ps-top-nav {
  border-color: #e4bccd;
  background: rgba(255, 241, 247, 0.95);
}

.property-site-page.mode-light.template-editorial-story .ps-nav a {
  color: #7d3f58;
}

.property-site-page.mode-light.template-editorial-story .ps-nav a:hover {
  border-left-color: rgba(132, 52, 79, 0.7);
}

.property-site-page.mode-light.template-editorial-story .ps-hero {
  background:
    linear-gradient(122deg, rgba(255, 221, 233, 0.26), rgba(246, 183, 206, 0.38)),
    var(--ps-hero-image, linear-gradient(150deg, #d7a7bb, #8a5c73));
}

.property-site-page.mode-light.template-editorial-story .ps-hero-price,
.property-site-page.mode-light.template-editorial-story .ps-hero-metrics li {
  color: #5f2a3d;
  text-shadow: none;
}

.property-site-page.mode-light.template-editorial-story .ps-link-card,
.property-site-page.mode-light.template-editorial-story .ps-agent-card,
.property-site-page.mode-light.template-editorial-story .ps-map-shell {
  border-color: #e4bccd;
  background: #fff8fb;
}

.property-site-page.mode-light.template-editorial-story .ps-footer {
  background: #efd8e2;
}

.property-site-page.mode-light.template-sunset-modern {
  background: #fff1e8;
  color: #5a2e34;
}

.property-site-page.mode-light.template-sunset-modern h1,
.property-site-page.mode-light.template-sunset-modern h2,
.property-site-page.mode-light.template-sunset-modern h3 {
  color: #63333a;
}

.property-site-page.mode-light.template-sunset-modern .ps-top-nav {
  border-color: #f2c5ad;
  background: rgba(255, 244, 236, 0.94);
}

.property-site-page.mode-light.template-sunset-modern .ps-nav a {
  color: #8a4741;
}

.property-site-page.mode-light.template-sunset-modern .ps-hero {
  background:
    linear-gradient(130deg, rgba(255, 201, 166, 0.33), rgba(255, 154, 123, 0.35)),
    var(--ps-hero-image, linear-gradient(145deg, #f4b08d, #c57473));
}

.property-site-page.mode-light.template-sunset-modern .ps-hero-price,
.property-site-page.mode-light.template-sunset-modern .ps-hero-metrics li {
  color: #673c3b;
  text-shadow: none;
}

.property-site-page.mode-light.template-sunset-modern .ps-link-card,
.property-site-page.mode-light.template-sunset-modern .ps-agent-card,
.property-site-page.mode-light.template-sunset-modern .ps-map-shell {
  border-color: #efc1aa;
  background: #fff8f3;
}

.property-site-page.mode-light.template-sunset-modern .ps-footer {
  background: #f2d4c5;
}

/* Keep hero media fully visible across templates/modes */
.property-site-page .ps-hero {
  background-size: auto, contain;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
}

/* Global light/dark mode switcher styles on property websites */
.property-site-page.mode-dark {
  background: #0d1320;
  color: #e7edf9;
}

.property-site-page.mode-dark h1,
.property-site-page.mode-dark h2,
.property-site-page.mode-dark h3 {
  color: #f3f7ff;
}

.property-site-page.mode-dark .ps-top-nav {
  border-color: #2d3a55;
  background: rgba(9, 14, 24, 0.86);
}

.property-site-page.mode-dark .ps-nav a {
  color: #e3ecff;
}

.property-site-page.mode-dark .ps-photo-filter-chip {
  border-color: #3c507e;
  background: #1a2742;
  color: #d6e5ff;
}

.property-site-page.mode-dark .ps-photo-filter-chip span {
  border-color: #5068a1;
  background: #101d35;
  color: #d6e5ff;
}

.property-site-page.mode-dark .ps-photo-filter-chip:hover {
  border-color: #6b88d8;
  background: #21345b;
  box-shadow: 0 10px 20px rgba(6, 12, 25, 0.44);
}

.property-site-page.mode-dark .ps-photo-filter-chip.is-active {
  border-color: #8fa8ff;
  background: linear-gradient(135deg, #5d7dff 0%, #7f96ff 100%);
  color: #f7f9ff;
}

.property-site-page.mode-dark .ps-mode-switch {
  border-color: #4b5f87;
  background: rgba(26, 37, 60, 0.62);
}

.property-site-page.mode-dark .ps-mode-switch button {
  color: #dce7ff;
}

.property-site-page.mode-dark .ps-mode-switch button.active {
  color: #0f1d3b;
  background: #f3f7ff;
}

.property-site-page.mode-dark .ps-hero-overlay {
  background: linear-gradient(180deg, rgba(4, 7, 13, 0.18) 0%, rgba(5, 10, 18, 0.62) 72%, rgba(5, 10, 20, 0.78) 100%);
}

.property-site-page.mode-dark .ps-section {
  color: #e2ebff;
}

.property-site-page.mode-dark .ps-description,
.property-site-page.mode-dark .ps-detail-text,
.property-site-page.mode-dark .ps-link-card h3,
.property-site-page.mode-dark .ps-contact-copy {
  color: #dfe8fb;
}

.property-site-page.mode-dark .ps-tour-provider-badge {
  border-color: #4663a0;
  background: #1c2c4d;
  color: #d8e8ff;
}

.property-site-page.mode-dark .ps-tour-provider-note {
  color: #b8c9ea;
}

.property-site-page.mode-dark .ps-tour-preview-shell {
  border-color: #355082;
  background:
    radial-gradient(circle at 14% 16%, rgba(119, 164, 255, 0.34), transparent 54%),
    linear-gradient(145deg, #0f2243 0%, #08152c 58%, #050d1e 100%);
}

.property-site-page.mode-dark .ps-tour-open-btn {
  border-color: #7f9fff;
  background: #3f62c7;
  color: #f4f8ff;
}

.property-site-page.mode-dark .ps-tour-open-btn:hover {
  background: #4b70d4;
}

.property-site-page.mode-dark .ps-detail-text small,
.property-site-page.mode-dark .ps-agent-meta span,
.property-site-page.mode-dark .ps-agent-head p,
.property-site-page.mode-dark .ps-contact-form label {
  color: #9fb2d8;
}

.property-site-page.mode-dark .ps-thumb,
.property-site-page.mode-dark .ps-link-card,
.property-site-page.mode-dark .ps-map-shell,
.property-site-page.mode-dark .ps-agent-card,
.property-site-page.mode-dark .ps-empty {
  background: #152036;
  border-color: #2e3f62;
  color: #e3edff;
}

.property-site-page.mode-dark .ps-link-card a,
.property-site-page.mode-dark .ps-agent-meta a,
.property-site-page.mode-dark .ps-agent-meta strong {
  color: #e7eeff;
}

.property-site-page.mode-dark .ps-contact-form input,
.property-site-page.mode-dark .ps-contact-form textarea {
  border-bottom-color: #4f6695;
  color: #eff4ff;
}

.property-site-page.mode-dark .ps-more-btn,
.property-site-page.mode-dark .ps-contact-form button {
  background: #4569cc;
  color: #f8fbff;
}

.property-site-page.mode-dark .ps-footer {
  background: #09101c;
}

.property-site-page .ps-link-card a.ps-tour-open-btn {
  color: #f2f7ff;
  text-decoration: none;
}

.property-site-page.mode-dark .ps-link-card a.ps-tour-open-btn {
  color: #f4f8ff;
}

@media (max-width: 1180px) {
  .property-site-page.template-luxe-gallery .ps-top-nav,
  .property-site-page.template-editorial-story .ps-top-nav,
  .property-site-page.template-heritage-classic .ps-top-nav {
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0;
    transform: none;
  }

  .property-site-page.template-luxe-gallery .ps-nav,
  .property-site-page.template-editorial-story .ps-nav,
  .property-site-page.template-heritage-classic .ps-nav {
    width: min(1260px, calc(100% - 30px));
    min-height: var(--ps-nav-height);
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
  }

  .property-site-page.template-editorial-story .ps-nav a {
    border-left: 0;
    padding: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .property-site-page.template-editorial-story .ps-nav a:hover {
    border-left-color: transparent;
    border-bottom: 2px solid rgba(255, 226, 238, 0.84);
  }

  .property-site-page.template-luxe-gallery .ps-mode-switch,
  .property-site-page.template-editorial-story .ps-mode-switch,
  .property-site-page.template-heritage-classic .ps-mode-switch {
    margin-top: 0;
    margin-left: auto;
    width: auto;
  }

  .property-site-page.template-minimal-mls main,
  .property-site-page.template-sunset-modern main {
    margin: 0;
  }

  .property-site-page.template-minimal-mls .ps-top-nav,
  .property-site-page.template-sunset-modern .ps-top-nav {
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(189, 199, 222, 0.46);
    transform: none;
  }

  .property-site-page.template-minimal-mls .ps-nav,
  .property-site-page.template-sunset-modern .ps-nav {
    width: min(1260px, calc(100% - 30px));
    min-height: var(--ps-nav-height);
    padding: 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
  }

  .property-site-page.template-sunset-modern .ps-nav a {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .property-site-page.template-sunset-modern .ps-mode-switch {
    margin-top: 0;
    margin-left: auto;
    flex-direction: row;
  }

  .property-site-page.template-minimal-mls .ps-mode-switch {
    margin-top: 0;
    margin-left: auto;
  }

  .property-site-page.template-coastal-retreat .ps-top-nav {
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0;
    transform: none;
  }

  .property-site-page.template-coastal-retreat .ps-nav {
    width: min(1260px, calc(100% - 34px));
  }

  .property-site-page.template-coastal-retreat .ps-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }

  .property-site-page.template-coastal-retreat .ps-photo-grid .ps-thumb {
    flex: auto;
  }
}

@media (max-width: 720px) {
  .property-site-page .ps-mode-switch {
    margin-left: auto;
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(1),
  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(2) {
    grid-column: span 2;
    grid-row: auto;
    min-height: 0;
  }

  .property-site-page.template-editorial-story .ps-photo-grid .ps-thumb:nth-child(even) {
    width: 100%;
    margin-left: 0;
  }

  .property-site-page.template-minimal-mls .ps-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-site-page.template-sunset-modern .ps-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-site-page.template-sunset-modern .ps-photo-grid .ps-thumb,
  .property-site-page.template-sunset-modern .ps-photo-grid .ps-thumb:nth-child(3n + 1) {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }

  .property-site-page.template-heritage-classic .ps-photo-grid {
    grid-template-columns: 1fr;
  }
}

.customers-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.customers-toolbar-form {
  margin-bottom: 0;
  grid-template-columns: minmax(220px, 320px) auto auto;
  align-items: center;
}

.customer-directory-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .customers-toolbar-actions {
    align-items: stretch;
  }

  .customers-toolbar-form {
    grid-template-columns: 1fr auto auto;
    flex: 1 1 100%;
  }

  .customers-toolbar-form-redesign {
    grid-template-columns: 1fr auto auto;
  }

  .customer-directory-actions {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .customers-toolbar-actions {
    width: 100%;
  }

  .customers-toolbar-form {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .customers-toolbar-form-redesign {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .customer-directory-actions {
    justify-content: stretch;
  }

  .customer-directory-actions .btn,
  .customer-directory-actions .customer-results-page-size {
    width: 100%;
  }
}

/* Global workspace dark mode toggle */
.theme-toggle-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 8px;
  padding: 6px 10px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

.theme-toggle-copy {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.theme-toggle-control input[type="checkbox"] {
  margin: 0;
  display: block;
  align-self: center;
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #c3cfff;
  background: #d6e0ff;
  padding: 0;
  cursor: pointer;
  appearance: none;
  position: relative;
  outline: none;
  transition: background 140ms ease, border-color 140ms ease;
}

.theme-toggle-control input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(19, 24, 47, 0.26);
  transition: transform 140ms ease, background 140ms ease;
}

.theme-toggle-control input[type="checkbox"]:checked {
  background: #3f5fae;
  border-color: #5d7fd5;
}

.theme-toggle-control input[type="checkbox"]:checked::before {
  transform: translateX(18px);
  background: #f4f7ff;
}

.theme-toggle-control input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(77, 91, 255, 0.22);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1224;
  --bg-soft: #121c35;
  --panel: #111b33;
  --line: #2a3861;
  --line-strong: #384976;
  --text: #e8efff;
  --heading-text: #e8efff;
  --muted: #a8b8de;
  --accent: #89a1ff;
  --accent-2: #6989ff;
  --good: #35c991;
  --warn: #ffba52;
  --bad: #ff6e7e;
  --shadow: 0 20px 40px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] body {
  color: var(--text);
  background: linear-gradient(180deg, #0b1224 0%, #070d1a 84%);
}

html[data-theme="dark"] .aurora {
  opacity: 0.16;
}

html[data-theme="dark"] .app-auth-page {
  background:
    radial-gradient(1200px 360px at 50% -20%, rgba(104, 131, 255, 0.2), transparent 58%),
    linear-gradient(180deg, #0a1224 0%, #081020 100%);
}

html[data-theme="dark"] .auth-portal-glow {
  opacity: 0.22;
}

html[data-theme="dark"] .auth-portal-frame {
  border-color: rgba(75, 102, 171, 0.66);
  background: linear-gradient(165deg, rgba(20, 31, 58, 0.66) 0%, rgba(15, 24, 46, 0.64) 100%);
  box-shadow:
    inset 0 1px 0 rgba(190, 209, 255, 0.08),
    0 28px 60px rgba(2, 8, 24, 0.44);
}

html[data-theme="dark"] .auth-portal-topbar,
html[data-theme="dark"] .auth-portal-sidebar,
html[data-theme="dark"] .auth-portal-panel {
  border-color: rgba(79, 106, 176, 0.62);
  background: linear-gradient(150deg, rgba(26, 41, 73, 0.7) 0%, rgba(21, 34, 62, 0.54) 100%);
}

html[data-theme="dark"] .auth-signin-card {
  border-color: #304673;
  background: rgba(15, 24, 46, 0.88);
  box-shadow: 0 26px 54px rgba(2, 10, 27, 0.54);
}

html[data-theme="dark"] .auth-signin-copy,
html[data-theme="dark"] .app-auth-page .auth-signin-card label {
  color: #a8b7dd;
}

html[data-theme="dark"] .app-auth-page .auth-signin-card .eyebrow {
  background: #1a2c56;
  color: #c8d8ff;
}

html[data-theme="dark"] .app-auth-page .auth-signin-card input {
  border-color: #344b80;
  background: #111e3b;
  color: #e8efff;
}

html[data-theme="dark"] .auth-intro,
html[data-theme="dark"] .admin-auth-intro {
  border-color: var(--line);
  background:
    radial-gradient(130% 160% at 100% -24%, rgba(91, 120, 255, 0.26), transparent 44%),
    linear-gradient(135deg, #131f3d 0%, #0f1a33 56%, #0c1730 100%);
}

html[data-theme="dark"] .admin-auth-meta-item,
html[data-theme="dark"] .admin-auth-info {
  border-color: var(--line);
  background: rgba(18, 28, 54, 0.84);
}

html[data-theme="dark"] .admin-auth-meta-item strong,
html[data-theme="dark"] .admin-auth-checklist li,
html[data-theme="dark"] .admin-auth-info h2 {
  color: #e8eeff;
}

html[data-theme="dark"] .admin-auth-meta-item span,
html[data-theme="dark"] .admin-auth-security {
  color: #b3c0e4;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-pad {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 16px 28px rgba(2, 8, 24, 0.36);
}

html[data-theme="dark"] .app-shell {
  border-color: var(--line);
  background: #0e172d;
}

html[data-theme="dark"] .sidebar {
  border-right-color: var(--line);
  background: linear-gradient(180deg, #111c35 0%, #0d1630 100%);
}

html[data-theme="dark"] .sidebar-mobile-utilities {
  border-color: #314a7b;
}

html[data-theme="dark"] .sidebar-mobile-util {
  border-color: #334977;
  background: #121f3a;
  color: #dbe4ff;
}

html[data-theme="dark"] .sidebar-mobile-util-title {
  color: #f2f5ff;
}

html[data-theme="dark"] .sidebar-mobile-util-subtitle {
  color: #9fb2de;
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .menu-subitem,
html[data-theme="dark"] .availability-local-nav-item {
  color: #dbe4ff;
}

html[data-theme="dark"] .menu-item:hover,
html[data-theme="dark"] .menu-subitem:hover,
html[data-theme="dark"] .availability-local-nav-item:hover {
  background: #1a2747;
}

html[data-theme="dark"] .menu-item.active,
html[data-theme="dark"] .menu-subitem.active {
  border-color: #485f9a;
  background: #22345f;
  color: #eef3ff;
}

html[data-theme="dark"] .menu-sidebar-divider {
  background: #314a7b;
}

html[data-theme="dark"] .menu-sidebar-note {
  color: #9fb2de;
}

html[data-theme="dark"] .menu-parent::after,
html[data-theme="dark"] .brand-block small {
  color: var(--muted);
}

html[data-theme="dark"] .menu-drag-handle {
  color: #90a4dc;
}

html[data-theme="dark"] .menu-draggable-row.is-drop-target {
  background: rgba(88, 116, 232, 0.18);
  box-shadow: inset 0 2px 0 rgba(138, 164, 255, 0.85);
}

html[data-theme="dark"] .menu-draggable-row.is-drop-target-after {
  box-shadow: inset 0 -2px 0 rgba(138, 164, 255, 0.85);
}

html[data-theme="dark"] .waitlist-redesign-hero {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(106, 129, 255, 0.28) 0%, rgba(106, 129, 255, 0) 58%),
    linear-gradient(160deg, rgba(26, 39, 71, 0.72) 0%, rgba(16, 27, 50, 0.82) 100%);
}

html[data-theme="dark"] .waitlist-redesign-eyebrow {
  border-color: #4c63a8;
  background: #1e2f56;
  color: #cbd9ff;
}

html[data-theme="dark"] .waitlist-redesign-hero-copy h3,
html[data-theme="dark"] .waitlist-card-identity h4,
html[data-theme="dark"] .waitlist-meta-pill strong,
html[data-theme="dark"] .waitlist-card-insight strong,
html[data-theme="dark"] .waitlist-redesign-empty h4 {
  color: #e9f0ff;
}

html[data-theme="dark"] .waitlist-redesign-hero-copy p,
html[data-theme="dark"] .waitlist-redesign-kpi span,
html[data-theme="dark"] .waitlist-redesign-results-head p,
html[data-theme="dark"] .waitlist-redesign-empty p,
html[data-theme="dark"] .waitlist-card-identity p,
html[data-theme="dark"] .waitlist-meta-pill span,
html[data-theme="dark"] .waitlist-card-insight span,
html[data-theme="dark"] .waitlist-card-insight p {
  color: #aab8de;
}

html[data-theme="dark"] .waitlist-redesign-kpi,
html[data-theme="dark"] .waitlist-card {
  border-color: #334a7a;
  background: #14213d;
}

html[data-theme="dark"] .waitlist-redesign-kpi strong {
  color: #f1f5ff;
}

html[data-theme="dark"] .waitlist-meta-pill {
  border-color: #375083;
  background: #1a2949;
}

html[data-theme="dark"] .waitlist-card-insight {
  border-color: #375083;
  background: #1a2948;
}

html[data-theme="dark"] .waitlist-redesign-empty {
  border-color: #3a548b;
  background: #14213d;
}

html[data-theme="dark"] .topbar {
  border-bottom-color: var(--line);
  background: rgba(9, 16, 30, 0.9);
}

html[data-theme="dark"] .chip {
  background: #1a2748;
  color: #dce7ff;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: var(--line-strong);
  background: #0f1a34;
  color: #e6eeff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #8f9fca;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: #7f9bff;
  box-shadow: 0 0 0 3px rgba(102, 130, 255, 0.24);
}

html[data-theme="dark"] label,
html[data-theme="dark"] .muted-note,
html[data-theme="dark"] .view-head p {
  color: var(--muted);
}

html[data-theme="dark"] .datetime-composer-field > span {
  color: #aebbe1;
}

html[data-theme="dark"] .datetime-composer-period-tab {
  border-color: #3a4d80;
  background: #1a2747;
  color: #d8e3ff;
}

html[data-theme="dark"] .datetime-composer-period-tab.is-active {
  border-color: #7f9bff;
  background: #2a3f6b;
  color: #f3f6ff;
}

html[data-theme="dark"] .btn-soft {
  border-color: #3a4d80;
  background: #1a2747;
  color: #d9e4ff;
}

html[data-theme="dark"] .mk-auth-message {
  color: #afbee6;
}

html[data-theme="dark"] .mk-auth-link-btn {
  color: #a8bdff;
}

html[data-theme="dark"] .btn-soft:hover {
  background: #24385f;
}

html[data-theme="dark"] .theme-toggle-control {
  border-color: #3b4d82;
  background: #192744;
  color: #dbe6ff;
}

html[data-theme="dark"] .topbar-theme-toggle {
  border-color: #3a4d80;
  background: #1a2747;
  color: #d9e4ff;
}

html[data-theme="dark"] .topbar-payg-credits-chip {
  border-color: #3e6c63;
  background: linear-gradient(150deg, #173b37 0%, #153258 100%);
  color: #bdf3e1;
}

html[data-theme="dark"] .topbar-payg-credits-chip:hover {
  background: linear-gradient(150deg, #1a4742 0%, #193d6b 100%);
}

html[data-theme="dark"] .topbar-payg-credits-meta {
  color: #95d9ce;
}

html[data-theme="dark"] .topbar-theme-toggle-track {
  border-color: #405784;
  background: #24385f;
}

html[data-theme="dark"] .topbar-theme-toggle-thumb {
  background: #e5ecff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .topbar-theme-toggle[aria-checked="true"] .topbar-theme-toggle-track {
  border-color: #8aa5ff;
  background: #7693ff;
}

html[data-theme="dark"] .topbar-theme-toggle[aria-checked="true"] .topbar-theme-toggle-thumb {
  background: #102247;
}

html[data-theme="dark"] .theme-toggle-control input[type="checkbox"] {
  border-color: #405784;
  background: #24385f;
}

html[data-theme="dark"] .theme-toggle-control input[type="checkbox"]::before {
  background: #e5ecff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .theme-toggle-control input[type="checkbox"]:checked {
  border-color: #8aa5ff;
  background: #7693ff;
}

html[data-theme="dark"] .theme-toggle-control input[type="checkbox"]:checked::before {
  background: #102247;
}

html[data-theme="dark"] .toast {
  border-color: #465a91;
  background: #1a2a4f;
  color: #eaf1ff;
}

html[data-theme="dark"] .app-shell table {
  color: var(--text);
}

html[data-theme="dark"] .app-shell table th,
html[data-theme="dark"] .app-shell table td {
  border-color: var(--line);
}

html[data-theme="dark"] .app-shell tr:nth-child(even) td {
  background: rgba(15, 24, 45, 0.58);
}

@media (max-width: 720px) {
  .theme-toggle-control {
    padding: 5px 9px;
  }

  .topbar-theme-toggle {
    padding: 5px 9px;
  }
}

@media (max-width: 700px) {
  .platform-admin-page .theme-toggle-control {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

  .platform-admin-page .topbar-theme-toggle {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }
}

/* Dark mode hardcoded-color cleanup for workspace modules */
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-bottom-color: #2a3861;
  color: #dce6ff;
}

html[data-theme="dark"] th {
  color: #9fb0da;
}

html[data-theme="dark"] .drag-handle {
  color: #8fa3d3;
}

html[data-theme="dark"] tbody[data-nav-scope] tr[data-nav-item].dragging {
  background: #1b2b4d;
}

html[data-theme="dark"] .badge.good {
  background: rgba(49, 182, 123, 0.23);
  color: #8df3c4;
}

html[data-theme="dark"] .badge.warn {
  background: rgba(227, 156, 46, 0.26);
  color: #ffd38f;
}

html[data-theme="dark"] .badge.bad {
  background: rgba(224, 84, 101, 0.24);
  color: #ffb2bc;
}

html[data-theme="dark"] .badge.neutral {
  background: rgba(104, 130, 217, 0.25);
  color: #c8d8ff;
}

html[data-theme="dark"] .white-label-status-card {
  border-color: #304472;
  background: #111d39;
}

html[data-theme="dark"] .white-label-preview-card,
html[data-theme="dark"] .white-label-setup-guide {
  border-color: #304472;
  background: #101b35;
}

html[data-theme="dark"] .white-label-enable-toggle {
  border-color: #304472;
  background: #101b35;
}

html[data-theme="dark"] .white-label-advanced-config {
  border-color: #304472;
  background: #101b35;
}

html[data-theme="dark"] .white-label-advanced-config[open] {
  background: #111d39;
}

html[data-theme="dark"] .white-label-advanced-config summary {
  color: #c8d8ff;
}

html[data-theme="dark"] .white-label-enable-toggle-copy strong {
  color: #dce7ff;
}

html[data-theme="dark"] .white-label-enable-toggle-copy small {
  color: #a8b8e3;
}

html[data-theme="dark"] .white-label-preview-label {
  color: #9db0df;
}

html[data-theme="dark"] .white-label-preview-card code {
  color: #dce7ff;
}

html[data-theme="dark"] .white-label-setup-guide h4 {
  color: #dce7ff;
}

html[data-theme="dark"] .white-label-setup-steps {
  color: #a8b8e3;
}

html[data-theme="dark"] .white-label-alert {
  border-color: #6f5630;
  background: #332512;
  color: #ffdca0;
}

html[data-theme="dark"] .white-label-status-card h4 {
  color: #97aad8;
}

html[data-theme="dark"] .white-label-check-row {
  border-color: #304472;
  background: #0f1a34;
}

html[data-theme="dark"] .white-label-check-copy strong {
  color: #dce7ff;
}

html[data-theme="dark"] .white-label-dns-table-wrap {
  border-color: #304472;
  background: #0f1a34;
}

html[data-theme="dark"] .white-label-dns-table code {
  color: #dce7ff;
}

html[data-theme="dark"] .white-label-dns-empty {
  border-color: #304472;
  background: #0f1a34;
}

html[data-theme="dark"] .white-label-dns-empty strong {
  color: #dce7ff;
}

html[data-theme="dark"] .white-label-dns-empty ul {
  color: #a9b9e3;
}

html[data-theme="dark"] .download-settings-card,
html[data-theme="dark"] .download-permissions-surface,
html[data-theme="dark"] .download-permissions-block {
  border-color: #304472;
  background: #101b35;
}

html[data-theme="dark"] .download-settings-card-head h4,
html[data-theme="dark"] .download-permissions-block-head h4 {
  color: #dce7ff;
}

html[data-theme="dark"] .download-permissions-option-content {
  border-color: #304472;
  background: #101b35;
}

html[data-theme="dark"] .download-permissions-option-content strong {
  color: #dce7ff;
}

html[data-theme="dark"] .download-permissions-option-input:checked + .download-permissions-option-content {
  border-color: #4b69c5;
  background: #172449;
  box-shadow: inset 0 0 0 1px rgba(95, 128, 235, 0.32);
}

html[data-theme="dark"] .download-settings-live-summary,
html[data-theme="dark"] .download-permissions-summary,
html[data-theme="dark"] .download-permissions-readonly {
  border-color: #304472;
  background: #0f1a34;
}

html[data-theme="dark"] .download-permissions-summary-label {
  color: #9fb2e2;
}

html[data-theme="dark"] .download-settings-preview-tile,
html[data-theme="dark"] .download-permissions-example-card,
html[data-theme="dark"] .download-permissions-filename-preview {
  border-color: #3e5282;
  background: #0f1a34;
}

html[data-theme="dark"] .download-settings-preview-tile code,
html[data-theme="dark"] .download-permissions-example-card code,
html[data-theme="dark"] .download-permissions-filename-preview code {
  color: #dce7ff;
}

html[data-theme="dark"] .download-permissions-readonly-item {
  border-color: #304472;
  background: #101b35;
}

html[data-theme="dark"] .download-permissions-readonly-item strong {
  color: #dce7ff;
}

html[data-theme="dark"] .download-permissions-readonly-item span {
  color: #9fb2e2;
}

html[data-theme="dark"] .legal-section-card,
html[data-theme="dark"] .legal-readonly-item {
  border-color: #304472;
  background: #101b35;
}

html[data-theme="dark"] .legal-workbench-hero {
  border-color: #304472;
  background: linear-gradient(120deg, #111d3a 0%, #17264a 100%);
}

html[data-theme="dark"] .legal-settings-toggle,
html[data-theme="dark"] .legal-preview-surface,
html[data-theme="dark"] .legal-preview-checkbox {
  border-color: #304472;
  background: #0f1a34;
}

html[data-theme="dark"] .legal-settings-toggle-copy strong,
html[data-theme="dark"] .legal-readonly-item strong,
html[data-theme="dark"] .legal-preview-checkbox span {
  color: #dce7ff;
}

html[data-theme="dark"] .legal-readonly-item span,
html[data-theme="dark"] .legal-file-upload-dropzone span,
html[data-theme="dark"] .legal-files-head-copy .muted-note {
  color: #9fb2e2;
}

html[data-theme="dark"] .legal-preview-checklist-item {
  border-color: #304472;
  background: #0f1a34;
}

html[data-theme="dark"] .legal-preview-checklist-item span {
  color: #9fb2e2;
}

html[data-theme="dark"] .legal-preview-checklist-item strong {
  color: #dce7ff;
}

html[data-theme="dark"] .legal-document-tool-btn {
  border-color: transparent;
  background: transparent;
  color: #dce7ff;
}

html[data-theme="dark"] .legal-document-tool-btn:hover {
  border-color: #4a6198;
  background: #16274b;
}

html[data-theme="dark"] .legal-document-tool-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(90, 121, 212, 0.26);
}

html[data-theme="dark"] .legal-document-toolbar {
  border-color: #304472;
  background: #0f1a34;
}

html[data-theme="dark"] .legal-document-field--card .legal-document-editor {
  border-color: #304472;
  background: #0f1a34;
  color: #dce7ff;
}

html[data-theme="dark"] .legal-document-editor:empty::before {
  color: #8ea5d8;
}

html[data-theme="dark"] .legal-document-editor a {
  color: #9fc0ff;
}

html[data-theme="dark"] .legal-files-shell {
  border-color: #304472;
  background: #101b35;
}

html[data-theme="dark"] .legal-files-head-copy h4 {
  color: #dce7ff;
}

html[data-theme="dark"] .legal-file-upload-dropzone {
  border-color: #3a4f80;
  background: #101b37;
  color: #dce7ff;
}

html[data-theme="dark"] .legal-file-upload-dropzone:hover {
  border-color: #5a79d4;
  background: #17274b;
}

html[data-theme="dark"] .legal-files-item {
  border-color: #304472;
  background: #0f1a34;
}

html[data-theme="dark"] .legal-files-link {
  color: #c7d8ff;
}

html[data-theme="dark"] .address-autocomplete-menu,
html[data-theme="dark"] .search-suggestions-menu,
html[data-theme="dark"] .listing-customer-search-results {
  border-color: #30416d;
  background: #0f1a34;
  box-shadow: 0 18px 34px rgba(2, 7, 22, 0.6);
}

html[data-theme="dark"] .address-autocomplete-menu button,
html[data-theme="dark"] .search-suggestions-option,
html[data-theme="dark"] .listing-customer-search-option,
html[data-theme="dark"] .order-customer-modal-search-input-wrap .search-suggestions-option {
  background: #0f1a34;
  color: #dce7ff;
}

html[data-theme="dark"] .address-autocomplete-option-main {
  color: #e7efff;
}

html[data-theme="dark"] .address-autocomplete-option-meta {
  color: #9cb0de;
}

html[data-theme="dark"] .address-autocomplete-menu button:hover,
html[data-theme="dark"] .address-autocomplete-menu button.is-active,
html[data-theme="dark"] .search-suggestions-option:hover,
html[data-theme="dark"] .search-suggestions-option:focus-visible,
html[data-theme="dark"] .search-suggestions-option.is-active,
html[data-theme="dark"] .listing-customer-search-option:hover,
html[data-theme="dark"] .listing-customer-search-option:focus-visible,
html[data-theme="dark"] .order-customer-modal-search-input-wrap .search-suggestions-option:hover,
html[data-theme="dark"] .order-customer-modal-search-input-wrap .search-suggestions-option:focus-visible {
  background: #1a2a4c;
  border-color: #43598f;
  color: #ebf2ff;
}

html[data-theme="dark"] .search-suggestions-empty,
html[data-theme="dark"] .listing-customer-search-empty,
html[data-theme="dark"] .search-suggestions-option-meta,
html[data-theme="dark"] .order-customer-modal-search-input-wrap .search-suggestions-option-meta,
html[data-theme="dark"] .order-customer-modal-search-input-wrap .search-suggestions-empty {
  color: #9cb0de;
}

html[data-theme="dark"] .customer-lookup-input-wrap.is-selected input:not([type="hidden"]) {
  border-color: #5d73c3;
  box-shadow: 0 0 0 3px rgba(88, 113, 198, 0.24);
}

html[data-theme="dark"] .customer-lookup-selected-state {
  border-color: #334671;
  background: linear-gradient(180deg, #12203b 0%, #101b34 100%);
}

html[data-theme="dark"] .customer-lookup-selected-badge {
  border-color: #4b62a6;
  background: #1a2c52;
  color: #b9cbff;
}

html[data-theme="dark"] .customer-lookup-selected-name {
  color: #dfebff;
}

html[data-theme="dark"] .customer-lookup-selected-meta {
  color: #9fb4e1;
}

html[data-theme="dark"] .customer-lookup-selected-avatar {
  background: linear-gradient(145deg, #5067b5 0%, #394c89 100%);
}

html[data-theme="dark"] .customer-lookup-selected-check {
  border-color: #4a62a8;
  background: #1a2b50;
  color: #c5d4ff;
}

html[data-theme="dark"] .order-editor-menu,
html[data-theme="dark"] .order-status-popover,
html[data-theme="dark"] .order-catalog-picker-menu {
  border-color: #31426e;
  background: #0f1a34;
  box-shadow: 0 18px 34px rgba(2, 7, 22, 0.6);
}

html[data-theme="dark"] .order-editor-menu-danger {
  border-color: #714065;
  background: #3a1730;
  color: #ffc7de;
}

html[data-theme="dark"] .order-editor-menu-danger:hover {
  background: #51203f;
}

html[data-theme="dark"] .order-postponed-section {
  border-color: #384c7e;
  background: linear-gradient(180deg, #172746 0%, #121f3b 100%);
}

html[data-theme="dark"] .order-postponed-head h4 {
  color: #e6ecff;
}

html[data-theme="dark"] .order-postponed-head p {
  color: #adc0ea;
}

html[data-theme="dark"] .order-postponed-table-wrap {
  border-color: #344878;
  background: #101b35;
}

html[data-theme="dark"] .order-postponed-chip {
  background: #2a3d70;
  border-color: #4f68aa;
  color: #dce7ff;
}

html[data-theme="dark"] .order-list-row.is-clickable:hover td {
  background: #1a2a4d;
}

html[data-theme="dark"] .order-list-row.is-clickable:focus-visible {
  outline-color: #8ca6ff;
}

html[data-theme="dark"] .order-list-row.is-canceled td {
  text-decoration-color: #95a6d0;
  color: #aebddd;
  background: #251a33;
}

html[data-theme="dark"] .order-list-row.is-clickable.is-canceled:hover td {
  background: #362043;
}

html[data-theme="dark"] .order-main-text {
  color: #e4edff;
}

html[data-theme="dark"] .order-sub-text,
html[data-theme="dark"] .order-payment-history-copy span,
html[data-theme="dark"] .order-payment-history-copy small,
html[data-theme="dark"] .order-payment-history-amount span,
html[data-theme="dark"] .order-payment-history-empty p {
  color: #9dafdc;
}

html[data-theme="dark"] .order-appointment-pill {
  background: #2a3f73;
  color: #d9e5ff;
}

html[data-theme="dark"] .order-payment-item,
html[data-theme="dark"] .order-payment-item:first-child,
html[data-theme="dark"] .order-payment-summary,
html[data-theme="dark"] .order-payment-history-empty,
html[data-theme="dark"] .order-payment-history-list {
  border-color: #2a3861;
}

html[data-theme="dark"] .order-payment-item.is-deleted {
  border-bottom-color: #5f4c33;
}

html[data-theme="dark"] .order-payment-deposit-summary {
  border-top-color: #2a3861;
}

html[data-theme="dark"] .order-payment-deposit-title {
  color: #9fb1dc;
}

html[data-theme="dark"] .order-collect-payment-deposit-summary {
  border-top-color: #2a3960;
}

html[data-theme="dark"] .order-collect-payment-deposit-title,
html[data-theme="dark"] .order-collect-payment-deposit-summary p span {
  color: #a0b4df;
}

html[data-theme="dark"] .order-collect-payment-deposit-summary p strong {
  color: #e2ebff;
}

html[data-theme="dark"] .order-payment-item-copy strong,
html[data-theme="dark"] .order-payment-item-total,
html[data-theme="dark"] .order-payment-history-copy strong,
html[data-theme="dark"] .order-payment-history-amount strong {
  color: #e2ebff;
}

html[data-theme="dark"] .order-payment-empty,
html[data-theme="dark"] .order-payment-add-form,
html[data-theme="dark"] .order-payment-reminder-card {
  border-color: #334776;
  background: #111d38;
  color: #b5c6ed;
}

html[data-theme="dark"] .order-deposit-card {
  border-color: #334776;
  background: #111d38;
}

html[data-theme="dark"] .order-deposit-toggle-card,
html[data-theme="dark"] .order-deposit-percent-card {
  border-color: #304472;
  background: #0f1a34;
}

html[data-theme="dark"] .order-deposit-toggle-copy strong,
html[data-theme="dark"] .order-deposit-percent-head strong {
  color: #dce7ff;
}

html[data-theme="dark"] .order-deposit-percent-head span,
html[data-theme="dark"] .order-deposit-percent-field span {
  color: #9fb2e2;
}

html[data-theme="dark"] .order-deposit-summary-card {
  border-color: #304472;
  background: #13213f;
}

html[data-theme="dark"] .order-deposit-summary-label {
  color: #9fb2e2;
}

html[data-theme="dark"] .order-fields-count {
  border-color: #3e5488;
  background: #182a4e;
  color: #c6d8ff;
}

html[data-theme="dark"] .order-fields-source-note {
  border-color: #3a4f82;
  background: #111d38;
  color: #a6bbe7;
}

html[data-theme="dark"] .order-custom-fields {
  border-color: #334776;
  background: #101b35;
}

html[data-theme="dark"] .order-field-input-label {
  color: #a7b8df;
}

html[data-theme="dark"] .order-field-required {
  color: #ff9abc;
}

html[data-theme="dark"] .order-field-input input,
html[data-theme="dark"] .order-field-input select,
html[data-theme="dark"] .order-field-input textarea {
  border-color: #334776;
  background: #0f1a34;
  color: #e2ebff;
}

html[data-theme="dark"] .order-custom-fields-empty {
  border-color: #3a4f82;
  background: #0f1a34;
}

html[data-theme="dark"] .order-custom-fields-empty .muted-note {
  color: #9fb1dc;
}

html[data-theme="dark"] .order-custom-checkbox {
  border-color: #334776;
  background: #0f1a34;
}

html[data-theme="dark"] .order-custom-checkbox span {
  color: #dde7ff;
}

html[data-theme="dark"] .order-deleted-items-block {
  border-color: #5a4a2f;
  background: #2d2418;
}

html[data-theme="dark"] .order-deleted-items-block .toolbar h4 {
  color: #f0d9ab;
}

html[data-theme="dark"] .order-catalog-picker-toggle {
  color: #b8c8ef;
}

html[data-theme="dark"] .order-catalog-picker-toggle:hover {
  background: #25385f;
  color: #e3ecff;
}

html[data-theme="dark"] .order-catalog-picker-option {
  background: #0f1a34;
  color: #dce7ff;
}

html[data-theme="dark"] .order-catalog-picker-option:hover,
html[data-theme="dark"] .order-catalog-picker-option.is-active {
  background: #1b2b4f;
  border-color: #42578e;
}

html[data-theme="dark"] .order-catalog-picker-name {
  color: #e4edff;
}

html[data-theme="dark"] .order-catalog-picker-meta,
html[data-theme="dark"] .order-catalog-picker-empty,
html[data-theme="dark"] .order-payment-add-field span {
  color: #9fb1dc;
}

html[data-theme="dark"] .order-catalog-picker-kind.is-product {
  background: #243a6a;
  color: #d7e5ff;
}

html[data-theme="dark"] .order-catalog-picker-kind.is-package {
  background: #224a44;
  color: #c0f6e9;
}

html[data-theme="dark"] .order-payment-history-row {
  border-bottom-color: #27365b;
}

html[data-theme="dark"] .order-payment-history-row.is-refunded {
  background: #111c34;
}

html[data-theme="dark"] .order-payment-refund-trigger {
  border-color: #405988;
  background: #20345c;
  color: #d2e0ff;
}

html[data-theme="dark"] .order-payment-refund-trigger:hover {
  border-color: #5f7fc1;
  background: #2a4576;
}

html[data-theme="dark"] .order-canceled-lock-banner {
  border-color: #783f5b;
  background: linear-gradient(180deg, #35192a 0%, #2c1522 100%);
  color: #ffc7db;
}

html[data-theme="dark"] .order-canceled-lock-banner span {
  color: #eaa9c2;
}

html[data-theme="dark"] .order-canceled-strike::before {
  border-top-color: rgba(255, 155, 193, 0.6);
}

html[data-theme="dark"] .order-create-modal,
html[data-theme="dark"] .order-with-appointment-modal,
html[data-theme="dark"] .order-appointments-modal,
html[data-theme="dark"] .order-customer-modal,
html[data-theme="dark"] .order-collect-payment-modal,
html[data-theme="dark"] .order-payment-details-modal,
html[data-theme="dark"] .order-discount-modal,
html[data-theme="dark"] .order-item-editor-modal,
html[data-theme="dark"] .calendar-day-action-modal,
html[data-theme="dark"] .calendar-reservation-action-modal,
html[data-theme="dark"] .calendar-time-off-modal,
html[data-theme="dark"] .calendar-reserve-modal,
html[data-theme="dark"] .calendar-order-editor-modal {
  border-color: #2f416d;
  background: #111c36;
  box-shadow: 0 22px 48px rgba(2, 8, 24, 0.62);
}

html[data-theme="dark"] .order-item-editor-modal {
  color-scheme: dark;
}

html[data-theme="dark"] .order-item-editor-item-card {
  border-color: rgba(126, 144, 255, 0.28);
  background: rgba(27, 35, 68, 0.92);
}

html[data-theme="dark"] .order-item-editor-item-name {
  color: #f5f7ff;
}

html[data-theme="dark"] .order-item-editor-item-meta span {
  background: rgba(93, 109, 214, 0.2);
  color: #cdd6ff;
}

html[data-theme="dark"] .calendar-weekdays div {
  color: #a7b8df;
}

html[data-theme="dark"] .calendar-cell {
  border-color: #30416d;
  background: #111d38;
}

html[data-theme="dark"] .calendar-cell.muted {
  border-color: #2a3960;
  background: #0f1830;
}

html[data-theme="dark"] .calendar-events {
  color: #d5e0fd;
}

html[data-theme="dark"] .calendar-day-action-target:hover {
  border-color: #607dc3;
  box-shadow: 0 10px 22px rgba(8, 16, 34, 0.55);
}

html[data-theme="dark"] .calendar-day-action-target:focus-visible {
  outline-color: #8da7ff;
}

html[data-theme="dark"] .calendar-month-weekdays div {
  background: #16233f;
  border-right-color: #2f406b;
  color: #dce7ff;
}

html[data-theme="dark"] .calendar-month-grid {
  border-color: #2f406b;
  background: #101a33;
}

html[data-theme="dark"] .calendar-month-cell {
  border-right-color: #29385f !important;
  border-bottom-color: #29385f !important;
  background: #101a33;
}

html[data-theme="dark"] .calendar-month-cell.is-weekend {
  background: #0e1730;
}

html[data-theme="dark"] .calendar-month-cell.is-today {
  background: #1c2946;
}

html[data-theme="dark"] .calendar-month-day-number {
  color: #e2ebff;
}

html[data-theme="dark"] .calendar-month-cell.muted .calendar-month-day-number {
  color: #7688b8;
}

html[data-theme="dark"] .calendar-month-day-count {
  color: #9fb1de;
}

html[data-theme="dark"] .calendar-month-empty {
  color: #90a4d3;
}

html[data-theme="dark"] .calendar-month-more {
  color: #b6c7ff;
}

html[data-theme="dark"] .dashboard-calendar-month-label,
html[data-theme="dark"] .dashboard-calendar-mobile-agenda-head strong {
  color: #edf3ff;
}

html[data-theme="dark"] .dashboard-calendar-panel .calendar-month-weekdays div,
html[data-theme="dark"] .dashboard-calendar-mobile-agenda-head span,
html[data-theme="dark"] .dashboard-calendar-agenda-card-meta {
  color: #9dadcf;
}

html[data-theme="dark"] .dashboard-calendar-panel .calendar-month-cell,
html[data-theme="dark"] .dashboard-calendar-panel .calendar-month-cell.is-weekend,
html[data-theme="dark"] .dashboard-calendar-panel .calendar-month-cell.is-today {
  background: transparent;
}

html[data-theme="dark"] .dashboard-calendar-panel .dashboard-calendar-mobile-day-button {
  color: #dce7ff;
}

html[data-theme="dark"] .dashboard-calendar-panel .calendar-month-cell.is-today .dashboard-calendar-mobile-day-button {
  box-shadow: inset 0 0 0 1px rgba(141, 167, 255, 0.48);
}

html[data-theme="dark"] .dashboard-calendar-panel .calendar-month-cell.is-selected .dashboard-calendar-mobile-day-button {
  background: #6f86ff;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(42, 60, 145, 0.38);
}

html[data-theme="dark"] .dashboard-calendar-mobile-agenda {
  border-top-color: #26375f;
}

html[data-theme="dark"] .dashboard-calendar-agenda-card {
  border-color: #2b3c63;
  border-left-color: var(--dashboard-calendar-agenda-color, #8da7ff);
  background: #101a33;
}

html[data-theme="dark"] .dashboard-calendar-agenda-card strong {
  color: #edf3ff;
}

html[data-theme="dark"] .dashboard-calendar-agenda-card p,
html[data-theme="dark"] .dashboard-calendar-agenda-empty {
  color: #a8b6d8;
}

html[data-theme="dark"] .dashboard-calendar-agenda-empty {
  border-color: #2d3d63;
  background: #0d162d;
}

html[data-theme="dark"] .calendar-availability-panel {
  border-color: #30416d;
  background: #121d38;
}

html[data-theme="dark"] .calendar-side-group > strong {
  color: #a8b9e3;
}

html[data-theme="dark"] .calendar-side-item {
  border-color: #2f416d;
  background: #101b35;
}

html[data-theme="dark"] .calendar-side-item span {
  color: #9db0dc;
}

html[data-theme="dark"] .calendar-side-empty {
  border-color: #385085;
  color: #9db1de;
}

html[data-theme="dark"] .calendar-day-select-btn {
  border-color: #354a7a;
  background: #162743;
  color: #c5d4f6;
}

html[data-theme="dark"] .calendar-day-select-btn strong {
  color: #e3ecff;
}

html[data-theme="dark"] .calendar-day-select-btn.is-selected {
  border-color: #6483cd;
  background: #294271;
}

html[data-theme="dark"] .btn-soft.is-active {
  border-color: #6483cd;
  background: #2c4371;
  color: #e1ebff;
}

html[data-theme="dark"] .calendar-reserve-modal-intro,
html[data-theme="dark"] .calendar-reservation-action-modal > p,
html[data-theme="dark"] .calendar-time-off-intro,
html[data-theme="dark"] .calendar-day-action-modal p {
  color: #adbee8;
}

html[data-theme="dark"] .calendar-month-event.time-off {
  background: #aa5a0b;
}

html[data-theme="dark"] .calendar-month-event.reserve {
  background: transparent;
  border-color: var(--calendar-reserve-color, #7f96ff);
  color: #dce7ff;
}

html[data-theme="dark"] .calendar-month-event.reserve strong,
html[data-theme="dark"] .calendar-month-event.reserve .calendar-month-event-team {
  color: var(--calendar-reserve-color, #93a7ff);
}

html[data-theme="dark"] .calendar-month-event.reserve span {
  color: #bfd0f8;
}

html[data-theme="dark"] .calendar-reservation-action-details {
  border-color: #334a79;
  background: #122141;
}

html[data-theme="dark"] .calendar-reservation-action-details p {
  color: #d7e3ff;
}

html[data-theme="dark"] .calendar-reserved-spots-summary {
  border-color: #3a4f81;
  background: #13223f;
  color: #bfd0ff;
}

html[data-theme="dark"] .calendar-reserved-spots-empty {
  border-color: #395084;
  background: #121f39;
  color: #a6b8e6;
}

html[data-theme="dark"] .calendar-reserved-spot-card {
  border-color: #30416d;
  background: linear-gradient(180deg, #13213d 0%, #101b34 100%);
}

html[data-theme="dark"] .calendar-reserved-spot-client {
  color: #e5eeff;
}

html[data-theme="dark"] .calendar-reserved-spot-team,
html[data-theme="dark"] .calendar-reserved-spot-address {
  color: #a6b8e6;
}

html[data-theme="dark"] .calendar-reserved-spot-meta-item {
  border-color: #31446f;
  background: #13233f;
}

html[data-theme="dark"] .calendar-reserved-spot-meta-item span {
  color: #8fa3d6;
}

html[data-theme="dark"] .calendar-reserved-spot-meta-item strong {
  color: #dbe7ff;
}

html[data-theme="dark"] .dashboard-revision-panel {
  border-color: #6a4a42;
  background: linear-gradient(180deg, #2a1c1c 0%, #231719 100%);
}

html[data-theme="dark"] .dashboard-revision-notice,
html[data-theme="dark"] .dashboard-revision-item {
  border-color: #4b3d40;
  background: #2d2023;
}

html[data-theme="dark"] .dashboard-revision-summary strong,
html[data-theme="dark"] .dashboard-revision-copy strong {
  color: #f0d9d4;
}

html[data-theme="dark"] .dashboard-revision-summary span,
html[data-theme="dark"] .dashboard-revision-copy span,
html[data-theme="dark"] .dashboard-revision-copy p,
html[data-theme="dark"] .dashboard-revision-copy small {
  color: #d1b6b0;
}

html[data-theme="dark"] .app-shell table thead th {
  background: #16233f;
}

html[data-theme="dark"] .address-map-preview-empty {
  border-color: #3a4f82;
  background: #131f39;
  color: #9fb2de;
}

html[data-theme="dark"] .order-address-panel.is-locked .stack > label > input,
html[data-theme="dark"] .order-address-panel.is-locked .order-draft-address-grid input {
  background: #162442;
  border-color: #334a79;
  color: #d4e1ff;
}

html[data-theme="dark"] .order-address-panel.is-locked .stack > label > input::placeholder,
html[data-theme="dark"] .order-address-panel.is-locked .order-draft-address-grid input::placeholder {
  color: #96aad8;
}

html[data-theme="dark"] .order-address-lock-banner {
  border-color: #334a79;
  background: linear-gradient(180deg, #152342 0%, #101c35 100%);
  color: #aec3ef;
}

html[data-theme="dark"] .order-address-lock-banner strong {
  color: #eef4ff;
}

html[data-theme="dark"] .order-draft-client-form {
  border-top-color: #2d3c66;
}

html[data-theme="dark"] .order-selected-customer-card {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .order-selected-customer-card strong {
  color: #e4edff;
}

html[data-theme="dark"] .order-selected-customer-card span,
html[data-theme="dark"] .order-selected-customer-card small {
  color: #9eb1dd;
}

html[data-theme="dark"] .order-reservation-notes-text {
  color: #c0caec;
}

html[data-theme="dark"] .customer-create-modal-intro {
  color: #a5b9e6;
}

html[data-theme="dark"] .customer-create-section {
  border-color: #334877;
  background: linear-gradient(180deg, #12203b 0%, #111d36 100%);
}

html[data-theme="dark"] .customer-create-field > span {
  color: #a8bbe7;
}

html[data-theme="dark"] .order-customer-modal-field h4,
html[data-theme="dark"] .order-collect-payment-method h5,
html[data-theme="dark"] .order-team-member-name {
  color: #e4edff;
}

html[data-theme="dark"] .order-collect-payment-summary,
html[data-theme="dark"] .order-collect-payment-method,
html[data-theme="dark"] .order-collect-payment-amount-options,
html[data-theme="dark"] .order-collect-payment-card-fields,
html[data-theme="dark"] .order-discount-source-option,
html[data-theme="dark"] .order-appointments-empty,
html[data-theme="dark"] .order-appointment-card,
html[data-theme="dark"] .order-appointments-slot-select,
html[data-theme="dark"] .order-appointments-edit-form,
html[data-theme="dark"] .order-appointments-items-fieldset,
html[data-theme="dark"] .order-appointments-team-fieldset,
html[data-theme="dark"] .order-appointment-item-option,
html[data-theme="dark"] .order-appointment-member-option,
html[data-theme="dark"] .order-appointments-slot-create,
html[data-theme="dark"] .order-team-member-option {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .order-appointment-card.is-canceled {
  border-color: #6b4453;
  background: #2f1e27;
}

html[data-theme="dark"] .order-appointment-card.is-postponed {
  border-color: #6e6145;
  background: #2b2619;
}

html[data-theme="dark"] .order-appointment-card.is-canceled::after {
  border-top-color: rgba(255, 164, 175, 0.56);
}

html[data-theme="dark"] .order-appointment-card-head h4 {
  color: #e2ebff;
}

html[data-theme="dark"] .order-appointment-card-body {
  border-top-color: #2a3960;
  border-bottom-color: #2a3960;
}

html[data-theme="dark"] .order-appointment-team-list li span,
html[data-theme="dark"] .order-appointment-card-foot,
html[data-theme="dark"] .order-team-member-copy small {
  color: #a0b4df;
}

html[data-theme="dark"] .order-appointments-slot-row.is-active .order-appointments-slot-select {
  border-color: #6483cd;
  background: #223c6b;
}

html[data-theme="dark"] .order-appointments-slot-row.is-canceled .order-appointments-slot-select {
  border-color: #6b4453;
  background: #2f1e27;
}

html[data-theme="dark"] .order-appointments-slot-select strong {
  color: #e3ecff;
}

html[data-theme="dark"] .order-appointments-slot-select span,
html[data-theme="dark"] .order-appointments-slot-select small {
  color: #a0b4df;
}

html[data-theme="dark"] .order-appointments-slot-row.is-canceled .order-appointments-slot-select small {
  color: #ffb2bc;
}

html[data-theme="dark"] .order-appointments-time-grid label,
html[data-theme="dark"] .order-collect-payment-summary-grid p span,
html[data-theme="dark"] .order-collect-payment-amount-options legend {
  color: #a0b4df;
}

html[data-theme="dark"] .order-collect-payment-summary-grid p strong,
html[data-theme="dark"] .order-collect-payment-due-now {
  color: #e2ebff;
}

html[data-theme="dark"] .order-collect-payment-processing-fee-row {
  color: #b4c6ee;
}

html[data-theme="dark"] .order-payment-details-form input[disabled] {
  color: #dce7ff;
  background: #131f3a;
  border-color: #334877;
}

html[data-theme="dark"] .order-appointments-slot-create-title {
  color: #a0b4df;
}

html[data-theme="dark"] .order-appointments-slot-create:hover,
html[data-theme="dark"] .order-appointments-slot-create:focus-within,
html[data-theme="dark"] .order-appointments-slot-create.is-open {
  border-color: #6483cd;
  background: #223c6b;
}

html[data-theme="dark"] .order-intake-section {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .order-intake-section .toolbar h4 {
  color: #e4edff;
}

html[data-theme="dark"] .order-team-member-option.is-disabled {
  background: #161f37;
}

html[data-theme="dark"] .order-team-member-option.is-busy {
  background: #1a263f;
  border-color: #415783;
  opacity: 0.62;
}

html[data-theme="dark"] .order-team-member-option.is-busy .order-team-member-name {
  color: #bdcbee;
}

html[data-theme="dark"] .order-team-member-busy-note {
  color: #d4bc81;
}

/* Dark mode full-scan fixes for remaining app modules */
html[data-theme="dark"] .metric,
html[data-theme="dark"] .reports-tab,
html[data-theme="dark"] .reports-kpi-card,
html[data-theme="dark"] .customer-team-modal-customer-list,
html[data-theme="dark"] .customer-team-modal-customer-option,
html[data-theme="dark"] .team-capacity-panel,
html[data-theme="dark"] .team-filters-panel,
html[data-theme="dark"] .team-create-card,
html[data-theme="dark"] .team-home-base-inline,
html[data-theme="dark"] .team-login-access-card,
html[data-theme="dark"] .team-product-option,
html[data-theme="dark"] .team-kebab-btn,
html[data-theme="dark"] .profile-avatar-card,
html[data-theme="dark"] .logo-card,
html[data-theme="dark"] .platform-asset-card,
html[data-theme="dark"] .platform-assets-note,
html[data-theme="dark"] .platform-asset-preview-shell,
html[data-theme="dark"] .platform-settings-hero,
html[data-theme="dark"] .platform-settings-rail,
html[data-theme="dark"] .platform-settings-active-panel,
html[data-theme="dark"] .platform-settings-module,
html[data-theme="dark"] .platform-settings-metric,
html[data-theme="dark"] .migration-top-shell,
html[data-theme="dark"] .migration-command-card,
html[data-theme="dark"] .migration-workbench-card,
html[data-theme="dark"] .migration-top-metric,
html[data-theme="dark"] .migration-latest-run,
html[data-theme="dark"] .migration-checkbox,
html[data-theme="dark"] .settings-tab-btn,
html[data-theme="dark"] .settings-toggle,
html[data-theme="dark"] .plans-id-chip,
html[data-theme="dark"] .user-edit-summary,
html[data-theme="dark"] .card,
html[data-theme="dark"] .app-store-catalog-card,
html[data-theme="dark"] .platform-oauth-callback,
html[data-theme="dark"] .platform-oauth-group,
html[data-theme="dark"] .platform-oauth-card,
html[data-theme="dark"] .storage-json-preview,
html[data-theme="dark"] .payroll-rates-table-wrap,
html[data-theme="dark"] .payroll-overview-card,
html[data-theme="dark"] .payroll-overview-metrics article,
html[data-theme="dark"] .payroll-rates-completion,
html[data-theme="dark"] .payroll-member-rate-card,
html[data-theme="dark"] .payroll-product-rate-row,
html[data-theme="dark"] .referrals-metric,
html[data-theme="dark"] .referrals-create-panel,
html[data-theme="dark"] .loyalty-tabs-panel,
html[data-theme="dark"] .loyalty-settings-summary-item,
html[data-theme="dark"] .billing-metric,
html[data-theme="dark"] .billing-method-card,
html[data-theme="dark"] .billing-payment-actions-card,
html[data-theme="dark"] .billing-insight-card,
html[data-theme="dark"] .billing-history-preview,
html[data-theme="dark"] .billing-provider-note,
html[data-theme="dark"] .billing-modal-current-method,
html[data-theme="dark"] .billing-payg-wallet-card,
html[data-theme="dark"] .billing-payg-topup-balance,
html[data-theme="dark"] .billing-payg-topup-current,
html[data-theme="dark"] .billing-payg-topup-entry-card,
html[data-theme="dark"] .billing-payg-topup-live-card {
  border-color: #334877;
  background: #121f39;
  color: #dce7ff;
}

html[data-theme="dark"] .billing-provider-managed-footnote {
  border-color: #385489;
  background: #172a4b;
  color: #c0d2ff;
}

html[data-theme="dark"] .billing-provider-managed-status,
html[data-theme="dark"] .billing-payment-method-embedded,
html[data-theme="dark"] .billing-payment-method-square {
  border-color: #334877;
  background: #121f39;
  color: #dce7ff;
}

html[data-theme="dark"] .billing-provider-managed-status p {
  color: #c0d2ff;
}

html[data-theme="dark"] .billing-provider-managed-status.is-error {
  border-color: #7e4461;
  background: #331d2a;
}

html[data-theme="dark"] .billing-provider-managed-status.is-error p {
  color: #ffc2d3;
}

html[data-theme="dark"] .reports-tab.active,
html[data-theme="dark"] .settings-tab-btn.is-active,
html[data-theme="dark"] .platform-settings-tab-btn.is-active {
  border-color: #6483cd;
  background: #223c6b;
  color: #e5eeff;
}

html[data-theme="dark"] .reports-tab:hover,
html[data-theme="dark"] .settings-tab-btn:hover,
html[data-theme="dark"] .platform-settings-tab-btn:hover,
html[data-theme="dark"] .team-product-option:hover,
html[data-theme="dark"] .team-kebab-btn:hover {
  background: #1a2d52;
  border-color: #486099;
}

html[data-theme="dark"] .metric h4,
html[data-theme="dark"] .metric-subcopy,
html[data-theme="dark"] .reports-kpi-card span,
html[data-theme="dark"] .reports-kpi-note,
html[data-theme="dark"] .reports-kpi-trend.neutral,
html[data-theme="dark"] .platform-settings-kicker,
html[data-theme="dark"] .platform-settings-metric-label,
html[data-theme="dark"] .platform-settings-metric-detail,
html[data-theme="dark"] .platform-settings-tab-eyebrow,
html[data-theme="dark"] .platform-settings-active-eyebrow,
html[data-theme="dark"] .platform-settings-active-helper,
html[data-theme="dark"] .migration-top-kicker,
html[data-theme="dark"] .migration-top-metric-label,
html[data-theme="dark"] .migration-top-metric-detail,
html[data-theme="dark"] .migration-latest-run-label,
html[data-theme="dark"] .migration-latest-run-detail,
html[data-theme="dark"] .migration-selected-workspace,
html[data-theme="dark"] .settings-tab-desc,
html[data-theme="dark"] .settings-toggle-copy span,
html[data-theme="dark"] .plans-plan-id,
html[data-theme="dark"] .plans-plan-description,
html[data-theme="dark"] .plans-includes-empty,
html[data-theme="dark"] .platform-assets-note,
html[data-theme="dark"] .platform-asset-placeholder,
html[data-theme="dark"] .platform-asset-selected-file,
html[data-theme="dark"] .platform-oauth-fields label,
html[data-theme="dark"] .platform-oauth-clear-toggle,
html[data-theme="dark"] .platform-oauth-integrations-label,
html[data-theme="dark"] .storage-guide-list,
html[data-theme="dark"] .storage-pricing-list,
html[data-theme="dark"] .billing-method-label,
html[data-theme="dark"] .billing-activation-copy,
html[data-theme="dark"] .billing-provider-copy,
html[data-theme="dark"] .billing-invoices-intro,
html[data-theme="dark"] .billing-insight-copy,
html[data-theme="dark"] .billing-insight-percent,
html[data-theme="dark"] .billing-payg-wallet-meta,
html[data-theme="dark"] .billing-history-preview li span,
html[data-theme="dark"] .referrals-code-meta,
html[data-theme="dark"] .loyalty-tab-copy,
html[data-theme="dark"] .loyalty-hero-note,
html[data-theme="dark"] .loyalty-rule-explainer,
html[data-theme="dark"] .loyalty-referral-helper-list,
html[data-theme="dark"] .loyalty-settings-summary-item span,
html[data-theme="dark"] .app-store-catalog-subtitle,
html[data-theme="dark"] .payroll-overview-metrics article span,
html[data-theme="dark"] .payroll-member-rate-card summary span,
html[data-theme="dark"] .payroll-product-rate-copy span,
html[data-theme="dark"] .payroll-step-head p,
html[data-theme="dark"] .payroll-run-presets-label,
html[data-theme="dark"] .payroll-product-rate-inline-meta,
html[data-theme="dark"] .payroll-product-tier-rate-sub,
html[data-theme="dark"] .payroll-product-rate-payout,
html[data-theme="dark"] .team-login-access-note {
  color: #9fb2de;
}

html[data-theme="dark"] .billing-payg-wallet-welcome {
  border-color: #365182;
  background: rgba(20, 34, 62, 0.92);
}

html[data-theme="dark"] .platform-assets-note strong {
  color: #d2e0ff;
}

html[data-theme="dark"] .metric strong,
html[data-theme="dark"] .reports-kpi-card strong,
html[data-theme="dark"] .platform-settings-hero h3,
html[data-theme="dark"] .platform-settings-metric-value,
html[data-theme="dark"] .platform-settings-rail-head h4,
html[data-theme="dark"] .platform-settings-active-head h3,
html[data-theme="dark"] .migration-top-head h3,
html[data-theme="dark"] .migration-top-metric-value,
html[data-theme="dark"] .migration-latest-run-value,
html[data-theme="dark"] .migration-selected-workspace strong,
html[data-theme="dark"] .migration-provider-tab-title,
html[data-theme="dark"] .settings-tab-title,
html[data-theme="dark"] .plans-plan-name,
html[data-theme="dark"] .plans-includes,
html[data-theme="dark"] .platform-asset-head h4,
html[data-theme="dark"] .profile-avatar-label,
html[data-theme="dark"] .feature-list,
html[data-theme="dark"] .app-store-catalog-title,
html[data-theme="dark"] .platform-oauth-group-head h4,
html[data-theme="dark"] .platform-oauth-card-title-row h4,
html[data-theme="dark"] .billing-method-value,
html[data-theme="dark"] .billing-payg-wallet-value,
html[data-theme="dark"] .billing-provider-title,
html[data-theme="dark"] .billing-activation-title,
html[data-theme="dark"] .billing-kicker,
html[data-theme="dark"] .billing-insight-value,
html[data-theme="dark"] .billing-history-preview li strong,
html[data-theme="dark"] .referrals-code-name,
html[data-theme="dark"] .referrals-referee-name,
html[data-theme="dark"] .payroll-overview-metrics article strong,
html[data-theme="dark"] .payroll-member-rate-card summary strong,
html[data-theme="dark"] .payroll-member-rate-meta span:last-child,
html[data-theme="dark"] .payroll-product-rate-copy strong,
html[data-theme="dark"] .payroll-product-tier-rate-title,
html[data-theme="dark"] .team-login-access-card h4 {
  color: #e4edff;
}

html[data-theme="dark"] .payroll-product-rate-price {
  color: #c9d7ff;
}

html[data-theme="dark"] .team-login-access-pill.is-ready {
  background: rgba(49, 182, 123, 0.23);
  color: #8df3c4;
}

html[data-theme="dark"] .team-login-access-pill.is-missing {
  background: rgba(220, 161, 75, 0.22);
  color: #f4d599;
}

html[data-theme="dark"] .payroll-rates-modal .toolbar {
  background: linear-gradient(180deg, #121f39 0%, #0f1a31 100%);
  border-bottom-color: #34497a;
}

html[data-theme="dark"] .payroll-member-rate-progress,
html[data-theme="dark"] .payroll-product-rate-price,
html[data-theme="dark"] .payroll-product-rate-payout {
  border-color: #3d5284;
  background: #1a2a4d;
  color: #cbd8fb;
}

html[data-theme="dark"] .payroll-product-rate-kind {
  border-color: #4a63a1;
  background: #1d325d;
  color: #d2ddff;
}

html[data-theme="dark"] .payroll-member-rate-card .payroll-product-rate-row {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .payroll-member-rate-card .payroll-product-rate-row-tiered {
  background: transparent;
}

html[data-theme="dark"] .payroll-product-tier-rate-row {
  border-color: #425b92;
  background: #162745;
  color: #bfd0f9;
}

html[data-theme="dark"] .payroll-member-rate-card .payroll-product-tier-rate-row {
  border-bottom-color: #31466f;
  background: transparent;
}

html[data-theme="dark"] .payroll-member-rate-card .payroll-product-tier-rate-row:first-child {
  border-top-color: #31466f;
}

html[data-theme="dark"] .payroll-product-tier-rate-row-fallback {
  border-color: #44639f;
  background: #112340;
}

html[data-theme="dark"] .payroll-product-tier-rate-list {
  border-left-color: #3c5488;
}

html[data-theme="dark"] .payroll-product-tier-rate-bullet {
  border-color: #48649f;
  background: #213964;
  color: #d8e4ff;
}

html[data-theme="dark"] .payroll-member-rate-card .payroll-product-tier-rate-bullet {
  border-color: #46619b;
  background: #20365f;
}

html[data-theme="dark"] .payroll-product-tier-rate-payout {
  border-color: #44619c;
  background: #223862;
  color: #d2deff;
}

html[data-theme="dark"] .payroll-member-rate-card .payroll-product-tier-rate-payout {
  border: 0;
  background: transparent;
  color: #cbd8fb;
}

html[data-theme="dark"] .payroll-product-rate-row-tiered {
  border-color: #445d99;
  background: linear-gradient(180deg, #152849 0%, #11213f 100%);
}

html[data-theme="dark"] .payroll-product-rate-state {
  border-color: #7f5449;
  background: #432a24;
  color: #ffd3c4;
}

html[data-theme="dark"] .payroll-member-rate-card summary::after {
  border-color: #47619d;
  background: #162745;
  color: #bfd0f8;
}

html[data-theme="dark"] .payroll-member-rate-card[open] summary::after {
  border-color: #5c7dff;
  background: #5c7dff;
  color: #ffffff;
}

html[data-theme="dark"] .clients-directory-name-copy strong,
html[data-theme="dark"] .customer-team-members-cell strong,
html[data-theme="dark"] .customer-team-modal-customer-copy strong,
html[data-theme="dark"] .team-service-provider-toggle strong,
html[data-theme="dark"] .team-products-field-title,
html[data-theme="dark"] .team-product-option-name {
  color: #e3ecff;
}

html[data-theme="dark"] .customer-directory-shell,
html[data-theme="dark"] .customer-teams-shell {
  border-color: #334877;
  background:
    radial-gradient(120% 120% at 98% -24%, rgba(99, 130, 255, 0.2), transparent 52%),
    linear-gradient(180deg, #121f39 0%, #111a31 100%);
}

html[data-theme="dark"] .customer-directory-head-copy p {
  color: #9fb2de;
}

html[data-theme="dark"] .customer-directory-metric {
  border-color: #35528a;
  background: linear-gradient(180deg, #152746 0%, #12213d 100%);
}

html[data-theme="dark"] .customer-directory-metric span {
  color: #aac0ed;
}

html[data-theme="dark"] .customer-directory-metric strong {
  color: #e4edff;
}

html[data-theme="dark"] .customer-directory-toolbar {
  border-color: #345184;
  background: #12233f;
}

html[data-theme="dark"] .customer-directory-table-wrap {
  border-color: #355288;
  background: #111c35;
}

html[data-theme="dark"] .customer-directory-shell .clients-directory-table thead th,
html[data-theme="dark"] .customer-teams-shell .clients-directory-table thead th {
  background: #162745;
  border-bottom-color: #355288;
}

html[data-theme="dark"] .customer-team-download-card {
  border-color: #355288;
  background: linear-gradient(180deg, #142540 0%, #10203a 100%);
}

html[data-theme="dark"] .customer-team-modal {
  border-color: #355288;
  background:
    radial-gradient(120% 120% at 100% -24%, rgba(99, 130, 255, 0.2), transparent 52%),
    #121f39;
}

html[data-theme="dark"] .customer-team-modal-head {
  border-bottom-color: #355288;
}

html[data-theme="dark"] .customer-team-modal-title-copy p,
html[data-theme="dark"] .customer-team-modal-section-copy p,
html[data-theme="dark"] .customer-team-modal-footnote {
  color: #9fb2de;
}

html[data-theme="dark"] .customer-team-modal-count-pill {
  border-color: #3f5d96;
  background: #1b2e53;
  color: #c4d4fb;
}

html[data-theme="dark"] .customer-team-modal-section,
html[data-theme="dark"] .customer-team-modal-customer-section {
  border-color: #355288;
  background: #132442;
}

html[data-theme="dark"] .customer-team-modal-section-copy h4 {
  color: #e4edff;
}

html[data-theme="dark"] .customer-team-download-head strong {
  color: #e4edff;
}

html[data-theme="dark"] .customer-team-download-head span,
html[data-theme="dark"] .customer-team-download-hint {
  color: #9fb2de;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-results,
html[data-theme="dark"] .customer-pricing-plan-assignment-selected-shell {
  border-color: #334877;
  background: #121f39;
  color: #dce7ff;
}

html[data-theme="dark"] .customer-pricing-plan-modal .products-editor-accordion-card,
html[data-theme="dark"] .customer-pricing-plan-assignment-panel,
html[data-theme="dark"] .customer-pricing-plan-assignment-result-card,
html[data-theme="dark"] .customer-pricing-plan-assignment-selected-card,
html[data-theme="dark"] .customer-pricing-plan-rule-panel,
html[data-theme="dark"] .customer-pricing-plan-rule-row {
  border-color: #334877;
  background: #121f39;
  color: #dce7ff;
}

html[data-theme="dark"] .customer-pricing-plan-modal .products-editor-accordion-toggle,
html[data-theme="dark"] .customer-pricing-plan-assignment-head {
  background: #172746;
  border-color: #2c406c;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-head {
  border-bottom-color: #2c406c;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-accordion:not([open]) .customer-pricing-plan-assignment-head {
  border-bottom-color: transparent;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-note {
  border-color: #334877;
  background: #172746;
  color: #9db0d7;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-result-card:hover {
  border-color: #5474b7;
  background: #1a2d4f;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-selected-card {
  background: #172746;
}

html[data-theme="dark"] .customer-pricing-plan-rule-tabs .products-services-tab {
  border-color: #3a5287;
  background: #172746;
  color: #b8c9ee;
}

html[data-theme="dark"] .customer-pricing-plan-rule-tabs .products-services-tab.active {
  border-color: #6483cd;
  background: #223c6b;
  color: #e5eeff;
}

html[data-theme="dark"] .customer-pricing-plan-rule-panel {
  background: transparent;
  border-color: transparent;
}

html[data-theme="dark"] .customer-pricing-plan-rule-panel .customer-pricing-plan-rule-row {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .customer-pricing-plan-rule-panel .customer-pricing-plan-rule-row-tiered {
  background: transparent;
}

html[data-theme="dark"] .customer-pricing-plan-rule-panel .payroll-product-tier-rate-row {
  border-bottom-color: #31466f;
}

html[data-theme="dark"] .customer-pricing-plan-rule-panel .payroll-product-tier-rate-row:first-child {
  border-top-color: #31466f;
}

html[data-theme="dark"] .customer-pricing-plan-rule-panel .payroll-product-tier-rate-bullet {
  border-color: #46619b;
  background: #20365f;
}

html[data-theme="dark"] .customer-pricing-plan-rule-panel .payroll-product-tier-rate-payout {
  background: transparent;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-head strong,
html[data-theme="dark"] .customer-pricing-plan-assignment-copy strong,
html[data-theme="dark"] .customer-pricing-plan-rule-panel-head strong {
  color: #e3ebff;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-kicker,
html[data-theme="dark"] .customer-pricing-plan-assignment-count {
  color: #b8c9ee;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-count {
  border-color: #445d93;
  background: #1d3157;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-chevron {
  border-color: #aebfe8;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-head small,
html[data-theme="dark"] .customer-pricing-plan-assignment-copy small,
html[data-theme="dark"] .customer-pricing-plan-assignment-section-head small,
html[data-theme="dark"] .customer-pricing-plan-rule-panel-head small,
html[data-theme="dark"] .customer-pricing-plan-rule-inline-meta {
  color: #9db0d7;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-section-head strong,
html[data-theme="dark"] .customer-pricing-plan-assignment-avatar {
  color: #dce7ff;
}

html[data-theme="dark"] .customer-pricing-plan-assignment-avatar {
  background: #23395f;
}

html[data-theme="dark"] .team-products-picker {
  border-color: #334877;
  background: linear-gradient(180deg, #12203b 0%, #101a31 100%);
}

html[data-theme="dark"] .team-products-selection-summary,
html[data-theme="dark"] .team-product-option-price {
  color: #9fb2de;
}

html[data-theme="dark"] .team-products-search input[type="search"] {
  border-color: #334877;
  background: #0f1a31;
  color: #dce7ff;
}

html[data-theme="dark"] .team-product-option {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .team-product-option:hover {
  border-color: #4c629a;
  background: #1a2c4f;
}

html[data-theme="dark"] .team-product-option.is-selected {
  border-color: #6687de;
  background: #213a65;
  box-shadow: inset 0 0 0 1px rgba(124, 160, 239, 0.28);
}

html[data-theme="dark"] .team-product-option-status.is-active {
  background: rgba(49, 182, 123, 0.23);
  color: #8df3c4;
}

html[data-theme="dark"] .team-product-option-status.is-inactive {
  background: rgba(220, 161, 75, 0.22);
  color: #f4d599;
}

html[data-theme="dark"] .team-home-base-inline-details {
  border-top-color: #334877;
}

html[data-theme="dark"] .clients-directory-name-copy span,
html[data-theme="dark"] .customer-team-members-cell span,
html[data-theme="dark"] .customer-team-modal-customer-copy small,
html[data-theme="dark"] .team-service-provider-toggle small {
  color: #9fb2de;
}

html[data-theme="dark"] .team-daypart-override-shell {
  border-color: #314b7f;
  background: #122340;
}

html[data-theme="dark"] .team-daypart-override-head h4 {
  color: #dbe6ff;
}

html[data-theme="dark"] .daypart-override-grid.is-disabled {
  opacity: 0.75;
}

html[data-theme="dark"] .daypart-override-row.is-disabled {
  background: #172846;
}

html[data-theme="dark"] .clients-sort-trigger:hover {
  color: #d3e1ff;
}

html[data-theme="dark"] .clients-sort-trigger.is-active {
  color: #b7cbff;
}

html[data-theme="dark"] .customer-directory-row:hover td {
  background: #1a2a4d;
}

html[data-theme="dark"] .customer-directory-row.is-active td {
  background: #243a64;
}

html[data-theme="dark"] .customer-directory-empty-row td {
  color: #a4b8e5;
}

html[data-theme="dark"] .customer-results-footer .listing-results-summary {
  color: #9fb3df;
}

html[data-theme="dark"] .customer-results-footer .listing-results-pagination {
  border-color: #35538a;
  background: #152746;
}

html[data-theme="dark"] .customer-team-status-pill.is-active {
  background: rgba(49, 182, 123, 0.23);
  color: #8df3c4;
}

html[data-theme="dark"] .customer-team-status-pill.is-inactive,
html[data-theme="dark"] .customer-team-count-pill,
html[data-theme="dark"] .customer-team-role-pill {
  background: #253b69;
  color: #d2e0ff;
}

html[data-theme="dark"] .client-avatar-preview,
html[data-theme="dark"] .team-member-avatar,
html[data-theme="dark"] .team-photo-preview img,
html[data-theme="dark"] .profile-avatar-preview,
html[data-theme="dark"] .logo-preview,
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .platform-brand-logo,
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .platform-asset-preview-shell,
html[data-theme="dark"] .logo-placeholder {
  border-color: #334877;
  background: #121f39;
  color: #cfe0ff;
}

html[data-theme="dark"] .customer-editor-hero-avatar,
html[data-theme="dark"] .customer-edit-card,
html[data-theme="dark"] .customer-edit-avatar-summary,
html[data-theme="dark"] .customer-edit-helper-callout,
html[data-theme="dark"] .customer-settings-card,
html[data-theme="dark"] .customer-settings-picker,
html[data-theme="dark"] .customer-social-overview,
html[data-theme="dark"] .customer-social-field,
html[data-theme="dark"] .customer-notes-form-card,
html[data-theme="dark"] .customer-password-reset-shell {
  border-color: #334877;
  background: #13213d;
}

html[data-theme="dark"] .customer-editor-hero-meta span,
html[data-theme="dark"] .customer-edit-avatar-shell,
html[data-theme="dark"] .customer-section-pill,
html[data-theme="dark"] .customer-social-status-chip,
html[data-theme="dark"] .customer-social-platform-token,
html[data-theme="dark"] .customer-settings-toggle {
  border-color: #334877;
  background: #101d36;
}

html[data-theme="dark"] .customer-edit-avatar-copy strong,
html[data-theme="dark"] .customer-edit-card h4,
html[data-theme="dark"] .customer-edit-helper-callout strong,
html[data-theme="dark"] .customer-password-reset-copy h4,
html[data-theme="dark"] .customer-settings-card-head h4 {
  color: #e3ecff;
}

html[data-theme="dark"] .customer-editor-hero-meta span,
html[data-theme="dark"] .customer-edit-avatar-copy span,
html[data-theme="dark"] .customer-edit-helper-callout p,
html[data-theme="dark"] .customer-password-reset-helper,
html[data-theme="dark"] .customer-password-reset-permission,
html[data-theme="dark"] .customer-password-reset-list,
html[data-theme="dark"] .customer-notes-guide-list,
html[data-theme="dark"] .customer-social-field small,
html[data-theme="dark"] .customer-settings-card-head p,
html[data-theme="dark"] .customer-settings-select-field > small,
html[data-theme="dark"] .customer-settings-picker label > small,
html[data-theme="dark"] .customer-edit-section-title p {
  color: #9fb2de;
}

html[data-theme="dark"] .customer-section-pill,
html[data-theme="dark"] .customer-social-label-row,
html[data-theme="dark"] .customer-social-status-chip,
html[data-theme="dark"] .customer-settings-notes-field > span,
html[data-theme="dark"] .customer-settings-select-field > span,
html[data-theme="dark"] .customer-settings-picker label > span {
  color: #bdd1ff;
}

html[data-theme="dark"] .customer-social-status-chip.is-empty {
  color: #9fb2de;
}

html[data-theme="dark"] .customer-social-platform-token {
  color: #c8d8ff;
}

html[data-theme="dark"] .customer-section-pill.is-good {
  border-color: #2f6f54;
  background: rgba(34, 121, 84, 0.25);
  color: #8ff1c3;
}

html[data-theme="dark"] .customer-section-pill.is-warning {
  border-color: #7a6335;
  background: rgba(122, 99, 53, 0.28);
  color: #ffd79a;
}

html[data-theme="dark"] .customer-edit-avatar-placeholder {
  color: #b7c7ea;
}

html[data-theme="dark"] .customer-edit-avatar-placeholder span {
  background: #233a68;
  color: #d8e6ff;
}

html[data-theme="dark"] .reports-kpi-trend.positive {
  color: #8df3c4;
}

html[data-theme="dark"] .reports-kpi-trend.negative {
  color: #ffb2bc;
}

html[data-theme="dark"] .team-members-table th,
html[data-theme="dark"] .referrals-table th,
html[data-theme="dark"] .billing-invoices-table thead th,
html[data-theme="dark"] .invoice-items-table thead th,
html[data-theme="dark"] .payroll-rates-table thead th,
html[data-theme="dark"] .payroll-rates-table thead th:first-child,
html[data-theme="dark"] .payroll-rates-table th:first-child,
html[data-theme="dark"] .payroll-rates-table td:first-child {
  background: #16233f;
}

html[data-theme="dark"] .payroll-member-rate-card summary {
  background: #172845;
}

html[data-theme="dark"] .payroll-overview-steps span {
  border-color: #3f5a8d;
  background: #1a2f53;
  color: #d7e3ff;
}

html[data-theme="dark"] .payroll-step-index {
  background: #4d76ff;
  color: #ffffff;
}

html[data-theme="dark"] .payroll-run-row-selected td {
  background: #22375f;
}

html[data-theme="dark"] .payroll-runs-panel thead th {
  background: #16233f;
}

html[data-theme="dark"] .payroll-runs-panel tbody tr:hover td {
  background: #1b2d50;
}

html[data-theme="dark"] .referrals-delete-btn {
  border-color: #714065;
  background: #3a1730;
  color: #ffc7de;
}

html[data-theme="dark"] .referrals-delete-btn:hover {
  background: #51203f;
}

html[data-theme="dark"] .loyalty-rule-explainer {
  border-color: #405685;
  background: #162746;
}

html[data-theme="dark"] .loyalty-referral-helper-list {
  border-color: #405685;
  background: #162746;
}

html[data-theme="dark"] .loyalty-rule-explainer strong {
  color: #e6eeff;
}

html[data-theme="dark"] .loyalty-referral-helper-list strong {
  color: #e6eeff;
}

html[data-theme="dark"] .referrals-hero-panel,
html[data-theme="dark"] .loyalty-hero-panel,
html[data-theme="dark"] .billing-membership-panel,
html[data-theme="dark"] .billing-payment-panel,
html[data-theme="dark"] .billing-payment-panel-readonly,
html[data-theme="dark"] .billing-invoices-panel,
html[data-theme="dark"] .billing-invoices-modal,
html[data-theme="dark"] .billing-activation-modal,
html[data-theme="dark"] .billing-payg-topup-modal {
  border-color: #334877;
  background:
    radial-gradient(120% 120% at 96% -20%, rgba(102, 130, 255, 0.2), transparent 52%),
    linear-gradient(145deg, #121f39 0%, #0f1a34 100%);
}

html[data-theme="dark"] .platform-settings-hero {
  border-color: #37508a;
  background:
    radial-gradient(120% 120% at 96% -20%, rgba(105, 128, 255, 0.24), transparent 52%),
    radial-gradient(100% 120% at -10% 120%, rgba(25, 166, 138, 0.18), transparent 52%),
    linear-gradient(145deg, #111f39 0%, #0f1a34 100%);
}

html[data-theme="dark"] .platform-settings-tab-icon {
  background: linear-gradient(145deg, #324f9d 0%, #5679f2 100%);
}

html[data-theme="dark"] .platform-settings-metric {
  background: rgba(20, 34, 63, 0.86);
}

html[data-theme="dark"] .migration-top-shell {
  border-color: #39528e;
  background:
    radial-gradient(120% 140% at 98% -24%, rgba(94, 118, 255, 0.24), transparent 46%),
    radial-gradient(110% 120% at -10% 120%, rgba(19, 146, 122, 0.2), transparent 56%),
    linear-gradient(145deg, #111f39 0%, #0f1a34 100%);
}

html[data-theme="dark"] .migration-provider-tab {
  border-color: #35508a;
  background: #152645;
}

html[data-theme="dark"] .billing-activation-banner {
  border-color: #4461a2;
  background: linear-gradient(130deg, #223c6b 0%, #1a2f57 72%);
}

html[data-theme="dark"] .dashboard-activation-panel {
  border-color: #39558f;
  background:
    radial-gradient(120% 140% at 50% -18%, rgba(108, 132, 255, 0.2), transparent 54%),
    radial-gradient(100% 130% at 10% 120%, rgba(59, 168, 141, 0.16), transparent 52%),
    linear-gradient(145deg, #12213d 0%, #0f1a32 72%);
}

html[data-theme="dark"] .dashboard-activation-kicker {
  border-color: #405c97;
  background: rgba(22, 35, 66, 0.88);
  color: #b7c7ff;
}

html[data-theme="dark"] .dashboard-activation-notice h3 {
  color: #eef3ff;
}

html[data-theme="dark"] .dashboard-activation-copy {
  color: #b2c2e7;
}

html[data-theme="dark"] .dashboard-activation-meta span {
  border-color: #314a7e;
  background: rgba(18, 31, 58, 0.88);
  color: #c4d2f5;
}

html[data-theme="dark"] .billing-method-card-hero {
  border-color: #4a67aa;
  background: linear-gradient(145deg, #223d6d 0%, #1b315a 100%);
}

html[data-theme="dark"] .billing-payment-actions-card {
  border-color: #4866ab;
  background: linear-gradient(150deg, #1f3865 0%, #172c52 100%);
}

html[data-theme="dark"] .billing-payg-topup-btn {
  border-color: #446b65;
  background: #163b37;
  color: #b9f1de;
}

html[data-theme="dark"] .billing-payg-topup-btn:hover {
  background: #1b4843;
}

html[data-theme="dark"] .billing-cancel-btn {
  border-color: #714065;
  background: #3a1730;
  color: #ffc7de;
}

html[data-theme="dark"] .billing-cancel-btn:hover {
  background: #51203f;
}

html[data-theme="dark"] .billing-metric-price {
  background: linear-gradient(145deg, #233e70 0%, #1b315b 100%);
}

html[data-theme="dark"] .billing-insight-card,
html[data-theme="dark"] .billing-history-preview {
  border-color: #4663a6;
  background: linear-gradient(150deg, #1c3460 0%, #172a4f 100%);
}

html[data-theme="dark"] .billing-payg-wallet-card,
html[data-theme="dark"] .billing-payg-topup-balance,
html[data-theme="dark"] .billing-payg-topup-current {
  border-color: #3e5f99;
  background: linear-gradient(150deg, #173258 0%, #132947 100%);
}

html[data-theme="dark"] .billing-payg-topup-current-credits {
  color: #e4edff;
}

html[data-theme="dark"] .billing-upgrade-modal-head {
  border-bottom-color: #3b568e;
}

html[data-theme="dark"] .billing-upgrade-current-main strong {
  color: #e4ecff;
}

html[data-theme="dark"] .billing-upgrade-current-level-label {
  color: #9fb4e9;
}

html[data-theme="dark"] .billing-upgrade-current-main span {
  color: #b9c8ff;
}

html[data-theme="dark"] .billing-upgrade-pricing-note {
  color: #9fb4e9;
}

html[data-theme="dark"] .billing-upgrade-plan-mode {
  color: #9fb4e9;
}

html[data-theme="dark"] .billing-upgrade-plan-card:hover {
  border-color: #5f7fc2;
  box-shadow: 0 10px 22px rgba(8, 16, 33, 0.45);
}

html[data-theme="dark"] .billing-upgrade-plan-current-badge {
  border-color: #5578bf;
  background: #1a315b;
  color: #c9d7ff;
}

html[data-theme="dark"] .billing-upgrade-plan-benefits p {
  color: #c9d7ff;
}

html[data-theme="dark"] .billing-enterprise-estimate-panel {
  border-color: #3e5a94;
  background: rgba(19, 36, 63, 0.78);
}

html[data-theme="dark"] .billing-enterprise-heading,
html[data-theme="dark"] .billing-enterprise-estimate-label {
  color: #a9bce8;
}

html[data-theme="dark"] .billing-enterprise-estimate-label strong,
html[data-theme="dark"] .billing-enterprise-estimate-price {
  color: #e1eaff;
}

html[data-theme="dark"] .billing-enterprise-estimate-meta {
  color: #b8c9ef;
}

html[data-theme="dark"] .billing-enterprise-estimate-standard {
  color: #9fb4e9;
}

html[data-theme="dark"] .billing-enterprise-slider::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    #5d72ff 0%,
    #7587ff var(--billing-enterprise-slider-progress),
    #253d6d var(--billing-enterprise-slider-progress),
    #253d6d 100%
  );
  border-color: #4363a2;
}

html[data-theme="dark"] .billing-enterprise-slider::-webkit-slider-thumb {
  border-color: #859cff;
  background: #dfe7ff;
  box-shadow: 0 2px 8px rgba(7, 15, 30, 0.45);
}

html[data-theme="dark"] .billing-enterprise-slider::-moz-range-track {
  background: #253d6d;
  border-color: #4363a2;
}

html[data-theme="dark"] .billing-enterprise-slider::-moz-range-progress {
  background: linear-gradient(90deg, #5d72ff 0%, #7587ff 100%);
}

html[data-theme="dark"] .billing-enterprise-slider::-moz-range-thumb {
  border-color: #859cff;
  background: #dfe7ff;
  box-shadow: 0 2px 8px rgba(7, 15, 30, 0.45);
}

html[data-theme="dark"] .billing-payg-topup-balance-chip {
  border-color: #3f5f95;
  background: rgba(14, 28, 51, 0.74);
}

html[data-theme="dark"] .billing-payg-topup-balance-chip span {
  color: #9fb2de;
}

html[data-theme="dark"] .billing-payg-topup-balance-chip strong {
  color: #dce7ff;
}

html[data-theme="dark"] .billing-payg-topup-estimated {
  border-color: #3f5f95;
  background: rgba(14, 28, 51, 0.74);
}

html[data-theme="dark"] .billing-payg-topup-estimated span {
  color: #9fb2de;
}

html[data-theme="dark"] .billing-payg-topup-estimated strong {
  color: #dce7ff;
}

html[data-theme="dark"] .billing-payg-topup-live-card,
html[data-theme="dark"] .billing-payg-topup-entry-card {
  border-color: #3f5f95;
  background: rgba(14, 28, 51, 0.74);
}

html[data-theme="dark"] .billing-payg-topup-section-eyebrow {
  color: #a7bae7;
}

html[data-theme="dark"] .billing-payg-topup-section-copy {
  color: #b8c8ed;
}

html[data-theme="dark"] .billing-payg-topup-section-badge {
  border-color: #4a6aa6;
  background: rgba(93, 114, 255, 0.16);
  color: #d3ddff;
}

html[data-theme="dark"] .billing-payg-topup-live-quote {
  color: #c3d4ff;
}

html[data-theme="dark"] .billing-payg-topup-summary-row {
  border-top-color: rgba(74, 106, 166, 0.75);
}

html[data-theme="dark"] .billing-payg-topup-summary-row span {
  color: #a7bae7;
}

html[data-theme="dark"] .billing-payg-topup-summary-row strong {
  color: #e2eaff;
}

html[data-theme="dark"] .billing-payg-topup-footnote {
  border-top-color: #4a6aa6;
}

html[data-theme="dark"] .billing-payg-topup-provider-note {
  border-color: #3f5f95;
  background: rgba(14, 28, 51, 0.74);
}

html[data-theme="dark"] .billing-payg-topup-notes {
  border-color: #3f5f95;
  background: rgba(14, 28, 51, 0.74);
}

html[data-theme="dark"] .billing-payg-topup-note-grid {
  border-top-color: #3f5f95;
}

html[data-theme="dark"] .billing-payg-topup-note-primary {
  color: #c8d7ff;
}

html[data-theme="dark"] .billing-payg-wallet-stat {
  border-color: #3f5f95;
  background: rgba(14, 28, 51, 0.74);
}

html[data-theme="dark"] .billing-payg-wallet-stat:hover {
  border-color: #6e8ecf;
  background: rgba(22, 39, 68, 0.9);
}

html[data-theme="dark"] .billing-payg-wallet-stat:focus-visible {
  border-color: #8ba8eb;
  box-shadow: 0 0 0 2px rgba(139, 168, 235, 0.24);
}

html[data-theme="dark"] .billing-payg-wallet-stat span {
  color: #9fb2de;
}

html[data-theme="dark"] .billing-payg-wallet-stat strong {
  color: #dce7ff;
}

html[data-theme="dark"] .billing-wallet-ledger-filter.is-active {
  border-color: #6e8ecf;
  background: #223b68;
  color: #d6e1ff;
}

html[data-theme="dark"] .billing-wallet-ledger-summary-card {
  border-color: #3f5f95;
  background: rgba(14, 28, 51, 0.82);
}

html[data-theme="dark"] .billing-wallet-ledger-summary-card span {
  color: #9fb2de;
}

html[data-theme="dark"] .billing-wallet-ledger-summary-card strong {
  color: #dce7ff;
}

html[data-theme="dark"] .billing-wallet-ledger-table tbody tr:hover {
  background: rgba(25, 44, 77, 0.62);
}

html[data-theme="dark"] .billing-wallet-ledger-listing-link {
  color: #b7c8ff;
}

html[data-theme="dark"] .billing-wallet-ledger-listing-link:hover {
  color: #d8e2ff;
}

html[data-theme="dark"] .billing-wallet-ledger-listing-meta,
html[data-theme="dark"] .billing-wallet-ledger-listing-empty {
  color: #9fb2de;
}

html[data-theme="dark"] .billing-wallet-ledger-amount.is-credit {
  color: #67d4a7;
}

html[data-theme="dark"] .billing-wallet-ledger-amount.is-debit {
  color: #ff96b2;
}

html[data-theme="dark"] .team-capacity-panel {
  border-color: #4663a6;
  background: linear-gradient(150deg, #1c3460 0%, #172a4f 100%);
}

html[data-theme="dark"] .billing-usage-track {
  background: #203764;
}

html[data-theme="dark"] .billing-history-preview li {
  background: rgba(18, 32, 57, 0.72);
}

html[data-theme="dark"] .app-store-status-chip.is-enabled {
  background: rgba(49, 182, 123, 0.23);
  color: #8df3c4;
}

html[data-theme="dark"] .app-store-status-chip.is-disabled {
  background: #2a3e6f;
  color: #cddcff;
}

html[data-theme="dark"] .app-store-status-chip.is-coming-soon {
  background: rgba(217, 119, 6, 0.24);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fcd34d;
}

html[data-theme="dark"] .app-store-catalog-card.is-coming-soon {
  border-color: #4a5f8c;
  background: linear-gradient(180deg, #162540 0%, #13203a 100%);
}

html[data-theme="dark"] .app-store-catalog-card.is-coming-soon .app-store-catalog-title,
html[data-theme="dark"] .app-store-catalog-card.is-coming-soon .app-store-catalog-subtitle,
html[data-theme="dark"] .app-store-catalog-card.is-coming-soon .app-store-logo-wordmark {
  color: #94a6cf;
}

html[data-theme="dark"] .integration-badge--migration {
  background: rgba(8, 145, 178, 0.24);
  border-color: rgba(34, 211, 238, 0.45);
  color: #8de8f6;
}

html[data-theme="dark"] .migration-provider-tab.is-active {
  border-color: #3d6da8;
  background:
    radial-gradient(80% 110% at 102% -30%, rgba(80, 114, 236, 0.3), transparent 60%),
    #20375c;
}

html[data-theme="dark"] .migration-checkbox-dry-run {
  border-color: #4969a8;
  background: #1d3159;
}

html[data-theme="dark"] .migration-latest-run {
  border-color: #456095;
  background: #172947;
}

html[data-theme="dark"] .migration-webhook-panel input[readonly] {
  background: #16233f;
}

html[data-theme="dark"] .integration-credential-form,
html[data-theme="dark"] .integration-payment-fee-form,
html[data-theme="dark"] .integration-calendar-sync-options-form,
html[data-theme="dark"] .platform-smtp-test-shell,
html[data-theme="dark"] .plan-editor,
html[data-theme="dark"] .platform-oauth-integrations {
  border-top-color: #2a3960;
}

html[data-theme="dark"] .integration-payment-fee-shell {
  border-color: #39507f;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(109, 129, 255, 0.18), transparent 56%),
    linear-gradient(180deg, #17294a 0%, #13223f 100%);
  box-shadow: 0 18px 46px rgba(2, 7, 20, 0.26);
}

html[data-theme="dark"] .integration-payment-fee-kicker,
html[data-theme="dark"] .integration-payment-fee-rate-label,
html[data-theme="dark"] .integration-payment-fee-advanced-head span {
  color: #9bb2f0;
}

html[data-theme="dark"] .integration-payment-fee-heading h3,
html[data-theme="dark"] .integration-payment-fee-rate-card strong,
html[data-theme="dark"] .integration-payment-fee-toggle-copy strong,
html[data-theme="dark"] .integration-payment-fee-advanced-head h4 {
  color: #e4ecff;
}

html[data-theme="dark"] .integration-payment-fee-heading p,
html[data-theme="dark"] .integration-payment-fee-rate-card small,
html[data-theme="dark"] .integration-payment-fee-toggle-copy small,
html[data-theme="dark"] .integration-payment-fee-advanced-head p,
html[data-theme="dark"] .integration-payment-fee-input > small,
html[data-theme="dark"] .integration-payment-fee-note {
  color: #a3b7e3;
}

html[data-theme="dark"] .integration-payment-fee-rate-card,
html[data-theme="dark"] .integration-payment-fee-toggle-card {
  border-color: #456095;
  background: rgba(18, 34, 63, 0.88);
}

html[data-theme="dark"] .integration-payment-fee-toggle-card:hover {
  border-color: #6583ca;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(2, 7, 20, 0.22);
}

html[data-theme="dark"] .integration-payment-fee-advanced {
  border-color: #3d568a;
  background:
    linear-gradient(180deg, rgba(20, 37, 67, 0.88) 0%, rgba(16, 30, 55, 0.94) 100%);
}

html[data-theme="dark"] .integration-payment-fee-source-card {
  border-color: #456095;
  background: rgba(18, 34, 63, 0.88);
}

html[data-theme="dark"] .integration-payment-fee-label-panel {
  border-color: #456095;
  background: rgba(18, 34, 63, 0.88);
}

html[data-theme="dark"] .integration-payment-fee-source-card:hover,
html[data-theme="dark"] .integration-payment-fee-source-card.is-selected,
html[data-theme="dark"] .integration-payment-fee-source-card:has(input[type="radio"]:checked) {
  border-color: #6583ca;
  background: rgba(21, 39, 70, 0.94);
}

html[data-theme="dark"] .integration-payment-fee-source-card input[type="radio"] {
  border-color: #6f86be;
  background: #12213c;
  box-shadow: inset 0 1px 2px rgba(3, 10, 24, 0.45);
}

html[data-theme="dark"] .integration-payment-fee-source-card input[type="radio"]:checked {
  border-color: #8aa0ff;
  background:
    radial-gradient(circle at center, #8aa0ff 0 38%, transparent 42%),
    #12213c;
}

html[data-theme="dark"] .integration-payment-fee-source-card input[type="radio"]:focus-visible {
  box-shadow:
    0 0 0 3px rgba(122, 145, 255, 0.22),
    inset 0 1px 2px rgba(3, 10, 24, 0.45);
}

html[data-theme="dark"] .integration-payment-fee-source-copy strong,
html[data-theme="dark"] .integration-payment-fee-custom-head strong {
  color: #e4ecff;
}

html[data-theme="dark"] .integration-payment-fee-toggle-input input[type="checkbox"] {
  border-color: #5872af;
  background: linear-gradient(180deg, rgba(24, 40, 72, 0.96) 0%, rgba(18, 31, 57, 0.96) 100%);
  box-shadow: inset 0 1px 2px rgba(3, 10, 24, 0.45);
}

html[data-theme="dark"] .integration-payment-fee-toggle-input input[type="checkbox"]::after {
  background: #f5f8ff;
  box-shadow: 0 2px 8px rgba(2, 7, 20, 0.42);
}

html[data-theme="dark"] .integration-payment-fee-toggle-input input[type="checkbox"]:checked {
  border-color: #8299ff;
  background: linear-gradient(135deg, #7082ff 0%, #4f9dff 100%);
}

html[data-theme="dark"] .integration-payment-fee-toggle-input input[type="checkbox"]:focus-visible {
  box-shadow:
    0 0 0 3px rgba(122, 145, 255, 0.22),
    inset 0 1px 2px rgba(3, 10, 24, 0.45);
}

html[data-theme="dark"] .integration-payment-fee-source-copy small,
html[data-theme="dark"] .integration-payment-fee-custom-head span {
  color: #a3b7e3;
}

html[data-theme="dark"] .integration-payment-fee-source-rate {
  color: #9eb3ff;
}

html[data-theme="dark"] .integration-payment-fee-toggle-pill.is-disabled {
  color: #c8d5f6;
  background: #243657;
}

html[data-theme="dark"] .integration-payment-fee-toggle-pill.is-enabled {
  color: #7be0b1;
  background: rgba(26, 103, 69, 0.34);
}

html[data-theme="dark"] .integration-payment-fee-input > span {
  color: #dbe6ff;
}

html[data-theme="dark"] .integration-payment-fee-custom-panel {
  border-color: #456095;
  background: rgba(20, 37, 68, 0.9);
}

html[data-theme="dark"] .integration-payment-fee-footer {
  border-top-color: #2a3960;
}

html[data-theme="dark"] .integration-calendar-sync-options-row {
  border-color: #39507f;
  background: #152746;
}

html[data-theme="dark"] .integration-calendar-sync-toggle {
  color: #a9bbdf;
}

html[data-theme="dark"] .integration-calendar-sync-title {
  color: #e4ecff;
}

html[data-theme="dark"] .integration-calendar-sync-copy small {
  color: #9fb3dd;
}

html[data-theme="dark"] .integration-toggle-option small {
  color: #a2b7e5;
}

html[data-theme="dark"] .integration-auth-guide-panel {
  border-color: #39507f;
  background:
    radial-gradient(120% 120% at 102% -24%, rgba(107, 126, 255, 0.22), transparent 54%),
    linear-gradient(180deg, #17294a 0%, #14223f 100%);
}

html[data-theme="dark"] .integration-auth-guide-title {
  color: #e0eaff;
}

html[data-theme="dark"] .integration-auth-guide-subtitle,
html[data-theme="dark"] .integration-auth-guide-list li {
  color: #a2b7e5;
}

html[data-theme="dark"] .integration-auth-guide-list li::marker {
  color: #92adff;
}

html[data-theme="dark"] .integration-settings-card {
  border-color: #39507f;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(109, 129, 255, 0.18), transparent 56%),
    linear-gradient(180deg, #17294a 0%, #13223f 100%);
  box-shadow: 0 18px 46px rgba(2, 7, 20, 0.26);
}

html[data-theme="dark"] .integration-settings-card-kicker,
html[data-theme="dark"] .integration-settings-card-stat span,
html[data-theme="dark"] .integration-connection-stat span {
  color: #9bb2f0;
}

html[data-theme="dark"] .integration-settings-card-heading h3,
html[data-theme="dark"] .integration-settings-card-stat strong,
html[data-theme="dark"] .integration-connection-stat strong,
html[data-theme="dark"] .integration-settings-field,
html[data-theme="dark"] .integration-switch-toggle-copy strong {
  color: #e4ecff;
}

html[data-theme="dark"] .integration-settings-card-heading p,
html[data-theme="dark"] .integration-switch-toggle-copy small {
  color: #a3b7e3;
}

html[data-theme="dark"] .integration-settings-card-stat,
html[data-theme="dark"] .integration-switch-toggle-card,
html[data-theme="dark"] .integration-connection-stat {
  border-color: #456095;
  background: rgba(18, 34, 63, 0.88);
}

html[data-theme="dark"] .integration-switch-toggle-card:hover {
  border-color: #6583ca;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(2, 7, 20, 0.22);
}

html[data-theme="dark"] .integration-settings-card-footer {
  border-top-color: #2a3960;
}

html[data-theme="dark"] .integration-switch-toggle-input input[type="checkbox"] {
  border-color: #5872af;
  background: linear-gradient(180deg, rgba(24, 40, 72, 0.96) 0%, rgba(18, 31, 57, 0.96) 100%);
  box-shadow: inset 0 1px 2px rgba(3, 10, 24, 0.45);
}

html[data-theme="dark"] .integration-switch-toggle-input input[type="checkbox"]::after {
  background: #f5f8ff;
  box-shadow: 0 2px 8px rgba(2, 7, 20, 0.42);
}

html[data-theme="dark"] .integration-switch-toggle-input input[type="checkbox"]:checked {
  border-color: #8299ff;
  background: linear-gradient(135deg, #7082ff 0%, #4f9dff 100%);
}

html[data-theme="dark"] .integration-switch-toggle-input input[type="checkbox"]:focus-visible {
  box-shadow:
    0 0 0 3px rgba(122, 145, 255, 0.22),
    inset 0 1px 2px rgba(3, 10, 24, 0.45);
}

html[data-theme="dark"] .integration-switch-toggle-pill.is-disabled {
  color: #c8d5f6;
  background: #243657;
}

html[data-theme="dark"] .integration-switch-toggle-pill.is-enabled {
  color: #7be0b1;
  background: rgba(26, 103, 69, 0.34);
}

html[data-theme="dark"] .tipping-setup-list li {
  color: #a2b7e5;
}

html[data-theme="dark"] .tipping-setup-list li::marker {
  color: #92adff;
}

html[data-theme="dark"] .tipping-setup-warning {
  border-color: rgba(251, 146, 60, 0.42);
  background: rgba(124, 45, 18, 0.34);
  color: #fdba74;
}

html[data-theme="dark"] .integration-setup-tab.is-active {
  border-color: #4368a9;
  background:
    radial-gradient(90% 120% at 102% -24%, rgba(116, 138, 255, 0.3), transparent 62%),
    #20385f;
  color: #dce7ff;
}

html[data-theme="dark"] .integration-cubicasa-mode-fieldset legend {
  color: #dbe8ff;
}

html[data-theme="dark"] .integration-cubicasa-mode-option {
  border-color: #3f5a91;
  background: #162742;
}

html[data-theme="dark"] .integration-cubicasa-mode-option:hover {
  border-color: #5275ba;
  background: #1b3152;
}

html[data-theme="dark"] .integration-cubicasa-mode-option.is-selected,
html[data-theme="dark"] .integration-cubicasa-mode-option:has(input:checked) {
  border-color: #6a8fda;
  background: #213a62;
}

html[data-theme="dark"] .integration-cubicasa-mode-option strong {
  color: #deebff;
}

html[data-theme="dark"] .integration-cubicasa-mode-option small {
  color: #a3bae8;
}

html[data-theme="dark"] .invoice-page {
  background: #0a1328;
}

html[data-theme="dark"] .invoice-loading,
html[data-theme="dark"] .invoice-card,
html[data-theme="dark"] .invoice-meta-card,
html[data-theme="dark"] .invoice-party-card,
html[data-theme="dark"] .invoice-items-wrap,
html[data-theme="dark"] .invoice-pay-modal {
  border-color: #334877;
  background: #121f39;
  color: #dce7ff;
}

html[data-theme="dark"] .invoice-head,
html[data-theme="dark"] .invoice-totals,
html[data-theme="dark"] .invoice-deposit,
html[data-theme="dark"] .invoice-footer-actions {
  border-color: #2a3960;
}

html[data-theme="dark"] .invoice-kicker,
html[data-theme="dark"] .invoice-meta-card h4,
html[data-theme="dark"] .invoice-party-card h4,
html[data-theme="dark"] .invoice-customer-team,
html[data-theme="dark"] .invoice-subtitle,
html[data-theme="dark"] .invoice-totals p,
html[data-theme="dark"] .invoice-deposit h4,
html[data-theme="dark"] .invoice-deposit p,
html[data-theme="dark"] .invoice-pay-form label {
  color: #9fb2de;
}

html[data-theme="dark"] .invoice-meta-card p,
html[data-theme="dark"] .invoice-brand-name,
html[data-theme="dark"] .invoice-totals p strong,
html[data-theme="dark"] .invoice-deposit p strong,
html[data-theme="dark"] .invoice-pay-modal-head h3 {
  color: #e4edff;
}

html[data-theme="dark"] .invoice-items-table thead th {
  background: #162440;
  border-bottom-color: #314569;
  color: #9fb2de;
}

html[data-theme="dark"] .invoice-items-table tbody td {
  border-bottom-color: #223554;
  color: #d7e3ff;
}

html[data-theme="dark"] .invoice-items-cell-item,
html[data-theme="dark"] .invoice-items-cell-money.is-total {
  color: #eef4ff;
}

html[data-theme="dark"] .invoice-items-item-description {
  color: #a9badf;
}

html[data-theme="dark"] .pricing-plan-price-original {
  color: #92a6d4;
}

html[data-theme="dark"] .pricing-plan-price-current {
  color: inherit;
}

html[data-theme="dark"] .invoice-items-cell-qty {
  color: #abc0eb;
}

html[data-theme="dark"] .invoice-pay-checkout-status {
  border-color: #3d588d;
  background: rgba(24, 40, 69, 0.92);
}

html[data-theme="dark"] .invoice-pay-checkout-status p {
  color: #c2d4ff;
}

html[data-theme="dark"] .invoice-pay-checkout-status.is-error {
  border-color: #875066;
  background: #3a2130;
}

html[data-theme="dark"] .invoice-pay-checkout-status.is-error p {
  color: #ffbfd0;
}

html[data-theme="dark"] .invoice-pay-checkout-kicker {
  color: #98b9ff;
}

html[data-theme="dark"] .invoice-pay-checkout-subtitle,
html[data-theme="dark"] .invoice-pay-checkout-amount {
  color: #c2d4ff;
}

html[data-theme="dark"] .invoice-pay-checkout-amount strong {
  color: #e4edff;
}

html[data-theme="dark"] .invoice-pay-embedded {
  border-color: #3d588d;
  background: #0f1b31;
}

html[data-theme="dark"] .invoice-pay-checkout-footnote {
  border-color: #3d588d;
  background: rgba(24, 40, 69, 0.92);
  color: #c2d4ff;
}

html[data-theme="dark"] .invoice-brand-logo {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .platform-brand-logo,
html[data-theme="dark"] .invoice-brand-logo,
html[data-theme="dark"] .checkout-brand-logo,
html[data-theme="dark"] .mk-logo-shell.has-logo,
html[data-theme="dark"] .mk-logo-shell.has-logo .mk-logo {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .invoice-brand-fallback {
  border-color: #3d538b;
  background: #1d325c;
  color: #d7e5ff;
}

html[data-theme="dark"] .invoice-notice {
  border-color: #3a5b9a;
  background: #203a68;
  color: #dbe8ff;
}

html[data-theme="dark"] .invoice-notice.is-error {
  border-color: #7a435a;
  background: #3a1e2b;
  color: #ffc9db;
}

html[data-theme="dark"] .invoice-error {
  color: #ffb2bc;
}

html[data-theme="dark"] .invoice-status-pill.is-paid {
  background: rgba(49, 182, 123, 0.23);
  color: #8df3c4;
}

html[data-theme="dark"] .invoice-status-pill.is-partial {
  background: rgba(227, 156, 46, 0.26);
  color: #ffd38f;
}

html[data-theme="dark"] .invoice-status-pill.is-unpaid {
  background: rgba(224, 84, 101, 0.24);
  color: #ffb2bc;
}

html[data-theme="dark"] .invoice-status-pill.is-canceled {
  background: #2f355a;
  color: #d0d8ff;
}

/* Dark mode full-scan fixes: listings + products surfaces */
html[data-theme="dark"] .products-overview-group h2,
html[data-theme="dark"] .products-services-head h2,
html[data-theme="dark"] .listing-panel-head h3,
html[data-theme="dark"] .listing-results-title h3,
html[data-theme="dark"] .listing-media-wrap h3,
html[data-theme="dark"] .listing-secondary-head h3 {
  color: #e4edff;
}

html[data-theme="dark"] .products-overview-card,
html[data-theme="dark"] .products-catalog-filters,
html[data-theme="dark"] .products-catalog-table-wrap,
html[data-theme="dark"] .products-categories-table-wrap,
html[data-theme="dark"] .products-tabs-modal-redesign,
html[data-theme="dark"] .products-editor-accordion-card,
html[data-theme="dark"] .products-tabs-form-shell,
html[data-theme="dark"] .products-tabs-categories-card,
html[data-theme="dark"] .products-tabs-categories-grid,
html[data-theme="dark"] .products-tabs-list-panel,
html[data-theme="dark"] .products-image-upload-card,
html[data-theme="dark"] .products-image-upload-main,
html[data-theme="dark"] .products-image-upload-thumb,
html[data-theme="dark"] .products-image-upload-side-empty,
html[data-theme="dark"] .products-media-dropzone,
html[data-theme="dark"] .products-media-gallery-empty,
html[data-theme="dark"] .products-media-gallery-tile,
html[data-theme="dark"] .products-media-link-modal,
html[data-theme="dark"] .products-sqft-range-panel,
html[data-theme="dark"] .products-sqft-range-row,
html[data-theme="dark"] .products-addon-main-panel,
html[data-theme="dark"] .products-addon-main-grid,
html[data-theme="dark"] .package-products-grid,
html[data-theme="dark"] .package-product-option,
html[data-theme="dark"] .products-tab-category-option,
html[data-theme="dark"] .package-included-labels-panel,
html[data-theme="dark"] .package-included-label-row,
html[data-theme="dark"] .listing-filter-panel,
html[data-theme="dark"] .listing-filters,
html[data-theme="dark"] .listing-results-pagination,
html[data-theme="dark"] .listing-card,
html[data-theme="dark"] .listing-info-card,
html[data-theme="dark"] .listing-customer-add-card,
html[data-theme="dark"] .listing-customer-empty,
html[data-theme="dark"] .listing-customer-row,
html[data-theme="dark"] .listing-accordion,
html[data-theme="dark"] .listing-media-toolbar,
html[data-theme="dark"] .listing-gallery-card,
html[data-theme="dark"] .listing-secondary-row,
html[data-theme="dark"] .listing-secondary-row-media-match,
html[data-theme="dark"] .listing-property-card,
html[data-theme="dark"] .listing-secondary-stat,
html[data-theme="dark"] .listing-marketing-card,
html[data-theme="dark"] .listing-marketing-primary-photo-field,
html[data-theme="dark"] .listing-marketing-primary-photo-trigger,
html[data-theme="dark"] .listing-marketing-photo-picker,
html[data-theme="dark"] .listing-marketing-photo-picker-grid,
html[data-theme="dark"] .listing-marketing-photo-option,
html[data-theme="dark"] .listing-marketing-template-grid,
html[data-theme="dark"] .listing-flyer-template-meta,
html[data-theme="dark"] .listing-website-status-banner,
html[data-theme="dark"] .listing-website-analytics-panel,
html[data-theme="dark"] .listing-website-analytics-grid article,
html[data-theme="dark"] .listing-order-card .listing-secondary-body,
html[data-theme="dark"] .listing-activity-empty,
html[data-theme="dark"] .listing-activity-list li,
html[data-theme="dark"] .listing-media-upload-progress,
html[data-theme="dark"] .listing-revision-note-list-wrap,
html[data-theme="dark"] .listing-revision-note-item,
html[data-theme="dark"] .listing-media-group-options,
html[data-theme="dark"] .listing-media-group-option,
html[data-theme="dark"] .listing-media-dropzone,
html[data-theme="dark"] .listing-media-selected {
  border-color: #334877;
  background: #121f39;
  color: #dce7ff;
}

html[data-theme="dark"] .products-overview-card:hover,
html[data-theme="dark"] .listing-card:hover {
  border-color: #516ca9;
  box-shadow: 0 14px 28px rgba(2, 8, 24, 0.52);
}

html[data-theme="dark"] .products-category-panel {
  background: #13213b;
}

html[data-theme="dark"] .products-category-option {
  border-color: #355086;
  background: #162744;
}

html[data-theme="dark"] .products-category-option:hover {
  border-color: #4b679f;
  background: #1a2d4f;
}

html[data-theme="dark"] .products-category-option-copy strong {
  color: #dce7ff;
}

html[data-theme="dark"] .products-category-option input[type="checkbox"]:checked + .products-category-option-copy strong {
  color: #9db5ff;
}

html[data-theme="dark"] .products-category-option:has(input[type="checkbox"]:checked) {
  border-color: #5a79b6;
  background: #1d3158;
}

html[data-theme="dark"] .products-editor-accordion-toggle:hover {
  background: rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] .products-editor-accordion-copy strong {
  color: #e3ebff;
}

html[data-theme="dark"] .products-editor-accordion-copy small {
  color: #9db0d7;
}

html[data-theme="dark"] .products-editor-accordion-chevron {
  border-color: #93a9dd;
}

html[data-theme="dark"] .products-editor-toggle-card:hover {
  border-color: #4b679f;
  background: #1a2d4f;
}

html[data-theme="dark"] .products-editor-toggle-card:has(input[type="checkbox"]:checked) {
  border-color: #5a79b6;
  background: #1d3158;
}

html[data-theme="dark"] .products-editor-toggle-card:has(input[type="checkbox"]:checked) .products-editor-toggle-copy strong {
  color: #9db5ff;
}

html[data-theme="dark"] :is(
    label:not(.theme-toggle-control) > input[type="checkbox"],
    td > input[type="checkbox"],
    th > input[type="checkbox"],
    .calendar-team-filter-checkbox,
    .team-service-provider-toggle input[type="checkbox"],
    .settings-toggle input[type="checkbox"],
    .integration-toggle-option input[type="checkbox"],
    .migration-checkbox input[type="checkbox"],
    .legal-preview-checkbox input[type="checkbox"],
    .white-label-enable-toggle input[type="checkbox"],
    .legal-settings-toggle-input,
    .business-hours-open-toggle input[type="checkbox"],
    .availability-business-hours-open-toggle input[type="checkbox"],
    .twilight-grid-check input[type="checkbox"],
    .booking-limits-toggle input[type="checkbox"],
    .appointment-settings-redesign .appointment-settings-toggle input[type="checkbox"],
    .territory-map-overlay-toggle input[type="checkbox"],
    .territory-inline-toggle input[type="checkbox"],
    .territory-team-option input[type="checkbox"],
    .products-category-option input[type="checkbox"],
    .products-tab-category-option input[type="checkbox"],
    .package-product-option input[type="checkbox"],
    .coupon-product-limit-option input[type="checkbox"],
    .products-editor-toggle-card input[type="checkbox"],
    .order-custom-checkbox input[type="checkbox"],
    .team-product-option input[type="checkbox"],
    .listing-website-visibility-toggle input[type="checkbox"],
    .property-website-visibility-toggle input[type="checkbox"],
    .order-appointment-item-option input[type="checkbox"],
    .order-appointment-member-option input[type="checkbox"],
    .order-team-member-option input[type="checkbox"],
    .of-save-card-inline input[type="checkbox"],
    .of-legal-checkbox input[type="checkbox"],
    .order-deposit-toggle-input,
    .storefront-order-form-inline-toggle input[type="checkbox"],
    .storefront-payment-method-toggle input[type="checkbox"],
    .storefront-deposit-override-toggle input[type="checkbox"],
    .storefront-order-field-required-toggle input[type="checkbox"]
  ) {
  border-color: #5d74aa;
  background: #111f3a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] :is(
    label:not(.theme-toggle-control) > input[type="checkbox"],
    td > input[type="checkbox"],
    th > input[type="checkbox"],
    .calendar-team-filter-checkbox,
    .team-service-provider-toggle input[type="checkbox"],
    .settings-toggle input[type="checkbox"],
    .integration-toggle-option input[type="checkbox"],
    .migration-checkbox input[type="checkbox"],
    .legal-preview-checkbox input[type="checkbox"],
    .white-label-enable-toggle input[type="checkbox"],
    .legal-settings-toggle-input,
    .business-hours-open-toggle input[type="checkbox"],
    .availability-business-hours-open-toggle input[type="checkbox"],
    .twilight-grid-check input[type="checkbox"],
    .booking-limits-toggle input[type="checkbox"],
    .appointment-settings-redesign .appointment-settings-toggle input[type="checkbox"],
    .territory-map-overlay-toggle input[type="checkbox"],
    .territory-inline-toggle input[type="checkbox"],
    .territory-team-option input[type="checkbox"],
    .products-category-option input[type="checkbox"],
    .products-tab-category-option input[type="checkbox"],
    .package-product-option input[type="checkbox"],
    .coupon-product-limit-option input[type="checkbox"],
    .products-editor-toggle-card input[type="checkbox"],
    .order-custom-checkbox input[type="checkbox"],
    .team-product-option input[type="checkbox"],
    .listing-website-visibility-toggle input[type="checkbox"],
    .property-website-visibility-toggle input[type="checkbox"],
    .order-appointment-item-option input[type="checkbox"],
    .order-appointment-member-option input[type="checkbox"],
    .order-team-member-option input[type="checkbox"],
    .of-save-card-inline input[type="checkbox"],
    .of-legal-checkbox input[type="checkbox"],
    .order-deposit-toggle-input,
    .storefront-order-form-inline-toggle input[type="checkbox"],
    .storefront-payment-method-toggle input[type="checkbox"],
    .storefront-deposit-override-toggle input[type="checkbox"],
    .storefront-order-field-required-toggle input[type="checkbox"]
  ):checked {
  border-color: #7f9bff;
  background: linear-gradient(180deg, rgba(127, 155, 255, 0.18) 0%, rgba(127, 155, 255, 0.1) 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.25 8.25L6.45 11.45L12.75 4.95' stroke='%239db5ff' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(127, 155, 255, 0.12);
}

html[data-theme="dark"] :is(.products-category-option, .products-tab-category-option):has(input[type="checkbox"]:checked) {
  border-color: #5a79b6;
  background: #1d3158;
}

html[data-theme="dark"] input[type="checkbox"] {
  accent-color: #7f9bff;
}

html[data-theme="dark"] .products-overview-icon {
  border-color: #334877;
  background: #17284a;
  color: #c9d7ff;
}

html[data-theme="dark"] .products-overview-copy strong,
html[data-theme="dark"] .products-info-cell strong,
html[data-theme="dark"] .products-addon-main-head strong,
html[data-theme="dark"] .package-product-option-copy strong,
html[data-theme="dark"] .products-tabs-modal-head-copy h3,
html[data-theme="dark"] .products-tabs-list-head strong,
html[data-theme="dark"] .products-tabs-categories-head strong,
html[data-theme="dark"] .products-tab-category-option-copy strong,
html[data-theme="dark"] .package-included-label-row-title strong {
  color: #e4edff;
}

html[data-theme="dark"] .products-overview-copy span,
html[data-theme="dark"] .products-info-cell p,
html[data-theme="dark"] .products-info-copy small,
html[data-theme="dark"] .products-catalog-filters label,
html[data-theme="dark"] .products-image-upload-placeholder,
html[data-theme="dark"] .products-image-upload-drop-hint,
html[data-theme="dark"] .products-image-upload-side-empty,
html[data-theme="dark"] .products-tabs-modal-head-copy p,
html[data-theme="dark"] .products-tabs-form-hint,
html[data-theme="dark"] .products-tabs-categories-head small,
html[data-theme="dark"] .products-tabs-list-head small,
html[data-theme="dark"] .products-tab-category-option-copy small,
html[data-theme="dark"] .products-addon-main-head small,
html[data-theme="dark"] .package-product-option-copy small,
html[data-theme="dark"] .package-included-label-input span,
html[data-theme="dark"] .listing-panel-head p,
html[data-theme="dark"] .listing-filter-field span,
html[data-theme="dark"] .listing-results-title p,
html[data-theme="dark"] .listing-results-page-size span,
html[data-theme="dark"] .listing-results-pagination span,
html[data-theme="dark"] .listing-results-summary,
html[data-theme="dark"] .listing-info-card h4,
html[data-theme="dark"] .listing-info-card p,
html[data-theme="dark"] .listing-card-client,
html[data-theme="dark"] .listing-card-contact,
html[data-theme="dark"] .listing-card-footer,
html[data-theme="dark"] .listing-customer-copy span,
html[data-theme="dark"] .listing-customer-add-card small,
html[data-theme="dark"] .listing-accordion-subtitle,
html[data-theme="dark"] .listing-accordion-body p,
html[data-theme="dark"] .listing-media-sort-select,
html[data-theme="dark"] .listing-media-group-chip em,
html[data-theme="dark"] .listing-secondary-row-main span,
html[data-theme="dark"] .listing-secondary-body p,
html[data-theme="dark"] .listing-secondary-empty,
html[data-theme="dark"] .listing-marketing-card-meta,
html[data-theme="dark"] .listing-marketing-card-updated,
html[data-theme="dark"] .listing-marketing-modal-head p,
html[data-theme="dark"] .listing-marketing-modal-grid label,
html[data-theme="dark"] .listing-marketing-primary-photo-label,
html[data-theme="dark"] .listing-marketing-primary-photo-copy small,
html[data-theme="dark"] .listing-marketing-photo-picker-head p,
html[data-theme="dark"] .listing-marketing-photo-option-label,
html[data-theme="dark"] .listing-flyer-template-meta em,
html[data-theme="dark"] .listing-flyer-template-meta small,
html[data-theme="dark"] .listing-marketing-toggle,
html[data-theme="dark"] .listing-marketing-toggle small,
html[data-theme="dark"] .listing-website-visibility-toggle,
html[data-theme="dark"] .listing-website-link-stack label,
html[data-theme="dark"] .listing-website-status-banner p,
html[data-theme="dark"] .listing-website-analytics-grid article span,
html[data-theme="dark"] .listing-website-analytics-grid article small,
html[data-theme="dark"] .listing-order-item-price,
html[data-theme="dark"] .listing-order-item-price small,
html[data-theme="dark"] .listing-order-empty-items,
html[data-theme="dark"] .listing-activity-copy span,
html[data-theme="dark"] .listing-activity-list time,
html[data-theme="dark"] .listing-media-upload-progress p,
html[data-theme="dark"] .listing-revision-note-item time,
html[data-theme="dark"] .listing-revision-note-copy p,
html[data-theme="dark"] .listing-media-group-option em,
html[data-theme="dark"] .listing-media-dropzone span,
html[data-theme="dark"] .listing-media-selected p,
html[data-theme="dark"] .listing-asset-empty {
  color: #9fb2de;
}

html[data-theme="dark"] .products-services-tab {
  color: #9fb2de;
}

html[data-theme="dark"] .products-services-tab.active {
  color: #9db5ff;
  border-bottom-color: #7f9bff;
}

html[data-theme="dark"] .products-services-tabs-divider {
  background: #3a5282;
}

html[data-theme="dark"] .products-services-tab-add {
  background: #182a4d;
  border-color: #3b548a;
  color: #a8beff;
}

html[data-theme="dark"] .products-services-tab-add:hover {
  background: #1f3560;
  border-color: #4f6cab;
}

html[data-theme="dark"] .products-tabs-modal-head {
  border-bottom-color: #2e4474;
}

html[data-theme="dark"] .products-tab-chip,
html[data-theme="dark"] .products-tab-usage-pill,
html[data-theme="dark"] .products-tabs-categories-head small,
html[data-theme="dark"] .products-tabs-list-head small {
  border-color: #385287;
  background: #172847;
  color: #b4c8f3;
}

html[data-theme="dark"] .products-tab-name-text {
  color: #e4edff;
}

html[data-theme="dark"] .products-tab-category-option:hover {
  border-color: #4f6ca9;
  box-shadow: none;
  background: #1a2d4f;
}

html[data-theme="dark"] .products-tab-category-option input[type="checkbox"]:checked + .products-tab-category-option-copy strong {
  color: #9eb7ff;
}

html[data-theme="dark"] .of-package-includes-label {
  color: #9fb4e6;
}

html[data-theme="dark"] .package-included-label-row-title small {
  border-color: #3d5487;
  background: #18284a;
  color: #a9bff0;
}

html[data-theme="dark"] .package-included-label-drag {
  border-color: #3d5286;
  background: #132446;
}

html[data-theme="dark"] .package-included-label-row.is-dragging {
  border-color: #6f8df3;
  box-shadow: 0 0 0 2px rgba(111, 141, 243, 0.22);
}

html[data-theme="dark"] .package-included-label-row.package-included-label-drop-before,
html[data-theme="dark"] .package-included-label-row.package-included-label-drop-after {
  background: #172a4e;
}

html[data-theme="dark"] .of-package-include-chip {
  border-color: #3a4f80;
  background: #162645;
  color: #dce7ff;
}

html[data-theme="dark"] .of-package-include-icon {
  border-color: #3e588f;
  background: #0f1a32;
  color: #9db5ff;
}

html[data-theme="dark"] .of-package-includes-more {
  color: #9fb4e6;
}

html[data-theme="dark"] .of-step-section-divider span {
  color: #a9bdf3;
}

html[data-theme="dark"] .of-step-section-divider::before,
html[data-theme="dark"] .of-step-section-divider::after {
  background: linear-gradient(90deg, rgba(83, 109, 166, 0) 0%, #4a6399 50%, rgba(83, 109, 166, 0) 100%);
}

html[data-theme="dark"] .of-property-entry-panel {
  border-color: #324b7d;
  background: linear-gradient(180deg, #11203d 0%, #101f39 100%);
  box-shadow: 0 16px 30px rgba(4, 9, 22, 0.35);
}

html[data-theme="dark"] .of-property-entry-head {
  border-color: #355183;
  background: linear-gradient(145deg, #14264a 0%, #122345 100%);
}

html[data-theme="dark"] .of-property-entry-kicker {
  color: #9fb5ff;
}

html[data-theme="dark"] .of-field-label {
  color: #9fb3e2;
}

html[data-theme="dark"] .of-checkout-field-label {
  color: #a7bbec;
}

html[data-theme="dark"] .of-input-hint {
  color: #9eb3de;
}

html[data-theme="dark"] .of-input-hint.is-success {
  color: #84e0b8;
}

html[data-theme="dark"] .of-input-hint.is-warning {
  color: #f4c26b;
}

html[data-theme="dark"] .of-input-hint.is-error {
  color: #ff95a6;
}

html[data-theme="dark"] .of-property-form {
  border-color: #365182;
  background: #0f1c35;
}

html[data-theme="dark"] .of-property-form > .of-address-field {
  border-color: #3b578d;
  background: linear-gradient(180deg, #112246 0%, #101f3d 100%);
}

html[data-theme="dark"] .of-address-suggestions {
  border-color: #3f5a8f;
  background: #10203e;
  box-shadow: 0 18px 34px rgba(3, 8, 24, 0.54);
}

html[data-theme="dark"] .of-address-suggestion-main {
  color: #e2ecff;
}

html[data-theme="dark"] .of-address-suggestion-sub,
html[data-theme="dark"] .of-address-suggestion-empty {
  color: #9fb3df;
}

html[data-theme="dark"] .of-address-suggestion:hover,
html[data-theme="dark"] .of-address-suggestion.active {
  background: #1a305d;
}

html[data-theme="dark"] .of-property-address-details,
html[data-theme="dark"] .of-map-card {
  border-color: #3a5688;
  background: linear-gradient(180deg, #132446 0%, #11203f 100%);
}

html[data-theme="dark"] .of-map-empty,
html[data-theme="dark"] .of-map-frame {
  border-color: #3c5688;
  background: #0d1a31;
}

html[data-theme="dark"] .of-property-actions {
  border-top-color: #385282;
}

html[data-theme="dark"] .of-header {
  border-color: #365183;
  background:
    radial-gradient(320px 180px at 4% 8%, rgba(117, 134, 255, 0.2), transparent 72%),
    radial-gradient(360px 210px at 95% 100%, rgba(40, 173, 128, 0.2), transparent 76%),
    linear-gradient(132deg, #132346 0%, #112140 58%, #102731 100%);
  box-shadow: 0 20px 34px rgba(3, 8, 21, 0.42);
}

html[data-theme="dark"] .of-logo-shell {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .of-logo-mark {
  color: #a6bbff;
}

html[data-theme="dark"] .of-brand-name {
  color: #9cb3e6;
}

html[data-theme="dark"] .of-form-title {
  color: #e6efff;
}

html[data-theme="dark"] .of-form-subtitle {
  color: #a9bee7;
}

html[data-theme="dark"] .of-header-pill {
  border-color: #47659f;
  background: rgba(16, 32, 63, 0.84);
  color: #aec2ff;
}

html[data-theme="dark"] .of-header-stat {
  border-color: #47649a;
  background: rgba(14, 29, 56, 0.84);
  box-shadow: 0 14px 26px rgba(3, 8, 22, 0.44);
}

html[data-theme="dark"] .of-header-stat strong {
  color: #d6e5ff;
}

html[data-theme="dark"] .of-header-stat span {
  color: #9db3df;
}

html[data-theme="dark"] .of-product-card.is-adding {
  border-color: #6f8dff;
  box-shadow: 0 22px 40px rgba(8, 16, 39, 0.5);
}

html[data-theme="dark"] .of-product-card.is-selected {
  border-color: #6f8dff;
  box-shadow: 0 18px 34px rgba(9, 17, 42, 0.5);
}

html[data-theme="dark"] .of-added-pill {
  border-color: #3f8a65;
  background: linear-gradient(180deg, rgba(25, 68, 48, 0.92) 0%, rgba(20, 58, 41, 0.92) 100%);
  color: #c9f6dd;
}

html[data-theme="dark"] .of-remove-btn {
  border-color: #6e4761;
  background: linear-gradient(180deg, rgba(81, 34, 52, 0.85) 0%, rgba(69, 29, 46, 0.85) 100%);
  color: #ffd1dc;
}

html[data-theme="dark"] .of-remove-btn:hover {
  border-color: #8a5a78;
  background: linear-gradient(180deg, rgba(94, 40, 61, 0.9) 0%, rgba(80, 34, 52, 0.9) 100%);
  color: #ffe4ea;
}

html[data-theme="dark"] .of-add-btn-remove {
  border-color: #6e4761;
  background: linear-gradient(180deg, rgba(81, 34, 52, 0.85) 0%, rgba(69, 29, 46, 0.85) 100%);
  color: #ffd1dc;
}

html[data-theme="dark"] .of-add-btn-remove:hover {
  border-color: #8a5a78;
  background: linear-gradient(180deg, rgba(94, 40, 61, 0.9) 0%, rgba(80, 34, 52, 0.9) 100%);
  color: #ffe4ea;
}

html[data-theme="dark"] .of-product-media-nav {
  border-color: rgba(84, 110, 172, 0.85);
  background: rgba(17, 32, 63, 0.86);
  color: #d9e5ff;
  box-shadow: 0 12px 24px rgba(2, 7, 20, 0.5);
}

html[data-theme="dark"] .of-product-media-nav:hover {
  border-color: #87a1ea;
  background: rgba(22, 40, 79, 0.94);
  color: #f0f5ff;
}

html[data-theme="dark"] .of-product-media-counter {
  border-color: rgba(84, 110, 172, 0.8);
  background: rgba(17, 32, 63, 0.82);
  color: #cfddff;
}

html[data-theme="dark"] .of-step-cart-badge {
  border-color: #46629c;
  background: rgba(18, 35, 67, 0.9);
  color: #b7caff;
}

html[data-theme="dark"] .of-step-cart-badge.is-highlight {
  border-color: #6d86ff;
  background: rgba(33, 54, 104, 0.95);
  color: #d9e5ff;
}

html[data-theme="dark"] .of-step-pill.is-cart-highlight {
  border-color: #6f8dff;
  background: linear-gradient(180deg, rgba(31, 49, 98, 0.98) 0%, rgba(27, 45, 88, 0.98) 100%);
  box-shadow: 0 0 0 3px rgba(93, 119, 255, 0.28);
}

html[data-theme="dark"] .of-services-add-feedback {
  border-color: #2e7f59;
  background: linear-gradient(120deg, rgba(18, 54, 36, 0.95) 0%, rgba(18, 59, 52, 0.95) 62%, rgba(19, 43, 67, 0.95) 100%);
}

html[data-theme="dark"] .of-services-add-feedback-icon {
  border-color: #4cae7f;
  background: rgba(43, 116, 79, 0.38);
  color: #baf9d7;
}

html[data-theme="dark"] .of-services-add-feedback p {
  color: #d6f4e7;
}

html[data-theme="dark"] .of-services-add-feedback p strong {
  color: #ecfff6;
}

html[data-theme="dark"] .of-step-cart-popover {
  border-color: #3f598d;
  background: linear-gradient(150deg, rgba(16, 30, 56, 0.98) 0%, rgba(15, 29, 54, 0.98) 100%);
  box-shadow: 0 16px 34px rgba(3, 9, 24, 0.6);
}

html[data-theme="dark"] .of-step-cart-popover::before {
  background: #15284b;
  border-left-color: #3f598d;
  border-top-color: #3f598d;
}

html[data-theme="dark"] .of-step-cart-popover-title {
  color: #9fb5ff;
}

html[data-theme="dark"] .of-step-cart-popover-row {
  border-color: #3f5787;
  background: rgba(14, 28, 54, 0.84);
}

html[data-theme="dark"] .of-step-cart-popover-row span {
  color: #dce8ff;
}

html[data-theme="dark"] .of-step-cart-popover-row strong {
  color: #bed0ff;
}

html[data-theme="dark"] .of-step-cart-popover-more {
  color: #9eb2dc;
}

html[data-theme="dark"] .of-step-cart-popover-footer {
  border-top-color: #3f5787;
}

html[data-theme="dark"] .of-step-cart-popover-footer span {
  color: #9eb2dc;
}

html[data-theme="dark"] .of-step-cart-popover-footer strong {
  color: #c6d6ff;
}

html[data-theme="dark"] .of-services-cart-drawer {
  border-color: #3f598d;
  background: linear-gradient(150deg, rgba(16, 30, 56, 0.96) 0%, rgba(15, 29, 54, 0.96) 100%);
  box-shadow: 0 24px 46px rgba(3, 8, 22, 0.54);
}

html[data-theme="dark"] .of-services-service-area-notice {
  border-color: #80494d;
  background: linear-gradient(180deg, rgba(56, 24, 31, 0.65) 0%, rgba(46, 19, 25, 0.72) 100%);
}

html[data-theme="dark"] .of-services-service-area-notice strong {
  color: #ffc2ca;
}

html[data-theme="dark"] .of-services-service-area-notice span {
  color: #ffb8c4;
}

html[data-theme="dark"] .of-services-cart-drawer.has-items {
  border-color: #5b79cd;
  box-shadow: 0 24px 44px rgba(4, 10, 24, 0.6);
}

html[data-theme="dark"] .of-services-cart-drawer.is-highlight {
  border-color: #6e8eff;
}

html[data-theme="dark"] .of-coupon-feedback.is-success {
  color: #7be0b1;
}

html[data-theme="dark"] .of-coupon-feedback.is-error {
  color: #ff8aa0;
}

html[data-theme="dark"] .of-summary-item.is-discount strong {
  color: #86e3b8;
}

html[data-theme="dark"] .of-service-group-head h3,
html[data-theme="dark"] .of-service-groups-secondary-head h3 {
  color: #dbe7ff;
}

html[data-theme="dark"] .of-service-group-head span {
  border-color: #425f9a;
  background: #1a315c;
  color: #b7cbff;
}

html[data-theme="dark"] .of-service-groups-secondary-shell {
  border-top-color: #3c5688;
}

html[data-theme="dark"] .of-service-group-secondary + .of-service-group-secondary {
  border-top-color: #38507f;
}

html[data-theme="dark"] .of-services-cart-kicker {
  color: #9fb5ff;
}

html[data-theme="dark"] .of-services-cart-head h3 {
  color: #e5eeff;
}

html[data-theme="dark"] .of-services-cart-badge {
  border-color: #476198;
  background: rgba(18, 35, 67, 0.9);
  color: #b4c6ff;
}

html[data-theme="dark"] .of-services-cart-row {
  border-color: #3f5787;
  background: rgba(14, 28, 54, 0.84);
}

html[data-theme="dark"] .of-services-cart-row strong {
  color: #dfebff;
}

html[data-theme="dark"] .of-services-cart-row p,
html[data-theme="dark"] .of-services-cart-more,
html[data-theme="dark"] .of-services-cart-empty {
  color: #9eb2dc;
}

html[data-theme="dark"] .of-services-cart-row > span,
html[data-theme="dark"] .of-services-cart-row-side > span {
  color: #b8c9ff;
}

html[data-theme="dark"] .of-services-cart-empty {
  border-color: #3d5585;
  background: rgba(12, 24, 46, 0.7);
}

html[data-theme="dark"] .of-services-cart-remove {
  border-color: #4965a6;
  background: #1a2f57;
  color: #b9ccff;
}

html[data-theme="dark"] .of-services-cart-remove:hover {
  border-color: #6687d6;
  background: #243f73;
}

html[data-theme="dark"] .of-services-cart-includes-label,
html[data-theme="dark"] .of-services-cart-includes-more {
  color: #9fb3dd;
}

html[data-theme="dark"] .of-services-cart-include-chip {
  border-color: #415d94;
  background: #1a3058;
  color: #d1e0ff;
}

html[data-theme="dark"] .of-services-cart-include-icon {
  border-color: #4f6fb0;
  background: #16294a;
  color: #9eb6ff;
}

html[data-theme="dark"] .of-pricing-locked-box {
  border-color: #415b91;
  background: linear-gradient(140deg, #132444 0%, #11203d 100%);
}

html[data-theme="dark"] .of-pricing-locked-box.is-adjusted {
  border-color: #5d7dd8;
  background:
    radial-gradient(300px 170px at 92% 12%, rgba(81, 109, 255, 0.22), transparent 76%),
    linear-gradient(140deg, #162a53 0%, #142543 100%);
}

html[data-theme="dark"] .of-pricing-locked-kicker {
  color: #9fb6ff;
}

html[data-theme="dark"] .of-pricing-locked-head span {
  border-color: #42629d;
  background: #1b305b;
  color: #bdd0ff;
}

html[data-theme="dark"] .of-pricing-adjustment-list li {
  border-color: #415b90;
  background: rgba(14, 27, 52, 0.84);
}

html[data-theme="dark"] .of-pricing-adjustment-list li span {
  color: #d8e4ff;
}

html[data-theme="dark"] .of-pricing-adjustment-list li strong {
  color: #b8cbff;
}

html[data-theme="dark"] .of-pricing-adjustment-more {
  color: #a2b6df;
}

html[data-theme="dark"] .of-checkout-main-panel {
  border-color: #365286;
  background: linear-gradient(180deg, #142542 0%, #11203b 100%);
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.45);
}

html[data-theme="dark"] .of-checkout-aside-panel {
  border-color: #3b5a92;
  background: linear-gradient(180deg, #152745 0%, #12213d 100%);
  box-shadow: 0 12px 26px rgba(2, 8, 23, 0.52);
}

html[data-theme="dark"] .of-checkout-aside-panel::before {
  background: linear-gradient(180deg, transparent 0%, #3b5a92 12%, #3b5a92 88%, transparent 100%);
}

html[data-theme="dark"] .of-checkout-main-panel > .of-checkout-summary,
html[data-theme="dark"] .of-checkout-main-panel > .of-pricing-locked-box,
html[data-theme="dark"] .of-checkout-aside-panel > .of-checkout-summary,
html[data-theme="dark"] .of-checkout-aside-panel > .of-checkout-charge-now,
html[data-theme="dark"] .of-checkout-aside-panel > .of-checkout-actions {
  border-color: #3f5a90;
  background: #132544;
  box-shadow: none;
}

html[data-theme="dark"] .of-checkout-legal-row {
  border-color: #365286;
  background: linear-gradient(180deg, #142542 0%, #11203b 100%);
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.45);
}

html[data-theme="dark"] .of-summary-card-head {
  border-bottom-color: #334a7b;
}

html[data-theme="dark"] .of-checkout-section-head {
  border-bottom-color: #334a7b;
}

html[data-theme="dark"] .of-summary-item {
  border-color: #405a91;
  background: #132544;
}

html[data-theme="dark"] .of-summary-item-head span {
  color: #e0eaff;
}

html[data-theme="dark"] .of-summary-item-head small {
  border-color: #405f99;
  background: #1d3360;
  color: #b8cbff;
}

html[data-theme="dark"] .of-summary-item strong {
  color: #d8e6ff;
}

html[data-theme="dark"] .of-summary-package-includes-label,
html[data-theme="dark"] .of-summary-package-includes-more {
  color: #9fb3dc;
}

html[data-theme="dark"] .of-summary-package-include-chip {
  border-color: #415d94;
  background: #1a3058;
  color: #d1e0ff;
}

html[data-theme="dark"] .of-summary-package-include-icon {
  border-color: #4f6fb0;
  background: #16294a;
  color: #9eb6ff;
}

html[data-theme="dark"] .tax-rates-v2 .tax-rates-header {
  border-color: #355184;
  background:
    radial-gradient(420px 210px at 8% 8%, rgba(95, 120, 255, 0.22), transparent 72%),
    radial-gradient(400px 190px at 92% 14%, rgba(40, 173, 128, 0.2), transparent 74%),
    linear-gradient(132deg, #132345 0%, #11203f 46%, #122a33 100%);
}

html[data-theme="dark"] .tax-rates-v2 .tax-rates-kicker {
  color: #9db5ff;
}

html[data-theme="dark"] .tax-rates-v2 h2 {
  color: #e6eeff;
}

html[data-theme="dark"] .tax-rates-v2 .tax-rates-hero-text {
  color: #a8bde8;
}

html[data-theme="dark"] .tax-rates-v2 .tax-rates-metric {
  border-color: #3d5a92;
  background: rgba(16, 29, 56, 0.84);
}

html[data-theme="dark"] .tax-rates-v2 .tax-rates-metric span {
  color: #9fb3df;
}

html[data-theme="dark"] .tax-rates-v2 .tax-rates-metric strong {
  color: #e6eeff;
}

html[data-theme="dark"] .tax-rates-v2 .tax-rates-board {
  border-color: #334877;
  background: linear-gradient(180deg, #121f39 0%, #0f1a34 100%);
}

html[data-theme="dark"] .tax-rates-v2 .tax-rates-board-head h3 {
  color: #e4edff;
}

html[data-theme="dark"] .tax-rates-empty {
  border-color: #3f588e;
  background: #132345;
}

html[data-theme="dark"] .tax-rates-empty-icon {
  border-color: #506db0;
  background: #1e3465;
  color: #a9beff;
}

html[data-theme="dark"] .tax-rates-empty h4 {
  color: #e6eeff;
}

html[data-theme="dark"] .tax-rates-empty p {
  color: #9fb2de;
}

html[data-theme="dark"] .tax-rates-rate-chip {
  border-color: #4664a8;
  background: #1d3360;
  color: #c8d8ff;
}

html[data-theme="dark"] .tax-rates-table .tax-rates-region {
  color: #b2c5eb;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-rule {
  border-color: #384f80;
  background: #131f38;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-field {
  color: #d8e5ff;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-title-wrap .tax-rates-hero-text,
html[data-theme="dark"] .booking-limits-redesign .tax-rates-board-head .muted-note,
html[data-theme="dark"] .booking-limits-redesign .booking-limits-rule .muted-note {
  color: #9fb2de;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-intro-head h2 {
  color: #e4edff;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-inline-field span {
  border-color: #46639c;
  background: #182949;
  color: #c6d7ff;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-impact-list li {
  border-color: #3a517f;
  background: #14243f;
  color: #bccded;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-impact-list strong {
  color: #e5eeff;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-explain-item {
  border-color: #3a517f;
  background: #14243f;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-explain-key {
  color: #dce8ff;
}

html[data-theme="dark"] .booking-limits-redesign .booking-limits-explain-item p {
  color: #a8bce8;
}

html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-rule,
html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-toggle-card {
  border-color: #384f80;
  background: #131f38;
}

html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-intro-head .muted-note,
html[data-theme="dark"] .appointment-settings-redesign .tax-rates-board-head .muted-note,
html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-help,
html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-toggle-card small,
html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-note {
  color: #9fb2de;
}

html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-toggle,
html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-field,
html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-intro-head h2 {
  color: #dce8ff;
}

html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-inline-field span {
  border-color: #46639c;
  background: #182949;
  color: #c6d7ff;
}

html[data-theme="dark"] .appointment-settings-redesign .appointment-settings-note {
  border-color: #3a517f;
  background: #14243f;
}

html[data-theme="dark"] .booking-limits-helper-tooltip {
  border-color: #4d69aa;
  background: #1d3261;
  color: #b8ccff;
}

html[data-theme="dark"] .booking-limits-helper-tooltip::before {
  border-top-color: #3f588f;
}

html[data-theme="dark"] .booking-limits-helper-tooltip::after {
  border-color: #3f588f;
  background: #101d35;
  color: #d2e0ff;
  box-shadow: 0 14px 26px rgba(4, 8, 16, 0.45);
}

html[data-theme="dark"] .coupons-redesign .coupons-hero {
  border-color: #355184;
  background:
    radial-gradient(420px 210px at 8% 8%, rgba(95, 120, 255, 0.22), transparent 72%),
    radial-gradient(400px 190px at 92% 14%, rgba(235, 159, 61, 0.18), transparent 74%),
    linear-gradient(132deg, #132345 0%, #11203f 46%, #2b2035 100%);
}

html[data-theme="dark"] .coupons-redesign .coupons-kicker {
  color: #9db5ff;
}

html[data-theme="dark"] .coupons-redesign .coupons-hero h2 {
  color: #e6eeff;
}

html[data-theme="dark"] .coupons-redesign .coupons-hero-text {
  color: #a8bde8;
}

html[data-theme="dark"] .coupons-redesign .coupons-stat-chip {
  border-color: #3d5a92;
  background: rgba(16, 29, 56, 0.84);
}

html[data-theme="dark"] .coupons-redesign .coupons-stat-chip span {
  color: #9fb3df;
}

html[data-theme="dark"] .coupons-redesign .coupons-stat-chip strong {
  color: #e6eeff;
}

html[data-theme="dark"] .coupons-redesign .coupons-board {
  border-color: #334877;
  background: linear-gradient(180deg, #121f39 0%, #0f1a34 100%);
}

html[data-theme="dark"] .coupons-redesign .coupons-board-head h3 {
  color: #e4edff;
}

html[data-theme="dark"] .coupons-amount-chip {
  border-color: #4664a8;
  background: #1d3360;
  color: #c8d8ff;
}

html[data-theme="dark"] .coupons-redeemed-chip {
  border-color: #3f578c;
  background: #162a50;
  color: #c0d0f6;
}

html[data-theme="dark"] .coupons-promo-code {
  border-color: #4f679f;
  background: #16274a;
  color: #cfdcff;
}

html[data-theme="dark"] .coupons-empty {
  border-color: #3f588e;
  background: #132345;
}

html[data-theme="dark"] .coupons-empty-icon {
  border-color: #506db0;
  background: #1e3465;
  color: #a9beff;
}

html[data-theme="dark"] .coupons-empty h4 {
  color: #e6eeff;
}

html[data-theme="dark"] .coupons-empty p,
html[data-theme="dark"] .coupons-promo-empty {
  color: #9fb2de;
}

html[data-theme="dark"] .twilight-default-card {
  border-color: #334877;
  background: linear-gradient(180deg, #121f39 0%, #0f1a34 100%);
}

html[data-theme="dark"] .twilight-default-card-head,
html[data-theme="dark"] .twilight-grid-head,
html[data-theme="dark"] .twilight-card-actions {
  border-color: #2d3f68;
}

html[data-theme="dark"] .twilight-default-card-kicker {
  color: #9db5ff;
}

html[data-theme="dark"] .twilight-default-card-copy h3,
html[data-theme="dark"] .twilight-summary-chip strong,
html[data-theme="dark"] .twilight-grid-day {
  color: #e5edff;
}

html[data-theme="dark"] .twilight-default-card-copy p,
html[data-theme="dark"] .twilight-summary-chip span,
html[data-theme="dark"] .twilight-summary-chip small,
html[data-theme="dark"] .twilight-grid-day-meta,
html[data-theme="dark"] .twilight-grid-note {
  color: #9fb2de;
}

html[data-theme="dark"] .twilight-summary-chip,
html[data-theme="dark"] .twilight-grid-row,
html[data-theme="dark"] .twilight-grid-check {
  border-color: #334877;
  background: #12213e;
}

html[data-theme="dark"] .twilight-grid-head {
  background: #162746;
  color: #9eb2de;
}

html[data-theme="dark"] .twilight-grid-row:hover {
  border-color: #4e68a6;
  background: #182b4f;
  box-shadow: 0 10px 20px rgba(3, 8, 20, 0.44);
}

html[data-theme="dark"] .twilight-grid-check {
  color: #cdd9f9;
}

html[data-theme="dark"] .products-catalog-filters,
html[data-theme="dark"] .listing-filter-panel {
  background: linear-gradient(180deg, #121f39 0%, #0f1a34 100%);
}

html[data-theme="dark"] .products-catalog-toolbar {
  border-color: #334877;
  background: linear-gradient(180deg, #152543 0%, #12213e 100%);
}

html[data-theme="dark"] .products-catalog-toolbar-count {
  color: #a4b5dc;
}

html[data-theme="dark"] .products-catalog-toolbar-count strong {
  color: #e0e9ff;
}

html[data-theme="dark"] .products-catalog-toolbar-stat {
  border-color: #3d568e;
  background: #172b52;
  color: #b4c5eb;
}

html[data-theme="dark"] .products-catalog-toolbar-stat strong {
  color: #e0e9ff;
}

html[data-theme="dark"] .products-filter-actions {
  border-top-color: #334877;
  background: #172848;
}

html[data-theme="dark"] .products-catalog-filters input,
html[data-theme="dark"] .products-catalog-filters select,
html[data-theme="dark"] .listing-filters input,
html[data-theme="dark"] .listing-filters select {
  border-color: #3a4d80;
  background: #0f1a34;
  color: #e4edff;
}

html[data-theme="dark"] .products-image-upload-drop-hint {
  background: rgba(15, 24, 45, 0.88);
  border-color: #465d97;
}

html[data-theme="dark"] .products-image-upload-shell.is-gallery .products-image-upload-main.is-gallery-dropzone {
  border-color: #3e5690;
  background: #0f1a34;
}

html[data-theme="dark"] .products-image-upload-gallery-drop-title {
  color: #c8d7ff;
}

html[data-theme="dark"] .products-image-upload-gallery-drop-sub {
  color: #9cb1df;
}

html[data-theme="dark"] .products-image-upload-main.is-drag-over {
  border-color: #6f8dff;
  background: #1a2d55;
  box-shadow: inset 0 0 0 2px rgba(111, 141, 255, 0.28);
}

html[data-theme="dark"] .products-media-dropzone-title,
html[data-theme="dark"] .products-media-gallery-empty strong,
html[data-theme="dark"] .products-media-gallery-tour-host {
  color: #dce7ff;
}

html[data-theme="dark"] .products-media-dropzone-sub,
html[data-theme="dark"] .products-media-gallery-empty,
html[data-theme="dark"] .products-media-gallery-tour-copy {
  color: #9cb1df;
}

html[data-theme="dark"] .products-media-dropzone.is-drag-over {
  border-color: #6f8dff;
  background: #1a2d55;
  box-shadow: inset 0 0 0 2px rgba(111, 141, 255, 0.28);
}

html[data-theme="dark"] .products-media-gallery-tile-tour {
  background: linear-gradient(145deg, #162544 0%, #0f1a34 100%);
  color: #dce7ff;
}

html[data-theme="dark"] .products-media-gallery-tour-mark {
  color: #8ea6ff;
}

html[data-theme="dark"] .products-media-link-modal-backdrop {
  background: rgba(3, 8, 23, 0.54);
}

html[data-theme="dark"] .products-media-gallery-delete {
  border-color: #46609b;
  background: rgba(16, 27, 52, 0.94);
  color: #ff8e87;
  box-shadow: 0 8px 18px rgba(3, 8, 23, 0.36);
}

html[data-theme="dark"] .products-media-gallery-delete:hover {
  border-color: rgba(255, 142, 135, 0.35);
  background: #2a1730;
}

html[data-theme="dark"] .products-catalog-table th,
html[data-theme="dark"] .products-categories-table th {
  background: #16233f;
  color: #9fb2de;
}

html[data-theme="dark"] .products-catalog-table td,
html[data-theme="dark"] .products-categories-table td {
  border-bottom-color: #2a3960;
}

html[data-theme="dark"] .products-handle-cell,
html[data-theme="dark"] .products-price-cell {
  color: #dce7ff;
}

html[data-theme="dark"] .products-list-table tbody tr:hover td {
  background: #162a50;
}

html[data-theme="dark"] .products-tag-pill {
  background: #243b6a;
  color: #d5e4ff;
}

html[data-theme="dark"] .products-active-pill.inactive {
  background: rgba(224, 84, 101, 0.24);
  color: #ffb2bc;
}

html[data-theme="dark"] .products-reorder-handle,
html[data-theme="dark"] .products-info-image-placeholder {
  border-color: #3a4d80;
  background: #101b34;
}

html[data-theme="dark"] .products-list-table tbody tr:hover .products-reorder-handle {
  border-color: #5974b8;
  background: #1c315d;
}

html[data-theme="dark"] .products-tabs-table-wrap tbody tr:hover .products-tab-reorder-handle {
  border-color: #5974b8;
  background: #1c315d;
}

html[data-theme="dark"] .products-info-image,
html[data-theme="dark"] .products-editor-image-preview img {
  border-color: #334877;
  background: #101b34;
}

html[data-theme="dark"] .products-meta-chip {
  border-color: #395283;
  background: #182d55;
  color: #bfd0f5;
}

html[data-theme="dark"] .products-list-table tr.is-dragging .products-reorder-handle {
  border-color: #6f8df3;
  background: #1c2f56;
}

html[data-theme="dark"] .products-tabs-table-wrap tr.is-dragging .products-tab-reorder-handle {
  border-color: #6f8df3;
  background: #1c2f56;
}

html[data-theme="dark"] .products-list-table tr.products-drop-before td,
html[data-theme="dark"] .products-list-table tr.products-drop-after td {
  background: #1a2b4d;
}

html[data-theme="dark"] .products-tabs-table-wrap tr.products-drop-before td,
html[data-theme="dark"] .products-tabs-table-wrap tr.products-drop-after td {
  background: #1a2b4d;
}

html[data-theme="dark"] .products-edit-link {
  color: #9db5ff;
}

html[data-theme="dark"] .products-delete-link {
  color: #ff8e9b;
}

html[data-theme="dark"] .pricing-plan-library-card {
  border-color: #334a7f;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 150, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #101b34 0%, #14203d 100%);
  box-shadow: 0 16px 30px rgba(3, 8, 23, 0.34);
}

html[data-theme="dark"] .pricing-plan-library-card-accent {
  background: linear-gradient(180deg, #7b90ff 0%, #79c2ff 100%);
}

html[data-theme="dark"] .pricing-plan-library-card-title-row h4 {
  color: #eff4ff;
}

html[data-theme="dark"] .pricing-plan-library-card-description {
  color: #9fb2de;
}

html[data-theme="dark"] .pricing-plan-library-stat:not(:last-child) {
  border-right-color: #31466f;
}

html[data-theme="dark"] .pricing-plan-library-stat small {
  color: #87a0d8;
}

html[data-theme="dark"] .pricing-plan-library-stat strong {
  color: #eef3ff;
}

html[data-theme="dark"] .pricing-plan-library-card-updated {
  background: transparent;
}

html[data-theme="dark"] .pricing-plan-library-card-updated span {
  color: #87a0d8;
}

html[data-theme="dark"] .pricing-plan-library-card-updated strong {
  color: #eef3ff;
}

html[data-theme="dark"] .pricing-plan-library-card-actions .products-edit-link {
  border-color: #35508a;
  background: #182746;
}

html[data-theme="dark"] .pricing-plan-library-card-actions .products-delete-link {
  border-color: #6d3850;
  background: #2a1730;
}

html[data-theme="dark"] .products-image-upload-main img,
html[data-theme="dark"] .products-image-upload-main video {
  background: #0f1a34;
}

html[data-theme="dark"] .products-image-upload-thumb {
  border-color: #35508a;
  background: #101b34;
}

html[data-theme="dark"] .products-image-upload-thumb.is-dragging {
  border-color: #7c96ff;
  box-shadow: 0 10px 22px rgba(3, 8, 23, 0.52);
}

html[data-theme="dark"] .products-image-upload-thumb.products-thumb-drop-before {
  box-shadow: inset 0 3px 0 #7c96ff;
}

html[data-theme="dark"] .products-image-upload-thumb.products-thumb-drop-after {
  box-shadow: inset 0 -3px 0 #7c96ff;
}

html[data-theme="dark"] .products-image-upload-thumb-drag {
  border-color: #46609b;
  background: rgba(22, 38, 66, 0.95);
  color: #c3d2f8;
}

html[data-theme="dark"] .listing-card {
  box-shadow: 0 14px 30px rgba(2, 8, 24, 0.46);
}

html[data-theme="dark"] .listing-card-body h3,
html[data-theme="dark"] .listing-card-order strong,
html[data-theme="dark"] .listing-customer-copy strong,
html[data-theme="dark"] .listing-accordion-title,
html[data-theme="dark"] .listing-secondary-row-main strong,
html[data-theme="dark"] .listing-property-card-head h4,
html[data-theme="dark"] .listing-secondary-stat strong,
html[data-theme="dark"] .listing-marketing-card-head h4,
html[data-theme="dark"] .listing-marketing-primary-photo-copy strong,
html[data-theme="dark"] .listing-flyer-template-meta strong,
html[data-theme="dark"] .listing-website-status-banner strong,
html[data-theme="dark"] .listing-website-analytics-panel h4,
html[data-theme="dark"] .listing-website-analytics-grid article strong,
html[data-theme="dark"] .listing-order-item-main,
html[data-theme="dark"] .listing-order-item-price strong,
html[data-theme="dark"] .listing-activity-copy strong,
html[data-theme="dark"] .listing-revision-note-copy strong {
  color: #e4edff;
}

html[data-theme="dark"] .listing-card-order {
  border-top-color: #2a3960;
  border-bottom-color: #2a3960;
  color: #a8b8de;
}

html[data-theme="dark"] .listing-download-lock-btn,
html[data-theme="dark"] .listing-download-lock-icon,
html[data-theme="dark"] .listing-transfer-btn {
  border-color: #3d538a;
  background: #1b2d54;
  color: #cfe0ff;
}

html[data-theme="dark"] .listing-download-lock-btn.is-locked,
html[data-theme="dark"] .listing-download-lock-icon.is-locked {
  border-color: #7c4a56;
  background: #3b2130;
  color: #ffc8d4;
}

html[data-theme="dark"] .listing-delete-btn {
  border-color: #7a435a;
  background: #3b1f2e;
  color: #ffc9db;
}

html[data-theme="dark"] .listing-delete-btn:hover {
  border-color: #90546a;
  background: #4b2738;
  color: #ffd3e2;
}

html[data-theme="dark"] .listing-transfer-modal-note {
  color: #9cb0de;
}

html[data-theme="dark"] .listing-transfer-orders-toggle {
  border-color: #30416d;
  background: #0f1a34;
}

html[data-theme="dark"] .listing-transfer-orders-title {
  color: #dce7ff;
}

html[data-theme="dark"] .listing-transfer-orders-toggle small {
  color: #9cb0de;
}

html[data-theme="dark"] .listing-customer-add-card {
  border-color: #4b6094;
  background: #132443;
  color: #cfddff;
}

html[data-theme="dark"] .listing-customer-add-card:hover {
  border-color: #617cbf;
  background: #1a2f55;
}

html[data-theme="dark"] .listing-customer-contact {
  border-color: #3a4f84;
  background: #0f1a34;
  box-shadow: 0 18px 34px rgba(2, 8, 24, 0.6);
}

html[data-theme="dark"] .listing-customer-contact::before {
  border-left-color: #3a4f84;
  border-top-color: #3a4f84;
  background: #0f1a34;
}

html[data-theme="dark"] .listing-customer-expand-btn {
  border-color: #42598f;
  background: #1a2d53;
  color: #cfe0ff;
}

html[data-theme="dark"] .listing-customer-expand-btn:hover {
  border-color: #5b77b8;
  background: #213a66;
}

html[data-theme="dark"] .listing-customer-expand-btn.is-open {
  border-color: #7090d6;
  background: #294777;
}

html[data-theme="dark"] .listing-customer-primary {
  border-color: #3f5c97;
  background: #243d6e;
  color: #d7e4ff;
}

html[data-theme="dark"] .listing-accordion summary:hover,
html[data-theme="dark"] .listing-secondary-row-media-match > summary:hover,
html[data-theme="dark"] .listing-gallery-card.is-draggable:hover {
  background: #192c50;
}

html[data-theme="dark"] .listing-accordion-badge,
html[data-theme="dark"] .listing-accordion-chevron,
html[data-theme="dark"] .listing-secondary-row-media-match .listing-secondary-pill,
html[data-theme="dark"] .listing-secondary-row-media-match .listing-secondary-count-badge,
html[data-theme="dark"] .listing-secondary-row-media-match .listing-secondary-chevron,
html[data-theme="dark"] .listing-secondary-pill,
html[data-theme="dark"] .listing-secondary-count-badge {
  border-color: #3e5892;
  background: #243d6e;
  color: #d5e4ff;
}

html[data-theme="dark"] .listing-accordion[open] summary,
html[data-theme="dark"] .listing-secondary-row-media-match[open] > summary {
  background: linear-gradient(180deg, #1a2f55 0%, #172848 100%);
}

html[data-theme="dark"] .listing-accordion-body,
html[data-theme="dark"] .listing-secondary-body {
  border-top-color: #2a3960;
  background: #0f1a34;
}

html[data-theme="dark"] .listing-media-toolbar {
  background: linear-gradient(180deg, #121f39 0%, #101b35 100%);
}

html[data-theme="dark"] .listing-files-empty {
  border-color: #3a4f84;
  background: #131f39;
}

html[data-theme="dark"] .listing-files-row {
  border-color: #324975;
  background: linear-gradient(180deg, #152543 0%, #12203a 100%);
  box-shadow: 0 10px 22px rgba(2, 8, 24, 0.48);
}

html[data-theme="dark"] .listing-files-row.is-selected {
  border-color: #6281ca;
  background: linear-gradient(180deg, #1a2f55 0%, #162743 100%);
  box-shadow:
    0 0 0 2px rgba(108, 129, 255, 0.26),
    0 12px 24px rgba(2, 8, 24, 0.55);
}

html[data-theme="dark"] .listing-files-select-toggle {
  border-color: #3b5388;
  background: #1b2e54;
  color: #cfe0ff;
}

html[data-theme="dark"] .listing-files-select-toggle:hover {
  border-color: #5772b2;
  background: #223c6a;
}

html[data-theme="dark"] .listing-files-select-toggle.is-selected {
  border-color: #6b8be1;
  background: #294777;
  color: #e0ecff;
}

html[data-theme="dark"] .listing-files-select-indicator {
  border-color: #4e66a2;
  background: #12203a;
  color: #d5e4ff;
}

html[data-theme="dark"] .listing-files-select-toggle.is-selected .listing-files-select-indicator {
  border-color: #7999ef;
  background: #6b89e5;
  color: #fff;
}

html[data-theme="dark"] .listing-files-type-badge {
  border-color: #3e5892;
  background: #1e3561;
  color: #d5e4ff;
}

html[data-theme="dark"] .listing-files-copy strong {
  color: #e4edff;
}

html[data-theme="dark"] .listing-files-copy span {
  color: #9fb2de;
}

html[data-theme="dark"] .listing-file-visibility-btn,
html[data-theme="dark"] .listing-file-visibility-chip {
  border-color: #3f588e;
  background: #1d315a;
  color: #d3e2ff;
}

html[data-theme="dark"] .listing-file-visibility-btn.is-public,
html[data-theme="dark"] .listing-file-visibility-chip.is-public {
  border-color: #3f6b62;
  background: #1a3b34;
  color: #ccf5e6;
}

html[data-theme="dark"] .listing-file-visibility-btn.is-private,
html[data-theme="dark"] .listing-file-visibility-chip.is-private {
  border-color: #7a6240;
  background: #3a2a17;
  color: #f7dba7;
}

html[data-theme="dark"] .listing-media-order-hint {
  border-color: #3f5d99;
  background: #223b6a;
  color: #d7e4ff;
}

html[data-theme="dark"] .listing-media-order-hint.is-inactive {
  border-color: #334777;
  background: #172540;
  color: #aac0ee;
}

html[data-theme="dark"] .listing-media-order-hint-icon,
html[data-theme="dark"] .listing-gallery-order-badge,
html[data-theme="dark"] .listing-tour-provider-badge,
html[data-theme="dark"] .listing-media-group-badge,
html[data-theme="dark"] .listing-room-label-badge {
  border-color: #3d588f;
  background: #1e3561;
  color: #d5e4ff;
}

html[data-theme="dark"] .listing-room-label-badge.is-manual {
  border-color: #3f6b62;
  background: #1a3b34;
  color: #ccf5e6;
}

html[data-theme="dark"] .listing-room-label-badge.is-empty {
  border-style: dashed;
  border-color: #41598f;
  background: #172949;
  color: #c0d3ff;
}

html[data-theme="dark"] .listing-gallery-drag-handle {
  border-color: #3a4f84;
  background: #121f39;
  color: #aec2ef;
}

html[data-theme="dark"] .listing-gallery-media {
  border-color: #334877;
  background: #101a33;
}

html[data-theme="dark"] .listing-gallery-placeholder {
  color: #a9bce8;
}

html[data-theme="dark"] .listing-gallery-card.is-selected {
  border-color: #6483cd;
  background: linear-gradient(180deg, #162743 0%, #13203a 100%);
  box-shadow: 0 0 0 2px rgba(108, 129, 255, 0.28), 0 14px 28px rgba(2, 8, 24, 0.58);
}

html[data-theme="dark"] .listing-gallery-card.is-dragging-bundle {
  border-color: #6b83c8;
  background: linear-gradient(180deg, #172a48 0%, #12203a 100%);
  box-shadow: 0 12px 26px rgba(1, 8, 26, 0.6);
}

html[data-theme="dark"] .listing-action-target-badge,
html[data-theme="dark"] .listing-gallery-card.is-action-target .listing-gallery-order-badge {
  border-color: #b05e4a;
  background: #4b2a20;
  color: #ffd9cc;
}

html[data-theme="dark"] .listing-media-action-needed-badge {
  border-color: #9f5a4b;
  background: #40261f;
  color: #ffcfc0;
}

html[data-theme="dark"] .listing-media-action-needed-badge:hover {
  border-color: #b56a58;
  background: #513026;
}

html[data-theme="dark"] .listing-gallery-card.is-action-needed {
  border-color: #8d5749;
  background: linear-gradient(180deg, #2f211d 0%, #251a18 100%);
}

html[data-theme="dark"] .listing-gallery-card.is-action-target {
  border-color: #b5604d;
  background: linear-gradient(180deg, #3a2420 0%, #2e1d1a 100%);
}

html[data-theme="dark"] .listing-gallery-actions .listing-gallery-action-btn.is-note,
html[data-theme="dark"] .listing-gallery-actions .listing-gallery-action-btn.is-danger {
  border-color: #7a435a;
  background: #3b1f2e;
  color: #ffc9db;
}

html[data-theme="dark"] .listing-gallery-actions .listing-gallery-action-btn.is-note:hover,
html[data-theme="dark"] .listing-gallery-actions .listing-gallery-action-btn.is-danger:hover {
  border-color: #915368;
  background: #4a2738;
}

html[data-theme="dark"] .listing-gallery-selection-badge {
  border-color: #5d78be;
  background: rgba(25, 45, 85, 0.92);
  color: #d9e6ff;
}

html[data-theme="dark"] .listing-gallery-selection-badge.is-selected {
  border-color: #84a0eb;
  background: rgba(35, 60, 112, 0.94);
  color: #e5eeff;
}

html[data-theme="dark"] .listing-gallery-empty-cell {
  border-color: #3a4f84;
  background: #111c35;
}

html[data-theme="dark"] .listing-property-card-head {
  border-bottom-color: #2a3960;
  background: #162746;
}

html[data-theme="dark"] .listing-property-form label {
  color: #c5d5f6;
}

html[data-theme="dark"] .listing-property-form label small {
  color: #9fb2de;
}

html[data-theme="dark"] .listing-property-price-input {
  border-color: #3a4f84;
  background: #0f1a34;
}

html[data-theme="dark"] .listing-property-price-input > span {
  border-right-color: #3a4f84;
  background: #162746;
  color: #c5d5f6;
}

html[data-theme="dark"] .listing-marketing-card-preview {
  border-bottom-color: #334877;
}

html[data-theme="dark"] .listing-marketing-photo-option.is-selected,
html[data-theme="dark"] .listing-marketing-photo-picker-actions .btn.is-selected,
html[data-theme="dark"] .listing-flyer-template-tile input:checked + .listing-flyer-template-meta {
  border-color: #6483cd;
  box-shadow: inset 0 0 0 1px rgba(108, 129, 255, 0.32);
  background: #1b2f55;
}

html[data-theme="dark"] .listing-marketing-photo-option-thumb,
html[data-theme="dark"] .listing-flyer-template-preview {
  border-color: #3a4f84;
}

html[data-theme="dark"] .listing-marketing-primary-photo-cta {
  border-color: #3e5892;
  background: #243d6e;
  color: #d7e4ff;
}

html[data-theme="dark"] .listing-website-status-banner.is-active {
  border-color: #3e7b63;
  background: #1f3a33;
}

html[data-theme="dark"] .listing-website-status-banner.is-active strong,
html[data-theme="dark"] .listing-website-status-banner.is-active p {
  color: #b8f0db;
}

html[data-theme="dark"] .listing-order-amount-chip,
html[data-theme="dark"] .listing-order-amount-chip-neutral {
  border-color: #3e5892;
  background: #243d6e;
  color: #d7e4ff;
}

html[data-theme="dark"] .listing-order-amount-chip-partial {
  border-color: #7f6132;
  background: #3d2f1a;
  color: #ffd99b;
}

html[data-theme="dark"] .listing-order-amount-chip-unpaid {
  border-color: #854a57;
  background: #3e212a;
  color: #ffc3ce;
}

html[data-theme="dark"] .listing-order-amount-chip-canceled {
  border-color: #8a6438;
  background: #3f2d18;
  color: #ffd5a7;
}

html[data-theme="dark"] .listing-order-view-btn,
html[data-theme="dark"] .listing-order-launch-btn {
  border-color: #3a4f84;
  background: #172848;
  color: #cfddff;
}

html[data-theme="dark"] .listing-order-view-btn:hover,
html[data-theme="dark"] .listing-order-launch-btn:hover {
  border-color: #5670af;
  background: #203760;
}

html[data-theme="dark"] .listing-order-item-row {
  border-top-color: #2a3960;
}

html[data-theme="dark"] .listing-order-totals-row {
  border-top-color: #2a3960;
  background: #162746;
  color: #c3d4f5;
}

html[data-theme="dark"] .listing-activity-row .listing-secondary-body {
  background: #101b34;
}

html[data-theme="dark"] .listing-media-upload-progress {
  background: linear-gradient(180deg, #152747 0%, #111f39 100%);
}

html[data-theme="dark"] .listing-media-upload-progress-head,
html[data-theme="dark"] .listing-media-group-selection {
  color: #d7e4ff;
}

html[data-theme="dark"] .listing-media-upload-spinner {
  border-color: #4b6094;
  border-top-color: #8aa5ff;
}

html[data-theme="dark"] .listing-media-group-option:hover {
  border-color: #5974b4;
  background: #1a2f55;
}

html[data-theme="dark"] .listing-media-group-drag-handle {
  border-color: #3a4f84;
  background: #121f39;
  color: #aec2ef;
}

html[data-theme="dark"] .listing-media-group-option.is-dragging {
  border-color: #6e89cd;
  box-shadow: 0 12px 26px rgba(2, 8, 24, 0.6);
}

html[data-theme="dark"] .listing-media-group-option.listing-media-group-drop-before {
  box-shadow: inset 0 2px 0 #90adff;
}

html[data-theme="dark"] .listing-media-group-option.listing-media-group-drop-after {
  box-shadow: inset 0 -2px 0 #90adff;
}

html[data-theme="dark"] .listing-cubicasa-order-list {
  border-color: #31467a;
  background: linear-gradient(180deg, #111f3c 0%, #0f1b34 100%);
}

html[data-theme="dark"] .listing-cubicasa-summary-pill {
  border-color: #31467a;
  background: #132443;
}

html[data-theme="dark"] .listing-cubicasa-summary-pill span {
  color: #9eb3df;
}

html[data-theme="dark"] .listing-cubicasa-summary-pill strong {
  color: #e3edff;
}

html[data-theme="dark"] .listing-cubicasa-order-option {
  border-color: #31467a;
  background: #132443;
}

html[data-theme="dark"] .listing-cubicasa-order-option:hover {
  border-color: #5974b4;
  background: #1a2f55;
}

html[data-theme="dark"] .listing-cubicasa-order-option.is-selected {
  border-color: #6f8fdf;
  background: #20345f;
}

html[data-theme="dark"] .listing-cubicasa-order-copy strong {
  color: #e3edff;
}

html[data-theme="dark"] .listing-cubicasa-order-badge {
  background: #234f40;
  color: #9bf5c9;
}

html[data-theme="dark"] .listing-cubicasa-order-copy span {
  color: #9eb3df;
}

html[data-theme="dark"] .listing-cubicasa-status-badge {
  border-color: #4b5f92;
  background: #1a2a4c;
  color: #ccd8f6;
}

html[data-theme="dark"] .listing-cubicasa-status-badge.is-ready {
  border-color: #2f7a5b;
  background: #1e4738;
  color: #9bf5c9;
}

html[data-theme="dark"] .listing-cubicasa-status-badge.is-processing {
  border-color: #856737;
  background: #3b2d16;
  color: #ffd68a;
}

html[data-theme="dark"] .listing-cubicasa-status-badge.is-error {
  border-color: #7a435a;
  background: #3a1e2b;
  color: #ffc9db;
}

html[data-theme="dark"] .listing-cubicasa-import-error {
  border-color: #7a435a;
  background: #3a1e2b;
  color: #ffc9db;
}

html[data-theme="dark"] .listing-customer-modal-search-input-wrap .search-suggestions-menu {
  border-color: #30416d;
  background: #0f1a34;
  box-shadow: 0 18px 34px rgba(2, 7, 22, 0.6);
}

html[data-theme="dark"] .listing-customer-modal-search-input-wrap .search-suggestions-option {
  background: #0f1a34;
  color: #dce7ff;
}

html[data-theme="dark"] .listing-customer-modal-search-input-wrap .search-suggestions-option:hover,
html[data-theme="dark"] .listing-customer-modal-search-input-wrap .search-suggestions-option:focus-visible {
  border-color: #43598f;
  background: #1a2a4c;
}

html[data-theme="dark"] .listing-customer-modal-search-input-wrap .search-suggestions-empty {
  color: #9cb0de;
}

html[data-theme="dark"] .listing-media-dropzone.is-drag-over {
  border-color: #6a86d3;
  background: #1e335d;
}

html[data-theme="dark"] .products-image-upload-label,
html[data-theme="dark"] .listing-website-editor-grid label,
html[data-theme="dark"] .listing-delivery-mode-grid legend,
html[data-theme="dark"] .listing-delivery-schedule-label {
  color: #c5d5f6;
}

html[data-theme="dark"] .listing-thumb-status-icon.is-warn,
html[data-theme="dark"] .listing-chip-warn {
  border-color: #7f6132;
  background: linear-gradient(180deg, #4a371f 0%, #3a2c18 100%);
  color: #ffd99b;
}

html[data-theme="dark"] .listing-thumb-status-icon.is-danger {
  border-color: #854a57;
  background: linear-gradient(180deg, #4b252f 0%, #3d1f27 100%);
  color: #ffc3ce;
}

html[data-theme="dark"] .listing-thumb-status-icon.is-neutral,
html[data-theme="dark"] .listing-chip-neutral {
  border-color: #3d588f;
  background: linear-gradient(180deg, #27406f 0%, #20355d 100%);
  color: #d7e4ff;
}

html[data-theme="dark"] .listing-chip-neutral::before,
html[data-theme="dark"] .listing-chip-warn::before {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .listing-media-hidden-badge {
  border-color: #7f6132;
  background: #3d2f1a;
  color: #ffd99b;
}

html[data-theme="dark"] .cp-media-lightbox-backdrop {
  background: rgba(2, 7, 22, 0.84);
}

html[data-theme="dark"] .cp-media-lightbox-caption {
  color: #b8c8ee;
}

html[data-theme="dark"] .cp-media-lightbox-image-wrap {
  border-color: #344b82;
  background: linear-gradient(180deg, #0f1a34 0%, #0b152b 100%);
}

html[data-theme="dark"] .listing-marketing-primary-photo-thumb {
  border-color: #3a4f84;
}

html[data-theme="dark"] .listing-delivery-mode-option {
  border-color: #334877;
  background: #121f39;
}

html[data-theme="dark"] .listing-delivery-mode-option strong {
  color: #e4edff;
}

html[data-theme="dark"] .listing-delivery-mode-option span,
html[data-theme="dark"] .listing-media-file-list {
  color: #9fb2de;
}

/* Dark mode complete-portal coverage for legacy and new workspace modules */
html[data-theme="dark"] .availability-local-nav,
html[data-theme="dark"] .availability-overview-card,
html[data-theme="dark"] .business-hours-editor,
html[data-theme="dark"] .business-hours-row,
html[data-theme="dark"] .availability-business-hours-row,
html[data-theme="dark"] .availability-business-hours-open-toggle,
html[data-theme="dark"] .availability-sync-card,
html[data-theme="dark"] .calendar-team-sidebar,
html[data-theme="dark"] .calendar-team-filter-item,
html[data-theme="dark"] .calendar-team-filter-item.is-active,
html[data-theme="dark"] .scheduling-settings-card,
html[data-theme="dark"] .scheduling-settings-choice,
html[data-theme="dark"] .scheduling-settings-toggle-card,
html[data-theme="dark"] .products-editor-options-panel,
html[data-theme="dark"] .products-editor-toggle-card,
html[data-theme="dark"] .products-editor-solar-panel,
html[data-theme="dark"] .products-editor-radio-pill span,
html[data-theme="dark"] .storefront-order-form-modal,
html[data-theme="dark"] .storefront-order-form-modal-head,
html[data-theme="dark"] .storefront-order-form-card,
html[data-theme="dark"] .storefront-order-form-thumbnail-block,
html[data-theme="dark"] .storefront-payment-method-panel,
html[data-theme="dark"] .storefront-order-form-inline-toggle,
html[data-theme="dark"] .storefront-service-tab-order,
html[data-theme="dark"] .storefront-payment-method-toggle,
html[data-theme="dark"] .storefront-category-row,
html[data-theme="dark"] .storefront-deposit-override-card,
html[data-theme="dark"] .storefront-deposit-override-toggle,
html[data-theme="dark"] .storefront-deposit-override-summary,
html[data-theme="dark"] .storefront-order-form-advanced,
html[data-theme="dark"] .storefront-forms-shell,
html[data-theme="dark"] .storefront-forms-hero,
html[data-theme="dark"] .storefront-forms-stat,
html[data-theme="dark"] .storefront-form-card,
html[data-theme="dark"] .storefront-forms-empty,
html[data-theme="dark"] .storefront-fields-shell,
html[data-theme="dark"] .storefront-fields-hero,
html[data-theme="dark"] .storefront-fields-toolbar,
html[data-theme="dark"] .storefront-fields-current,
html[data-theme="dark"] .storefront-fields-switch-pill,
html[data-theme="dark"] .storefront-fields-stat,
html[data-theme="dark"] .storefront-order-fields-empty,
html[data-theme="dark"] .storefront-order-fields-template-tags span,
html[data-theme="dark"] .storefront-order-field-row,
html[data-theme="dark"] .storefront-order-field-drag-handle,
html[data-theme="dark"] .storefront-order-field-required-toggle,
html[data-theme="dark"] .travel-fees-redesign .travel-fees-board,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-card,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-card-users,
html[data-theme="dark"] .travel-fees-redesign .travel-fees-empty,
html[data-theme="dark"] .travel-fee-config-shell,
html[data-theme="dark"] .travel-fee-hero-stat,
html[data-theme="dark"] .travel-fee-type-option,
html[data-theme="dark"] .travel-fee-quick-rule,
html[data-theme="dark"] .travel-fee-distance-config,
html[data-theme="dark"] .travel-fee-distance-rules,
html[data-theme="dark"] .travel-fee-map-canvas,
html[data-theme="dark"] .travel-fee-assign-users,
html[data-theme="dark"] .travel-fee-team-option,
html[data-theme="dark"] .territory-page-v6-list-card,
html[data-theme="dark"] .territory-map-row-v6,
html[data-theme="dark"] .territory-page-v6 .territory-create-shell.territory-create-shell-v6,
html[data-theme="dark"] .territory-create-summary-v6,
html[data-theme="dark"] .territory-create-shell-body-v6,
html[data-theme="dark"] .territory-page-v6 .territory-v6-map-panel,
html[data-theme="dark"] .territory-page-v6 .territory-v6-builder-panel,
html[data-theme="dark"] .territory-page-v7 .territory-map-row-v6,
html[data-theme="dark"] .territory-policy-card-v7,
html[data-theme="dark"] .territory-policy-modal-v7,
html[data-theme="dark"] .territory-policy-modal-v8,
html[data-theme="dark"] .territory-policy-context-v8,
html[data-theme="dark"] .territory-policy-card-v8,
html[data-theme="dark"] .territory-policy-panel-v8,
html[data-theme="dark"] .territory-builder-modal-v7,
html[data-theme="dark"] .territory-builder-modal-v7 .territory-create-shell-body-v7,
html[data-theme="dark"] .territory-page-v7 .territory-create-shell.territory-create-shell-v7,
html[data-theme="dark"] .territory-create-summary-v7,
html[data-theme="dark"] .territory-create-shell-body-v7,
html[data-theme="dark"] .territory-page-v7 .territory-v7-map-panel,
html[data-theme="dark"] .territory-page-v7 .territory-v7-builder-panel,
html[data-theme="dark"] .territory-page-v5 .territory-create-shell.territory-create-shell-v5,
html[data-theme="dark"] .territory-create-summary-v5,
html[data-theme="dark"] .territory-create-shell-body-v5,
html[data-theme="dark"] .territory-page-v5 .territory-v5-map-panel,
html[data-theme="dark"] .territory-page-v5 .territory-v5-builder-panel,
html[data-theme="dark"] .territory-page-v4-list-card,
html[data-theme="dark"] .territory-create-shell-v4,
html[data-theme="dark"] .territory-create-summary-v4,
html[data-theme="dark"] .territory-create-shell-body-v4,
html[data-theme="dark"] .territory-v3-map-panel,
html[data-theme="dark"] .territory-v3-builder-panel,
html[data-theme="dark"] .territory-builder-form,
html[data-theme="dark"] .territory-create-form,
html[data-theme="dark"] .territory-map-stage,
html[data-theme="dark"] .territory-radius-controls,
html[data-theme="dark"] .territory-search-results,
html[data-theme="dark"] .territory-search-result-row,
html[data-theme="dark"] .territory-search-preview,
html[data-theme="dark"] .territory-search-preview-map,
html[data-theme="dark"] .territory-auto-coverage-note,
html[data-theme="dark"] .territory-v2-coverage-block,
html[data-theme="dark"] .territory-coverage-chip-list,
html[data-theme="dark"] .territory-coverage-chip,
html[data-theme="dark"] .territory-builder-advanced,
html[data-theme="dark"] .cp-scheduler-times,
html[data-theme="dark"] .cp-scheduler-slot-group,
html[data-theme="dark"] .cp-calendar-day,
html[data-theme="dark"] .cp-calendar-day-panel,
html[data-theme="dark"] .cp-calendar-slot,
html[data-theme="dark"] .billing-upgrade-modal,
html[data-theme="dark"] .billing-upgrade-current,
html[data-theme="dark"] .billing-upgrade-plan-card,
html[data-theme="dark"] .billing-upgrade-empty,
html[data-theme="dark"] .settings-brand-theme-preview,
html[data-theme="dark"] .settings-brand-logo-card {
  border-color: #334877;
  background: #121f39;
  color: #dce7ff;
}

html[data-theme="dark"] .billing-upgrade-plan-card.is-current {
  border-color: #6e8fdf;
  background: #182a4f;
  box-shadow: 0 0 0 1px rgba(111, 141, 243, 0.28), 0 10px 20px rgba(8, 16, 33, 0.45);
}

html[data-theme="dark"] .scheduling-settings-hero,
html[data-theme="dark"] .travel-fees-redesign .travel-fees-hero,
html[data-theme="dark"] .travel-fee-config-hero {
  border-color: #355184;
  background:
    radial-gradient(420px 210px at 8% 8%, rgba(95, 120, 255, 0.2), transparent 72%),
    radial-gradient(340px 190px at 92% 14%, rgba(40, 173, 128, 0.16), transparent 74%),
    linear-gradient(132deg, #132345 0%, #11203f 52%, #112a34 100%);
}

html[data-theme="dark"] .storefront-order-form-modal-head,
html[data-theme="dark"] .storefront-forms-hero,
html[data-theme="dark"] .storefront-fields-hero {
  border-color: #355184;
  background:
    radial-gradient(360px 180px at 4% 8%, rgba(95, 120, 255, 0.18), transparent 72%),
    linear-gradient(132deg, #132345 0%, #11203f 52%, #112a34 100%);
}

html[data-theme="dark"] .availability-overview-card:hover,
html[data-theme="dark"] .scheduling-settings-choice:hover,
html[data-theme="dark"] .storefront-fields-switch-pill:hover,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-card:hover,
html[data-theme="dark"] .travel-fee-type-option:hover,
html[data-theme="dark"] .travel-fee-team-option:hover,
html[data-theme="dark"] .territory-search-result-row:hover,
html[data-theme="dark"] .cp-calendar-slot:hover {
  border-color: #5671b0;
  background: #1a2d52;
}

html[data-theme="dark"] .scheduling-settings-choice.is-selected,
html[data-theme="dark"] .storefront-fields-switch-pill.is-active,
html[data-theme="dark"] .storefront-payment-method-toggle.is-active,
html[data-theme="dark"] .travel-fee-type-option.is-active,
html[data-theme="dark"] .cp-calendar-slot.is-selected {
  border-color: #6f8df3;
  background: #223c6b;
  box-shadow: 0 0 0 1px rgba(111, 141, 243, 0.28);
}

html[data-theme="dark"] .availability-overview-icon {
  border-color: #3a4f84;
  background: #172847;
  color: #c9d7ff;
}

html[data-theme="dark"] .storefront-order-form-section-head span,
html[data-theme="dark"] .storefront-payment-method-badge.is-idle,
html[data-theme="dark"] .storefront-order-fields-template-tags span,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-type-chip,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-status-chip.is-inactive,
html[data-theme="dark"] .territory-coverage-chip,
html[data-theme="dark"] .scheduling-settings-summary span {
  border-color: #3e5892;
  background: #1d3360;
  color: #d5e4ff;
}

html[data-theme="dark"] .storefront-payment-method-badge.is-active,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-status-chip.is-active,
html[data-theme="dark"] .travel-fee-hero-status.is-active {
  border-color: #3f6b62;
  background: #1a3b34;
  color: #ccf5e6;
}

html[data-theme="dark"] .travel-fee-hero-status.is-inactive,
html[data-theme="dark"] .storefront-payment-method-badge.is-disabled {
  border-color: #7a435a;
  background: #3b1f2e;
  color: #ffc9db;
}

html[data-theme="dark"] .cp-calendar-day {
  background: #101b34;
  color: #dce7ff;
}

html[data-theme="dark"] .cp-calendar-day.is-available {
  border-color: #4f6ca9;
  background: #152746;
}

html[data-theme="dark"] .cp-calendar-day.is-selected {
  border-color: #7f9bff;
  box-shadow: 0 0 0 1px rgba(127, 155, 255, 0.34) inset;
}

html[data-theme="dark"] .cp-calendar-day.is-unavailable,
html[data-theme="dark"] .cp-calendar-day.is-closed,
html[data-theme="dark"] .cp-calendar-day.is-past,
html[data-theme="dark"] .cp-calendar-day.is-outside {
  border-color: #2f406a;
  background: #0d162d;
  color: #8ea0cc;
}

html[data-theme="dark"] .cp-calendar-day-status {
  color: #a8b9e3;
}

html[data-theme="dark"] .cp-calendar-day-events {
  color: #b9cbff;
}

html[data-theme="dark"] .products-editor-radio-pill input[type="radio"]:checked + span {
  border-color: #6f8df3;
  background: #223c6b;
  color: #e4edff;
}

html[data-theme="dark"] .storefront-order-field-index {
  background: linear-gradient(160deg, #5a78d8 0%, #3f5ebc 100%);
  color: #f4f8ff;
}

html[data-theme="dark"] .business-hours-row input[type="time"]:disabled,
html[data-theme="dark"] .availability-business-hours-row.is-closed input[type="time"] {
  border-color: #2f406a;
  background: #0d162d;
  color: #8ea0cc;
}

html[data-theme="dark"] .travel-fee-modal-actions {
  background: linear-gradient(180deg, rgba(15, 24, 45, 0), #101b34 18px);
}

html[data-theme="dark"] .travel-fee-editor-modal .toolbar {
  border-bottom-color: #314a7c;
  background: linear-gradient(180deg, rgba(17, 28, 54, 0.98), #101b34 82%);
}

html[data-theme="dark"] .storefront-order-form-actions,
html[data-theme="dark"] .storefront-fields-actions,
html[data-theme="dark"] .storefront-order-fields-actions,
html[data-theme="dark"] .scheduling-settings-actions,
html[data-theme="dark"] .availability-business-hours-actions {
  border-top-color: #2a3960;
}

html[data-theme="dark"] .availability-overview-group h2,
html[data-theme="dark"] .availability-section-head h2,
html[data-theme="dark"] .scheduling-settings-hero h3,
html[data-theme="dark"] .scheduling-settings-card-head h3,
html[data-theme="dark"] .scheduling-settings-choice-copy strong,
html[data-theme="dark"] .availability-sync-card h3,
html[data-theme="dark"] .storefront-order-form-modal-head h3,
html[data-theme="dark"] .storefront-order-form-card h5,
html[data-theme="dark"] .storefront-forms-hero h3,
html[data-theme="dark"] .storefront-fields-hero h3,
html[data-theme="dark"] .storefront-form-card-head h4,
html[data-theme="dark"] .storefront-fields-current h4,
html[data-theme="dark"] .storefront-fields-switch-pill-name,
html[data-theme="dark"] .storefront-order-field-title-copy h4,
html[data-theme="dark"] .travel-fees-redesign .travel-fees-hero h2,
html[data-theme="dark"] .travel-fees-redesign .travel-fees-board-head h3,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-card h3,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-card-amount,
html[data-theme="dark"] .travel-fee-config-hero h4,
html[data-theme="dark"] .territory-map-row-copy-v6 .territory-map-row-headline strong,
html[data-theme="dark"] .territory-policy-modal-head-v8 h3,
html[data-theme="dark"] .territory-policy-panel-v8 h4,
html[data-theme="dark"] .territory-create-summary-v7 .territory-create-summary-copy strong,
html[data-theme="dark"] .territory-workspace-head h4,
html[data-theme="dark"] .territory-search-result-main,
html[data-theme="dark"] .cp-scheduler-slot-group-head h4,
html[data-theme="dark"] .cp-scheduler-times-date,
html[data-theme="dark"] .billing-upgrade-plan-name,
html[data-theme="dark"] .billing-upgrade-plan-price,
html[data-theme="dark"] .billing-upgrade-current-main strong {
  color: #e4edff;
}

html[data-theme="dark"] .availability-overview-copy span,
html[data-theme="dark"] .business-hours-row label,
html[data-theme="dark"] .business-hours-open-toggle,
html[data-theme="dark"] .availability-business-hours-day-meta,
html[data-theme="dark"] .availability-sync-card p,
html[data-theme="dark"] .calendar-team-sidebar-note,
html[data-theme="dark"] .calendar-team-filter-name,
html[data-theme="dark"] .scheduling-settings-hero .muted-note,
html[data-theme="dark"] .scheduling-settings-choice-copy small,
html[data-theme="dark"] .scheduling-settings-field small,
html[data-theme="dark"] .scheduling-settings-toggle-card small,
html[data-theme="dark"] .storefront-order-form-modal-head p,
html[data-theme="dark"] .storefront-order-form-thumbnail-note,
html[data-theme="dark"] .storefront-order-form-inline-toggle,
html[data-theme="dark"] .storefront-service-tab-order .muted-note,
html[data-theme="dark"] .storefront-payment-method-toggle .muted-note,
html[data-theme="dark"] .storefront-form-card-head .muted-note,
html[data-theme="dark"] .storefront-form-card-meta,
html[data-theme="dark"] .storefront-fields-copy,
html[data-theme="dark"] .storefront-fields-switch-pill-meta,
html[data-theme="dark"] .storefront-fields-stat span,
html[data-theme="dark"] .storefront-order-fields-empty .muted-note,
html[data-theme="dark"] .travel-fees-redesign .travel-fees-kicker,
html[data-theme="dark"] .travel-fees-redesign .travel-fees-hero-text,
html[data-theme="dark"] .travel-fees-redesign .travel-fees-stat-chip span,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-card-description,
html[data-theme="dark"] .travel-fees-redesign .travel-fee-card-users-label,
html[data-theme="dark"] .travel-fee-config-kicker,
html[data-theme="dark"] .travel-fee-config-hero .muted-note,
html[data-theme="dark"] .travel-fee-hero-stat span,
html[data-theme="dark"] .travel-fee-type-option small,
html[data-theme="dark"] .travel-fee-quick-rule,
html[data-theme="dark"] .travel-fee-distance-head .muted-note,
html[data-theme="dark"] .travel-fee-distance-rule-list,
html[data-theme="dark"] .travel-fee-assigned-text,
html[data-theme="dark"] .travel-fee-team-option-copy small,
html[data-theme="dark"] .territory-map-row-copy-v6 .territory-map-row-meta,
html[data-theme="dark"] .territory-map-row-copy-v6 small,
html[data-theme="dark"] .territory-policy-modal-head-v8 .muted-note,
html[data-theme="dark"] .territory-policy-context-v8 p,
html[data-theme="dark"] .territory-policy-panel-v8 p,
html[data-theme="dark"] .territory-policy-panel-v8 label > span,
html[data-theme="dark"] .territory-create-summary-v7 .territory-create-summary-copy small,
html[data-theme="dark"] .territory-create-summary-copy small,
html[data-theme="dark"] .territory-auto-coverage-note .muted-note,
html[data-theme="dark"] .territory-search-results-empty,
html[data-theme="dark"] .territory-search-result-meta,
html[data-theme="dark"] .cp-calendar-weekdays,
html[data-theme="dark"] .cp-calendar-day-status,
html[data-theme="dark"] .billing-upgrade-current .muted-note,
html[data-theme="dark"] .billing-upgrade-empty .muted-note,
html[data-theme="dark"] .billing-enterprise-control span {
  color: #9fb2de;
}

html[data-theme="dark"] .territory-create-summary-v6::after,
html[data-theme="dark"] .territory-create-summary-v5::after,
html[data-theme="dark"] .territory-create-summary-v4::after,
html[data-theme="dark"] .territory-create-summary-v7 .territory-create-summary-pill {
  border-color: #3f5c97;
  background: #243d6e;
  color: #d7e4ff;
}

/* Skyline Atelier 2026 redesign */
.property-site-page.template-luxe-gallery {
  --atelier-page-bg: #edf3ff;
  --atelier-text: #13203f;
  --atelier-muted: #4f6390;
  --atelier-nav-bg: rgba(245, 249, 255, 0.74);
  --atelier-nav-border: rgba(155, 179, 229, 0.56);
  --atelier-nav-link-bg: rgba(84, 109, 173, 0.1);
  --atelier-nav-link-text: #203b7a;
  --atelier-nav-link-hover-bg: rgba(80, 112, 196, 0.18);
  --atelier-switch-bg: rgba(230, 238, 255, 0.84);
  --atelier-switch-border: rgba(138, 164, 219, 0.62);
  --atelier-switch-text: #2c447e;
  --atelier-switch-active-bg: #2d4f9b;
  --atelier-switch-active-text: #f3f7ff;
  --atelier-hero-overlay: linear-gradient(145deg, rgba(225, 234, 255, 0.24), rgba(161, 184, 236, 0.48));
  --atelier-hero-panel: rgba(245, 249, 255, 0.66);
  --atelier-hero-panel-border: rgba(136, 162, 216, 0.55);
  --atelier-hero-chip-bg: rgba(255, 255, 255, 0.67);
  --atelier-hero-chip-border: rgba(155, 178, 229, 0.66);
  --atelier-panel: rgba(246, 250, 255, 0.72);
  --atelier-panel-border: rgba(158, 182, 231, 0.46);
  --atelier-strong-text: #142959;
  --atelier-shadow-lg: 0 24px 52px rgba(31, 58, 121, 0.22);
  --atelier-shadow-md: 0 16px 34px rgba(31, 58, 121, 0.14);
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% 6%, rgba(169, 197, 255, 0.42), transparent 44%),
    radial-gradient(circle at 92% 2%, rgba(141, 181, 255, 0.34), transparent 44%),
    linear-gradient(180deg, #ecf3ff 0%, #dce8ff 56%, #d4e3ff 100%);
  color: var(--atelier-text);
  position: relative;
  isolation: isolate;
}

.property-site-page.template-luxe-gallery::before {
  content: "";
  position: fixed;
  inset: -25% -18%;
  background:
    radial-gradient(circle at 22% 24%, rgba(116, 163, 255, 0.26), transparent 58%),
    radial-gradient(circle at 78% 14%, rgba(121, 203, 255, 0.22), transparent 56%),
    radial-gradient(circle at 64% 76%, rgba(111, 140, 255, 0.18), transparent 62%);
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
  animation: skylineAmbientDrift 28s ease-in-out infinite alternate;
}

.property-site-page.template-luxe-gallery::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(103, 128, 177, 0.16) 0.5px, transparent 0.5px);
  background-size: 2px 2px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  animation: skylineGrainShift 14s ease-in-out infinite;
}

.property-site-page.template-luxe-gallery > *:not(#ps-lightbox):not(#ps-toast):not(#ps-lock-backdrop):not(#ps-lock-overlay) {
  position: relative;
  z-index: 1;
}

.property-site-page.template-luxe-gallery #ps-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.property-site-page.template-luxe-gallery #ps-toast {
  position: fixed;
  z-index: 10000;
}

.property-site-page.template-luxe-gallery h1,
.property-site-page.template-luxe-gallery h2,
.property-site-page.template-luxe-gallery h3 {
  font-family: "Sora", "Manrope", sans-serif;
  letter-spacing: -0.018em;
  color: var(--atelier-strong-text);
}

.property-site-page.template-luxe-gallery .ps-top-nav {
  top: 14px;
  left: 50%;
  right: auto;
  width: min(1180px, calc(100% - 36px));
  border-radius: 18px;
  border: 1px solid var(--atelier-nav-border);
  transform: translateX(-50%);
  background: var(--atelier-nav-bg);
  box-shadow: var(--atelier-shadow-md);
  backdrop-filter: blur(20px) saturate(165%);
}

.property-site-page.template-luxe-gallery .ps-nav {
  width: 100%;
  min-height: 62px;
  padding: 8px 12px;
  justify-content: center;
  gap: 8px;
}

.property-site-page.template-luxe-gallery .ps-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--atelier-nav-link-bg);
  color: var(--atelier-nav-link-text);
  border: 1px solid transparent;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.property-site-page.template-luxe-gallery .ps-nav a:hover {
  background: var(--atelier-nav-link-hover-bg);
  border-color: rgba(95, 125, 201, 0.44);
  transform: translateY(-1px);
}

.property-site-page.template-luxe-gallery .ps-mode-switch {
  margin-left: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--atelier-switch-bg);
  border-color: var(--atelier-switch-border);
}

.property-site-page.template-luxe-gallery .ps-mode-switch button {
  color: var(--atelier-switch-text);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.property-site-page.template-luxe-gallery .ps-mode-switch button.active {
  color: var(--atelier-switch-active-text);
  background: var(--atelier-switch-active-bg);
}

.property-site-page.template-luxe-gallery .ps-hero {
  margin: calc(var(--ps-nav-height) + 30px) auto 0;
  width: min(1320px, calc(100% - 34px));
  min-height: clamp(490px, 74vh, 820px);
  border-radius: 30px;
  border: 1px solid rgba(153, 177, 225, 0.48);
  box-shadow: var(--atelier-shadow-lg);
  background:
    linear-gradient(142deg, rgba(33, 61, 118, 0.18), rgba(14, 27, 56, 0.34)),
    linear-gradient(130deg, rgba(78, 116, 203, 0.18), rgba(64, 122, 196, 0.11));
}

.property-site-page.template-luxe-gallery .ps-hero-image {
  object-fit: contain;
  object-position: center center;
  padding: 0;
  filter: saturate(1.08) contrast(1.04);
}

.property-site-page.template-luxe-gallery .ps-hero-overlay {
  background: var(--atelier-hero-overlay);
}

.property-site-page.template-luxe-gallery .ps-hero-divider {
  display: none;
}

.property-site-page.template-luxe-gallery .ps-hero-left {
  left: clamp(24px, 3vw, 56px);
  bottom: clamp(24px, 3vw, 52px);
  align-items: flex-start;
  gap: 6px;
  max-width: min(54vw, 700px);
}

.property-site-page.template-luxe-gallery .ps-hero-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: clamp(38px, 5vw, 86px);
  line-height: 0.92;
  max-width: 14ch;
  color: #f6fbff;
  text-wrap: balance;
  text-shadow: 0 12px 30px rgba(14, 28, 60, 0.45);
}

.property-site-page.template-luxe-gallery .ps-scroll-link {
  display: none;
}

.property-site-page.template-luxe-gallery .ps-hero-right {
  top: clamp(110px, 15vh, 150px);
  right: clamp(22px, 2.9vw, 46px);
  bottom: auto;
  width: min(470px, 38vw);
  text-align: left;
  background: var(--atelier-hero-panel);
  border: 1px solid var(--atelier-hero-panel-border);
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: 0 20px 40px rgba(24, 46, 96, 0.26);
  backdrop-filter: blur(18px) saturate(160%);
}

.property-site-page.template-luxe-gallery .ps-hero-price {
  font-size: clamp(40px, 4.2vw, 68px);
  line-height: 0.95;
  color: var(--atelier-strong-text);
  text-shadow: none;
}

.property-site-page.template-luxe-gallery .ps-hero-metrics {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.property-site-page.template-luxe-gallery .ps-hero-metrics li {
  justify-content: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid var(--atelier-hero-chip-border);
  background: var(--atelier-hero-chip-bg);
  color: #1a2d5c;
  font-size: clamp(16px, 1.2vw, 20px);
  text-shadow: none;
  font-weight: 800;
}

.property-site-page.template-luxe-gallery .ps-hero-metric-icon {
  width: 17px;
  height: 17px;
}

.property-site-page.template-luxe-gallery .ps-hero-nav {
  display: none;
}

.property-site-page.template-luxe-gallery .ps-content {
  width: min(1260px, calc(100% - 34px));
  margin: 42px auto 104px;
}

.property-site-page.template-luxe-gallery .ps-section {
  margin-bottom: 26px;
  border-radius: 24px;
  border: 1px solid var(--atelier-panel-border);
  background: var(--atelier-panel);
  backdrop-filter: blur(14px) saturate(155%);
  box-shadow: 0 14px 28px rgba(39, 62, 117, 0.1);
  padding: clamp(18px, 2.2vw, 30px);
}

.property-site-page.template-luxe-gallery .ps-section h2 {
  margin-bottom: 18px;
  font-size: clamp(30px, 2.8vw, 46px);
  letter-spacing: -0.024em;
  color: var(--atelier-strong-text);
}

.property-site-page.template-luxe-gallery .ps-details-layout {
  gap: 24px;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.95fr);
}

.property-site-page.template-luxe-gallery .ps-description {
  color: var(--atelier-text);
  font-size: clamp(16px, 1.04vw, 18px);
  line-height: 1.76;
}

.property-site-page.template-luxe-gallery .ps-detail-list li {
  border: 1px solid rgba(161, 184, 229, 0.55);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(248, 251, 255, 0.66);
}

.property-site-page.template-luxe-gallery .ps-detail-icon {
  color: #3e5b9d;
}

.property-site-page.template-luxe-gallery .ps-detail-text {
  color: #1c2f62;
}

.property-site-page.template-luxe-gallery .ps-detail-text small {
  color: #5a70a5;
}

.property-site-page.template-luxe-gallery .ps-photo-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb {
  grid-column: span 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(159, 184, 229, 0.48);
  box-shadow: 0 10px 20px rgba(40, 64, 115, 0.12);
  background: rgba(236, 243, 255, 0.7);
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(1) {
  grid-column: span 6;
  grid-row: span 2;
  min-height: 370px;
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(2) {
  grid-column: span 3;
  grid-row: span 2;
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(5n) {
  grid-column: span 6;
}

.property-site-page.template-luxe-gallery .ps-thumb button:hover img {
  transform: scale(1.05);
}

.property-site-page.template-luxe-gallery .ps-more-btn {
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(140deg, #2f58c8, #4a77de);
  box-shadow: 0 8px 20px rgba(49, 77, 163, 0.24);
}

.property-site-page.template-luxe-gallery .ps-video-card {
  width: min(640px, 100%);
  border-radius: 20px;
  border: 1px solid rgba(155, 180, 226, 0.56);
  box-shadow: 0 16px 30px rgba(33, 57, 108, 0.16);
  overflow: hidden;
}

.property-site-page.template-luxe-gallery .ps-video-card.is-portrait {
  border-radius: 42px;
}

.property-site-page.template-luxe-gallery .ps-tour-grid {
  width: min(1100px, 100%);
}

.property-site-page.template-luxe-gallery .ps-tour-card-embed,
.property-site-page.template-luxe-gallery .ps-tour-card-external {
  width: 100%;
}

.property-site-page.template-luxe-gallery .ps-tour-embed-shell,
.property-site-page.template-luxe-gallery .ps-tour-preview-shell {
  border-radius: 16px;
  border-color: rgba(157, 181, 229, 0.65);
}

.property-site-page.template-luxe-gallery .ps-link-card,
.property-site-page.template-luxe-gallery .ps-agent-card,
.property-site-page.template-luxe-gallery .ps-map-shell {
  border-radius: 18px;
  border-color: rgba(157, 181, 229, 0.55);
  background: rgba(248, 252, 255, 0.78);
}

.property-site-page.template-luxe-gallery .ps-map-shell {
  box-shadow: 0 12px 26px rgba(37, 61, 113, 0.14);
}

.property-site-page.template-luxe-gallery .ps-contact-grid {
  gap: 16px;
}

.property-site-page.template-luxe-gallery .ps-contact-form input,
.property-site-page.template-luxe-gallery .ps-contact-form textarea {
  border-bottom-color: rgba(77, 106, 176, 0.72);
  color: #1a2f63;
}

.property-site-page.template-luxe-gallery .ps-contact-form button {
  border-radius: 999px;
  min-height: 38px;
  background: linear-gradient(140deg, #2f58c8, #4a77de);
}

.property-site-page.template-luxe-gallery .ps-footer {
  background: linear-gradient(160deg, rgba(181, 203, 245, 0.7), rgba(149, 176, 227, 0.78));
}

.property-site-page.template-luxe-gallery .ps-footer a {
  color: #1d3368;
}

.property-site-page.template-luxe-gallery.mode-dark {
  --atelier-page-bg: #060b1a;
  --atelier-text: #d9e7ff;
  --atelier-muted: #99afd9;
  --atelier-nav-bg: rgba(7, 14, 31, 0.7);
  --atelier-nav-border: rgba(82, 111, 179, 0.56);
  --atelier-nav-link-bg: rgba(95, 129, 201, 0.16);
  --atelier-nav-link-text: #dce9ff;
  --atelier-nav-link-hover-bg: rgba(96, 137, 231, 0.24);
  --atelier-switch-bg: rgba(12, 22, 44, 0.78);
  --atelier-switch-border: rgba(90, 116, 175, 0.68);
  --atelier-switch-text: #d7e5ff;
  --atelier-switch-active-bg: #d9e7ff;
  --atelier-switch-active-text: #132654;
  --atelier-hero-overlay: linear-gradient(148deg, rgba(6, 11, 24, 0.14), rgba(3, 8, 20, 0.54));
  --atelier-hero-panel: rgba(9, 20, 45, 0.62);
  --atelier-hero-panel-border: rgba(88, 114, 177, 0.62);
  --atelier-hero-chip-bg: rgba(11, 25, 54, 0.74);
  --atelier-hero-chip-border: rgba(92, 118, 177, 0.62);
  --atelier-panel: rgba(8, 17, 37, 0.72);
  --atelier-panel-border: rgba(80, 108, 168, 0.54);
  --atelier-strong-text: #f2f7ff;
  --atelier-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.54);
  --atelier-shadow-md: 0 16px 34px rgba(0, 0, 0, 0.38);
  background:
    radial-gradient(circle at 8% 6%, rgba(41, 74, 161, 0.44), transparent 44%),
    radial-gradient(circle at 92% 2%, rgba(49, 116, 190, 0.3), transparent 44%),
    linear-gradient(180deg, #040a19 0%, #07112a 56%, #0a1838 100%);
}

.property-site-page.template-luxe-gallery.mode-dark .ps-hero-title {
  color: #f4f8ff;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-hero-price {
  color: #eff5ff;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-hero-metrics li {
  color: #dce9ff;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-description,
.property-site-page.template-luxe-gallery.mode-dark .ps-detail-text,
.property-site-page.template-luxe-gallery.mode-dark .ps-link-card h3,
.property-site-page.template-luxe-gallery.mode-dark .ps-contact-copy {
  color: #d9e7ff;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-detail-text small,
.property-site-page.template-luxe-gallery.mode-dark .ps-agent-meta span,
.property-site-page.template-luxe-gallery.mode-dark .ps-agent-head p,
.property-site-page.template-luxe-gallery.mode-dark .ps-contact-form label {
  color: #9eb5df;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-detail-icon {
  color: #8fb0f4;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-link-card,
.property-site-page.template-luxe-gallery.mode-dark .ps-agent-card,
.property-site-page.template-luxe-gallery.mode-dark .ps-map-shell,
.property-site-page.template-luxe-gallery.mode-dark .ps-tour-embed-shell,
.property-site-page.template-luxe-gallery.mode-dark .ps-tour-preview-shell {
  border-color: rgba(75, 104, 164, 0.7);
  background: rgba(10, 22, 46, 0.78);
}

.property-site-page.template-luxe-gallery.mode-dark .ps-footer {
  background: linear-gradient(160deg, rgba(11, 21, 46, 0.84), rgba(9, 18, 37, 0.92));
}

.property-site-page.template-luxe-gallery.mode-dark .ps-footer a {
  color: #deebff;
}

@keyframes skylineAmbientDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(1.4%, -1.6%, 0) scale(1.03);
  }
}

@keyframes skylineGrainShift {
  0% {
    opacity: 0.14;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.16;
  }
}

@media (prefers-reduced-motion: reduce) {
  .property-site-page.template-luxe-gallery::before,
  .property-site-page.template-luxe-gallery::after {
    animation: none;
  }

  .property-site-page .ps-hero-image {
    transition: none;
  }
}

@media (max-width: 1120px) {
  .property-site-page.template-luxe-gallery .ps-hero {
    width: min(1320px, calc(100% - 24px));
    border-radius: 24px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-right {
    width: min(440px, 44vw);
  }

  .property-site-page.template-luxe-gallery .ps-content {
    width: min(1260px, calc(100% - 24px));
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(1) {
    min-height: 300px;
  }
}

@media (max-width: 900px) {
  .property-site-page.template-luxe-gallery .ps-top-nav {
    width: calc(100% - 18px);
    border-radius: 16px;
    top: 10px;
  }

  .property-site-page.template-luxe-gallery .ps-nav {
    min-height: 58px;
    padding: 7px 8px;
    justify-content: flex-start;
  }

  .property-site-page.template-luxe-gallery .ps-nav a {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 10px;
  }

  .property-site-page.template-luxe-gallery .ps-hero {
    margin-top: calc(var(--ps-nav-height) + 20px);
    min-height: clamp(460px, 68vh, 700px);
  }

  .property-site-page.template-luxe-gallery .ps-hero-left {
    left: 20px;
    bottom: 22px;
    max-width: 58vw;
  }

  .property-site-page.template-luxe-gallery .ps-hero-right {
    right: 18px;
    top: auto;
    bottom: 20px;
    width: min(380px, 42vw);
    padding: 14px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb,
  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(2),
  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(5n) {
    grid-column: span 3;
    grid-row: auto;
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(1) {
    grid-column: span 6;
    min-height: 260px;
  }
}

@media (max-width: 700px) {
  .property-site-page.template-luxe-gallery .ps-hero {
    min-height: auto;
    padding: 84px 16px 16px;
    display: grid;
    align-content: end;
    gap: 12px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-left,
  .property-site-page.template-luxe-gallery .ps-hero-right {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
  }

  .property-site-page.template-luxe-gallery .ps-hero-left {
    gap: 10px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-title {
    font-size: clamp(32px, 9.4vw, 52px);
    max-width: 12ch;
  }

  .property-site-page.template-luxe-gallery .ps-scroll-link {
    width: 42px;
    height: 42px;
    font-size: 28px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-right {
    padding: 12px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-price {
    font-size: clamp(34px, 10vw, 48px);
  }

  .property-site-page.template-luxe-gallery .ps-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-metrics li {
    font-size: clamp(14px, 3.8vw, 18px);
    padding: 7px 8px;
  }

  .property-site-page.template-luxe-gallery .ps-content {
    width: calc(100% - 16px);
    margin-top: 24px;
    margin-bottom: 80px;
  }

  .property-site-page.template-luxe-gallery .ps-section {
    border-radius: 18px;
    padding: 14px;
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb,
  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(1),
  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(2),
  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(5n) {
    grid-column: span 1;
    min-height: 0;
  }

  .property-site-page.template-luxe-gallery .ps-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Skyline Atelier 2026 redesign v2 */
.property-site-page.template-luxe-gallery {
  --skyline-bg: #f3f6ff;
  --skyline-text: #101a36;
  --skyline-muted: #4e5f8f;
  --skyline-surface: rgba(255, 255, 255, 0.84);
  --skyline-surface-border: rgba(157, 177, 226, 0.5);
  --skyline-nav-bg: rgba(248, 251, 255, 0.88);
  --skyline-nav-border: rgba(153, 176, 227, 0.56);
  --skyline-nav-link: #213d82;
  --skyline-nav-pill: rgba(95, 128, 203, 0.13);
  --skyline-nav-pill-hover: rgba(93, 125, 202, 0.2);
  --skyline-hero-panel: rgba(247, 250, 255, 0.9);
  --skyline-hero-panel-border: rgba(136, 163, 222, 0.56);
  --skyline-hero-chip-bg: rgba(255, 255, 255, 0.88);
  --skyline-hero-chip-border: rgba(138, 165, 220, 0.52);
  --skyline-shadow-lg: 0 30px 60px rgba(29, 53, 110, 0.2);
  --skyline-shadow-md: 0 16px 30px rgba(35, 56, 111, 0.14);
  background:
    radial-gradient(circle at 6% 8%, rgba(151, 185, 255, 0.46), transparent 41%),
    radial-gradient(circle at 93% 10%, rgba(127, 169, 255, 0.32), transparent 42%),
    linear-gradient(180deg, #eff5ff 0%, #e5eeff 52%, #dde8ff 100%);
  color: var(--skyline-text);
}

.property-site-page.template-luxe-gallery::before {
  content: "";
  position: fixed;
  inset: -12% -8%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(110deg, rgba(115, 149, 237, 0.09), transparent 55%),
    linear-gradient(300deg, rgba(120, 188, 255, 0.08), transparent 58%);
}

.property-site-page.template-luxe-gallery::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(91, 120, 183, 0.12) 0.5px, transparent 0.5px);
  background-size: 2px 2px;
  opacity: 0.14;
}

.property-site-page.template-luxe-gallery > *:not(#ps-lightbox):not(#ps-toast):not(#ps-lock-backdrop):not(#ps-lock-overlay) {
  position: relative;
  z-index: 1;
}

.property-site-page.template-luxe-gallery #ps-lightbox {
  position: fixed !important;
  inset: 0;
  z-index: 9999 !important;
}

.property-site-page.template-luxe-gallery #ps-lightbox:not(.hidden) {
  display: flex !important;
}

.property-site-page.template-luxe-gallery #ps-toast {
  position: fixed;
  z-index: 10000;
}

.property-site-page.template-luxe-gallery h1,
.property-site-page.template-luxe-gallery h2,
.property-site-page.template-luxe-gallery h3 {
  font-family: "Sora", "Manrope", sans-serif;
  letter-spacing: -0.018em;
  color: #142654;
}

.property-site-page.template-luxe-gallery .ps-top-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--skyline-nav-border);
  background: var(--skyline-nav-bg);
  backdrop-filter: blur(12px) saturate(158%);
  box-shadow: var(--skyline-shadow-md);
}

.property-site-page.template-luxe-gallery .ps-nav {
  width: min(1440px, 100%);
  min-height: 74px;
  margin: 0 auto;
  padding: 10px 28px;
  justify-content: center;
  gap: 10px;
}

.property-site-page.template-luxe-gallery .ps-nav a {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--skyline-nav-pill);
  color: var(--skyline-nav-link);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.property-site-page.template-luxe-gallery .ps-nav a:hover {
  background: var(--skyline-nav-pill-hover);
  border-color: rgba(97, 130, 209, 0.44);
  transform: translateY(-1px);
}

.property-site-page.template-luxe-gallery .ps-mode-switch {
  margin-left: 8px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(229, 237, 255, 0.84);
  border-color: rgba(139, 166, 224, 0.62);
}

.property-site-page.template-luxe-gallery .ps-mode-switch button {
  color: #2b4581;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.property-site-page.template-luxe-gallery .ps-mode-switch button.active {
  color: #eff4ff;
  background: #3158b8;
}

.property-site-page.template-luxe-gallery .ps-hero {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: clamp(560px, 86vh, 980px);
  border-radius: 0;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  background: #000;
}

.property-site-page.template-luxe-gallery .ps-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  padding: 0;
  filter: saturate(1.08) contrast(1.03);
}

.property-site-page.template-luxe-gallery .ps-hero-overlay {
  background: linear-gradient(180deg, rgba(6, 12, 30, 0.16) 0%, rgba(5, 12, 28, 0.52) 58%, rgba(4, 9, 21, 0.8) 100%);
}

.property-site-page.template-luxe-gallery .ps-hero-divider,
.property-site-page.template-luxe-gallery .ps-scroll-link,
.property-site-page.template-luxe-gallery .ps-hero-nav {
  display: none;
}

.property-site-page.template-luxe-gallery .ps-hero-left {
  left: clamp(22px, 4.8vw, 86px);
  bottom: clamp(26px, 6vh, 78px);
  max-width: min(68vw, 960px);
  align-items: flex-start;
  gap: 0;
}

.property-site-page.template-luxe-gallery .ps-hero-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: clamp(40px, 6vw, 108px);
  line-height: 0.9;
  max-width: 14ch;
  color: #f8fbff;
  text-shadow: 0 16px 42px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}

.property-site-page.template-luxe-gallery .ps-hero-right {
  right: clamp(22px, 4.4vw, 76px);
  bottom: clamp(24px, 5vh, 66px);
  top: auto;
  width: min(540px, 46vw);
  border-radius: 24px;
  padding: 18px 20px;
  background: var(--skyline-hero-panel);
  border: 1px solid var(--skyline-hero-panel-border);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 18px 40px rgba(16, 35, 82, 0.3);
  text-align: left;
}

.property-site-page.template-luxe-gallery .ps-hero-price {
  font-size: clamp(36px, 4vw, 70px);
  line-height: 0.93;
  color: #193672;
  text-shadow: none;
}

.property-site-page.template-luxe-gallery .ps-hero-metrics {
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.property-site-page.template-luxe-gallery .ps-hero-metrics li {
  justify-content: flex-start;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid var(--skyline-hero-chip-border);
  background: var(--skyline-hero-chip-bg);
  color: #1e3976;
  font-size: clamp(16px, 1.16vw, 20px);
  text-shadow: none;
  font-weight: 800;
  padding: 8px 10px;
}

.property-site-page.template-luxe-gallery .ps-content {
  width: min(1280px, calc(100% - 36px));
  margin: 38px auto 100px;
}

.property-site-page.template-luxe-gallery .ps-section {
  margin-bottom: 28px;
  border-radius: 20px;
  border: 1px solid var(--skyline-surface-border);
  background: var(--skyline-surface);
  box-shadow: var(--skyline-shadow-md);
  backdrop-filter: blur(10px) saturate(150%);
  padding: clamp(18px, 2vw, 30px);
}

.property-site-page.template-luxe-gallery .ps-section h2 {
  margin-bottom: 16px;
  font-size: clamp(30px, 2.4vw, 46px);
}

.property-site-page.template-luxe-gallery .ps-description {
  color: var(--skyline-text);
}

.property-site-page.template-luxe-gallery .ps-detail-list li {
  border-radius: 12px;
  background: rgba(247, 251, 255, 0.86);
  border: 1px solid rgba(157, 180, 229, 0.48);
}

.property-site-page.template-luxe-gallery .ps-detail-icon {
  color: #4062ad;
}

.property-site-page.template-luxe-gallery .ps-detail-text {
  color: #213b7a;
}

.property-site-page.template-luxe-gallery .ps-detail-text small {
  color: #5f73aa;
}

.property-site-page.template-luxe-gallery .ps-photo-grid {
  --ps-masonry-columns: 4;
  --ps-masonry-gap: 10px;
  position: relative;
  display: block !important;
  width: 100%;
  min-height: 120px;
  height: auto;
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: auto;
  margin: 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  aspect-ratio: auto !important;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(150, 174, 224, 0.46);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(29, 52, 102, 0.14);
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb button {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100% !important;
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  object-fit: cover;
}

.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(1),
.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(2),
.property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb:nth-child(5n) {
  grid-column: auto;
  grid-row: auto;
  min-height: 0;
}

.property-site-page.template-luxe-gallery .ps-link-card,
.property-site-page.template-luxe-gallery .ps-agent-card,
.property-site-page.template-luxe-gallery .ps-map-shell,
.property-site-page.template-luxe-gallery .ps-tour-preview-shell,
.property-site-page.template-luxe-gallery .ps-tour-embed-shell {
  border-radius: 16px;
  border-color: rgba(152, 176, 225, 0.5);
  background: rgba(247, 251, 255, 0.86);
}

.property-site-page.template-luxe-gallery .ps-contact-form input,
.property-site-page.template-luxe-gallery .ps-contact-form textarea {
  color: #1a336f;
  border-bottom-color: rgba(78, 109, 181, 0.72);
}

.property-site-page.template-luxe-gallery .ps-contact-form button,
.property-site-page.template-luxe-gallery .ps-more-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #2f56b2, #4f7de3);
}

.property-site-page.template-luxe-gallery .ps-footer {
  background: linear-gradient(160deg, rgba(173, 195, 241, 0.76), rgba(143, 170, 227, 0.84));
}

.property-site-page.template-luxe-gallery.mode-dark {
  --skyline-bg: #060a16;
  --skyline-text: #e0e9ff;
  --skyline-muted: #9bb0dd;
  --skyline-surface: rgba(9, 18, 38, 0.78);
  --skyline-surface-border: rgba(77, 104, 164, 0.6);
  --skyline-nav-bg: rgba(7, 14, 31, 0.78);
  --skyline-nav-border: rgba(80, 106, 166, 0.6);
  --skyline-nav-link: #dce9ff;
  --skyline-nav-pill: rgba(92, 125, 198, 0.2);
  --skyline-nav-pill-hover: rgba(99, 137, 219, 0.3);
  --skyline-hero-panel: rgba(9, 20, 44, 0.7);
  --skyline-hero-panel-border: rgba(84, 111, 173, 0.66);
  --skyline-hero-chip-bg: rgba(11, 24, 50, 0.78);
  --skyline-hero-chip-border: rgba(87, 116, 182, 0.66);
  background:
    radial-gradient(circle at 6% 8%, rgba(39, 71, 153, 0.44), transparent 41%),
    radial-gradient(circle at 93% 10%, rgba(34, 104, 184, 0.3), transparent 42%),
    linear-gradient(180deg, #040916 0%, #07112a 52%, #091735 100%);
}

.property-site-page.template-luxe-gallery.mode-dark .ps-hero-right {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.property-site-page.template-luxe-gallery.mode-dark .ps-hero-price {
  color: #eff5ff;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-hero-metrics li {
  color: #dbe8ff;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-section h2,
.property-site-page.template-luxe-gallery.mode-dark .ps-description,
.property-site-page.template-luxe-gallery.mode-dark .ps-detail-text,
.property-site-page.template-luxe-gallery.mode-dark .ps-link-card h3,
.property-site-page.template-luxe-gallery.mode-dark .ps-contact-copy {
  color: #dee9ff;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-detail-text small,
.property-site-page.template-luxe-gallery.mode-dark .ps-agent-meta span,
.property-site-page.template-luxe-gallery.mode-dark .ps-agent-head p,
.property-site-page.template-luxe-gallery.mode-dark .ps-contact-form label {
  color: #9fb6e0;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-detail-icon {
  color: #92b2f5;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-link-card,
.property-site-page.template-luxe-gallery.mode-dark .ps-agent-card,
.property-site-page.template-luxe-gallery.mode-dark .ps-map-shell,
.property-site-page.template-luxe-gallery.mode-dark .ps-tour-preview-shell,
.property-site-page.template-luxe-gallery.mode-dark .ps-tour-embed-shell {
  background: rgba(10, 22, 47, 0.8);
  border-color: rgba(77, 103, 166, 0.68);
}

.property-site-page.template-luxe-gallery.mode-dark .ps-contact-form input,
.property-site-page.template-luxe-gallery.mode-dark .ps-contact-form textarea {
  color: #dce8ff;
  border-bottom-color: rgba(121, 146, 212, 0.8);
}

.property-site-page.template-luxe-gallery.mode-dark .ps-footer {
  background: linear-gradient(160deg, rgba(10, 20, 43, 0.86), rgba(8, 17, 36, 0.94));
}

.property-site-page.template-luxe-gallery.mode-dark .ps-footer a {
  color: #e4eeff;
}

.property-site-page.template-luxe-gallery .ps-lock-card {
  border-radius: 24px;
  border-color: rgba(143, 170, 234, 0.24);
  background: rgba(246, 250, 255, 0.97);
}

.property-site-page.template-luxe-gallery .ps-lock-card h2 {
  color: #203872;
}

.property-site-page.template-luxe-gallery .ps-lock-card p {
  color: #31466f;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-lock-overlay::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(4, 9, 24, 0.36), rgba(4, 9, 24, 0.48));
}

.property-site-page.template-luxe-gallery.mode-dark .ps-lock-overlay::after {
  opacity: 0.18;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-lock-card {
  border-color: rgba(143, 170, 234, 0.24);
  background: rgba(246, 250, 255, 0.97);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.34),
    0 10px 24px rgba(15, 25, 58, 0.16);
}

.property-site-page.template-luxe-gallery.mode-dark .ps-lock-eyebrow {
  border-color: rgba(98, 128, 198, 0.18);
  background: rgba(233, 240, 255, 0.92);
  color: #38558f;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-lock-card h2,
.property-site-page.template-luxe-gallery.mode-dark .ps-lock-balance {
  color: #203872;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-lock-card p,
.property-site-page.template-luxe-gallery.mode-dark .ps-locked-media-copy p {
  color: #31466f;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-lock-balance-label,
.property-site-page.template-luxe-gallery.mode-dark .ps-lock-legal-label {
  color: #465d8f;
}

.property-site-page.template-luxe-gallery.mode-dark .ps-lock-pay-disabled {
  border-color: rgba(185, 199, 232, 0.6);
  background: rgba(255, 255, 255, 0.9);
  color: #5a6d96;
}

@media (max-width: 1024px) {
  .property-site-page.template-luxe-gallery .ps-nav {
    padding: 9px 16px;
    gap: 8px;
    justify-content: flex-start;
  }

  .property-site-page.template-luxe-gallery .ps-hero {
    min-height: clamp(500px, 76vh, 820px);
  }

  .property-site-page.template-luxe-gallery .ps-hero-right {
    width: min(430px, 50vw);
    right: 18px;
    bottom: 20px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-left {
    left: 18px;
    bottom: 20px;
    max-width: 62vw;
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid {
    --ps-masonry-columns: 3;
  }
}

@media (max-width: 720px) {
  .property-site-page .ps-lock-overlay {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .property-site-page .ps-lock-card {
    width: min(460px, calc(100vw - 24px));
    padding: 22px 20px 18px;
    gap: 12px;
  }

  .property-site-page .ps-lock-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .property-site-page .ps-lock-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .property-site-page .ps-lock-icon svg {
    width: 28px;
    height: 28px;
  }

  .property-site-page .ps-lock-card h2 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .property-site-page .ps-lock-card p {
    font-size: 14px;
  }

  .property-site-page .ps-lock-balance-wrap,
  .property-site-page .ps-lock-legal {
    padding: 16px;
  }

  .property-site-page .ps-lock-actions {
    justify-content: stretch;
  }

  .property-site-page .ps-lock-pay-link,
  .property-site-page .ps-lock-pay-disabled {
    width: 100%;
  }

  .property-site-page.template-luxe-gallery .ps-top-nav {
    border-bottom-width: 1px;
  }

  .property-site-page.template-luxe-gallery .ps-nav {
    min-height: 64px;
    padding: 8px 10px;
  }

  .property-site-page.template-luxe-gallery .ps-nav a {
    min-height: 34px;
    font-size: 10px;
    padding: 6px 10px;
  }

  .property-site-page.template-luxe-gallery .ps-hero {
    margin-top: 0;
    min-height: 76vh;
  }

  .property-site-page.template-luxe-gallery .ps-hero-left,
  .property-site-page.template-luxe-gallery .ps-hero-right {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

  .property-site-page.template-luxe-gallery .ps-hero-left {
    bottom: 168px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-title {
    font-size: clamp(34px, 10vw, 56px);
    max-width: 10ch;
  }

  .property-site-page.template-luxe-gallery .ps-hero-right {
    bottom: 12px;
    padding: 12px;
    border-radius: 16px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-price {
    font-size: clamp(30px, 9.6vw, 42px);
  }

  .property-site-page.template-luxe-gallery .ps-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .property-site-page.template-luxe-gallery .ps-hero-metrics li {
    font-size: clamp(13px, 3.6vw, 16px);
    padding: 7px 8px;
  }

  .property-site-page.template-luxe-gallery .ps-content {
    width: calc(100% - 14px);
    margin-top: 22px;
    margin-bottom: 70px;
  }

  .property-site-page.template-luxe-gallery .ps-section {
    border-radius: 14px;
    padding: 14px;
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid {
    --ps-masonry-columns: 2;
    --ps-masonry-gap: 8px;
  }

  .property-site-page.template-luxe-gallery .ps-photo-grid .ps-thumb {
    margin: 0;
  }
}

@media (max-width: 480px) {
  .property-site-page.template-luxe-gallery .ps-photo-grid {
    --ps-masonry-columns: 1;
  }
}

.customer-import-modal {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.customer-import-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.customer-import-modal-title h3 {
  margin: 0;
}

.customer-import-modal-title p {
  margin: 6px 0 0;
}

.customer-import-form {
  gap: 14px;
}

.customer-import-section {
  border: 1px solid #d8e0fb;
  border-radius: 14px;
  padding: 14px;
  background: #f8faff;
  display: grid;
  gap: 10px;
}

.customer-import-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.customer-import-section-head h4 {
  margin: 0;
  font-size: 18px;
}

.customer-import-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #ccd8ff;
  background: #eef3ff;
  color: #3a4f8f;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
}

.customer-import-dropzone {
  position: relative;
  display: grid;
  gap: 4px;
  border: 1px dashed #b8c8ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
  cursor: pointer;
}

.customer-import-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.customer-import-dropzone strong {
  color: #1f2b52;
  font-size: 15px;
}

.customer-import-dropzone span {
  color: #55638f;
  font-size: 13px;
}

.customer-import-dropzone small {
  color: #6a77a1;
  font-size: 12px;
}

.customer-import-dropzone:has(.customer-import-file-input:focus-visible) {
  outline: 2px solid #9bb1ff;
  outline-offset: 2px;
}

.customer-import-mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.customer-import-mapping-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.customer-import-preview th,
.customer-import-preview td {
  white-space: nowrap;
}

.customer-import-warning {
  color: #7a4a00;
  background: #fff7ea;
  border: 1px solid #f1d8a8;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0;
}

.customer-import-progress {
  border: 1px solid #ccdbff;
  border-radius: 12px;
  background: #f4f8ff;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.customer-import-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.customer-import-progress-head strong {
  color: #273567;
}

.customer-import-progress-head span {
  color: #4f5f90;
  font-size: 13px;
}

.customer-import-progress-track {
  height: 8px;
  border-radius: 999px;
  background: #e2eaff;
  overflow: hidden;
}

.customer-import-progress-track span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5562f2 0%, #6f82ff 100%);
}

.customer-import-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.customer-import-summary article {
  border: 1px solid #cfdbff;
  border-radius: 10px;
  background: #f5f8ff;
  padding: 9px 10px;
  display: grid;
  gap: 2px;
}

.customer-import-summary span {
  color: #5f6e9b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.customer-import-summary strong {
  color: #1d2d5e;
  font-size: 20px;
  line-height: 1.1;
}

.customer-import-errors {
  border: 1px solid #f3c3c3;
  background: #fff5f5;
  border-radius: 10px;
  padding: 10px 12px;
  max-height: 180px;
  overflow: auto;
}

.customer-import-errors ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 760px) {
  .customer-import-modal {
    padding: 16px;
  }

  .customer-import-modal-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .customer-import-modal-head .btn {
    width: 100%;
  }

  .customer-import-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .customer-import-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .customer-import-actions .btn {
    width: 100%;
  }
}

html[data-theme="dark"] .customer-import-section {
  border-color: #365086;
  background: #142342;
}

html[data-theme="dark"] .customer-import-chip {
  border-color: #4a5f91;
  background: #1a2f56;
  color: #b7c9f2;
}

html[data-theme="dark"] .customer-import-dropzone {
  border-color: #4c6198;
  background: #10213f;
}

html[data-theme="dark"] .customer-import-dropzone strong {
  color: #deebff;
}

html[data-theme="dark"] .customer-import-dropzone span,
html[data-theme="dark"] .customer-import-dropzone small {
  color: #9fb4df;
}

html[data-theme="dark"] .customer-import-warning {
  border-color: #835f1c;
  background: #352a18;
  color: #f5d7a1;
}

html[data-theme="dark"] .customer-import-progress {
  border-color: #3f5e98;
  background: #15284b;
}

html[data-theme="dark"] .customer-import-progress-head strong {
  color: #dce9ff;
}

html[data-theme="dark"] .customer-import-progress-head span {
  color: #afc0e8;
}

html[data-theme="dark"] .customer-import-progress-track {
  background: #243c6f;
}

html[data-theme="dark"] .customer-import-summary article {
  border-color: #3f609a;
  background: #15294f;
}

html[data-theme="dark"] .customer-import-summary span {
  color: #9cb2df;
}

html[data-theme="dark"] .customer-import-summary strong {
  color: #e3edff;
}

html[data-theme="dark"] .customer-import-errors {
  border-color: #78414b;
  background: #2c1e28;
}

html[data-theme="dark"] .customer-billing-kpi-card,
html[data-theme="dark"] .customer-billing-balance-form {
  border-color: #334877;
  background: #13213d;
}

html[data-theme="dark"] .customer-billing-kpi-card h4,
html[data-theme="dark"] .customer-billing-balance-grid label > span,
html[data-theme="dark"] .customer-billing-balance-head p,
html[data-theme="dark"] .customer-billing-kpi-card small,
html[data-theme="dark"] .customer-billing-balance-grid label > small,
html[data-theme="dark"] .customer-billing-balance-net span {
  color: #9fb2de;
}

html[data-theme="dark"] .customer-billing-kpi-card strong,
html[data-theme="dark"] .customer-billing-balance-head h4,
html[data-theme="dark"] .customer-billing-balance-net strong {
  color: #e4edff;
}

html[data-theme="dark"] .customer-billing-balance-net {
  border-color: #3b568c;
  background: #162746;
}

/* Homepage redesign: March 2026 */
.marketing-redesign,
.marketing-redesign button,
.marketing-redesign input,
.marketing-redesign select,
.marketing-redesign textarea {
  font-family: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", sans-serif;
}

.marketing-redesign h1,
.marketing-redesign h2,
.marketing-redesign h3,
.marketing-redesign h4 {
  font-family: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: -0.012em;
}

.marketing-redesign {
  background:
    radial-gradient(980px 340px at 6% -14%, rgba(95, 118, 255, 0.16), transparent 62%),
    radial-gradient(980px 340px at 96% -16%, rgba(121, 145, 255, 0.12), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 56%, #f8faff 100%);
}

.marketing-redesign .marketing-wrap {
  width: min(94vw, 1240px);
}

.marketing-redesign .marketing-top {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #d7dffb;
  backdrop-filter: blur(10px);
}

.marketing-redesign .cln-topbar {
  padding: 12px 0;
  gap: 12px;
}

.marketing-redesign .cln-nav {
  gap: 7px;
}

.marketing-redesign .cln-nav a:not(.btn) {
  text-decoration: none;
  color: #2f4178;
  font-size: 15px;
  font-weight: 700;
  border-radius: 9px;
  padding: 8px 11px;
}

.marketing-redesign .cln-nav a:not(.btn):hover {
  background: #edf2ff;
}

.marketing-redesign .btn {
  font-size: 15px;
  font-weight: 700;
  border-radius: 11px;
  box-shadow: 0 8px 18px rgba(74, 89, 220, 0.18);
}

.marketing-redesign .btn-soft {
  box-shadow: none;
}

.marketing-redesign .rd-main {
  display: grid;
}

.marketing-redesign .rd-hero {
  padding: 46px 0 20px;
}

.marketing-redesign .rd-hero-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: stretch;
}

.marketing-redesign .rd-hero-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.04;
  max-width: 15ch;
}

.marketing-redesign .rd-hero-copy p {
  margin: 0 0 14px;
  max-width: 62ch;
  color: #596a98;
  line-height: 1.64;
  font-size: 17px;
}

.marketing-redesign .rd-hero-points {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.marketing-redesign .rd-hero-points li {
  position: relative;
  padding-left: 16px;
  color: #34477f;
  font-size: 14px;
  font-weight: 600;
}

.marketing-redesign .rd-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f63ff, #6f7dff);
}

.marketing-redesign .rd-hero-shell {
  border-color: #d8e0ff;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 14px 30px rgba(34, 50, 128, 0.1);
  overflow: hidden;
  padding: 0;
}

.marketing-redesign .rd-window-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid #dce4ff;
  background: linear-gradient(180deg, #f2f6ff 0%, #edf2ff 100%);
}

.marketing-redesign .rd-window-head span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #b6c4f7;
}

.marketing-redesign .rd-window-head strong {
  margin-left: 4px;
  color: #324684;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.marketing-redesign .rd-window-body {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 318px;
}

.marketing-redesign .rd-shell-nav {
  border-right: 1px solid #e0e7ff;
  background: #f7f9ff;
  padding: 12px 10px;
}

.marketing-redesign .rd-shell-label {
  margin: 0 0 8px;
  color: #6072a8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marketing-redesign .rd-shell-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.marketing-redesign .rd-shell-nav li {
  border: 1px solid #d6dfff;
  border-radius: 8px;
  padding: 7px 8px;
  color: #465a93;
  font-size: 12px;
  font-weight: 700;
  background: #ffffff;
}

.marketing-redesign .rd-shell-nav li.is-active {
  border-color: #aab8ff;
  color: #2f4698;
  background: linear-gradient(180deg, #edf2ff 0%, #e6edff 100%);
}

.marketing-redesign .rd-shell-main {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.marketing-redesign .rd-shell-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.marketing-redesign .rd-shell-kpis article {
  border: 1px solid #d7e0ff;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px;
  display: grid;
  gap: 2px;
}

.marketing-redesign .rd-shell-kpis span {
  color: #6071a5;
  font-size: 11px;
  font-weight: 600;
}

.marketing-redesign .rd-shell-kpis strong {
  color: #253972;
  font-size: 16px;
  line-height: 1.1;
}

.marketing-redesign .rd-shell-table {
  border: 1px solid #d7e0ff;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.marketing-redesign .rd-shell-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid #edf1ff;
  font-size: 12px;
  color: #3c4f87;
}

.marketing-redesign .rd-shell-row:last-child {
  border-bottom: 0;
}

.marketing-redesign .rd-shell-row-head {
  background: #f4f7ff;
  color: #455a95;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.marketing-redesign .rd-status {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #cad7ff;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.marketing-redesign .rd-status.is-blue {
  color: #284f9d;
  background: #e9f0ff;
  border-color: #bfd0ff;
}

.marketing-redesign .rd-status.is-amber {
  color: #7b5400;
  background: #fff4d6;
  border-color: #f2db97;
}

.marketing-redesign .rd-status.is-green {
  color: #1b6d44;
  background: #e4f8ed;
  border-color: #bfeacc;
}

.marketing-redesign .rd-status.is-purple {
  color: #5b3f93;
  background: #efe8ff;
  border-color: #dacdff;
}

.marketing-redesign .rd-section {
  padding: 38px 0 10px;
}

.marketing-redesign .rd-section-soft {
  margin-top: 14px;
  border-top: 1px solid #e1e8ff;
  border-bottom: 1px solid #e1e8ff;
  background: linear-gradient(180deg, rgba(243, 247, 255, 0.82), rgba(249, 251, 255, 0.9));
}

.marketing-redesign .rd-section-head {
  max-width: 820px;
  margin-bottom: 14px;
}

.marketing-redesign .rd-section-head h2 {
  margin: 0 0 8px;
  font-size: clamp(31px, 3.7vw, 46px);
  line-height: 1.07;
}

.marketing-redesign .rd-section-head p {
  margin: 0;
  color: #5b6d9b;
  font-size: 15px;
  line-height: 1.65;
}

.marketing-redesign .rd-portal-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-redesign .rd-portal-card {
  border-color: #d9e1ff;
  padding: 13px;
  box-shadow: 0 12px 24px rgba(38, 56, 132, 0.09);
  display: grid;
  gap: 9px;
}

.marketing-redesign .rd-portal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.marketing-redesign .rd-portal-head h3 {
  margin: 0;
  font-size: 22px;
}

.marketing-redesign .rd-portal-head span {
  color: #6575a4;
  font-size: 12px;
  font-weight: 700;
}

.marketing-redesign .rd-portal-window {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #f9fbff;
  overflow: hidden;
}

.marketing-redesign .rd-portal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid #e2e9ff;
  background: #f2f6ff;
}

.marketing-redesign .rd-portal-toolbar strong {
  color: #304681;
  font-size: 12px;
}

.marketing-redesign .rd-portal-toolbar span {
  color: #6072a7;
  font-size: 11px;
  font-weight: 700;
}

.marketing-redesign .rd-calendar-lanes {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 10px;
}

.marketing-redesign .rd-calendar-day {
  border: 1px solid #d7e0ff;
  border-radius: 9px;
  background: #ffffff;
  padding: 6px;
  display: grid;
  gap: 2px;
  justify-items: center;
}

.marketing-redesign .rd-calendar-day b {
  color: #324681;
  font-size: 11px;
}

.marketing-redesign .rd-calendar-day span {
  color: #6072a8;
  font-size: 10px;
}

.marketing-redesign .rd-calendar-day.is-active {
  border-color: #9fb1ff;
  background: #eaf0ff;
}

.marketing-redesign .rd-portal-list {
  margin: 0;
  padding: 0 10px 10px;
  list-style: none;
  display: grid;
  gap: 6px;
}

.marketing-redesign .rd-portal-list li {
  border: 1px solid #dce4ff;
  border-radius: 9px;
  background: #ffffff;
  padding: 7px 8px;
  display: grid;
  gap: 1px;
}

.marketing-redesign .rd-portal-list span {
  color: #6073aa;
  font-size: 10px;
  font-weight: 700;
}

.marketing-redesign .rd-portal-list strong {
  color: #2f427a;
  font-size: 12px;
}

.marketing-redesign .rd-portal-list em {
  color: #5d6f9d;
  font-size: 11px;
  font-style: normal;
}

.marketing-redesign .rd-queue-table {
  padding: 8px;
  display: grid;
  gap: 6px;
}

.marketing-redesign .rd-queue-row {
  border: 1px solid #dbe4ff;
  border-radius: 9px;
  background: #ffffff;
  padding: 7px 8px;
  display: grid;
  gap: 7px;
  align-items: center;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) auto;
  color: #3f5288;
  font-size: 12px;
}

.marketing-redesign .rd-queue-head {
  border-style: dashed;
  color: #566aa3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.marketing-redesign .rd-media-grid {
  padding: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-redesign .rd-media-tile {
  min-height: 70px;
  border-radius: 10px;
  border: 1px solid #dbe4ff;
  background:
    linear-gradient(150deg, rgba(97, 120, 255, 0.18), rgba(124, 142, 255, 0.06)),
    linear-gradient(180deg, #eef3ff 0%, #ffffff 100%);
}

.marketing-redesign .rd-delivery-meta {
  padding: 0 10px 10px;
  display: grid;
  gap: 3px;
}

.marketing-redesign .rd-delivery-meta p {
  margin: 0;
  color: #526396;
  font-size: 12px;
}

.marketing-redesign .rd-flow-board {
  border-color: #d8e1ff;
  padding: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  box-shadow: 0 10px 24px rgba(38, 56, 132, 0.08);
}

.marketing-redesign .rd-flow-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.marketing-redesign .rd-flow-grid article {
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 6px;
}

.marketing-redesign .rd-flow-grid small {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #ccd8ff;
  background: #edf2ff;
  color: #4f62a1;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
}

.marketing-redesign .rd-flow-grid h3 {
  margin: 0;
  font-size: 20px;
}

.marketing-redesign .rd-flow-grid p {
  margin: 0;
  color: #5c6e9d;
  font-size: 14px;
  line-height: 1.52;
}

.marketing-redesign .rd-pricing {
  padding-top: 42px;
}

.marketing-redesign .rd-payg-card {
  border-color: #c8d5ff;
  background: linear-gradient(145deg, #f0f4ff 0%, #ffffff 62%);
  box-shadow: 0 12px 26px rgba(37, 56, 133, 0.1);
  padding: 18px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

.marketing-redesign .rd-subscription-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 10px;
}

.marketing-redesign .rd-subscription-head h3 {
  margin: 0;
  font-size: 25px;
}

.marketing-redesign .rd-subscription-head p {
  margin: 0;
  color: #6172a0;
  font-size: 14px;
  font-weight: 600;
}

.marketing-redesign .rd-subscription-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-redesign .rd-plan-card {
  border-color: #d8e1ff;
  padding: 14px;
  display: grid;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(38, 56, 132, 0.08);
}

.marketing-redesign .rd-plan-card-featured {
  border-color: #a8b8ff;
  background: linear-gradient(160deg, rgba(87, 104, 255, 0.11), #ffffff 44%);
}

.marketing-redesign .rd-plan-kicker {
  margin: 0;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #ccd8ff;
  background: #edf2ff;
  color: #4f63a5;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.marketing-redesign .rd-plan-card h3,
.marketing-redesign .rd-payg-card h3 {
  margin: 0;
  font-size: 31px;
  line-height: 1;
}

.marketing-redesign .rd-price {
  margin: 0;
  color: #2c449a;
  font-size: 43px;
  font-weight: 800;
  line-height: 0.98;
}

.marketing-redesign .rd-price span {
  margin-left: 3px;
  color: #6275ae;
  font-size: 13px;
  font-weight: 700;
}

.marketing-redesign .rd-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.marketing-redesign .rd-benefit-list li {
  position: relative;
  padding-left: 14px;
  color: #3a4d84;
  font-size: 14px;
  line-height: 1.48;
}

.marketing-redesign .rd-benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6076ff;
}

.marketing-redesign .rd-plan-btn {
  margin-top: auto;
  width: 100%;
}

.marketing-redesign .rd-enterprise-estimator {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #d3ddff;
  display: grid;
  gap: 8px;
}

.marketing-redesign .rd-enterprise-estimate-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: #3d56b5;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.marketing-redesign .rd-enterprise-estimate-toggle::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: #6276bd;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}

.marketing-redesign .rd-enterprise-estimate-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.marketing-redesign .rd-enterprise-estimate-panel {
  border: 1px solid #d8e2ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fbff 0%, #f3f6ff 100%);
  padding: 10px;
  display: grid;
  gap: 6px;
}

.marketing-redesign .rd-enterprise-estimate-label {
  margin: 0;
  color: #51649c;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.marketing-redesign .rd-enterprise-estimate-label strong {
  color: #1f2b4d;
  font-size: 12px;
}

.marketing-redesign .rd-enterprise-estimate-panel input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: #5d75ff;
}

.marketing-redesign .rd-enterprise-estimate-price {
  margin: 0;
  color: #2c449a;
  font-size: 29px;
  font-weight: 800;
  line-height: 1;
}

.marketing-redesign .rd-enterprise-estimate-meta {
  margin: 0;
  color: #54679f;
  font-size: 12px;
  line-height: 1.38;
}

.marketing-redesign .rd-payg-card .rd-plan-btn {
  width: auto;
  min-width: 170px;
}

.marketing-redesign .rd-final {
  padding-bottom: 26px;
}

.marketing-redesign .rd-final-card {
  border-color: #d7e0ff;
  padding: 21px;
  text-align: center;
  background:
    radial-gradient(circle at 8% 0%, rgba(84, 101, 255, 0.1), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(111, 129, 255, 0.1), transparent 42%),
    #ffffff;
}

.marketing-redesign .rd-final-card h2 {
  margin: 0 0 8px;
  font-size: clamp(31px, 4vw, 45px);
}

.marketing-redesign .rd-final-card p {
  margin: 0 auto 12px;
  color: #5e6f9a;
  max-width: 60ch;
}

.marketing-redesign .rd-final-card .row-actions {
  justify-content: center;
}

@media (max-width: 1180px) {
  .marketing-redesign .rd-hero-grid {
    grid-template-columns: 1fr;
  }

  .marketing-redesign .rd-window-body {
    min-height: 290px;
  }

  .marketing-redesign .rd-portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-redesign .rd-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .marketing-redesign .cln-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .marketing-redesign .cln-nav {
    width: 100%;
  }

  .marketing-redesign .cln-nav a,
  .marketing-redesign .cln-nav .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .marketing-redesign .rd-window-body {
    grid-template-columns: 1fr;
  }

  .marketing-redesign .rd-shell-nav {
    border-right: 0;
    border-bottom: 1px solid #e0e7ff;
  }

  .marketing-redesign .rd-shell-kpis {
    grid-template-columns: 1fr;
  }

  .marketing-redesign .rd-portal-grid,
  .marketing-redesign .rd-subscription-grid {
    grid-template-columns: 1fr;
  }

  .marketing-redesign .rd-payg-card {
    flex-direction: column;
    align-items: stretch;
  }

  .marketing-redesign .rd-payg-card .rd-plan-btn {
    width: 100%;
    min-width: 0;
  }

  .marketing-redesign .rd-enterprise-estimate-price {
    font-size: 25px;
  }
}

@media (max-width: 640px) {
  .marketing-redesign .rd-hero,
  .marketing-redesign .rd-section {
    padding-top: 30px;
  }

  .marketing-redesign .rd-hero-shell,
  .marketing-redesign .rd-portal-card,
  .marketing-redesign .rd-flow-board,
  .marketing-redesign .rd-plan-card,
  .marketing-redesign .rd-payg-card,
  .marketing-redesign .rd-final-card {
    padding: 12px;
  }

  .marketing-redesign .rd-window-head,
  .marketing-redesign .rd-portal-toolbar {
    padding-left: 9px;
    padding-right: 9px;
  }

  .marketing-redesign .rd-shell-main {
    padding: 9px;
  }

  .marketing-redesign .rd-shell-row,
  .marketing-redesign .rd-queue-row {
    grid-template-columns: 1fr;
  }

  .marketing-redesign .rd-calendar-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-redesign .rd-price {
    font-size: 35px;
  }
}

/* Marketing Neo */
.marketing-neo {
  --neo-accent: #4d5bff;
  --neo-accent-strong: #3f4ce0;
  --neo-accent-secondary: #6f78ff;
  --neo-accent-muted: rgba(77, 91, 255, 0.14);
  --neo-accent-hairline: rgba(77, 91, 255, 0.25);
  color: #141a31;
  background:
    radial-gradient(circle at 12% -10%, rgba(77, 91, 255, 0.14), transparent 36%),
    radial-gradient(circle at 100% 0%, rgba(111, 120, 255, 0.12), transparent 32%),
    #f6f8ff;
}

.marketing-neo .marketing-wrap {
  width: min(1480px, calc(100% - 48px));
}

.marketing-neo .neo-top {
  position: sticky;
  top: 0;
  z-index: 70;
  border-bottom: 1px solid rgba(77, 91, 255, 0.16);
  backdrop-filter: blur(8px);
  background: rgba(246, 248, 255, 0.86);
}

.marketing-neo .neo-topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.marketing-neo .neo-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.marketing-neo .neo-nav a:not(.btn) {
  color: #334166;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 140ms ease, color 140ms ease;
}

.marketing-neo .neo-nav a:not(.btn):hover {
  color: #1f2b4d;
  background: rgba(255, 255, 255, 0.7);
}

.marketing-neo .btn {
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-secondary));
  box-shadow: 0 10px 24px rgba(56, 72, 166, 0.2);
}

.marketing-neo .btn:hover {
  transform: translateY(-1px);
}

.marketing-neo .btn-soft {
  background: #ffffff;
  color: var(--neo-accent-strong);
  border-color: var(--neo-accent-hairline);
  box-shadow: none;
}

.marketing-neo .neo-main {
  display: grid;
  gap: 52px;
  padding: 34px 0 40px;
}

.marketing-neo .neo-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.marketing-neo .neo-hero-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(39px, 4.2vw, 66px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.marketing-neo .neo-hero-copy p {
  margin: 0;
  color: #4b5b86;
  font-size: 18px;
  line-height: 1.6;
  max-width: 62ch;
}

.marketing-neo .neo-hero-copy .row-actions {
  margin: 22px 0 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.marketing-neo .neo-hero-points p {
  margin: 0 0 8px;
  color: #334671;
  font-weight: 700;
}

.marketing-neo .neo-hero-points ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.marketing-neo .neo-hero-points li {
  position: relative;
  padding-left: 17px;
  color: #3f4f7a;
}

.marketing-neo .neo-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--neo-accent);
}

.marketing-neo .neo-console {
  border: 1px solid var(--neo-accent-hairline);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow: 0 14px 28px rgba(40, 53, 120, 0.1);
  overflow: hidden;
}

.marketing-neo .neo-console-head {
  height: 46px;
  border-bottom: 1px solid rgba(77, 91, 255, 0.14);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.marketing-neo .neo-console-head span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d4dcff;
}

.marketing-neo .neo-console-head strong {
  margin-left: 6px;
  font-size: 13px;
  color: #455789;
}

.marketing-neo .neo-console-body {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.marketing-neo .neo-console-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.marketing-neo .neo-console-metrics article {
  border: 1px solid rgba(77, 91, 255, 0.18);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 3px;
}

.marketing-neo .neo-console-metrics small {
  color: #6273a1;
  font-size: 12px;
}

.marketing-neo .neo-console-metrics strong {
  font-size: 23px;
}

.marketing-neo .neo-console-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.marketing-neo .neo-console-table {
  border: 1px solid rgba(77, 91, 255, 0.17);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.marketing-neo .neo-console-row {
  display: grid;
  grid-template-columns: 1.4fr auto 0.8fr;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-bottom: 1px solid #e8edff;
  font-size: 13px;
}

.marketing-neo .neo-console-row:last-child {
  border-bottom: 0;
}

.marketing-neo .neo-console-row-head {
  background: #f3f6ff;
  color: #5d6f9f;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.marketing-neo .neo-section {
  padding-top: 8px;
}

.marketing-neo .neo-section-head {
  margin-bottom: 14px;
  display: grid;
  gap: 8px;
}

.marketing-neo .neo-section-head h2 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.marketing-neo .neo-section-head p {
  margin: 0;
  color: #4f5f8d;
  font-size: 16px;
}

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

.marketing-neo .neo-example-card {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.marketing-neo .neo-example-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.marketing-neo .neo-example-card h3 {
  margin: 0;
  font-size: 23px;
  line-height: 1.06;
}

.marketing-neo .neo-example-card header span {
  color: #6073a8;
  font-size: 12px;
  font-weight: 700;
}

.marketing-neo .neo-example-table {
  border: 1px solid #d6dfff;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.marketing-neo .neo-example-row {
  display: grid;
  grid-template-columns: 1.4fr auto 0.7fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #e9efff;
  font-size: 13px;
}

.marketing-neo .neo-example-row:last-child {
  border-bottom: 0;
}

.marketing-neo .neo-example-row-head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: #6073a6;
  background: #f4f7ff;
}

.marketing-neo .neo-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.marketing-neo .neo-timeline li {
  border: 1px solid #d7e0ff;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.marketing-neo .neo-calendar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.marketing-neo .neo-calendar-grid article {
  border: 1px solid #d8e2ff;
  border-radius: 11px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 2px;
  text-align: center;
}

.marketing-neo .neo-calendar-grid article.is-active {
  border-color: var(--neo-accent-hairline);
  background: #eef3ff;
}

.marketing-neo .neo-calendar-grid b {
  font-size: 12px;
}

.marketing-neo .neo-calendar-grid span {
  color: #5f719f;
  font-size: 12px;
}

.marketing-neo .neo-calendar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.marketing-neo .neo-calendar-list li {
  border: 1px solid #d8e1ff;
  border-radius: 10px;
  background: #fff;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.marketing-neo .neo-calendar-list span {
  color: #5a6d9f;
}

.marketing-neo .neo-calendar-list em {
  color: #6c7fb0;
  font-style: normal;
  font-size: 12px;
}

.marketing-neo .neo-workflow .neo-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.marketing-neo .neo-flow-grid article {
  border: 1px solid rgba(77, 91, 255, 0.18);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 6px;
}

.marketing-neo .neo-flow-grid small {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--neo-accent-hairline);
  background: var(--neo-accent-muted);
  color: var(--neo-accent-strong);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
}

.marketing-neo .neo-flow-grid h3 {
  margin: 0;
  font-size: 24px;
}

.marketing-neo .neo-flow-grid p {
  margin: 0;
  color: #556998;
  font-size: 14px;
  line-height: 1.52;
}

.marketing-neo .neo-pricing [data-pricing-content] {
  display: grid;
  gap: 12px;
}

.marketing-neo .rd-payg-card,
.marketing-neo .rd-plan-card {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  box-shadow: 0 10px 22px rgba(37, 52, 124, 0.08);
}

.marketing-neo .rd-payg-card {
  padding: 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
}

.marketing-neo .rd-subscription-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.marketing-neo .rd-subscription-head h3 {
  margin: 0;
  font-size: 32px;
}

.marketing-neo .rd-subscription-head p {
  margin: 0;
  color: #5f71a2;
  font-weight: 700;
}

.marketing-neo .rd-subscription-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.marketing-neo .rd-plan-card {
  padding: 14px;
  display: grid;
  gap: 9px;
}

.marketing-neo .rd-plan-card-featured {
  border-color: var(--neo-accent-hairline);
  background: linear-gradient(170deg, rgba(77, 91, 255, 0.13), #fff 45%);
}

.marketing-neo .rd-plan-kicker {
  margin: 0;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--neo-accent-hairline);
  background: var(--neo-accent-muted);
  color: var(--neo-accent-strong);
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.marketing-neo .rd-plan-card h3,
.marketing-neo .rd-payg-card h3 {
  margin: 0;
  font-size: 38px;
  line-height: 1.03;
}

.marketing-neo .rd-price {
  margin: 0;
  color: #2f459d;
  font-size: 52px;
  line-height: 0.98;
  font-weight: 800;
}

.marketing-neo .rd-price span {
  margin-left: 4px;
  color: #6072a4;
  font-size: 15px;
  font-weight: 700;
}

.marketing-neo .rd-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.marketing-neo .rd-benefit-list li {
  position: relative;
  padding-left: 14px;
  color: #3e5185;
  font-size: 15px;
}

.marketing-neo .rd-benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--neo-accent);
}

.marketing-neo .rd-plan-btn {
  margin-top: auto;
  width: 100%;
}

.marketing-neo .rd-payg-card .rd-plan-btn {
  width: auto;
  min-width: 188px;
}

.marketing-neo .rd-enterprise-estimator {
  margin-top: 8px;
  border-top: 1px dashed #cfd9ff;
  padding-top: 8px;
  display: grid;
  gap: 8px;
}

.marketing-neo .rd-enterprise-estimate-toggle {
  border: 0;
  background: transparent;
  color: var(--neo-accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.marketing-neo .rd-enterprise-estimate-toggle::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 140ms ease;
}

.marketing-neo .rd-enterprise-estimate-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.marketing-neo .rd-enterprise-estimate-panel {
  border: 1px solid #d7e0ff;
  border-radius: 12px;
  background: #f8faff;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.marketing-neo .rd-enterprise-estimate-label {
  margin: 0;
  color: #52679f;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}

.marketing-neo .rd-enterprise-estimate-panel input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--neo-accent);
}

.marketing-neo .rd-enterprise-estimate-price {
  margin: 0;
  color: #2f459d;
  font-size: 39px;
  font-weight: 800;
  line-height: 1;
}

.marketing-neo .rd-enterprise-estimate-meta {
  margin: 0;
  color: #556a9f;
  font-size: 13px;
}

.marketing-neo .neo-final .neo-final-card {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 18px;
  padding: 26px;
  text-align: center;
  background:
    radial-gradient(circle at 9% 0%, rgba(77, 91, 255, 0.12), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(111, 120, 255, 0.12), transparent 42%),
    #fff;
}

.marketing-neo .neo-final h2 {
  margin: 0 0 8px;
  font-size: clamp(34px, 4vw, 52px);
}

.marketing-neo .neo-final p {
  margin: 0 auto 13px;
  color: #5a6c9b;
  max-width: 62ch;
}

.marketing-neo .neo-status-chip {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--neo-accent-hairline);
  background: var(--neo-accent-muted);
  color: var(--neo-accent-strong);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.marketing-neo .neo-status-chip[data-status-tone="success"] {
  border-color: rgba(33, 176, 105, 0.32);
  background: rgba(33, 176, 105, 0.14);
  color: #1e8f56;
}

.marketing-neo .neo-status-chip[data-status-tone="warning"] {
  border-color: rgba(235, 145, 39, 0.34);
  background: rgba(235, 145, 39, 0.14);
  color: #b36c12;
}

.marketing-neo .neo-status-chip[data-status-tone="danger"] {
  border-color: rgba(220, 76, 76, 0.32);
  background: rgba(220, 76, 76, 0.14);
  color: #b23f3f;
}

.marketing-neo .neo-status-chip[data-status-tone="info"] {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(59, 130, 246, 0.14);
  color: #1d5fb4;
}

.marketing-neo .neo-status-chip[data-status-tone="primary"] {
  border-color: var(--neo-accent-hairline);
  background: var(--neo-accent-muted);
  color: var(--neo-accent-strong);
}

.marketing-neo .neo-status-chip[data-status-tone="muted"] {
  border-color: rgba(126, 138, 171, 0.32);
  background: rgba(126, 138, 171, 0.14);
  color: #5a6682;
}

.marketing-neo .neo-status-chip[data-status-tone="neutral"] {
  border-color: rgba(126, 138, 171, 0.24);
  background: rgba(126, 138, 171, 0.11);
  color: #53607b;
}

.marketing-neo .mk-footer-wrap {
  border-top: 1px solid rgba(77, 91, 255, 0.16);
  padding-top: 18px;
}

@media (max-width: 1200px) {
  .marketing-neo .neo-hero-grid,
  .marketing-neo .neo-examples-grid,
  .marketing-neo .neo-workflow .neo-flow-grid,
  .marketing-neo .rd-subscription-grid {
    grid-template-columns: 1fr;
  }

  .marketing-neo .rd-payg-card {
    flex-direction: column;
    align-items: stretch;
  }

  .marketing-neo .rd-payg-card .rd-plan-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .marketing-neo .neo-topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0;
  }

  .marketing-neo .neo-nav {
    width: 100%;
  }

  .marketing-neo .neo-nav a,
  .marketing-neo .neo-nav .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .marketing-neo .marketing-wrap {
    width: calc(100% - 28px);
  }

  .marketing-neo .neo-main {
    gap: 34px;
  }

  .marketing-neo .neo-console,
  .marketing-neo .neo-example-card,
  .marketing-neo .neo-flow-grid article,
  .marketing-neo .rd-plan-card,
  .marketing-neo .rd-payg-card,
  .marketing-neo .neo-final-card {
    padding: 12px;
  }

  .marketing-neo .neo-console-metrics {
    grid-template-columns: 1fr;
  }

  .marketing-neo .neo-console-row,
  .marketing-neo .neo-example-row,
  .marketing-neo .neo-calendar-list li {
    grid-template-columns: 1fr;
  }

  .marketing-neo .rd-price {
    font-size: 38px;
  }
}

/* Marketing Orbit */
.marketing-orbit {
  --orb-accent: var(--neo-accent, #4d5bff);
  --orb-accent-strong: var(--neo-accent-strong, #3f4ce0);
  --orb-accent-secondary: var(--neo-accent-secondary, #6f78ff);
  --orb-accent-muted: var(--neo-accent-muted, rgba(77, 91, 255, 0.14));
  --orb-accent-line: var(--neo-accent-hairline, rgba(77, 91, 255, 0.25));
  color: #111a31;
  background:
    radial-gradient(circle at 8% -12%, rgba(77, 91, 255, 0.14), transparent 36%),
    radial-gradient(circle at 100% 0%, rgba(111, 120, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #f8faff 0%, #f3f6ff 100%);
}

.marketing-orbit .marketing-wrap {
  width: min(1520px, calc(100% - 52px));
}

.marketing-orbit .orb-top {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(77, 91, 255, 0.15);
  background: rgba(248, 250, 255, 0.86);
  backdrop-filter: blur(10px);
}

.marketing-orbit .orb-topbar {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.marketing-orbit .mk-brand-link {
  gap: 12px;
}

.marketing-orbit .mk-logo-shell {
  border-color: rgba(77, 91, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 16px rgba(39, 55, 123, 0.09);
}

.marketing-orbit .mk-logo-shell.has-logo {
  max-width: min(50vw, 280px);
  height: clamp(34px, 3.8vw, 42px);
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.marketing-orbit .mk-brand-link.has-logo {
  gap: 0;
}

.marketing-orbit .mk-logo-shell.has-logo .mk-logo {
  width: auto;
  max-width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  filter: drop-shadow(0 2px 8px rgba(36, 52, 118, 0.1));
}

.marketing-orbit .mk-logo-mark {
  color: var(--orb-accent-strong);
}

.marketing-orbit .marketing-footer .mk-logo-shell.has-logo {
  max-width: min(38vw, 204px);
  height: clamp(30px, 3.4vw, 36px);
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.marketing-orbit .marketing-footer .mk-logo-shell.has-logo .mk-logo {
  height: 100%;
  padding: 0;
  object-position: left center;
  filter: none;
}

.marketing-orbit .marketing-footer .mk-logo-shell.has-logo + .mk-footer-copy [data-brand-tagline] {
  display: none;
}

.marketing-orbit .marketing-footer .mk-logo-shell.has-logo + .mk-footer-copy {
  gap: 0;
}

.marketing-orbit .orb-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.marketing-orbit .orb-nav a:not(.btn) {
  color: #324268;
  padding: 9px 11px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.marketing-orbit .orb-nav a:not(.btn):hover {
  color: #1e2a4d;
  background: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.marketing-orbit .orb-nav a:not(.btn):focus-visible {
  text-decoration: none;
}

.marketing-orbit .btn {
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--orb-accent), var(--orb-accent-secondary));
  box-shadow: 0 8px 20px rgba(49, 66, 153, 0.18);
}

.marketing-orbit .btn-soft {
  background: #fff;
  color: var(--orb-accent-strong);
  border-color: var(--orb-accent-line);
  box-shadow: none;
}

.marketing-orbit .orb-main {
  display: grid;
  gap: 62px;
  padding: 36px 0 44px;
}

.marketing-orbit .orb-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.marketing-orbit .orb-hero-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(42px, 4.8vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.marketing-orbit .orb-hero-copy p {
  margin: 0;
  color: #4d5d88;
  font-size: 18px;
  line-height: 1.6;
  max-width: 62ch;
}

.marketing-orbit .orb-hero-copy .row-actions {
  margin: 24px 0 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.marketing-orbit .orb-hero-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.marketing-orbit .orb-hero-bullets li {
  position: relative;
  padding-left: 18px;
  color: #3f507d;
}

.marketing-orbit .orb-hero-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orb-accent);
}

.marketing-orbit .orb-window {
  border: 1px solid var(--orb-accent-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  box-shadow: 0 14px 30px rgba(37, 52, 124, 0.1);
  overflow: hidden;
}

.marketing-orbit .orb-dashboard-preview {
  align-self: start;
}

@media (min-width: 1261px) {
  .marketing-orbit .orb-dashboard-preview .orb-dashboard-grid article {
    min-height: 44px;
  }

  .marketing-orbit .orb-dashboard-preview .orb-dashboard-upcoming {
    display: none;
  }
}

.marketing-orbit .orb-window-head {
  height: 44px;
  border-bottom: 1px solid rgba(77, 91, 255, 0.14);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.marketing-orbit .orb-window-head span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d5ddff;
}

.marketing-orbit .orb-window-head strong {
  margin-left: 6px;
  color: #45598b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.marketing-orbit .orb-window-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.marketing-orbit .orb-dashboard-shell {
  gap: 12px;
}

.marketing-orbit .orb-dashboard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}

.marketing-orbit .orb-dashboard-toolbar h4 {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.marketing-orbit .orb-dashboard-toolbar p {
  margin: 0;
  color: #5d709f;
  font-size: 12px;
  font-weight: 700;
}

.marketing-orbit .orb-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.marketing-orbit .orb-dashboard-kpis article {
  border: 1px solid rgba(77, 91, 255, 0.16);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 2px;
}

.marketing-orbit .orb-dashboard-kpis small {
  color: #6a7ca9;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.marketing-orbit .orb-dashboard-kpis strong {
  font-size: 20px;
  line-height: 1;
}

.marketing-orbit .orb-dashboard-calendar {
  border: 1px solid rgba(77, 91, 255, 0.17);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.marketing-orbit .orb-dashboard-calendar-head {
  padding: 8px 10px;
  border-bottom: 1px solid #e4eaff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.marketing-orbit .orb-dashboard-calendar-head strong {
  color: #2c3a62;
  font-size: 14px;
}

.marketing-orbit .orb-dashboard-calendar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.marketing-orbit .orb-dashboard-calendar-actions span {
  border: 1px solid #d6defa;
  border-radius: 9px;
  background: #f3f6ff;
  color: #4f66b4;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 8px;
}

.marketing-orbit .orb-dashboard-calendar-layout {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  align-items: start;
}

.marketing-orbit .orb-dashboard-team {
  border: 1px solid #dde5ff;
  border-radius: 10px;
  background: #f9fbff;
  padding: 8px;
  display: grid;
  gap: 7px;
  align-content: start;
  align-self: start;
}

.marketing-orbit .orb-dashboard-team p {
  margin: 0;
  color: #2d3d67;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.marketing-orbit .orb-dashboard-team ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.marketing-orbit .orb-dashboard-team li {
  border: 1px solid #d6dffe;
  border-radius: 8px;
  background: #fff;
  color: #495f99;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.marketing-orbit .orb-team-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 8px;
}

.marketing-orbit .orb-team-dot-blue {
  background: #4c5bff;
}

.marketing-orbit .orb-team-dot-red {
  background: #e34d56;
}

.marketing-orbit .orb-team-dot-green {
  background: #2fa36a;
}

.marketing-orbit .orb-team-dot-orange {
  background: #e68a2e;
}

.marketing-orbit .orb-dashboard-month {
  border: 1px solid #dce4ff;
  border-radius: 10px;
  overflow: hidden;
}

.marketing-orbit .orb-dashboard-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid #e4ebff;
  background: #f5f8ff;
}

.marketing-orbit .orb-dashboard-weekdays span {
  padding: 6px 4px;
  color: #6173a6;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.08em;
}

.marketing-orbit .orb-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.marketing-orbit .orb-dashboard-grid article {
  min-height: 48px;
  border-right: 1px solid #e8edff;
  border-bottom: 1px solid #e8edff;
  padding: 5px;
  display: grid;
  align-content: start;
  gap: 4px;
  background: #fff;
}

.marketing-orbit .orb-dashboard-grid article:nth-child(7n) {
  border-right: 0;
}

.marketing-orbit .orb-dashboard-grid article.is-empty {
  background: #f9fbff;
}

.marketing-orbit .orb-dashboard-grid article b {
  color: #3a4a77;
  font-size: 10px;
  line-height: 1;
}

.marketing-orbit .orb-dashboard-appt {
  border-radius: 6px;
  background: linear-gradient(135deg, #5f6dff 0%, #4c5bff 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px;
}

.marketing-orbit .orb-dashboard-appt.is-blue {
  background: linear-gradient(135deg, #5f6dff 0%, #4c5bff 100%);
}

.marketing-orbit .orb-dashboard-appt.is-red {
  background: linear-gradient(135deg, #f06a73 0%, #e24f58 100%);
}

.marketing-orbit .orb-dashboard-appt.is-green {
  background: linear-gradient(135deg, #43bf7f 0%, #2e9d67 100%);
}

.marketing-orbit .orb-dashboard-appt-muted {
  background: linear-gradient(135deg, #7a859f 0%, #66738f 100%);
}

.marketing-orbit .orb-dashboard-upcoming {
  border: 1px solid rgba(77, 91, 255, 0.17);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.marketing-orbit .orb-dashboard-upcoming > header {
  padding: 8px 10px;
  border-bottom: 1px solid #e5ebff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.marketing-orbit .orb-dashboard-upcoming > header strong {
  color: #2f3f69;
  font-size: 13px;
}

.marketing-orbit .orb-dashboard-upcoming > header span {
  color: #6275a7;
  font-size: 11px;
  font-weight: 700;
}

.marketing-orbit .orb-dashboard-upcoming-list {
  display: grid;
}

.marketing-orbit .orb-dashboard-upcoming-list article {
  padding: 8px 10px;
  border-bottom: 1px solid #e8edff;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.marketing-orbit .orb-dashboard-upcoming-list article:last-child {
  border-bottom: 0;
}

.marketing-orbit .orb-dashboard-upcoming-list time {
  color: #6072a4;
  font-size: 11px;
  font-weight: 700;
}

.marketing-orbit .orb-dashboard-upcoming-list strong {
  color: #2d3d67;
  font-size: 13px;
}

.marketing-orbit .orb-dashboard-upcoming-list p {
  margin: 1px 0 0;
  color: #6376a7;
  font-size: 11px;
}

.marketing-orbit .orb-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.marketing-orbit .orb-kpi-grid article {
  border: 1px solid rgba(77, 91, 255, 0.18);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 3px;
}

.marketing-orbit .orb-kpi-grid small {
  color: #60719f;
  font-size: 12px;
}

.marketing-orbit .orb-kpi-grid strong {
  font-size: 22px;
  line-height: 1.02;
}

.marketing-orbit .orb-mini-chart {
  border: 1px solid rgba(77, 91, 255, 0.17);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  height: 96px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 7px;
}

.marketing-orbit .orb-mini-chart span {
  display: block;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(180deg, var(--orb-accent-secondary) 0%, var(--orb-accent) 100%);
  min-height: 18px;
}

.marketing-orbit .orb-list-grid {
  border: 1px solid rgba(77, 91, 255, 0.17);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.marketing-orbit .orb-list-row {
  display: grid;
  grid-template-columns: 1.45fr auto 0.8fr;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-bottom: 1px solid #e8edff;
  font-size: 13px;
}

.marketing-orbit .orb-list-row:last-child {
  border-bottom: 0;
}

.marketing-orbit .orb-list-row-head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #6073a6;
  background: #f3f7ff;
  font-size: 11px;
}

.marketing-orbit .orb-section {
  display: grid;
  gap: 14px;
}

.marketing-orbit .orb-section-head {
  display: grid;
  gap: 8px;
}

.marketing-orbit .orb-section-head h2 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.07;
  letter-spacing: -0.02em;
}

.marketing-orbit .orb-section-head p {
  margin: 0;
  color: #4f608d;
  font-size: 16px;
}

.marketing-orbit .orb-views {
  gap: 18px;
}

.marketing-orbit .orb-views .orb-section-head {
  gap: 6px;
  margin-bottom: 4px;
}

.marketing-orbit .orb-views .orb-section-head h2 {
  line-height: 1.08;
}

.marketing-orbit .orb-views .orb-section-head p {
  max-width: 70ch;
  line-height: 1.5;
}

.marketing-orbit .orb-experience {
  gap: 0;
}

.marketing-orbit .orb-experience-surface {
  border: 1px solid rgba(77, 91, 255, 0.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(72, 117, 255, 0.34), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(70, 108, 214, 0.24), transparent 40%),
    linear-gradient(160deg, #07132f 0%, #0b1d46 44%, #112963 100%);
  box-shadow:
    0 24px 44px rgba(20, 32, 78, 0.25),
    0 1px 0 rgba(194, 210, 255, 0.12) inset;
  color: #eaf0ff;
  padding: 22px;
  display: grid;
  gap: 16px;
}

.marketing-orbit .orb-experience-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px;
  align-items: start;
}

.marketing-orbit .orb-experience-stage {
  order: 1;
}

.marketing-orbit .orb-experience-copy {
  order: 2;
}

.marketing-orbit .orb-experience-copy .eyebrow {
  border-color: rgba(160, 179, 255, 0.32);
  background: rgba(128, 146, 221, 0.24);
  color: #e2e9ff;
}

.marketing-orbit .orb-experience-copy h2 {
  margin: 8px 0 10px;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #f5f8ff;
}

.marketing-orbit .orb-experience-copy > p {
  margin: 0;
  color: #b5c4ea;
  font-size: 16px;
  line-height: 1.58;
}

.marketing-orbit .orb-experience-points {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.marketing-orbit .orb-experience-points li {
  position: relative;
  padding-left: 28px;
  color: #dbe4ff;
  font-size: 15px;
  line-height: 1.45;
}

.marketing-orbit .orb-experience-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(102, 132, 255, 0.6);
  background: linear-gradient(180deg, #3f64ff 0%, #2d4cc8 100%);
  box-shadow: 0 0 0 2px rgba(64, 89, 205, 0.22);
}

.marketing-orbit .orb-experience-copy .row-actions {
  margin-top: 14px;
}

.marketing-orbit .orb-experience-copy .btn-soft {
  border-color: rgba(160, 179, 255, 0.4);
  background: rgba(14, 32, 76, 0.55);
  color: #e4ecff;
}

.marketing-orbit .orb-experience-kpis {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.marketing-orbit .orb-experience-kpis article {
  border: 1px solid rgba(133, 158, 255, 0.32);
  border-radius: 12px;
  background: rgba(13, 30, 71, 0.55);
  padding: 9px 10px;
  display: grid;
  gap: 2px;
}

.marketing-orbit .orb-experience-kpis small {
  color: #9bb0e9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marketing-orbit .orb-experience-kpis strong {
  color: #f4f7ff;
  font-size: 25px;
  line-height: 1;
}

.marketing-orbit .orb-experience-window {
  border-color: rgba(171, 189, 255, 0.32);
  border-radius: 16px;
  box-shadow: 0 18px 36px rgba(7, 18, 46, 0.36);
}

.marketing-orbit .orb-experience-window-body {
  gap: 11px;
  padding: 12px;
}

.marketing-orbit .orb-orderform-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.marketing-orbit .orb-orderform-head p {
  margin: 0;
  color: #2d416f;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.marketing-orbit .orb-orderform-head span {
  color: #6073a6;
  font-size: 11px;
  font-weight: 700;
}

.marketing-orbit .orb-orderform-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.marketing-orbit .orb-orderform-steps span {
  border: 1px solid #d6dff6;
  border-radius: 999px;
  background: #f8faff;
  color: #6275a9;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 10px;
  white-space: nowrap;
}

.marketing-orbit .orb-orderform-steps span i {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.marketing-orbit .orb-orderform-steps span.is-active {
  border-color: rgba(77, 91, 255, 0.45);
  background: #edf2ff;
  color: #3048a1;
}

.marketing-orbit .orb-orderform-steps span.is-done {
  border-color: rgba(58, 176, 117, 0.34);
  background: #ecf9f1;
  color: #1b8a59;
}

.marketing-orbit .orb-orderform-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(220px, 0.82fr);
  gap: 10px;
}

.marketing-orbit .orb-orderform-services {
  display: grid;
  gap: 8px;
}

.marketing-orbit .orb-orderform-service-card {
  border: 1px solid #d8e2ff;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  min-height: 102px;
}

.marketing-orbit .orb-orderform-service-card.is-featured {
  border-color: rgba(77, 91, 255, 0.42);
  box-shadow: 0 0 0 2px rgba(77, 91, 255, 0.08);
}

.marketing-orbit .orb-orderform-service-media {
  position: relative;
  background:
    linear-gradient(135deg, rgba(56, 90, 255, 0.42), rgba(71, 190, 232, 0.28)),
    linear-gradient(180deg, #e6edff 0%, #dbe8ff 100%);
  border-right: 1px solid #dce4ff;
}

.marketing-orbit .orb-orderform-service-media::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 8px;
  background: linear-gradient(140deg, #a8b8db 0%, #8ea2ca 100%);
  opacity: 0.65;
}

.marketing-orbit .orb-orderform-service-media.is-highlight {
  background:
    linear-gradient(135deg, rgba(77, 91, 255, 0.52), rgba(87, 194, 244, 0.36)),
    linear-gradient(180deg, #dce8ff 0%, #cfdefd 100%);
}

.marketing-orbit .orb-orderform-service-media.is-custom {
  background:
    linear-gradient(135deg, rgba(239, 147, 83, 0.42), rgba(255, 193, 108, 0.34)),
    linear-gradient(180deg, #ffedd8 0%, #ffe4c7 100%);
}

.marketing-orbit .orb-orderform-service-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(201, 56, 67, 0.9);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
}

.marketing-orbit .orb-orderform-service-badge.is-recommended {
  background: rgba(55, 141, 245, 0.92);
}

.marketing-orbit .orb-orderform-service-copy {
  padding: 9px 10px;
  display: grid;
  gap: 5px;
  align-content: start;
}

.marketing-orbit .orb-orderform-service-copy header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.marketing-orbit .orb-orderform-service-copy h4 {
  margin: 0;
  color: #263760;
  font-size: 14px;
  line-height: 1.15;
}

.marketing-orbit .orb-orderform-service-copy strong {
  color: #2d4398;
  font-size: 17px;
  line-height: 1;
}

.marketing-orbit .orb-orderform-service-copy p {
  margin: 0;
  color: #5f71a0;
  font-size: 11px;
  line-height: 1.35;
}

.marketing-orbit .orb-orderform-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.marketing-orbit .orb-orderform-service-tags span {
  border: 1px solid #d8e2ff;
  border-radius: 999px;
  background: #f6f9ff;
  color: #4d6196;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
}

.marketing-orbit .orb-orderform-summary {
  border: 1px solid #d7e2ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #fafdff 0%, #f4f8ff 100%);
  padding: 11px;
  display: grid;
  gap: 8px;
}

.marketing-orbit .orb-orderform-summary header {
  display: grid;
  gap: 2px;
}

.marketing-orbit .orb-orderform-summary h4 {
  margin: 0;
  color: #2f416e;
  font-size: 14px;
}

.marketing-orbit .orb-orderform-summary header span {
  color: #6174a6;
  font-size: 11px;
}

.marketing-orbit .orb-orderform-summary-rows {
  display: grid;
  gap: 6px;
}

.marketing-orbit .orb-orderform-summary-rows p {
  margin: 0;
  border: 1px solid #dde5ff;
  border-radius: 8px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: #425682;
  font-size: 11px;
}

.marketing-orbit .orb-orderform-summary-rows p strong {
  color: #2f4698;
  font-size: 12px;
}

.marketing-orbit .orb-orderform-summary-total {
  border-top: 1px solid #dbe3ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 7px;
  color: #2f416f;
  font-size: 12px;
  font-weight: 700;
}

.marketing-orbit .orb-orderform-summary-total strong {
  color: #283e91;
  font-size: 18px;
  line-height: 1;
}

.marketing-orbit .orb-orderform-summary .btn {
  width: 100%;
  min-height: 40px;
  justify-content: center;
}

.marketing-orbit .orb-experience-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.marketing-orbit .orb-experience-feature {
  border: 1px solid rgba(138, 160, 255, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 34, 82, 0.76) 0%, rgba(12, 26, 65, 0.8) 100%);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.marketing-orbit .orb-experience-feature header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.marketing-orbit .orb-experience-feature h3 {
  margin: 0;
  color: #f2f6ff;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.marketing-orbit .orb-experience-feature header span {
  color: #91a7df;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.marketing-orbit .orb-experience-feature > p {
  margin: 0;
  color: #afc0ea;
  font-size: 13px;
  line-height: 1.45;
}

.marketing-orbit .orb-experience-mini {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 11px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  padding: 10px;
  display: grid;
  gap: 8px;
  min-height: 132px;
}

.marketing-orbit .orb-experience-mini-head {
  margin: 0;
  color: #44598e;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.marketing-orbit .orb-experience-mini-lines {
  display: grid;
  gap: 6px;
}

.marketing-orbit .orb-experience-mini-lines span {
  height: 8px;
  border-radius: 999px;
  background: #dde6ff;
}

.marketing-orbit .orb-experience-mini-lines span.is-long {
  width: 82%;
}

.marketing-orbit .orb-experience-mini-actions {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.marketing-orbit .orb-experience-mini-actions b {
  color: #3048a0;
  font-size: 12px;
}

.marketing-orbit .orb-experience-mini-actions em {
  color: #5d72a6;
  font-style: normal;
  font-size: 12px;
}

.marketing-orbit .orb-experience-mini-week {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.marketing-orbit .orb-experience-mini-week span {
  border: 1px solid #d8e1ff;
  border-radius: 8px;
  background: #f5f8ff;
  color: #50649b;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 5px;
}

.marketing-orbit .orb-experience-mini-team {
  display: grid;
  gap: 6px;
}

.marketing-orbit .orb-experience-mini-team p {
  margin: 0;
  border: 1px solid #dbe4ff;
  border-radius: 8px;
  background: #fff;
  color: #40558c;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
}

.marketing-orbit .orb-experience-mini-team i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.marketing-orbit .orb-experience-mini-team i.is-blue {
  background: #4d5bff;
}

.marketing-orbit .orb-experience-mini-team i.is-red {
  background: #e45d6a;
}

.marketing-orbit .orb-experience-mini-team i.is-green {
  background: #31aa74;
}

.marketing-orbit .orb-experience-mini-listings {
  padding: 0;
  overflow: hidden;
}

.marketing-orbit .orb-experience-mini-listings .orb-list-row {
  grid-template-columns: 1fr auto 0.5fr;
  font-size: 12px;
  padding: 8px 9px;
}

.marketing-orbit .orb-experience-mini-listings .orb-list-row-head {
  font-size: 10px;
}

.marketing-orbit .orb-experience-mini-payroll {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.marketing-orbit .orb-mini-payroll-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #d8e2ff;
  background: #eef3ff;
  padding: 8px 10px;
}

.marketing-orbit .orb-mini-payroll-head strong {
  color: #314476;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.marketing-orbit .orb-mini-payroll-head span {
  border: 1px solid #c9d7ff;
  border-radius: 999px;
  background: #ffffff;
  color: #4b63a6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
}

.marketing-orbit .orb-mini-payroll-run {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid #dde7ff;
  padding: 8px 10px;
}

.marketing-orbit .orb-mini-payroll-run p {
  margin: 0;
  border: 1px solid #dbe5ff;
  border-radius: 8px;
  background: #fff;
  color: #4f6398;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
}

.marketing-orbit .orb-mini-payroll-run p strong {
  color: #2d4397;
  font-size: 12px;
}

.marketing-orbit .orb-mini-payroll-rates {
  padding: 8px 10px;
  display: grid;
  gap: 5px;
}

.marketing-orbit .orb-mini-payroll-rate-row {
  border: 1px solid #dbe5ff;
  border-radius: 8px;
  background: #fff;
  color: #42598f;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
}

.marketing-orbit .orb-mini-payroll-rate-row.is-head {
  border-style: dashed;
  background: #f7faff;
  color: #6377ab;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Focused polish for homepage module strip. */
.marketing-orbit .orb-platform-modules {
  margin-top: -2px;
}

.marketing-orbit .orb-platform-modules .orb-experience-surface {
  border-color: rgba(105, 127, 255, 0.38);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% -10%, rgba(103, 152, 255, 0.4), transparent 34%),
    radial-gradient(circle at 90% 108%, rgba(76, 137, 255, 0.3), transparent 42%),
    linear-gradient(152deg, #0b1f53 0%, #0f285f 42%, #173a80 100%);
  box-shadow:
    0 26px 56px rgba(12, 28, 82, 0.34),
    0 1px 0 rgba(197, 212, 255, 0.14) inset;
  padding: 20px;
  gap: 12px;
}

.marketing-orbit .orb-platform-modules .orb-experience-feature-grid {
  gap: 12px;
}

.marketing-orbit .orb-platform-modules .orb-experience-feature {
  position: relative;
  overflow: hidden;
  border-color: rgba(154, 178, 255, 0.34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 41, 96, 0.9) 0%, rgba(13, 30, 74, 0.92) 100%);
  box-shadow: 0 14px 26px rgba(8, 20, 52, 0.2);
  padding: 13px;
  gap: 10px;
  grid-template-rows: auto 176px auto;
}

.marketing-orbit .orb-platform-modules .orb-experience-feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(84, 127, 255, 0.92), rgba(92, 198, 255, 0.8));
  opacity: 0.72;
}

.marketing-orbit .orb-platform-modules .orb-experience-feature header {
  align-items: center;
}

.marketing-orbit .orb-platform-modules .orb-experience-feature h3 {
  font-size: 18px;
  line-height: 1.12;
}

.marketing-orbit .orb-platform-modules .orb-experience-feature header span {
  border: 1px solid rgba(147, 172, 255, 0.4);
  border-radius: 999px;
  background: rgba(41, 62, 131, 0.44);
  color: #b5c8ff;
  font-size: 10px;
  letter-spacing: 0.09em;
  padding: 3px 8px;
}

.marketing-orbit .orb-platform-modules .orb-experience-feature > p {
  color: #bdd0fc;
}

.marketing-orbit .orb-platform-modules .orb-experience-mini {
  border-color: rgba(113, 141, 224, 0.38);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f7ff 100%);
  min-height: 176px;
  height: 176px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  padding: 11px;
}

.marketing-orbit .orb-platform-modules .orb-experience-mini-head {
  color: #4562a1;
}

.marketing-orbit .orb-platform-modules .orb-experience-mini-lines span {
  background: #d2defb;
}

.marketing-orbit .orb-platform-modules .orb-experience-mini-actions b {
  color: #31499b;
}

.marketing-orbit .orb-platform-modules .orb-experience-mini-actions em {
  color: #6075a8;
}

.marketing-orbit .orb-platform-modules .orb-experience-mini-team p {
  color: #3b528a;
}

.marketing-orbit .orb-platform-modules .orb-experience-mini-listings .orb-list-row {
  border-bottom-color: #e6ecff;
}

.marketing-orbit .orb-platform-modules .orb-experience-mini-listings .orb-list-row span:first-child {
  color: #395084;
  font-weight: 700;
}

.marketing-orbit .orb-platform-modules .orb-mini-payroll-head {
  background: #f2f6ff;
  padding: 7px 9px;
}

.marketing-orbit .orb-platform-modules .orb-mini-payroll-run p,
.marketing-orbit .orb-platform-modules .orb-mini-payroll-rate-row {
  background: #fcfdff;
}

.marketing-orbit .orb-platform-modules .orb-mini-payroll-run {
  gap: 4px;
  padding: 6px 8px;
}

.marketing-orbit .orb-platform-modules .orb-mini-payroll-run p {
  padding: 5px 7px;
  font-size: 10px;
}

.marketing-orbit .orb-platform-modules .orb-mini-payroll-rates {
  gap: 4px;
  padding: 6px 8px;
}

.marketing-orbit .orb-platform-modules .orb-mini-payroll-rate-row {
  padding: 5px 7px;
  font-size: 10px;
}

@media (hover: hover) and (pointer: fine) {
  .marketing-orbit .orb-platform-modules .orb-experience-feature {
    transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
  }

  .marketing-orbit .orb-platform-modules .orb-experience-feature:hover {
    transform: translateY(-3px);
    border-color: rgba(170, 191, 255, 0.48);
    box-shadow: 0 22px 32px rgba(6, 20, 54, 0.28);
  }
}

@media (max-width: 1260px) {
  .marketing-orbit .orb-platform-modules .orb-experience-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .marketing-orbit .orb-platform-modules .orb-experience-surface {
    padding: 14px;
  }

  .marketing-orbit .orb-platform-modules .orb-experience-feature-grid {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-platform-modules .orb-experience-feature {
    grid-template-rows: auto;
    min-height: 0;
  }

  .marketing-orbit .orb-platform-modules .orb-experience-mini {
    height: auto;
    min-height: 140px;
  }
}

.marketing-orbit .orb-product-template {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(77, 91, 255, 0.1), transparent 44%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 14px;
}

.marketing-orbit .orb-product-rail {
  border: 1px solid rgba(77, 91, 255, 0.17);
  border-radius: 14px;
  background: #f9fbff;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.marketing-orbit .orb-product-rail-title {
  margin: 0;
  color: #55689b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.marketing-orbit .orb-product-rail ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.marketing-orbit .orb-product-rail li {
  border: 1px solid #d8e1ff;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 4px;
}

.marketing-orbit .orb-product-rail li.is-active {
  border-color: rgba(77, 91, 255, 0.34);
  background: linear-gradient(180deg, #eef3ff 0%, #f8faff 100%);
}

.marketing-orbit .orb-product-rail li strong {
  color: #25335d;
  font-size: 14px;
  line-height: 1.1;
}

.marketing-orbit .orb-product-rail li span {
  color: #5b6f9f;
  font-size: 12px;
  line-height: 1.4;
}

.marketing-orbit .orb-product-main {
  display: grid;
  gap: 10px;
}

.marketing-orbit .orb-product-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.marketing-orbit .orb-product-head h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.marketing-orbit .orb-product-head p {
  margin: 0;
  color: #6072a4;
  font-size: 13px;
  font-weight: 700;
}

.marketing-orbit .orb-product-window .orb-window-body {
  gap: 9px;
}

.marketing-orbit .orb-product-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.marketing-orbit .orb-product-kpis article {
  border: 1px solid rgba(77, 91, 255, 0.17);
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 3px;
}

.marketing-orbit .orb-product-kpis small {
  color: #6779aa;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.marketing-orbit .orb-product-kpis strong {
  font-size: 21px;
  line-height: 1;
}

.marketing-orbit .orb-product-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 9px;
}

.marketing-orbit .orb-product-week,
.marketing-orbit .orb-product-queue {
  border: 1px solid rgba(77, 91, 255, 0.17);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.marketing-orbit .orb-product-week > header,
.marketing-orbit .orb-product-queue > header {
  padding: 8px 10px;
  border-bottom: 1px solid #e5ebff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.marketing-orbit .orb-product-week > header strong,
.marketing-orbit .orb-product-queue > header strong {
  color: #2f3f69;
  font-size: 12px;
}

.marketing-orbit .orb-product-week > header span,
.marketing-orbit .orb-product-queue > header span {
  color: #6275a7;
  font-size: 11px;
  font-weight: 700;
}

.marketing-orbit .orb-product-week-grid {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.marketing-orbit .orb-product-week-grid article {
  border: 1px solid #dce4ff;
  border-radius: 9px;
  background: #f9fbff;
  padding: 8px;
  display: grid;
  gap: 2px;
}

.marketing-orbit .orb-product-week-grid article.is-active {
  border-color: rgba(77, 91, 255, 0.34);
  background: #eef3ff;
}

.marketing-orbit .orb-product-week-grid b {
  color: #2f406b;
  font-size: 12px;
}

.marketing-orbit .orb-product-week-grid span {
  color: #4a5f97;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.marketing-orbit .orb-product-week-grid em {
  color: #6a7dab;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}

.marketing-orbit .orb-product-queue .orb-list-row {
  grid-template-columns: 1.2fr auto 0.7fr;
}

.marketing-orbit .orb-product-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.marketing-orbit .orb-product-strip article {
  border: 1px solid rgba(77, 91, 255, 0.18);
  border-radius: 12px;
  background: #fff;
  padding: 14px 14px 12px;
  display: grid;
  align-content: start;
  min-height: 96px;
  gap: 6px;
}

.marketing-orbit .orb-product-strip h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
}

.marketing-orbit .orb-product-strip p {
  margin: 0;
  color: #5d709f;
  font-size: 13px;
  line-height: 1.45;
}

.marketing-orbit .orb-view-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.marketing-orbit .orb-view-card {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.marketing-orbit .orb-view-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.marketing-orbit .orb-view-head h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
}

.marketing-orbit .orb-view-head span {
  color: #5e72a6;
  font-size: 12px;
  font-weight: 700;
}

.marketing-orbit .orb-calendar-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.marketing-orbit .orb-calendar-strip article {
  border: 1px solid #d9e2ff;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  padding: 8px 6px;
  display: grid;
  gap: 2px;
}

.marketing-orbit .orb-calendar-strip article.is-active {
  border-color: var(--orb-accent-line);
  background: #edf2ff;
}

.marketing-orbit .orb-calendar-strip b {
  font-size: 12px;
}

.marketing-orbit .orb-calendar-strip span {
  color: #6073a5;
  font-size: 12px;
}

.marketing-orbit .orb-agenda-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.marketing-orbit .orb-agenda-list li {
  border: 1px solid #d8e1ff;
  border-radius: 10px;
  background: #fff;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.marketing-orbit .orb-agenda-list span {
  color: #5f729f;
}

.marketing-orbit .orb-agenda-list em {
  color: #6b7eb0;
  font-style: normal;
  font-size: 12px;
}

.marketing-orbit .orb-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.marketing-orbit .orb-flow-grid article {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 6px;
}

.marketing-orbit .orb-flow-grid small {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--orb-accent-line);
  background: var(--orb-accent-muted);
  color: var(--orb-accent-strong);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
}

.marketing-orbit .orb-flow-grid h3 {
  margin: 0;
  font-size: 24px;
}

.marketing-orbit .orb-flow-grid p {
  margin: 0;
  color: #566998;
  font-size: 14px;
  line-height: 1.55;
}

.marketing-orbit .orb-integrations-template {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(77, 91, 255, 0.11), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.marketing-orbit .orb-integrations-head {
  display: grid;
  gap: 8px;
}

.marketing-orbit .orb-integrations-head h2 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.marketing-orbit .orb-integrations-head p {
  margin: 0;
  color: #4f608d;
  font-size: 17px;
}

.marketing-orbit .orb-integrations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.marketing-orbit .orb-integration-card {
  border: 1px solid rgba(77, 91, 255, 0.18);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 9px;
}

.marketing-orbit .orb-integration-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.marketing-orbit .orb-integration-category {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--orb-accent-line);
  background: var(--orb-accent-muted);
  color: var(--orb-accent-strong);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.marketing-orbit .orb-integration-state {
  color: #6274a6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.marketing-orbit .orb-integration-state.is-enabled {
  color: #6274a6;
}

.marketing-orbit .orb-integration-state.is-coming-soon {
  color: #a35818;
}

.marketing-orbit .orb-integration-state.is-pending {
  color: #4f66b4;
}

.marketing-orbit .orb-integration-state.is-warning {
  color: #b45418;
}

.marketing-orbit .orb-integration-brand {
  display: grid;
  align-content: start;
  gap: 10px;
}

.marketing-orbit .orb-integration-brand .app-store-logo-banner {
  width: 100%;
  min-height: 86px;
  padding: 12px;
  border-radius: 10px;
}

.marketing-orbit .orb-integration-brand .app-store-logo-image-banner {
  max-height: 52px;
}

.marketing-orbit .orb-integration-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.marketing-orbit .orb-integration-card p {
  margin: 0;
  color: #566998;
  font-size: 14px;
  line-height: 1.45;
}

.marketing-orbit .orb-integrations-more {
  margin: 2px 2px 0;
  color: #5a6ea4;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.marketing-orbit .orb-pricing [data-pricing-content] {
  display: grid;
  gap: 24px;
}

.marketing-orbit .orb-pricing-template {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(77, 91, 255, 0.11), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.marketing-orbit .orb-pricing .orb-pricing-head h2 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.marketing-orbit .orb-pricing .orb-pricing-head {
  display: grid;
  gap: 8px;
}

.marketing-orbit .rd-payg-card,
.marketing-orbit .rd-plan-card {
  position: relative;
  border: 1px solid rgba(77, 91, 255, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.98) 100%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.1));
  box-shadow:
    0 18px 42px rgba(33, 47, 110, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  overflow: hidden;
}

.marketing-orbit .rd-payg-card::before,
.marketing-orbit .rd-plan-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(77, 91, 255, 0.45), rgba(111, 120, 255, 0.2));
  pointer-events: none;
}

.marketing-orbit .rd-payg-card {
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.marketing-orbit .rd-payg-card > div {
  display: grid;
  gap: 11px;
  max-width: 820px;
}

.marketing-orbit .rd-payg-card .rd-benefit-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

.marketing-orbit .rd-subscription-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(77, 91, 255, 0.12);
}

.marketing-orbit .rd-subscription-head h3 {
  margin: 0;
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.marketing-orbit .rd-subscription-head p {
  margin: 0;
  color: #6072a4;
  font-weight: 600;
}

.marketing-orbit .rd-subscription-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.marketing-orbit .rd-subscription-grid-composed {
  grid-auto-flow: row dense;
}

.marketing-orbit .rd-subscription-grid-composed .rd-payg-card-inline {
  grid-column: 1 / span 2;
  margin: 0;
  max-width: none;
  padding: 22px;
}

.marketing-orbit .rd-subscription-grid-composed .rd-plan-card-enterprise {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.marketing-orbit .rd-subscription-grid-composed .rd-plan-card-enterprise .rd-plan-btn {
  margin-top: auto;
}

.marketing-orbit .rd-plan-card {
  padding: 22px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
}

.marketing-orbit .rd-plan-card-featured {
  border-color: rgba(77, 91, 255, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(77, 91, 255, 0.15), transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}

.marketing-orbit .rd-plan-kicker {
  margin: 0;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--orb-accent-line);
  background: var(--orb-accent-muted);
  color: var(--orb-accent-strong);
  padding: 0 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.marketing-orbit .rd-plan-card h3,
.marketing-orbit .rd-payg-card h3 {
  margin: 0;
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.marketing-orbit .rd-price {
  margin: 0;
  color: #2f459d;
  font-size: 56px;
  line-height: 0.98;
  font-weight: 800;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.marketing-orbit .rd-price span {
  margin-left: 0;
  color: #6072a4;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  padding-bottom: 5px;
}

.marketing-orbit .rd-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.marketing-orbit .rd-benefit-list li {
  position: relative;
  padding-left: 16px;
  color: #3b4f82;
  font-size: 15px;
  line-height: 1.45;
}

.marketing-orbit .rd-benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--orb-accent);
}

.marketing-orbit .rd-plan-btn {
  margin-top: 12px;
  width: 100%;
  min-height: 48px;
  font-weight: 700;
}

.marketing-orbit .rd-payg-card .rd-plan-btn {
  width: 228px;
  min-width: 228px;
}

.marketing-orbit .rd-enterprise-estimator {
  margin-top: 6px;
  border-top: 1px dashed #cad4ff;
  padding-top: 10px;
  display: grid;
  gap: 10px;
}

.marketing-orbit .rd-enterprise-estimate-toggle {
  border: 0;
  background: transparent;
  color: var(--orb-accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.marketing-orbit .rd-enterprise-estimate-toggle::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 140ms ease;
}

.marketing-orbit .rd-enterprise-estimate-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.marketing-orbit .rd-enterprise-estimate-panel {
  border: 1px solid #d7e0ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #f9fbff 0%, #f3f6ff 100%);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.marketing-orbit .rd-enterprise-estimate-label {
  margin: 0;
  color: #52679f;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}

.marketing-orbit .rd-enterprise-estimate-panel input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--orb-accent);
}

.marketing-orbit .rd-enterprise-estimate-price {
  margin: 0;
  color: #2f459d;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.marketing-orbit .rd-enterprise-estimate-meta {
  margin: 0;
  color: #556a9f;
  font-size: 14px;
}

.marketing-orbit .orb-status-chip {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--orb-accent-line);
  background: var(--orb-accent-muted);
  color: var(--orb-accent-strong);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.marketing-orbit .orb-status-chip[data-status-tone="success"] {
  border-color: rgba(33, 176, 105, 0.32);
  background: rgba(33, 176, 105, 0.14);
  color: #1e8f56;
}

.marketing-orbit .orb-status-chip[data-status-tone="warning"] {
  border-color: rgba(235, 145, 39, 0.34);
  background: rgba(235, 145, 39, 0.14);
  color: #b36c12;
}

.marketing-orbit .orb-status-chip[data-status-tone="danger"] {
  border-color: rgba(220, 76, 76, 0.32);
  background: rgba(220, 76, 76, 0.14);
  color: #b23f3f;
}

.marketing-orbit .orb-status-chip[data-status-tone="info"] {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(59, 130, 246, 0.14);
  color: #1d5fb4;
}

.marketing-orbit .orb-status-chip[data-status-tone="primary"] {
  border-color: var(--orb-accent-line);
  background: var(--orb-accent-muted);
  color: var(--orb-accent-strong);
}

.marketing-orbit .orb-status-chip[data-status-tone="muted"] {
  border-color: rgba(126, 138, 171, 0.32);
  background: rgba(126, 138, 171, 0.14);
  color: #5a6682;
}

.marketing-orbit .orb-status-chip[data-status-tone="neutral"] {
  border-color: rgba(126, 138, 171, 0.24);
  background: rgba(126, 138, 171, 0.11);
  color: #53607b;
}

.marketing-orbit .orb-final-card {
  border: 1px solid rgba(77, 91, 255, 0.2);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 12% 0%, rgba(77, 91, 255, 0.12), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(111, 120, 255, 0.12), transparent 40%),
    #fff;
}

.marketing-orbit .orb-final-card h2 {
  margin: 0 0 8px;
  font-size: clamp(35px, 4vw, 54px);
}

.marketing-orbit .orb-final-card p {
  margin: 0 auto 13px;
  color: #5a6c9b;
  max-width: 64ch;
}

.marketing-orbit .orb-final-card .row-actions {
  justify-content: center;
}

.marketing-orbit .mk-footer-wrap {
  border-top: 1px solid rgba(77, 91, 255, 0.16);
  padding: 14px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 10px;
}

.marketing-orbit .mk-footer-branding {
  align-items: center;
  min-height: 36px;
}

.marketing-orbit .mk-footer-copy {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.marketing-orbit .mk-copyright {
  line-height: 1.25;
}

.marketing-orbit .mk-footer-links {
  justify-self: center;
  align-items: center;
  min-height: 32px;
}

.marketing-orbit .mk-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.marketing-orbit .mk-footer-wrap > .btn {
  justify-self: end;
  align-self: center;
}

@media (max-width: 1260px) {
  .marketing-orbit .orb-hero-grid,
  .marketing-orbit .orb-view-grid,
  .marketing-orbit .rd-subscription-grid {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-experience-hero {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-experience-copy {
    order: 1;
  }

  .marketing-orbit .orb-experience-stage {
    order: 2;
  }

  .marketing-orbit .orb-experience-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-orbit .orb-orderform-layout {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-orderform-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-orbit .orb-orderform-service-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .marketing-orbit .orb-orderform-service-media {
    min-height: 64px;
    border-right: 0;
    border-bottom: 1px solid #dce4ff;
  }

  .marketing-orbit .orb-product-template {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-product-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-orbit .orb-integrations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-orbit .orb-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-orbit .rd-payg-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .marketing-orbit .rd-payg-card .rd-benefit-list {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .rd-payg-card .rd-plan-btn {
    width: 100%;
    min-width: 0;
  }

  .marketing-orbit .rd-subscription-grid-composed .rd-payg-card-inline,
  .marketing-orbit .rd-subscription-grid-composed .rd-plan-card-enterprise {
    grid-column: auto;
    grid-row: auto;
  }

  .marketing-orbit .orb-dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-orbit .orb-product-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-orbit .mk-footer-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .marketing-orbit .orb-topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0;
  }

  .marketing-orbit .orb-nav {
    width: 100%;
  }

  .marketing-orbit .orb-nav a,
  .marketing-orbit .orb-nav .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .marketing-orbit .mk-logo-shell.has-logo {
    max-width: min(70vw, 248px);
  }

  .marketing-orbit .orb-pricing .orb-pricing-head {
    gap: 6px;
  }
}

@media (max-width: 640px) {
  .marketing-orbit .marketing-wrap {
    width: calc(100% - 26px);
  }

  .marketing-orbit .orb-main {
    gap: 38px;
  }

  .marketing-orbit .orb-window,
  .marketing-orbit .orb-view-card,
  .marketing-orbit .orb-flow-grid article,
  .marketing-orbit .rd-plan-card,
  .marketing-orbit .rd-payg-card,
  .marketing-orbit .orb-final-card {
    padding: 12px;
  }

  .marketing-orbit .orb-kpi-grid,
  .marketing-orbit .orb-flow-grid {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-experience-surface {
    padding: 14px;
  }

  .marketing-orbit .orb-experience-copy h2 {
    font-size: clamp(30px, 10.5vw, 44px);
  }

  .marketing-orbit .orb-experience-kpis {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-orderform-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-orbit .orb-orderform-services,
  .marketing-orbit .orb-experience-feature-grid {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-orderform-service-card {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 96px;
  }

  .marketing-orbit .orb-orderform-service-media {
    min-height: 0;
    border-bottom: 0;
    border-right: 1px solid #dce4ff;
  }

  .marketing-orbit .orb-experience-mini-listings .orb-list-row {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-list-row,
  .marketing-orbit .orb-agenda-list li {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .rd-price {
    font-size: 42px;
  }

  .marketing-orbit .rd-price span {
    font-size: 16px;
    padding-bottom: 4px;
  }

  .marketing-orbit .rd-plan-card h3,
  .marketing-orbit .rd-payg-card h3 {
    font-size: 40px;
  }

  .marketing-orbit .orb-product-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .marketing-orbit .orb-product-kpis {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-product-split {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-product-week-grid {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-product-strip {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-integrations-grid {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-integrations-head h2 {
    font-size: clamp(30px, 10vw, 46px);
  }

  .marketing-orbit .orb-integration-card h3 {
    font-size: 22px;
  }

  .marketing-orbit .orb-dashboard-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .marketing-orbit .orb-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-orbit .orb-dashboard-calendar-layout {
    grid-template-columns: 1fr;
  }

  .marketing-orbit .orb-dashboard-team ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-orbit .orb-dashboard-upcoming-list article {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .marketing-orbit .mk-logo-shell.has-logo {
    height: 34px;
    max-width: min(76vw, 228px);
    padding: 0;
  }

  .marketing-orbit .marketing-footer .mk-logo-shell.has-logo {
    height: 32px;
    max-width: min(70vw, 198px);
  }
}

.platform-admin-page .support-ticket-overview,
.platform-admin-page .support-ticket-workspace,
.platform-admin-page .support-ticket-search-card,
.platform-admin-page .support-ticket-sidebar-card,
.platform-admin-page .support-ticket-overview-stat,
.platform-admin-page .support-ticket-mini-stat,
.platform-admin-page .support-ticket-meta-item {
  background: linear-gradient(180deg, rgba(77, 91, 255, 0.06), rgba(77, 91, 255, 0.015)), var(--panel);
}

.platform-admin-page .support-ticket-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.platform-admin-page .support-ticket-overview-copy,
.platform-admin-page .support-ticket-inbox-copy,
.platform-admin-page .support-ticket-inbox-helper-copy,
.platform-admin-page .support-ticket-workspace-copy,
.platform-admin-page .support-ticket-search-card,
.platform-admin-page .support-ticket-queue-main,
.platform-admin-page .support-ticket-row-main,
.platform-admin-page .support-ticket-row-activity,
.platform-admin-page .support-ticket-workspace-aside,
.platform-admin-page .support-ticket-sidebar-card,
.platform-admin-page .support-ticket-meta-item,
.platform-admin-page .support-ticket-mini-stat {
  display: grid;
  gap: 6px;
}

.platform-admin-page .support-ticket-overview-copy h3,
.platform-admin-page .support-ticket-inbox-copy h4,
.platform-admin-page .support-ticket-inbox-helper h4,
.platform-admin-page .support-ticket-section-head h4,
.platform-admin-page .support-ticket-workspace-copy h3,
.platform-admin-page .support-ticket-empty h4 {
  margin: 0;
}

.platform-admin-page .support-ticket-overview-copy p,
.platform-admin-page .support-ticket-inbox-copy p,
.platform-admin-page .support-ticket-inbox-helper p,
.platform-admin-page .support-ticket-workspace-copy p,
.platform-admin-page .support-ticket-search-card p,
.platform-admin-page .support-ticket-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.platform-admin-page .support-ticket-overview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.platform-admin-page .support-ticket-overview-stat,
.platform-admin-page .support-ticket-mini-stat,
.platform-admin-page .support-ticket-meta-item,
.platform-admin-page .support-ticket-sidebar-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}

.platform-admin-page .support-ticket-sidebar-card {
  gap: 12px;
}

.platform-admin-page .support-ticket-overview-stat span,
.platform-admin-page .support-ticket-mini-stat span,
.platform-admin-page .support-ticket-meta-item span,
.platform-admin-page .support-ticket-search-card span,
.platform-admin-page .support-ticket-section-head span,
.platform-admin-page .support-ticket-message-meta,
.platform-admin-page .support-ticket-row-meta,
.platform-admin-page .support-ticket-row-activity > span {
  color: var(--muted);
  font-size: 13px;
}

.platform-admin-page .support-ticket-overview-stat strong,
.platform-admin-page .support-ticket-mini-stat strong {
  font-size: 24px;
  line-height: 1.1;
}

.platform-admin-page .support-ticket-overview-stat.is-open {
  border-color: rgba(77, 91, 255, 0.25);
}

.platform-admin-page .support-ticket-overview-stat.is-waiting {
  border-color: rgba(245, 159, 10, 0.32);
}

.platform-admin-page .support-ticket-overview-stat.is-resolved {
  border-color: rgba(12, 159, 111, 0.3);
}

.platform-admin-page .support-ticket-shell {
  display: grid;
  grid-template-columns: 248px minmax(360px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.platform-admin-page .support-ticket-shell.is-workspace-closed {
  grid-template-columns: 248px minmax(0, 1fr);
}

.platform-admin-page .support-ticket-views-panel,
.platform-admin-page .support-ticket-inbox-panel,
.platform-admin-page .support-ticket-workspace {
  min-height: 620px;
}

.platform-admin-page .support-ticket-views-panel {
  display: grid;
  gap: 16px;
}

.platform-admin-page .support-ticket-search-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.platform-admin-page .support-ticket-shell.is-workspace-closed .support-ticket-inbox-panel {
  grid-column: 2 / -1;
}

.platform-admin-page .support-ticket-search-card.is-active {
  border-color: rgba(77, 91, 255, 0.28);
  box-shadow: 0 14px 28px rgba(77, 91, 255, 0.1);
}

.platform-admin-page .support-ticket-search-card strong {
  font-size: 18px;
  line-height: 1.25;
}

.platform-admin-page .support-ticket-queue-panel,
.platform-admin-page .support-ticket-filter-panel,
.platform-admin-page .support-ticket-thread-panel,
.platform-admin-page .support-ticket-sidebar {
  display: grid;
  gap: 12px;
}

.platform-admin-page .support-ticket-queue-list,
.platform-admin-page .support-ticket-list,
.platform-admin-page .support-ticket-thread,
.platform-admin-page .support-ticket-meta-stack {
  display: grid;
  gap: 10px;
}

.platform-admin-page .support-ticket-inbox-helper {
  border: 1px dashed rgba(77, 91, 255, 0.28);
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(77, 91, 255, 0.06), rgba(77, 91, 255, 0.02));
}

.platform-admin-page .support-ticket-queue-btn,
.platform-admin-page .support-ticket-row {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(77, 91, 255, 0.04), rgba(77, 91, 255, 0.01)), var(--panel);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.platform-admin-page .support-ticket-queue-btn {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.platform-admin-page .support-ticket-queue-btn:hover,
.platform-admin-page .support-ticket-queue-btn:focus-visible,
.platform-admin-page .support-ticket-queue-btn.is-active,
.platform-admin-page .support-ticket-row:hover,
.platform-admin-page .support-ticket-row:focus-visible,
.platform-admin-page .support-ticket-row.is-active {
  border-color: var(--accent);
  box-shadow: 0 16px 30px rgba(77, 91, 255, 0.12);
  transform: translateY(-1px);
}

.platform-admin-page .support-ticket-queue-main strong {
  font-size: 14px;
}

.platform-admin-page .support-ticket-queue-main small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.platform-admin-page .support-ticket-queue-count {
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(77, 91, 255, 0.12);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.platform-admin-page .support-ticket-filter-form label,
.platform-admin-page .support-ticket-triage-form label,
.platform-admin-page .support-ticket-note-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.platform-admin-page .support-ticket-inbox-panel,
.platform-admin-page .support-ticket-workspace {
  display: grid;
  gap: 16px;
}

.platform-admin-page .support-ticket-inbox-head,
.platform-admin-page .support-ticket-workspace-head,
.platform-admin-page .support-ticket-detail-topline,
.platform-admin-page .support-ticket-section-head,
.platform-admin-page .support-ticket-row-top,
.platform-admin-page .support-ticket-row-meta,
.platform-admin-page .support-ticket-row-badges,
.platform-admin-page .support-ticket-context-pills,
.platform-admin-page .support-ticket-inbox-pills,
.platform-admin-page .support-ticket-message-head,
.platform-admin-page .support-ticket-message-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.platform-admin-page .support-ticket-inbox-head,
.platform-admin-page .support-ticket-workspace-head,
.platform-admin-page .support-ticket-section-head,
.platform-admin-page .support-ticket-row-top,
.platform-admin-page .support-ticket-message-head {
  justify-content: space-between;
}

.platform-admin-page .support-ticket-list-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 148px;
  gap: 14px;
  padding: 0 14px 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.platform-admin-page .support-ticket-list-head span:last-child {
  text-align: right;
}

.platform-admin-page .support-ticket-row {
  padding: 14px;
  text-align: left;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 148px;
  gap: 14px;
  align-items: start;
}

.platform-admin-page .support-ticket-row-avatar,
.platform-admin-page .support-ticket-message-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.platform-admin-page .support-ticket-row-avatar {
  background: rgba(77, 91, 255, 0.14);
  color: var(--accent);
}

.platform-admin-page .support-ticket-row-main {
  min-width: 0;
}

.platform-admin-page .support-ticket-row-main strong {
  font-size: 15px;
}

.platform-admin-page .support-ticket-row-subject,
.platform-admin-page .support-ticket-row-preview {
  margin: 0;
}

.platform-admin-page .support-ticket-row-subject {
  font-weight: 700;
}

.platform-admin-page .support-ticket-row-preview {
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.platform-admin-page .support-ticket-row-activity {
  justify-items: end;
  text-align: right;
  align-content: start;
}

.platform-admin-page .support-ticket-ref {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.platform-admin-page .support-ticket-pill,
.platform-admin-page .support-ticket-message-visibility,
.platform-admin-page .support-ticket-context-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.platform-admin-page .support-ticket-pill,
.platform-admin-page .support-ticket-message-visibility,
.platform-admin-page .support-ticket-context-pill {
  background: rgba(77, 91, 255, 0.1);
  color: var(--accent);
}

.platform-admin-page .support-ticket-pill.is-priority-high,
.platform-admin-page .support-ticket-pill.is-status-waiting_on_customer {
  background: rgba(245, 159, 10, 0.16);
  color: #9a5a00;
}

.platform-admin-page .support-ticket-pill.is-priority-critical {
  background: rgba(239, 68, 68, 0.14);
  color: #b42318;
}

.platform-admin-page .support-ticket-pill.is-status-resolved,
.platform-admin-page .support-ticket-pill.is-status-closed,
.platform-admin-page .support-ticket-message-visibility.is-public {
  background: rgba(12, 159, 111, 0.14);
  color: #0f7a4a;
}

.platform-admin-page .support-ticket-row-link {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.platform-admin-page .support-ticket-workspace-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.platform-admin-page .support-ticket-workspace-aside {
  justify-items: end;
  align-content: start;
  gap: 12px;
}

.platform-admin-page .support-ticket-workspace-back {
  white-space: nowrap;
}

.platform-admin-page .support-ticket-workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.platform-admin-page .support-ticket-message {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.platform-admin-page .support-ticket-message.is-platform {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.platform-admin-page .support-ticket-message.is-requester .support-ticket-message-avatar {
  background: rgba(12, 159, 111, 0.14);
  color: #0f7a4a;
}

.platform-admin-page .support-ticket-message.is-platform .support-ticket-message-avatar {
  order: 2;
  background: rgba(77, 91, 255, 0.14);
  color: var(--accent);
}

.platform-admin-page .support-ticket-message-bubble {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  display: grid;
  gap: 10px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(46, 65, 165, 0.06);
}

.platform-admin-page .support-ticket-message.is-platform .support-ticket-message-bubble {
  order: 1;
  background: linear-gradient(180deg, rgba(77, 91, 255, 0.07), rgba(77, 91, 255, 0.015)), var(--panel);
}

.platform-admin-page .support-ticket-message p {
  margin: 0;
  color: var(--text);
  line-height: 1.65;
}

.platform-admin-page .support-ticket-note-form textarea {
  min-height: 150px;
}

.platform-admin-page .support-ticket-empty {
  border: 1px dashed var(--line);
  border-radius: 20px;
  padding: 24px;
  background: rgba(77, 91, 255, 0.035);
}

html[data-theme="dark"] .platform-admin-page .support-ticket-pill.is-priority-high,
html[data-theme="dark"] .platform-admin-page .support-ticket-pill.is-status-waiting_on_customer {
  color: #ffd27d;
}

html[data-theme="dark"] .platform-admin-page .support-ticket-pill.is-priority-critical {
  color: #ff9aa7;
}

html[data-theme="dark"] .platform-admin-page .support-ticket-pill.is-status-resolved,
html[data-theme="dark"] .platform-admin-page .support-ticket-pill.is-status-closed,
html[data-theme="dark"] .platform-admin-page .support-ticket-message-visibility.is-public {
  color: #81e3b5;
}

html[data-theme="dark"] .platform-admin-page .support-ticket-message-bubble,
html[data-theme="dark"] .platform-admin-page .support-ticket-search-card.is-active,
html[data-theme="dark"] .platform-admin-page .support-ticket-queue-btn:hover,
html[data-theme="dark"] .platform-admin-page .support-ticket-queue-btn:focus-visible,
html[data-theme="dark"] .platform-admin-page .support-ticket-queue-btn.is-active,
html[data-theme="dark"] .platform-admin-page .support-ticket-row:hover,
html[data-theme="dark"] .platform-admin-page .support-ticket-row:focus-visible,
html[data-theme="dark"] .platform-admin-page .support-ticket-row.is-active {
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1480px) {
  .platform-admin-page .support-ticket-shell {
    grid-template-columns: 230px minmax(320px, 380px) minmax(0, 1fr);
  }

  .platform-admin-page .support-ticket-shell.is-workspace-closed {
    grid-template-columns: 230px minmax(0, 1fr);
  }
}

@media (max-width: 1320px) {
  .platform-admin-page .support-ticket-overview {
    grid-template-columns: 1fr;
  }

  .platform-admin-page .support-ticket-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .platform-admin-page .support-ticket-workspace {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1060px) {
  .platform-admin-page .support-ticket-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-admin-page .support-ticket-shell,
  .platform-admin-page .support-ticket-workspace-body {
    grid-template-columns: 1fr;
  }

  .platform-admin-page .support-ticket-shell.is-workspace-closed {
    grid-template-columns: 1fr;
  }

  .platform-admin-page .support-ticket-list-head {
    display: none;
  }

  .platform-admin-page .support-ticket-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .platform-admin-page .support-ticket-row-activity {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .platform-admin-page .support-ticket-row-badges {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .platform-admin-page .support-ticket-overview-stats,
  .platform-admin-page .support-ticket-workspace-stats {
    grid-template-columns: 1fr;
  }

  .platform-admin-page .support-ticket-workspace-aside {
    justify-items: start;
  }

  .platform-admin-page .support-ticket-inbox-head,
  .platform-admin-page .support-ticket-workspace-head,
  .platform-admin-page .support-ticket-detail-topline,
  .platform-admin-page .support-ticket-section-head,
  .platform-admin-page .support-ticket-workspace-aside,
  .platform-admin-page .support-ticket-row-top,
  .platform-admin-page .support-ticket-row-meta,
  .platform-admin-page .support-ticket-message-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .platform-admin-page .support-ticket-row {
    grid-template-columns: 1fr;
  }

  .platform-admin-page .support-ticket-row-avatar {
    display: none;
  }

  .platform-admin-page .support-ticket-row-activity {
    grid-column: auto;
  }

  .platform-admin-page .support-ticket-message,
  .platform-admin-page .support-ticket-message.is-platform {
    grid-template-columns: 1fr;
  }

  .platform-admin-page .support-ticket-message.is-platform .support-ticket-message-avatar {
    order: 0;
  }

  .platform-admin-page .support-ticket-message-avatar {
    width: 38px;
    height: 38px;
  }
}

.checkout-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(95, 124, 255, 0.12), transparent 34%),
    radial-gradient(circle at bottom right, rgba(15, 23, 42, 0.08), transparent 28%),
    linear-gradient(180deg, #f7f9ff 0%, #eef2fb 100%);
}

.checkout-root {
  min-height: 100vh;
  padding: 40px 20px 56px;
}

.checkout-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.checkout-summary-card,
.checkout-payment-card,
.checkout-loading-card {
  border: 1px solid rgba(201, 210, 238, 0.95);
  box-shadow: 0 20px 48px rgba(17, 28, 62, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

.checkout-summary-card {
  position: sticky;
  top: 32px;
  padding: 24px;
}

.checkout-brand-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.checkout-brand-logo,
.checkout-brand-fallback {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  flex: 0 0 auto;
}

.checkout-brand-logo {
  border: 0;
  background: transparent;
  object-fit: contain;
}

.checkout-brand-fallback {
  border: 1px solid #d8e0f6;
  background: #fff;
}

.checkout-brand-fallback {
  display: grid;
  place-items: center;
  color: #29406f;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #eff4ff 0%, #fbfdff 100%);
}

.checkout-brand-copy h1 {
  margin: 4px 0 6px;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.05;
}

.checkout-brand-name {
  margin: 0 0 4px;
  color: #223766;
  font-size: 0.95rem;
  font-weight: 700;
}

.checkout-brand-copy p {
  margin: 0;
  color: #5f6d8f;
}

.checkout-brand-kicker,
.checkout-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #4f67aa;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.checkout-summary-grid {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e7edf9;
  color: #4f5e82;
}

.checkout-summary-row strong {
  color: #182341;
}

.checkout-summary-footnote {
  margin: 20px 0 0;
  color: #66728f;
  font-size: 0.92rem;
}

.checkout-summary-divider {
  margin-top: 20px;
  border-top: 1px solid #e7edf9;
}

.checkout-summary-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
}

.checkout-invoice-choice {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.checkout-invoice-choice-label {
  margin: 0;
  color: #5f6d8f;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checkout-invoice-choice-buttons {
  display: grid;
  gap: 10px;
}

.checkout-invoice-choice-button {
  width: 100%;
  border: 1px solid #d9e1f5;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  color: #314261;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.checkout-invoice-choice-button span {
  color: #5f6d8f;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checkout-invoice-choice-button strong {
  color: #182341;
  font-size: 1rem;
}

.checkout-invoice-choice-button:hover {
  border-color: #bcccf7;
  box-shadow: 0 10px 22px rgba(37, 52, 96, 0.08);
  transform: translateY(-1px);
}

.checkout-invoice-choice-button:disabled {
  cursor: default;
  opacity: 0.72;
  box-shadow: none;
  transform: none;
}

.checkout-invoice-choice-button.is-active {
  border-color: #8ca7ff;
  background: linear-gradient(180deg, #f5f8ff 0%, #eef3ff 100%);
  box-shadow: 0 12px 26px rgba(77, 91, 255, 0.12);
}

.checkout-payment-card {
  padding: 28px;
}

.checkout-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}

.checkout-section-head h2,
.checkout-provider-copy h2,
.checkout-empty-state h2 {
  margin: 6px 0 0;
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  line-height: 1.1;
}

.checkout-provider-copy p,
.checkout-empty-state p {
  color: #5e6a87;
}

.checkout-form,
.checkout-provider-shell,
.checkout-empty-state {
  display: grid;
  gap: 18px;
}

.checkout-static-review {
  gap: 20px;
}

.checkout-static-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.checkout-static-metric {
  padding: 16px 18px;
  border: 1px solid #dde5f7;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  display: grid;
  gap: 8px;
}

.checkout-static-metric span {
  color: #5f6d8f;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checkout-static-metric strong {
  color: #182341;
  font-size: 1.15rem;
}

.checkout-static-metric.is-primary {
  border-color: #c8d5ff;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.03) 100%);
}

.checkout-inline-note {
  margin: 0;
  color: #5f6d8f;
  line-height: 1.65;
}

.checkout-field-note {
  margin: -6px 0 0;
  color: #5f6d8f;
  font-size: 0.92rem;
  line-height: 1.6;
}

.checkout-session-hints {
  display: grid;
  gap: 14px;
}

.checkout-session-hint {
  padding: 16px 18px;
  border: 1px solid #dde5f7;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  display: grid;
  gap: 8px;
}

.checkout-session-hint span {
  color: #5f6d8f;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checkout-session-hint strong {
  color: #182341;
  font-size: 1.02rem;
}

.checkout-session-hint p {
  margin: 0;
  color: #5f6d8f;
  line-height: 1.6;
}

.checkout-form label,
.checkout-provider-shell label {
  display: grid;
  gap: 8px;
  color: #33405d;
  font-weight: 600;
}

.checkout-form input,
.checkout-form select,
.checkout-provider-shell input,
.checkout-provider-shell select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d7deef;
  border-radius: 14px;
  background: #fff;
  color: #15203f;
  font: inherit;
}

.checkout-form input:focus,
.checkout-form select:focus,
.checkout-provider-shell input:focus,
.checkout-provider-shell select:focus {
  outline: 2px solid rgba(77, 91, 255, 0.18);
  border-color: #7f8ff0;
}

.checkout-status {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #d9e4ff;
  background: #f6f9ff;
  color: #395182;
}

.checkout-status p {
  margin: 0;
}

.checkout-status.is-error {
  border-color: #f0cbd4;
  background: #fff4f6;
  color: #933b55;
}

.checkout-actions {
  margin-top: 4px;
}

.checkout-embedded-shell,
.checkout-square-shell {
  min-height: 420px;
  padding: 18px;
  border: 1px solid #dde5f7;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.checkout-embedded-shell {
  display: block;
  overflow: hidden;
  color-scheme: light;
}

.checkout-embedded-shell [data-role="checkout-embedded-host"] {
  width: 100%;
}

.checkout-embedded-frame {
  width: 100%;
  min-height: 760px;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  color-scheme: light;
  box-shadow: 0 18px 42px rgba(31, 42, 86, 0.06);
}

.checkout-embedded-frame iframe,
.checkout-square-shell iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  background: #fff;
  color-scheme: light;
}

.checkout-embedded-frame iframe {
  min-height: 760px;
}

.checkout-payment-element-shell {
  position: relative;
  width: 100%;
  min-height: 340px;
  padding: 22px;
  border: 1px solid #dde5f7;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color-scheme: light;
  overflow: hidden;
}

.checkout-payment-element-shell #checkout-payment-element {
  transition: opacity 0.18s ease;
}

.checkout-payment-element-shell.is-loading #checkout-payment-element {
  opacity: 0;
  pointer-events: none;
}

.checkout-payment-element-shell.is-ready #checkout-payment-element {
  opacity: 1;
}

.checkout-payment-element-placeholder {
  position: absolute;
  inset: 22px;
  z-index: 2;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border: 1px solid #e0e7f8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(31, 42, 86, 0.06);
}

.checkout-payment-element-shell.is-ready .checkout-payment-element-placeholder {
  display: none;
}

.checkout-payment-element-placeholder-icon,
.checkout-payment-element-placeholder-line,
.checkout-payment-element-placeholder-field,
.checkout-payment-element-placeholder-grid span {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf2ff 0%, #f8faff 45%, #e8eefc 100%);
  background-size: 220% 100%;
  animation: checkoutSkeletonShimmer 1.2s ease-in-out infinite;
}

.checkout-payment-element-placeholder-icon {
  width: 44px;
  height: 32px;
  border-radius: 12px;
}

.checkout-payment-element-placeholder-line {
  width: min(100%, 360px);
  height: 16px;
}

.checkout-payment-element-placeholder-line.is-short {
  width: 190px;
}

.checkout-payment-element-placeholder-field {
  width: 100%;
  height: 54px;
  border-radius: 14px;
}

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

.checkout-payment-element-placeholder-grid span {
  height: 54px;
  border-radius: 14px;
}

@keyframes checkoutSkeletonShimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

.checkout-legal-field {
  align-items: start;
  grid-template-columns: 20px minmax(0, 1fr);
}

.checkout-legal-field input {
  min-height: 20px;
  width: 20px;
  margin-top: 2px;
}

.checkout-legal-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid #dbe3f7;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.checkout-legal-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.checkout-legal-panel-copy h3 {
  margin: 6px 0 0;
  color: #182341;
  font-size: 1.15rem;
  line-height: 1.2;
}

.checkout-legal-panel-copy p {
  margin: 8px 0 0;
  color: #5f6d8f;
  line-height: 1.6;
}

.checkout-legal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #d6def6;
  background: #f4f7ff;
  color: #40579a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout-legal-docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  align-items: start;
}

.checkout-legal-doc {
  border: 1px solid #d9e2f7;
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
}

.checkout-legal-doc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: #23386e;
  font-size: 0.95rem;
  font-weight: 700;
}

.checkout-legal-doc summary::-webkit-details-marker {
  display: none;
}

.checkout-legal-doc summary::after {
  content: "+";
  color: #5871b3;
  font-size: 1.1rem;
  line-height: 1;
  flex: 0 0 auto;
}

.checkout-legal-doc[open] {
  border-color: #c8d5ff;
  box-shadow: 0 10px 24px rgba(38, 55, 106, 0.08);
}

.checkout-legal-doc[open] summary::after {
  content: "-";
}

.checkout-legal-doc-body {
  padding: 0 16px 16px;
  border-top: 1px solid #edf1fb;
  color: #44526f;
  font-size: 0.92rem;
  line-height: 1.6;
  max-height: 240px;
  overflow: auto;
}

.checkout-legal-doc-body p,
.checkout-legal-doc-body ul,
.checkout-legal-doc-body ol {
  margin: 0 0 10px;
}

.checkout-legal-doc-body p:last-child,
.checkout-legal-doc-body ul:last-child,
.checkout-legal-doc-body ol:last-child {
  margin-bottom: 0;
}

.checkout-legal-doc-body ul,
.checkout-legal-doc-body ol {
  padding-left: 18px;
}

.checkout-legal-doc-body li + li {
  margin-top: 4px;
}

.checkout-legal-doc-body a,
.checkout-legal-links a {
  color: #324fb2;
  text-decoration: underline;
}

.checkout-legal-links-shell {
  padding: 14px 16px;
  border: 1px dashed #d6dff5;
  border-radius: 18px;
  background: rgba(246, 249, 255, 0.9);
}

.checkout-legal-links-shell p {
  margin: 0;
  color: #40527c;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.checkout-legal-empty {
  margin: 0;
  color: #5f6d8f;
  line-height: 1.6;
}

.checkout-legal-field.checkout-legal-consent {
  gap: 0 12px;
  padding: 14px 16px;
  border: 1px solid #d4ddf7;
  border-radius: 18px;
  background: #ffffff;
  color: #2f3f62;
}

.checkout-legal-field.checkout-legal-consent:hover {
  border-color: #bcccf7;
  background: #fcfdff;
}

.checkout-legal-consent-copy {
  display: inline-block;
  color: #2d3f78;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

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

  .checkout-summary-card {
    position: static;
  }

  .checkout-static-metrics {
    grid-template-columns: 1fr;
  }

  .checkout-legal-panel-head {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .checkout-root {
    padding: 20px 14px 36px;
  }

  .checkout-payment-card,
  .checkout-summary-card,
  .checkout-loading-card {
    padding: 20px;
    border-radius: 22px;
  }

  .checkout-brand-row {
    align-items: start;
  }

  .checkout-legal-docs {
    grid-template-columns: 1fr;
  }

  .checkout-legal-panel,
  .checkout-legal-doc summary,
  .checkout-legal-links-shell,
  .checkout-legal-field.checkout-legal-consent {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Integrations minimal refresh */
.app-store-catalog-section {
  gap: 12px;
  border-color: #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
}

.app-store-section-toolbar h3 {
  color: #172033;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.app-store-section-description {
  color: #647089;
  font-size: 13px;
  max-width: 720px;
}

.app-store-catalog-grid {
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.app-store-catalog-card {
  border-color: #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  padding: 14px;
  gap: 12px;
  box-shadow: none;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.app-store-catalog-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.app-store-catalog-card.is-enabled {
  border-color: #cfd8e7;
  box-shadow: none;
}

.app-store-catalog-card.is-coming-soon {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.app-store-logo-banner {
  min-height: 88px;
  border-radius: 14px;
  border-color: #e7edf6;
  background: #f8fafc !important;
  color: var(--logo-bg, #334155) !important;
  padding: 14px 16px;
}

.app-store-logo-image-banner {
  max-height: 52px;
  max-width: 78%;
}

.app-store-logo-wordmark {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
}

.app-store-logo-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 12px;
  box-shadow: none;
}

.app-store-logo-image-badge {
  max-width: 28px;
  max-height: 28px;
}

.app-store-catalog-title {
  color: #182134;
  font-size: 17px;
  font-weight: 800;
}

.app-store-catalog-subtitle {
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.app-store-status-chip {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.app-store-status-chip.is-enabled {
  background: #ecfdf3;
  color: #027a48;
}

.app-store-status-chip.is-disabled {
  background: #f2f4f7;
  color: #475467;
}

.app-store-status-chip.is-coming-soon {
  border: 0;
  background: #fff7ed;
  color: #b45309;
}

.app-store-coming-soon-overlay {
  top: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.74);
  font-size: 10px;
}

.app-store-detail-hero {
  margin: 8px 0 16px;
  padding: 14px;
  border: 1px solid #e5ebf5;
  border-radius: 16px;
  background: #f8fafc;
  align-items: center;
}

.app-store-detail-hero-copy {
  gap: 5px;
}

.app-store-detail-hero-copy p {
  color: #475467;
  font-size: 13px;
}

.app-store-detail-hero-copy strong {
  color: #1d2939;
}

.integration-card-meta {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #e5ebf5;
  border-radius: 14px;
  background: #f8fafc;
}

.integration-settings-card,
.integration-payment-fee-shell {
  border-color: #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
  padding: 18px;
}

.integration-settings-card-heading,
.integration-payment-fee-heading {
  gap: 6px;
}

.integration-settings-card-kicker,
.integration-payment-fee-kicker,
.integration-payment-fee-rate-label,
.integration-payment-fee-advanced-head span {
  color: #667085;
  letter-spacing: 0.09em;
}

.integration-settings-card-heading h3,
.integration-payment-fee-heading h3 {
  color: #182134;
  font-size: 18px;
  font-weight: 800;
}

.integration-settings-card-heading p,
.integration-payment-fee-heading p,
.integration-auth-guide-subtitle {
  color: #667085;
}

.integration-settings-card-stat,
.integration-connection-stat,
.integration-payment-fee-rate-card,
.integration-payment-fee-label-panel,
.integration-payment-fee-custom-panel,
.integration-payment-fee-advanced {
  border-color: #e5ebf5;
  background: #f8fafc;
  box-shadow: none;
}

.integration-payment-fee-toggle-card,
.integration-switch-toggle-card,
.integration-payment-fee-source-card,
.integration-cubicasa-mode-option,
.integration-calendar-sync-options-row {
  border-color: #e5ebf5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}

.integration-payment-fee-toggle-card:hover,
.integration-switch-toggle-card:hover,
.integration-payment-fee-source-card:hover,
.integration-cubicasa-mode-option:hover {
  border-color: #cbd5e1;
  background: #fcfcfd;
  box-shadow: none;
}

.integration-payment-fee-source-card.is-selected,
.integration-payment-fee-source-card:has(input[type="radio"]:checked),
.integration-cubicasa-mode-option.is-selected,
.integration-cubicasa-mode-option:has(input:checked) {
  border-color: #9aa4b2;
  background: #f8fafc;
  box-shadow: none;
}

.integration-payment-fee-toggle-copy strong,
.integration-switch-toggle-copy strong,
.integration-payment-fee-source-copy strong,
.integration-cubicasa-mode-option strong,
.integration-calendar-sync-title {
  color: #182134;
}

.integration-payment-fee-toggle-copy small,
.integration-switch-toggle-copy small,
.integration-payment-fee-source-copy small,
.integration-cubicasa-mode-option small,
.integration-calendar-sync-copy small,
.integration-payment-fee-input > small {
  color: #667085;
}

.integration-payment-fee-toggle-pill,
.integration-switch-toggle-pill {
  padding: 5px 9px;
  background: #f2f4f7;
  color: #475467;
}

.integration-payment-fee-toggle-pill.is-enabled,
.integration-switch-toggle-pill.is-enabled {
  background: #ecfdf3;
  color: #027a48;
}

.integration-payment-fee-toggle-input input[type="checkbox"],
.integration-switch-toggle-input input[type="checkbox"] {
  border-color: #d0d5dd;
  background: #eef2f6;
  box-shadow: none;
}

.integration-payment-fee-toggle-input input[type="checkbox"]:checked,
.integration-switch-toggle-input input[type="checkbox"]:checked {
  border-color: #2563eb;
  background: #2563eb;
}

.integration-payment-fee-source-card input[type="radio"] {
  border-color: #98a2b3;
  box-shadow: none;
}

.integration-payment-fee-source-card input[type="radio"]:checked {
  border-color: #2563eb;
  background:
    radial-gradient(circle at center, #2563eb 0 38%, transparent 42%),
    #ffffff;
}

.integration-setup-tab.is-active {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #1d2939;
  box-shadow: none;
}

.integration-auth-guide-panel {
  border-color: #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
}

.platform-oauth-card {
  border-color: #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
}

.platform-oauth-provider-banner {
  min-height: 88px;
  border-radius: 14px;
  background: #f8fafc !important;
  color: var(--logo-bg, #334155) !important;
}

html[data-theme="dark"] .app-store-catalog-section,
html[data-theme="dark"] .app-store-catalog-card,
html[data-theme="dark"] .integration-settings-card,
html[data-theme="dark"] .integration-payment-fee-shell,
html[data-theme="dark"] .platform-oauth-card,
html[data-theme="dark"] .integration-auth-guide-panel {
  border-color: #2e3c56;
  background: #111b2e;
  box-shadow: none;
}

html[data-theme="dark"] .app-store-logo-banner,
html[data-theme="dark"] .platform-oauth-provider-banner,
html[data-theme="dark"] .app-store-detail-hero,
html[data-theme="dark"] .integration-card-meta,
html[data-theme="dark"] .integration-settings-card-stat,
html[data-theme="dark"] .integration-connection-stat,
html[data-theme="dark"] .integration-payment-fee-rate-card,
html[data-theme="dark"] .integration-payment-fee-label-panel,
html[data-theme="dark"] .integration-payment-fee-custom-panel,
html[data-theme="dark"] .integration-payment-fee-advanced,
html[data-theme="dark"] .integration-payment-fee-toggle-card,
html[data-theme="dark"] .integration-switch-toggle-card,
html[data-theme="dark"] .integration-payment-fee-source-card,
html[data-theme="dark"] .integration-cubicasa-mode-option,
html[data-theme="dark"] .integration-calendar-sync-options-row {
  border-color: #33445f;
  background: #17243a !important;
  box-shadow: none;
}

html[data-theme="dark"] .app-store-catalog-title,
html[data-theme="dark"] .integration-settings-card-heading h3,
html[data-theme="dark"] .integration-payment-fee-heading h3,
html[data-theme="dark"] .integration-payment-fee-toggle-copy strong,
html[data-theme="dark"] .integration-switch-toggle-copy strong,
html[data-theme="dark"] .integration-payment-fee-source-copy strong,
html[data-theme="dark"] .integration-cubicasa-mode-option strong,
html[data-theme="dark"] .integration-calendar-sync-title,
html[data-theme="dark"] .app-store-detail-hero-copy strong {
  color: #eef4ff;
}

html[data-theme="dark"] .app-store-catalog-subtitle,
html[data-theme="dark"] .app-store-section-description,
html[data-theme="dark"] .integration-settings-card-heading p,
html[data-theme="dark"] .integration-payment-fee-heading p,
html[data-theme="dark"] .integration-payment-fee-toggle-copy small,
html[data-theme="dark"] .integration-switch-toggle-copy small,
html[data-theme="dark"] .integration-payment-fee-source-copy small,
html[data-theme="dark"] .integration-cubicasa-mode-option small,
html[data-theme="dark"] .integration-calendar-sync-copy small,
html[data-theme="dark"] .app-store-detail-hero-copy p {
  color: #aab7cf;
}

html[data-theme="dark"] .app-store-status-chip.is-disabled,
html[data-theme="dark"] .integration-payment-fee-toggle-pill.is-disabled,
html[data-theme="dark"] .integration-switch-toggle-pill.is-disabled {
  background: #243146;
  color: #cbd5e1;
}

html[data-theme="dark"] .app-store-status-chip.is-enabled,
html[data-theme="dark"] .integration-payment-fee-toggle-pill.is-enabled,
html[data-theme="dark"] .integration-switch-toggle-pill.is-enabled {
  background: rgba(16, 185, 129, 0.16);
  color: #86efac;
}

/* Keep the minimal card refresh, but preserve each integration's brand color. */
.app-store-logo-banner,
.platform-oauth-provider-banner {
  background: var(--logo-bg, #3f4a76) !important;
  color: var(--logo-fg, #ffffff) !important;
  border-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .app-store-logo-banner,
html[data-theme="dark"] .platform-oauth-provider-banner {
  background: var(--logo-bg, #3f4a76) !important;
  color: var(--logo-fg, #ffffff) !important;
  border-color: rgba(148, 163, 184, 0.22);
}