:root {
  --bg: #f4f6f9;
  --bg-top: #f8fafc;
  --bg-bottom: #eef2f6;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-2: #f1f5f9;
  --input-bg: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #1e293b;
  --accent-soft: #f1f5f9;
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: #ffffff;
  --btn-primary-border: var(--accent);
  --accent-blue: #2563eb;
  --accent-blue-soft: #eff6ff;
  --green: #047857;
  --green-bg: #ecfdf5;
  --green-soft: #d1fae5;
  --gold: #b45309;
  --gold-soft: #fffbeb;
  --violet: #6d28d9;
  --violet-soft: #f5f3ff;
  --sidebar: 280px;
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.32s;
  --scrollbar-size: 10px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(15, 23, 42, 0.16);
  --scrollbar-thumb-hover: rgba(15, 23, 42, 0.28);
  --ui-scale: 1.1;
  --course-panel-scale: 1;
}

/* Desktop: roomier type and controls (mobile keeps 1.1). */
@media (min-width: 901px) {
  :root {
    --ui-scale: 1.22;
  }
}

/* Bold modern visual refresh for dark mode. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07090f;
  --bg-top: #0d111c;
  --bg-bottom: #05070c;
  --surface: #11151f;
  --surface-elevated: #161b27;
  --surface-2: #1c2230;
  --input-bg: #151a25;
  --text: #f7f8fb;
  --muted: #9aa3b2;
  --border: #303746;
  --accent: #18e07f;
  --accent-soft: rgba(24, 224, 127, 0.12);
  --btn-primary-bg: #18e07f;
  --btn-primary-fg: #042414;
  --btn-primary-border: #18e07f;
  --accent-blue: #6b7cff;
  --accent-blue-soft: rgba(107, 124, 255, 0.14);
  --green: #18e07f;
  --green-bg: rgba(24, 224, 127, 0.12);
  --green-soft: rgba(24, 224, 127, 0.18);
  --gold: #ffa033;
  --gold-soft: rgba(255, 160, 51, 0.13);
  --violet: #9b7cff;
  --violet-soft: rgba(155, 124, 255, 0.14);
  --red: #ff3355;
  --font: "DM Sans", "Proxima Nova Rg", system-ui, sans-serif;
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 16px 34px rgba(0, 0, 0, 0.36);
  --shadow-hover: 0 20px 42px rgba(0, 0, 0, 0.44);
  --scrollbar-thumb: rgba(194, 200, 255, 0.18);
  --scrollbar-thumb-hover: rgba(194, 200, 255, 0.34);
}

body,
html[data-theme="dark"] body {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 46%, var(--bg-bottom) 100%);
  color: var(--text);
}

body > #page-body,
#page-body {
  padding-top: 32px;
}

#page-body > h1,
.page-hero h1,
.dash-page-hero h1 {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

#page-body > .lead,
.page-hero .lead,
.section-desc,
.muted {
  color: var(--muted);
}

.page-label {
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border));
  border-radius: 999px;
}

.page-label .ico {
  color: var(--green);
}

.card,
.tool-card,
.role-card,
.settings-card,
.survey-choice-btn,
.telegram-embed-card,
.accounts-survey,
.owner-card,
.contributors-card {
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card:hover,
.tool-card:hover,
.role-card:hover,
.lead-card:hover {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  box-shadow: var(--shadow-md);
}

.btn,
.btn-primary,
.step-footer a.next,
.survey-action-link.btn,
a.btn:not(.secondary) {
  min-height: 42px;
  border-radius: 999px;
  background: var(--green);
  border-color: var(--green);
  color: #032314 !important;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.btn:not(.secondary):hover,
.btn-primary:hover,
.step-footer a.next:hover {
  background: #26f08d;
  border-color: #26f08d;
  box-shadow: var(--shadow-hover);
}

.btn.secondary,
.step-footer a:not(.next),
a.btn.secondary {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text) !important;
  box-shadow: var(--shadow);
}

.btn.secondary:hover,
.step-footer a:not(.next):hover {
  background: color-mix(in srgb, var(--surface-2) 84%, var(--green) 16%);
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
}

.pill,
.settings-segment,
.lf-pill-toggle,
.lf-website-toggle {
  border-radius: 999px;
  background: var(--input-bg);
  border-color: var(--border);
}

.pill.active,
.settings-segment-btn.active {
  background: var(--green);
  color: #032314;
  border-color: var(--green);
}

input:not(.site-agreement-check):not(.links-hub-search):not(.lf-search-input):not(.owner-console-inbox-search),
select,
textarea,
.field input,
.field select,
.field textarea,
.feedback-form input,
.feedback-form textarea,
.bug-report-form input,
.bug-report-form textarea,
.bug-report-form select,
.payout-link-input,
.lf-workflow-select,
.dash-sale-input,
.dash-sale-money {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

#site-lock input,
#site-lock .site-lock-input {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
  color-scheme: light;
  outline: none;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder,
.dash-sale-input::placeholder,
.dash-sale-money-input::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.lf-workflow-select:focus-visible,
.dash-sale-money:focus-within,
.dash-sale-input:focus {
  border-color: var(--green);
  outline: 2px solid color-mix(in srgb, var(--green) 55%, transparent);
  outline-offset: 2px;
  box-shadow: none;
}

.links-hub-search:focus,
.lf-search-input:focus,
.owner-console-inbox-search:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

#site-lock input:focus,
#site-lock .site-lock-input:focus {
  border-color: #9ca3af !important;
  outline: none !important;
  box-shadow: none !important;
}

.sidebar-panel,
html[data-theme="dark"] .sidebar-panel {
  background:
    linear-gradient(180deg, rgba(27, 32, 56, 0.98), rgba(18, 22, 41, 0.98)),
    var(--surface);
  border-right-color: var(--border);
  box-shadow: 12px 0 44px rgba(0, 0, 0, 0.28);
}

.brand {
  padding: 8px;
  border-radius: 20px;
}

.brand:hover {
  background: var(--accent-soft);
}

.brand-mark--icon,
.brand-mark:has(.ico-brand) {
  border-radius: 18px;
  background: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  box-shadow: var(--shadow);
}

.brand-text strong {
  color: var(--text);
  font-weight: 800;
}

.brand-sub,
.sidebar-rep-meta {
  color: var(--muted);
}

.sidebar-rep {
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: 18px;
}

.nav-start,
html[data-theme="dark"] .nav-start {
  background: var(--green);
  border: 0;
  color: #032314 !important;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.nav-start .sub {
  color: rgba(3, 35, 20, 0.68);
  opacity: 1;
}

.nav-link,
.nav-section-toggle {
  border-radius: 16px;
  color: var(--muted);
}

.nav-link:hover,
.nav-section-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-link.active,
html[data-theme="dark"] .nav-link.active {
  background: var(--green-bg);
  color: var(--green) !important;
  border: none;
  box-shadow: none;
}

.nav-link.active .ico-nav,
html[data-theme="dark"] .nav-link.active .ico-nav {
  color: var(--green);
}

.nav-link .step-badge,
html[data-theme="dark"] .nav-link.active .step-badge:not(.done-badge) {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 10px;
}

.nav-link.active .step-badge:not(.done-badge) {
  background: var(--green);
  color: #032314;
  border-color: var(--green);
}

.nav-section {
  color: color-mix(in srgb, var(--muted) 82%, var(--green) 18%);
}

.menu-btn,
html[data-theme="dark"] .menu-btn {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  border-radius: 18px;
}

.sign-out-float {
  display: none !important;
}

.refresh-float {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 99990;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  line-height: 1.2;
  color: var(--text);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
}
.refresh-float:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-blue, #2563eb) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft, #dbeafe) 55%, var(--surface));
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.refresh-float:active:not(:disabled) {
  transform: translateY(1px);
}
.refresh-float:disabled,
.refresh-float.is-busy {
  cursor: wait;
  opacity: 0.85;
}
.refresh-float-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.refresh-float.is-busy .refresh-float-icon {
  animation: refresh-float-spin 0.75s linear infinite;
}
@keyframes refresh-float-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .refresh-float {
    padding: 9px !important;
    min-width: 38px;
    min-height: 38px;
    justify-content: center;
    gap: 0;
  }
  .refresh-float .refresh-float-label {
    display: none !important;
  }
}

body[data-page="home"] #page-body {
  max-width: 1180px;
}

.dash-header {
  margin-bottom: 28px;
}

.dash-page-hero {
  padding: 28px 30px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--surface-elevated), var(--surface));
  box-shadow: var(--shadow);
}

.dash-quicklinks {
  gap: 12px;
}

.dash-quicklink {
  min-height: 54px;
  padding: 13px 15px;
  border-radius: 18px;
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.dash-quicklink .ico,
.dash-quicklink .ico-nav {
  color: var(--green);
}

.dash-quicklink:hover {
  border-color: color-mix(in srgb, var(--green) 32%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 82%, var(--green) 18%);
}

.dash-board {
  overflow: hidden;
  border-radius: 22px;
}

.dash-board-performance,
html[data-theme="dark"] .dash-board-performance {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--border);
}

.dash-goal-ring-track {
  stroke: rgba(194, 200, 255, 0.12);
}

.dash-goal-ring-fill {
  stroke: var(--green);
  filter: none;
}

.dash-goal-ring-pct,
.dash-tracker-stat-val,
.dash-goal-btn {
  color: var(--text);
}

.dash-tracker-label,
.dash-sale-label,
.dash-tracker-stat-lbl,
.dash-goal-edit-hint {
  color: var(--muted);
}

.dash-stat-chip,
html[data-theme="dark"] .dash-stat-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.dash-stat-chip--earn .dash-tracker-stat-val {
  color: var(--green);
}

.dash-board-log,
.dash-board-history,
.dash-pending-island.dash-pending-section,
html[data-theme="dark"] .dash-sale-form {
  background: color-mix(in srgb, var(--surface) 90%, var(--surface-2));
}

.dash-board-log {
  border-right-color: var(--border);
}

.dash-board-work-title {
  color: var(--text);
  font-weight: 800;
}

.dash-sale-form {
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: 22px;
}

.dash-sale-money-symbol {
  color: var(--green);
  border-right-color: var(--border);
}

.dash-pending-count,
.deals-count,
html[data-theme="dark"] .dash-pending-count {
  color: var(--green);
  background: var(--green-bg);
  border-color: color-mix(in srgb, var(--green) 25%, var(--border));
}


.leads-page {
  max-width: 1180px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.leads-toolbar {
  padding: 18px;
  gap: 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--surface-elevated), var(--surface));
}

.leads-toolbar-head,
.leads-toolbar-categories {
  border-color: var(--border);
}

.leads-metric strong {
  color: var(--text);
}

.leads-metric-called strong,
.lf-category-available {
  color: var(--green);
}

.lf-refresh-btn,
html[data-theme="dark"] .lf-refresh-btn,
.lf-workflow-select {
  min-height: 42px;
  border-radius: 999px;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.lf-refresh-btn:hover:not(:disabled),
html[data-theme="dark"] .lf-refresh-btn:hover:not(:disabled),
.lf-workflow-select:hover {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 88%, var(--green) 12%);
}

.lf-toggle-btn {
  border-radius: 999px;
  color: var(--muted);
}

.lf-toggle-btn:hover:not(.active),
html[data-theme="dark"] .lf-toggle-btn:hover:not(.active) {
  background: var(--surface-2);
  color: var(--text);
}

.lf-toggle-btn.active,
html[data-theme="dark"] .lf-toggle-btn.active {
  background: var(--green);
  color: #032314;
  box-shadow: var(--shadow);
}

.leads-chip {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

.leads-chip:hover,
.leads-chip.is-active {
  color: var(--green);
  background: var(--green-bg);
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  box-shadow: none;
}

.lead-card {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface));
  border-color: var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.lead-card:hover {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
}

.lead-card-name {
  color: var(--text);
  font-weight: 800;
}

.lf-card-subline,
.lf-info-text,
.lf-info-text--muted,
.lf-detail-val-missing,
.lf-info-text.lf-detail-val-missing {
  color: var(--muted);
}

.lf-info-link {
  color: var(--text);
}

.lf-info-link:hover {
  color: var(--green);
}

.lf-avatar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.lf-info-icon,
.lf-menu-btn,
html[data-theme="dark"] .lf-menu-btn {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

.lf-menu-btn:hover,
html[data-theme="dark"] .lf-menu-btn:hover,
.lf-card-menu-wrap.is-open .lf-menu-btn,
html[data-theme="dark"] .lf-card-menu-wrap.is-open .lf-menu-btn {
  background: var(--green-bg);
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
}

.lf-menu-panel {
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}

.lf-menu-item {
  color: var(--text);
}

.lf-menu-item:hover,
.lf-menu-item.is-active {
  background: var(--green-bg);
  color: var(--green);
}

.lf-menu-item-danger,
.lf-menu-item-danger:hover,
.lf-menu-item-danger.is-active {
  color: #ff8da0;
}

.lf-action-btn,
html[data-theme="dark"] .lf-action-btn {
  border-radius: 999px;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.lf-action-btn:hover:not(.is-disabled):not(.lf-action-builder),
html[data-theme="dark"] .lf-action-btn:hover:not(.is-disabled):not(.lf-action-builder) {
  border-color: color-mix(in srgb, var(--green) 35%, var(--border));
  background: color-mix(in srgb, var(--green-bg) 55%, var(--surface-2));
  color: var(--text);
}

.lf-action-builder:not(.is-disabled) {
  background: linear-gradient(180deg, #3aff9b, var(--green));
  border-color: var(--green);
  color: #032314;
}

.lf-load-more-btn {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  color: var(--green);
}

.lf-load-more-btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: #032314;
}

@media (max-width: 900px) {
  body > #page-body,
  #page-body {
    padding-top: 72px;
  }

  .sidebar-panel {
    border-radius: 0 28px 28px 0;
  }
}

@media (max-width: 640px) {
  .dash-page-hero,
  .leads-toolbar,
  .card,
  .lead-card {
    border-radius: 20px;
  }
}

/* PIN lock - hide app until PIN (also before lock.js runs) */
body:not([data-public="1"]):not(.site-unlocked) {
  background: #ffffff !important;
  color-scheme: light;
}
body:not([data-public="1"]):not(.site-unlocked) #page-body,
body:not([data-public="1"]):not(.site-unlocked) #shell,
body:not([data-public="1"]):not(.site-unlocked) #main-content,
body:not([data-public="1"]):not(.site-unlocked) .top-actions-float,
body:not([data-public="1"]):not(.site-unlocked) .sign-out-float,
body:not([data-public="1"]):not(.site-unlocked) .refresh-float {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}
html.site-lock-active {
  overflow: hidden;
  background: #ffffff !important;
  color-scheme: light;
}
html.site-lock-active body {
  background: #ffffff !important;
  color: #111827 !important;
  color-scheme: light;
}
html.site-lock-active #page-body,
html.site-lock-active #shell,
html.site-lock-active #main-content,
html.site-lock-active .top-actions-float,
html.site-lock-active .sign-out-float,
html.site-lock-active .refresh-float {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}
html.site-lock-active body[data-legal-page="1"] #page-body,
html.site-lock-active body[data-legal-page="1"] #shell,
html.site-lock-active body[data-legal-page="1"] #main-content {
  display: revert !important;
  visibility: visible !important;
  pointer-events: auto !important;
  user-select: auto !important;
}
#site-lock {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 16px 0;
  background: #ffffff !important;
  color: #111827 !important;
  color-scheme: light;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  /* Keep covering the app while unlocking so a dark body cannot flash through. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#site-lock.site-lock-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-lock-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 300px);
  padding: 0 24px;
  margin: 0 auto;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
}
.site-lock-inner-locked {
  width: min(100%, 340px);
}
.site-lock-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  object-fit: cover;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 14px 32px rgba(15, 23, 42, 0.12),
    0 4px 12px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}
.site-lock-hint {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #6b7280 !important;
}
.site-lock-form {
  margin: 0;
  display: flex;
  justify-content: center;
}
.site-lock-input {
  width: 148px;
  max-width: 100%;
  padding: 11px 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-align: center;
  font-family: var(--font, system-ui, sans-serif);
  color: #111827 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px;
  box-shadow: none !important;
  outline: none;
  color-scheme: light;
  transition: border-color 0.2s ease;
  -webkit-text-fill-color: #111827;
}
.site-lock-input::placeholder {
  letter-spacing: 0.06em;
  font-size: 14px;
  font-weight: 500;
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af;
  opacity: 1;
}
.site-lock-input:focus {
  border-color: #9ca3af !important;
  box-shadow: none !important;
  outline: none;
  background: #ffffff !important;
  color: #111827 !important;
}
.site-lock-input-disabled,
.site-lock-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
  transform: none;
}

#site-lock .site-lock-input:-webkit-autofill,
#site-lock .site-lock-input:-webkit-autofill:hover,
#site-lock .site-lock-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
}
.site-lock-inner-locked .site-lock-error {
  color: #b91c1c;
  font-weight: 600;
}

/* One-time agreement gate · sits above the PIN lock (#site-lock = 100000). */
#site-agreement {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #0f172a !important;
  color-scheme: light;
  transition: opacity 0.24s ease, visibility 0.24s ease;
  -webkit-font-smoothing: antialiased;
}
#site-agreement.site-agreement-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-agreement-card {
  width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 24px 22px;
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 18px;
  box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.35);
  animation: site-agreement-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-agreement-brand {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 0 12px;
}
.site-agreement-logo {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 15px;
}
.site-agreement-logo--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #2563eb;
}
.site-agreement-logo--fallback svg {
  width: 28px;
  height: 28px;
}
.site-agreement-verified {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.28));
}
.site-agreement-verified svg,
.site-agreement-verified img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.site-agreement-company {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a !important;
}
.site-agreement-trust {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 16px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2563eb !important;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
}
.site-agreement-trust svg {
  width: 12px;
  height: 12px;
}
.site-agreement-text {
  margin: 14px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280 !important;
  max-width: 260px;
}
.site-agreement-docs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  margin-bottom: 14px;
}
.site-agreement-doc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f172a !important;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.site-agreement-doc-btn:hover {
  border-color: #cbd5e1;
  background: #f9fafb;
}
.site-agreement-doc-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.site-agreement-doc-ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #94a3b8;
}
.site-agreement-doc-ext svg {
  width: 13px;
  height: 13px;
}
.site-agreement-doc-btn.is-read .site-agreement-doc-ext {
  color: #86b89a;
}
.site-agreement-doc-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.site-agreement-doc-state svg {
  width: 18px;
  height: 18px;
}
.site-agreement-ico-done {
  color: #16a34a;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.site-agreement-doc-btn.is-read {
  border-color: rgba(22, 163, 74, 0.4);
  background: #f0fdf4;
}
.site-agreement-doc-btn.is-read .site-agreement-ico-done {
  opacity: 1;
  transform: scale(1);
}
.site-agreement-agree {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  text-align: left;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: not-allowed;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.site-agreement-agree.is-enabled {
  cursor: pointer;
  background: #ffffff;
  border-color: #bfdbfe;
}
.site-agreement-agree-text {
  font-size: 12px;
  line-height: 1.4;
  color: #9ca3af;
  transition: color 0.18s ease;
}
.site-agreement-agree-text strong {
  font-weight: 600;
  color: #6b7280;
}
.site-agreement-agree.is-enabled .site-agreement-agree-text {
  color: #374151;
}
.site-agreement-agree.is-enabled .site-agreement-agree-text strong {
  color: #0f172a;
}
#site-agreement input.site-agreement-check {
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  color: #ffffff !important;
  color-scheme: light;
}
#site-agreement .site-agreement-agree.is-enabled .site-agreement-check {
  border-color: #93c5fd !important;
}
#site-agreement .site-agreement-check:checked {
  background: #2563eb !important;
  border-color: #2563eb !important;
}
#site-agreement .site-agreement-agree.is-confirming .site-agreement-check {
  background: #16a34a !important;
  border-color: #16a34a !important;
}
.site-agreement-check {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 6px;
  background: #ffffff !important;
  accent-color: #2563eb;
  color: #ffffff !important;
  display: grid;
  place-content: center;
  cursor: not-allowed;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.site-agreement-agree.is-enabled .site-agreement-check {
  cursor: pointer;
  border-color: #93c5fd !important;
}
.site-agreement-check::after {
  content: "";
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border-style: solid !important;
  border-color: #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  background: transparent !important;
  transform: rotate(45deg) scale(0);
  transition: transform 0.22s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.site-agreement-check:checked {
  background: #2563eb !important;
  border-color: #2563eb !important;
  transform: scale(1.06);
}
.site-agreement-check:checked::after {
  transform: rotate(45deg) scale(1);
}
.site-agreement-agree.is-confirming {
  background: #f0fdf4;
  border-color: rgba(22, 163, 74, 0.45);
}
.site-agreement-agree.is-confirming .site-agreement-check {
  background: #16a34a !important;
  border-color: #16a34a !important;
}
.site-agreement-agree.is-confirming .site-agreement-agree-text,
.site-agreement-agree.is-confirming .site-agreement-agree-text strong {
  color: #166534;
}
@keyframes site-agreement-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-agreement-card {
    animation: none;
  }
}
.site-lock-error {
  margin: 14px 0 0;
  font-size: 12px;
  color: #b45309;
  text-align: center;
  line-height: 1.45;
}
.site-lock-shake .site-lock-input {
  animation: site-lock-shake 0.42s ease;
}
@keyframes site-lock-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* While a theme/color preference is being applied, freeze all transitions so the
   UI repaints in one clean step instead of an uneven, glitchy color sweep. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}
html {
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  zoom: var(--ui-scale, 1);
}

/* Firefox and browsers without zoom: scale root type instead */
@supports not (zoom: 1) {
  html {
    font-size: calc(16px * var(--ui-scale, 1));
  }
}
body {
  font-family: var(--font);
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.08), transparent),
    linear-gradient(180deg, var(--bg-top, #f8fafc) 0%, var(--bg) 55%, var(--bg-bottom, #eef2f6) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* iOS Safari often paints a black flash with background-attachment: fixed. */
@media (max-width: 900px) {
  body {
    background-attachment: scroll;
  }
}

@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll;
  }
}

/* Modern scrollbars - Firefox + Chromium/Safari */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Icons */
.ico {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}
.ico-sm { width: 14px; height: 14px; }
.ico-nav { width: 18px; height: 18px; opacity: 0.85; }
.ico-section { width: 12px; height: 12px; opacity: 0.55; margin-right: 4px; vertical-align: -2px; }
.ico-brand { width: 22px; height: 22px; color: #fff; }
.ico-menu { width: 18px; height: 18px; }
.ico-arrow { width: 16px; height: 16px; color: var(--muted); opacity: 0.5; }
.ico-inline { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--muted); }
.ico-label { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: var(--muted); }
.ico-btn { width: 18px; height: 18px; margin-right: 6px; }
.nav-link-text {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.nav-link-out {
  justify-content: space-between;
  gap: 10px;
}
.nav-link-trail {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.nav-link-out .ico-nav-trail {
  width: 15px;
  height: 15px;
}
.nav-link-out:hover .nav-link-trail {
  opacity: 0.85;
  transform: translate(2px, -1px);
}
.nav-link-out.active .nav-link-trail {
  opacity: 0.7;
  color: #fff;
}
.sidebar .nav-link-important:not(.active) {
  color: var(--accent-blue);
}
.sidebar .nav-link-important:not(.active) .nav-link-text {
  font-weight: 700;
}
.sidebar .nav-link-important:not(.active):hover {
  color: #1d4ed8;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast) ease; }
a.no-underline { text-decoration: none; }

/* Important links - bold, blue, underlined */
a.link-bold-blue,
#page-body .lead a[href],
#page-body li a[href]:not(.link-card):not(.btn):not(.owner-action-btn):not(.lf-call-btn):not(.lf-info-link):not(.dash-pending-btn),
#page-body td a[href],
#page-body .setup-list a[href],
#page-body .note a[href],
#page-body p a[href]:not(.btn):not(.link-card):not(.owner-action-btn):not(.no-underline):not(.deal-meta-link):not(.deal-delete):not(.course-channel-chip),
#page-body a[data-config]:not(.link-card):not(.owner-action-btn) {
  color: var(--accent-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.link-bold-blue:hover,
#page-body .lead a[href]:hover,
#page-body li a[href]:not(.link-card):not(.btn):not(.owner-action-btn):not(.lf-call-btn):not(.lf-info-link):hover,
#page-body td a[href]:hover,
#page-body .setup-list a[href]:hover,
#page-body .note a[href]:hover,
#page-body p a[href]:not(.btn):not(.link-card):not(.owner-action-btn):not(.no-underline):not(.deal-meta-link):not(.deal-delete):not(.course-channel-chip):hover,
#page-body a[data-config]:not(.link-card):not(.owner-action-btn):hover {
  color: #1d4ed8;
}
#page-body #onboarding-checklist a[href] {
  color: var(--accent-blue);
  font-weight: 700;
}
.mono-link.link-bold-blue,
#page-body a.mono-link {
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
}
.link-card:hover .link-card-label {
  color: #1d4ed8;
}
.link-card-featured:hover .link-card-label {
  color: #047857;
}

#shell {
  position: relative;
  z-index: 1;
}

.sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow: visible;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.sidebar-panel {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--border);
  padding: 22px 16px 32px;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.03);
}
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  z-index: 3;
}
.sidebar-resize-handle::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 4px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.sidebar-resize-handle:hover::after,
.sidebar-resize-handle:focus-visible::after,
body.sidebar-resizing .sidebar-resize-handle::after {
  background: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body.sidebar-resizing {
  cursor: ew-resize;
  user-select: none;
}
body.sidebar-resizing .main,
body.sidebar-resizing > #page-body,
body.sidebar-resizing .sidebar-panel,
body.sidebar-resizing .menu-btn {
  transition: none !important;
}
.brand {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 0 4px 4px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease;
}
.brand:hover {
  opacity: 0.92;
  background: var(--accent-soft);
}
.brand:active {
  opacity: 0.85;
}
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  padding: 3px;
}
.brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brand-mark .ico-brand {
  width: 22px;
  height: 22px;
  color: #fff;
}
.brand-mark--icon,
.brand-mark:has(.ico-brand) {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  box-shadow: 0 4px 12px rgba(30, 41, 59, 0.25);
  border-color: transparent;
  padding: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brand-text strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.brand-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.sidebar-rep {
  margin: 0 14px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.sidebar-rep strong {
  color: var(--text);
  font-weight: 700;
}
.sidebar-rep-meta {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.sign-out-float {
  display: none !important;
}
.tpl-widget-mode-btn {
  color: var(--text);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  margin: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  line-height: 1.2;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tpl-widget-mode-btn:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft) 55%, var(--surface));
}
.tpl-widget-mode-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: color-mix(in srgb, #4f46e5 70%, #1d4ed8);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}
.tpl-widget-mode-btn.is-active:hover {
  filter: brightness(1.04);
}
.lead-builder-widget-toggle {
  color: var(--text);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
.lead-builder-widget-toggle:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft) 55%, var(--surface));
}
.lead-builder-widget-toggle.is-active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: color-mix(in srgb, #4f46e5 70%, #1d4ed8);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}
.lead-builder-widget-toggle.is-active:hover {
  filter: brightness(1.04);
}
html.site-lock-active .sign-out-float,
html.site-lock-active .refresh-float,
html.site-lock-active .lead-builder-widget {
  display: none !important;
}
.lead-builder-widget {
  position: fixed;
  z-index: 99980;
  display: flex;
  flex-direction: column;
  width: var(--lb-widget-width, 288px);
  height: auto;
  max-width: calc(100vw - 16px);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lead-builder-widget.is-closing {
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  pointer-events: none;
}
.lead-builder-widget.is-dragging,
.lead-builder-widget.is-resizing {
  user-select: none;
}
.lead-builder-widget.is-minimized {
  height: auto !important;
  min-height: 0;
}
.lead-builder-widget.is-minimized .lead-builder-widget-stage,
.lead-builder-widget.is-minimized .lead-builder-widget-resize {
  display: none;
}
.lead-builder-widget-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, var(--border));
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-blue-soft) 45%, var(--surface)) 0%,
    var(--surface) 100%
  );
}
.lead-builder-widget-drag {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  cursor: grab;
  touch-action: none;
}
.lead-builder-widget.is-dragging .lead-builder-widget-drag {
  cursor: grabbing;
}
.lead-builder-widget-grip {
  width: 10px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--muted) 70%, transparent) 1.2px, transparent 1.3px) 0 0 / 5px 5px;
  opacity: 0.75;
  flex-shrink: 0;
}
.lead-builder-widget-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lead-builder-widget-tools {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.lead-builder-widget-tool {
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.lead-builder-widget-tool:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
}
.lead-builder-widget-tool.is-restore {
  font-size: 14px;
  font-weight: 700;
}
.lead-builder-widget-tool--close {
  color: #fff;
  background: #dc2626;
  border-color: #b91c1c;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.lead-builder-widget-tool--close:hover {
  background: #b91c1c;
  border-color: #991b1b;
  color: #fff;
}
.lead-builder-widget-stage {
  position: relative;
  width: var(--lb-widget-width, 288px);
  height: auto;
  max-height: none;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, var(--border));
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: var(--surface);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: height 0.24s ease, max-height 0.24s ease, opacity 0.2s ease;
}
.lead-builder-widget-mount {
  width: 600px;
  transform-origin: top left;
  zoom: var(--lb-widget-scale, 0.48);
  overflow: visible;
  position: relative;
}
.lead-builder-widget-mount .tpl-page-wrap {
  max-width: none;
  margin: 0;
  overflow: visible;
}
.lead-builder-widget-mount .tpl-page-head h1,
.lead-builder-widget-mount .tpl-page-lead,
.lead-builder-widget-mount .tpl-widget-mode-btn {
  display: none !important;
}
.lead-builder-widget-mount .tpl-page-head {
  margin: 0;
  padding: 10px 18px 0;
  gap: 8px;
  justify-content: flex-end;
}
.lead-builder-widget-mount .tpl-autosave-tag {
  display: none !important;
}
.lead-builder-widget-mount .tpl-sent-tag {
  font-size: 10px;
}
.lead-builder-widget-mount .tpl-footnote-block {
  display: none !important;
}
.lead-builder-widget-mount .tpl-box {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 18px 18px;
  overflow: visible;
}
.lead-builder-widget-mount .tpl-row-body,
.lead-builder-widget-mount .tpl-row-fields,
.lead-builder-widget-mount .tpl-row-fields--price {
  overflow: visible;
}
.lead-builder-widget-mount .tpl-price-tip {
  display: none !important;
}
.tpl-price-tip.tpl-price-tip--widget-float {
  position: fixed;
  z-index: 100001;
  display: block !important;
  width: min(280px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 12px 14px;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.22);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  white-space: normal;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
.tpl-price-tip.tpl-price-tip--widget-float[aria-hidden="false"] {
  pointer-events: auto;
}
.tpl-price-tip.tpl-price-tip--widget-float[aria-hidden="true"] {
  display: none !important;
}
html[data-theme="dark"] .tpl-price-tip.tpl-price-tip--widget-float {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.tpl-price-tip.tpl-price-tip--widget-float.is-leaving {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
}
.tpl-price-tip.tpl-price-tip--widget-float.is-above {
  transform: translateX(-50%) translateY(0);
}
.tpl-price-tip.tpl-price-tip--widget-float.is-above.is-leaving {
  transform: translateX(-50%) translateY(4px);
}
.tpl-price-tip.tpl-price-tip--widget-float::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: calc(50% + var(--tip-arrow-offset, 0px));
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: var(--surface);
}
.tpl-price-tip.tpl-price-tip--widget-float.is-above::after {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: var(--surface);
}
.lead-builder-widget-tip-portal {
  display: none !important;
}
.lead-builder-widget-mount .tpl-info-wrap,
.lead-builder-widget-mount .tpl-price-pill {
  position: relative;
  z-index: 1;
}
.lead-builder-widget-mount .tpl-info-btn.is-open,
.lead-builder-widget-mount .tpl-price-pill:hover,
.lead-builder-widget-mount .tpl-price-pill:focus-within {
  z-index: 120;
}
.lead-builder-widget-mount .tpl-info-tooltip {
  display: none !important;
}
.lead-builder-widget-mount .tpl-sent-screen {
  position: absolute;
  inset: 0;
  z-index: 500;
  padding: 16px;
  border-radius: 0 0 10px 10px;
}
.lead-builder-widget-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  touch-action: none;
  border-radius: 0 0 10px 0;
  transition: opacity 0.2s ease;
}
.lead-builder-widget.is-resizing .lead-builder-widget-resize {
  cursor: nwse-resize;
}
.lead-builder-widget-resize::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  opacity: 0.85;
  pointer-events: none;
}
.lead-builder-widget-resize:hover::after,
.lead-builder-widget.is-resizing .lead-builder-widget-resize::after {
  border-color: color-mix(in srgb, var(--accent-blue) 70%, var(--muted));
  opacity: 1;
}
.lead-builder-widget-error {
  margin: 0;
  padding: 16px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}
.lead-builder-widget-scale,
.lead-builder-widget-frame {
  display: none !important;
}
.lead-builder-widget.is-frame-loading .lead-builder-widget-stage::after {
  content: "Loading...";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
body.tpl-embed-mode #shell,
body[data-tpl-embed="1"] #shell,
body.tpl-embed-mode .tpl-page-head,
body[data-tpl-embed="1"] .tpl-page-head,
body.tpl-embed-mode .tpl-page-lead,
body[data-tpl-embed="1"] .tpl-page-lead,
body[data-tpl-embed="1"] .tpl-widget-mode-btn {
  display: none !important;
}
body.tpl-embed-mode #page-body,
body[data-tpl-embed="1"] #page-body {
  max-width: none;
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  max-height: 100vh;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
body.tpl-embed-mode .tpl-page-wrap,
body[data-tpl-embed="1"] .tpl-page-wrap {
  max-width: 560px;
  margin: 0 auto;
}
html[data-tpl-embed="1"],
body[data-tpl-embed="1"] {
  overflow: hidden;
}
html[data-tpl-embed="1"] body:not([data-public="1"]):not(.site-unlocked) #page-body,
html[data-tpl-embed="1"] #page-body,
html.site-lock-active[data-tpl-embed="1"] #page-body,
body[data-tpl-embed="1"] #page-body {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  user-select: auto !important;
}
html[data-tpl-embed="1"] #site-lock,
body[data-tpl-embed="1"] #site-lock,
html[data-tpl-embed="1"] #site-agreement,
body[data-tpl-embed="1"] #site-agreement {
  display: none !important;
}
@media (max-width: 1023px) {
  .tpl-widget-mode-btn,
  .lead-builder-widget {
    display: none !important;
  }
}
.nav-start {
  display: block;
  margin-bottom: 20px;
  padding: 14px 14px;
  background: var(--accent);
  color: #fff !important;
  border-radius: var(--radius);
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s, opacity 0.15s;
}
.nav-start:hover { opacity: 1; transform: translateY(-1px); color: #fff !important; }
.nav-start .sub { display: block; font-size: 11px; font-weight: 400; opacity: 0.75; margin-top: 4px; }

.nav-list { list-style: none; }
.nav-list-standalone {
  margin: 0 0 6px;
  padding: 12px 0 4px;
}
.nav-list li { margin-bottom: 2px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}
.nav-link:hover { background: var(--accent-soft); color: var(--text); transform: scale(1.02); }
.nav-link:active { transform: scale(0.99); }
.nav-link.active { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.nav-link.active:hover { color: #fff; transform: scale(1.02); }
.nav-link.active .ico-nav { opacity: 1; color: #fff; }
.nav-link .step-badge {
  font-family: var(--mono);
  font-size: 10px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-link .step-badge.done-badge {
  background: var(--green-bg);
  color: #10b981;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--green-soft) 70%, var(--border));
  box-shadow: none;
}
.nav-link.active .step-badge { background: rgba(255,255,255,0.18); color: #fff; }
.nav-link.active .step-badge.done-badge {
  background: rgba(255, 255, 255, 0.95);
  color: #34d399;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.nav-link.done:not(.active) .step-badge.done-badge {
  background: var(--green-bg);
  color: #10b981;
}
.nav-link--checklist {
  position: relative;
}
.nav-link--checklist .nav-link-text {
  flex: 1;
  min-width: 0;
}
.nav-link--leads .nav-link-text {
  flex: 1;
  min-width: 0;
}
.nav-link-count {
  display: none !important;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.92;
}
.nav-link--leads.active .nav-link-count {
  color: currentColor;
  opacity: 0.95;
}
.nav-link-count--pending {
  opacity: 0.55;
  min-width: 1.25em;
  text-align: center;
}
.nav-link-pct {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--muted);
  opacity: 0.7;
}
.nav-link--checklist.active .nav-link-pct {
  color: currentColor;
  opacity: 0.62;
}
.nav-link .step-badge.done-badge.step-badge--pop {
  animation: step-badge-complete-pop 0.5s var(--ease-out);
}
@keyframes step-badge-complete-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-soft) 55%, transparent);
  }
  100% {
    transform: scale(1);
  }
}
.nav-section {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 12px 8px;
}

/* Collapsible sidebar sections */
.nav-group {
  margin-bottom: 4px;
}
.nav-group:first-of-type .nav-section-toggle {
  padding-top: 16px;
}
.nav-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 12px 12px 6px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out);
}
.nav-section-toggle:hover {
  background: var(--accent-soft);
  color: var(--text);
}
.nav-section-label {
  flex: 1;
  text-align: left;
}
.nav-section-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.nav-section-chev .ico-nav-chev {
  width: 14px;
  height: 14px;
}
.nav-group:not(.is-collapsed) .nav-section-chev {
  transform: rotate(90deg);
}
.nav-group.is-collapsed .nav-list {
  display: none;
}
.nav-group.is-collapsed .nav-section-toggle {
  padding-bottom: 12px;
}

.sidebar-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 20px 12px 0;
  font-size: 12px;
  color: var(--muted);
}
.sidebar-legal-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
.sidebar-legal-link:hover,
.sidebar-legal-link.active {
  color: var(--text);
}
.sidebar-legal-sep {
  opacity: 0.55;
}

/* Light sidebar - cream/default (colored swatches use theme tokens at EOF) */
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel {
  background: #ffffff;
  border-right-color: #dbe3ee;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .brand-text strong,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link-text {
  color: #0f172a;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .brand-sub,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .sidebar-rep-meta,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-section,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-section-toggle,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .sidebar-legal {
  color: #475569;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-section-toggle {
  font-weight: 750;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-section-label {
  color: inherit;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .ico-nav,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .ico-inline,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .ico-label,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .ico-arrow {
  color: #475569;
  opacity: 1;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link {
  color: #334155;
  font-weight: 650;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link:hover,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-section-toggle:hover {
  background: #eaf0f7;
  color: #0f172a;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link.active {
  background: #e7edf5;
  color: #0f172a !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link.active .ico-nav {
  color: #0f172a;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link .step-badge {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-weight: 700;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link.active .step-badge:not(.done-badge) {
  background: #ffffff;
  border-color: #b6c4d6;
  color: #0f172a;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link-count,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link-pct {
  color: #475569;
  opacity: 1;
}

.main {
  flex: 1;
  margin-left: var(--sidebar);
  width: calc(100% - var(--sidebar));
  min-height: 100vh;
  padding: 36px 28px 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Fallback if scripts are slow: keep content beside sidebar, not below empty shell */
body > #page-body {
  margin-left: var(--sidebar);
  width: calc(100% - var(--sidebar));
  max-width: none;
  padding: 36px 28px 100px;
  box-sizing: border-box;
}

/* Legal / public pages - full width (no sidebar offset) */
body.legal-standalone-mode > #page-body,
body[data-public="1"] > #page-body {
  margin-left: 0;
  width: 100%;
  max-width: 720px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

#page-body {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

#page-body > .page-label {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
#page-body > h1 {
  text-align: center;
}
#page-body > .lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    left 0.25s ease,
    background var(--dur-fast) ease;
  align-items: center;
  gap: 8px;
}
.menu-btn .ico-menu {
  width: 18px;
  height: 18px;
}
.menu-btn span { line-height: 1; }
.menu-btn:hover { box-shadow: var(--shadow-hover); }
.menu-btn:active { opacity: 0.92; }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 90;
}

.page-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--accent-blue-soft);
  border-radius: 999px;
}
.page-label .ico { color: var(--accent-blue); }
.section-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 36px 0 10px;
}
.section-head .ico {
  width: 22px;
  height: 22px;
  padding: 6px;
  box-sizing: content-box;
  background: var(--accent-soft);
  border-radius: 8px;
  color: var(--accent);
}
body[data-page="home"] .dash-section .section-head { margin-top: 0; }
.section-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.55;
}
.note-subtle {
  border-left-color: var(--border);
  background: var(--accent-soft);
  font-size: 13px;
}
h1 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.lead { font-size: 16px; color: var(--muted); margin-bottom: 28px; max-width: 520px; line-height: 1.65; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 36px 0 14px; }
h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
p { margin-bottom: 12px; }
ul, ol { margin: 0 0 14px 1.15em; }
li { margin-bottom: 5px; }

/* Start hero - dashboard only */
.start-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow);
}
.start-hero.is-continue { border-color: var(--green); background: linear-gradient(180deg, var(--green-bg) 0%, var(--surface) 100%); }
.start-hero h2 { margin: 0 0 8px; font-size: 22px; }
.start-hero p { margin-bottom: 18px; color: var(--muted); font-size: 15px; max-width: none; }

/* Onboarding path */
.path-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.path-item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.path-item a:hover { border-color: #ccc; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.path-item a:active { transform: scale(0.98); }
.path-item.current a { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.path-item.done a { opacity: 0.85; }
.path-num {
  width: 32px; height: 32px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--muted);
}
.path-item.current .path-num { background: var(--accent); color: #fff; }
.path-item.done .path-num { background: var(--green-soft); color: var(--green); }
.path-body { flex: 1; min-width: 0; }
.path-title { font-weight: 600; font-size: 14px; }
.path-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.path-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex-shrink: 0;
}
.path-item.current .path-status { color: var(--accent); }
.path-item.done .path-status { color: var(--green); }

/* Tracker */
.tracker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
}
.tracker h2 { margin-top: 0; }
.tracker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(17,17,17,0.08);
}
.tier-box input {
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.tier-box input:focus {
  outline: none;
  border-color: var(--accent);
  transform: scale(1.02);
}
.tracker-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 16px;
}
.tracker-stat {
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.tracker-stat:hover {
  box-shadow: var(--shadow-md);
}
.tracker-stat .val { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--green); }
.tracker-stat .lbl { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Earnings - tier tabs + income chart */
.earnings-tier-hint {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
}
.earnings-tier-tabs {
  margin-bottom: 20px;
}
.earnings-tier-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 2px solid var(--border);
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    background var(--dur-fast) ease,
    transform var(--dur-fast) ease;
}
.earnings-tier-tab:hover {
  border-color: #c5c5be;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.earnings-tier-tab:active {
  transform: translateY(0);
}
.earnings-tier-tab:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.earnings-tier-tab.active {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), var(--shadow-md);
  background: var(--green-bg);
}
.earnings-tier-tab.active .val {
  color: #15803d;
}
.earnings-projection {
  margin-bottom: 20px;
  overflow-anchor: none;
}
.earnings-projection-lead {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.earnings-chart {
  margin-bottom: 22px;
  padding: 16px 12px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.earnings-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  min-height: 200px;
}
.earnings-chart-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.earnings-chart-bar-wrap {
  width: 100%;
  max-width: 48px;
  height: 160px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.earnings-chart-bar {
  width: 72%;
  height: 100%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  transform: scaleY(0.04);
  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(0.34, 1.25, 0.64, 1);
  will-change: transform;
}
.earnings-chart.is-animating .earnings-chart-bar {
  transition: transform 0.6s cubic-bezier(0.34, 1.25, 0.64, 1);
}
.earnings-chart-amt {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  font-family: var(--mono);
  text-align: center;
  line-height: 1.2;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.earnings-chart-amt-updated {
  animation: earnings-amt-pop 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes earnings-amt-pop {
  0% { opacity: 0.5; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
.earnings-chart-count {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}
.earnings-projection-table {
  margin-top: 4px;
}
@media (max-width: 640px) {
  .earnings-chart-bars {
    gap: 4px;
    min-height: 180px;
  }
  .earnings-chart-bar-wrap {
    height: 130px;
  }
  .earnings-chart-amt {
    font-size: 9px;
  }
  .earnings-chart-count {
    font-size: 9px;
  }
}
.goal-bar-wrap {
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
  margin: 8px 0 4px;
}
.goal-bar { height: 100%; background: var(--green); border-radius: 5px; transition: width 0.35s; max-width: 100%; }
.goal-label { font-size: 12px; color: var(--muted); }

/* Dashboard (performance hub) */
body[data-page="home"] .dash-header {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  margin-bottom: 16px;
}

body[data-page="home"] #page-body {
  max-width: 980px;
}

body[data-page="home"] .dash-page-hero {
  margin-bottom: 0;
}

body[data-page="home"] .dash-page-lead {
  margin-bottom: 0;
  max-width: 36rem;
}

body[data-page="home"] .dash-hub {
  width: 100%;
}

body[data-page="home"] .dash-section h2,
body[data-page="home"] .main > h2 {
  text-align: left;
}

body[data-page="home"] .dash-panel-head .section-head {
  justify-content: flex-start;
}

body[data-page="home"] .dash-panel-head .section-desc {
  text-align: left;
  margin-bottom: 0;
}

body[data-page="home"] .deals-head {
  justify-content: space-between;
}

body[data-page="home"] .deals-head .section-head {
  justify-content: flex-start;
}

body[data-page="home"] .deals-list {
  text-align: left;
}

body[data-page="home"] .dash-row-2 {
  grid-template-columns: 1fr;
  justify-items: center;
}

body[data-page="home"] .dash-row-2 .field {
  max-width: 280px;
  width: 100%;
}

body[data-page="home"] .dash-actions {
  justify-content: center;
}

body[data-page="home"] .tools-row {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
label[data-icon] {
  display: inline-flex;
  align-items: center;
}

/* Dashboard hub */
.dash-hub {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dash-quicklinks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-quicklink {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow);
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) ease,
    background var(--dur-fast) ease;
}

.dash-quicklink::before {
  content: none;
}

.dash-quicklink .ico,
.dash-quicklink .ico-nav {
  width: 15px;
  height: 15px;
  color: var(--accent-blue);
  flex-shrink: 0;
  opacity: 1;
}

.dash-quicklink:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 40%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.dash-quicklink-text {
  display: block;
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-pending-island {
  padding: 18px 20px 20px;
}

.dash-pending-section {
  padding: 16px 20px 18px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 40%, var(--surface));
}

.dash-pending-island.dash-pending-section {
  padding: 20px;
  border-top: none;
  background: var(--surface);
}

.dash-pending-section--empty .dash-pending-list,
.dash-pending-section--empty .dash-pending-foot {
  display: none;
}

.dash-pending-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 14px;
}

.dash-pending-head-copy {
  min-width: 0;
  flex: 1 1 12rem;
}

.dash-pending-desc {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.dash-pending-desc strong {
  font-weight: 600;
  color: var(--text);
}

.dash-pending-count {
  flex-shrink: 0;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}

.dash-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-pending-empty[hidden] {
  display: none !important;
}

.dashboard-redesign
  .dash-toggle-panel-inner:has(.dash-toggle-pending-list:not([hidden]))
  > .dash-pending-empty {
  display: none !important;
}

.dash-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color var(--dur-fast);
}

.dash-pending-item:hover {
  border-color: color-mix(in srgb, var(--border) 100%, var(--text));
}

.dash-pending-item-body {
  min-width: 0;
  flex: 1 1 auto;
}

.dash-pending-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.dash-pending-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
}

.dash-pending-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.dash-pending-subline--detail {
  margin-top: 2px;
  color: color-mix(in srgb, var(--text) 52%, var(--muted));
}

.dash-pending-dot {
  margin: 0 5px;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  user-select: none;
}

.dash-pending-price {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dash-pending-time {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
}

.dash-pending-load {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.dash-pending-section.dash-pending-loading .dash-pending-load {
  display: inline-flex;
}

.dash-pending-section.dash-pending-loading .dash-toggle-btn {
  flex-wrap: nowrap;
}

.dash-pending-section.dash-pending-loading .dash-toggle-meta {
  width: auto;
  flex-shrink: 0;
  margin-left: auto;
  justify-content: flex-end;
  padding-top: 0;
}

.dash-pending-section.dash-pending-loading .dash-toggle-count {
  display: none;
}

.dash-pending-load-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-top-color: color-mix(in srgb, var(--text) 55%, var(--muted));
  border-radius: 50%;
  animation: dash-pending-spin 0.7s linear infinite;
}

@keyframes dash-pending-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-pending-load-spinner {
    animation: none;
    border-top-color: var(--muted);
    opacity: 0.7;
  }
}

.dash-pending-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.dash-pending-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--surface);
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast);
}

.dash-pending-btn--complete {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  color: color-mix(in srgb, var(--text) 72%, #047857);
}

.dash-pending-btn--complete:hover,
.dash-pending-btn--complete:focus-visible {
  background: color-mix(in srgb, #ecfdf5 40%, var(--surface));
  border-color: color-mix(in srgb, #047857 24%, var(--border));
  color: #047857;
}

.dash-pending-icon-btn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast);
}

.dash-pending-icon-btn:hover,
.dash-pending-icon-btn:focus-visible {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.dash-pending-ico,
.dash-pending-ico .ico {
  width: 14px;
  height: 14px;
}

.dash-pending-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Fixed menu portal - do not flip parent overflow on open (that caused scroll glitches). */
.dash-pending-menu-wrap.is-open {
  z-index: 12;
}

.dash-pending-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: max-content;
  min-width: 148px;
  height: auto;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.dash-pending-menu.dash-pending-menu--fixed {
  position: fixed;
  top: auto;
  right: auto;
  z-index: 1200;
}

.dash-pending-menu[hidden] {
  display: none !important;
}

.dash-pending-menu-item {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.dash-pending-menu-item:hover,
.dash-pending-menu-item:focus-visible {
  background: var(--surface-2);
}

.dash-pending-menu-item--muted {
  color: var(--muted);
}

.dash-pending-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.dash-pending-view-all {
  width: 100%;
  justify-content: center;
}

.dash-pending-empty {
  margin: 0;
  padding: 26px 18px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-soft) 58%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface) 86%, var(--surface-2));
  border-style: solid;
}

.dash-board {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.dash-board-performance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  padding: 18px 20px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--green-bg) 45%, var(--surface)) 0%,
    var(--surface) 55%
  );
  border-bottom: 1px solid var(--border);
}

.dash-perf-main {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 16rem;
  min-width: 0;
}

.dash-goal-ring {
  position: relative;
  flex-shrink: 0;
  width: 104px;
  height: 104px;
}

.dash-goal-ring-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dash-goal-ring-track {
  stroke: color-mix(in srgb, var(--border) 85%, transparent);
  stroke-width: 7;
}

.dash-goal-ring-fill {
  stroke: var(--green);
  stroke-width: 7;
  stroke-linecap: round;
  /* Circumference for r=118 (2*PI*118). Default fully hidden (0%) so the ring
     shows no stray arc before JS sets the real progress. */
  stroke-dasharray: 741.42 741.42;
  stroke-dashoffset: 741.42;
}

.dash-goal-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
}

.dash-goal-ring-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.dash-goal-ring-pct {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--green);
  line-height: 1;
}

.dash-goal-ring-status {
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.dash-goal-ring-remaining {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.dash-goal-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-goal-editor-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.dash-goal-editor-block--ring {
  pointer-events: auto;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.dash-goal-editor-block--ring .dash-goal-edit-hint {
  line-height: 1;
  text-align: center;
}

.dash-goal-meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.dash-goal-meta .dash-tracker-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dash-goal-meta-sep {
  color: var(--border);
  font-weight: 400;
}

.dash-perf-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.dash-stat-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 5.5rem;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.dash-stat-chip--earn .dash-tracker-stat-val {
  color: var(--green);
}

.dash-board-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
}

.dash-board-log,
.dash-board-history {
  padding: 16px 18px 18px;
  min-width: 0;
  background: var(--surface);
}

.dash-board-log {
  border-right: 1px solid var(--border);
}

.dash-board-work-head {
  margin: 0 0 12px;
}

.dash-board-work-copy {
  min-width: 0;
}

.dash-board-work-head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dash-board-work-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-board-work-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.dash-board-history .deals-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 3px 8px;
  background: var(--bg);
  border-radius: 999px;
  flex-shrink: 0;
}

.dash-sales-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}

.dash-sales-toggle::-webkit-details-marker {
  display: none;
}

.dash-sales-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
}

.dash-sales-toggle-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  flex: 1;
  min-width: 0;
}

.dash-sales-toggle-action {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dash-sales-toggle-action::before {
  content: "Show";
}

.dash-sales-history[open] .dash-sales-toggle-action::before {
  content: "Hide";
}

.dash-sales-history-body {
  margin-top: 12px;
}

.dash-sale-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 12px;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.dash-sale-fields {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) 1fr;
  gap: 10px 12px;
  align-items: end;
}

.dash-sale-field {
  min-width: 0;
}

.dash-sale-help {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.dash-sale-label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.dash-sale-money {
  display: flex;
  align-items: stretch;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.dash-sale-money:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}

.dash-sale-money-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--border) 45%, var(--surface));
  border-right: 1px solid var(--border);
}

.dash-sale-money-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0 12px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dash-sale-money-input:focus {
  outline: none;
}

.dash-sale-money-input::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-weight: 500;
}

.dash-sale-input {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.dash-sale-input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.dash-sale-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}

.dash-sale-submit.dash-close-submit {
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 10px 16px;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
}

@media (min-width: 640px) {
  .dash-quicklinks {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.dash-board-history .deals-list {
  max-height: 220px;
  margin-top: 8px;
}

.dash-board-history .dash-empty {
  padding: 16px 12px;
  margin-top: 4px;
}

.dash-board-history .deal-card {
  padding: 10px 12px;
}

/* Goal tracker (shared tokens) */
.dash-tracker {
  margin-bottom: 0;
}
.dash-tracker-goal-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.dash-tracker-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.dash-goal-editor {
  display: inline-flex;
  align-items: baseline;
}
.dash-goal-btn {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  cursor: pointer;
  line-height: 1.1;
  transition: color var(--dur-fast) ease;
}
.dash-goal-btn:hover {
  color: var(--accent-blue);
}
.dash-goal-edit-hint {
  font-size: 11px;
  color: var(--muted);
}
.dash-goal-edit {
  display: none;
  align-items: baseline;
  gap: 2px;
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}
.dash-goal-edit input {
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  width: 8ch;
  border: none;
  border-bottom: 2px solid var(--accent-blue);
  background: transparent;
  padding: 0;
  color: var(--text);
  -moz-appearance: textfield;
  appearance: textfield;
}
.dash-goal-edit input::-webkit-outer-spin-button,
.dash-goal-edit input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dash-goal-edit input:focus {
  outline: none;
}
.dash-goal-editor.is-editing .dash-goal-btn,
.dash-goal-editor.is-editing + .dash-goal-edit-hint {
  display: none;
}
.dash-goal-editor.is-editing .dash-goal-edit {
  display: inline-flex;
}
.dash-tracker-status {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.dash-tracker-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.dash-tracker-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.dash-tracker-stat-val.dash-stat-neutral {
  color: var(--text);
}
.dash-tracker-stat-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Log a sale panel */
.dash-log-panel,
.dash-deals-panel {
  padding: 24px;
}
.dash-panel-head {
  margin-bottom: 20px;
}
.dash-close-form {
  margin: 0;
}
.dash-close-fields {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px 16px;
  margin-bottom: 16px;
}
.dash-close-fields .field {
  margin: 0;
  text-align: left;
}
.dash-close-fields label {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.dash-input-money {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.dash-input-money:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}
.dash-input-prefix {
  padding: 12px 0 12px 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.dash-input-money input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 12px 14px 12px 6px;
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
}
.dash-input-money input:focus {
  outline: none;
}
.dash-field-business input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.dash-field-business input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}
.dash-close-submit {
  width: 100%;
  justify-content: center;
}
.dash-empty {
  text-align: center;
  padding: 28px 20px;
  margin-bottom: 12px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.dash-empty-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.dash-empty-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.dash-deals-panel .deals-list:not(:empty) {
  margin-top: 4px;
}
.stat-ico-green { background: var(--green-soft); color: var(--green); }
.stat-ico-blue { background: var(--accent-blue-soft); color: var(--accent-blue); }
.stat-ico-violet { background: var(--violet-soft); color: var(--violet); }
.stat-ico-gold { background: var(--gold-soft); color: var(--gold); }
.dash-section { margin-bottom: 20px; }
.dash-section h2 { margin-top: 0; }
.dash-row-2 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: flex-end;
}
.dash-actions { display: flex; align-items: flex-end; }
.tier-pay { font-size: 10px; color: var(--muted); display: block; margin-bottom: 4px; }
.tier-inputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.tier-box label { font-size: 11px; color: var(--muted); display: block; margin-bottom: 4px; }
.tier-box input { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; text-align: center; font-weight: 600; }
.log-sale-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.log-sale-row .field { flex: 1; min-width: 120px; margin: 0; }

.close-form-simple .label-opt,
.dash-close-form .label-opt {
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
}

.close-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 18px;
}
.close-form-grid .field-span-2 {
  grid-column: 1 / -1;
}
.close-form-grid .field-check {
  display: flex;
  align-items: flex-end;
}
.check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 10px;
}
.check-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-blue);
}
.close-form-grid textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg);
  resize: vertical;
  min-height: 56px;
}
.close-form-grid textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.close-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.deals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.deals-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 10px;
  background: var(--accent-soft);
  border-radius: 999px;
}
.deals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deal-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.deal-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow);
}
.deal-card-main {
  flex: 1;
  min-width: 0;
}

.deal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.deal-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.deal-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
}
.deal-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
}

.deal-amount-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.deal-date {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.deal-amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.deal-down {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.deal-earn {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}
.deal-preset {
  font-size: 11px;
  color: var(--muted);
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.deal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.deal-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.deal-meta-item .ico {
  width: 14px;
  height: 14px;
}
.deal-meta-link {
  text-decoration: none !important;
  color: var(--accent-blue);
  transition: background var(--dur-fast) ease;
}
.deal-meta-link:hover {
  background: var(--accent-blue-soft);
}
.deal-meta-notes {
  max-width: 100%;
  line-height: 1.4;
}
.deal-delete {
  flex-shrink: 0;
  align-self: center;
  font-size: 12px;
  padding: 8px 12px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: #d6d6d0;
}
.card h3 { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.grid-4 > button,
.grid-4 > a,
.grid-5 > button,
.grid-5 > a {
  min-width: 0;
}

/* Sales Tasks - rep vs owner (Application-style) */
.role-split {
  margin: 28px 0 8px;
}
.role-split-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--accent-blue-soft);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-blue);
}
.role-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-align: left;
}
.role-card-rep {
  border-top: 3px solid var(--accent-blue);
}
.role-card-owner {
  border-top: 3px solid var(--green);
}
.role-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.role-ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 10px;
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
}
.role-card-owner .role-ico {
  background: var(--green-soft);
  color: var(--green);
}
.role-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.role-card-tag {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.role-list {
  margin: 0;
  padding: 0 0 0 18px;
  flex: 1;
}
.role-list li {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 10px;
  color: var(--text);
}
.role-list li:last-child {
  margin-bottom: 0;
}
.role-card-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.note {
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  margin: 14px 0;
  border-left: 3px solid var(--border);
  background: var(--accent-soft);
  color: var(--text);
  line-height: 1.55;
}
.note.success { border-left-color: var(--green); background: var(--green-bg); }

/* Setup page - numbered steps */
.setup-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
}
.setup-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.setup-step-compact {
  padding: 14px 16px;
}
.setup-step-compact .setup-step-head {
  margin-bottom: 10px;
}
.setup-step-compact .setup-ico-sm {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.setup-step-compact .setup-ico-sm .ico {
  width: 18px;
  height: 18px;
}
.setup-step-compact .setup-step-head h3 {
  font-size: 15px;
}
.setup-list-compact > li {
  padding: 5px 0 5px 20px;
  font-size: 14px;
}
.setup-step:hover {
  box-shadow: var(--shadow-md);
  border-color: #d4d4ce;
  transform: translateY(-2px);
}
.setup-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.setup-num {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent) 0%, #334155 100%);
  color: #fff;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(30, 41, 59, 0.2);
}
.setup-step-head .setup-ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
}
.setup-step-head .setup-ico .ico { width: 22px; height: 22px; }
.setup-step-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.setup-step-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.setup-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.setup-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.setup-list > li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 14px;
  line-height: 1.55;
  border-bottom: 1px solid var(--border);
}
.setup-list > li:last-child { border-bottom: none; }
.inline-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  vertical-align: middle;
  margin: 0 4px;
  flex-shrink: 0;
}
.inline-menu-btn .ico-notion-menu {
  width: 16px;
  height: 16px;
  color: var(--text);
  margin: 0;
}
.setup-list > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
}
.setup-sub {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.setup-sub:first-of-type { margin-top: 0; }

.tools-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none !important;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  position: relative;
  min-height: 100px;
}
.tool-card > .ico:first-child {
  width: 22px;
  height: 22px;
  padding: 9px;
  box-sizing: content-box;
  background: var(--accent-soft);
  border-radius: 10px;
  color: var(--accent);
}
.tool-card .ico-arrow {
  position: absolute;
  top: 18px;
  right: 16px;
}
.tool-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.tool-card:hover > .ico:first-child { background: var(--accent-blue-soft); color: var(--accent-blue); }
.tool-card:active { transform: scale(0.98); }
.tool-card span:not(.ico) {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-top: auto;
}
body[data-page="home"] .tool-card {
  align-items: center;
  text-align: center;
  padding-top: 20px;
}
body[data-page="home"] .tool-card .ico-arrow {
  position: static;
  margin-top: 4px;
}

/* Step header + footer on lesson pages */
.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.step-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  background: var(--accent-blue-soft);
  border-radius: 999px;
  color: var(--accent-blue);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.step-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.step-footer a {
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.step-footer a.next {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
  box-shadow: var(--shadow);
}
.step-footer a:hover { box-shadow: var(--shadow-md); transform: scale(1.03); }
.step-footer a:active { transform: scale(0.96); }
.step-footer a.next:hover { box-shadow: var(--shadow-hover); }
.step-footer-next-only {
  justify-content: flex-end;
}

.workflow-sublist {
  margin: 8px 0 0;
  padding-left: 1.25em;
  list-style: disc;
}
.workflow-sublist li {
  margin-bottom: 4px;
  line-height: 1.55;
}
.workflow-sublist li:last-child {
  margin-bottom: 0;
}
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 14px 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--accent-soft); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }
td.money { color: var(--green); font-weight: 600; }

.acc { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; background: var(--surface); }
.acc-q {
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.acc-q > span:not(.chev),
.acc-q .acc-q-text,
.acc-q .custom-script-title-input {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.acc-q .chev {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}
.acc-q:hover { background: var(--accent-soft); }
.acc-q:active { transform: scale(0.99); }
.acc-q .chev { font-size: 10px; color: var(--muted); }
.acc.open .acc-q .chev { transform: rotate(180deg); }
.acc-a { display: none; }
.acc.open .acc-a { display: block; }
.acc-a-inner { padding: 0 16px 16px; font-size: 14px; line-height: 1.65; color: var(--text); }

.script-block {
  --script-fg: var(--text);
  --script-muted: color-mix(in srgb, var(--text) 68%, var(--muted));
  --script-dim: color-mix(in srgb, var(--text) 78%, var(--muted));
  --script-strong: var(--text);
  --script-em: color-mix(in srgb, var(--muted) 70%, var(--text));
  --script-link: var(--accent-blue);
  --script-btn-bg: var(--surface-2);
  --script-btn-border: color-mix(in srgb, var(--border) 70%, var(--text) 18%);
  background: color-mix(in srgb, var(--surface-2) 38%, var(--surface));
  color: var(--script-fg);
  border: 1px solid color-mix(in srgb, var(--border) 62%, var(--text) 14%);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.7;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.script-block .script-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--script-dim);
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.script-block em {
  color: var(--script-em);
  font-style: italic;
  font-size: 13px;
}
.script-block strong {
  color: var(--script-strong);
}
.script-block a,
.script-block .link-bold-blue {
  color: var(--script-link);
}
.script-block .script-body {
  color: var(--script-fg);
}
.script-prompt {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  color: inherit;
}
.script-block .script-prompt {
  color: var(--script-fg);
}
.script-block .script-pathways-label {
  color: var(--script-muted);
  font-weight: 700;
}
.script-block .script-path-btn {
  background: var(--script-btn-bg);
  border-color: var(--script-btn-border);
  color: var(--script-fg);
  font-weight: 700;
}
.script-block .script-path-btn:hover {
  filter: brightness(0.97);
}
.script-block .script-path-btn--yes {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border));
  color: #065f46;
  background: color-mix(in srgb, var(--green-bg) 55%, #a7f3d0 45%);
}
.script-block .script-path-btn--yes:hover {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}
.script-block .script-path-btn--no {
  border-color: color-mix(in srgb, #dc2626 52%, var(--border));
  color: #991b1b;
  background: #fecaca;
}
.script-block .script-path-btn--no:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}
.script-block .script-path-btn--maybe {
  border-color: color-mix(in srgb, #d97706 52%, var(--border));
  color: #92400e;
  background: #fde68a;
}
.script-block .script-path-btn--maybe:hover {
  background: #d97706;
  border-color: #d97706;
  color: #ffffff;
}
.script-block .script-path-btn--link {
  border-color: color-mix(in srgb, var(--accent-blue) 52%, var(--border));
  color: #1e40af;
  background: #bfdbfe;
}
.script-block .script-path-btn--link:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #ffffff;
}
.script-pathways {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
}
.script-pathways-label {
  flex: 0 0 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  margin: 0 0 2px;
}
.script-path-btn {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--text) 18%);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    filter var(--dur-fast) ease;
}
.script-path-btn:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--accent-soft));
}
.script-path-btn--yes {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border));
  color: #065f46;
  background: color-mix(in srgb, var(--green-bg) 55%, #a7f3d0 45%);
}
.script-path-btn--yes:hover {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}
.script-path-btn--no {
  border-color: color-mix(in srgb, #dc2626 52%, var(--border));
  color: #991b1b;
  background: #fecaca;
}
.script-path-btn--no:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}
.script-path-btn--maybe {
  border-color: color-mix(in srgb, #d97706 52%, var(--border));
  color: #92400e;
  background: #fde68a;
}
.script-path-btn--maybe:hover {
  background: #d97706;
  border-color: #d97706;
  color: #ffffff;
}
.script-path-btn--link {
  border-color: color-mix(in srgb, var(--accent-blue) 52%, var(--border));
  color: #1e40af;
  background: #bfdbfe;
}
.script-path-btn--link:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #ffffff;
}
a.script-path-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.script-block-pathway-target {
  scroll-margin-top: 96px;
  scroll-margin-bottom: 48px;
}
@keyframes script-block-highlight-pulse {
  0% {
    outline: 2px solid rgba(96, 165, 250, 0.5);
    box-shadow: none;
  }
  50% {
    outline: 3px solid rgba(96, 165, 250, 1);
    box-shadow: none;
  }
  100% {
    outline: 2px solid rgba(96, 165, 250, 0.85);
    box-shadow: none;
  }
}
.script-block--highlight {
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
  animation: script-block-highlight-pulse 0.55s ease-out 1;
  outline: 2px solid rgba(96, 165, 250, 0.85);
  outline-offset: 2px;
  box-shadow: none;
  transition: background 0.2s ease, outline-color 0.2s ease;
}
.script-block--highlight .script-label {
  color: var(--accent);
}
.script-block--highlight .script-body {
  color: var(--text);
}
.script-open-btn {
  margin: 0;
  font-size: 12px;
  border-radius: 999px;
}
.script-block-opener .script-body {
  margin-top: 0;
}
.script-body {
  outline: none;
  min-height: 1.5em;
  cursor: text;
}
.script-body:focus {
  outline: 2px solid rgba(96, 165, 250, 0.45);
  outline-offset: 2px;
  box-shadow: none;
  border-radius: 6px;
}
.script-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 4px 0 12px;
}
.script-toolbar .btn {
  margin: 0;
  font-size: 12px;
  padding: 8px 12px;
  font-weight: 700;
}

html[data-theme="dark"] .script-block {
  background: var(--surface-elevated);
  border-color: var(--border);
  box-shadow: none;
}
html[data-theme="dark"] .script-block .script-label,
html[data-theme="dark"] .script-block .script-pathways-label {
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}
html[data-theme="dark"] .script-block .script-path-btn--yes {
  border-color: rgba(74, 222, 128, 0.55);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.22);
}
html[data-theme="dark"] .script-block .script-path-btn--yes:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--btn-primary-fg);
}
html[data-theme="dark"] .script-block .script-path-btn--no {
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
  background: rgba(248, 113, 113, 0.2);
}
html[data-theme="dark"] .script-block .script-path-btn--no:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}
html[data-theme="dark"] .script-block .script-path-btn--maybe {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde68a;
  background: rgba(251, 191, 36, 0.18);
}
html[data-theme="dark"] .script-block .script-path-btn--maybe:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #1f2937;
}
html[data-theme="dark"] .script-block .script-path-btn--link {
  border-color: rgba(96, 165, 250, 0.55);
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.2);
}
html[data-theme="dark"] .script-block .script-path-btn--link:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #ffffff;
}

/* Custom scripts (Call scripts page) */
.scripts-custom-section {
  margin-top: 28px;
  padding: 24px;
  text-align: left;
}
.scripts-custom-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.scripts-custom-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.scripts-custom-desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 360px;
}
.scripts-custom-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scripts-custom-list:empty {
  display: none;
}
.scripts-custom-empty {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.scripts-custom-empty[hidden] {
  display: none;
}
.acc-custom .acc-q {
  color: var(--accent-blue);
}
.acc-q-custom {
  gap: 8px;
}
.custom-script-title-input,
.custom-outreach-title-input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-blue);
  text-align: left;
}
.custom-script-title-input:hover,
.custom-outreach-title-input:hover {
  border-color: var(--border);
  background: var(--surface);
}
.custom-script-title-input:focus,
.custom-outreach-title-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent-blue-soft);
}
.outreach-custom-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
#outreach-editor h2,
#scripts-editor h2 {
  margin: 28px 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
#outreach-editor h2:first-child,
#scripts-editor h2:first-child {
  margin-top: 0;
}

.scripts-list-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.scripts-list-divider--lead {
  margin: 6px 0 14px;
}
.scripts-list-divider::before,
.scripts-list-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--border) 90%, var(--accent-blue) 10%) 20%,
    color-mix(in srgb, var(--border) 90%, var(--accent-blue) 10%) 80%,
    transparent
  );
}
.scripts-list-divider span {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-blue-soft));
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent-blue) 12%);
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Call Scripts - page list layout */
body[data-page="scripts"] #scripts-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body[data-page="scripts"] #scripts-editor > .scripts-list-divider {
  margin-left: 0;
  margin-right: 0;
}
body[data-page="scripts"] #scripts-editor > .scripts-list-divider--lead {
  margin-top: 0;
}
body[data-page="scripts"] .scripts-list-divider::before,
body[data-page="scripts"] .scripts-list-divider::after {
  display: none;
}
body[data-page="scripts"] #scripts-editor > .acc {
  margin-bottom: 0;
}
body[data-page="scripts"] .acc-q {
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Call Scripts - accordion */
body[data-page="scripts"] .acc {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition:
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
body[data-page="scripts"] .acc:hover:not(.open) {
  border-color: color-mix(in srgb, var(--accent-blue) 16%, var(--border));
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
}
body[data-page="scripts"] .acc.open {
  border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
  box-shadow:
    0 4px 18px rgba(37, 99, 235, 0.1),
    0 1px 0 color-mix(in srgb, var(--accent-blue) 12%, transparent) inset;
}
body[data-page="scripts"] .acc-q {
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-fast) ease,
    border-color var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
body[data-page="scripts"] .acc-q:active {
  transform: none;
}
body[data-page="scripts"] .acc.open .acc-q {
  border-bottom: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-blue-soft) 75%, var(--surface)) 0%,
    color-mix(in srgb, var(--accent-soft) 45%, var(--surface)) 100%
  );
  color: var(--text);
}
body[data-page="scripts"] .acc-q .chev {
  flex: 0 0 20px;
  margin-left: auto;
  font-size: 0;
  line-height: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  overflow: hidden;
  transition: color var(--dur-fast) ease;
}
body[data-page="scripts"] .acc-q .chev,
body[data-page="scripts"] .acc.open .acc-q .chev {
  transform: none;
}
body[data-page="scripts"] .acc.open .acc-q .chev {
  color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue-soft) 80%, var(--surface));
  border-radius: 6px;
}
body[data-page="scripts"] .acc-q .chev::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform var(--dur-med) var(--ease-out);
}
body[data-page="scripts"] .acc.open .acc-q .chev::after {
  transform: rotate(-135deg);
}
body[data-page="scripts"] .acc-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  min-height: 0;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}
body[data-page="scripts"] .acc.open .acc-a {
  display: grid;
  grid-template-rows: 1fr;
}
body[data-page="scripts"] .acc-a-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
body[data-page="scripts"] .acc.open .acc-a-inner {
  opacity: 1;
  pointer-events: auto;
}
body[data-page="scripts"] .acc:not(.open) .acc-a-inner > * {
  margin-top: 0;
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="scripts"] .acc,
  body[data-page="scripts"] .acc-q,
  body[data-page="scripts"] .acc-q .chev::after,
  body[data-page="scripts"] .acc-a,
  body[data-page="scripts"] .acc-a-inner {
    transition: none;
  }
  body[data-page="scripts"] .acc-a-inner {
    transition: none;
  }
}

/* Call Scripts - interior content */
body[data-page="scripts"] .acc.open .acc-a-inner {
  padding: 10px 12px 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-soft) 35%, var(--surface)) 0%,
    var(--surface) 100%
  );
}
body[data-page="scripts"] .acc-a-inner > .note {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 14%, var(--border));
  border-left: 3px solid var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue-soft) 55%, var(--surface));
  border-radius: 0 10px 10px 0;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
body[data-page="scripts"] .acc-a-inner > .note strong {
  font-weight: 700;
  color: var(--text);
}
body[data-page="scripts"] .script-toolbar {
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
  gap: 6px;
  justify-content: flex-end;
}
body[data-page="scripts"] .script-toolbar .btn {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  box-shadow: none;
}
body[data-page="scripts"] .script-block {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 20px;
  border-left: none;
}
body[data-page="scripts"] .script-block + .script-block {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
body[data-page="scripts"] .script-block:last-child {
  margin-bottom: 0;
}
body[data-page="scripts"] .script-block-opener {
  border-left: none;
}
body[data-page="scripts"] .script-label,
body[data-page="scripts"] .script-step-title,
body[data-page="scripts"] .script-step-rail {
  display: none;
}
body[data-page="scripts"] .acc-a-inner:has(.script-block--highlight) .script-block:not(.script-block--highlight) {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
body[data-page="scripts"] .script-prompt {
  margin: 0 0 12px;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: -0.01em;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  border: none;
}
body[data-page="scripts"] .script-body {
  font-size: 15px;
  line-height: 1.72;
  padding: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  border: none;
}
body[data-page="scripts"] .script-body:focus {
  outline: none;
  background: color-mix(in srgb, var(--accent-blue-soft) 35%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  margin: -8px -10px;
  box-shadow: none;
}
body[data-page="scripts"] .script-block em {
  font-size: 13px;
  color: color-mix(in srgb, var(--muted) 88%, #d1d5db);
  font-style: italic;
}
body[data-page="scripts"] .script-pathways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
body[data-page="scripts"] .script-pathways-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body[data-page="scripts"] .script-path-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  color: var(--text);
  line-height: 1.3;
  box-shadow: none;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}
body[data-page="scripts"] .script-path-btn:hover {
  filter: none;
  transform: none;
  box-shadow: none;
}
body[data-page="scripts"] .script-path-btn--yes {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border));
  color: #065f46;
  background: color-mix(in srgb, var(--green-bg) 55%, #a7f3d0 45%);
}
body[data-page="scripts"] .script-path-btn--yes:hover {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}
body[data-page="scripts"] .script-path-btn--no {
  border-color: color-mix(in srgb, #dc2626 52%, var(--border));
  color: #991b1b;
  background: #fecaca;
}
body[data-page="scripts"] .script-path-btn--no:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}
body[data-page="scripts"] .script-path-btn--maybe {
  border-color: color-mix(in srgb, #d97706 52%, var(--border));
  color: #92400e;
  background: #fde68a;
}
body[data-page="scripts"] .script-path-btn--maybe:hover {
  background: #d97706;
  border-color: #d97706;
  color: #ffffff;
}
body[data-page="scripts"] .script-path-btn--link {
  border-color: color-mix(in srgb, var(--accent-blue) 52%, var(--border));
  color: #1e40af;
  background: #bfdbfe;
}
body[data-page="scripts"] .script-path-btn--link:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #ffffff;
}
body[data-page="scripts"] .script-block--highlight {
  animation: none;
  background: transparent;
  border-radius: 0;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 20px;
}
body[data-page="scripts"] .script-block--highlight .script-body,
body[data-page="scripts"] .script-block--highlight .script-prompt {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  background: color-mix(in srgb, var(--accent-blue-soft) 32%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 14%, transparent);
  transition:
    outline-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
body[data-page="scripts"] .script-block-pathway-target {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 32px;
}
body[data-page="scripts"] .acc-a-inner p:not(.note):not(.script-prompt) {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 8px 0 0;
}
body[data-page="scripts"] .acc-a-inner code {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
html[data-theme="dark"] body[data-page="scripts"] .acc {
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] body[data-page="scripts"] .acc.open {
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
}
html[data-theme="dark"] body[data-page="scripts"] .acc.open .acc-q {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-blue) 12%, var(--surface)) 0%,
    var(--surface) 100%
  );
}
html[data-theme="dark"] body[data-page="scripts"] .acc.open .acc-a-inner {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 0%,
    var(--surface) 100%
  );
}
html[data-theme="dark"] body[data-page="scripts"] .script-block {
  background: transparent;
  border: none;
  box-shadow: none;
}
html[data-theme="dark"] body[data-page="scripts"] .script-body,
html[data-theme="dark"] body[data-page="scripts"] .script-prompt {
  background: transparent;
  border: none;
  color: var(--text);
}
html[data-theme="dark"] body[data-page="scripts"] .script-pathways {
  background: transparent;
}
html[data-theme="dark"] body[data-page="scripts"] .script-block em {
  color: color-mix(in srgb, var(--muted) 75%, #9ca3af);
}
html[data-theme="dark"] body[data-page="scripts"] .script-path-btn--yes {
  border-color: rgba(74, 222, 128, 0.55);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.22);
}
html[data-theme="dark"] body[data-page="scripts"] .script-path-btn--yes:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--btn-primary-fg);
}
html[data-theme="dark"] body[data-page="scripts"] .script-path-btn--no {
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
  background: rgba(248, 113, 113, 0.2);
}
html[data-theme="dark"] body[data-page="scripts"] .script-path-btn--no:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}
html[data-theme="dark"] body[data-page="scripts"] .script-path-btn--maybe {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde68a;
  background: rgba(251, 191, 36, 0.18);
}
html[data-theme="dark"] body[data-page="scripts"] .script-path-btn--maybe:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #111827;
}
html[data-theme="dark"] body[data-page="scripts"] .script-path-btn--link {
  border-color: rgba(96, 165, 250, 0.55);
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.22);
}
html[data-theme="dark"] body[data-page="scripts"] .script-path-btn--link:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #ffffff;
}
html[data-theme="dark"] body[data-page="scripts"] .script-block--highlight {
  animation: none;
  background: transparent;
  border: none;
  box-shadow: none;
}
html[data-theme="dark"] body[data-page="scripts"] .script-block--highlight .script-body,
html[data-theme="dark"] body[data-page="scripts"] .script-block--highlight .script-prompt {
  outline-color: color-mix(in srgb, #60a5fa 80%, var(--accent-blue));
  background: color-mix(in srgb, var(--accent-blue) 16%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 22%, transparent);
}

.acc-a-inner p,
.acc-a-inner li {
  color: var(--text);
}
.acc-a-inner .muted,
.acc-a-inner p.note {
  color: var(--muted);
}
.outreach-custom-section h2 {
  margin-top: 0;
}

.scripts-outreach-section {
  margin-top: 36px;
  padding: 24px;
  text-align: left;
  scroll-margin-top: 24px;
}
.scripts-outreach-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.scripts-outreach-title {
  margin: 0 0 8px;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.scripts-outreach-desc {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 56ch;
}
.scripts-outreach-section #outreach-editor > h2:first-child {
  margin-top: 0;
}

.pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease;
}
.pill:hover:not(.active) {
  transform: scale(1.05);
  border-color: #aaa;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pill:active { transform: scale(0.94); }
.pill.active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
}
.pill.active:hover { transform: scale(1.03); }
.pill.active:active { transform: scale(0.96); }
.tpl-box .pill {
  padding: 5px 11px;
  font-size: 12px;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.tpl-box .pill:hover:not(.active) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--green) 32%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 80%, var(--green-bg));
}
.tpl-box .pill.active {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
html[data-theme="dark"] .tpl-box .pill.active {
  color: var(--btn-primary-fg);
}

.tpl-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 24px;
  color: var(--text);
  margin: 16px 0;
  overflow: visible;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
html[data-theme="dark"] .tpl-box {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.tpl-page-wrap {
  max-width: 560px;
  margin: 0 auto;
}
.tpl-page-lead {
  margin-bottom: 20px !important;
}
.tpl-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.tpl-row.tpl-field {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: none;
}
.tpl-row.tpl-row-actions {
  margin-top: 8px;
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.tpl-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.tpl-row-headline {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.tpl-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
  line-height: 1.2;
  font-weight: 500;
}
.tpl-field .tpl-label {
  margin-bottom: 2px;
}
.tpl-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.tpl-title-text {
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  flex: 1 1 140px;
  min-width: 0;
  line-height: 1.35;
}
.tpl-row-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 120px;
  min-width: 0;
}
.tpl-row-fields .tpl-input {
  flex: 1 1 160px;
  min-width: 0;
  width: auto;
  max-width: 100%;
}
.tpl-row-fields--phone {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}
.tpl-row-fields--phone .phone-country-wrap {
  flex: 0 0 auto;
}
.tpl-row-fields--phone .phone-country-trigger {
  min-height: 40px;
  height: 100%;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
}
.tpl-row-fields--phone .phone-country-flag {
  font-size: 16px;
}
.tpl-row-fields--phone .tpl-phone-input {
  flex: 1 1 auto;
  min-width: 0;
}
.tpl-row-fields--phone .tpl-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Shared phone country picker (Lead Builder, payout forms) */
.phone-country-wrap {
  position: relative;
  flex: 0 0 auto;
}

.phone-country-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.phone-country-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  min-height: 44px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.phone-country-trigger:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft, #eff6ff) 55%, var(--surface));
}

.phone-country-wrap.is-open .phone-country-trigger,
.phone-country-trigger:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-blue) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 14%, transparent);
}

.phone-country-flag {
  font-size: 18px;
  line-height: 1;
}

.phone-country-dial {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.phone-country-chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
}

.phone-country-wrap.is-open .phone-country-chevron {
  transform: rotate(180deg);
}

.phone-country-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 248px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--text) 12%, transparent),
    0 2px 8px color-mix(in srgb, var(--text) 6%, transparent);
  animation: phone-country-menu-in 0.18s ease;
}

@keyframes phone-country-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.phone-country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.phone-country-option:hover,
.phone-country-option:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent-blue-soft, #eff6ff) 70%, var(--surface));
}

.phone-country-option.is-selected {
  background: color-mix(in srgb, var(--accent-blue) 12%, var(--surface));
  font-weight: 600;
}

.phone-country-option-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.phone-country-option-name {
  flex: 1;
  min-width: 0;
}

.phone-country-option-dial {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .phone-country-menu {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .phone-country-menu {
    animation: none;
  }
  .phone-country-chevron {
    transition: none;
  }
}

.tpl-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--border));
  background: var(--green-bg);
  color: var(--green);
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
html[data-theme="dark"] .tpl-call-btn:not(.is-disabled) {
  color: var(--green);
}
.tpl-call-btn:hover:not(.is-disabled) {
  border-color: color-mix(in srgb, var(--green) 48%, var(--border));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
html[data-theme="dark"] .tpl-call-btn:hover:not(.is-disabled) {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, var(--surface-2));
}
.tpl-call-btn:active:not(.is-disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow);
}
.tpl-call-btn.is-disabled {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
  pointer-events: none;
  cursor: default;
  opacity: 0.72;
}
.tpl-call-ico {
  display: inline-flex;
  flex-shrink: 0;
}
.tpl-call-ico .ico,
.tpl-call-ico svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
.tpl-call-btn:not(.is-disabled) .tpl-call-ico .ico,
.tpl-call-btn:not(.is-disabled) .tpl-call-ico svg {
  stroke: currentColor;
}
.tpl-row-actions .btn-row,
.tpl-action-btns {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.tpl-row-body--actions {
  width: 100%;
}
.tpl-row-fields--pills {
  gap: 8px;
}
.tpl-row-fields--price {
  flex: 1 1 100%;
  flex-wrap: wrap;
}
.tpl-row-fields--price .tpl-price-pill {
  flex: 1 1 0;
  min-width: 0;
}
.tpl-price-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.2;
  text-align: center;
  position: relative;
}
.tpl-price-pill:hover,
.tpl-price-pill:focus-within {
  z-index: 80;
}
/* Package details tooltip on price-pill hover */
.tpl-price-tip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 240px;
  max-width: 78vw;
  padding: 12px 14px;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 70;
  white-space: normal;
  cursor: default;
}
html[data-theme="dark"] .tpl-price-tip {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.tpl-price-tip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: var(--surface);
}
.tpl-price-pill:hover .tpl-price-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Readable sizing inside the tooltip (overrides the compact panel sizes) */
.tpl-price-tip .tpl-price-detail-head {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 2px;
  color: var(--text);
}
.tpl-price-tip .tpl-price-detail-label {
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.tpl-price-tip .tpl-price-detail-list {
  gap: 8px;
}
.tpl-price-tip .tpl-price-detail-item {
  font-size: 12.5px;
  padding-left: 23px;
  line-height: 1.4;
  color: var(--text);
}
.tpl-price-tip .tpl-price-detail-item::before {
  top: 2px;
  width: 16px;
  height: 16px;
  background-size: 11px 11px;
}
.tpl-price-tip .tpl-price-detail-sub {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
}
@media (max-width: 560px) {
  .tpl-price-tip {
    width: 200px;
  }
}
.tpl-price-pill .tpl-price-amount {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.tpl-price-pill .tpl-price-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.7;
  white-space: normal;
  max-width: 92px;
  line-height: 1.2;
}
.tpl-box .pill.tpl-price-pill {
  padding: 9px 10px;
  min-height: 36px;
}
.tpl-price-details {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  animation: tpl-price-details-in 0.2s ease;
}
.tpl-price-detail-head {
  margin: 0 0 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tpl-price-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.tpl-price-detail-item {
  position: relative;
  padding-left: 16px;
  font-size: 9px;
  line-height: 1.3;
  color: var(--text);
}
.tpl-price-detail-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--green, #16a34a);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  background-position: center;
  background-repeat: no-repeat;
}
.tpl-price-detail-item--includes {
  font-weight: 600;
  color: var(--muted);
}
.tpl-price-detail-item--includes::before {
  background-color: color-mix(in srgb, var(--accent-blue) 12%, var(--surface));
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 28%, var(--border));
}
.tpl-price-detail-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.tpl-price-detail-sub-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tpl-price-detail-sub-val {
  font-size: 9px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
@keyframes tpl-price-details-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-price-details {
    animation: none;
  }
}
.tpl-row-actions .btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 10px;
  flex: 1 1 auto;
  box-shadow: none;
}
.tpl-row-actions .tpl-clear-btn {
  flex: 0 1 108px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
}
.tpl-row-actions .tpl-clear-btn:hover:not(.is-pressed),
.tpl-row-actions .tpl-clear-btn:focus-visible:not(.is-pressed) {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  transform: none;
  box-shadow: none;
}
.tpl-workflow-hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.tpl-workflow-hint[hidden] {
  display: none;
}
.tpl-row-actions .tpl-not-interested-btn {
  flex: 0 1 auto;
  white-space: nowrap;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
}
.tpl-row-actions .tpl-not-interested-btn:hover:not(:disabled):not(.is-pressed),
.tpl-row-actions .tpl-not-interested-btn:focus-visible:not(:disabled):not(.is-pressed) {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  transform: none;
  box-shadow: none;
}
.tpl-row-actions .tpl-not-interested-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tpl-row-actions .tpl-action-btn {
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    opacity var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}
.tpl-row-actions .tpl-action-btn.is-pressed {
  animation: tpl-action-btn-press 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.tpl-row-actions .tpl-action-btn.is-busy {
  opacity: 0.82;
  cursor: wait;
}
@keyframes tpl-action-btn-press {
  0% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.07);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 24%, transparent);
  }
  100% {
    transform: scale(1);
  }
}
.tpl-action-dialog-panel--success .site-leave-dialog-title {
  color: var(--green);
}
.tpl-action-dialog-panel--error .site-leave-dialog-title {
  color: #b91c1c;
}
html[data-theme="dark"] .tpl-action-dialog-panel--error .site-leave-dialog-title {
  color: #fca5a5;
}
.tpl-action-dialog-confirm--danger {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
.tpl-action-dialog-confirm--danger:hover,
.tpl-action-dialog-confirm--danger:focus-visible {
  background: #991b1b;
  border-color: #991b1b;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .tpl-row-actions .tpl-action-btn.is-pressed {
    animation: none;
    opacity: 0.88;
  }
}
.tpl-validation-msg.is-success {
  color: var(--green);
}
.tpl-row-actions .tpl-send-progress {
  flex: 1 1 0;
  min-width: 0;
}
.tpl-row-actions .btn:not(.secondary) {
  min-width: 0;
}
@property --tpl-progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.tpl-send-progress {
  --tpl-progress: 0;
  --tpl-ring-thickness: 3px;
  --tpl-ring-track: transparent;
  --tpl-ring-fill: var(--green);
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  background: conic-gradient(
    from -90deg,
    var(--tpl-ring-fill) 0turn,
    var(--tpl-ring-fill) calc(var(--tpl-progress, 0) * 1turn),
    var(--tpl-ring-track) calc(var(--tpl-progress, 0) * 1turn),
    var(--tpl-ring-track) 1turn
  );
  isolation: isolate;
  overflow: visible;
  transition:
    --tpl-progress 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.25s ease,
    background 0.25s ease;
}
.tpl-send-progress:not(.is-idle) {
  padding: var(--tpl-ring-thickness);
}
.tpl-send-progress-bar {
  display: none;
}
.tpl-send-progress::before,
.tpl-send-progress::after {
  display: none;
}
.tpl-send-progress.is-revealing {
  transition: none;
}
.tpl-send-progress.is-incomplete {
  --tpl-ring-fill: var(--green);
  --tpl-ring-track: transparent;
}
.tpl-send-progress.is-idle {
  background: transparent;
}
.tpl-send-progress.is-ready {
  --tpl-ring-fill: var(--green);
  --tpl-ring-track: var(--green);
  background: var(--green);
}
.tpl-send-progress.is-pulse {
  animation: tpl-send-ring-pulse-wrap 0.52s ease;
}
@keyframes tpl-send-ring-pulse-wrap {
  0%,
  100% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.12);
  }
}
.tpl-send-progress.is-shake {
  animation: tpl-send-shake 0.45s ease;
}
@keyframes tpl-send-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-send-progress.is-shake {
    animation: none;
  }
  .tpl-send-progress {
    transition: none;
  }
}
.tpl-send-progress .tpl-send-btn {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  border-radius: 7px;
  position: relative;
  z-index: 1;
  border: none !important;
  box-shadow: none !important;
  background: var(--surface) !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 0 14px;
}
.tpl-send-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.tpl-send-pct {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.7;
  min-width: 2.1em;
  text-align: right;
}
.tpl-send-btn.is-ready .tpl-send-pct {
  color: currentColor;
  opacity: 0.85;
}
.tpl-send-progress.is-ready .tpl-send-btn {
  background: transparent !important;
}
.tpl-send-btn.is-incomplete,
.tpl-send-btn.is-incomplete:hover,
.tpl-send-btn.is-incomplete:focus-visible,
.tpl-send-btn.is-incomplete:disabled {
  background: var(--surface) !important;
  color: color-mix(in srgb, var(--muted) 90%, var(--text)) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
  opacity: 1;
}
.tpl-send-btn.is-incomplete .tpl-send-ico,
.tpl-send-btn.is-incomplete .tpl-send-label {
  opacity: 0.55;
}
.tpl-send-btn.is-incomplete .tpl-send-pct {
  opacity: 0.65;
}
.tpl-send-btn.is-incomplete .tpl-send-ico {
  animation: none !important;
  transform: none !important;
}
.tpl-send-btn.is-ready {
  color: #ffffff;
  cursor: pointer;
  opacity: 1;
  background: transparent !important;
}
.tpl-send-progress.is-ready .tpl-send-btn.is-ready {
  color: #ffffff;
  font-weight: 600;
}
.tpl-send-btn {
  transition:
    background 0.18s ease,
    color 0.18s ease,
    filter 0.18s ease;
}
.tpl-send-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tpl-box .btn.secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  font-weight: 700;
}
.tpl-box .btn.secondary:hover {
  background: color-mix(in srgb, var(--surface-2) 78%, var(--green-bg));
  border-color: color-mix(in srgb, var(--green) 32%, var(--border));
  color: var(--text);
}
.tpl-box .btn:not(.secondary):not(.tpl-send-btn.is-incomplete) {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  font-weight: 800;
}
html[data-theme="dark"] .tpl-box .btn:not(.secondary) {
  color: var(--btn-primary-fg);
}
.tpl-box .btn:not(.secondary):hover {
  background: #26f08d;
  border-color: #26f08d;
  color: #032314;
}
.tpl-box .tpl-send-btn.is-ready:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: #ffffff;
  transform: none;
  box-shadow: none;
  filter: brightness(1.06);
}
html[data-theme="dark"] .tpl-box .tpl-send-btn.is-ready {
  color: #ffffff;
}
html[data-theme="dark"] .tpl-box .tpl-send-btn.is-ready:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: #ffffff;
  filter: brightness(1.08);
}
.tpl-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--green-bg));
  color: var(--green);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.tpl-info-btn .ico {
  width: 14px;
  height: 14px;
}
.tpl-info-btn:hover {
  background: var(--green-bg);
  border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  color: var(--green);
}
.tpl-info-btn.is-open {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}
html[data-theme="dark"] .tpl-info-btn.is-open {
  color: var(--btn-primary-fg);
}
.tpl-info-btn:active {
  transform: scale(0.94);
}
.tpl-info-wrap {
  position: relative;
  flex-shrink: 0;
}
.tpl-info-tooltip {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: min(260px, 72vw);
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  text-align: left;
  pointer-events: auto;
}
.tpl-info-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 8px;
  border: 6px solid transparent;
  border-bottom-color: var(--surface-elevated);
}
.tpl-info-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 7px;
  border: 7px solid transparent;
  border-bottom-color: var(--border);
  margin-bottom: -1px;
}
.tpl-info-tooltip-above {
  top: auto;
  bottom: calc(100% + 8px);
}
.tpl-info-tooltip-above::before {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: var(--surface-elevated);
}
.tpl-info-tooltip-above::after {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: var(--border);
  margin-bottom: 0;
  margin-top: -1px;
}
.tpl-info-tooltip[hidden] {
  display: none !important;
  pointer-events: none;
}
.tpl-info-tooltip p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}
.tpl-info-tooltip a.link-bold-blue {
  color: var(--accent-blue);
}
.tpl-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.tpl-input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: var(--focus-ring);
}
.tpl-input.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.tpl-field.is-invalid > .tpl-label {
  color: #dc2626;
}
.tpl-validation-msg {
  margin: 4px 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}
html[data-theme="dark"] .tpl-input.is-invalid {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
}
html[data-theme="dark"] .tpl-field.is-invalid > .tpl-label {
  color: #fca5a5;
}
html[data-theme="dark"] .tpl-validation-msg {
  color: #fecaca;
  background: color-mix(in srgb, #7f1d1d 35%, #1a1a1e);
  border-color: color-mix(in srgb, #ef4444 40%, #3f3f46);
}
.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none !important;
  box-shadow: var(--shadow);
  transition: box-shadow var(--dur-med) var(--ease-out), background var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn:hover,
.btn-primary:hover {
  box-shadow: var(--shadow-hover);
}
.btn:active,
.btn-primary:active {
  opacity: 0.92;
  box-shadow: var(--shadow);
}
.btn.secondary {
  background: var(--surface);
  color: var(--text) !important;
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.btn.secondary:hover,
a.btn.secondary:hover {
  background: var(--surface-elevated) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
  color: var(--text) !important;
}
.btn.secondary:active {
  opacity: 0.92;
}
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.lesson-video {
  margin-bottom: 28px;
}

.tpl-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tpl-page-head h1 {
  margin-bottom: 0;
}
.tpl-page-head .tpl-autosave-tag {
  flex-shrink: 0;
}
.tpl-footnote-block {
  margin: 16px 0 0;
}

.tpl-help-card {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.tpl-help-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease;
}

.tpl-help-toggle:hover,
.tpl-help-toggle:focus-visible {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}

.tpl-help-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -2px;
}

.tpl-help-card.is-open > .tpl-help-toggle {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.tpl-help-toggle-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tpl-help-toggle-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}

.tpl-help-toggle-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.tpl-help-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.tpl-help-toggle-action {
  color: var(--muted);
  font-weight: 600;
}

.tpl-help-toggle-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.65;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tpl-help-card.is-open .tpl-help-toggle-chevron {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.tpl-help-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  overflow: hidden;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tpl-help-card:not(.is-open) > .tpl-help-panel {
  visibility: hidden;
  pointer-events: none;
}

.tpl-help-card.is-open > .tpl-help-panel {
  visibility: visible;
  pointer-events: auto;
  grid-template-rows: 1fr;
}

.tpl-help-panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tpl-help-card.is-open > .tpl-help-panel > .tpl-help-panel-inner {
  padding: 14px 16px 16px;
}

.tpl-help-guide {
  margin: 0;
  padding: 0;
  text-align: left;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tpl-help-guide-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.tpl-help-guide-kicker {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tpl-help-guide-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.tpl-help-guide-lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.tpl-help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-2) 28%, var(--surface));
  counter-reset: tpl-help-step;
}

.tpl-help-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  padding: 14px 14px 13px;
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  counter-increment: tpl-help-step;
}

.tpl-help-step:last-child {
  border-bottom: none;
}

.tpl-help-step::before {
  content: counter(tpl-help-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  grid-row: 1 / -1;
  align-self: start;
}

.tpl-help-step-copy,
.tpl-help-demo {
  grid-column: 2;
}

.tpl-help-step-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.tpl-help-step-copy strong {
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.tpl-help-term {
  color: var(--text);
  font-weight: 600;
}

.tpl-help-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  pointer-events: none;
  user-select: none;
}

.tpl-help-demo .tpl-label {
  flex-shrink: 0;
  min-width: 5.5rem;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tpl-help-demo-fields {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tpl-help-demo-actions {
  width: 100%;
  justify-content: stretch;
  gap: 8px;
}

.tpl-help-demo .pill {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  color: var(--text);
  border-radius: 999px;
}

.tpl-help-demo .pill.active {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  color: var(--green);
}

html[data-theme="dark"] .tpl-help-demo .pill.active {
  color: var(--green);
}

.tpl-help-demo-input {
  display: inline-flex;
  align-items: center;
  flex: 1 1 120px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: var(--input-bg, var(--surface-2));
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.tpl-help-demo-phone {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tpl-help-demo-call {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--green) 38%, var(--border));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}

.tpl-help-demo-ico,
.tpl-help-demo-ico .ico {
  width: 12px;
  height: 12px;
}

.tpl-help-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.tpl-help-demo-btn--primary {
  flex: 1 1 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}

.tpl-help-demo-pct {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.75;
}

.tpl-help-demo-btn--secondary {
  flex: 0 1 88px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}

.tpl-help-guide-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.tpl-help-inline-ico {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 1px;
}

.tpl-help-inline-ico .ico {
  width: 13px;
  height: 13px;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .tpl-help-panel,
  .tpl-help-panel-inner,
  .tpl-help-toggle-chevron {
    transition: none;
  }
}

.tpl-footnote {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.tpl-footnote-ico {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 2px;
}

.tpl-footnote-ico .ico {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.tpl-autosave-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green-soft) 75%, var(--border));
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.tpl-autosave-tag.is-loading {
  color: var(--muted);
  background: #f8fafc;
  border-color: var(--border);
}
.tpl-autosave-tag-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
}
.tpl-autosave-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  box-sizing: border-box;
}
.tpl-autosave-tag.is-loading .tpl-autosave-spinner {
  display: block;
  animation: tpl-autosave-spin 0.65s linear infinite;
}
.tpl-autosave-tag.is-loading .tpl-autosave-check {
  display: none !important;
}
.tpl-autosave-check-ico {
  width: 14px;
  height: 14px;
  margin: 0;
  color: var(--green);
}
@keyframes tpl-autosave-spin {
  to {
    transform: rotate(360deg);
  }
}
html[data-theme="dark"] .tpl-autosave-tag {
  color: #6ee7b7;
  background: color-mix(in srgb, var(--green) 18%, #1a1a1e);
  border-color: color-mix(in srgb, var(--green) 35%, var(--border));
}
html[data-theme="dark"] .tpl-autosave-tag.is-loading {
  color: var(--muted);
  background: var(--input-bg);
  border-color: var(--border);
}
html[data-theme="dark"] .tpl-autosave-tag.is-loading .tpl-autosave-spinner {
  border-color: #3f3f46;
  border-top-color: #6ee7b7;
}
html[data-theme="dark"] .tpl-autosave-check-ico {
  color: #6ee7b7;
}
@media (prefers-reduced-motion: reduce) {
  .tpl-autosave-tag.is-loading .tpl-autosave-spinner {
    animation: none;
    border-top-color: var(--green);
    opacity: 0.85;
  }
}

/* Lead Builder · sent confirmation pill */
.tpl-sent-screen {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}
.tpl-sent-screen:not([hidden]) {
  display: flex;
}
.tpl-sent-screen.is-visible {
  opacity: 1;
  visibility: visible;
  animation: tpl-sent-screen-in 0.35s ease both;
}
html.tpl-sent-screen-open {
  overflow: hidden;
}
html.tpl-sent-screen-open body {
  overflow: hidden;
}
@keyframes tpl-sent-screen-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tpl-sent-screen-title {
  margin: 0 0 10px;
  width: min(100%, 380px);
  font-size: clamp(1.35rem, 4.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
}
.tpl-sent-screen-lead {
  margin: 0 0 22px;
  width: min(100%, 380px);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
.tpl-sent-screen--offline .tpl-sent-screen-title {
  color: #b45309;
}
html[data-theme="dark"] .tpl-sent-screen--offline .tpl-sent-screen-title {
  color: #fbbf24;
}
.tpl-sent-screen-leave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 160px);
  min-height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--text);
  border: 1px solid var(--text);
  color: var(--surface);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: filter 0.18s ease, background 0.18s ease;
}
.tpl-sent-screen-leave:hover,
.tpl-sent-screen-leave:focus-visible {
  background: color-mix(in srgb, var(--text) 88%, var(--muted));
  border-color: color-mix(in srgb, var(--text) 88%, var(--muted));
  color: var(--surface);
  text-decoration: none;
  filter: none;
  transform: none;
}
html[data-theme="dark"] .tpl-sent-screen-leave {
  background: color-mix(in srgb, var(--surface-2) 92%, var(--text));
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .tpl-sent-screen-leave:hover,
html[data-theme="dark"] .tpl-sent-screen-leave:focus-visible {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
  .tpl-sent-screen.is-visible {
    animation: none;
  }
}
.tpl-sent-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green-soft) 75%, var(--border));
  opacity: 0;
  transform: scale(0.92) translateY(4px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: none;
}
.tpl-sent-tag.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.tpl-sent-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  animation: tpl-sent-arrow 0.6s ease-out 0.15s both;
}
.tpl-sent-tag.is-visible .tpl-sent-arrow {
  animation: tpl-sent-arrow 0.6s ease-out 0.15s both;
}
@keyframes tpl-sent-arrow {
  0% {
    opacity: 0;
    transform: translateX(-6px);
  }
  60% {
    opacity: 1;
    transform: translateX(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
html[data-theme="dark"] .tpl-sent-tag {
  color: #6ee7b7;
  background: color-mix(in srgb, var(--green) 18%, #1a1a1e);
  border-color: color-mix(in srgb, var(--green) 35%, var(--border));
}
@media (prefers-reduced-motion: reduce) {
  .tpl-sent-tag,
  .tpl-sent-tag.is-visible {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .tpl-sent-arrow {
    animation: none;
  }
}

/* Lead Builder - inline info panels */
.tpl-price-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.55;
}
.tpl-info-panel .tpl-price-table {
  margin: 10px 0;
  max-width: 100%;
}
.tpl-info-panel .tpl-price-table table {
  font-size: 12px;
}
.tpl-info-panel .tpl-price-table th,
.tpl-info-panel .tpl-price-table td {
  padding: 6px 10px;
}
.tpl-info-panel .tpl-price-table td:last-child {
  font-weight: 600;
  color: #86efac;
}

/* Meet the Owner · compact card */
body[data-page="owner"] #page-body.owner-page {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 28px;
  padding-bottom: 40px;
}
body[data-page="about"] .about-owner-section {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
body[data-page="about"] #page-body.about-page {
  max-width: 960px;
  width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 48px;
  box-sizing: border-box;
}

/* Legacy certifications UI - removed */
body[data-page="about"] .owner-bio-certs-toggle,
body[data-page="about"] .owner-bio-pager,
body[data-page="about"] .owner-bio-creds,
body[data-page="about"] .owner-bio-certs-back {
  display: none !important;
}

.about-page-hero {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 640px;
}

.about-page-eyebrow,
.about-section-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.about-page-hero h1 {
  margin: 0 0 10px;
}

.about-page-lead {
  margin: 0;
  max-width: 52ch;
  margin-inline: auto;
}

.about-founder-section {
  margin-bottom: 8px;
  scroll-margin-top: 24px;
}

.about-section-intro {
  margin-bottom: 16px;
}

.about-section-intro--center {
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.about-section-title--left {
  text-align: left;
  margin-bottom: 0;
}

.about-section-desc {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.about-page-header {
  margin-bottom: 18px;
}
.about-page-header h1 {
  margin: 0 0 4px;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
}
.about-page-lead {
  margin: 0;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
  color: var(--muted);
}
.about-team-section {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 24px;
}
.about-owner-section {
  scroll-margin-top: 24px;
}
.about-section-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--text);
}
body[data-page="about"] .contributors-page-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body[data-page="about"] .contributors-page-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.owner-portfolio-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.owner-portfolio-main {
  min-width: 0;
}
.owner-portfolio-header {
  margin-bottom: 0;
}
.owner-portfolio-photo {
  display: block;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.owner-portfolio-name {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}
.owner-portfolio-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
}
.owner-portfolio-handle {
  font-weight: 600;
  color: var(--accent-blue, var(--accent));
}
.owner-portfolio-meta-sep {
  opacity: 0.45;
  user-select: none;
}
.owner-portfolio-role {
  font-weight: 600;
}
.owner-portfolio-bio {
  margin: 12px 0 14px;
  font-size: 16px;
  line-height: 1.6;
}
.owner-portfolio-bio p {
  margin: 0;
  color: var(--muted);
}
.owner-portfolio-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.owner-portfolio-creds li {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--border) 35%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 999px;
}
.owner-portfolio-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.owner-portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none !important;
  background: color-mix(in srgb, var(--border) 25%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 999px;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}
.owner-portfolio-link:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
}
.owner-portfolio-link-icon {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  body[data-page="owner"] #page-body.owner-page {
    padding-top: 16px;
  }
  .owner-portfolio-card:not(.owner-portfolio-card--featured) {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }
  .owner-portfolio-card:not(.owner-portfolio-card--featured) .owner-portfolio-photo {
    width: 88px;
    height: 88px;
    border-radius: 12px;
  }
}

/* About page · founder card */
body[data-page="about"] .owner-portfolio-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 32%);
  gap: clamp(20px, 3.5vw, 32px);
  align-items: stretch;
  padding: clamp(20px, 4vw, 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: none;
  overflow: visible;
}

body[data-page="about"] .owner-portfolio-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  gap: 16px;
  min-width: 0;
  padding-top: 2px;
}
body[data-page="about"] .owner-portfolio-visual {
  position: relative;
  margin: 0;
  min-width: 0;
  align-self: stretch;
  padding-bottom: 14px;
  overflow: visible;
}
body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(200px, 26vw, 300px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: none;
}
body[data-page="about"] .owner-portfolio-photo-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
body[data-page="about"] .owner-portfolio-badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translate(-50%, 50%);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: #111827;
  border: 2px solid color-mix(in srgb, var(--surface) 88%, #fff);
  border-radius: 999px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 18%, transparent);
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}
html[data-theme="dark"] body[data-page="about"] .owner-portfolio-badge {
  color: #111827;
  background: var(--btn-primary-bg);
  border-color: var(--surface);
}
body[data-page="about"] .owner-portfolio-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-name {
  font-size: clamp(1.65rem, 3.8vw, 2.15rem);
  letter-spacing: -0.04em;
}

body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-name--handle .owner-portfolio-handle {
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--text);
}

body[data-page="about"] .owner-portfolio-identity {
  min-width: 0;
}

body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-meta {
  margin-top: 6px;
  font-size: 14px;
}

body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-role {
  font-weight: 600;
  color: var(--text);
}

body[data-page="about"] .owner-contact-heading {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 48px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: contain;
  flex-shrink: 0;
}

body[data-page="about"] .owner-portfolio-link-label {
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="about"] .owner-portfolio-link-hint {
  display: none;
}
body[data-page="about"] .owner-portfolio-body {
  display: grid;
  gap: 14px;
}
body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-bio {
  margin: 0;
  width: 100%;
  font-size: clamp(16px, 2.2vw, 17px);
  line-height: 1.65;
}
body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-creds {
  margin: 0;
  gap: 8px;
}
body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-creds li {
  padding: 6px 12px;
  font-size: 13px;
}
body[data-page="about"] .owner-portfolio-contact--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 0;
  border-top: none;
}

body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
}

body[data-page="about"] .owner-portfolio-link--store {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
}
body[data-page="about"] .owner-portfolio-link--store:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}
@media (max-width: 720px) {
  body[data-page="about"] .owner-portfolio-card--featured {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body[data-page="about"] .owner-portfolio-visual {
    order: -1;
    max-width: 280px;
    width: 100%;
    margin-inline: auto;
  }

  body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-photo {
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
  }
}

@media (max-width: 520px) {
  body[data-page="about"] .owner-portfolio-card--featured {
    padding: 18px 16px 20px;
  }

  body[data-page="about"] .about-section-title--left {
    text-align: center;
  }

  body[data-page="about"] .owner-portfolio-heading {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
  }

  body[data-page="about"] .owner-portfolio-visual {
    max-width: 220px;
  }

  body[data-page="about"] .owner-portfolio-contact--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link {
    min-height: 48px;
    padding: 10px 12px;
  }

  body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link-icon {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 640px) {
  body[data-page="about"] #page-body.about-page {
    padding-top: 12px;
    padding-bottom: 36px;
    overflow-x: clip;
  }

  body[data-page="about"] .about-page-hero {
    margin-bottom: 18px;
  }

  body[data-page="about"] .about-page-hero h1 {
    font-size: clamp(1.65rem, 7vw, 2rem);
    line-height: 1.08;
  }

  body[data-page="about"] .owner-portfolio-card--featured {
    padding: 16px 14px 18px;
  }

  body[data-page="about"] .owner-portfolio-card--featured .owner-portfolio-name {
    font-size: 1.35rem;
  }

  body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link {
    min-height: 46px;
    padding: 10px 12px;
  }

  body[data-page="about"] .owner-portfolio-link-hint {
    display: none;
  }

  body[data-page="about"] .about-team-section {
    margin-top: 32px;
    padding-top: 28px;
  }

  body[data-page="about"] .contributors-card {
    padding: 16px 12px 18px;
  }

  body[data-page="about"] .owner-contributors-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
  }
}

/* About page · owner bio pager, certs, and contact layout */
body[data-page="about"] .about-owner-section {
  margin-bottom: 12px;
}

body[data-page="about"] .owner-portfolio-content {
  min-width: 0;
}

body[data-page="about"] .owner-portfolio-heading {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  margin-bottom: 0;
}

body[data-page="about"] .owner-portfolio-photo-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  border-radius: 18px;
  line-height: 0;
  overflow: visible;
}

body[data-page="about"] .owner-bio-certs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 6px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

body[data-page="about"] .owner-bio-certs-toggle:hover {
  border-color: color-mix(in srgb, var(--border) 100%, var(--text));
  background: var(--surface-2);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 6%, transparent);
}

body[data-page="about"] .owner-bio-certs-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body[data-page="about"] .owner-bio-certs-toggle[aria-expanded="true"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
}

body[data-page="about"] .owner-bio-certs-toggle-label {
  line-height: 1.2;
}

body[data-page="about"] .owner-bio-certs-toggle-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.7;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-page="about"] .owner-bio-certs-toggle[aria-expanded="true"] .owner-bio-certs-toggle-chevron {
  transform: rotate(-135deg) translateY(1px);
}

body[data-page="about"] .owner-bio-pager {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-page="about"] .owner-bio-pages {
  display: flex;
  width: 200%;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

body[data-page="about"] .owner-bio-pager[data-bio-page="certs"] .owner-bio-pages {
  transform: translateX(-50%);
}

body[data-page="about"] .owner-bio-pager.is-transitioning .owner-bio-pages {
  transition-duration: 0.42s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-page="about"] .owner-bio-page {
  width: 50%;
  flex: 0 0 50%;
  min-width: 0;
  box-sizing: border-box;
  padding-right: 2px;
}

body[data-page="about"] .owner-bio-lead {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: var(--muted);
}

body[data-page="about"] .owner-bio-certs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

body[data-page="about"] .owner-bio-certs-back:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-2);
}

body[data-page="about"] .owner-bio-certs-back-chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

body[data-page="about"] .owner-bio-creds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-page="about"] .owner-bio-cred {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}

body[data-page="about"] .owner-bio-cred--in-progress {
  border-color: color-mix(in srgb, var(--accent-blue) 22%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft) 35%, var(--surface-2));
}

body[data-page="about"] .owner-bio-cred-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  overflow: hidden;
}

body[data-page="about"] .owner-bio-cred-badge img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

body[data-page="about"] .owner-bio-cred-progress-svg {
  display: block;
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

body[data-page="about"] .owner-bio-cred-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

body[data-page="about"] .owner-bio-cred-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

body[data-page="about"] .owner-portfolio-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

body[data-page="about"] .owner-portfolio-actions .owner-portfolio-contact--grid {
  margin-top: 0;
  padding-top: 0;
}

body[data-page="about"] .owner-bio-close {
  margin: 0 0 14px;
  padding-top: 0;
  border-top: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}

body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link {
  min-height: 52px;
}

body[data-page="about"] .about-team-section {
  position: relative;
  z-index: 1;
  margin-top: 44px;
  padding-top: 40px;
}

body[data-page="about"] .contributors-card {
  padding: 22px 20px 26px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 40%, var(--surface));
}

html[data-theme="dark"] body[data-page="about"] .owner-portfolio-card--featured {
  background: var(--surface);
  box-shadow: none;
}

html[data-theme="dark"] body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link {
  background: color-mix(in srgb, var(--surface-elevated) 70%, transparent);
}

body[data-page="about"] .owner-contributors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  justify-items: center;
  gap: 20px 18px;
}

body[data-page="about"] .owner-contributor-item {
  width: 100%;
  max-width: 96px;
}

.owner-photo-lightbox {
  padding: 0;
  border: none;
  width: min(520px, calc(100vw - 32px));
  max-width: min(92vw, 520px);
  margin: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.owner-photo-lightbox::backdrop {
  background: rgba(15, 23, 42, 0.72);
}

.owner-photo-lightbox-panel {
  position: relative;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}

.owner-photo-lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 640px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: 12px;
}

.owner-photo-lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="about"] .owner-bio-pager,
  body[data-page="about"] .owner-bio-pages {
    transition: none;
  }
}

/* Legacy owner widget grid (unused) */
.owner-widgets-page > h1,
.owner-widgets-page > .lead {
  display: none;
}

/* Legacy owner card (contributors mention, etc.) */
.owner-card {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-md);
}
.owner-figure {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.owner-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  line-height: 1.2;
}
.owner-badge--mention {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold-soft) 92%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 35%, var(--border));
}
.owner-photo {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--bg);
}
.owner-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 0;
}
.owner-identity {
  margin: 0 0 2px;
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}
.owner-bio {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  font-weight: 450;
}
.owner-bio p {
  margin: 0 0 9px;
  color: var(--muted);
  font-weight: 500;
}
.owner-bio p:last-child {
  margin-bottom: 0;
}
.owner-page .owner-contact {
  margin-top: 14px;
  width: 100%;
}
.owner-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.owner-platform-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 10px;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none !important;
  color: inherit;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}
.owner-platform-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
  box-shadow: var(--shadow-md);
}
.owner-platform-btn:active {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}
.owner-platform-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.owner-platform-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.owner-platform-label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--text);
}
.owner-embed-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-sm) + 2px);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    background var(--dur-fast) ease,
    transform var(--dur-fast) ease;
}
.owner-embed-card:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: var(--shadow-md);
}
.owner-embed-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow-md);
}
.owner-embed-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accent-soft);
}
.owner-embed-card-icon--phone {
  color: var(--accent);
}
.owner-embed-card-icon--telegram {
  background: color-mix(in srgb, #229ed9 14%, var(--surface));
}
.owner-embed-card-icon--cal {
  color: #2563eb;
  background: color-mix(in srgb, #2563eb 12%, var(--surface));
}
.owner-embed-card-icon--store {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 12%, var(--surface));
}
.ico-owner-embed {
  width: 20px;
  height: 20px;
}
.owner-embed-app-icon {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.owner-embed-card-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.owner-embed-card-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
}
.owner-embed-card-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-embed-card-chev {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
}
.owner-embed-card.is-active .owner-embed-card-chev {
  transform: rotate(180deg);
  color: var(--accent);
}
.ico-owner-embed-chev {
  width: 16px;
  height: 16px;
}
.owner-embed-zone {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-sm) + 2px);
  background: color-mix(in srgb, var(--bg) 65%, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  animation: owner-embed-in 0.22s ease-out;
}
@keyframes owner-embed-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.owner-embed-panel-inner {
  padding: 16px;
}
.owner-embed-panel-lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 500;
  text-align: center;
}
.owner-embed-phone-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.owner-embed-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.owner-embed-action--primary {
  background: var(--accent-blue);
  border: 1px solid var(--accent-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
}
.owner-embed-action--primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
.owner-embed-action--secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.owner-embed-action--secondary:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: var(--shadow);
}
.owner-embed-action--wide {
  width: 100%;
  margin-top: 14px;
}
.ico-owner-embed-action {
  width: 18px;
  height: 18px;
}
.owner-embed-telegram-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}
.owner-embed-telegram-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.owner-embed-telegram-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.owner-embed-telegram-handle {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #229ed9;
}
.owner-embed-telegram-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.owner-embed-panel-inner--frame {
  padding: 0;
}
.owner-embed-frame {
  display: block;
  width: 100%;
  min-height: min(420px, 58vh);
  border: 0;
  background: var(--surface);
}
.owner-embed-external {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none !important;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.owner-embed-external:hover {
  color: var(--accent);
  background: var(--surface);
}
.ico-owner-embed-external {
  width: 14px;
  height: 14px;
}
.owner-mention {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.owner-mention-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.owner-mention-title .ico {
  width: 18px;
  height: 18px;
  color: var(--gold);
}
.owner-mention-lead {
  margin: 0 0 16px;
  font-size: 14px;
}
.owner-mention-card {
  display: grid;
  grid-template-columns: minmax(100px, 160px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--gold) 40%, var(--border));
  background: color-mix(in srgb, var(--gold-soft) 45%, var(--surface));
}
.owner-mention-figure {
  position: relative;
  margin: 0;
  line-height: 0;
}
.owner-mention-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  opacity: 0.88;
  filter: saturate(0.8);
}
.owner-mention-name {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.owner-mention-bio {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
}
@media (max-width: 860px) {
  .owner-card {
    grid-template-columns: 1fr;
    gap: 18px;
  padding: 16px 18px;
  }
  .owner-photo {
    max-width: min(260px, 72vw);
  }
}
@media (max-width: 520px) {
  .owner-card {
    padding: 14px 14px;
  }
  .owner-mention-card {
    grid-template-columns: 1fr;
  text-align: center;
}
  .owner-mention-photo {
    max-width: 200px;
    margin: 0 auto;
  }
  .owner-badge--mention {
    left: 50%;
    transform: translateX(-50%);
  }
}
html[data-theme="dark"] .owner-card {
  background: var(--surface-elevated);
}
html[data-theme="dark"] .owner-photo {
  background: var(--bg);
}
html[data-theme="dark"] .owner-platform-btn {
  background: var(--surface-elevated);
}
html[data-theme="dark"] .owner-platform-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-elevated));
}
html[data-theme="dark"] .owner-platform-icon {
  background: #fff;
}
html[data-theme="dark"] .owner-badge {
  background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
}
html[data-theme="dark"] .owner-mention-card {
  background: color-mix(in srgb, var(--gold-soft) 18%, var(--surface-elevated));
}

.contributors-page {
  max-width: 920px;
}

.contributors-page-header {
  margin-bottom: 20px;
}

.contributors-page-lead {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 42rem;
}

.contributors-card {
  padding: 24px 20px 28px;
}

.contributors-page .contributors-honorable.owner-mention {
  margin-top: 28px;
  margin-bottom: 8px;
}

.contributors-card .owner-contributors-grid {
  gap: 20px 16px;
}

.contributors-team-stats {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.contributors-team-stats-title {
  margin: 0 0 14px;
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.contributors-team-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0;
}

.contributors-team-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}

.contributors-team-stat--highlight {
  background: color-mix(in srgb, var(--green) 8%, var(--surface-elevated));
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
}

.contributors-team-stat dt {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.contributors-team-stat dd {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}

.contributors-team-stat--highlight dd {
  color: var(--green);
}

.contributors-team-stat-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

html[data-theme="dark"] .contributors-team-stat--highlight {
  background: color-mix(in srgb, var(--green) 12%, var(--surface-elevated));
}

.owner-contributors {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.owner-contributors-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.owner-contributors-title .ico {
  width: 18px;
  height: 18px;
  color: var(--accent-blue);
}

.owner-contributors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 18px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.owner-contributor-item {
  list-style: none;
}

.owner-contributor-item--loading {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}

.owner-contributors-loading {
  margin: 0;
  text-align: center;
  font-size: 14px;
}

.owner-contributor-item--share {
  margin: 0;
}

.owner-contributor-item--share .owner-contributor {
  width: 72px;
  margin-left: auto;
  margin-right: auto;
}

.owner-contributor--share {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.owner-contributor--share:focus-visible {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-blue);
  outline: none;
}

.owner-contributor-presence--spacer {
  visibility: hidden;
  pointer-events: none;
}

.owner-contributor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: default;
  border-radius: 12px;
  outline: none;
}

.owner-contributor:focus-visible {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-blue);
}

.owner-contributor-tooltip {
  position: absolute;
  z-index: 50;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(260px, 82vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.owner-contributor-tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--border);
}

.owner-contributor-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--surface-elevated);
}

.owner-contributor:hover .owner-contributor-tooltip,
.owner-contributor:focus .owner-contributor-tooltip,
.owner-contributor:focus-within .owner-contributor-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.owner-contributor-tooltip-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.35;
}

.owner-contributor-tooltip-role {
  font-weight: inherit;
  color: inherit;
}

.owner-contributor-tooltip-role--accent {
  font-weight: 600;
  color: var(--accent-blue);
}

.owner-contributor-tooltip-stats {
  margin: 0;
  display: grid;
  gap: 6px;
}

.owner-contributor-tooltip-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.owner-contributor-tooltip-stats dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.owner-contributor-tooltip-stats dd {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

.owner-contributor-tooltip-stats dd.is-online {
  color: #15803d;
}

html[data-theme="dark"] .owner-contributor-tooltip {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .owner-contributor-tooltip-stats dd.is-online {
  color: #86efac;
}

@media (hover: none) {
  .owner-contributor {
    cursor: pointer;
  }
}

.owner-contributor-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #eef2f6;
  border: 2px solid var(--surface);
  outline: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.owner-contributor-photo-wrap {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.owner-contributor-verified-badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 22px;
  height: 22px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95));
}

.owner-contributor-photo.owner-contributor-share-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 0;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-blue) 14%, #eef2f6) 0%,
    color-mix(in srgb, var(--accent-blue) 6%, #f8fafc) 100%
  );
  border: 2px dashed color-mix(in srgb, var(--accent-blue) 38%, var(--border));
  outline: none;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.1);
  color: var(--accent-blue);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.owner-contributor-photo.owner-contributor-share-photo .owner-contributor-share-ico {
  width: 28px;
  height: 28px;
  display: block;
  margin: 0;
  flex-shrink: 0;
  vertical-align: unset;
  transition: transform 0.12s ease;
}

.owner-contributor--share:hover .owner-contributor-share-photo,
.owner-contributor--share:focus-visible .owner-contributor-share-photo {
  border-color: color-mix(in srgb, var(--accent-blue) 72%, var(--border));
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-blue) 22%, #eef2f6) 0%,
    color-mix(in srgb, var(--accent-blue) 12%, #f8fafc) 100%
  );
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
  transform: translateY(-1px);
}

.owner-contributor--share:hover .owner-contributor-share-photo .owner-contributor-share-ico,
.owner-contributor--share:focus-visible .owner-contributor-share-photo .owner-contributor-share-ico {
  transform: scale(1.06);
}

html[data-theme="dark"] .owner-contributor-photo.owner-contributor-share-photo {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-blue) 22%, #27272a) 0%,
    color-mix(in srgb, var(--accent-blue) 10%, #1f1f23) 100%
  );
  border-color: color-mix(in srgb, var(--accent-blue) 42%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .owner-contributor--share:hover .owner-contributor-share-photo,
html[data-theme="dark"] .owner-contributor--share:focus-visible .owner-contributor-share-photo {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-blue) 30%, #27272a) 0%,
    color-mix(in srgb, var(--accent-blue) 16%, #1f1f23) 100%
  );
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22);
}

.owner-contributor-name-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
}

.owner-contributor-item--share .owner-contributor-name {
  width: 100%;
  text-align: center;
}

.owner-contributor-presence {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}

.owner-contributor-presence.is-online {
  background: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 28%, transparent);
}

html[data-theme="dark"] .owner-contributor-presence.is-offline {
  background: #64748b;
}

html[data-theme="dark"] .owner-contributor-presence.is-online {
  background: #4ade80;
  box-shadow: 0 0 0 2px color-mix(in srgb, #4ade80 32%, transparent);
}

.owner-contributor-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.25;
}

.owner-contributor-hint {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.35;
}

.owner-contributor-last-online {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}

.owner-contributor-last-online.is-online {
  color: #15803d;
}

html[data-theme="dark"] .owner-contributor-last-online.is-online {
  color: #86efac;
}

html[data-theme="dark"] .owner-contributor-photo {
  background: #27272a;
  border-color: var(--surface);
  outline-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.owner-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}
.owner-avatar .ico-owner {
  width: 24px;
  height: 24px;
  color: #fff;
}
.owner-card-meta {
  min-width: 0;
}
.owner-card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-blue);
  margin: 0 0 4px;
}
.owner-name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
  line-height: 1.2;
}
.owner-role {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  font-weight: 500;
}
.owner-card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  padding: 16px 24px 0;
  text-align: center;
}
.owner-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.owner-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  color: inherit;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.owner-action-btn:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow);
}
.owner-action-primary {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
  justify-content: space-between;
}
.owner-action-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
.owner-action-primary .owner-action-label {
  color: rgba(255, 255, 255, 0.85);
}
.owner-action-primary .owner-action-value {
  color: #fff;
}
.owner-action-primary > .ico:first-child {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.owner-action-primary .ico-arrow,
.owner-action-primary .ico-nav-trail {
  color: #fff;
  opacity: 0.9;
}
.owner-action-secondary {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
}
.owner-action-secondary > .ico:first-child {
  margin: 0;
}
.owner-action-btn > .ico:first-child {
  width: 18px;
  height: 18px;
  padding: 9px;
  box-sizing: content-box;
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  border-radius: 10px;
  flex-shrink: 0;
}
.owner-action-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  display: block;
}
.owner-action-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-top: 3px;
  word-break: break-word;
}
.owner-action-btn .owner-action-text {
  flex: 1;
  min-width: 0;
}
.owner-action-btn .ico-arrow,
.owner-action-btn .ico-nav-trail {
  flex-shrink: 0;
  opacity: 0.5;
  width: 18px;
  height: 18px;
}
.video-wrap {
  aspect-ratio: 16/9;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 16px 0;
}
.video-wrap iframe { width: 100%; height: 100%; border: 0; }
.video-placeholder { padding: 48px 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* All links page - NAME | URL table */
body[data-page="resources"] #page-body,
body[data-page="resources"] .resources-page {
  max-width: 980px;
}
.resources-redesign {
  text-align: left;
}
.links-lead {
  margin-bottom: 16px;
}
.resources-links-root {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.links-hub-toolbar {
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.links-hub-toolbar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.links-hub-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  min-width: 0;
}
.links-metric {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.links-metric strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.links-metric-visible strong {
  color: var(--accent-blue);
}
.links-metric-sep {
  color: var(--border);
  user-select: none;
}
.links-hub-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text) 12%);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}
.links-hub-search-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 48%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 14%, transparent);
}
.links-hub-search-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.72;
}
.links-hub-search-ico {
  width: 18px;
  height: 18px;
}
.links-hub-search {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.links-hub-search::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}
.links-hub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.links-hub-filter {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}
.links-hub-filter:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  color: var(--text);
}
.links-hub-filter.is-active {
  border-color: var(--accent-blue);
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 35%, transparent);
}
.links-hub-section {
  padding: 18px 18px 14px;
  margin-bottom: 0;
}
.links-hub-section[hidden] {
  display: none !important;
}
.links-hub-section-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.links-hub-section-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.links-hub-section-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.links-hub-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
}
.links-hub-section-ico {
  width: 18px;
  height: 18px;
}
.links-hub-section-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}
.links-hub-section-count {
  flex-shrink: 0;
  min-width: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.links-hub-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.links-hub-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.95fr) auto auto;
  align-items: center;
  gap: 10px 12px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}
.links-hub-row:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft) 45%, var(--surface-2));
  transform: translateY(-1px);
}
.links-hub-row:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.links-hub-row.is-filtered-out,
.links-hub-row[hidden] {
  display: none !important;
}
.links-hub-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
}
.links-hub-ico {
  width: 17px;
  height: 17px;
}
.links-hub-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.links-hub-row-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
}
.links-hub-row-hint {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.links-hub-row-path {
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  word-break: break-word;
}
.links-hub-row-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--muted);
}
.links-hub-row-badge--internal {
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
}
.links-hub-row-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.55;
}
.links-hub-ico-chevron {
  width: 16px;
  height: 16px;
}
.links-hub-row:hover .links-hub-row-chevron {
  opacity: 1;
  color: var(--accent-blue);
}
.links-hub-section-empty,
.links-hub-empty {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  font-size: 14px;
  text-align: center;
}
.links-hub-empty[hidden],
.links-hub-section-empty[hidden] {
  display: none !important;
}
#page-body .links-hub-row {
  color: var(--text);
  font-weight: inherit;
  text-decoration: none;
}
#page-body .links-hub-row:hover {
  color: var(--text);
}
@media (max-width: 760px) {
  .links-hub-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon main badge"
      "icon path chevron";
    gap: 6px 10px;
    padding: 12px;
  }
  .links-hub-row-icon { grid-area: icon; align-self: start; }
  .links-hub-row-main { grid-area: main; }
  .links-hub-row-path { grid-area: path; }
  .links-hub-row-badge { grid-area: badge; justify-self: end; }
  .links-hub-row-chevron { grid-area: chevron; justify-self: end; align-self: end; }
}
@media (max-width: 640px) {
  body[data-page="resources"] #page-body { max-width: 100%; }
  .links-hub-toolbar { padding: 12px 14px; }
  .links-hub-section { padding: 14px; }
}

/* Bug Bounty */
.bug-bounty-compact {
  margin-top: 16px;
  padding: 18px 20px;
}
@media (max-width: 640px) {
  .bug-bounty-compact {
    padding: 16px;
  }
}
.bug-bounty-oneline {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
}
.bug-bounty-payouts-head {
  margin: 0 0 10px;
  font-size: 15px;
}
.bug-bounty-table-compact td {
  font-size: 13px;
  padding: 8px 10px;
}
.bug-bounty-table-compact th {
  font-size: 11px;
  padding: 8px 10px;
}
.bug-bounty-intro {
  margin-top: 20px;
}
.bug-bounty-steps {
  margin: 0 0 16px;
  padding-left: 1.25em;
  line-height: 1.6;
  color: #334155;
}
.bug-bounty-steps li {
  margin-bottom: 0.5em;
}
.bug-bounty-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.bug-bounty-table-card {
  margin-top: 16px;
}
.bug-bounty-table-lead {
  margin: 0 0 12px;
  font-size: 14px;
}
.bug-bounty-table th {
  white-space: nowrap;
}
.bug-bounty-table td {
  vertical-align: top;
  font-size: 14px;
  line-height: 1.5;
}
.bug-bounty-amount {
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text);
  white-space: nowrap;
}
.bug-severity {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.bug-severity-low {
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.bug-severity-medium {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.bug-severity-high {
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.bug-severity-critical {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.feedback-card {
  margin-top: 20px;
}
.feedback-form-lead {
  margin: 0 0 18px;
  font-size: 14px;
}
.feedback-form input[readonly] {
  background: #f8fafc;
  color: var(--muted);
  cursor: default;
}
.bug-bounty-report {
  margin-top: 16px;
}
.bug-bounty-checklist {
  margin: 0;
  padding-left: 1.25em;
  line-height: 1.6;
  color: #334155;
}
.bug-bounty-checklist li {
  margin-bottom: 0.35em;
}
.bug-bounty-form-lead {
  margin: 0 0 18px;
  font-size: 14px;
}
.bug-report-simple .bug-report-as {
  margin: 0 0 14px;
  font-size: 14px;
}
.bug-report-simple .bug-report-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 0;
}
.bug-report-simple .bug-report-form .field {
  margin: 0;
}
.bug-report-upload-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.bug-report-file-btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}
.bug-report-simple .bug-report-actions {
  margin-top: 4px;
}
.bug-report-form {
  margin-top: 8px;
}
.bug-report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.bug-report-field-wide {
  grid-column: 1 / -1;
}
.bug-report-form .field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.bug-report-form .field-optional {
  font-weight: 500;
  color: var(--muted);
}
.bug-report-form .field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
}
.bug-report-form input[type="text"],
.bug-report-form select,
.bug-report-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.bug-report-form textarea {
  resize: vertical;
  min-height: 72px;
}
.bug-report-upload {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.bug-report-upload-hint {
  margin: 4px 0 12px;
  font-size: 13px;
}
.bug-report-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-blue);
  background: var(--accent-blue-soft);
  border: 1px dashed #93c5fd;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.bug-report-file-btn:hover {
  background: #dbeafe;
}
.bug-report-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.bug-report-preview {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f8fafc;
}
.bug-report-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bug-report-preview-file {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  font-size: 11px;
  text-align: center;
  word-break: break-word;
  color: var(--muted);
}
.bug-report-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.bug-report-status {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.45;
}
.bug-report-status-ok { color: var(--green); }
.bug-report-status-warn { color: #b45309; }
.bug-report-status-err { color: #b91c1c; }
.bug-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
@media (max-width: 640px) {
  .bug-report-grid {
    grid-template-columns: 1fr;
  }
  .bug-bounty-table:not(.bug-bounty-table-compact) thead {
    display: none;
  }
  .bug-bounty-table:not(.bug-bounty-table-compact) tr {
    display: block;
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
  }
  .bug-bounty-table:not(.bug-bounty-table-compact) td {
    display: block;
    padding: 4px 0;
    border: none;
  }
  .bug-bounty-table:not(.bug-bounty-table-compact) td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 2px;
  }

  /* Bug bounty payouts - card layout on small screens */
  .bug-bounty-compact .table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
    margin: 0;
    background: transparent;
  }
  .bug-bounty-table.bug-bounty-table-compact {
    display: block;
    width: 100%;
  }
  .bug-bounty-table.bug-bounty-table-compact thead {
    display: none;
  }
  .bug-bounty-table.bug-bounty-table-compact tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .bug-bounty-table.bug-bounty-table-compact tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
  }
  .bug-bounty-table.bug-bounty-table-compact tr:last-child td {
    border-bottom: none;
  }
  .bug-bounty-table.bug-bounty-table-compact td {
    display: block;
    padding: 0;
    border: none;
    font-size: 14px;
    line-height: 1.45;
  }
  .bug-bounty-table.bug-bounty-table-compact td::before {
    display: none;
  }
  .bug-bounty-table.bug-bounty-table-compact td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .bug-bounty-table.bug-bounty-table-compact td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--muted);
  }
  .bug-bounty-table.bug-bounty-table-compact td.bug-bounty-amount {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    text-align: right;
    font-size: 17px;
    white-space: nowrap;
  }
}

.link-grid { display: grid; gap: 8px; }
.link-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  color: inherit;
  font-weight: 500;
  font-size: 14px;
  box-shadow: var(--shadow);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.link-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.link-card .link-card-label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-blue);
  line-height: 1.3;
}
.link-card-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}
.link-card-compact {
  padding: 10px 12px;
  box-shadow: none;
}
.link-card-compact .link-card-label {
  font-size: 14px;
}
.link-card-compact > .ico:first-child {
  width: 16px;
  height: 16px;
  padding: 5px;
}
.link-card-compact:hover {
  transform: none;
  box-shadow: var(--shadow);
}
.link-card-featured {
  border-color: var(--green);
  background: linear-gradient(135deg, var(--green-bg) 0%, var(--surface) 100%);
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.08);
}
.link-card-featured .link-card-label {
  color: var(--green);
}
.link-card-featured:hover {
  border-color: var(--green);
}
.link-card-featured:hover > .ico:first-child {
  background: var(--green-soft);
  color: var(--green);
}
.mono-link {
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
}
.link-card > .ico:first-child {
  width: 18px;
  height: 18px;
  padding: 7px;
  box-sizing: content-box;
  background: var(--accent-soft);
  border-radius: 8px;
  color: var(--accent);
  flex-shrink: 0;
}
.link-card:hover > .ico:first-child {
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
}
.link-card:hover {
  border-color: #bbb;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px) scale(1.01);
}
.link-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow);
}
.link-card span:last-child {
  color: var(--muted);
  font-size: 18px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-card:hover span:last-child { transform: translateX(3px); }

code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

@media (min-width: 901px) {
  .sidebar {
    pointer-events: none;
  }
  .sidebar-panel {
    pointer-events: auto;
    transition: transform 0.25s ease;
  }
  body.sidebar-collapsed .sidebar-panel {
    transform: translateX(-100%);
  }
  body.sidebar-collapsed .sidebar-resize-handle {
    display: none;
  }
  body.sidebar-collapsed .main,
  body.sidebar-collapsed > #page-body {
    margin-left: 0;
    width: 100%;
  }
  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    top: 58px;
    left: var(--sidebar);
    transform: translate(-1px, -50%);
    padding: 14px 7px 14px 8px;
    margin: 0;
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow:
      4px 0 14px rgba(15, 23, 42, 0.05),
      inset 1px 0 0 rgba(255, 255, 255, 0.45);
  }
  .menu-btn span {
    display: none;
  }
  .menu-btn:hover {
    background: var(--surface-elevated);
    border-color: #cbd5e1;
  }
  body.sidebar-collapsed .menu-btn {
    left: 0;
    transform: translateY(-50%);
    border-left: 1px solid var(--border);
    box-shadow:
      2px 0 12px rgba(15, 23, 42, 0.08),
      inset -1px 0 0 rgba(255, 255, 255, 0.35);
  }
  .main,
  body > #page-body {
    transition: margin-left 0.25s ease, width 0.25s ease;
  }
}

@media (max-width: 900px) {
  .sidebar {
    pointer-events: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    transform: none;
    transition: none;
  }
  .sidebar-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar);
    height: 100%;
    padding: 22px 16px 32px;
    background: var(--surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.03);
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease;
    pointer-events: auto;
  }
  .sidebar-resize-handle {
    display: none;
  }
  .sidebar.open .sidebar-panel {
    transform: translateX(0) !important;
  }
  .sidebar-overlay.open { display: block; }
  .menu-btn {
    display: inline-flex;
    position: fixed;
    top: 12px;
    left: 12px;
    transform: none;
    border-left: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 10px 14px;
    pointer-events: auto;
  }
  .menu-btn span {
    display: inline;
  }
  #shell:has(#sidebar.open) #menu-btn {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }
  .main {
    margin-left: 0;
    width: 100%;
    padding: 64px 18px 80px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  body > #page-body {
    margin-left: 0;
    width: 100%;
    max-width: none;
    padding: 64px max(18px, env(safe-area-inset-right, 0px)) 80px max(18px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
  }
  body.legal-standalone-mode > #page-body,
  body[data-public="1"] > #page-body {
    padding-top: 24px;
    padding-bottom: max(48px, env(safe-area-inset-bottom, 0px));
  }
  body.legal-logged-in .legal-plain {
    padding-left: 0;
    padding-right: 0;
  }
  .grid-2, .grid-4, .grid-5, .role-split-grid, .tracker-grid, .tracker-summary, .tier-inputs, .tools-row { grid-template-columns: 1fr; }
  .tracker-summary, .dash-stats.tracker-summary { grid-template-columns: 1fr 1fr; }
  .dash-row-2 { grid-template-columns: 1fr; }
  .close-form-grid { grid-template-columns: 1fr; }
  .dash-close-fields { grid-template-columns: 1fr; }
  .dash-quicklinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-board-performance {
    flex-direction: column;
    align-items: stretch;
  }
  .dash-perf-main {
    width: 100%;
  }
  .dash-perf-stats {
    width: 100%;
  }
  .dash-stat-chip {
    flex: 1 1 0;
    min-width: 0;
  }
  .dash-board-work {
    grid-template-columns: 1fr;
  }
  .dash-board-log {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .dash-sale-fields {
    grid-template-columns: 1fr;
  }
  .deal-card { flex-direction: column; }
  .deal-delete { align-self: stretch; }
  .faq-qa-replies,
  .faq-qa-no-replies,
  .faq-qa-reply-form {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
}

.checklist-item-label { font-weight: 500; }
.checklist-item-link { font-weight: 600; white-space: nowrap; }

/* Compact horizontal setup checklist */
.checklist-compact {
  padding: 14px 16px 12px;
}
.checklist-compact-root {
  min-width: 0;
}
.checklist-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.checklist-progress-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.checklist-progress-rail {
  position: relative;
  padding: 0 2px 26px;
}
.checklist-progress-rail::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
}
.checklist-progress-fill {
  position: absolute;
  top: 9px;
  left: 8px;
  height: 3px;
  border-radius: 999px;
  background: var(--green);
  transition: width 0.35s var(--ease-out);
  z-index: 1;
  pointer-events: none;
  max-width: calc(100% - 16px);
}
.checklist-progress-steps {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.checklist-step-wrap {
  flex: 1 1 0;
  min-width: 44px;
  display: flex;
  justify-content: center;
}
.checklist-step-wrap--group-end {
  position: relative;
  margin-right: 6px;
  padding-right: 6px;
}
.checklist-step-wrap--group-end::after {
  content: "";
  position: absolute;
  top: 4px;
  right: -1px;
  width: 1px;
  height: 14px;
  background: color-mix(in srgb, var(--border) 90%, transparent);
}
.checklist-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  min-width: 0;
  transition: color 0.2s;
}
.checklist-step:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: 6px;
}
.checklist-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--border) 85%, var(--muted));
  background: var(--card, var(--surface));
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.checklist-step.is-done .checklist-step-dot {
  border-color: var(--green);
  background: var(--green);
}
.checklist-step.is-selected .checklist-step-dot {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 22%, transparent);
}
.checklist-step.is-done.is-selected .checklist-step-dot {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 28%, transparent);
}
.checklist-step:active .checklist-step-dot {
  transform: scale(0.92);
}
.checklist-step-label {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checklist-step.is-done {
  color: var(--text);
}
.checklist-step.is-selected .checklist-step-label {
  color: var(--accent-blue);
}
.checklist-step.is-done.is-selected .checklist-step-label {
  color: var(--green);
}
.checklist-progress-detail {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.checklist-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
}
.checklist-detail-row input {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--green);
  flex-shrink: 0;
  cursor: pointer;
}
.checklist-detail-text {
  flex: 1;
  min-width: 0;
}
@media (max-width: 640px) {
  .checklist-compact {
    padding: 12px 10px 10px;
  }
  .checklist-step-wrap {
    min-width: 40px;
  }
  .checklist-step-label {
    font-size: 8px;
    max-width: 44px;
  }
}
.everyday-tasks-lead {
  margin-bottom: 12px;
}
.everyday-tasks-footer {
  font-size: 13px;
  margin-top: 14px;
}
body[data-page="everyday-tasks"] #page-body,
body[data-page="everyday-tasks"] #page-body > .card {
  overflow: visible;
}
.everyday-tasks-table-wrap {
  max-width: 100%;
  overflow: visible;
}
.everyday-tasks-table,
.everyday-tasks-table tbody,
.everyday-tasks-table tr,
.everyday-tasks-table td {
  overflow: visible;
}
.everyday-tasks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.everyday-tasks-table thead th {
  padding: 4px 8px 8px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.everyday-tasks-table tbody tr.everyday-tasks-row {
  border-bottom: 1px solid var(--border);
}
.everyday-tasks-table tbody tr:last-child {
  border-bottom: none;
}
.everyday-tasks-table td {
  padding: 8px;
  vertical-align: middle;
  line-height: 1.35;
}
.everyday-tasks-step {
  width: 36px;
  text-align: center;
}
.everyday-tasks-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--accent-blue);
}
.everyday-tasks-what {
  position: relative;
  white-space: nowrap;
}
.everyday-tasks-tip {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  max-width: none;
  outline: none;
  cursor: help;
  white-space: nowrap;
}
.everyday-tasks-task {
  display: inline;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease;
}
.everyday-tasks-flow {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 8px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  white-space: nowrap;
}
.everyday-tasks-task-part {
  font-weight: 600;
  white-space: nowrap;
}
.everyday-tasks-flow-arrow {
  display: inline-block;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
}
.everyday-tasks-heading {
  display: inline;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
}
.everyday-tasks-label-stack {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  max-width: 100%;
}
.everyday-tasks-label-stack .everyday-tasks-heading {
  display: block;
  white-space: normal;
}
.everyday-tasks-bullets {
  margin: 6px 0 0;
  padding: 0 0 0 1.15em;
  list-style: disc;
  font-weight: 600;
  font-size: inherit;
  line-height: 1.35;
  color: var(--text);
}
.everyday-tasks-bullets li {
  margin: 0;
  padding: 0;
}
.everyday-tasks-bullets li::marker {
  color: var(--muted);
}
.everyday-tasks-inline-list {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  white-space: nowrap;
}
.everyday-tasks-inline-list li {
  margin: 0;
  white-space: nowrap;
}
.everyday-tasks-inline-list li::before {
  content: "• ";
  margin-right: 0.2em;
  color: var(--muted);
}
.everyday-tasks-tip:hover .everyday-tasks-flow,
.everyday-tasks-tip:focus .everyday-tasks-flow,
.everyday-tasks-tip:hover .everyday-tasks-heading,
.everyday-tasks-tip:focus .everyday-tasks-heading {
  border-bottom: 1px dashed var(--border);
}
.everyday-tasks-tip:hover .everyday-tasks-task,
.everyday-tasks-tip:focus .everyday-tasks-task {
  border-bottom-color: var(--border);
}
.everyday-tasks-tooltip {
  position: fixed;
  z-index: 10000;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.everyday-tasks-tooltip.is-measuring {
  opacity: 0 !important;
  visibility: hidden !important;
}
.everyday-tasks-tip.is-tip-open + .everyday-tasks-tooltip.is-placed:not(.is-measuring) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.1s ease;
}
.everyday-tasks-tooltip-list {
  margin: 0;
  padding: 0 0 0 1.1em;
  list-style: disc;
}
.everyday-tasks-tooltip-list li {
  margin: 0 0 4px;
}
.everyday-tasks-tooltip-list li:last-child {
  margin-bottom: 0;
}
@media (hover: none) {
  .everyday-tasks-tip {
    cursor: pointer;
  }
}
.everyday-tasks-open {
  width: 1%;
  min-width: 132px;
  text-align: right;
  white-space: nowrap;
}
.everyday-tasks-complete-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  line-height: 1;
  vertical-align: middle;
}
.everyday-tasks-complete-tag-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.everyday-tasks-complete-tag-ico .ico,
.everyday-tasks-complete-tag-ico svg {
  width: 14px;
  height: 14px;
  stroke: #166534;
}
.everyday-tasks-complete-tag-text {
  line-height: 1;
}
.course-everyday-table .everyday-tasks-complete-tag {
  padding: 5px 7px;
  font-size: 11px;
}
.course-everyday-table .everyday-tasks-complete-tag-ico,
.course-everyday-table .everyday-tasks-complete-tag-ico .ico,
.course-everyday-table .everyday-tasks-complete-tag-ico svg {
  width: 13px;
  height: 13px;
}
.everyday-tasks-builder-tag {
  display: inline-flex;
  pointer-events: none;
  cursor: default;
  vertical-align: middle;
  white-space: nowrap;
}
.everyday-tasks-builder-tag-text {
  line-height: 1;
}
.everyday-tasks-builder-tag .everyday-tasks-builder-tag-ico,
.everyday-tasks-builder-tag .everyday-tasks-builder-tag-ico .ico,
.everyday-tasks-builder-tag .everyday-tasks-builder-tag-ico svg {
  width: 14px;
  height: 14px;
}
.everyday-tasks-builder-tag--inline {
  min-height: 17px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  gap: 2px;
  vertical-align: baseline;
  margin: 0 1px;
  line-height: 1;
}
.everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-ico,
.everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-ico .ico,
.everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-ico svg {
  width: 9px;
  height: 9px;
}
.daily-loop-step-detail .everyday-tasks-builder-tag--inline,
.daily-loop-step-detail .lf-action-btn.everyday-tasks-builder-tag--inline {
  transform: none;
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  height: auto;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  gap: 2px;
  margin: 0 2px;
  line-height: 1;
  vertical-align: -0.1em;
  border-width: 0;
  box-shadow: none;
  letter-spacing: 0;
}
.daily-loop-step-detail .everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-ico,
.daily-loop-step-detail .everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-ico .ico,
.daily-loop-step-detail .everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-ico svg,
.daily-loop-step-detail .lf-action-btn.everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-ico,
.daily-loop-step-detail .lf-action-btn.everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-ico .ico,
.daily-loop-step-detail .lf-action-btn.everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-ico svg {
  width: 9px;
  height: 9px;
}
.daily-loop-step-detail .everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-text,
.daily-loop-step-detail .lf-action-btn.everyday-tasks-builder-tag--inline .everyday-tasks-builder-tag-text {
  font-size: inherit;
  line-height: 1;
}
.everyday-tasks-inline-btn {
  min-height: 17px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  gap: 2px;
  border-radius: 999px;
  vertical-align: baseline;
  margin: 0 1px;
  line-height: 1;
}
.daily-loop-step-detail .everyday-tasks-inline-btn {
  transform: none;
}
.course-everyday-table .everyday-tasks-builder-tag {
  min-height: 26px;
  padding: 5px 7px;
  font-size: 11px;
  gap: 4px;
}
.course-everyday-table .everyday-tasks-builder-tag .everyday-tasks-builder-tag-ico,
.course-everyday-table .everyday-tasks-builder-tag .everyday-tasks-builder-tag-ico .ico,
.course-everyday-table .everyday-tasks-builder-tag .everyday-tasks-builder-tag-ico svg {
  width: 13px;
  height: 13px;
}
.everyday-tasks-open-btn {
  font-size: 11px;
  padding: 5px 8px;
  min-height: 0;
}
.everyday-tasks-table tbody tr.everyday-tasks-row:hover {
  background: var(--accent-soft);
}
@media (max-width: 640px) {
  .everyday-tasks-open {
    width: auto;
    text-align: left;
    padding-top: 0;
  }
  .everyday-tasks-open-btn {
    width: 100%;
    justify-content: center;
  }
  .everyday-tasks-table thead th:last-child,
  .everyday-tasks-table td.everyday-tasks-open {
    padding-top: 8px;
  }
}

.checklist-hint {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

/* -- Business Finder (matches dashboard system) -- */
body[data-page="leads"] #page-body {
  max-width: 1120px;
  width: 100%;
  min-width: 0;
  text-align: left;
  box-sizing: border-box;
}
body[data-page="leads"] #page-body > .page-label {
  margin-left: 0;
}
body[data-page="leads"] #page-body > h1,
body[data-page="leads"] #page-body > .lead {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
body[data-page="leads"] .leads-lead {
  max-width: 56ch;
  margin-bottom: 8px;
}

body[data-page="home"] .dash-page-hero,
body[data-page="template"] .tpl-page-head,
body[data-page="contributors"] .contributors-page-header,
body[data-page="about"] .about-page-header,
body[data-page="about"] .about-page-hero,
body[data-page="about"] #page-body.about-page > h1,
body[data-page="about"] #page-body.about-page > .lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

body[data-page="template"] .tpl-page-head {
  position: relative;
  justify-content: center;
}

body[data-page="template"] .tpl-page-head .tpl-widget-mode-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

body[data-page="template"] .tpl-page-head .tpl-autosave-tag {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

body[data-page="template"] .tpl-page-head .tpl-sent-tag {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scale(0.92);
}
body[data-page="template"] .tpl-page-head .tpl-sent-tag.is-visible {
  transform: translateY(-50%) scale(1);
}

body[data-page="home"] .dash-page-hero h1,
body[data-page="leads"] #page-body > h1,
body[data-page="scripts"] #page-body > h1,
body[data-page="template"] .tpl-page-head h1,
body[data-page="outreach"] #page-body > h1,
body[data-page="checklist"] #page-body > h1,
body[data-page="owner"] #page-body > h1,
body[data-page="about"] .about-page-header h1,
body[data-page="about"] .about-page-hero h1,
body[data-page="about"] #page-body.about-page > h1,
body[data-page="contributors"] .contributors-page-header h1,
body[data-page="settings"] #page-body > h1,
body[data-page="faq"] #page-body > h1,
body[data-page="resources"] #page-body > h1,
body[data-page="feedback"] #page-body > h1,
body[data-page="bug-bounty"] #page-body > h1 {
  text-align: center;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px;
}

body[data-page="home"] .dash-page-lead,
body[data-page="leads"] #page-body > .lead,
body[data-page="scripts"] #page-body > .lead,
body[data-page="template"] #page-body > .lead,
body[data-page="template"] .tpl-page-lead,
body[data-page="outreach"] #page-body > .lead,
body[data-page="checklist"] #page-body > .lead,
body[data-page="owner"] #page-body > .lead,
body[data-page="about"] .about-page-lead,
body[data-page="about"] .about-page-hero .lead,
body[data-page="about"] #page-body.about-page > .lead,
body[data-page="contributors"] .contributors-page-lead,
body[data-page="settings"] #page-body > .lead,
body[data-page="faq"] #page-body > .lead,
body[data-page="resources"] #page-body > .lead,
body[data-page="feedback"] #page-body > .lead,
body[data-page="bug-bounty"] #page-body > .lead {
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}

body[data-page="home"] .dash-page-lead,
body[data-page="leads"] #page-body > .lead {
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  body[data-page="template"] .tpl-page-head .tpl-autosave-tag {
    position: static;
    transform: none;
    margin: 0 auto;
  }
  body[data-page="template"] .tpl-page-head .tpl-sent-tag {
    position: static;
    transform: none;
    margin: 8px auto 0;
  }
  body[data-page="template"] .tpl-page-head .tpl-sent-tag.is-visible {
    transform: none;
  }
  .tpl-row-fields--phone {
    gap: 6px;
  }
  .tpl-row-fields--phone .phone-country-wrap {
    flex: 0 0 auto;
    max-width: 4.75rem;
  }
  .tpl-row-fields--phone .phone-country-trigger {
    min-height: 36px;
    height: 36px;
    padding: 0 6px;
    gap: 3px;
    border-radius: 8px;
    font-size: 11px;
  }
  .tpl-row-fields--phone .phone-country-flag {
    font-size: 13px;
  }
  .tpl-row-fields--phone .phone-country-dial {
    font-size: 11px;
  }
  .tpl-row-fields--phone .phone-country-chevron {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
  }
  .tpl-row-fields--phone .tpl-phone-input {
    min-height: 36px;
    font-size: 14px;
  }
  .tpl-row-fields--phone .tpl-call-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }
  .tpl-row-actions .tpl-action-btns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
  }
  .tpl-row-actions .tpl-send-progress {
    grid-column: 1 / -1;
    width: 100%;
  }
  .tpl-row-actions .tpl-not-interested-btn,
  .tpl-row-actions .tpl-clear-btn {
    width: 100%;
    min-width: 0;
    flex: initial;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding-inline: 10px;
    font-size: 12px;
    min-height: 44px;
  }
}
.leads-toolbar-metrics {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.leads-metric {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.leads-metric strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.leads-metric-called strong {
  color: var(--green);
}
.leads-metric-sep {
  color: var(--border);
  font-weight: 400;
  user-select: none;
}

.leads-chips-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.leads-chips-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
}
.leads-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.leads-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.leads-chip:hover {
  border-color: var(--accent-blue);
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
}
.leads-chip.is-active {
  border-color: var(--accent-blue);
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 35%, transparent);
}
.leads-toolbar {
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.leads-toolbar-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.leads-toolbar-head .lf-refresh-btn {
  flex-shrink: 0;
}

.leads-db-status {
  margin: -4px 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.leads-db-status--error {
  color: var(--danger, #c0392b);
}

.leads-toolbar-search {
  width: 100%;
}

.lf-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text) 12%);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.lf-search-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(220px, 32vh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-elevated, var(--surface));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 12%, transparent);
}

.lf-search-suggest[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.lf-search-suggest-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.lf-search-suggest-item:hover,
.lf-search-suggest-item.is-active {
  background: color-mix(in srgb, var(--accent-blue) 12%, var(--surface));
}

.lf-search-suggest-label {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}

.lf-search-suggest-meta {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.lf-search-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 48%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 14%, transparent);
}

.leads-toolbar-search .lf-search-ico {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  opacity: 0.72;
  pointer-events: none;
}

.leads-toolbar-search .lf-search-ico .ico,
.leads-toolbar-search .lf-search-ico svg,
.lf-search-ico-svg {
  display: block;
  width: 18px;
  height: 18px;
}

.lf-search-input {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 42px;
  padding: 10px 0;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.lf-search-input::-webkit-search-decoration,
.lf-search-input::-webkit-search-results-button,
.lf-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.lf-search-input::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}

.lf-search-input:focus {
  outline: none;
}

.lf-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.lf-search-clear {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.lf-search-clear:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

.lf-search-clear .ico {
  width: 16px;
  height: 16px;
}

html[data-theme="dark"] .lf-search-wrap,
html[data-theme="dark"] .links-hub-search-wrap {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--border) 80%, #fff 20%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .lf-search-input,
html[data-theme="dark"] .links-hub-search {
  color: var(--text);
}

html[data-theme="dark"] .lf-search-clear:hover {
  background: rgba(148, 163, 184, 0.18);
}

.leads-toolbar-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
}

.leads-toolbar-categories {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.lf-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lf-filter-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  line-height: 1.2;
}

.lf-filter-view .lf-website-toggle,
.lf-filter-website .lf-website-toggle,
.lf-filter-advanced .lf-advanced-shell {
  display: flex;
  width: 100%;
}

.lf-advanced-shell {
  align-items: stretch;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px;
  background: #f8fafc;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}

.lf-advanced-shell:has(.lf-advanced-btn--active) {
  border-color: color-mix(in srgb, var(--accent-blue) 28%, #e2e8f0);
  background: color-mix(in srgb, var(--accent-blue-soft) 40%, #f8fafc);
}

.lf-advanced-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 36px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.lf-advanced-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.72);
}

.lf-advanced-btn--active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.lf-advanced-btn-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.72;
  transition: opacity var(--dur-fast) ease;
}

.lf-advanced-btn:hover .lf-advanced-btn-ico,
.lf-advanced-btn--active .lf-advanced-btn-ico {
  opacity: 1;
}

.lf-advanced-btn-label {
  white-space: nowrap;
}

.lf-advanced-dialog {
  width: min(360px, calc(100vw - 28px));
  max-width: min(360px, calc(100vw - 28px));
  max-height: min(78vh, 560px);
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  overflow: visible;
  box-shadow: none;
}

.lf-advanced-dialog::backdrop {
  background: rgba(15, 23, 42, 0.4);
}

.lf-advanced-dialog-panel,
.lf-advanced-dialog-panel.site-leave-dialog-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  max-height: min(78vh, 560px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
}

.lf-advanced-dialog-header {
  padding: 14px 14px 0;
  flex-shrink: 0;
}

.lf-advanced-dialog-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.lf-advanced-dialog-sub {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.lf-advanced-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.lf-advanced-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.lf-advanced-section:first-child {
  grid-column: auto;
}

.lf-advanced-section--split {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lf-advanced-section-title {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.lf-advanced-pills {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  overflow: visible;
}

.lf-advanced-pills .lf-toggle-btn {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
}

.lf-advanced-pills .lf-toggle-btn:hover:not(.active) {
  background: #fff;
  border-color: #cbd5e1;
}

.lf-advanced-pills .lf-toggle-btn.active {
  border-color: transparent;
}

.lf-advanced-dialog-actions,
.lf-advanced-dialog-actions.site-leave-dialog-actions {
  padding: 10px 14px 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--border));
}

.lf-advanced-dialog-actions .btn {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}

.lf-pill-toggle {
  align-items: stretch;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px;
  background: #f8fafc;
  gap: 2px;
}

.leads-toolbar-filters .lf-filter-view .lf-toggle-btn,
.leads-toolbar-filters .lf-filter-website .lf-toggle-btn,
.leads-toolbar-filters .lf-filter-advanced .lf-advanced-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.lf-filter-categories .leads-chips {
  gap: 5px;
  /* All LeadFinder niches - scroll rather than clipping to ~2 rows */
  max-height: 10.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.lf-filter-categories .leads-chip.is-empty {
  opacity: 0.45;
}

.lf-category-label-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.lf-category-available {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--green);
  letter-spacing: 0.01em;
}

.lf-filter-categories .leads-chip {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.leads-count {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.lf-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast);
}

.lf-refresh-btn:hover:not(:disabled) {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: var(--accent-blue);
}

.lf-refresh-btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.lf-refresh-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.lf-refresh-btn.is-loading .lf-refresh-ico {
  animation: lf-refresh-spin 0.75s linear infinite;
}

@keyframes lf-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.lf-refresh-ico {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  display: inline-flex;
}
.leads-toolbar-actions .pill.active {
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  border-color: #93c5fd;
}

.lf-website-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px;
  background: #f8fafc;
  gap: 2px;
}

.leads-toolbar-filters .lf-website-toggle {
  display: flex;
}
.lf-toggle-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.lf-toggle-btn:hover:not(.active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.7);
}
.lf-toggle-btn.active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.lf-toggle-btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.lf-workflow-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lf-workflow-select {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 36px;
  padding: 8px 32px 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  min-width: 9.5rem;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.lf-workflow-select:hover {
  border-color: #cbd5e1;
}
.lf-workflow-select:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-color: var(--accent-blue);
}
.leads-toolbar-hint {
  font-size: 13px;
  margin: 12px 0 0;
  line-height: 1.5;
}

.leads-page .lf-pending-toolbar {
  margin: 0 0 14px;
}

.leads-page .lf-pending-toolbar .leads-toolbar-filters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leads-page .lf-pending-section {
  margin: 0 0 18px;
}

.leads-page .lf-pending-section .dash-pending-head {
  margin-bottom: 12px;
}

.leads-page .lf-pending-section .dash-pending-list {
  margin: 0;
}

.dashboard-redesign .dash-pending-toolbar {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.dashboard-redesign .dash-pending-toolbar .leads-toolbar-filters,
.dashboard-redesign .dash-pending-toolbar-filters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-redesign .dash-toggle-pending-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}

.dashboard-redesign .dash-toggle-panel-inner > .dash-pending-toolbar {
  min-height: 0;
  overflow: visible;
}

.dashboard-redesign .dash-toggle-pending-list {
  display: grid;
  gap: 8px;
  max-height: min(56vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 2px 2px 4px;
  list-style: none;
  scrollbar-width: thin;
}

.leads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
  gap: 10px;
  margin-bottom: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Business Finder · pending toggle (matches dashboard design) */
.leads-page .leads-page-pending {
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.leads-page .leads-page-pending .dash-toggle-card {
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.leads-page .leads-page-pending .dash-pending-section.dash-toggle-card {
  padding: 0;
  margin: 0;
  min-height: 0;
  text-align: left;
}

.leads-page .leads-page-pending .dash-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.leads-page .leads-page-pending .dash-toggle-btn:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.leads-page .leads-page-pending .dash-toggle-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.leads-page .leads-page-pending .dash-toggle-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.leads-page .leads-page-pending .dash-toggle-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.leads-page .leads-page-pending .dash-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.leads-page .leads-page-pending .dash-toggle-label {
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leads-page .leads-page-pending .dash-toggle-card.is-open > .dash-toggle-btn {
  border-bottom: 1px solid var(--border);
}

.leads-page .leads-page-pending .dash-toggle-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  overflow: hidden;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.leads-page .leads-page-pending .dash-toggle-card:not(.is-open) > .dash-toggle-panel {
  visibility: hidden;
  pointer-events: none;
}

.leads-page .leads-page-pending .dash-toggle-card.is-open > .dash-toggle-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  pointer-events: auto;
}

.leads-page .leads-page-pending .dash-toggle-panel-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 0 16px;
  transition: padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.leads-page .leads-page-pending .dash-toggle-card.is-open > .dash-toggle-panel > .dash-toggle-panel-inner {
  padding: 12px 16px 14px;
}

.leads-page .leads-page-pending .dash-toggle-pending-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leads-grid.leads-grid--complete-split {
  display: block;
  grid-template-columns: none;
}

.lf-complete-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.lf-complete-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}

.lf-complete-pane--mine {
  background: color-mix(in srgb, var(--surface) 92%, #ecfdf5);
}

.lf-complete-pane--team {
  background: var(--surface);
}

.lf-complete-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.lf-complete-pane-head-copy {
  min-width: 0;
}

.lf-complete-pane-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}

.lf-complete-pane-desc {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.lf-complete-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}

.lf-complete-pane-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  margin: 0;
  max-height: min(52vh, 480px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.lf-complete-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.lf-complete-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast);
}

.lf-complete-row:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
}

.lf-complete-row-avatar {
  flex-shrink: 0;
}

.lf-complete-row-avatar .lf-avatar--compact {
  width: 34px;
  height: 34px;
  font-size: 11px;
  border-radius: 9px;
}

.lf-complete-row-rep-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  outline: none;
  box-shadow: none;
}

.lf-complete-row-rep-avatar .lf-rep-avatar-img {
  border-radius: 9px;
}

.lf-complete-row-body {
  min-width: 0;
  flex: 1 1 auto;
}

.lf-complete-row-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lf-complete-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.lf-complete-row-time {
  font-style: normal;
  color: color-mix(in srgb, var(--text) 45%, var(--muted));
}

.lf-complete-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.lf-complete-icon-btn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast);
}

.lf-complete-icon-btn:hover,
.lf-complete-icon-btn:focus-visible {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.lf-complete-menu-btn {
  font: inherit;
}

.lf-complete-ico,
.lf-complete-ico .ico {
  width: 14px;
  height: 14px;
}

.lf-complete-row-actions .lf-card-menu-wrap {
  position: relative;
}

.lf-complete-row-actions .lf-menu-panel {
  z-index: 1200;
}

.lf-completed-by {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.lf-complete-pane--mine .lf-completed-by {
  color: color-mix(in srgb, var(--text) 55%, #15803d);
}

.lf-complete-pane--team .lf-completed-by {
  color: color-mix(in srgb, var(--text) 55%, var(--accent-blue));
}

.lead-card--team-anon {
  overflow: hidden;
}

.lead-card--team-anon:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 22%, var(--border));
  box-shadow: var(--shadow-md);
}

.lf-team-anon-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  min-height: 72px;
}

.lf-team-anon-rep-col {
  flex-shrink: 0;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lf-rep-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2f6;
  border: 2px solid var(--surface);
  outline: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.lf-rep-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lf-rep-avatar-initials {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}

.lf-team-anon-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.lf-team-anon-rep {
  margin: 0;
  width: 100%;
  max-width: 72px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  color: var(--accent-blue);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lf-team-anon-business {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lf-team-anon-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lf-team-anon-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.lf-team-anon-status--complete {
  color: #15803d;
  background: #dcfce7;
}

.lf-team-anon-status--not-interested {
  color: #c2410c;
  background: #ffedd5;
}

.lf-team-anon-status--pending {
  color: #475569;
  background: #f1f5f9;
}

.lf-team-anon-when {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.lf-meta-dot {
  opacity: 0.55;
}

.lf-team-anon-actions {
  flex-shrink: 0;
  align-self: center;
}

.lf-team-anon-actions .lf-card-menu-wrap {
  position: relative;
}

@media (max-width: 960px) {
  .lf-complete-split {
    grid-template-columns: 1fr;
  }
}

.lead-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}
.lead-card:hover {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  box-shadow: var(--shadow-md);
}

.lf-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 8px;
  background: var(--surface);
  border-bottom: none;
}
.lf-card-identity {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  flex: 1;
}
.lf-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: "Fraunces", "Source Serif 4", Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.04em;
  color: #fff;
  background: linear-gradient(145deg, var(--lf-avatar-a, #0f766e), var(--lf-avatar-b, #14b8a6));
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 3px color-mix(in srgb, var(--lf-avatar-a, #0f766e) 16%, transparent);
}
.lf-avatar-img {
  display: none;
}
.lf-avatar--error {
  background: color-mix(in srgb, var(--danger, #dc2626) 18%, var(--surface-2));
  color: color-mix(in srgb, var(--danger, #dc2626) 72%, var(--text));
  box-shadow: none;
}
.lead-card--format-error {
  opacity: 0.72;
  border-color: color-mix(in srgb, var(--danger, #dc2626) 28%, var(--border));
  background: color-mix(in srgb, var(--danger, #dc2626) 4%, var(--surface));
  pointer-events: none;
}
.lead-card--format-error:hover {
  border-color: color-mix(in srgb, var(--danger, #dc2626) 28%, var(--border));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
}
.lf-card-subline--error {
  color: color-mix(in srgb, var(--danger, #dc2626) 78%, var(--text-muted));
  font-weight: 600;
}
.lf-status-chip-format-error {
  background: color-mix(in srgb, var(--danger, #dc2626) 12%, var(--surface));
  color: color-mix(in srgb, var(--danger, #dc2626) 82%, var(--text));
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 24%, var(--border));
}
.lf-format-error-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.lf-info-item--quote .lf-info-quote {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}
.lf-card-titles { min-width: 0; flex: 1; }
.lead-card-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 3px;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.lf-card-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
}
.lf-meta-dot {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  font-weight: 400;
  user-select: none;
}
.lf-rating-inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: color-mix(in srgb, #b45309 78%, var(--text));
}
.lf-rating-inline .lf-rating-ico {
  width: 10px;
  height: 10px;
  margin: 0;
  color: #d97706;
}
.lf-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.lf-tag-opportunity {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.lf-card-top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.lf-card-marks {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.lf-mark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  cursor: pointer;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast);
}

.lf-mark-btn:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: var(--text);
}

.lf-mark-btn.is-on {
  color: var(--text);
}

.lf-mark-save.is-on {
  color: #e11d48;
  background: #fff1f2;
  border-color: #fecdd3;
}

.lf-mark-save.is-on .lf-mark-ico {
  fill: currentColor;
  stroke: #e11d48;
}

.lf-mark-pin.is-on {
  color: #7c3aed;
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.lf-mark-btn .lf-mark-ico,
.lf-mark-btn .ico {
  pointer-events: none;
}
.lf-mark-ico {
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
}

.lead-card--pinned {
  border-color: color-mix(in srgb, #8b5cf6 38%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #8b5cf6 18%, transparent),
    0 10px 28px rgba(15, 23, 42, 0.06);
}

.lf-noweb-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  vertical-align: middle;
}
.lf-web-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  vertical-align: middle;
}

.lf-card-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.lf-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.lf-menu-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.lf-card-menu-wrap.is-open .lf-menu-btn {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--border) 65%, var(--text));
  color: var(--text);
}
.lf-menu-ico { width: 15px; height: 15px; margin: 0; }
.lf-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 148px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.lf-menu-panel.lf-menu-panel--fixed {
  position: fixed;
  right: auto;
  z-index: 1200;
}
.lf-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.lf-menu-item:hover {
  background: var(--accent-soft);
}
.lf-menu-item.is-active {
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
}
.lf-menu-item-restore {
  color: #15803d;
  font-weight: 600;
}
.lf-menu-item-restore:hover {
  background: #f0fdf4;
}
.lf-menu-item-danger { color: #b91c1c; }
.lf-menu-item-danger:hover { background: #fef2f2; }
.lf-menu-item-danger.is-active {
  background: #fee2e2;
  color: #991b1b;
}

.lf-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.lead-card .lf-card-body {
  padding: 4px 12px 8px;
  flex: 1;
  border-bottom: none;
}

.lf-card-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 6px;
  padding: 6px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.lf-card-phone:hover,
.lf-card-phone:focus-visible {
  background: var(--green-bg);
  border-color: color-mix(in srgb, var(--green) 35%, var(--border));
  color: var(--green);
  text-decoration: none;
}

.lf-card-phone--empty {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
}

.lf-card-phone-ico {
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
}

.lf-card-phone:hover .lf-card-phone-ico,
.lf-card-phone:focus-visible .lf-card-phone-ico {
  color: var(--green);
}

.lf-card-phone-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lf-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lf-info-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.lf-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: color-mix(in srgb, var(--muted) 65%, var(--text));
  flex-shrink: 0;
}

.lf-info-ico {
  width: 10px;
  height: 10px;
  margin: 0;
}

.lf-info-label {
  display: none;
}

.lf-info-value {
  min-width: 0;
}

.lf-info-content {
  min-width: 0;
}

.lf-info-content--phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.lf-info-text {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-info-text--compact {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lf-info-rating {
  color: color-mix(in srgb, #b45309 78%, var(--text));
  font-weight: 600;
}

.lf-info-item .lf-info-value .lf-info-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-info-item .lf-info-value .lf-info-text--compact {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lf-info-item .lf-info-value .lf-info-quote {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  font-style: italic;
}

.lf-info-text--muted {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.lf-info-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.lf-info-link:hover {
  color: var(--accent-blue);
  text-decoration: none;
}

.lf-detail-val-missing,
.lf-info-text.lf-detail-val-missing {
  color: #94a3b8;
  font-style: italic;
  font-weight: 500;
}

.lf-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--green);
  background: var(--green-bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--green);
  text-decoration: none;
  line-height: 1;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.lf-call-btn:hover,
.lf-call-btn:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
  text-decoration: none;
}

html[data-theme="dark"] .lf-call-btn:hover,
html[data-theme="dark"] .lf-call-btn:focus-visible {
  color: var(--btn-primary-fg);
}

.lf-call-btn-ico {
  width: 12px;
  height: 12px;
  margin: 0;
}

.lf-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 6px 8px 8px;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

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

.lf-website-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-website-badge--none {
  color: color-mix(in srgb, var(--accent-blue) 82%, var(--text));
  background: var(--accent-blue-soft, #eff6ff);
  border: 1px solid color-mix(in srgb, var(--accent-blue) 24%, var(--border));
}

.lf-website-badge--yes {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  border: 1px solid var(--border);
}

.lf-website-badge--yes:hover {
  color: var(--accent-blue);
  border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--border));
  background: var(--accent-blue-soft, #eff6ff);
  text-decoration: none;
}

.lf-website-link {
  word-break: normal;
}

.lf-website-none {
  font-style: normal;
}

.lf-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text) !important;
  text-decoration: none;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.lf-action-maps:not(.is-disabled) {
  color: color-mix(in srgb, var(--text) 62%, var(--accent-blue) 38%) !important;
}

.lf-action-btn:hover:not(.is-disabled):not(.lf-action-builder) {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  color: var(--text) !important;
  text-decoration: none;
}

.lf-action-maps:hover:not(.is-disabled) {
  color: var(--accent-blue);
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  background: var(--accent-blue-soft);
}

.lf-action-web:hover:not(.is-disabled) {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, var(--border));
  background: var(--green-bg);
}

.lf-action-builder {
  cursor: pointer;
  font-family: inherit;
  color: var(--btn-primary-fg, #fff) !important;
  background: var(--btn-primary-bg, var(--green)) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.lf-action-builder:hover:not(.is-disabled) {
  color: var(--btn-primary-fg, #fff) !important;
  border-color: transparent !important;
  background: color-mix(in srgb, var(--btn-primary-bg, var(--green)) 88%, #000 12%) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-primary-bg, var(--green)) 28%, transparent);
}

.lf-action-builder .lf-action-ico {
  opacity: 1;
}

.lf-action-btn.is-disabled {
  color: #cbd5e1;
  background: transparent;
  border-color: #f1f5f9;
  cursor: default;
  font-weight: 500;
  font-size: 11px;
}

.lf-action-ico {
  width: 11px;
  height: 11px;
  margin: 0;
  flex-shrink: 0;
  opacity: 0.85;
}

.lf-action-btn.is-disabled .lf-action-ico {
  opacity: 0.45;
}
.lf-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  flex-shrink: 0;
}
.lf-status-chip-done {
  color: var(--green);
  background: var(--green-bg);
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
}
.lf-status-chip-pending {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 65%, var(--surface));
  border-color: var(--border);
}
.lf-status-chip-not-interested {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fed7aa;
}
.lf-status-chip-muted {
  color: var(--muted);
  background: transparent;
  border-color: var(--border);
}
.leads-empty {
  text-align: center;
  padding: 40px 20px;
  font-size: 15px;
}
.leads-load-more {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  margin: 8px 0 24px;
  padding: 12px 16px 4px;
}
.lf-load-more-status {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.lf-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 18px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.lf-load-more-btn:hover {
  border-color: var(--accent-blue);
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  box-shadow: var(--shadow-md);
}
.lf-load-more-btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.leads-loading,
.leads-error {
  padding: 24px;
  font-size: 14px;
  text-align: center;
}
.leads-loading {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 180px;
}
.leads-loading-orb {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--surface) 52%, transparent 54%),
    conic-gradient(from 0deg, transparent, var(--accent-blue), var(--green), transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  animation: leads-loading-spin 0.9s linear infinite;
}
@keyframes leads-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes leads-loading-pulse {
  0%,
  100% {
    opacity: 0.62;
    box-shadow: inset 0 0 0 1px var(--border);
  }
  50% {
    opacity: 1;
    box-shadow: inset 0 0 0 1px var(--border);
  }
}
.leads-error code {
  font-family: var(--mono);
  font-size: 12px;
}

@media (max-width: 900px) {
}
@media (max-width: 900px) {
  .leads-toolbar-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lf-filter-view {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  body[data-page="leads"] #page-body { max-width: 100%; }
  .leads-grid { grid-template-columns: 1fr; }
  .leads-toolbar { padding: 12px 14px; gap: 10px; }
  .leads-toolbar-head {
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .leads-toolbar-metrics {
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px 6px;
  }
  .leads-metric {
    font-size: 12px;
  }
  .leads-metric strong {
    font-size: 16px;
  }
  .leads-toolbar-head .lf-refresh-btn {
    width: auto;
    flex-shrink: 0;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
    justify-content: center;
  }
  .leads-toolbar-filters {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lf-filter-view { grid-column: auto; }
  .lf-filter-view .lf-toggle-btn,
  .lf-filter-website .lf-toggle-btn,
  .lf-filter-advanced .lf-advanced-btn {
    flex: 1;
    padding-inline: 8px;
    font-size: 11px;
  }
  .lf-advanced-dialog {
    width: min(320px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(82dvh, 520px);
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    overflow: visible;
  }
  .lf-advanced-dialog-panel,
  .lf-advanced-dialog-panel.site-leave-dialog-panel {
    max-height: min(82dvh, 520px);
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  }
  .lf-advanced-dialog-header {
    padding: 12px 12px 0;
    flex-shrink: 0;
  }
  .lf-advanced-dialog-title {
    font-size: 14px;
  }
  .lf-advanced-dialog-sub {
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.35;
  }
  .lf-advanced-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 12px 6px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .lf-advanced-section:first-child {
    grid-column: auto;
  }
  .lf-advanced-section {
    gap: 4px;
  }
  .lf-advanced-section-title {
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .lf-advanced-section--split {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .lf-advanced-pills {
    gap: 4px;
    padding: 5px;
    border-radius: 9px;
  }
  .lf-advanced-pills .lf-toggle-btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 999px;
  }
  .lf-advanced-dialog-actions,
  .lf-advanced-dialog-actions.site-leave-dialog-actions {
    padding: 8px 12px 10px;
    justify-content: stretch;
    flex-shrink: 0;
    gap: 6px;
  }
  .lf-advanced-dialog-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 12px;
  }
  .lf-card-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lf-card-actions--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-info-content--phone { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lf-card-top { padding: 8px 10px 6px; }
  .lead-card .lf-card-body { padding: 2px 10px 6px; }
  .lf-card-phone { margin-inline: 10px; }
}

/* Payout method setup */
.setup-step-payout .payout-setup {
  margin-top: 16px;
  padding: 18px 20px;
}
.payout-setup-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.payout-methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.payout-method-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast);
}
.payout-method-btn:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow);
}
.payout-method-btn[aria-pressed="true"] {
  border-color: var(--accent-blue);
  background: var(--accent-blue-soft);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.payout-method-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.payout-method-icon-host {
  display: block;
  flex-shrink: 0;
}
.payout-method-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.payout-method-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.payout-method-cashapp .payout-method-icon { background: #00c244; }
.payout-method-venmo .payout-method-icon { background: #008cff; }
.payout-method-paypal .payout-method-icon { background: #003087; }
.payout-method-zelle .payout-method-icon { background: #6d1ed4; }
.payout-method-applepay .payout-method-icon { background: #1d1d1f; font-size: 22px; }
.payout-method-googlepay .payout-method-icon { background: #4285f4; }
.payout-method-stripe .payout-method-icon { background: #635bff; }
.payout-method-crypto .payout-method-icon { background: #f7931a; }
.payout-method-other .payout-method-icon { background: #94a3b8; font-size: 20px; }
.payout-method-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.payout-input-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.payout-field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.payout-input-hint {
  font-size: 13px;
  margin: 0 0 10px;
}
.payout-input-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
.payout-link-field-host {
  flex: 1;
  min-width: 200px;
}
.payout-link-field-host--phone .payout-phone-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.payout-phone-country {
  flex: 0 0 auto;
  max-width: 42%;
  min-width: 120px;
  padding: 10px 8px;
  font-size: 13px;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
}
.payout-phone-country:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.payout-link-field-host--phone .payout-phone-input {
  flex: 1;
  min-width: 0;
}
.survey-payout-field-host {
  width: 100%;
}
.payout-link-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--mono);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.payout-link-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.payout-status {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
}
.payout-status-ok { color: var(--green); }
.payout-status-warn { color: #b45309; }
.payout-status-err { color: #b91c1c; }
.payout-saved-preview {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--green-bg);
  border: 1px solid var(--green-soft);
}
.payout-saved-title {
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--muted);
}
.payout-saved-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.payout-saved-row-body {
  flex: 1;
  min-width: 0;
}
.payout-saved-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.payout-saved-link:hover {
  color: var(--accent);
}
.payout-saved-link--plain {
  cursor: default;
}
.payout-saved-link .payout-method-icon-wrap,
.payout-saved-link .payout-method-icon-host,
.payout-saved-icon.payout-method-icon-wrap,
.payout-saved-icon.payout-method-icon-host {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
}
.payout-saved-link .payout-method-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.payout-saved-handle {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.payout-saved-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.payout-saved-remove:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}
.payout-saved-text {
  font-family: var(--mono);
  font-size: 13px;
}

/* Accounts setup survey */
.survey-optional-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  vertical-align: middle;
}
.survey-optional-tag--rec {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.survey-choices--join {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.survey-done-muted {
  color: var(--muted);
  font-weight: 700;
}
.accounts-survey {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding: 0;
  max-width: 640px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.accounts-survey.card {
  margin-top: 12px;
}
.accounts-survey--loading .survey-stage {
  min-height: 88px;
}
.accounts-survey--loading .survey-progress-actions {
  visibility: hidden;
  pointer-events: none;
}
.survey-progress-wrap {
  flex-shrink: 0;
  margin: 0;
  padding: 14px 16px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-blue-soft) 55%, var(--surface)) 0%,
    var(--surface) 100%
  );
}
.survey-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  min-height: 28px;
}
.survey-progress-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.survey-progress-actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.survey-back,
.survey-restart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    color var(--dur-fast),
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast),
    opacity var(--dur-fast);
}
.survey-back:hover:not(:disabled),
.survey-restart:hover {
  color: var(--text);
  border-color: #cbd5e1;
  box-shadow: var(--shadow-md);
}
.survey-back:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.survey-back:focus-visible,
.survey-restart:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.survey-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.survey-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-blue) 0%, #4f46e5 100%);
  box-shadow: none;
  transition: width 0.4s var(--ease-out);
}
.survey-progress-wrap.is-incomplete .survey-progress-text {
  color: #d97706;
}
.survey-progress-wrap.is-incomplete .survey-progress-bar {
  background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%);
  box-shadow: none;
}
html[data-theme="dark"] .survey-progress-wrap.is-incomplete .survey-progress-text {
  color: #fbbf24;
}
.survey-stage {
  flex: 1;
  min-height: 240px;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.survey-step {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.survey-step-enter {
  animation: survey-fade-in 0.32s var(--ease-out);
}
@keyframes survey-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.survey-video-wrap {
  margin-top: 4px;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, 420px);
}
.survey-video-placeholder {
  padding: 20px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}
.survey-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 8px;
}
.survey-step-head {
  margin-bottom: 8px;
}
.survey-question--with-icon {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  max-width: 100%;
}
.survey-question-text {
  line-height: 1.25;
}
.survey-step-head + .survey-choices {
  margin-top: 18px;
}
.survey-step-head-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background: var(--surface);
  vertical-align: middle;
  display: block;
}
.survey-question {
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
  color: var(--text);
}
.survey-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.6;
  max-width: 42em;
}
.survey-sub.muted {
  font-size: 13px;
  margin-bottom: 14px;
}
.survey-sub:last-child {
  margin-bottom: 0;
}
.survey-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.survey-choices--proceed {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  align-items: center;
}
.survey-choice-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  padding: 14px 40px 14px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  line-height: 1.35;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast),
    transform var(--dur-fast);
}
.survey-choice-btn::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.survey-choice-btn:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft) 40%, var(--surface));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.survey-choice-btn:hover::after {
  color: var(--accent-blue);
  transform: translate(2px, -50%);
}
.survey-choice-btn.is-selected,
.survey-choice-btn[aria-pressed="true"] {
  border-color: var(--accent-blue);
  background: var(--accent-blue-soft);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.survey-choice-btn.secondary {
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.survey-choice-btn.secondary:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft) 40%, var(--surface));
  box-shadow: var(--shadow-md);
}
.survey-choice-btn.survey-choice-btn--danger {
  border-color: #b91c1c;
  background: #b91c1c;
  color: #fff;
}
.survey-choice-btn.survey-choice-btn--danger::after {
  color: rgba(255, 255, 255, 0.85);
}
.survey-choice-btn.survey-choice-btn--danger:hover {
  border-color: #991b1b;
  background: #991b1b;
  color: #fff;
}
.survey-choice-btn.survey-choice-btn--danger:hover::after {
  color: #fff;
}
.survey-choice-btn.survey-choice-btn--danger.is-selected,
.survey-choice-btn.survey-choice-btn--danger[aria-pressed="true"] {
  border-color: #991b1b;
  background: #991b1b;
  box-shadow: 0 0 0 2px color-mix(in srgb, #b91c1c 35%, transparent);
}
.survey-choice-btn.survey-proceed-btn {
  width: auto;
  min-width: 108px;
  min-height: 36px;
  margin: 0 auto;
  padding: 8px 14px;
  gap: 8px;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border: none;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.32);
}
.survey-choice-btn.survey-proceed-btn::after {
  display: none;
}
.survey-choice-btn.survey-proceed-btn .survey-proceed-label,
.survey-choice-btn.survey-proceed-btn .survey-proceed-arrow {
  color: #fff;
}
.survey-proceed-label {
  line-height: 1;
}
.survey-proceed-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: transform var(--dur-fast);
}
.survey-choice-btn.survey-proceed-btn:hover {
  background: #1d4ed8;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.38);
  transform: translateY(-1px);
}
.survey-choice-btn.survey-proceed-btn:hover .survey-proceed-label,
.survey-choice-btn.survey-proceed-btn:hover .survey-proceed-arrow {
  color: #fff;
}
.survey-choice-btn.survey-proceed-btn:hover .survey-proceed-arrow {
  transform: translateX(3px);
}
html[data-theme="dark"] .survey-choice-btn.survey-proceed-btn {
  background: #3b82f6;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35);
}
html[data-theme="dark"] .survey-choice-btn.survey-proceed-btn:hover {
  background: #2563eb;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}
.survey-payout-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.survey-payout-actions--method {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.survey-choice-btn.survey-payout-save {
  min-width: 128px;
}
.survey-choice-btn.survey-payout-save:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}
.survey-choice-btn.survey-payout-later {
  width: auto;
  min-width: 140px;
  min-height: 36px;
  margin: 0 auto;
  padding: 8px 14px;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.survey-choice-btn.survey-payout-later::after {
  display: none;
}
.survey-choice-btn.survey-payout-later:hover {
  color: var(--text);
  border-color: #cbd5e1;
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
html[data-theme="dark"] .survey-choice-btn.survey-payout-later:hover {
  border-color: #52525b;
  background: rgba(255, 255, 255, 0.06);
}
.survey-help-panel {
  margin-top: 12px;
  padding: 14px 16px 14px 18px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-blue-soft) 35%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent-blue) 18%, var(--border));
  border-left: 3px solid var(--accent-blue);
}
.survey-help-wizard .survey-help-progress {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.survey-help-wizard .survey-help-question {
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.35;
}
.survey-help-wizard .survey-sub {
  margin: 0 0 14px;
}
.survey-choices--stack {
  flex-direction: column;
  align-items: stretch;
}
.survey-choices--stack .survey-choice-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.survey-choices--stack a.survey-choice-btn {
  display: inline-flex;
  text-decoration: none;
  box-sizing: border-box;
}
.survey-help-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.survey-help-list li + li {
  margin-top: 6px;
}
.survey-install-steps {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  counter-reset: survey-install;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.survey-install-steps li {
  position: relative;
  margin: 0;
  padding: 12px 14px 12px 44px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  counter-increment: survey-install;
}
.survey-install-steps li::before {
  content: counter(survey-install);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.survey-install-steps strong {
  font-weight: 700;
  color: var(--text);
}
.survey-install-step-app {
  padding-top: 12px;
  padding-bottom: 12px;
}
.survey-app-icon-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.survey-app-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  object-fit: cover;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  display: block;
}
.survey-app-icon-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.survey-app-icon-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.survey-app-icon-title strong {
  font-weight: 700;
}
.survey-app-icon-meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.accounts-survey--embedded .survey-step-head-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.accounts-survey--embedded .survey-question--with-icon {
  gap: 6px;
}
.accounts-survey--embedded .survey-app-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.accounts-survey--embedded .survey-app-icon-title {
  font-size: 13px;
}
.accounts-survey--embedded .survey-app-icon-meta {
  font-size: 11px;
}
.survey-action-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 4px;
}
.survey-action-block .survey-action-link,
.survey-action-block .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.survey-action-link {
  text-decoration: none;
}
.telegram-embed-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #229ed9 22%, var(--border));
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.telegram-embed-card:hover {
  border-color: color-mix(in srgb, #229ed9 45%, var(--border));
  box-shadow: var(--shadow-md);
}
.telegram-embed-card:focus-visible {
  outline: 2px solid #229ed9;
  outline-offset: 2px;
}
.telegram-embed-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}
.telegram-embed-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: linear-gradient(145deg, #54c7f5, #229ed9);
  color: #fff;
}
.telegram-embed-body {
  min-width: 0;
  flex: 1;
  text-align: left;
}
.telegram-embed-name {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.telegram-embed-action {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #229ed9;
}
.telegram-embed-meta {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.2;
}
html[data-theme="dark"] .telegram-embed-card {
  background: var(--surface-elevated);
  border-color: color-mix(in srgb, #54c7f5 18%, var(--border));
}
html[data-theme="dark"] .telegram-embed-action {
  color: #54c7f5;
}
.accounts-survey--embedded .telegram-embed-card {
  padding: 7px 9px;
  gap: 8px;
}
.accounts-survey--embedded .telegram-embed-avatar {
  width: 36px;
  height: 36px;
}
.accounts-survey--embedded .telegram-embed-name {
  font-size: 12px;
}
.accounts-survey--embedded .telegram-embed-action {
  font-size: 11px;
}
.accounts-survey--embedded .telegram-embed-meta {
  font-size: 9px;
}
.survey-payout-methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 9px;
  margin-top: 2px;
}
.survey-payout-methods .payout-method-btn {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 0;
  width: 100%;
  padding: 10px 5px 9px;
  border-radius: 10px;
  border-width: 1px;
}
.survey-payout-methods .payout-method-btn::after {
  display: none;
}
.survey-payout-methods .payout-method-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}
.survey-payout-methods .payout-method-icon-wrap,
.survey-payout-methods .payout-method-icon-host {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.survey-payout-methods .payout-method-icon-wrap {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.survey-payout-methods .payout-method-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.survey-payout-methods .payout-method-applepay .payout-method-icon,
.survey-payout-methods .payout-method-other .payout-method-icon {
  font-size: 13px;
}
.survey-payout-methods .payout-method-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.survey-payout-methods .payout-method-btn:hover {
  transform: none;
}
.survey-input-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
}
.survey-payout-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 11px 14px;
  font-size: 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--input-bg);
}
.survey-payout-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.survey-done-card {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--green-bg) 50%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--border));
}
.survey-done-card--neutral {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}
.survey-done-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.survey-done-row {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.survey-done-row:last-child {
  margin-bottom: 0;
}
.survey-done-check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.survey-done-incomplete {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, #dc2626 88%, #fff);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.survey-done-row--incomplete {
  color: var(--text);
}
.survey-done-payout {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  background: transparent;
  border-radius: 0;
}
.survey-done-payout--incomplete .survey-sub {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}
.survey-done-return-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.survey-done-payout #survey-done-payout-list .payout-saved-row + .payout-saved-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
html[data-theme="dark"] .survey-done-incomplete {
  background: #b91c1c;
}
html[data-theme="dark"] .accounts-survey {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}
html[data-theme="dark"] .survey-progress-wrap {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-blue-soft) 80%, var(--surface)) 0%,
    var(--surface) 100%
  );
}
html[data-theme="dark"] .survey-progress-track {
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .survey-install-steps li {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
}
html[data-theme="dark"] .survey-help-panel,
html[data-theme="dark"] .survey-done-card,
html[data-theme="dark"] .survey-input-block {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .survey-choice-btn {
  background: var(--surface-elevated);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .survey-choice-btn.secondary {
  background: var(--surface-elevated);
  box-shadow: var(--shadow);
}
/* Legal pages - plain text only */
.legal-plain {
  max-width: 42rem;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
body.legal-standalone-mode .legal-plain {
  padding: 40px 20px 48px;
}
.legal-page-top {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 28px;
  padding: 10px 0 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.legal-standalone-mode .legal-page-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px 0;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

body.legal-standalone-mode .legal-page-toolbar {
  max-width: min(100%, 720px);
  margin: 0 auto;
  pointer-events: auto;
  border-radius: 999px;
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.12),
    0 1px 4px rgba(15, 23, 42, 0.06);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 0;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 6px 8px 6px 6px;
}

@media (max-width: 520px) {
  body.legal-standalone-mode .legal-page-top {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.legal-standalone-mode .legal-page-toolbar {
    border-radius: 16px;
    padding: 6px;
    gap: 6px;
  }

  .legal-page-back-label {
    display: none;
  }

  .legal-page-back {
    padding: 8px 10px;
    flex-shrink: 0;
  }
}

@media (max-width: 360px) {
  .legal-page-nav-btn {
    padding: 7px 3px;
    font-size: 10px;
  }
}

body.legal-standalone-mode .legal-plain-doc {
  padding-top: calc(var(--legal-topbar-height, 80px) + 16px);
}

.legal-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  min-width: 0;
}

.legal-page-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--muted);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  flex-shrink: 0;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.legal-page-back-ico {
  flex-shrink: 0;
  opacity: 0.72;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.legal-page-back:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--border) 75%, transparent);
  text-decoration: none;
}

.legal-page-back:hover .legal-page-back-ico {
  opacity: 1;
  transform: translateX(-2px);
}

.legal-page-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  min-width: 0;
  flex: 1 1 auto;
}

.legal-page-segment {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 65%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}

.legal-page-nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
  opacity: 0;
  transition:
    left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.legal-page-segment.is-ready .legal-page-nav-indicator {
  opacity: 1;
}

.legal-page-nav-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: 7px clamp(4px, 1.8vw, 14px);
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 650;
  font-family: var(--font);
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.2s ease;
}

.legal-page-nav-btn:hover {
  color: var(--text);
}

.legal-page-nav-btn.is-active {
  color: var(--text);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .legal-page-nav-indicator {
    transition: none;
  }
}
.legal-plain-doc h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
  line-height: 1.2;
  color: var(--text);
}
.legal-plain-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.legal-plain-text h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.legal-plain-text p {
  margin: 0 0 1em;
}
.legal-plain-text p:last-child {
  margin-bottom: 0;
}
body.legal-logged-in .legal-plain {
  max-width: 42rem !important;
}

/* Legacy legal styles (other pages) */
.legal-page-body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}
.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.legal-brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(145deg, #0f766e, #14b8a6);
}
.legal-topnav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.legal-topnav-link {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.legal-topnav-link:hover {
  color: var(--text);
  background: var(--accent-soft);
}
.legal-topnav-link.is-active {
  color: var(--accent-blue);
  background: var(--accent-blue-soft);
}
.legal-topnav-dashboard {
  margin-left: 4px;
  border: 1px solid var(--border);
}
.legal-doc-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}
.legal-in-app {
  max-width: 720px !important;
}
.legal-in-app .legal-doc {
  padding: 28px 28px 24px;
}
.legal-in-app .legal-doc-title {
  text-align: left;
}
.legal-in-app > .page-label {
  margin-left: 0;
}
.legal-doc {
  padding: 28px 28px 24px;
}
.legal-doc-label {
  margin-bottom: 8px;
}
.legal-doc-title {
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  line-height: 1.15;
}
.legal-prose {
  font-size: 15px;
  line-height: 1.65;
  color: #334155;
}
.legal-prose p {
  margin: 0 0 1.15em;
}
.legal-prose p:last-child {
  margin-bottom: 0;
}
.legal-prose strong {
  color: var(--text);
  font-weight: 600;
}
.legal-pill {
  display: inline-block;
  padding: 2px 9px;
  margin: 0 2px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.01em;
  color: #1e40af;
  background: var(--accent-blue-soft);
  border: 1px solid #bfdbfe;
  vertical-align: baseline;
  white-space: nowrap;
}
.legal-pill-accent {
  color: #0f766e;
  background: #ecfdf5;
  border-color: #99f6e4;
}
.legal-pill-list {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-pill-list li {
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
}
.legal-bullet-list {
  margin: 0 0 1.15em;
  padding-left: 1.25em;
  color: #334155;
}
.legal-bullet-list li {
  margin-bottom: 0.45em;
  line-height: 1.55;
}
.legal-updated {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  font-family: var(--mono);
}
.site-lock-legal {
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
.site-lock-legal-link {
  display: inline-block;
  color: #9ca3af !important;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}
.site-lock-legal-link:hover {
  color: #6b7280 !important;
}
.site-lock-legal-sep {
  color: #9ca3af !important;
  font-size: 11px;
  opacity: 0.55;
  user-select: none;
}

/* Legal pages - standalone (logged out) vs in-app (logged in) */
html.legal-early {
  background: #ffffff;
  color: #111827;
}

html.legal-early[data-theme="dark"] {
  background: #0f172a;
  color: #f8fafc;
}

body.legal-standalone-mode {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg, #ffffff);
  color: var(--text, #111827);
  font-family: var(--font);
  overflow-x: clip;
}
body.legal-standalone-mode #page-body {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 72px;
  padding-bottom: max(72px, env(safe-area-inset-bottom, 0px));
}
body.legal-standalone-mode .legal-plain {
  max-width: none;
  margin: 0;
  padding: 0;
}
.legal-standalone-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.legal-standalone-brand {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.legal-standalone-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.legal-standalone-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.legal-standalone-links a:hover {
  color: var(--text);
  background: var(--accent-soft);
}
.legal-standalone-links a.is-active {
  color: var(--accent-blue);
  background: var(--accent-blue-soft);
}
.legal-standalone-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 0 16px;
  font-size: 0.65rem;
  line-height: 1.4;
  text-align: center;
  color: #94a3b8;
}
.legal-standalone-foot a {
  color: #94a3b8;
  text-decoration: none;
  font-weight: 500;
}
.legal-standalone-foot a:hover {
  color: #64748b;
  text-decoration: underline;
}
body.legal-logged-in .legal-standalone-nav,
body.legal-logged-in .legal-standalone-foot {
  display: none !important;
}
@media (max-width: 640px) {
  .legal-doc {
    padding: 22px 18px 20px;
  }
  .legal-topbar {
    padding: 14px 16px;
  }
  .legal-plain {
    padding: 20px max(16px, env(safe-area-inset-left, 0px)) 48px max(16px, env(safe-area-inset-right, 0px));
  }
  body.legal-standalone-mode .legal-plain {
    padding: 20px max(16px, env(safe-area-inset-left, 0px)) 48px max(16px, env(safe-area-inset-right, 0px));
  }
  .legal-plain-doc h1 {
    font-size: 1.45rem;
  }
  .legal-plain-text {
    font-size: 16px;
    line-height: 1.65;
  }
  .legal-plain-text h2 {
    font-size: 1rem;
    margin-top: 1.75rem;
  }
}

/* Dark theme - super dark grey (full site) */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090b;
  --bg-top: #0c0c0e;
  --bg-bottom: #050506;
  --surface: #121214;
  --surface-elevated: #1a1a1e;
  --input-bg: #18181b;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --border: #27272a;
  --accent: #fafafa;
  --accent-soft: #18181b;
  --btn-primary-bg: #fafafa;
  --btn-primary-fg: #09090b;
  --btn-primary-border: #e4e4e7;
  --accent-blue: #60a5fa;
  --accent-blue-soft: #172554;
  --green: #4ade80;
  --green-bg: #052e16;
  --green-soft: #14532d;
  --gold: #fbbf24;
  --gold-soft: #451a03;
  --violet: #a78bfa;
  --violet-soft: #2e1065;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 16px 44px rgba(0, 0, 0, 0.7);
  --scrollbar-thumb: rgba(244, 244, 245, 0.16);
  --scrollbar-thumb-hover: rgba(244, 244, 245, 0.3);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 90% 60% at 50% -25%, rgba(255, 255, 255, 0.04), transparent 50%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 45%, var(--bg-bottom) 100%);
}

html[data-theme="dark"] #site-lock,
html[data-ui-color] #site-lock,
html[data-theme="dark"] #site-lock .site-lock-inner,
html[data-ui-color] #site-lock .site-lock-inner {
  background: #ffffff !important;
  color: #111827 !important;
  color-scheme: light;
}

html[data-theme="dark"] .site-lock-hint,
html[data-ui-color] .site-lock-hint {
  color: #6b7280 !important;
}

html[data-theme="dark"] .site-lock-input,
html[data-ui-color] .site-lock-input,
html[data-theme="dark"] #site-lock .site-lock-input,
html[data-ui-color] #site-lock .site-lock-input {
  color: #111827 !important;
  background: #ffffff !important;
  border-color: #d1d5db !important;
  box-shadow: none !important;
  color-scheme: light;
  -webkit-text-fill-color: #111827;
}

html[data-theme="dark"] .site-lock-input::placeholder,
html[data-ui-color] .site-lock-input::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af;
}

html[data-theme="dark"] .site-lock-input:disabled,
html[data-ui-color] .site-lock-input:disabled {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

html[data-theme="dark"] .site-lock-legal-link,
html[data-ui-color] .site-lock-legal-link {
  color: #9ca3af !important;
}

html[data-theme="dark"] .site-lock-legal-link:hover,
html[data-ui-color] .site-lock-legal-link:hover {
  color: #6b7280 !important;
}

html[data-theme="dark"] .site-lock-logo,
html[data-ui-color] .site-lock-logo {
  background: #ffffff !important;
}

html[data-theme="dark"] .sidebar-panel {
  background: var(--surface);
  border-right-color: var(--border);
  box-shadow: 4px 0 36px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .sidebar-rep-meta {
  color: var(--muted);
}

html[data-theme="dark"] .nav-link.active {
  background: #27272a;
  color: #fafafa !important;
  border: none;
  box-shadow: none;
}

html[data-theme="dark"] .nav-link.active .ico-nav,
html[data-theme="dark"] .nav-link.active .step-badge:not(.done-badge) {
  color: #fafafa;
}
html[data-theme="dark"] .nav-link.active .step-badge.done-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #6ee7b7;
  border-color: color-mix(in srgb, #6ee7b7 35%, var(--border));
}
html[data-theme="dark"] .nav-link.done:not(.active) .step-badge.done-badge {
  background: color-mix(in srgb, #10b981 12%, var(--surface-elevated));
  color: #6ee7b7;
  border-color: color-mix(in srgb, #10b981 22%, var(--border));
}

html[data-theme="dark"] .nav-start {
  background: #27272a;
  color: #fafafa !important;
  border: 1px solid #3f3f46;
}

html[data-theme="dark"] .sidebar .nav-link-important:not(.active) {
  color: var(--accent-blue);
}

html[data-theme="dark"] .sidebar .nav-link-important:not(.active):hover {
  color: #93c5fd;
}

html[data-theme="dark"] .menu-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow:
    4px 0 16px rgba(0, 0, 0, 0.35),
    inset 1px 0 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .menu-btn:hover {
  background: var(--surface-elevated);
  border-color: #52525b;
}

html[data-theme="dark"] body.sidebar-collapsed .menu-btn {
  box-shadow:
    2px 0 14px rgba(0, 0, 0, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .tool-card:hover,
html[data-theme="dark"] .lead-card:hover {
  border-color: #3f3f46;
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] a.btn:not(.secondary),
html[data-theme="dark"] .btn:not(.secondary) {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
}

html[data-theme="dark"] .btn.secondary {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .btn.secondary:hover {
  background: #27272a;
  border-color: #52525b;
  color: var(--text);
}

html[data-theme="dark"] .step-footer a.next {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
}

html[data-theme="dark"] .step-footer a:not(.next) {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .step-footer a:not(.next):hover {
  background: #27272a;
  border-color: #52525b;
}

html[data-theme="dark"] a.link-bold-blue.btn,
html[data-theme="dark"] a.btn.link-bold-blue,
html[data-theme="dark"] .survey-action-link.btn {
  color: var(--btn-primary-fg) !important;
}

html[data-theme="dark"] a.link-bold-blue.btn.secondary,
html[data-theme="dark"] a.btn.secondary.link-bold-blue {
  color: var(--text) !important;
}

html[data-theme="dark"] .settings-segment-btn:hover:not(.active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .survey-choice-btn:hover {
  border-color: #52525b;
}

html[data-theme="dark"] .survey-choice-btn.secondary:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft) 40%, var(--surface-elevated));
}
html[data-theme="dark"] .survey-choice-btn.survey-choice-btn--danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}
html[data-theme="dark"] .survey-choice-btn.survey-choice-btn--danger:hover {
  border-color: #b91c1c;
  background: #b91c1c;
}

html[data-theme="dark"] .earnings-tier-tab.active .val {
  color: var(--green);
}

html[data-theme="dark"] .tool-card > .ico:first-child {
  color: var(--text);
}

html[data-theme="dark"] .checklist-item-link {
  color: #93c5fd;
}
html[data-theme="dark"] .checklist-step-dot {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--border) 60%, #64748b);
}
html[data-theme="dark"] .checklist-progress-rail::before {
  background: color-mix(in srgb, var(--border) 50%, #1e293b);
}

html[data-theme="dark"] .deal-delete.btn.secondary {
  color: var(--text);
}

html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .feedback-form input,
html[data-theme="dark"] .feedback-form textarea,
html[data-theme="dark"] .bug-report-form input,
html[data-theme="dark"] .bug-report-form textarea,
html[data-theme="dark"] .bug-report-form select,
html[data-theme="dark"] .payout-link-input,
html[data-theme="dark"] .payout-phone-country,
html[data-theme="dark"] .lf-workflow-select {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .payout-link-input:focus,
html[data-theme="dark"] .payout-phone-country:focus {
  border-color: #52525b;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .feedback-form input[readonly] {
  background: var(--accent-soft);
  color: var(--muted);
}

html[data-theme="dark"] .tracker-stat {
  background: var(--input-bg);
}

html[data-theme="dark"] .path-item.current .path-num {
  background: #27272a;
  color: #fafafa;
}

html[data-theme="dark"] .earnings-tier-tab:hover {
  border-color: #52525b;
}

html[data-theme="dark"] .settings-segment {
  background: var(--accent-soft);
}

html[data-theme="dark"] .settings-segment-btn.active {
  background: var(--surface-elevated);
  color: var(--text);
}

html[data-theme="dark"] .lf-website-toggle,
html[data-theme="dark"] .lf-pill-toggle {
  background: var(--input-bg);
  border-color: var(--border);
}

html[data-theme="dark"] .lf-advanced-shell {
  background: var(--input-bg);
  border-color: var(--border);
}

html[data-theme="dark"] .lf-advanced-shell:has(.lf-advanced-btn--active) {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface));
}

html[data-theme="dark"] .lf-advanced-btn:hover {
  background: #27272a;
  color: var(--text);
}

html[data-theme="dark"] .lf-advanced-btn--active {
  background: #3f3f46;
  color: #fafafa;
  box-shadow: none;
}

html[data-theme="dark"] .lf-advanced-pills {
  background: var(--input-bg);
  border-color: var(--border);
}

html[data-theme="dark"] .lf-advanced-pills .lf-toggle-btn {
  background: var(--surface-elevated);
  border-color: var(--border);
}

html[data-theme="dark"] .lf-advanced-pills .lf-toggle-btn:hover:not(.active) {
  background: #27272a;
  border-color: #52525b;
}

html[data-theme="dark"] .lf-refresh-btn {
  background: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .lf-refresh-btn:hover:not(:disabled) {
  background: #27272a;
  border-color: #52525b;
  color: var(--accent-blue);
}

html[data-theme="dark"] .lf-toggle-btn:hover:not(.active) {
  background: #27272a;
  color: var(--text);
}

html[data-theme="dark"] .lf-toggle-btn.active {
  background: #3f3f46;
  color: #fafafa;
  box-shadow: none;
}

html[data-theme="dark"] .lf-menu-btn {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--muted);
}

html[data-theme="dark"] .lf-menu-btn:hover {
  background: #27272a;
  border-color: #3f3f46;
  color: var(--text);
}

html[data-theme="dark"] .lf-complete-pane {
  background: var(--surface-elevated);
  border-color: var(--border);
}

html[data-theme="dark"] .lf-complete-pane--mine {
  background: color-mix(in srgb, var(--surface-elevated) 88%, #052e16);
}

html[data-theme="dark"] .lf-complete-pane-head {
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}

html[data-theme="dark"] .lf-complete-count {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .lf-complete-row:hover {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border-color: var(--border);
}

html[data-theme="dark"] .lead-card--team-anon:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
}

html[data-theme="dark"] .lf-rep-avatar {
  background: #27272a;
  border-color: var(--surface);
  outline-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .lf-team-anon-rep {
  color: #60a5fa;
}

html[data-theme="dark"] .lf-team-anon-status--complete {
  color: #86efac;
  background: rgba(34, 197, 94, 0.15);
}

html[data-theme="dark"] .lf-team-anon-status--not-interested {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.15);
}

html[data-theme="dark"] .lf-team-anon-status--pending {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.15);
}

html[data-theme="dark"] .lf-card-menu-wrap.is-open .lf-menu-btn {
  background: #3f3f46;
  border-color: #52525b;
  color: #fafafa;
}

html[data-theme="dark"] .lf-mark-btn {
  color: #71717a;
}

html[data-theme="dark"] .lf-mark-btn:hover {
  background: #27272a;
  border-color: #52525b;
  color: #fafafa;
}

html[data-theme="dark"] .lf-mark-save.is-on {
  color: #fb7185;
  background: #4c0519;
  border-color: #9f1239;
}

html[data-theme="dark"] .lf-mark-pin.is-on {
  color: #a78bfa;
  background: #2e1065;
  border-color: #5b21b6;
}

html[data-theme="dark"] .lead-card--pinned {
  box-shadow: 0 0 0 1px #5b21b6, var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.2));
}

html[data-theme="dark"] .lf-card-actions {
  background: var(--accent-soft);
}

html[data-theme="dark"] .lf-action-btn {
  background: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .lf-call-btn {
  background: var(--green-bg);
  border-color: color-mix(in srgb, var(--green) 45%, var(--border));
  color: var(--green);
}

html[data-theme="dark"] .lf-action-btn:hover:not(.is-disabled),
html[data-theme="dark"] .lf-action-btn:hover:not(.is-disabled):not(.lf-action-builder) {
  background: #27272a;
  border-color: #52525b;
}

html[data-theme="dark"] .lf-call-btn:hover,
html[data-theme="dark"] .lf-call-btn:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: var(--btn-primary-fg);
}

html[data-theme="dark"] .lf-action-maps:hover:not(.is-disabled) {
  background: var(--accent-blue-soft);
  border-color: #1e40af;
  color: var(--accent-blue);
}

html[data-theme="dark"] .lf-action-web:hover:not(.is-disabled) {
  background: var(--green-bg);
  border-color: var(--green-soft);
  color: var(--green);
}

html[data-theme="dark"] .lf-action-builder {
  color: #fff;
  background: #16a34a;
  border-color: #15803d;
}

html[data-theme="dark"] .lf-action-builder:hover:not(.is-disabled) {
  background: #15803d;
  border-color: #166534;
  color: #fff;
}

html[data-theme="dark"] .lf-action-btn.is-disabled {
  background: transparent;
  border-color: var(--border);
  color: #52525b;
}

html[data-theme="dark"] .lf-tag-opportunity,
html[data-theme="dark"] .lf-noweb-tag {
  color: #93c5fd;
  background: #172554;
  border-color: #1e3a5f;
}

html[data-theme="dark"] .lf-web-tag {
  color: var(--muted);
  background: var(--accent-soft);
  border-color: var(--border);
}

html[data-theme="dark"] .lf-meta-dot {
  color: #52525b;
}

html[data-theme="dark"] .lf-menu-item-danger:hover {
  background: #450a0a;
}

html[data-theme="dark"] .bug-severity-low {
  color: #a1a1aa;
  background: #27272a;
  border-color: #3f3f46;
}

html[data-theme="dark"] .bug-severity-medium {
  color: #93c5fd;
  background: #172554;
  border-color: #1e3a5f;
}

html[data-theme="dark"] .bug-severity-high {
  color: #fbbf24;
  background: var(--gold-soft);
  border-color: #78350f;
}

html[data-theme="dark"] .bug-severity-critical {
  color: #fca5a5;
  background: #450a0a;
  border-color: #7f1d1d;
}

html[data-theme="dark"] .bug-bounty-checklist {
  color: var(--muted);
}

html[data-theme="dark"] .legal-page-back {
  color: var(--muted);
}

html[data-theme="dark"] .legal-page-back:hover {
  color: var(--text);
  background: var(--surface-elevated);
  border-color: var(--border);
}

html[data-theme="dark"] .legal-page-segment {
  background: color-mix(in srgb, var(--surface-elevated) 80%, var(--bg));
  border-color: var(--border);
}

html[data-theme="dark"] body.legal-standalone-mode .legal-page-toolbar {
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .legal-page-nav-indicator {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .legal-doc {
  background: var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .payout-method-btn {
  background: var(--surface-elevated);
  border-color: var(--border);
}

html[data-theme="dark"] .payout-method-btn:hover {
  border-color: #52525b;
}

html[data-theme="dark"] .payout-method-btn[aria-pressed="true"] {
  border-color: var(--accent-blue);
  background: var(--accent-blue-soft);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

html[data-theme="dark"] .dash-tracker {
  background: linear-gradient(180deg, var(--surface) 0%, var(--accent-soft) 100%);
}

html[data-theme="dark"] .dash-board-performance {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--green-bg) 22%, var(--surface)) 0%,
    var(--surface) 55%
  );
}

html[data-theme="dark"] .dash-goal-ring-track {
  stroke: color-mix(in srgb, var(--border) 60%, #27272a);
}

html[data-theme="dark"] .dash-quicklink {
  background: var(--surface-elevated);
}

html[data-theme="dark"] .dash-quicklink:hover {
  border-color: #52525b;
}

html[data-theme="dark"] .dash-pending-count {
  color: #cbd5e1;
  background: #334155;
  border-color: #475569;
}

html[data-theme="dark"] .dash-pending-item {
  background: var(--surface-elevated);
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
}

html[data-theme="dark"] .dash-stat-chip {
  background: var(--surface-elevated);
}

html[data-theme="dark"] .dash-sale-form {
  background: color-mix(in srgb, var(--bg) 40%, var(--surface-elevated));
}

html[data-theme="dark"] .dash-sale-money,
html[data-theme="dark"] .dash-sale-input {
  background: var(--surface-elevated);
}

html[data-theme="dark"] .dash-sale-money-symbol {
  background: color-mix(in srgb, var(--border) 55%, var(--surface-elevated));
}

html[data-theme="dark"] .deal-card {
  background: var(--input-bg);
}

html[data-theme="dark"] .deal-card:hover {
  border-color: #3f3f46;
}

html[data-theme="dark"] .pill.active {
  background: #3f3f46;
  color: #fafafa;
  border-color: #52525b;
}

html[data-theme="dark"] .pill:hover:not(.active) {
  border-color: #52525b;
}

html[data-theme="dark"] .acc-q {
  background: var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .path-item {
  background: var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .path-item:hover {
  border-color: #3f3f46;
}

html[data-theme="dark"] #page-body a[href]:hover,
html[data-theme="dark"] .link-card:hover .link-card-label {
  color: #93c5fd;
}

html[data-theme="dark"] .card h3,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2 {
  color: var(--text);
}

/* Settings page */
.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.settings-stack .settings-card {
  margin-bottom: 0;
}
.settings-card-wide {
  max-width: 640px;
}
.settings-data-inventory {
  margin: 12px 0 16px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-height: min(70vh, 520px);
  overflow-y: auto;
}
.settings-data-group {
  margin-bottom: 18px;
}
.settings-data-group:last-child {
  margin-bottom: 0;
}
.settings-data-group-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.settings-data-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-data-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 8px 16px;
  font-size: 0.92rem;
  align-items: start;
}
.settings-data-row dt {
  color: var(--muted);
  margin: 0;
  font-weight: 400;
}
.settings-data-row dd {
  margin: 0;
  font-weight: 500;
  word-break: break-word;
}
.settings-data-hint {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
.settings-data-note {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 14px 0 0;
}
.settings-status-inline {
  margin-top: 6px;
  min-height: 1.25em;
}
@media (max-width: 520px) {
  .settings-data-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.settings-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  margin: 0 -22px 16px;
  padding: 0 22px 12px;
  border-bottom: 1px solid var(--border);
}
.settings-hint {
  margin: 0 0 14px;
  font-size: 0.9rem;
}
.settings-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
}
.settings-status {
  margin: 10px 0 0;
  font-size: 0.9rem;
}
.settings-status.is-ok { color: var(--green); }
.settings-status.is-err { color: #dc2626; }
html[data-theme="dark"] .settings-status.is-err { color: #f87171; }
.settings-segment {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.settings-segment-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.settings-segment-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.settings-lf-select {
  width: 100%;
  max-width: 320px;
}
.settings-lf-segment {
  margin: 0 0 16px;
}
.settings-lf-reviews-segment {
  flex-wrap: wrap;
}
#settings-workspace .settings-toggle-row:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.settings-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.settings-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}
.settings-color-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.settings-color-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.settings-color-swatch {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  background: var(--color-swatch);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.34);
}
.settings-color-btn--cream { --color-swatch: linear-gradient(135deg, #8b6725, #efe3cc); }
.settings-color-btn--white { --color-swatch: #ffffff; }
.settings-color-btn--black { --color-swatch: #050505; }
.settings-color-btn--green { --color-swatch: #16a34a; }
.settings-color-btn--grey { --color-swatch: #64748b; }
.settings-color-btn--blue { --color-swatch: #2563eb; }
.settings-color-btn--purple { --color-swatch: #7c3aed; }
.settings-color-btn--red { --color-swatch: #dc2626; }
.settings-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 0.95rem;
  cursor: pointer;
}
.settings-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-blue);
}
.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.settings-toggle-copy {
  flex: 1;
  min-width: 0;
}
.settings-toggle-label {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.settings-toggle-row .settings-hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
}
.settings-toggle {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 26px;
  margin-top: 2px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accent-soft);
  cursor: pointer;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast);
}
.settings-toggle:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.settings-toggle.is-on {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}
.settings-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.settings-toggle.is-on .settings-toggle-thumb {
  transform: translateX(18px);
}
html[data-theme="dark"] .settings-toggle.is-on {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.settings-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.settings-actions-row--center {
  justify-content: center;
}
.settings-card .btn { margin-top: 4px; }
.settings-actions-row .btn {
  margin-top: 0;
}

.settings-profile-layout {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-top: 4px;
}
.settings-profile-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 104px;
}
.settings-profile-photo-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  max-width: 9rem;
}
.settings-profile-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}
.settings-profile-signed-in {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.settings-profile-signed-in strong {
  color: var(--text);
  font-weight: 600;
}
.settings-profile-name-field {
  margin: 0;
}
.settings-profile-photo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}
.settings-profile-photo-wrap.is-busy {
  pointer-events: none;
}
.settings-profile-photo-wrap.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  z-index: 3;
}
html[data-theme="dark"] .settings-profile-photo-wrap.is-busy::after {
  background: rgba(15, 23, 42, 0.55);
}
.settings-profile-photo-wrap.is-busy .settings-profile-photo-preview {
  opacity: 0.72;
}
.settings-profile-photo-wrap.is-loading .settings-profile-photo-img {
  opacity: 0;
  visibility: hidden;
}
.settings-profile-photo-wrap.is-loading .settings-profile-photo-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent-blue) 18%, var(--border));
  border-top-color: var(--accent-blue);
  animation: settings-profile-photo-spin 0.7s linear infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes settings-profile-photo-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-profile-photo-wrap.is-loading .settings-profile-photo-preview::before {
    animation: none;
    border-top-color: var(--accent-blue);
    opacity: 0.85;
  }
}
.settings-profile-photo-preview {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(145deg, var(--accent-soft), var(--surface-2));
  border: 2px solid var(--border);
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.settings-profile-photo-preview:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 14%, transparent);
}
.settings-profile-photo-preview:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.settings-profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.settings-profile-photo-initials {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.settings-profile-photo-reset {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--surface-elevated);
  color: var(--muted);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}
.settings-profile-photo-reset:hover {
  color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface-elevated));
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--surface));
}
.settings-profile-photo-reset:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.settings-profile-photo-reset-ico {
  width: 14px;
  height: 14px;
  display: block;
}
@media (max-width: 480px) {
  .settings-profile-layout {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .settings-profile-details {
    width: 100%;
    padding-top: 0;
    text-align: center;
  }
  .settings-profile-name-field {
    text-align: left;
  }
}
.settings-payout-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-payout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.settings-payout-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.settings-payout-item-icon,
.settings-payout-item .payout-method-icon-host,
.settings-payout-item .payout-method-icon-wrap {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.settings-payout-item .payout-method-icon {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.settings-payout-icon-link {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 10px;
  text-decoration: none;
}
.settings-payout-icon-link:hover {
  opacity: 0.92;
}
.settings-payout-item-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  color: var(--text);
  text-decoration: none;
}
#page-body .settings-payout-item-link[href] {
  color: var(--text);
  font-weight: inherit;
  text-decoration: none;
}
#page-body .settings-payout-item-link[href]:hover {
  color: var(--accent);
}
.settings-payout-item-link:hover {
  color: var(--accent);
}
.settings-payout-item-link--plain {
  cursor: default;
}
.settings-payout-handle {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.settings-payout-item-copy {
  min-width: 0;
  flex: 1;
}
.settings-payout-item-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.settings-payout-primary-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  text-decoration: none;
  cursor: default;
}
.settings-payout-link,
.settings-payout-link-text {
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
}
.settings-payout-link-text {
  color: var(--muted);
}
.settings-payout-toolbar {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.settings-payout-item-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
}
/* Admin sheets use bottom-drawer positioning in paws.css — exclude them here. */
body:not([data-page="admin"]) .site-leave-dialog,
.settings-payout-dialog {
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  margin: 0;
  box-shadow: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.site-leave-dialog::backdrop,
.settings-payout-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.site-leave-dialog-panel,
.settings-payout-dialog-panel {
  margin: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.settings-payout-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.settings-payout-dialog-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.settings-payout-dialog-sub {
  margin: 0 0 14px;
}
.settings-payout-default-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  max-height: min(50vh, 320px);
  overflow-y: auto;
}
.settings-payout-default-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  cursor: pointer;
}
.settings-payout-default-option.is-selected,
.settings-payout-default-option:has(input:checked) {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue-soft);
}
.settings-payout-default-option input {
  margin-top: 4px;
  flex-shrink: 0;
}
.settings-payout-default-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-payout-default-label {
  font-size: 14px;
  font-weight: 700;
}
.settings-payout-default-detail {
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
  line-height: 1.4;
}
.settings-payout-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.settings-payout-dialog-close {
  margin-top: 2px;
}

.site-leave-dialog-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.site-leave-dialog-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.site-leave-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.tpl-action-dialog-field {
  margin: 0 0 16px;
}
.tpl-action-dialog-input {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--input-bg, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  resize: vertical;
  box-sizing: border-box;
}
.tpl-action-dialog-input::placeholder {
  color: var(--muted);
}
.tpl-action-dialog-input:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}
/* Lead Builder widget · NI dialog is portaled to body so it escapes widget zoom. */
.tpl-action-dialog.tpl-action-dialog--widget-portal {
  width: min(560px, calc(100vw - 24px));
  z-index: 100050;
}
.tpl-action-dialog.tpl-action-dialog--widget-portal:not([open]) {
  display: none !important;
}
.tpl-action-dialog.tpl-action-dialog--reason {
  width: min(420px, calc(100vw - 28px));
}
.tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-panel {
  padding: 16px 16px 14px;
}
.tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-title {
  margin-bottom: 6px;
  font-size: 16px;
}
.tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-text {
  margin-bottom: 10px;
  font-size: 13px;
}
.tpl-action-dialog.tpl-action-dialog--reason .tpl-action-dialog-field {
  margin-bottom: 12px;
}
.tpl-action-dialog.tpl-action-dialog--reason .tpl-action-dialog-field--choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tpl-action-dialog-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tpl-action-dialog-choice {
  margin: 0;
  padding: 10px 12px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-elevated, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.tpl-action-dialog-choice:hover,
.tpl-action-dialog-choice:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent, #2563eb) 40%, var(--border));
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--surface));
}
.tpl-action-dialog-choice.is-active,
.tpl-action-dialog-choice--other.is-active {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 55%, var(--border));
  background: color-mix(in srgb, var(--accent, #2563eb) 14%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}
.tpl-action-dialog.tpl-action-dialog--reason .tpl-action-dialog-input {
  min-height: 56px;
  max-height: 22vh;
  padding: 8px 10px;
  font-size: 14px;
  resize: vertical;
}
.tpl-action-dialog.tpl-action-dialog--reason .tpl-action-dialog-input[hidden] {
  display: none !important;
}
.tpl-action-dialog.tpl-action-dialog--reason .tpl-action-dialog-input.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-actions {
  gap: 8px;
}
.tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-actions .btn[hidden] {
  display: none !important;
}
.site-leave-dialog-actions .btn {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
}
@media (max-width: 640px) {
  /* Keep admin sheets as bottom drawers — do not force center transform here. */
  body:not([data-page="admin"]) .site-leave-dialog,
  .settings-payout-dialog,
  .tpl-action-dialog,
  .tpl-action-dialog.tpl-action-dialog--reason,
  .tpl-action-dialog.tpl-action-dialog--widget-portal,
  .lf-advanced-dialog {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
  .tpl-action-dialog.tpl-action-dialog--reason {
    width: min(360px, calc(100vw - 24px));
  }
  .tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-panel {
    padding: 12px 12px 10px;
  }
  .tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-title {
    font-size: 15px;
  }
  .tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-text {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.4;
  }
  .tpl-action-dialog.tpl-action-dialog--reason .tpl-action-dialog-field {
    margin-bottom: 8px;
  }
  .tpl-action-dialog-choices {
    gap: 6px;
  }
  .tpl-action-dialog-choice {
    min-height: 40px;
    padding: 8px 8px;
    font-size: 12px;
  }
  .tpl-action-dialog.tpl-action-dialog--reason .tpl-action-dialog-input {
    min-height: 48px;
    max-height: 16vh;
    font-size: 13px;
  }
  .tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 8px;
  }
  .tpl-action-dialog.tpl-action-dialog--reason .site-leave-dialog-actions .btn {
    flex: 1 1 auto;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
  }
  .tpl-action-dialog.tpl-action-dialog--reason
    .site-leave-dialog-actions.tpl-action-dialog-actions--other
    .btn:last-child:not([hidden]) {
    flex: 1 1 100%;
  }
}
.site-dialog-panel--danger .site-leave-dialog-title {
  color: #b91c1c;
}
html[data-theme="dark"] .site-dialog-panel--danger .site-leave-dialog-title {
  color: #fca5a5;
}

.settings-payout-cancel {
  flex-shrink: 0;
  margin-top: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.settings-payout-remove.payout-saved-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: #dc2626;
  color: #fff;
}
.settings-payout-pick {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.settings-payout-list.is-selectable .settings-payout-pick {
  display: block;
}
.settings-payout-item.is-pick-selected .settings-payout-pick {
  border-color: var(--accent-blue);
  background: var(--accent-blue);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.settings-payout-list.is-selectable .settings-payout-item {
  cursor: pointer;
}
.settings-payout-list.is-selectable .settings-payout-item:hover:not(.is-pick-selected) {
  border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--border));
}
.settings-payout-list.is-selectable .settings-payout-item:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.settings-payout-item.is-pick-selected {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue-soft);
}
.settings-payout-list.is-selectable .settings-payout-item-link {
  pointer-events: auto;
}
.settings-payout-remove:hover,
.settings-payout-remove:focus-visible {
  background: #b91c1c;
  color: #fff;
  border-color: transparent;
}
.settings-payout-cancel:hover {
  color: var(--text);
  border-color: #cbd5e1;
}
.settings-payout-add-panel {
  margin: 12px 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.settings-payout-methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}
.settings-payout-methods .payout-method-btn {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 5px 9px;
  min-height: 0;
}
.settings-payout-methods .payout-method-icon {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.settings-payout-methods .payout-method-label {
  font-size: 11px;
}
.settings-payout-input-panel {
  margin-top: 4px;
}
.settings-card-danger .btn-danger {
  background: #b91c1c;
  color: #fff;
  border: none;
}
.settings-card-danger .btn-danger:hover {
  background: #991b1b;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .earnings-chart-bar,
  .earnings-chart.is-animating .earnings-chart-bar {
    transition: none !important;
  }

  .earnings-chart-amt-updated {
    animation: none !important;
  }

  .site-lock-shake .site-lock-input {
    animation: none !important;
  }

  #site-lock,
  #site-lock.site-lock-out,
  .sidebar,
  .card,
  .btn,
  .nav-link,
  .tool-card,
  .link-card,
  .pill,
  .lead-card,
  .links-table tbody tr,
  .path-item a,
  .menu-btn,
  .lf-action-btn,
  .lf-menu-btn,
  .lf-toggle-btn,
  .settings-segment-btn {
    transition: none !important;
  }

  .btn:hover,
  .btn:active,
  .btn:focus-visible,
  .link-card:hover,
  .link-card:active,
  .tool-card:hover,
  .tool-card:active,
  .pill:hover,
  .pill:active,
  .nav-link:hover,
  .nav-link:active,
  .path-item a:hover,
  .lead-card:hover,
  .links-table tbody tr:hover,
  .menu-btn:hover,
  .menu-btn:active,
  .lf-action-btn:hover,
  .acc-q:hover {
    transform: none !important;
  }
}

/* Course modules */
body[data-page="course-module"] #page-body {
  max-width: 1120px;
}
body[data-page="course-module"] #page-body > h1 {
  font-size: clamp(28px, 3.5vw, 38px);
  margin-bottom: 10px;
}
body[data-page="course-module"] .course-module-lead {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 28px;
}
body[data-page="setup"] #page-body {
  max-width: 720px;
}
.course-hub-progress {
  margin-bottom: 20px;
  padding: 18px 20px;
}
.course-module-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-mod-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.course-mod-card:hover {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-sm);
}
.course-mod-card:focus,
.course-mod-card:focus-visible {
  outline: none;
}
.course-mod-card.is-next {
  border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border));
}
.course-mod-card.is-done {
  opacity: 0.92;
}
.course-mod-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  background: var(--surface-2);
  color: var(--text);
}
.course-mod-card.is-done .course-mod-num {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
}
.course-mod-body {
  flex: 1;
  min-width: 0;
}
.course-mod-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.course-mod-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.course-mod-summary {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.course-mod-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.course-mod-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.course-mod-badge.done {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
}
.course-mod-badge.current {
  background: color-mix(in srgb, var(--accent-blue) 16%, transparent);
  color: var(--accent-blue);
}
.course-module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.course-module-back {
  font-size: 13px;
  text-decoration: none;
}
.faq-page {
  max-width: 720px;
}
.faq-section {
  margin-bottom: 16px;
}
.faq-section .section-head {
  margin-top: 0;
  margin-bottom: 14px;
}
.faq-list .acc:last-child {
  margin-bottom: 0;
}
.faq-footer-note {
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
}
.faq-page .acc-a-inner p {
  margin: 0 0 10px;
}
.faq-page .acc-a-inner p:last-child {
  margin-bottom: 0;
}

/* FAQ - smooth accordion expand/collapse */
body[data-page="faq"] .faq-list .acc {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 4%, transparent);
  transition:
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

body[data-page="faq"] .faq-list .acc:hover:not(.open) {
  border-color: color-mix(in srgb, var(--accent-blue) 16%, var(--border));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--text) 6%, transparent);
}

body[data-page="faq"] .faq-list .acc.open {
  border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
  box-shadow:
    0 4px 18px color-mix(in srgb, var(--accent-blue) 10%, transparent),
    0 1px 0 color-mix(in srgb, var(--accent-blue) 12%, transparent) inset;
}

body[data-page="faq"] .faq-list .acc-q {
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-fast) ease,
    border-color var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
}

body[data-page="faq"] .faq-list .acc-q:active {
  transform: none;
}

body[data-page="faq"] .faq-list .acc.open .acc-q {
  border-bottom: 1px solid color-mix(in srgb, var(--accent-blue) 14%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-blue-soft) 70%, var(--surface)) 0%,
    color-mix(in srgb, var(--accent-soft) 40%, var(--surface)) 100%
  );
}

body[data-page="faq"] .faq-list .acc-q .chev {
  flex: 0 0 20px;
  margin-left: auto;
  font-size: 0;
  line-height: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  overflow: hidden;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
  transform: none;
}

body[data-page="faq"] .faq-list .acc.open .acc-q .chev {
  color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue-soft) 80%, var(--surface));
  border-radius: 6px;
  transform: none;
}

body[data-page="faq"] .faq-list .acc-q .chev::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform var(--dur-med) var(--ease-out);
}

body[data-page="faq"] .faq-list .acc.open .acc-q .chev::after {
  transform: rotate(-135deg);
}

body[data-page="faq"] .faq-list .acc-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  min-height: 0;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}

body[data-page="faq"] .faq-list .acc.open .acc-a {
  display: grid;
  grid-template-rows: 1fr;
}

body[data-page="faq"] .faq-list .acc-a-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-med) var(--ease-out),
    padding var(--dur-med) var(--ease-out);
}

body[data-page="faq"] .faq-list .acc.open .acc-a-inner {
  padding: 0 16px 16px;
  opacity: 1;
  pointer-events: auto;
}

body[data-page="faq"] .faq-list .acc:not(.open) .acc-a-inner > * {
  margin-top: 0;
  margin-bottom: 0;
}

html[data-theme="dark"] body[data-page="faq"] .faq-list .acc.open {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-blue) 14%, transparent);
}

html[data-theme="dark"] body[data-page="faq"] .faq-list .acc.open .acc-q {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-blue) 12%, var(--surface)) 0%,
    var(--surface) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="faq"] .faq-list .acc,
  body[data-page="faq"] .faq-list .acc-q,
  body[data-page="faq"] .faq-list .acc-q .chev::after,
  body[data-page="faq"] .faq-list .acc-a,
  body[data-page="faq"] .faq-list .acc-a-inner {
    transition: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.faq-qa-section {
  margin-top: 0;
  margin-bottom: 20px;
  border-top: none;
  border-bottom: 3px solid color-mix(in srgb, var(--accent-blue) 25%, var(--border));
}

.faq-official {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-official-first {
  margin-top: 4px;
}

.faq-qa-lead {
  margin: -6px 0 16px;
  font-size: 14px;
  line-height: 1.5;
}

.faq-qa-ask {
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.faq-qa-ask-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.faq-qa-ask-fields {
  flex: 1;
  min-width: 0;
}

.faq-qa-ask-as {
  margin: 0 0 8px;
  font-size: 13px;
}

.faq-qa-textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}

.faq-qa-textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}

.faq-qa-textarea--compact {
  min-height: 2.75rem;
}

.faq-qa-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.faq-qa-status {
  margin: 8px 0 0;
  font-size: 13px;
}

.faq-qa-status--ok {
  color: var(--green);
  font-weight: 600;
}

.faq-qa-status--warn {
  color: #b45309;
}

.faq-qa-status--err {
  color: #b91c1c;
}

.faq-qa-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-qa-thread {
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.faq-qa-post {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.faq-qa-post--reply {
  padding: 10px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  margin-top: 10px;
}

.faq-qa-post--reply:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 12px;
}

.faq-qa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: var(--bg);
}

.faq-qa-ask-avatar {
  width: 44px;
  height: 44px;
}

.faq-qa-post-main {
  flex: 1;
  min-width: 0;
}

.faq-qa-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
  margin-bottom: 4px;
}

.faq-qa-post-meta-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}

.faq-qa-post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.faq-qa-action-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.faq-qa-action-btn:hover,
.faq-qa-action-btn:focus-visible {
  color: var(--accent-blue);
  outline: none;
}

.faq-qa-action-btn--danger:hover,
.faq-qa-action-btn--danger:focus-visible {
  color: #b91c1c;
}

.faq-qa-post.is-editing .faq-qa-post-actions {
  display: none;
}

.faq-qa-post.is-editing .faq-qa-text .faq-qa-form-actions {
  margin-top: 8px;
}

.faq-qa-author {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.faq-qa-time {
  font-size: 12px;
  color: var(--muted);
}

.faq-qa-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

.faq-qa-replies {
  margin: 12px 0 0 52px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent-blue) 30%, var(--border));
}

.faq-qa-no-replies {
  margin: 10px 0 0 52px;
  font-size: 13px;
}

.faq-qa-reply-form {
  margin: 12px 0 0 52px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.faq-qa-loading {
  margin: 0 0 12px;
  font-size: 13px;
}

.faq-qa-empty {
  margin-bottom: 12px;
}

html[data-theme="dark"] .faq-qa-ask,
html[data-theme="dark"] .faq-qa-thread {
  background: var(--surface-elevated);
}

.course-module-shell {
  padding: 0;
  overflow: hidden;
}
.course-module-layout {
  --course-layout-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --course-layout-duration: 0.48s;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
  gap: 0;
  min-height: 0;
  transition: grid-template-columns var(--course-layout-duration) var(--course-layout-ease);
}
.course-module-layout--panel-open {
  --course-chapter-panel-height: min(60vh, 440px);
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.95fr);
  min-height: 360px;
  height: var(--course-chapter-panel-height);
  max-height: var(--course-chapter-panel-height);
  align-items: stretch;
}
.course-module-layout--survey {
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
  min-height: min(440px, 68vh);
  align-items: stretch;
}
.course-module-layout--survey .course-module-main {
  border-right-color: var(--border);
  align-self: stretch;
  padding: 28px 24px 28px;
}
.course-module-layout--survey .course-module-aside {
  pointer-events: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.course-module-layout--survey .course-module-aside .course-side-panel,
.course-module-layout--survey .course-side-panel--survey {
  opacity: 1;
  transform: none;
  flex: 1;
  width: 100%;
  min-height: 0;
  max-height: none;
}
.course-module-aside--survey {
  padding: 10px 10px 10px 8px;
}
.course-module-aside .course-side-panel {
  zoom: var(--course-panel-scale);
}
.course-side-panel--survey {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.accounts-survey--embedded {
  margin: 0;
  max-width: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}
.accounts-survey--embedded .survey-progress-wrap {
  padding: 12px 14px 12px;
}
.accounts-survey--embedded .survey-progress-top {
  margin-bottom: 10px;
  min-height: 26px;
}
.accounts-survey--embedded .survey-back,
.accounts-survey--embedded .survey-restart {
  height: 26px;
  padding: 0 10px;
  font-size: 10px;
}
.accounts-survey--embedded .survey-stage {
  flex: 1 1 auto;
  min-height: 180px;
  padding: 16px;
  overflow-y: auto;
}
.course-everyday-embed {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px 14px 12px;
  overflow: hidden;
}
.course-everyday-embed-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}
.course-everyday-embed-lead {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
.course-everyday-steps {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
}
.course-everyday-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.course-everyday-list .everyday-tasks-item {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}
.course-everyday-list .everyday-tasks-item + .everyday-tasks-item {
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}
.everyday-loop-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
}
.everyday-loop-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
  flex-shrink: 0;
}
.everyday-loop-step-copy,
.everyday-loop-step-copy-stack {
  min-width: 0;
  flex: 1 1 auto;
}
.everyday-loop-step-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.everyday-loop-step-summary {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.everyday-loop-step-summary .everyday-tasks-flow-arrow {
  margin: 0 5px;
  font-weight: 500;
  color: var(--muted);
}
.everyday-loop-step-inline-bullets {
  margin: 4px 0 0;
  padding-left: 16px;
  list-style: disc;
}
.everyday-loop-step-inline-bullets li {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.everyday-loop-step-tag {
  display: none;
}
.everyday-loop-step-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.everyday-tasks-item-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 10px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.everyday-tasks-item-card:hover {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 5%, transparent);
}
.everyday-tasks-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.everyday-tasks-step-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 42%, var(--green) 58%);
  background: color-mix(in srgb, var(--green-bg) 58%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--border));
  line-height: 1;
}
.everyday-tasks-step-tag-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text) 35%, var(--green) 65%);
  background: color-mix(in srgb, var(--surface) 70%, var(--green-bg));
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--border));
}
.everyday-tasks-step-tag-label {
  line-height: 1;
}
.course-everyday-list .everyday-tasks-item-body {
  min-width: 0;
}
.course-everyday-list .everyday-tasks-item-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.course-everyday-list .everyday-tasks-task {
  font-weight: 500;
}
.course-everyday-list .everyday-tasks-flow {
  display: inline;
  white-space: normal;
}
.course-everyday-list .everyday-tasks-task-part {
  font-weight: 500;
}
.course-everyday-list .everyday-tasks-flow-arrow {
  margin: 0 0.25em;
  color: var(--muted);
  font-weight: 400;
}
.course-everyday-list .everyday-tasks-heading {
  font-weight: 500;
  color: var(--text);
}
.course-everyday-list .everyday-tasks-bullets {
  margin: 4px 0 0;
  padding-left: 1em;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.course-everyday-list .everyday-tasks-bullets li {
  margin: 0 0 2px;
}
.everyday-tasks-embed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast);
}
.everyday-tasks-embed-btn:hover,
.everyday-tasks-embed-btn:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--text);
  text-decoration: none;
}
.course-everyday-embed a.everyday-tasks-embed-btn,
.course-everyday-embed a.everyday-tasks-embed-btn:hover,
.course-everyday-embed a.everyday-tasks-embed-btn:focus-visible,
#page-body a.everyday-tasks-embed-btn,
#page-body a.everyday-tasks-embed-btn:hover,
#page-body a.everyday-tasks-embed-btn:focus-visible,
#page-body a.everyday-tasks-open-btn,
#page-body a.everyday-tasks-open-btn:hover,
#page-body a.everyday-tasks-open-btn:focus-visible {
  color: var(--text) !important;
  text-decoration: none !important;
  border-bottom-color: color-mix(in srgb, var(--border) 88%, transparent) !important;
}
.course-everyday-list .everyday-tasks-item-action {
  margin-top: 0;
  flex-shrink: 0;
}
.course-everyday-list .everyday-tasks-embed-btn {
  min-height: 26px;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
}
.course-everyday-list .everyday-tasks-builder-tag,
.course-everyday-list .everyday-tasks-complete-tag {
  transform: none;
  transform-origin: center;
}
.course-everyday-list .everyday-tasks-embed-hint {
  display: none;
}
.course-everyday-checklist-footer {
  flex-shrink: 0;
  padding: 8px 0 0;
  margin-top: 6px;
}
.course-everyday-checklist-btn {
  width: 100%;
  min-height: 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
}
.course-everyday-embed.is-checklist-view .course-everyday-embed-title,
.course-everyday-embed.is-checklist-view .course-everyday-embed-lead,
.course-everyday-embed.is-checklist-view .course-everyday-checklist-footer {
  display: none;
}
.course-everyday-checklist-wrap {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}
.course-everyday-embed.is-checklist-view .course-everyday-checklist-wrap {
  display: flex;
}
.course-everyday-checklist-wrap[hidden] {
  display: none !important;
}
.course-everyday-checklist-btn,
.daily-loop-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}
.course-everyday-checklist-btn:hover,
.daily-loop-toolbar-btn:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--accent-blue-soft) 40%, var(--surface));
}
.daily-loop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  margin: 0 0 10px;
  padding: 0 1px;
}
.daily-loop-toolbar-btn--reset:hover {
  border-color: color-mix(in srgb, #dc2626 28%, var(--border));
  color: color-mix(in srgb, #dc2626 85%, var(--text));
  background: color-mix(in srgb, #dc2626 6%, var(--surface));
}
.course-daily-loop-checklist {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 2px 4px;
}
.daily-loop-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.daily-loop-progress-zone {
  flex-shrink: 0;
}
.daily-loop-detail-viewport {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 12px;
}
.daily-loop-detail-pane {
  transition:
    transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.28s ease;
}
.daily-loop-detail-pane.is-entering[data-dir="1"] {
  transform: translateX(14px);
  opacity: 0;
}
.daily-loop-detail-pane.is-entering[data-dir="-1"] {
  transform: translateX(-14px);
  opacity: 0;
}
.course-daily-loop-checklist .daily-loop-progress-head {
  margin: 0 0 8px;
  text-align: center;
}
.course-daily-loop-checklist .daily-loop-progress-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.course-daily-loop-checklist .daily-loop-progress-rail {
  position: relative;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 0 2px;
  box-sizing: border-box;
  --daily-loop-track-start: 10%;
  --daily-loop-track-span: 80%;
  --daily-loop-fill: 0;
}
.course-daily-loop-checklist .daily-loop-progress-rail::before {
  content: "";
  position: absolute;
  top: 10px;
  left: var(--daily-loop-track-start);
  width: var(--daily-loop-track-span);
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 75%, transparent);
}
.course-daily-loop-checklist .daily-loop-progress-fill {
  position: absolute;
  top: 10px;
  left: var(--daily-loop-track-start);
  width: calc(var(--daily-loop-track-span) * var(--daily-loop-fill));
  height: 2px;
  border-radius: 999px;
  background: var(--accent-blue);
  z-index: 1;
  pointer-events: none;
  transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.course-daily-loop-checklist .daily-loop-progress-steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  width: 100%;
}
.course-daily-loop-checklist .daily-loop-step-wrap {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.course-daily-loop-checklist .daily-loop-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  transition: color 0.2s ease;
}
.course-daily-loop-checklist .daily-loop-step:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 6px;
}
.course-daily-loop-checklist .daily-loop-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--border) 80%, var(--muted));
  background: var(--surface);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  flex-shrink: 0;
}
.course-daily-loop-checklist .daily-loop-step.is-done .daily-loop-step-dot {
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 18%, var(--surface));
  color: var(--accent-blue);
}
.course-daily-loop-checklist .daily-loop-step.is-done .daily-loop-step-label {
  color: var(--text);
}
.course-daily-loop-checklist .daily-loop-step.is-selected .daily-loop-step-dot {
  border-color: var(--accent-blue);
  background: var(--accent-blue);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 18%, transparent);
}
.course-daily-loop-checklist .daily-loop-step-label {
  display: block;
  width: 100%;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-daily-loop-checklist .daily-loop-step.is-selected .daily-loop-step-label {
  color: var(--accent-blue);
}
.daily-loop-complete-banner {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.35;
}
.daily-loop-step-card {
  margin: 0 0 14px;
  padding: 12px 12px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  text-align: left;
}
.daily-loop-step-kicker {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.daily-loop-step-title {
  margin: 0 0 8px;
  font-size: clamp(0.95rem, 2.4cqi, 1.05rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}
.daily-loop-step-title .everyday-tasks-flow,
.daily-loop-step-title .everyday-tasks-task {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.daily-loop-step-title .everyday-tasks-task-part {
  font-weight: inherit;
}
.daily-loop-step-title-sep {
  margin: 0 0.25em;
  font-weight: 500;
  color: var(--muted);
}
.daily-loop-step-detail {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.daily-loop-step-bullets {
  margin: 0 0 8px;
  padding-left: 1.15em;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.daily-loop-step-bullets li {
  margin: 0 0 3px;
}
.daily-loop-step-bullets li:last-child {
  margin-bottom: 0;
}
.daily-loop-step-tool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.daily-loop-step-tool .everyday-tasks-embed-btn {
  min-height: 32px;
  padding: 6px 14px;
  font-size: 0.75rem;
}
.daily-loop-step-tool .everyday-tasks-embed-hint {
  font-size: 11px;
}
.daily-loop-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}
.daily-loop-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  min-width: 112px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
.daily-loop-nav-btn:hover:not(:disabled),
.daily-loop-nav-btn:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-blue) 32%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft) 50%, var(--surface-2));
  color: var(--text);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.daily-loop-nav-btn--next:not(:disabled) {
  background: var(--text);
  border-color: var(--text);
  color: #ffffff;
}
.daily-loop-nav-btn--next:hover:not(:disabled),
.daily-loop-nav-btn--next:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--text) 86%, #000);
  border-color: color-mix(in srgb, var(--text) 86%, #000);
  color: #ffffff;
}
html[data-theme="dark"] .daily-loop-nav-btn--next:not(:disabled) {
  color: var(--btn-primary-fg);
}
.daily-loop-nav-btn--ghost {
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--surface-2);
  color: var(--text);
}
.daily-loop-nav-btn--ghost:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-blue) 32%, var(--border));
  background: color-mix(in srgb, var(--accent-blue-soft) 50%, var(--surface-2));
  color: var(--text);
}
.daily-loop-nav-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.daily-loop-nav-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .course-daily-loop-checklist .daily-loop-progress-rail,
  .course-daily-loop-checklist .daily-loop-progress-fill,
  .course-daily-loop-checklist .daily-loop-step-dot,
  .daily-loop-detail-pane {
    transition: none;
  }
}
.course-side-panel--everyday {
  overflow: hidden;
}
.course-module-layout--panel-open .course-panel-scroll,
.course-module-layout--panel-open .course-panel-body {
  flex: 1 1 auto;
  min-height: 0;
}
.accounts-survey--embedded .survey-question {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}
.accounts-survey--embedded .survey-choice-btn {
  min-height: 44px;
  padding: 12px 36px 12px 14px;
  font-size: 13px;
}
.accounts-survey--embedded .survey-choice-btn.survey-proceed-btn {
  min-height: 34px;
  min-width: 100px;
  padding: 7px 12px;
  font-size: 12px;
}
.accounts-survey--embedded .survey-choice-btn.survey-proceed-btn .survey-proceed-arrow {
  font-size: 14px;
}
.accounts-survey--embedded .survey-choice-btn.survey-payout-save,
.accounts-survey--embedded .survey-choice-btn.survey-payout-later {
  min-height: 34px;
  min-width: 100px;
  padding: 7px 12px;
  font-size: 12px;
}
.accounts-survey--embedded .survey-choice-btn.survey-payout-save {
  min-width: 118px;
}
.accounts-survey--embedded .survey-install-steps li {
  padding: 10px 12px 10px 40px;
  font-size: 12px;
}
.accounts-survey--embedded .survey-payout-methods {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.accounts-survey--embedded .survey-payout-methods .payout-method-icon,
.accounts-survey--embedded .survey-payout-methods .payout-method-icon-wrap,
.accounts-survey--embedded .survey-payout-methods .payout-method-icon-host {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.accounts-survey--embedded .survey-payout-methods .payout-method-label {
  font-size: 10.5px;
}
.accounts-survey--embedded .survey-payout-methods .payout-method-btn {
  padding: 9px 4px 8px;
}

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

.preferences-theme-choice {
  gap: 10px;
}

.preferences-theme-swatch {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--preferences-theme-swatch);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, #ffffff 34%, transparent);
}

.preferences-theme-choice--cream { --preferences-theme-swatch: linear-gradient(135deg, #8b6725, #efe3cc); }
.preferences-theme-choice--white { --preferences-theme-swatch: #ffffff; }
.preferences-theme-choice--black { --preferences-theme-swatch: #050505; }
.preferences-theme-choice--green { --preferences-theme-swatch: #16a34a; }
.preferences-theme-choice--grey { --preferences-theme-swatch: #64748b; }
.preferences-theme-choice--blue { --preferences-theme-swatch: #2563eb; }
.preferences-theme-choice--purple { --preferences-theme-swatch: #7c3aed; }
.preferences-theme-choice--red { --preferences-theme-swatch: #dc2626; }

.preferences-name-field {
  margin-top: 12px;
}

.preferences-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.preferences-profile-preview {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 18px;
  object-fit: cover;
}

.preferences-profile-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.preferences-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.preferences-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 12px 0 8px;
  padding: 10px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface) 52%);
  color: var(--text);
  font-weight: 750;
  font-size: 13px;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    transform var(--dur-fast) ease;
}

.preferences-upload-btn:hover,
.preferences-upload-btn:focus-within {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface) 30%);
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  transform: scale(1.01);
}

.preferences-upload-ico,
.preferences-upload-ico .ico,
.preferences-upload-ico svg {
  width: 16px;
  height: 16px;
  margin: 0;
  color: var(--accent);
}

.preferences-skip-btn {
  width: auto;
  min-width: 150px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--surface) 22%) !important;
  border-color: color-mix(in srgb, var(--border) 72%, var(--muted) 28%) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.preferences-skip-btn:hover {
  background: color-mix(in srgb, var(--surface-2) 64%, var(--accent-soft) 36%) !important;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
  color: var(--text) !important;
  transform: scale(1.02);
}

.preferences-skip-btn::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .survey-step-enter {
    animation: none;
  }
  .survey-choice-btn:hover,
  .survey-choice-btn.survey-proceed-btn:hover,
  .survey-choice-btn.survey-proceed-btn:hover .survey-proceed-arrow,
  .survey-choice-btn.survey-payout-later:hover {
    transform: none;
  }
  .survey-progress-bar {
    transition: none;
  }
}
.course-module-layout--survey .course-module-video-group {
  max-width: min(600px, 100%);
}
.course-module-main {
  padding: 28px 32px 32px;
  min-width: 0;
  border-right: 1px solid transparent;
  align-self: start;
  transition: border-color var(--course-layout-duration) var(--course-layout-ease);
  background: transparent;
}
.course-module-layout--panel-open .course-module-main {
  border-right-color: var(--border);
  align-self: stretch;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.course-module-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  width: 100%;
}
.course-topics-bar {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 8px 10px 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: none;
}
.course-topics-label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}
.course-module-video-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: min(720px, 100%);
  margin-inline: auto;
  transition: max-width var(--course-layout-duration) var(--course-layout-ease);
}
.course-module-layout--panel-open .course-module-video-group {
  max-width: 100%;
}
.course-module-video-group .video-wrap.course-module-video {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: none;
  background: #0f172a;
}
.course-module-video-group .video-wrap.course-module-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.course-panel-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
}
.course-panel-toolbar::-webkit-scrollbar {
  height: 4px;
}
.course-panel-toolbar::-webkit-scrollbar-track {
  background: transparent;
}
.course-panel-toolbar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 999px;
}
.course-panel-toolbar.is-scrollable {
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
}
.course-panel-toolbar.is-at-end {
  mask-image: none;
  -webkit-mask-image: none;
}
.course-panel-tag {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--muted) !important;
  font-weight: 600;
}
.course-panel-tag.btn.secondary {
  background: var(--surface) !important;
  border-color: color-mix(in srgb, var(--border) 88%, transparent) !important;
  box-shadow: none !important;
}
.course-panel-tag.btn.secondary:hover,
.course-panel-tag.btn.secondary:focus-visible {
  color: color-mix(in srgb, var(--muted) 72%, var(--text)) !important;
  background: var(--surface) !important;
  border-color: color-mix(in srgb, var(--border) 92%, transparent) !important;
  box-shadow: none !important;
}
.course-panel-tag.is-active {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #032314 !important;
  box-shadow: var(--shadow) !important;
}
.course-panel-tag.is-active:hover {
  background: color-mix(in srgb, var(--green) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--green) 88%, #000) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow) !important;
}
.course-module-aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 14px 14px 14px 12px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  pointer-events: none;
  font-size: 13px;
}
.course-module-layout--panel-open .course-module-aside {
  pointer-events: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.course-module-aside .course-side-panel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  max-height: min(66vh, 500px);
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  opacity: 0;
  transform: translateX(12px);
  transition:
    opacity 0.38s var(--course-layout-ease),
    transform var(--course-layout-duration) var(--course-layout-ease);
}
.course-side-panel-inner {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.course-side-panel-main {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.course-panel-channel-rail {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 124px;
  gap: 4px;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.course-panel-channel-rail[hidden] {
  display: none !important;
}
.course-panel-rail-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}
.course-panel-rail-btn:hover,
.course-panel-rail-btn:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-color: var(--border);
}
.course-panel-rail-btn.is-active {
  color: #032314;
  background: var(--green);
  border-color: var(--green);
  box-shadow: var(--shadow);
}
.course-panel-rail-btn.is-active:hover {
  background: #26f08d;
  border-color: #26f08d;
}
.course-module-layout--panel-open .course-module-aside .course-side-panel {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.12s;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}
.course-module-video {
  border-radius: var(--radius);
  overflow: hidden;
}
.course-video-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.course-module-video-group .course-video-note {
  order: 3;
}
.course-module-video-group .course-topics-bar {
  order: 2;
}
.course-panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #dc2626;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.course-panel-close:hover {
  background: #b91c1c;
  color: #fff;
}
.course-panel-close:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.course-panel-scroll,
.course-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 99, 235, 0.32) transparent;
}
.course-panel-scroll::-webkit-scrollbar,
.course-panel-body::-webkit-scrollbar {
  width: 8px;
}
.course-panel-scroll::-webkit-scrollbar-track,
.course-panel-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}
.course-panel-scroll::-webkit-scrollbar-thumb,
.course-panel-body::-webkit-scrollbar-thumb {
  background-color: rgba(37, 99, 235, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.course-panel-scroll::-webkit-scrollbar-thumb:hover,
.course-panel-body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(37, 99, 235, 0.48);
}
html[data-theme="dark"] .course-panel-scroll,
html[data-theme="dark"] .course-panel-body {
  scrollbar-color: rgba(96, 165, 250, 0.38) transparent;
}
html[data-theme="dark"] .course-panel-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .course-panel-body::-webkit-scrollbar-thumb {
  background-color: rgba(96, 165, 250, 0.32);
}
html[data-theme="dark"] .course-panel-scroll::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .course-panel-body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(96, 165, 250, 0.52);
}
.course-chapter-nav.survey-choices--proceed {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  padding: 14px 16px 16px;
  flex: 0 0 auto;
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.04);
  z-index: 2;
}
.course-chapter-nav[hidden] {
  display: none !important;
}
.course-chapter-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  text-decoration: none;
}
.course-chapter-nav-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: transform var(--dur-fast);
}
.course-chapter-nav-label {
  line-height: 1;
}
.course-chapter-nav-prev:hover .course-chapter-nav-arrow {
  transform: translateX(-3px);
}
.course-chapter-nav-next:hover .course-chapter-nav-arrow {
  transform: translateX(3px);
}
.course-chapter-nav-prev.is-disabled,
.course-chapter-nav-prev:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: var(--shadow);
}
.course-chapter-nav-done .course-chapter-nav-arrow {
  font-size: 14px;
}
.course-panel-scroll .course-chapter-transcript,
.course-panel-scroll .course-chapter-article {
  padding-top: 30px;
}
.course-chapter-transcript {
  padding: 20px 22px 18px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.course-chapter-transcript-p {
  margin: 0 0 14px;
}
.course-chapter-transcript-p:last-child {
  margin-bottom: 0;
}
.course-inline-chapter-tag {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 2px 9px;
  margin: 0 2px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
html[data-theme="dark"] .course-inline-chapter-tag {
  background: var(--surface-elevated);
  box-shadow: none;
}
.course-inline-ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: 4px;
  margin: 0 3px;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
}
.course-inline-ui-btn--nav {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--green);
  color: #032314;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--shadow);
}
.course-inline-ui-btn-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.course-inline-ui-btn-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.course-inline-ui-btn--exit {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 5px;
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
html[data-theme="dark"] .course-inline-ui-btn--nav {
  background: var(--green);
  color: #032314;
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .course-inline-ui-btn--exit {
  background: #ef4444;
}
a.course-channel-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 0;
  padding: 2px 8px;
  margin: 2px 5px 2px 0;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  box-shadow: none;
  transition:
    background var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
a.course-channel-chip[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  opacity: 0.55;
  background: currentColor;
  transition: opacity var(--dur-med) var(--ease-out);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
a.course-channel-chip:hover {
  color: var(--btn-primary-fg);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
a.course-channel-chip:hover[target="_blank"]::after {
  opacity: 0.9;
}
a.course-channel-chip:active {
  box-shadow: none;
}
a.course-channel-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html[data-theme="dark"] a.course-channel-chip {
  background: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] a.course-channel-chip:hover {
  background: #27272a;
  border-color: #3f3f46;
  color: #fafafa;
  box-shadow: var(--shadow);
}
@media (prefers-reduced-motion: reduce) {
  a.course-channel-chip {
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  a.course-channel-chip[target="_blank"]::after {
    transition: none;
  }
}
.course-chapter-article {
  padding: 20px 22px 18px 16px;
}
.course-chapter-article.is-entering,
.course-chapter-transcript.is-entering {
  animation: course-chapter-enter 0.36s var(--course-layout-ease) both;
}
@keyframes course-chapter-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.course-chapter-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.course-chapter-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-blue);
}
.course-chapter-heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}
.course-chapter-blocks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-chapter-prose-block {
  gap: 10px;
}
.course-chapter-prose-block .course-chapter-prose {
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.course-chapter-prose {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.course-chapter-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.course-chapter-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.course-chapter-step-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-blue);
  background: var(--accent-blue-soft);
}
.course-chapter-step-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  padding-top: 3px;
}
.course-chapter-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.course-chapter-row {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
}
.course-chapter-row-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.course-chapter-row-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.course-chapter-path {
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-blue);
  background: var(--accent-blue-soft);
}
.course-chapter-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.course-chapter-faq-item {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}
.course-chapter-faq-q {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}
.course-chapter-faq-a {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.course-chapter-faq-a::before {
  content: "Answer · ";
  font-weight: 600;
  color: var(--accent-blue);
}
.course-chapter-footer {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.course-chapter-cta {
  width: 100%;
  text-align: center;
  text-decoration: none;
}
.course-video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius);
}
.course-phase-intro {
  width: 100%;
  max-width: min(720px, 100%);
  margin-inline: auto;
  padding: 24px;
  background: var(--surface-2);
  border-radius: var(--radius);
  min-height: 200px;
}
.course-phase-intro h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}
.course-phase-lead {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.course-phase-list {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: decimal;
}
.course-phase-list li {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.45;
}
.course-phase-list li strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}
.course-phase-list li span {
  color: var(--muted);
}
.course-summary-loader {
  flex: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 12px;
  animation: course-summary-fade-in 0.35s ease;
}
.course-module-aside.is-loading .course-summary-loader {
  display: flex;
}
.course-summary-loader[hidden] {
  display: none !important;
}
.course-summary-loader-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.course-summary-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent-blue) 20%, var(--border));
  border-top-color: var(--accent-blue);
  animation: course-summary-spin 0.75s linear infinite;
}
@keyframes course-summary-spin {
  to { transform: rotate(360deg); }
}
@keyframes course-summary-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.course-summary-type {
  flex: 1;
  padding: 4px 2px 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-sans, inherit);
}
.course-summary-type.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent-blue);
  animation: course-summary-cursor 0.85s step-end infinite;
}
@keyframes course-summary-cursor {
  50% { opacity: 0; }
}
.course-summary-replay {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.course-summary-replay:hover {
  color: var(--text);
}
.course-module-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.course-module-nav:has(.course-module-next):not(:has(.course-module-prev)) {
  justify-content: flex-end;
}
.course-module-prev,
.course-module-next {
  min-width: 120px;
  text-align: center;
  text-decoration: none;
}
@media (max-width: 900px) {
  .course-module-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 0fr;
    transition:
      grid-template-rows var(--course-layout-duration) var(--course-layout-ease),
      grid-template-columns 0s;
  }
  .course-module-layout--panel-open {
    --course-chapter-panel-height: min(50vh, 420px);
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, var(--course-chapter-panel-height));
    height: auto;
    max-height: none;
    min-height: 0;
  }
  .course-module-layout--survey {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .course-module-layout--panel-open .course-module-main,
  .course-module-layout--survey .course-module-main {
    border-right-color: transparent;
    border-bottom: 1px solid var(--border);
  }
  .course-panel-channel-rail {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-height: 112px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .course-panel-rail-btn {
    flex: 1 1 auto;
    min-width: calc(50% - 4px);
    text-align: center;
    font-size: 10px;
    padding: 7px 8px;
  }
  .course-module-aside .course-side-panel {
    transform: translateY(10px);
  }
  .course-module-layout--panel-open .course-module-aside {
    min-height: 0;
    height: auto;
    max-height: var(--course-chapter-panel-height);
  }
  .course-module-layout--panel-open .course-module-aside .course-side-panel {
    transform: translateY(0);
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
  .course-module-layout--survey .course-module-aside .course-side-panel {
    transform: translateY(0);
    max-height: none;
  }
  .course-chapter-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .course-topics-bar {
    flex-wrap: nowrap;
    align-items: center;
    padding: 6px 8px 6px 10px;
    gap: 6px;
    margin-top: 10px;
  }
  .course-topics-label {
    flex: 0 0 auto;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .course-panel-toolbar {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
  }
  .course-panel-tag {
    min-height: 26px;
    padding: 4px 9px;
    font-size: 11px;
  }
  .course-module-main {
    padding: 24px 20px;
  }
  .course-module-aside {
    padding: 16px;
  }
  .course-module-nav {
    flex-wrap: wrap;
    padding: 16px 20px;
  }
}

@media (max-width: 640px) {
  body[data-page="course-module"] #page-body {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-page="course-module"] .main,
  body[data-page="course-module"] > #page-body {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  .course-module-shell.card {
    border-radius: 14px;
  }

  .course-module-main {
    padding: 14px 0 16px;
  }

  .course-module-header,
  .course-module-lead,
  .course-module-nav {
    padding-left: 12px;
    padding-right: 12px;
  }

  .course-module-nav {
    padding-top: 12px;
    padding-bottom: 14px;
  }

  .course-module-video-group {
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
  }

  .course-module-video-group .video-wrap.course-module-video {
    width: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .course-module-layout--survey .course-module-video-group {
    max-width: 100%;
  }

  .course-module-video-group .course-topics-bar {
    margin-top: 10px;
    margin-inline: 10px;
    width: auto;
  }

  .course-module-video-group .course-video-note {
    margin-inline: 12px;
  }
}

html[data-theme="dark"] .course-summary-trigger {
  background: var(--surface-2);
}
@media (prefers-reduced-motion: reduce) {
  .course-module-layout,
  .course-module-main,
  .course-module-aside .course-side-panel {
    transition: none;
  }
  .course-chapter-article.is-entering {
    animation: none;
  }
  .course-summary-spinner {
    animation: none;
    border-top-color: var(--accent-blue);
    opacity: 0.7;
  }
  .course-summary-type.is-typing::after {
    animation: none;
    opacity: 1;
  }
}

/* Bold modern final cascade guard */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080a12;
  --bg-top: #080a12;
  --bg-bottom: #080a12;
  --surface: #11141e;
  --surface-elevated: #151925;
  --surface-2: #1b2030;
  --input-bg: #171c2a;
  --text: #f8fafc;
  --muted: #a2aabc;
  --border: #384052;
  --accent: #01ff80;
  --accent-soft: #10281c;
  --btn-primary-bg: #01ff80;
  --btn-primary-fg: #042414;
  --btn-primary-border: #01ff80;
  --accent-blue: #5c7aff;
  --accent-blue-soft: #1c2445;
  --green: #01ff80;
  --green-bg: #10281c;
  --green-soft: #163522;
  --gold: #ffa033;
  --gold-soft: #322414;
  --violet: #9b7cff;
  --violet-soft: #241f3f;
  --red: #ff3355;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --font: "DM Sans", "Proxima Nova Rg", system-ui, sans-serif;
  --shadow: none;
  --shadow-md: none;
  --shadow-hover: none;
  --scrollbar-thumb: rgba(194, 200, 255, 0.18);
  --scrollbar-thumb-hover: rgba(194, 200, 255, 0.34);
}

body,
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

#page-body > h1,
.page-hero h1,
.dash-page-hero h1 {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

#page-body > .lead,
.page-hero .lead,
.section-desc,
.muted {
  color: var(--muted);
}

.page-label {
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border));
}

.card,
.tool-card,
.role-card,
.settings-card,
.telegram-embed-card,
.accounts-survey,
.owner-card,
.contributors-card,
.lead-card {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card:hover,
.tool-card:hover,
.role-card:hover,
.lead-card:hover,
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .tool-card:hover,
html[data-theme="dark"] .lead-card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}

.btn,
.btn-primary,
.step-footer a.next,
.survey-action-link.btn,
a.btn:not(.secondary),
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] a.btn:not(.secondary),
html[data-theme="dark"] .btn:not(.secondary) {
  min-height: 42px;
  border-radius: 999px;
  background: var(--green);
  border-color: var(--green);
  color: #032314 !important;
  font-weight: 800;
  box-shadow: none;
}

.btn.secondary,
.step-footer a:not(.next),
a.btn.secondary,
html[data-theme="dark"] .btn.secondary {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text) !important;
}

.pill.active,
.settings-segment-btn.active {
  background: var(--green);
  color: #032314;
  border-color: var(--green);
}

input:not(.site-agreement-check):not(.links-hub-search):not(.lf-search-input):not(.owner-console-inbox-search),
select,
textarea,
.field input,
.field select,
.field textarea,
.feedback-form input,
.feedback-form textarea,
.bug-report-form input,
.bug-report-form textarea,
.bug-report-form select,
.payout-link-input,
.lf-workflow-select,
.dash-sale-input,
.dash-sale-money,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .feedback-form input,
html[data-theme="dark"] .feedback-form textarea,
html[data-theme="dark"] .bug-report-form input,
html[data-theme="dark"] .bug-report-form textarea,
html[data-theme="dark"] .bug-report-form select,
html[data-theme="dark"] .payout-link-input,
html[data-theme="dark"] .payout-phone-country,
html[data-theme="dark"] .lf-workflow-select {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.lf-workflow-select:focus-visible,
.dash-sale-money:focus-within,
.dash-sale-input:focus {
  border-color: var(--green);
  outline: 2px solid var(--green);
  outline-offset: 2px;
  box-shadow: none;
}

.sidebar-panel,
html[data-theme="dark"] .sidebar-panel {
  background: var(--surface);
  border-right-color: var(--border);
  box-shadow: none;
}

.brand,
.nav-link,
.nav-section-toggle,
.menu-btn {
  border-radius: 16px;
}

.brand:hover,
.nav-link:hover,
.nav-section-toggle:hover,
.menu-btn:hover,
html[data-theme="dark"] .menu-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.brand-mark--icon,
.brand-mark:has(.ico-brand) {
  border-radius: 18px;
  background: var(--green);
  border-color: var(--green);
  box-shadow: none;
}

.nav-start,
html[data-theme="dark"] .nav-start {
  background: var(--green);
  border: 0;
  color: #032314 !important;
  border-radius: 18px;
  box-shadow: none;
}

.nav-start .sub {
  color: rgba(3, 35, 20, 0.68);
  opacity: 1;
}

.nav-link.active,
html[data-theme="dark"] .nav-link.active {
  background: var(--green-bg);
  color: var(--green) !important;
  border: none;
  box-shadow: none;
}

.nav-link.active .ico-nav,
html[data-theme="dark"] .nav-link.active .ico-nav {
  color: var(--green);
}

.nav-link.active .step-badge:not(.done-badge) {
  background: var(--green);
  color: #032314;
  border-color: var(--green);
}

.sidebar-panel .nav-group,
.sidebar-panel .nav-group-home {
  margin: 12px 0;
}

.sidebar-panel .nav-group:first-of-type,
.sidebar-panel .nav-group-home:first-of-type {
  margin-top: 6px;
}

.sidebar-panel .nav-group > .nav-list,
.sidebar-panel .nav-group-home > .nav-list {
  padding: 8px;
  border: none;
  border-radius: 18px;
  background: var(--surface-2);
  box-shadow: none;
}

.sidebar-panel .nav-list-standalone,
.sidebar-panel .nav-list {
  margin: 0;
}

.sidebar-panel .nav-section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 6px;
  padding: 0 10px;
  width: 100%;
  color: #8f96bd;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 800;
}

.sidebar-panel .ico-nav-section,
.sidebar-panel .ico-nav {
  width: 18px;
  height: 18px;
  color: #8990ba;
  opacity: 1;
}

.sidebar-panel .ico-nav-section {
  width: 13px;
  height: 13px;
}

.sidebar-panel .nav-list li {
  margin-bottom: 1px;
}

.sidebar-panel .nav-list li:last-child {
  margin-bottom: 0;
}

html[data-theme="dark"] .sidebar-panel .nav-link {
  min-height: 36px;
  padding: 8px 10px;
  border: none;
  border-radius: 14px;
  color: #f3f5ff;
  font-size: 14px;
  font-weight: 800;
}

html[data-theme="dark"] .sidebar-panel .nav-link:hover {
  background: #242a3a;
  color: #ffffff;
}

html[data-theme="dark"] .sidebar-panel .nav-link.active {
  background: var(--green-bg);
  color: var(--green) !important;
  border: none;
}

.sidebar-panel .nav-link.active .ico-nav,
html[data-theme="dark"] .sidebar-panel .nav-link.active .ico-nav {
  color: var(--green);
}

body[data-page="home"] #page-body,
.leads-page {
  max-width: 1180px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dash-page-hero,
.leads-toolbar {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-elevated);
  box-shadow: var(--shadow);
}

.dash-quicklink,
.dash-stat-chip,
.lf-refresh-btn,
.lf-workflow-select,
.lf-info-icon,
.lf-menu-btn,
.lf-action-btn,
.lf-call-btn,
.lf-load-more-btn,
html[data-theme="dark"] .dash-quicklink,
html[data-theme="dark"] .dash-stat-chip,
html[data-theme="dark"] .lf-refresh-btn,
html[data-theme="dark"] .lf-menu-btn,
html[data-theme="dark"] .lf-action-btn {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  border-radius: 18px;
}

.dash-quicklink .ico,
.dash-quicklink .ico-nav,
.dash-stat-chip--earn .dash-tracker-stat-val,
.dash-pending-count,
.deals-count,
.leads-metric-called strong,
.lf-category-available {
  color: var(--green);
}

.dash-pending-count,
.deals-count,
html[data-theme="dark"] .dash-pending-count {
  background: var(--green-bg);
  border-color: color-mix(in srgb, var(--green) 25%, var(--border));
}

.dash-board-performance,
html[data-theme="dark"] .dash-board-performance {
  background: var(--surface-2);
  border-bottom-color: var(--border);
}

.dash-sale-form,
html[data-theme="dark"] .dash-sale-form,
.dash-board-log,
.dash-board-history,
.dash-pending-island.dash-pending-section {
  background: color-mix(in srgb, var(--surface) 90%, var(--surface-2));
}

.dash-goal-ring-fill {
  stroke: var(--green);
  filter: none;
}

.lf-toggle-btn.active,
html[data-theme="dark"] .lf-toggle-btn.active,
.lf-action-builder:not(.is-disabled),
.lf-load-more-btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: #032314;
}

.leads-chip:hover,
.leads-chip.is-active,
.lf-menu-item:hover,
.lf-menu-item.is-active {
  color: color-mix(in srgb, var(--accent) 80%, var(--text) 20%);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.lf-action-btn:hover:not(.is-disabled):not(.lf-action-builder),
html[data-theme="dark"] .lf-action-btn:hover:not(.is-disabled):not(.lf-action-builder) {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface-2)) !important;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border)) !important;
}

.lf-menu-panel {
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: 18px;
  box-shadow: none;
}

.lf-load-more-btn {
  color: var(--green);
}

body,
html[data-theme="dark"] body {
  background: var(--bg) !important;
}

.card,
.tool-card,
.role-card,
.settings-card,
.survey-choice-btn,
.telegram-embed-card,
.accounts-survey,
.owner-card,
.contributors-card,
.lead-card,
.dash-page-hero,
.leads-toolbar,
.dash-board,
.dash-board-performance,
.dash-sale-form,
.dash-quicklink,
.dash-stat-chip,
.lf-menu-panel,
.lf-action-btn,
.lf-call-btn,
.lf-load-more-btn,
.nav-start,
.brand-mark--icon,
.brand-mark:has(.ico-brand),
.sidebar-panel,
.sidebar-panel .nav-group,
.sidebar-panel .nav-group-home {
  box-shadow: none !important;
  filter: none !important;
}

.card,
.tool-card,
.role-card,
.settings-card,
.survey-choice-btn,
.telegram-embed-card,
.accounts-survey,
.owner-card,
.contributors-card,
.lead-card,
.dash-page-hero,
.leads-toolbar {
  background: var(--surface) !important;
}

.btn,
.btn-primary,
.step-footer a.next,
.survey-action-link.btn,
a.btn:not(.secondary),
.nav-start,
.lf-toggle-btn.active,
html[data-theme="dark"] .lf-toggle-btn.active,
.lf-action-builder:not(.is-disabled),
.lf-load-more-btn:hover {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #032314 !important;
}

@media (max-width: 900px) {
  .sidebar-panel {
    border-radius: 0 28px 28px 0;
  }
}

/* Luxury slim visual layer */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070708;
  --bg-top: #11100f;
  --bg-bottom: #030304;
  --surface: rgba(18, 18, 19, 0.92);
  --surface-elevated: rgba(24, 23, 22, 0.94);
  --surface-2: rgba(31, 30, 28, 0.88);
  --input-bg: rgba(255, 255, 255, 0.035);
  --text: #f7f2e8;
  --muted: #aaa397;
  --border: rgba(231, 213, 176, 0.15);
  --accent: #d7bd7a;
  --accent-soft: rgba(215, 189, 122, 0.12);
  --btn-primary-bg: #d7bd7a;
  --btn-primary-fg: #14110b;
  --btn-primary-border: rgba(215, 189, 122, 0.58);
  --accent-blue: #d7bd7a;
  --accent-blue-soft: rgba(215, 189, 122, 0.12);
  --green: #d7bd7a;
  --green-bg: rgba(215, 189, 122, 0.11);
  --green-soft: rgba(215, 189, 122, 0.16);
  --gold: #d7bd7a;
  --gold-soft: rgba(215, 189, 122, 0.13);
  --violet: #c6b7ff;
  --violet-soft: rgba(198, 183, 255, 0.12);
}

html[data-theme="light"]:not([data-ui-color]) {
  color-scheme: light;
  --bg: #f7f3ea;
  --bg-top: #fffdf8;
  --bg-bottom: #eee7da;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-elevated: rgba(255, 253, 247, 0.94);
  --surface-2: rgba(247, 241, 230, 0.86);
  --input-bg: rgba(255, 255, 255, 0.72);
  --text: #17130d;
  --muted: #766e61;
  --border: rgba(122, 93, 39, 0.18);
  --accent: #9a7530;
  --accent-soft: rgba(154, 117, 48, 0.1);
  --btn-primary-bg: #a9823a;
  --btn-primary-fg: #fffaf0;
  --btn-primary-border: rgba(154, 117, 48, 0.45);
  --accent-blue: #9a7530;
  --accent-blue-soft: rgba(154, 117, 48, 0.1);
  --green: #9a7530;
  --green-bg: rgba(154, 117, 48, 0.1);
  --green-soft: rgba(154, 117, 48, 0.15);
  --gold: #9a7530;
  --gold-soft: rgba(154, 117, 48, 0.12);
  --shadow: 0 14px 38px rgba(82, 58, 20, 0.08);
  --shadow-md: 0 18px 48px rgba(82, 58, 20, 0.12);
  --shadow-hover: 0 18px 44px rgba(82, 58, 20, 0.14);
}

html:not([data-theme="light"]) body,
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(215, 189, 122, 0.13), transparent 32rem),
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.055), transparent 26rem),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 44%, var(--bg-bottom) 100%) !important;
}

html[data-theme="light"]:not([data-ui-color]) body {
  background:
    radial-gradient(circle at top left, rgba(154, 117, 48, 0.12), transparent 32rem),
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.8), transparent 28rem),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 48%, var(--bg-bottom) 100%) !important;
  color: var(--text);
}

body > #page-body,
#page-body {
  max-width: 1040px;
  padding: 34px 26px 84px;
}

body[data-page="home"] #page-body,
body[data-page="leads"] #page-body,
.leads-page {
  max-width: 1080px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#page-body > h1,
.page-hero h1,
.dash-page-hero h1 {
  font-weight: 700;
  letter-spacing: -0.045em;
}

body[data-page="leads"] #page-body > h1,
body[data-page="leads"] #page-body > .lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

body[data-page="leads"] .leads-lead {
  max-width: 48rem;
}

.card,
.tool-card,
.role-card,
.settings-card,
.telegram-embed-card,
.accounts-survey,
.owner-card,
.contributors-card,
.lead-card,
.dash-page-hero,
.leads-toolbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
    var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow) !important;
}

.card:hover,
.tool-card:hover,
.role-card:hover,
.lead-card:hover,
.dash-quicklink:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

.card {
  padding: 18px;
}

.dash-page-hero {
  padding: 22px 24px;
  text-align: center;
}

.dash-hub {
  gap: 12px;
}

.dash-quicklinks {
  gap: 7px;
}

.dash-quicklink,
.dash-stat-chip,
.lf-refresh-btn,
.lf-workflow-select,
.lf-info-icon,
.lf-menu-btn,
.lf-action-btn,
.lf-call-btn,
.lf-load-more-btn,
html[data-theme="dark"] .dash-quicklink,
html[data-theme="dark"] .dash-stat-chip,
html[data-theme="dark"] .lf-refresh-btn,
html[data-theme="dark"] .lf-menu-btn,
html[data-theme="dark"] .lf-action-btn {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border);
  border-radius: 999px;
  color: var(--text);
}

.dash-quicklink {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}

.dash-board-performance,
html[data-theme="dark"] .dash-board-performance,
.dash-sale-form,
html[data-theme="dark"] .dash-sale-form,
.dash-board-log,
.dash-board-history,
.dash-pending-island.dash-pending-section {
  background: rgba(255, 255, 255, 0.028);
}

.dash-board-performance,
.dash-deals-panel,
.dash-pending-island,
.dash-pending-island.dash-pending-section {
  padding: 16px 18px;
}

.btn,
.btn-primary,
.step-footer a.next,
.survey-action-link.btn,
a.btn:not(.secondary),
.nav-start,
.lf-toggle-btn.active,
html[data-theme="dark"] .lf-toggle-btn.active,
.lf-action-builder:not(.is-disabled),
.lf-load-more-btn:hover {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e7d4a0, #c5a85f) !important;
  border: 1px solid rgba(238, 219, 166, 0.6) !important;
  color: #14110b !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

.btn:not(.secondary):hover,
.btn-primary:hover,
.step-footer a.next:hover,
.lf-action-builder:not(.is-disabled):hover {
  background: linear-gradient(180deg, #f1dfad, #d0b56d) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

.btn.secondary,
.step-footer a:not(.next),
a.btn.secondary,
.lf-action-btn,
.lf-call-btn,
.lf-refresh-btn,
.lf-load-more-btn {
  min-height: 34px;
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.btn.secondary:hover,
.step-footer a:not(.next):hover,
.lf-action-btn:hover:not(.is-disabled),
html[data-theme="dark"] .lf-action-btn:hover:not(.is-disabled),
.lf-call-btn:hover,
.lf-refresh-btn:hover {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
  color: var(--text) !important;
}

input:not(.site-agreement-check):not(.links-hub-search):not(.lf-search-input):not(.owner-console-inbox-search),
select,
textarea,
.field input,
.field select,
.field textarea,
.feedback-form input,
.feedback-form textarea,
.bug-report-form input,
.bug-report-form textarea,
.bug-report-form select,
.payout-link-input,
.lf-workflow-select,
.dash-sale-input,
.dash-sale-money {
  min-height: 36px;
  padding: 8px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

textarea,
.feedback-form textarea,
.bug-report-form textarea {
  min-height: 68px;
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.lf-workflow-select:focus-visible,
.dash-sale-money:focus-within,
.dash-sale-input:focus {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  outline: 1px solid color-mix(in srgb, var(--accent) 62%, var(--border));
  outline-offset: 2px;
}

.leads-toolbar {
  padding: 14px 16px;
}

.leads-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
  gap: 6px;
}

.lf-toggle-btn {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.lf-pill-toggle,
.lf-website-toggle,
.settings-segment,
.pill {
  padding: 3px;
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border);
}

html[data-theme="dark"] .sidebar-panel {
  background: rgba(9, 9, 10, 0.94);
  border-right-color: var(--border);
  box-shadow: 12px 0 38px rgba(0, 0, 0, 0.24) !important;
}

.sidebar-panel .nav-group > .nav-list,
.sidebar-panel .nav-group-home > .nav-list {
  background: rgba(255, 255, 255, 0.025);
  border: none;
  border-radius: 14px;
  padding: 6px;
}

.sidebar-panel .nav-link {
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
}

.sidebar-panel .nav-link,
.sidebar-panel .nav-section-toggle,
.sidebar-panel .nav-link-text,
.sidebar-panel .ico-nav,
.sidebar-panel .ico-nav-section {
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    opacity var(--dur-med) var(--ease-out);
}

.sidebar-panel .nav-link.active,
html[data-theme="dark"] .sidebar-panel .nav-link.active {
  background: var(--accent-soft);
  border: none;
  color: var(--accent) !important;
}

.brand-mark--icon,
.brand-mark:has(.ico-brand) {
  background: linear-gradient(180deg, #e7d4a0, #c5a85f);
  border-color: rgba(238, 219, 166, 0.6);
  border-radius: 13px;
}

html[data-theme="light"]:not([data-ui-color]) .card,
html[data-theme="light"]:not([data-ui-color]) .tool-card,
html[data-theme="light"]:not([data-ui-color]) .role-card,
html[data-theme="light"]:not([data-ui-color]) .settings-card,
html[data-theme="light"]:not([data-ui-color]) .telegram-embed-card,
html[data-theme="light"]:not([data-ui-color]) .accounts-survey,
html[data-theme="light"]:not([data-ui-color]) .owner-card,
html[data-theme="light"]:not([data-ui-color]) .contributors-card,
html[data-theme="light"]:not([data-ui-color]) .lead-card,
html[data-theme="light"]:not([data-ui-color]) .dash-page-hero,
html[data-theme="light"]:not([data-ui-color]) .leads-toolbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 250, 239, 0.54)),
    var(--surface) !important;
}

html[data-theme="light"]:not([data-ui-color]) .dash-quicklink,
html[data-theme="light"]:not([data-ui-color]) .dash-stat-chip,
html[data-theme="light"]:not([data-ui-color]) .lf-refresh-btn,
html[data-theme="light"]:not([data-ui-color]) .lf-workflow-select,
html[data-theme="light"]:not([data-ui-color]) .lf-info-icon,
html[data-theme="light"]:not([data-ui-color]) .lf-menu-btn,
html[data-theme="light"]:not([data-ui-color]) .lf-action-btn,
html[data-theme="light"]:not([data-ui-color]) .lf-call-btn,
html[data-theme="light"]:not([data-ui-color]) .lf-load-more-btn {
  background: rgba(255, 255, 255, 0.62) !important;
  color: var(--text);
}

html[data-theme="light"]:not([data-ui-color]) .dash-board-performance,
html[data-theme="light"]:not([data-ui-color]) .dash-sale-form,
html[data-theme="light"]:not([data-ui-color]) .dash-board-log,
html[data-theme="light"]:not([data-ui-color]) .dash-board-history,
html[data-theme="light"]:not([data-ui-color]) .dash-pending-island.dash-pending-section {
  background: rgba(255, 255, 255, 0.54);
}

html[data-theme="light"]:not([data-ui-color]) .btn,
html[data-theme="light"]:not([data-ui-color]) .btn-primary,
html[data-theme="light"]:not([data-ui-color]) .step-footer a.next,
html[data-theme="light"]:not([data-ui-color]) .survey-action-link.btn,
html[data-theme="light"]:not([data-ui-color]) a.btn:not(.secondary),
html[data-theme="light"]:not([data-ui-color]) .nav-start,
html[data-theme="light"]:not([data-ui-color]) .lf-toggle-btn.active,
html[data-theme="light"]:not([data-ui-color]) .lf-action-builder:not(.is-disabled),
html[data-theme="light"]:not([data-ui-color]) .lf-load-more-btn:hover {
  background: linear-gradient(180deg, #b48b42, #8b6725) !important;
  border-color: rgba(122, 93, 39, 0.45) !important;
  color: #fffaf0 !important;
}

html[data-theme="light"]:not([data-ui-color]) .btn.secondary,
html[data-theme="light"]:not([data-ui-color]) .step-footer a:not(.next),
html[data-theme="light"]:not([data-ui-color]) a.btn.secondary,
html[data-theme="light"]:not([data-ui-color]) .lf-action-btn,
html[data-theme="light"]:not([data-ui-color]) .lf-call-btn,
html[data-theme="light"]:not([data-ui-color]) .lf-refresh-btn,
html[data-theme="light"]:not([data-ui-color]) .lf-load-more-btn {
  background: rgba(255, 255, 255, 0.62) !important;
  color: var(--text) !important;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel {
  background: rgba(255, 252, 245, 0.94);
  box-shadow: 12px 0 38px rgba(82, 58, 20, 0.08) !important;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-group > .nav-list,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-group-home > .nav-list {
  background: rgba(255, 255, 255, 0.54);
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link {
  color: #30271a;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link:hover {
  background: rgba(154, 117, 48, 0.08);
  color: #17130d;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link.active,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link.active .ico-nav {
  color: var(--accent) !important;
}

@media (max-width: 900px) {
  body > #page-body,
  #page-body {
    padding: 64px max(18px, env(safe-area-inset-right, 0px)) 76px max(18px, env(safe-area-inset-left, 0px));
  }
}

@media (max-width: 640px) {
  .dash-page-hero,
  .leads-toolbar,
  .card,
  .lead-card {
    border-radius: 15px;
  }

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

/* Flat modern color layer: solid colors, no glow, no gradients. */
:root,
html[data-theme="dark"] {
  --bg: #080808;
  --bg-top: #080808;
  --bg-bottom: #080808;
  --surface: #151515;
  --surface-elevated: #1c1c1c;
  --surface-2: #232323;
  --input-bg: #101010;
  --text: #f5f0e7;
  --muted: #a49b8e;
  --border: #36312a;
  --accent: #d6aa3d;
  --accent-soft: #2b2415;
  --btn-primary-bg: #d6aa3d;
  --btn-primary-fg: #111111;
  --btn-primary-border: #d6aa3d;
  --accent-blue: #d6aa3d;
  --accent-blue-soft: #2b2415;
  --green: #d6aa3d;
  --green-bg: #2b2415;
  --green-soft: #332916;
  --gold: #d6aa3d;
  --gold-soft: #2b2415;
  --shadow: none;
  --shadow-md: none;
  --shadow-hover: none;
}

html[data-theme="light"]:not([data-ui-color]) {
  --bg: #fbf7ef;
  --bg-top: #fffdf8;
  --bg-bottom: #f3eadb;
  --surface: #fffaf1;
  --surface-elevated: #ffffff;
  --surface-2: #f4ecdf;
  --input-bg: #fffdf8;
  --text: #211a12;
  --muted: #766b5d;
  --border: #dfd2bd;
  --accent: #8b6725;
  --accent-soft: #efe3cc;
  --btn-primary-bg: #8b6725;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #8b6725;
  --accent-blue: #8b6725;
  --accent-blue-soft: #efe3cc;
  --green: #8b6725;
  --green-bg: #efe3cc;
  --green-soft: #e8d8bb;
  --gold: #8b6725;
  --gold-soft: #efe3cc;
  --shadow: 0 10px 28px rgba(82, 58, 20, 0.08);
  --shadow-md: 0 16px 36px rgba(82, 58, 20, 0.12);
  --shadow-hover: 0 18px 42px rgba(82, 58, 20, 0.14);
}

html[data-ui-color="white"] {
  /* Color tokens only - do not override radius, spacing, or typography here. */
  --bg: #f7f9fc;
  --bg-top: #ffffff;
  --bg-bottom: #eef3f8;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-2: #f3f6fa;
  --input-bg: #fbfdff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #dfe7f0;
  --accent: #1f2937;
  --accent-soft: #eef2f7;
  --btn-primary-bg: #1f2937;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #1f2937;
  --accent-blue: #1f2937;
  --accent-blue-soft: #eef2f7;
  --green: #1f2937;
  --green-bg: #eef2f7;
  --green-soft: #e4eaf1;
  --gold: #374151;
  --gold-soft: #eef2f7;
  --violet: #1f2937;
  --violet-soft: #eef2f7;
  --red: #1f2937;
  --shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 16px 36px rgba(15, 23, 42, 0.1);
  --shadow-hover: 0 18px 42px rgba(15, 23, 42, 0.13);
}

html[data-ui-color="black"] {
  color-scheme: dark;
  --bg: #070707;
  --bg-top: #111111;
  --bg-bottom: #000000;
  --surface: #121212;
  --surface-elevated: #1a1a1a;
  --surface-2: #242424;
  --input-bg: #181818;
  --text: #f5f5f5;
  --muted: #b8b8b8;
  --border: #3a3a3a;
  --accent: #f4f4f5;
  --accent-soft: rgba(255, 255, 255, 0.12);
  --btn-primary-bg: #f4f4f5;
  --btn-primary-fg: #09090b;
  --btn-primary-border: #ffffff;
  --accent-blue: #f4f4f5;
  --accent-blue-soft: rgba(255, 255, 255, 0.12);
  --green: #f4f4f5;
  --green-bg: rgba(255, 255, 255, 0.12);
  --green-soft: rgba(255, 255, 255, 0.18);
  --gold: #e5e7eb;
  --gold-soft: rgba(255, 255, 255, 0.12);
  --violet: #f4f4f5;
  --violet-soft: rgba(255, 255, 255, 0.12);
  --red: #f4f4f5;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 22px 46px rgba(0, 0, 0, 0.44);
  --shadow-hover: 0 24px 54px rgba(0, 0, 0, 0.5);
}

html[data-ui-color="black"] .btn,
html[data-ui-color="black"] .btn-primary,
html[data-ui-color="black"] a.btn:not(.secondary),
html[data-ui-color="black"] .step-footer a.next,
html[data-ui-color="black"] .survey-choice-btn.survey-proceed-btn,
html[data-ui-color="black"] .course-module-next,
html[data-ui-color="black"] .lf-action-builder:not(.is-disabled),
html[data-ui-color="black"] .lf-toggle-btn.active {
  color: var(--btn-primary-fg) !important;
}

html[data-ui-color="black"] .nav-link.active,
html[data-ui-color="black"] .path-item.current .path-num {
  background: var(--accent-soft) !important;
  border: none;
  color: var(--text) !important;
}

html[data-ui-color="black"] .nav-link.active .ico-nav,
html[data-ui-color="black"] .nav-link.active .step-badge:not(.done-badge) {
  color: var(--text) !important;
}

html[data-ui-color="black"] .nav-link.active .step-badge.done-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #d4d4d8;
  border-color: color-mix(in srgb, #d4d4d8 35%, var(--border));
}

html[data-ui-color="black"] .nav-link.done:not(.active) .step-badge.done-badge {
  background: color-mix(in srgb, #a1a1aa 12%, var(--surface-elevated));
  color: #d4d4d8;
  border-color: color-mix(in srgb, #a1a1aa 22%, var(--border));
}

html[data-ui-color="black"] .nav-start {
  background: #27272a !important;
  color: var(--text) !important;
  border: 1px solid #3f3f46 !important;
}

html[data-ui-color="black"] .btn.secondary,
html[data-ui-color="black"] .step-footer a:not(.next),
html[data-ui-color="black"] a.btn.secondary,
html[data-ui-color="black"] .lf-action-btn:not(.lf-action-builder),
html[data-ui-color="black"] .lf-call-btn,
html[data-ui-color="black"] .lf-refresh-btn,
html[data-ui-color="black"] .lf-load-more-btn {
  background: #202020 !important;
  border-color: #4a4a4a !important;
  color: var(--text) !important;
}

html[data-ui-color="green"] {
  --bg: #f3faf5;
  --bg-top: #fbfefc;
  --bg-bottom: #e2f3e8;
  --surface: #fbfefc;
  --surface-elevated: #ffffff;
  --surface-2: #eaf6ee;
  --input-bg: #ffffff;
  --text: #102116;
  --muted: #5f7567;
  --border: #c9dfd0;
  --accent: #15803d;
  --accent-soft: #dff3e6;
  --btn-primary-bg: #15803d;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #15803d;
  --accent-blue: #15803d;
  --accent-blue-soft: #dff3e6;
  --green: #15803d;
  --green-bg: #e8f7ed;
  --green-soft: #d7efdf;
  --gold: #166534;
  --gold-soft: #e8f7ed;
  --violet: #15803d;
  --violet-soft: #e8f7ed;
  --red: #15803d;
  --shadow: 0 10px 28px rgba(21, 83, 42, 0.08);
  --shadow-md: 0 16px 36px rgba(21, 83, 42, 0.12);
  --shadow-hover: 0 18px 42px rgba(21, 83, 42, 0.15);
}

html[data-ui-color="grey"] {
  --bg: #f5f5f4;
  --bg-top: #fbfbfa;
  --bg-bottom: #e8e6e3;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-2: #ebe9e6;
  --input-bg: #fbfbfa;
  --text: #1c1917;
  --muted: #78716c;
  --border: #d6d3d1;
  --accent: #57534e;
  --accent-soft: #ebe8e4;
  --btn-primary-bg: #57534e;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #57534e;
  --accent-blue: #57534e;
  --accent-blue-soft: #ebe8e4;
  --green: #57534e;
  --green-bg: #efedea;
  --green-soft: #e3dfda;
  --gold: #57534e;
  --gold-soft: #efedea;
  --violet: #57534e;
  --violet-soft: #efedea;
  --red: #57534e;
  --shadow: 0 10px 28px rgba(41, 37, 36, 0.07);
  --shadow-md: 0 16px 36px rgba(41, 37, 36, 0.1);
  --shadow-hover: 0 18px 42px rgba(41, 37, 36, 0.13);
}

html[data-ui-color="blue"] {
  --bg: #f3f7ff;
  --bg-top: #fbfdff;
  --bg-bottom: #e2ecff;
  --surface: #fbfdff;
  --surface-elevated: #ffffff;
  --surface-2: #eaf1ff;
  --input-bg: #ffffff;
  --text: #111c33;
  --muted: #61708d;
  --border: #cbd8f2;
  --accent: #2563eb;
  --accent-soft: #e1ebff;
  --btn-primary-bg: #2563eb;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #2563eb;
  --accent-blue: #2563eb;
  --accent-blue-soft: #e1ebff;
  --green: #2563eb;
  --green-bg: #eaf1ff;
  --green-soft: #d8e6ff;
  --gold: #1d4ed8;
  --gold-soft: #eaf1ff;
  --violet: #2563eb;
  --violet-soft: #eaf1ff;
  --red: #2563eb;
  --shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
  --shadow-md: 0 16px 36px rgba(37, 99, 235, 0.12);
  --shadow-hover: 0 18px 42px rgba(37, 99, 235, 0.15);
}

html[data-ui-color="purple"] {
  --bg: #f8f5ff;
  --bg-top: #fefcff;
  --bg-bottom: #eee6ff;
  --surface: #fefcff;
  --surface-elevated: #ffffff;
  --surface-2: #f1eaff;
  --input-bg: #ffffff;
  --text: #201431;
  --muted: #725f8f;
  --border: #ddcff5;
  --accent: #7c3aed;
  --accent-soft: #eee6ff;
  --btn-primary-bg: #7c3aed;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #7c3aed;
  --accent-blue: #7c3aed;
  --accent-blue-soft: #eee6ff;
  --green: #7c3aed;
  --green-bg: #f1eaff;
  --green-soft: #e6d8ff;
  --gold: #6d28d9;
  --gold-soft: #f1eaff;
  --violet: #7c3aed;
  --violet-soft: #f1eaff;
  --red: #7c3aed;
  --shadow: 0 10px 28px rgba(124, 58, 237, 0.08);
  --shadow-md: 0 16px 36px rgba(124, 58, 237, 0.12);
  --shadow-hover: 0 18px 42px rgba(124, 58, 237, 0.15);
}

html[data-ui-color="red"] {
  --bg: #fff5f5;
  --bg-top: #fffbfb;
  --bg-bottom: #fee2e2;
  --surface: #fffbfb;
  --surface-elevated: #ffffff;
  --surface-2: #feecec;
  --input-bg: #ffffff;
  --text: #2f1414;
  --muted: #8b5f5f;
  --border: #f2cccc;
  --accent: #dc2626;
  --accent-soft: #fee2e2;
  --btn-primary-bg: #dc2626;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #dc2626;
  --accent-blue: #dc2626;
  --accent-blue-soft: #fee2e2;
  --green: #dc2626;
  --green-bg: #feecec;
  --green-soft: #fbd7d7;
  --gold: #b91c1c;
  --gold-soft: #feecec;
  --violet: #dc2626;
  --violet-soft: #feecec;
  --red: #dc2626;
  --shadow: 0 10px 28px rgba(220, 38, 38, 0.08);
  --shadow-md: 0 16px 36px rgba(220, 38, 38, 0.12);
  --shadow-hover: 0 18px 42px rgba(220, 38, 38, 0.15);
}

html[data-ui-color="white"] .settings-color-btn.active,
html[data-ui-color="grey"] .settings-color-btn.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

body,
html[data-theme="dark"] body,
html[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text);
}

.card,
.tool-card,
.role-card,
.settings-card,
.telegram-embed-card,
.accounts-survey,
.owner-card,
.contributors-card,
.lead-card,
.dash-page-hero,
.leads-toolbar,
html[data-theme="light"]:not([data-ui-color]) .card,
html[data-theme="light"]:not([data-ui-color]) .tool-card,
html[data-theme="light"]:not([data-ui-color]) .role-card,
html[data-theme="light"]:not([data-ui-color]) .settings-card,
html[data-theme="light"]:not([data-ui-color]) .telegram-embed-card,
html[data-theme="light"]:not([data-ui-color]) .accounts-survey,
html[data-theme="light"]:not([data-ui-color]) .owner-card,
html[data-theme="light"]:not([data-ui-color]) .contributors-card,
html[data-theme="light"]:not([data-ui-color]) .lead-card,
html[data-theme="light"]:not([data-ui-color]) .dash-page-hero,
html[data-theme="light"]:not([data-ui-color]) .leads-toolbar {
  background: var(--surface) !important;
  border-color: var(--border);
  box-shadow: none !important;
  filter: none !important;
}

.card:hover,
.tool-card:hover,
.role-card:hover,
.lead-card:hover,
.dash-quicklink:hover {
  border-color: var(--accent);
  box-shadow: none !important;
  transform: none;
}

.dash-quicklink,
.dash-stat-chip,
.lf-refresh-btn,
.lf-workflow-select,
.lf-info-icon,
.lf-menu-btn,
.lf-action-btn,
.lf-call-btn,
.lf-load-more-btn,
html[data-theme="dark"] .dash-quicklink,
html[data-theme="dark"] .dash-stat-chip,
html[data-theme="dark"] .lf-refresh-btn,
html[data-theme="dark"] .lf-menu-btn,
html[data-theme="dark"] .lf-action-btn,
html[data-theme="light"] .dash-quicklink,
html[data-theme="light"] .dash-stat-chip,
html[data-theme="light"] .lf-refresh-btn,
html[data-theme="light"] .lf-workflow-select,
html[data-theme="light"] .lf-info-icon,
html[data-theme="light"] .lf-menu-btn,
html[data-theme="light"] .lf-action-btn,
html[data-theme="light"] .lf-call-btn,
html[data-theme="light"] .lf-load-more-btn {
  background: var(--surface-2) !important;
  border-color: var(--border);
  color: var(--text);
  box-shadow: none !important;
  filter: none !important;
}

.dash-board-performance,
html[data-theme="dark"] .dash-board-performance,
html[data-theme="light"] .dash-board-performance,
.dash-sale-form,
html[data-theme="dark"] .dash-sale-form,
html[data-theme="light"] .dash-sale-form,
.dash-board-log,
html[data-theme="light"] .dash-board-log,
.dash-board-history,
html[data-theme="light"] .dash-board-history,
.dash-pending-island.dash-pending-section,
html[data-theme="light"] .dash-pending-island.dash-pending-section {
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.btn,
.btn-primary,
.step-footer a.next,
.survey-action-link.btn,
a.btn:not(.secondary),
.nav-start,
.lf-toggle-btn.active,
html[data-theme="dark"] .lf-toggle-btn.active,
html[data-theme="light"] .lf-toggle-btn.active,
.lf-action-builder:not(.is-disabled),
.lf-load-more-btn:hover,
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .step-footer a.next,
html[data-theme="light"] .survey-action-link.btn,
html[data-theme="light"] a.btn:not(.secondary),
html[data-theme="light"] .nav-start,
html[data-theme="light"] .lf-action-builder:not(.is-disabled),
html[data-theme="light"] .lf-load-more-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--btn-primary-fg) !important;
  box-shadow: none !important;
  filter: none !important;
}

.btn:not(.secondary):hover,
.btn-primary:hover,
.step-footer a.next:hover,
.lf-action-builder:not(.is-disabled):hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

.btn.secondary,
.step-footer a:not(.next),
a.btn.secondary,
.lf-action-btn,
.lf-call-btn,
.lf-refresh-btn,
.lf-load-more-btn,
html[data-theme="light"] .btn.secondary,
html[data-theme="light"] .step-footer a:not(.next),
html[data-theme="light"] a.btn.secondary,
html[data-theme="light"] .lf-action-btn,
html[data-theme="light"] .lf-call-btn,
html[data-theme="light"] .lf-refresh-btn,
html[data-theme="light"] .lf-load-more-btn {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

input:not(.site-agreement-check):not(.links-hub-search):not(.lf-search-input):not(.owner-console-inbox-search),
select,
textarea,
.field input,
.field select,
.field textarea,
.feedback-form input,
.feedback-form textarea,
.bug-report-form input,
.bug-report-form textarea,
.bug-report-form select,
.payout-link-input,
.lf-workflow-select,
.dash-sale-input,
.dash-sale-money {
  background: var(--input-bg) !important;
  border-color: var(--border);
  box-shadow: none !important;
}

.sidebar-panel,
html[data-theme="dark"] .sidebar-panel,
html[data-theme="light"] .sidebar-panel {
  background: var(--surface) !important;
  border-right-color: var(--border);
  box-shadow: none !important;
  filter: none !important;
}

.sidebar-panel .nav-group > .nav-list,
.sidebar-panel .nav-group-home > .nav-list,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-group > .nav-list,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-group-home > .nav-list {
  background: var(--surface-2) !important;
  border: none;
  box-shadow: none !important;
}

.sidebar-panel .nav-link.active,
html[data-theme="dark"]:not([data-ui-color]) .sidebar-panel .nav-link.active,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link.active {
  background: var(--accent-soft) !important;
  border: none;
  color: var(--accent) !important;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel {
  background: color-mix(in srgb, color-mix(in srgb, var(--surface-2) 68%, #ffffff 32%) 92%, var(--accent) 8%) !important;
  border-right-color: color-mix(in srgb, var(--border) 84%, var(--accent) 16%);
  box-shadow: 10px 0 28px color-mix(in srgb, var(--accent) 7%, transparent) !important;
}

/* Sidebar nav tints for cream/default only - ui-color swatches use EOF sidebar block. */
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-group > .nav-list,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-group-home > .nav-list {
  background: color-mix(in srgb, var(--surface) 88%, #ffffff 12%) !important;
  border: none;
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-section-label,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .ico-nav-section {
  color: color-mix(in srgb, var(--accent) 74%, var(--muted));
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .ico-nav {
  color: color-mix(in srgb, var(--accent) 46%, var(--muted));
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link {
  color: var(--text);
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link:hover {
  background: color-mix(in srgb, var(--surface-2) 72%, var(--accent-soft) 28%) !important;
  color: var(--text);
}

html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link.active,
html[data-theme="light"]:not([data-ui-color]) .sidebar-panel .nav-link.active .ico-nav {
  color: var(--accent) !important;
}

.btn,
.btn-primary,
.step-footer a.next,
.survey-action-link.btn,
a.btn:not(.secondary),
.survey-choice-btn.survey-proceed-btn,
.nav-start,
.lf-toggle-btn.active,
html[data-theme="dark"] .lf-toggle-btn.active,
html[data-theme="light"] .lf-toggle-btn.active,
.lf-action-builder:not(.is-disabled),
.lf-load-more-btn:hover,
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .step-footer a.next,
html[data-theme="light"] .survey-action-link.btn,
html[data-theme="light"] a.btn:not(.secondary),
html[data-theme="light"] .survey-choice-btn.survey-proceed-btn,
html[data-theme="light"] .nav-start,
html[data-theme="light"] .lf-action-builder:not(.is-disabled),
html[data-theme="light"] .lf-load-more-btn:hover {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 82%, #ffffff 18%),
      color-mix(in srgb, var(--accent) 88%, #000000 12%)
    ) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #000000 28%) !important;
  color: var(--btn-primary-fg) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 36%, transparent) inset,
    0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent) !important;
  filter: none !important;
}

.btn:not(.secondary):hover,
.btn-primary:hover,
.step-footer a.next:hover,
.survey-choice-btn.survey-proceed-btn:hover,
.lf-action-builder:not(.is-disabled):hover {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 74%, #ffffff 26%),
      color-mix(in srgb, var(--accent) 90%, #000000 10%)
    ) !important;
  border-color: color-mix(in srgb, var(--accent) 58%, #000000 42%) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 42%, transparent) inset,
    0 14px 28px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.survey-choice-btn.survey-proceed-btn .survey-proceed-label,
.survey-choice-btn.survey-proceed-btn .survey-proceed-arrow {
  color: var(--btn-primary-fg) !important;
}

.btn.secondary,
.step-footer a:not(.next),
a.btn.secondary,
.course-module-prev,
.lf-action-btn:not(.lf-action-builder),
.lf-call-btn,
.lf-refresh-btn,
.lf-load-more-btn {
  background: color-mix(in srgb, var(--surface-2) 86%, var(--surface) 14%) !important;
  border-color: color-mix(in srgb, var(--border) 74%, var(--text) 26%) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 20%, transparent) inset !important;
}

/* Course navigation · flat surfaces aligned with card shell. */
.course-topics-bar {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

.course-topics-label {
  color: var(--muted);
}

.course-panel-tag.btn.secondary:not(.is-active) {
  color: var(--muted) !important;
}

a.course-channel-chip {
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

a.course-channel-chip:hover {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
  box-shadow: none !important;
}

.course-module-nav {
  background: var(--surface) !important;
  border-top-color: var(--border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .course-topics-bar,
html[data-theme="dark"] a.course-channel-chip,
html[data-theme="dark"] .course-module-nav {
  box-shadow: none !important;
}

/* Keep sidebar step numbers neutral. */
.nav-link .step-badge,
.nav-link.active .step-badge,
.nav-link .step-badge.done-badge,
.nav-link.active .step-badge.done-badge,
.nav-link.done:not(.active) .step-badge.done-badge,
html[data-theme="dark"] .nav-link .step-badge,
html[data-theme="dark"] .nav-link.active .step-badge,
html[data-theme="dark"] .nav-link .step-badge.done-badge,
html[data-theme="dark"] .nav-link.active .step-badge.done-badge,
html[data-theme="dark"] .nav-link.done:not(.active) .step-badge.done-badge {
  background: color-mix(in srgb, var(--surface-2) 88%, var(--surface) 12%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--muted) 14%) !important;
  color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%) !important;
  box-shadow: none !important;
}

.nav-link.active .step-badge,
html[data-theme="dark"] .nav-link.active .step-badge {
  outline: none;
}

/* Business Finder cards · dashboard-style polish */
.leads-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}

.lead-card {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface)) !important;
  box-shadow: var(--shadow) !important;
  gap: 0;
}

.lead-card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border)) !important;
  box-shadow: var(--shadow-md) !important;
  transform: none;
}

.lf-card-head,
.lf-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 8px;
  background: transparent;
  border-bottom: none;
}

.lf-card-head-actions,
.lf-card-top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.lf-card-identity {
  gap: 10px;
}

.lf-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 12px;
}

.lead-card-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
  line-height: 1.35;
}

.lf-card-subline {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
}

.lf-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 12px 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 10%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 18%, var(--border));
  width: fit-content;
  max-width: calc(100% - 24px);
}

.lf-card-rating-score {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, #b45309 85%, var(--text));
  font-variant-numeric: tabular-nums;
}

.lf-card-rating-star {
  display: inline-flex;
  align-items: center;
  color: #d97706;
}

.lf-card-rating-ico {
  width: 11px;
  height: 11px;
  margin: 0;
}

.lf-card-rating-count {
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in srgb, #b45309 55%, var(--muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-card-phone-wrap {
  padding: 0 12px 8px;
}

.lf-card-phone {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lf-card-phone:hover,
.lf-card-phone:focus-visible {
  background: var(--green-bg);
  border-color: color-mix(in srgb, var(--green) 30%, var(--border));
  color: var(--green);
}

.lf-card-phone-ico {
  width: 14px;
  height: 14px;
}

.lf-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 10px;
  flex: 1;
}

.lf-meta-row--website {
  display: flex;
  align-items: center;
}

.lf-meta-line {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
}

.lf-meta-line--muted,
.lf-meta-line.lf-detail-val-missing {
  color: var(--muted);
  font-style: italic;
}

.lf-meta-line--quote {
  color: var(--muted);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lf-meta-ico {
  width: 12px;
  height: 12px;
  margin: 1px 0 0;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--muted) 80%, var(--text));
}

.lf-card-foot,
.lead-card .lf-card-actions {
  padding: 8px 10px 10px;
  gap: 6px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface-2) 35%, transparent);
}

.lf-action-btn {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.lf-website-badge {
  min-height: 20px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.lf-mark-btn,
.lf-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
}

.lf-mark-btn:hover,
.lf-menu-btn:hover,
.lf-card-menu-wrap.is-open .lf-menu-btn {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.lf-mark-save.is-on {
  color: #e11d48;
  background: #fff1f2;
  border-color: #fecdd3;
}

html[data-theme="dark"] .lf-card-rating {
  background: color-mix(in srgb, #f59e0b 14%, var(--surface));
  border-color: color-mix(in srgb, #f59e0b 22%, var(--border));
}

html[data-theme="dark"] .lf-card-foot,
html[data-theme="dark"] .lead-card .lf-card-actions {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.lf-action-ico {
  width: 12px;
  height: 12px;
}

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

html[data-theme="light"]:not([data-ui-color]) body {
  background:
    radial-gradient(circle at 10% 0%, rgba(190, 142, 55, 0.1), transparent 28%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 48%, var(--bg-bottom)) !important;
}

html[data-theme="light"]:not([data-ui-color]) .card,
html[data-theme="light"]:not([data-ui-color]) .tool-card,
html[data-theme="light"]:not([data-ui-color]) .role-card,
html[data-theme="light"]:not([data-ui-color]) .settings-card,
html[data-theme="light"]:not([data-ui-color]) .dash-page-hero,
html[data-theme="light"]:not([data-ui-color]) .leads-toolbar {
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface)) !important;
  border-color: var(--border);
  box-shadow: var(--shadow) !important;
}

html[data-theme="light"]:not([data-ui-color]) .dash-quicklink,
html[data-theme="light"]:not([data-ui-color]) .dash-stat-chip,
html[data-theme="light"]:not([data-ui-color]) .dash-sale-form,
html[data-theme="light"]:not([data-ui-color]) .dash-board-log,
html[data-theme="light"]:not([data-ui-color]) .dash-board-history,
html[data-theme="light"]:not([data-ui-color]) .dash-sales-toggle {
  background: rgba(255, 250, 241, 0.78) !important;
  border-color: var(--border);
}

html[data-theme="light"]:not([data-ui-color]) input:not(.site-agreement-check):not(.links-hub-search):not(.lf-search-input):not(.owner-console-inbox-search),
html[data-theme="light"]:not([data-ui-color]) select,
html[data-theme="light"]:not([data-ui-color]) textarea,
html[data-theme="light"]:not([data-ui-color]) .field input,
html[data-theme="light"]:not([data-ui-color]) .field select,
html[data-theme="light"]:not([data-ui-color]) .field textarea,
html[data-theme="light"]:not([data-ui-color]) .dash-sale-input,
html[data-theme="light"]:not([data-ui-color]) .dash-sale-money {
  background: var(--input-bg) !important;
  border-color: var(--border);
}

.brand-mark--icon,
.brand-mark:has(.ico-brand) {
  background: var(--accent) !important;
  border-color: var(--accent);
  box-shadow: none !important;
}

/* Dashboard redesign */
body[data-page="home"] #page-body.dashboard-redesign {
  max-width: 1120px;
  text-align: center;
}

.dashboard-redesign .dash-header {
  width: min(100%, 1040px);
  max-width: 1040px;
  margin: 0 auto 14px;
}

.dashboard-redesign .dash-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.dashboard-redesign .dash-page-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 28px 24px;
  text-align: left;
}

.dashboard-redesign .dash-page-hero h1 {
  margin: 0;
  font-size: clamp(44px, 7vw, 76px);
  line-height: 0.92;
}

.dashboard-redesign .dash-page-lead {
  max-width: 42rem;
  margin: 0;
  font-size: 15px;
}

.dashboard-redesign .dash-quicklinks-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  text-align: left;
}

.dashboard-redesign .dash-quicklinks-eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-redesign .dash-quicklinks-title {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.dashboard-redesign .dash-quicklinks {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.dashboard-redesign .dash-quicklink {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  justify-content: flex-start;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 14px;
  font-size: 12px;
}

.dashboard-redesign .dash-hub {
  align-items: center;
  gap: 14px;
}

.dashboard-redesign .dash-board,
.dashboard-redesign .dash-pending-island {
  width: min(100%, 1040px);
  margin-inline: auto;
  text-align: center;
}

.dashboard-redesign .dash-board {
  display: grid;
  gap: 0;
  padding: 0;
}

.dashboard-redesign .dash-board-performance {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--green) 12%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 88%, var(--accent-soft)), var(--surface));
  border-bottom: 1px solid var(--border);
}

.dashboard-redesign .dash-goal-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
}

.dashboard-redesign .dash-goal-heading {
  min-width: 0;
}

.dashboard-redesign .dash-goal-eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dashboard-redesign .dash-goal-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(26px, 4vw, 42px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.dashboard-redesign .dash-goal-subtitle {
  max-width: 330px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.dashboard-redesign .dash-goal-panel-head .dash-quicklinks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 7px;
  width: 100%;
}

.dashboard-redesign .dash-goal-panel-head .dash-quicklink {
  min-height: 44px;
  justify-content: center;
  padding: 8px 9px;
  text-align: center;
}

.dashboard-redesign .dash-goal-panel-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 280px);
  align-items: stretch;
  gap: 16px;
}

.dashboard-redesign .dash-goal-ring-card {
  display: grid;
  place-items: center;
  min-height: 286px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated, var(--surface)) 92%, var(--accent-soft)), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

.dashboard-redesign .dash-perf-main {
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  text-align: left;
}

.dashboard-redesign .dash-goal-ring {
  width: clamp(218px, 28vw, 286px);
  height: clamp(218px, 28vw, 286px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.dashboard-redesign .dash-goal-ring-svg {
  filter: none;
}

.dashboard-redesign .dash-goal-ring-track {
  stroke: color-mix(in srgb, var(--border) 62%, transparent);
  stroke-width: 7;
}

.dashboard-redesign .dash-goal-ring-fill {
  stroke: var(--accent);
  stroke-width: 7;
  filter: none;
  stroke-linecap: round;
  transition: none;
}

.dashboard-redesign .dash-goal-ring-center {
  inset: 42px;
  border-radius: 999px;
  gap: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 10%, transparent);
}

.dashboard-redesign .dash-goal-ring-label {
  font-size: 11px;
  color: var(--muted);
}

.dashboard-redesign .dash-goal-ring-pct {
  font-size: clamp(42px, 5.4vw, 62px);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.07em;
}

.dashboard-redesign .dash-goal-ring-status {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.dashboard-redesign .dash-goal-ring-remaining {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.dashboard-redesign .dash-goal-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}

.dashboard-redesign .dash-goal-editor-block:not(.dash-goal-editor-block--ring) {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 142px;
  gap: 8px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
}

.dashboard-redesign .dash-goal-editor-block--ring .dash-goal-btn,
.dashboard-redesign .dash-goal-editor-block--ring .dash-goal-edit {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 0.95;
}

.dashboard-redesign .dash-goal-editor-block--ring .dash-goal-edit input {
  width: 6ch;
  text-align: center;
}

.dashboard-redesign .dash-goal-editor-block--ring .dash-goal-edit-hint {
  font-size: 10px;
}

.dashboard-redesign .dash-tracker-label,
.dashboard-redesign .dash-sale-label,
.dashboard-redesign .dash-tracker-stat-lbl,
.dashboard-redesign .dash-goal-edit-hint {
  text-align: left;
}

.dashboard-redesign .dash-goal-editor-block--ring .dash-goal-edit-hint {
  text-align: center;
}

.dashboard-redesign .dash-goal-editor {
  width: 100%;
}

.dashboard-redesign .dash-goal-btn {
  position: relative;
  width: 100%;
  min-height: 58px;
  padding: 10px 42px 10px 16px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  color: var(--text);
  text-align: left;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent);
}

.dashboard-redesign .dash-goal-btn::after {
  content: "Edit";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-redesign .dash-goal-btn:hover,
.dashboard-redesign .dash-goal-btn:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 72%, transparent);
}

.dashboard-redesign .dash-goal-edit {
  width: 100%;
  min-height: 58px;
  padding: 10px 42px 10px 16px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  background: var(--input-bg);
  border: 1px solid var(--accent);
  border-radius: 16px;
  box-sizing: border-box;
}

.dashboard-redesign .dash-goal-edit input {
  width: 100%;
  min-width: 0;
  border-bottom: 0;
  line-height: 1;
}

.dashboard-redesign .dash-goal-edit-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.dashboard-redesign .dash-goal-meta {
  justify-content: flex-start;
  text-align: left;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--surface) 80%, var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 999px;
}

.dashboard-redesign .dash-perf-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.dashboard-redesign .dash-stat-chip {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
  min-height: 92px;
  padding: 15px 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 90%, var(--accent-soft)), var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
}

.dashboard-redesign .dash-stat-chip::after {
  content: "";
  position: absolute;
  inset: auto -22px -30px auto;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  pointer-events: none;
}

.dashboard-redesign .dash-stat-chip--earn {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
}

.dashboard-redesign .dash-goal-copy .dash-stat-chip--earn {
  width: 100%;
  flex: 1;
  min-height: 120px;
  padding: 16px;
}

.dashboard-redesign .dash-goal-copy .dash-stat-chip--earn .dash-tracker-stat-val {
  font-size: clamp(30px, 4vw, 40px);
}

.dashboard-redesign .dash-stat-chip--sales {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}

.dashboard-redesign .dash-tracker-stat-val {
  position: relative;
  z-index: 1;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.dashboard-redesign .dash-tracker-stat-lbl {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
}

.dashboard-redesign .dash-board-work {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
  text-align: left;
  background: color-mix(in srgb, var(--bg) 34%, var(--surface));
}

.dashboard-redesign .dash-board-log,
.dashboard-redesign .dash-board-history {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.dashboard-redesign .dash-board-log {
  border: 1px solid var(--border);
}

.dashboard-redesign .dash-sales-panel-body,
.dashboard-redesign .dash-sales-history-body {
  margin-top: 0;
  padding: 16px;
}

.dashboard-redesign .dash-board-work-head,
.dashboard-redesign .dash-board-work-head--row {
  justify-content: flex-start;
  text-align: left;
}

.dashboard-redesign .dash-board-work-title {
  justify-content: flex-start;
  width: auto;
  font-size: 15px;
}

.dashboard-redesign .dash-sales-toggle {
  margin: 0;
  min-height: 58px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent-soft)), var(--surface-2)) !important;
}

.dashboard-redesign .dash-sales-toggle-title {
  font-size: 14px;
}

.dashboard-redesign .dash-sales-toggle-copy {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-redesign .dash-sales-panel[open] .dash-sales-toggle,
.dashboard-redesign .dash-sales-history[open] .dash-sales-toggle {
  border-bottom: 1px solid var(--border);
}

.dashboard-redesign .dash-sale-form {
  align-items: stretch;
  max-width: none;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  gap: 14px;
}

.dashboard-redesign .dash-sale-fields {
  grid-template-columns: minmax(140px, 0.8fr) minmax(220px, 1.2fr);
  gap: 14px;
}

.dashboard-redesign .dash-sale-money {
  height: auto;
  min-height: 44px;
  padding: 0;
}

.dashboard-redesign .dash-sale-input {
  min-height: 44px;
}

.dashboard-redesign .dash-sale-submit.dash-close-submit {
  min-height: 44px;
  font-size: 14px;
}

.dashboard-redesign .dash-board-history .deals-list {
  max-height: 320px;
  text-align: left;
}

.dashboard-redesign .dash-board-history .deal-card {
  align-items: center;
  padding: 14px;
}

.dashboard-redesign .dash-empty {
  text-align: center;
}

.dashboard-redesign .dash-pending-island {
  padding: 22px;
  text-align: left;
}

.dashboard-redesign .dash-pending-head {
  justify-content: space-between;
  text-align: left;
}

.dashboard-redesign .dash-pending-head-copy {
  flex: 1 1 360px;
}

.dashboard-redesign .dash-pending-desc {
  max-width: 32rem;
  margin-inline: 0;
}

.dashboard-redesign .dash-pending-count,
.dashboard-redesign .deals-count {
  border-radius: 999px;
}

.dashboard-redesign .dash-pending-list {
  text-align: left;
}

.dashboard-redesign .dash-pending-empty {
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
}

.dashboard-redesign .dash-pending-empty .dash-empty-title {
  font-size: 17px;
  font-weight: 800;
}

.dashboard-redesign .dash-pending-empty .dash-empty-desc {
  max-width: 28rem;
}

.dashboard-redesign .dash-pending-view-all {
  width: auto;
  min-width: 190px;
  margin-left: auto;
  justify-content: center;
}

@media (max-width: 900px) {
  body[data-page="home"] #page-body.dashboard-redesign {
    max-width: none;
  }

  .dashboard-redesign .dash-goal-panel-head {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .dashboard-redesign .dash-goal-subtitle {
    max-width: 100%;
  }

  .dashboard-redesign .dash-goal-panel-body {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-board-performance,
  .dashboard-redesign .dash-board-work {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-perf-main,
  .dashboard-redesign .dash-goal-copy,
  .dashboard-redesign .dash-goal-meta,
  .dashboard-redesign .dash-tracker-label,
  .dashboard-redesign .dash-goal-edit-hint {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .dashboard-redesign .dash-board-log {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .dashboard-redesign .dash-perf-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard-redesign .dash-top-row {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-page-hero {
    padding: 22px 16px;
    text-align: center;
  }

  .dashboard-redesign .dash-quicklinks-card {
    padding: 16px;
    text-align: center;
  }

  .dashboard-redesign .dash-goal-panel-head,
  .dashboard-redesign .dash-goal-copy,
  .dashboard-redesign .dash-goal-editor-block:not(.dash-goal-editor-block--ring) {
    align-items: center;
    justify-items: center;
    text-align: center;
  }

  .dashboard-redesign .dash-goal-panel-head .dash-quicklinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-redesign .dash-quicklink {
    justify-content: center;
  }

  .dashboard-redesign .dash-perf-main {
    flex-direction: column;
  }

  .dashboard-redesign .dash-perf-stats,
  .dashboard-redesign .dash-sale-fields {
    grid-template-columns: 1fr;
  }
}

/* Dashboard modern UI refresh */
body[data-page="home"] .main {
  padding-top: 28px;
}

body[data-page="home"] #page-body.dashboard-redesign {
  max-width: 1060px;
}

.dashboard-redesign .dash-header {
  width: min(100%, 980px);
  max-width: 980px;
  margin: 0 auto 18px;
}

.dashboard-redesign .dash-top-row {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.dashboard-redesign .dash-page-hero {
  width: 100%;
  padding: 24px 28px 6px;
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  text-align: center;
}

.dashboard-redesign .dash-page-hero h1 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(42px, 8vw, 82px);
  line-height: 0.92;
  letter-spacing: -0.075em;
}

.dashboard-redesign .dash-page-lead {
  max-width: 560px;
  margin: 12px auto 0;
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
  font-size: 15px;
  line-height: 1.55;
}

.dashboard-redesign .dash-action-dock {
  width: min(100%, 650px);
  min-height: 108px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  margin: 0 auto;
  padding: 18px 22px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 34px;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 65%, transparent) inset,
    0 20px 50px color-mix(in srgb, var(--text) 10%, transparent) !important;
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.dashboard-redesign .dash-action-dock .dash-quicklink {
  position: relative;
  width: auto;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 4px 0;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  background: transparent !important;
  border: 0 !important;
  border-radius: 22px;
  box-shadow: none !important;
  text-align: center;
  text-decoration: none;
  transform: none;
}

.dashboard-redesign .dash-action-dock .dash-quicklink:hover,
.dashboard-redesign .dash-action-dock .dash-quicklink:focus-visible {
  color: var(--text);
  outline: none;
  transform: translateY(-1px);
}

.dashboard-redesign .dash-action-dock .dash-quicklink .ico,
.dashboard-redesign .dash-action-dock .dash-quicklink svg {
  width: 29px;
  height: 29px;
  stroke-width: 1.9;
}

.dashboard-redesign .dash-action-dock .dash-quicklink-active {
  color: var(--text);
}

.dashboard-redesign .dash-action-dock .dash-quicklink-active .ico,
.dashboard-redesign .dash-action-dock .dash-quicklink-active svg {
  width: 28px;
  height: 28px;
  color: #ffffff;
  padding: 9px;
  box-sizing: content-box;
  border-radius: 999px;
  background: #09090b;
  box-shadow: 0 12px 24px rgba(9, 9, 11, 0.2);
}

.dashboard-redesign .dash-action-dock .dash-quicklink-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-redesign .dash-hub {
  gap: 18px;
}

.dashboard-redesign .dash-board,
.dashboard-redesign .dash-pending-island {
  width: min(100%, 980px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 34px;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 60%, transparent) inset,
    0 18px 44px color-mix(in srgb, var(--text) 8%, transparent) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.dashboard-redesign .dash-board-performance {
  gap: 22px;
  padding: clamp(22px, 4vw, 34px);
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #ffffff 4%), color-mix(in srgb, var(--surface) 88%, var(--bg))) !important;
  border-bottom-color: color-mix(in srgb, var(--border) 68%, transparent);
}

.dashboard-redesign .dash-goal-panel-head {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.dashboard-redesign .dash-goal-eyebrow {
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  font-size: 11px;
  letter-spacing: 0.12em;
}

.dashboard-redesign .dash-goal-title {
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: -0.065em;
}

.dashboard-redesign .dash-goal-subtitle {
  max-width: 460px;
  margin: 9px auto 0;
  font-size: 14px;
}

.dashboard-redesign .dash-goal-panel-body {
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 300px);
  gap: 16px;
}

.dashboard-redesign .dash-goal-ring-card,
.dashboard-redesign .dash-goal-editor-block:not(.dash-goal-editor-block--ring),
.dashboard-redesign .dash-stat-chip,
.dashboard-redesign .dash-board-log,
.dashboard-redesign .dash-board-history {
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 86%, transparent) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 50%, transparent) inset !important;
}

.dashboard-redesign .dash-goal-ring-card {
  min-height: 300px;
}

.dashboard-redesign .dash-goal-ring-center {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dashboard-redesign .dash-goal-ring-fill {
  stroke: #09090b;
}

.dashboard-redesign .dash-goal-copy {
  gap: 14px;
}

.dashboard-redesign .dash-goal-btn,
.dashboard-redesign .dash-goal-edit,
.dashboard-redesign .dash-sale-money,
.dashboard-redesign .dash-sale-input {
  border-radius: 18px;
  background: color-mix(in srgb, var(--input-bg) 92%, #ffffff 8%) !important;
}

.dashboard-redesign .dash-stat-chip {
  min-height: 126px;
}

.dashboard-redesign .dash-stat-chip::after {
  background: color-mix(in srgb, var(--green) 11%, transparent);
}

.dashboard-redesign .dash-board-work {
  gap: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--bg) 28%, var(--surface)) !important;
}

.dashboard-redesign .dash-sales-toggle {
  min-height: 64px;
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
}

.dashboard-redesign .dash-sale-form {
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
}

.dashboard-redesign .dash-sale-submit.dash-close-submit,
.dashboard-redesign .dash-pending-view-all {
  border-radius: 999px;
}

.dashboard-redesign .dash-pending-island {
  padding: clamp(20px, 3vw, 28px);
}

.dashboard-redesign .dash-pending-count,
.dashboard-redesign .deals-count {
  padding: 6px 11px;
  background: color-mix(in srgb, var(--surface) 70%, var(--accent-soft)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.dashboard-redesign .dash-pending-empty {
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 72%, var(--bg)) !important;
}

html[data-theme="dark"] .dashboard-redesign .dash-action-dock .dash-quicklink-active .ico,
html[data-theme="dark"] .dashboard-redesign .dash-action-dock .dash-quicklink-active svg {
  color: #09090b;
  background: #ffffff;
}

html[data-theme="dark"] .dashboard-redesign .dash-goal-ring-fill {
  stroke: #ffffff;
}

@media (max-width: 900px) {
  body[data-page="home"] .main {
    padding-top: 62px;
    padding-bottom: 96px;
  }

  .dashboard-redesign .dash-goal-panel-body {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-goal-panel-head,
  .dashboard-redesign .dash-goal-copy,
  .dashboard-redesign .dash-goal-editor-block:not(.dash-goal-editor-block--ring),
  .dashboard-redesign .dash-tracker-label,
  .dashboard-redesign .dash-goal-edit-hint {
    align-items: center;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .dashboard-redesign .dash-page-hero {
    padding: 8px 4px 0;
  }

  .dashboard-redesign .dash-action-dock {
    position: sticky;
    top: 12px;
    z-index: 20;
    width: 100%;
    max-width: 100%;
    min-height: 98px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 15px 10px 13px;
    border-radius: 30px;
  }

  .dashboard-redesign .dash-action-dock .dash-quicklink {
    min-height: 66px;
    gap: 7px;
  }

  .dashboard-redesign .dash-action-dock .dash-quicklink .ico,
  .dashboard-redesign .dash-action-dock .dash-quicklink svg {
    width: 25px;
    height: 25px;
  }

  .dashboard-redesign .dash-action-dock .dash-quicklink-active .ico,
  .dashboard-redesign .dash-action-dock .dash-quicklink-active svg {
    width: 24px;
    height: 24px;
    padding: 8px;
  }

  .dashboard-redesign .dash-action-dock .dash-quicklink-text {
    font-size: 11px;
  }

  .dashboard-redesign .dash-board,
  .dashboard-redesign .dash-pending-island {
    border-radius: 28px;
  }

  .dashboard-redesign .dash-board-performance,
  .dashboard-redesign .dash-board-work {
    padding: 14px;
  }

  .dashboard-redesign .dash-sale-fields {
    grid-template-columns: 1fr;
  }
}

/* Centered tracker with side widgets */
body[data-page="home"] #page-body.dashboard-redesign {
  max-width: 1180px;
}

.dashboard-redesign .dash-header,
.dashboard-redesign .dash-board,
.dashboard-redesign .dash-pending-island {
  width: min(100%, 1080px);
  max-width: 1080px;
}

.dashboard-redesign .dash-board-performance {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34%),
    radial-gradient(circle at 8% 80%, color-mix(in srgb, var(--green) 10%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, #ffffff 6%), color-mix(in srgb, var(--surface) 84%, var(--bg))) !important;
}

.dashboard-redesign .dash-goal-panel-body {
  grid-template-columns: minmax(190px, 245px) minmax(300px, 1fr) minmax(190px, 245px);
  align-items: center;
  gap: clamp(14px, 2.4vw, 24px);
}

.dashboard-redesign .dash-goal-ring-card {
  min-height: clamp(320px, 40vw, 430px);
  padding: clamp(18px, 3vw, 34px);
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent-soft) 55%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface) 72%, transparent) !important;
}

.dashboard-redesign .dash-goal-ring {
  width: clamp(250px, 34vw, 360px);
  height: clamp(250px, 34vw, 360px);
}

.dashboard-redesign .dash-goal-ring-track,
.dashboard-redesign .dash-goal-ring-fill {
  stroke-width: 22;
}

.dashboard-redesign .dash-goal-ring-center {
  inset: 0;
}

.dashboard-redesign .dash-goal-ring-pct {
  font-size: clamp(52px, 7vw, 78px);
}

.dashboard-redesign .dash-goal-widget-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: center;
}

.dashboard-redesign .dash-mini-widget {
  min-height: 142px;
  padding: 17px;
  border-radius: 26px;
  text-align: left;
}

.dashboard-redesign .dash-mini-widget--target {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dashboard-redesign .dash-goal-copy .dash-stat-chip--earn {
  min-height: 142px;
}

.dashboard-redesign .dash-mini-widget .dash-tracker-stat-val {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 0.95;
}

.dashboard-redesign .dash-stat-chip--average {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}

.dashboard-redesign .dash-stat-chip--average::after {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.dashboard-redesign .dash-goal-btn,
.dashboard-redesign .dash-goal-edit {
  min-height: 52px;
  padding-block: 8px;
  font-size: clamp(26px, 3.2vw, 38px);
}

@media (max-width: 980px) {
  .dashboard-redesign .dash-goal-panel-body {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-goal-widget-stack,
  .dashboard-redesign .dash-goal-widget-stack--right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .dashboard-redesign .dash-goal-ring-card {
    order: -1;
  }
}

@media (max-width: 640px) {
  .dashboard-redesign .dash-goal-widget-stack,
  .dashboard-redesign .dash-goal-widget-stack--right {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-goal-ring-card {
    min-height: 292px;
    border-radius: 30px;
  }

  .dashboard-redesign .dash-goal-ring {
    width: min(72vw, 280px);
    height: min(72vw, 280px);
  }

  .dashboard-redesign .dash-mini-widget,
  .dashboard-redesign .dash-goal-copy .dash-stat-chip--earn {
    min-height: 112px;
  }
}

/* Dashboard simple UI */
body[data-page="home"] .main {
  padding-top: 18px;
}

body[data-page="home"] #page-body.dashboard-redesign {
  max-width: 1100px;
}

.dashboard-redesign .dash-header,
.dashboard-redesign .dash-board,
.dashboard-redesign .dash-pending-island {
  width: min(100%, 1020px);
  max-width: 1020px;
}

.dashboard-redesign .dash-page-hero {
  padding: 14px 0 4px;
}

.dashboard-redesign .dash-page-hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  letter-spacing: -0.055em;
}

.dashboard-redesign .dash-page-lead {
  max-width: 480px;
  margin-top: 8px;
  font-size: 14px;
}

.dashboard-redesign .dash-action-dock {
  min-height: 76px;
  padding: 10px 14px;
  border-radius: 22px;
  background: var(--surface) !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dashboard-redesign .dash-action-dock .dash-quicklink {
  min-height: 52px;
  gap: 5px;
}

.dashboard-redesign .dash-action-dock .dash-quicklink .ico,
.dashboard-redesign .dash-action-dock .dash-quicklink svg {
  width: 22px;
  height: 22px;
}

.dashboard-redesign .dash-action-dock .dash-quicklink-active .ico,
.dashboard-redesign .dash-action-dock .dash-quicklink-active svg {
  width: 22px;
  height: 22px;
  padding: 6px;
  box-shadow: none;
}

.dashboard-redesign .dash-action-dock .dash-quicklink-text {
  font-size: 12px;
}

.dashboard-redesign .dash-board,
.dashboard-redesign .dash-pending-island {
  border-radius: 22px;
  background: var(--surface) !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dashboard-redesign .dash-board-performance,
.dashboard-redesign .dash-board-work {
  background: var(--surface) !important;
}

.dashboard-redesign .dash-board-performance {
  padding: clamp(18px, 3vw, 28px);
}

.dashboard-redesign .dash-goal-title {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.045em;
}

.dashboard-redesign .dash-goal-subtitle {
  max-width: 390px;
  font-size: 13px;
}

.dashboard-redesign .dash-goal-panel-body {
  grid-template-columns: minmax(180px, 230px) minmax(280px, 1fr) minmax(180px, 230px);
  gap: 14px;
}

.dashboard-redesign .dash-goal-ring-card,
.dashboard-redesign .dash-goal-editor-block:not(.dash-goal-editor-block--ring),
.dashboard-redesign .dash-stat-chip,
.dashboard-redesign .dash-board-log,
.dashboard-redesign .dash-board-history,
.dashboard-redesign .dash-sale-form,
.dashboard-redesign .dash-pending-empty {
  border-radius: 18px;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.dashboard-redesign .dash-goal-ring-card {
  min-height: clamp(292px, 34vw, 360px);
  padding: 20px;
}

.dashboard-redesign .dash-goal-ring {
  width: clamp(230px, 30vw, 310px);
  height: clamp(230px, 30vw, 310px);
}

.dashboard-redesign .dash-goal-ring-track,
.dashboard-redesign .dash-goal-ring-fill {
  stroke-width: 6;
}

.dashboard-redesign .dash-goal-ring-center {
  inset: clamp(42px, 5vw, 54px);
  background: var(--surface) !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dashboard-redesign .dash-goal-ring-pct {
  font-size: clamp(46px, 5.8vw, 64px);
}

.dashboard-redesign .dash-mini-widget {
  min-height: 116px;
  padding: 14px;
}

.dashboard-redesign .dash-goal-copy .dash-stat-chip--earn {
  min-height: 116px;
}

.dashboard-redesign .dash-stat-chip::after {
  display: none;
}

.dashboard-redesign .dash-mini-widget .dash-tracker-stat-val {
  font-size: clamp(25px, 3vw, 34px);
}

.dashboard-redesign .dash-goal-btn,
.dashboard-redesign .dash-goal-edit,
.dashboard-redesign .dash-sale-money,
.dashboard-redesign .dash-sale-input {
  border-radius: 12px;
  background: var(--input-bg) !important;
  text-shadow: none;
  box-shadow: none;
}

.dashboard-redesign .dash-goal-btn,
.dashboard-redesign .dash-goal-edit {
  min-height: 48px;
  font-size: clamp(24px, 3vw, 32px);
}

.dashboard-redesign .dash-board-work {
  padding: 12px;
}

.dashboard-redesign .dash-sales-toggle {
  min-height: 54px;
  background: var(--surface-2) !important;
}

.dashboard-redesign .dash-pending-island {
  padding: 18px;
}

@media (max-width: 980px) {
  .dashboard-redesign .dash-goal-panel-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .main {
    padding-top: 52px;
  }

  .dashboard-redesign .dash-action-dock {
    min-height: 82px;
    border-radius: 22px;
  }

  .dashboard-redesign .dash-goal-ring-card {
    min-height: 270px;
  }
}

/* Dashboard shared site styling */
.dashboard-redesign .dash-board,
.dashboard-redesign .dash-pending-island,
.dashboard-redesign .dash-action-dock {
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface)) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow) !important;
}

.dashboard-redesign .dash-board:hover,
.dashboard-redesign .dash-pending-island:hover {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  box-shadow: var(--shadow-md) !important;
}

.dashboard-redesign .dash-action-dock {
  min-height: auto;
  padding: 10px;
  gap: 8px;
}

.dashboard-redesign .dash-action-dock .dash-quicklink {
  min-height: 42px;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  color: var(--text);
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  box-shadow: var(--shadow) !important;
}

.dashboard-redesign .dash-action-dock .dash-quicklink:hover,
.dashboard-redesign .dash-action-dock .dash-quicklink:focus-visible {
  background: color-mix(in srgb, var(--surface-2) 84%, var(--green) 16%) !important;
  border-color: color-mix(in srgb, var(--green) 28%, var(--border)) !important;
  box-shadow: var(--shadow-hover) !important;
  transform: none;
}

.dashboard-redesign .dash-action-dock .dash-quicklink-active {
  color: #032314 !important;
  background: var(--green) !important;
  border-color: var(--green) !important;
}

.dashboard-redesign .dash-action-dock .dash-quicklink .ico,
.dashboard-redesign .dash-action-dock .dash-quicklink svg,
.dashboard-redesign .dash-action-dock .dash-quicklink-active .ico,
.dashboard-redesign .dash-action-dock .dash-quicklink-active svg {
  width: 18px;
  height: 18px;
  padding: 0;
  color: currentColor;
  background: transparent;
  box-shadow: none;
}

.dashboard-redesign .dash-action-dock .dash-quicklink-text {
  font-size: 13px;
  font-weight: 800;
}

.dashboard-redesign .dash-goal-ring-card,
.dashboard-redesign .dash-goal-editor-block:not(.dash-goal-editor-block--ring),
.dashboard-redesign .dash-stat-chip,
.dashboard-redesign .dash-board-log,
.dashboard-redesign .dash-board-history,
.dashboard-redesign .dash-sale-form,
.dashboard-redesign .dash-pending-empty {
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface)) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow) !important;
}

.dashboard-redesign .dash-goal-ring-fill {
  stroke: var(--green);
}

html[data-theme="dark"] .dashboard-redesign .dash-goal-ring-fill {
  stroke: var(--green);
}

.dashboard-redesign .dash-goal-ring-center {
  background: var(--surface) !important;
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.dashboard-redesign .dash-goal-ring-pct,
.dashboard-redesign .dash-goal-eyebrow,
.dashboard-redesign .dash-stat-chip--earn .dash-tracker-stat-val {
  color: var(--green);
}

.dashboard-redesign .dash-sales-toggle {
  min-height: 42px;
  color: var(--text);
  background: var(--surface-2) !important;
  border-radius: var(--radius);
}

.dashboard-redesign .dash-sales-toggle:hover {
  background: color-mix(in srgb, var(--surface-2) 84%, var(--green) 16%) !important;
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
}

.dashboard-redesign .dash-sale-submit.dash-close-submit,
.dashboard-redesign .dash-pending-view-all {
  min-height: 42px;
  border-radius: 999px;
  box-shadow: var(--shadow) !important;
}

.dashboard-redesign .dash-goal-btn,
.dashboard-redesign .dash-goal-edit,
.dashboard-redesign .dash-sale-money,
.dashboard-redesign .dash-sale-input {
  border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .dashboard-redesign .dash-action-dock {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    min-height: auto;
    position: sticky;
    top: 12px;
    padding: 12px 8px 10px;
    gap: 4px;
  }

  .dashboard-redesign .dash-action-dock .dash-quicklink {
    min-height: 56px;
    gap: 5px;
    padding: 4px 2px;
  }

  .dashboard-redesign .dash-action-dock .dash-quicklink-text {
    font-size: clamp(9px, 2.8vw, 11px);
    white-space: normal;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* GoalTracker-inspired dashboard layout */
@media (min-width: 861px) {
  .dashboard-redesign .dash-top-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: stretch;
    gap: 18px;
  }

  .dashboard-redesign .dash-income-action {
    white-space: nowrap;
  }

  .dashboard-redesign .dash-goal-panel-body {
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(18px, 4vw, 46px);
    align-items: start;
  }
}

.dashboard-redesign .dash-top-row {
  align-items: center;
  justify-items: stretch;
  gap: 18px;
}

.dashboard-redesign .dash-page-hero {
  padding: 0;
  text-align: left;
}

.dashboard-redesign .dash-page-hero .dash-goal-eyebrow {
  margin-bottom: 7px;
}

.dashboard-redesign .dash-page-hero h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 61px);
  line-height: 0.96;
  letter-spacing: -0.07em;
}

.dashboard-redesign .dash-page-lead {
  max-width: 470px;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
}

.dashboard-redesign .dash-income-action {
  align-self: start;
}

.dashboard-redesign .dash-action-dock {
  grid-column: 1 / -1;
}

.dashboard-redesign .dash-board-performance {
  padding: clamp(22px, 4vw, 38px);
}

.dashboard-redesign .dash-goal-panel-head {
  max-width: none;
  margin: 0;
  text-align: left;
}

.dashboard-redesign .dash-overview-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  min-width: 0;
}

.dashboard-redesign .dash-overview-copy .dash-log-sale-card {
  margin-top: -4px;
}

.dashboard-redesign .dash-goal-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 10px;
}

.dashboard-redesign .dash-live-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-redesign .dash-live-pill span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
}

.dashboard-redesign .dash-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-redesign .dash-quick-stats .dash-mini-widget {
  display: grid;
  min-height: 94px;
  align-content: space-between;
  padding: 15px;
}

.dashboard-redesign .dash-quick-stats .dash-tracker-stat-lbl,
.dashboard-redesign .dash-goal-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.dashboard-redesign .dash-quick-stats .dash-tracker-stat-val {
  align-self: end;
  font-size: clamp(20px, 2.5vw, 28px);
  letter-spacing: -0.06em;
}

.dashboard-redesign .dash-progress-panel {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  justify-self: center;
}

.dashboard-redesign .dash-progress-panel .dash-goal-ring-card {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  width: 100%;
}

.dashboard-redesign .dash-progress-panel .dash-goal-ring {
  justify-self: center;
  margin-inline: auto;
}

.dashboard-redesign .dash-tracker-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.dashboard-redesign .dash-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.dashboard-redesign .dash-tool-btn:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-soft, #eef2ff) 40%, var(--surface));
}
.dashboard-redesign .dash-tool-btn:active {
  transform: translateY(1px);
}
.dashboard-redesign .dash-tool-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 72%, transparent);
}
.dashboard-redesign .dash-tool-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
@media (max-width: 420px) {
  .dashboard-redesign .dash-tool-btn span {
    display: none;
  }
  .dashboard-redesign .dash-tool-btn {
    padding: 9px 12px;
  }
}

.dashboard-redesign .dash-goal-ring {
  width: min(100%, 340px);
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  margin-inline: auto;
}

.dashboard-redesign .dash-goal-ring-track,
.dashboard-redesign .dash-goal-ring-fill {
  stroke-width: 22;
}

.dashboard-redesign .dash-goal-ring-center {
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dashboard-redesign .dash-goal-ring-pct {
  align-self: center;
  font-size: clamp(38px, 5vw, 58px);
  letter-spacing: -0.08em;
  line-height: 1;
}

.dashboard-redesign .dash-goal-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-redesign .dash-goal-summary div {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface));
  box-shadow: var(--shadow);
}

.dashboard-redesign .dash-goal-summary strong {
  font-size: 20px;
  letter-spacing: -0.05em;
}

.dashboard-redesign .dash-board-work {
  gap: 16px;
  padding: clamp(18px, 3vw, 24px);
}

.dashboard-redesign .dash-sales-toggle {
  align-items: flex-start;
  min-height: 58px;
  padding: 14px 16px;
}

.dashboard-redesign .dash-sales-toggle-title {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.dashboard-redesign .dash-sales-panel-body,
.dashboard-redesign .dash-sales-history-body {
  padding: clamp(16px, 3vw, 24px);
}

.dashboard-redesign .dash-board-work-copy .dash-goal-eyebrow {
  margin: 0 0 7px;
}

.dashboard-redesign .dash-board-work-desc {
  max-width: 470px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.dashboard-redesign .dash-board-history .deals-list {
  display: grid;
  gap: 8px;
  max-height: 310px;
  margin-top: 16px;
}

@media (max-width: 860px) {
  .dashboard-redesign .dash-top-row {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-page-hero,
  .dashboard-redesign .dash-income-action {
    justify-self: stretch;
    text-align: left;
  }

  .dashboard-redesign .dash-page-lead {
    margin-inline: 0;
  }

  .dashboard-redesign .dash-goal-panel-body {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-goal-panel-head {
    text-align: center;
  }

  .dashboard-redesign .dash-goal-subtitle {
    margin-inline: auto;
  }

  .dashboard-redesign .dash-quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .dashboard-redesign .dash-goal-row,
  .dashboard-redesign .dash-goal-summary,
  .dashboard-redesign .dash-quick-stats {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-goal-row {
    display: grid;
  }

  .dashboard-redesign .dash-live-pill {
    justify-content: center;
  }
}

/* Clickable sale-field tooltips */
.dash-sale-label-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 6px;
}

.dash-sale-label-row .dash-sale-label {
  margin: 0;
}

.dash-sale-tip {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.dash-sale-tip summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  list-style: none;
}

.dash-sale-tip summary::-webkit-details-marker {
  display: none;
}

.dash-sale-tip summary .ico {
  width: 12px;
  height: 12px;
}

.dash-sale-tip summary:hover,
.dash-sale-tip summary:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.dash-sale-tooltip {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 50%;
  width: max-content;
  max-width: 220px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  transform: translateX(-50%);
  box-shadow: none;
}

.dash-sale-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--surface);
  transform: translateX(-50%) rotate(45deg);
}

.site-loading-widget {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 99990;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #000;
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(100% + 36px));
  opacity: 0;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

.site-loading-widget.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.site-loading-widget.is-hiding {
  transform: translateX(-50%) translateY(calc(100% + 36px));
  opacity: 0;
}

.site-toast-widget {
  z-index: 100005;
}

.site-toast-widget .site-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.site-toast-widget.site-toast-widget--success .site-toast-icon {
  color: #4ade80;
}

.site-toast-widget.site-toast-widget--error .site-toast-icon {
  color: #fca5a5;
}

.site-toast-widget.site-toast-widget--info .site-toast-icon {
  color: #93c5fd;
}

.site-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: site-loading-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes site-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loading-widget {
    transition: opacity 0.2s ease;
  }

  .site-loading-spinner {
    animation: none;
    border-top-color: #fff;
  }
}

/* Dashboard · unified surfaces + tracker widgets (site theme only) */
.dashboard-redesign .dash-header {
  display: grid;
  gap: 14px;
}

.dashboard-redesign .dash-board-performance,
.dashboard-redesign .dash-board-work {
  background: var(--surface) !important;
}

.dashboard-redesign .dash-board-performance {
  border-bottom: 1px solid var(--border);
}

.dashboard-redesign .dash-board,
.dashboard-redesign .dash-pending-island,
.dashboard-redesign .dash-action-dock {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dashboard-redesign .dash-quick-stats .dash-mini-widget,
.dashboard-redesign .dash-goal-summary div,
.dashboard-redesign .dash-board-log {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

.dashboard-redesign .dash-goal-ring-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dashboard-redesign .dash-goal-ring-center {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dashboard-redesign .dash-goal-ring {
  position: relative;
}

.dashboard-redesign .dash-goal-ring-svg {
  transform: rotate(-90deg);
}

.dashboard-redesign .dash-goal-ring-center {
  position: absolute;
}

.dashboard-redesign .dash-board-work-head {
  padding: 16px 16px 0;
}

.dashboard-redesign .sales-list {
  --dash-sales-visible-count: 3;
  display: grid;
  gap: 8px;
  max-height: calc(
    var(--dash-sales-visible-count) * 5.5rem + (var(--dash-sales-visible-count) - 1) * 8px
  );
  margin: 0;
  padding: 12px 16px 16px;
  overflow-y: auto;
}

.dashboard-redesign .sales-list::-webkit-scrollbar {
  width: 7px;
}

.dashboard-redesign .sales-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, var(--muted));
}

.dashboard-redesign .sale-card {
  display: grid;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.dashboard-redesign .sale-card.is-editing {
  grid-template-columns: 1fr;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.dashboard-redesign .sale-card-view {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  grid-column: 1 / -1;
}

.dashboard-redesign .sale-card.is-editing .sale-card-view {
  display: none;
}

.dashboard-redesign .sale-card:hover {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: var(--surface-2);
}

.dashboard-redesign .sale-card-body {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-redesign .sale-card-title {
  display: block;
  max-width: 100%;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.dashboard-redesign .sale-card-side {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 1px;
}

.dashboard-redesign .sale-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.dashboard-redesign .sale-card .sale-amount {
  font-size: 0.88rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
}

.dashboard-redesign .sale-card-date {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.dashboard-redesign .sale-card-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text));
  border-radius: 9px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-elevated, var(--surface)) 92%, #fff 8%),
    var(--surface-2)
  );
  color: var(--text);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--text) 5%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.dashboard-redesign .sale-card-edit-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 80%, var(--accent-soft) 20%),
    var(--surface-2)
  );
  box-shadow:
    0 2px 8px color-mix(in srgb, var(--text) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}

.dashboard-redesign .sale-card-edit-btn:active {
  transform: translateY(1px);
}

.dashboard-redesign .sale-card-edit-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 72%, transparent);
}

.dashboard-redesign .sale-card-edit-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.78;
}

.dashboard-redesign .sale-card-edit-btn:hover .sale-card-edit-ico {
  opacity: 1;
}

.dashboard-redesign .sale-card-edit-form {
  display: none;
  grid-column: 1 / -1;
  gap: 10px;
}

.dashboard-redesign .sale-card.is-editing .sale-card-edit-form {
  display: grid;
}

.dashboard-redesign .sale-card-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: 10px;
}

.dashboard-redesign .sale-card {
  container-type: inline-size;
  container-name: dash-sale-card;
}

.dashboard-redesign .sale-card-edit-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dashboard-redesign .sale-card-edit-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-redesign .sale-card-edit-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.dashboard-redesign .sale-card-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.dashboard-redesign .sale-card-save-btn {
  min-height: 38px;
  padding-inline: 18px;
  font-size: 0.875rem;
  font-weight: 800;
}

.dashboard-redesign .sale-card-cancel-btn {
  min-height: 38px;
  padding-inline: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.dashboard-redesign .sale-card-cancel-btn:hover {
  background: var(--surface-2) !important;
  border-color: color-mix(in srgb, var(--border) 65%, var(--text)) !important;
  color: var(--text) !important;
}

.dashboard-redesign .sale-card-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text));
  border-radius: 9px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-elevated, var(--surface)) 92%, #fff 8%),
    var(--surface-2)
  );
  color: var(--muted);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--text) 5%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.dashboard-redesign .sale-card-delete-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.82;
}

.dashboard-redesign .sale-card-delete-btn:hover {
  border-color: color-mix(in srgb, #dc2626 38%, var(--border));
  background: color-mix(in srgb, #dc2626 7%, var(--surface-2));
  color: #dc2626;
  box-shadow:
    0 2px 8px color-mix(in srgb, #dc2626 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}

.dashboard-redesign .sale-card-delete-btn:hover .sale-card-delete-ico {
  opacity: 1;
}

.dashboard-redesign .sale-card-delete-btn:active {
  transform: translateY(1px);
}

.dashboard-redesign .sale-card-delete-btn:focus-visible {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 18%, transparent);
}

.dashboard-redesign .empty-state {
  padding: 22px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
}

.dashboard-redesign .income-dialog {
  width: min(500px, calc(100% - 28px));
  padding: 0;
  border: 0;
  background: transparent;
}

.dashboard-redesign .income-dialog::backdrop {
  background: color-mix(in srgb, var(--text) 35%, transparent);
  backdrop-filter: blur(5px);
}

.dashboard-redesign .income-dialog[open] {
  animation: dashDialogIn 220ms ease both;
}

.dashboard-redesign .income-form {
  display: grid;
  gap: 15px;
  padding: 24px;
}

.dashboard-redesign .income-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: left;
}

.dashboard-redesign #progressOrbit.goal-reached {
  animation: dashGoalPulse 680ms ease;
}

.dashboard-redesign #progressOrbit.goal-progress-bump {
  transform-origin: center center;
  animation: dashGoalRingBounce 960ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

.dashboard-redesign #progressOrbit.goal-progress-bump .dash-goal-ring-pct {
  display: inline-block;
  transform-origin: center center;
  animation: dashGoalPctBounce 960ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes dashGoalRingBounce {
  0% {
    transform: scale(1);
  }
  22% {
    transform: scale(1.07);
  }
  44% {
    transform: scale(0.97);
  }
  66% {
    transform: scale(1.03);
  }
  84% {
    transform: scale(0.99);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dashGoalPctBounce {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.16);
  }
  55% {
    transform: scale(0.94);
  }
  78% {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-redesign #progressOrbit.goal-progress-bump,
  .dashboard-redesign #progressOrbit.goal-progress-bump .dash-goal-ring-pct,
  .dashboard-redesign #progressOrbit.goal-reached {
    animation: none !important;
  }
}

@keyframes dashDialogIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashGoalPulse {
  40% {
    transform: scale(1.012);
  }
}

/* High-contrast call + Lead Builder actions (wins over theme batches) */
.lf-call-btn,
html[data-theme="light"] .lf-call-btn,
html[data-theme="dark"] .lf-call-btn,
html[data-ui-color="black"] .lf-call-btn {
  background: var(--green-bg) !important;
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
  box-shadow: none !important;
}

.lf-call-btn:hover,
.lf-call-btn:focus-visible,
html[data-theme="light"] .lf-call-btn:hover,
html[data-theme="dark"] .lf-call-btn:hover,
html[data-ui-color="black"] .lf-call-btn:hover {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .lf-call-btn:hover,
html[data-theme="dark"] .lf-call-btn:focus-visible {
  color: var(--btn-primary-fg) !important;
}

body[data-page="template"] .tpl-call-btn:not(.is-disabled) {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border)) !important;
  background: var(--green-bg) !important;
  color: var(--green) !important;
  box-shadow: none !important;
}

body[data-page="template"] .tpl-box .btn:not(.secondary):not(.tpl-send-btn.is-incomplete),
body[data-page="template"] .tpl-box .pill.active {
  border-color: var(--green) !important;
  background: var(--green) !important;
  color: #ffffff !important;
}

body[data-page="template"] .tpl-call-btn:not(.is-disabled):hover,
body[data-page="template"] .tpl-call-btn:not(.is-disabled):focus-visible {
  border-color: color-mix(in srgb, var(--green) 48%, var(--border)) !important;
  background: color-mix(in srgb, var(--green) 10%, var(--surface)) !important;
  color: var(--green) !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(-1px);
}

body[data-page="template"] .tpl-box .btn:not(.secondary):not(.tpl-send-btn):hover {
  border-color: #26f08d !important;
  background: #26f08d !important;
  color: #032314 !important;
}

body[data-page="template"] .tpl-send-btn.is-ready:hover,
body[data-page="template"] .tpl-send-btn.is-ready:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  color: #ffffff !important;
  transform: none;
  box-shadow: none !important;
  filter: brightness(1.06);
}

body[data-page="template"] .tpl-send-btn.is-incomplete,
body[data-page="template"] .tpl-send-btn.is-incomplete:hover,
body[data-page="template"] .tpl-send-btn.is-incomplete:focus-visible,
body[data-page="template"] .tpl-send-btn.is-incomplete:disabled {
  background: var(--surface) !important;
  color: color-mix(in srgb, var(--muted) 90%, var(--text)) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
  opacity: 1;
}

body[data-page="template"] .tpl-row-actions .tpl-clear-btn {
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
body[data-page="template"] .tpl-row-actions .tpl-clear-btn:hover:not(.is-pressed),
body[data-page="template"] .tpl-row-actions .tpl-clear-btn:focus-visible:not(.is-pressed) {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  transform: none !important;
  box-shadow: none !important;
}

body[data-page="template"] .tpl-row-actions .tpl-not-interested-btn {
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
body[data-page="template"] .tpl-row-actions .tpl-not-interested-btn:hover:not(:disabled):not(.is-pressed),
body[data-page="template"] .tpl-row-actions .tpl-not-interested-btn:focus-visible:not(:disabled):not(.is-pressed) {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  transform: none !important;
  box-shadow: none !important;
}

body[data-page="template"] .tpl-row-actions .tpl-action-btn.is-pressed {
  animation: tpl-action-btn-press 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html[data-theme="dark"] body[data-page="template"] .tpl-call-btn:not(.is-disabled),
html[data-theme="dark"] body[data-page="template"] .tpl-call-btn:not(.is-disabled):hover,
html[data-theme="dark"] body[data-page="template"] .tpl-call-btn:not(.is-disabled):focus-visible {
  color: var(--green) !important;
}

html[data-theme="dark"] body[data-page="template"] .tpl-box .btn:not(.secondary):not(.tpl-send-btn.is-incomplete),
html[data-theme="dark"] body[data-page="template"] .tpl-box .pill.active,
html[data-theme="dark"] body[data-page="template"] .tpl-box .btn:not(.secondary):not(.tpl-send-btn):hover {
  color: var(--btn-primary-fg) !important;
}

html[data-theme="dark"] body[data-page="template"] .tpl-send-btn.is-ready:hover,
html[data-theme="dark"] body[data-page="template"] .tpl-send-btn.is-ready:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: brightness(1.08);
}

/* Dashboard · two-column tracker layout */
body[data-page="home"] #page-body.dashboard-redesign > h1,
body[data-page="home"] #page-body.dashboard-redesign > .lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

body[data-page="home"] #page-body.dashboard-redesign > h1 {
  margin-bottom: 10px;
}

body[data-page="home"] #page-body.dashboard-redesign > .lead {
  max-width: 36rem;
  margin-bottom: 18px;
}

.dashboard-redesign .dash-tracker-stack {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
  gap: 12px;
  width: min(100%, 980px);
  margin: 0 auto;
}

.dashboard-redesign .dash-goal-tracker-card,
.dashboard-redesign .dash-work-panels-card,
.dashboard-redesign .dash-pending-island-card {
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.dashboard-redesign .dash-goal-tracker-card {
  display: grid;
  gap: 14px;
  justify-items: center;
  align-content: start;
}

.dashboard-redesign .dash-pending-island-card {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0;
}

.dashboard-redesign .dash-pending-island-card .dash-toggle-card {
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
}

.dashboard-redesign .dash-work-panels-card {
  min-width: 0;
  container-type: inline-size;
  container-name: dash-work-panels;
}

.dashboard-redesign .dash-work-panels-card .dash-overview-panels {
  width: 100%;
}

.dashboard-redesign .dash-header .dash-top-row {
  display: block;
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow) !important;
}

.dashboard-redesign .dash-header .dash-top-goal-body {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(16px, 4vw, 32px);
  align-items: start;
}

.dashboard-redesign .dash-header .dash-top-row .dash-page-hero {
  width: auto;
  padding: 0;
  margin: 0;
  text-align: left;
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
}

.dashboard-redesign .dash-header .dash-top-row .dash-page-hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.dashboard-redesign .dash-header .dash-top-row .dash-page-lead {
  max-width: 36rem;
  margin: 8px 0 0;
}

.dashboard-redesign .dash-header .dash-top-row .dash-income-action {
  margin-top: 14px;
}

.dashboard-redesign .dash-header .dash-top-row .dash-overview-copy {
  gap: 16px;
}

.dashboard-redesign .dash-header .dash-top-row .dash-quick-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .dashboard-redesign .dash-header .dash-top-row .dash-quick-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .dashboard-redesign .dash-tracker-stack {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-goal-tracker-card {
    place-items: center;
  }

  .dashboard-redesign .dash-header .dash-top-goal-body {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-header .dash-top-row .dash-progress-panel,
  .dashboard-redesign .dash-progress-panel {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    justify-self: stretch;
    justify-items: center;
  }

  .dashboard-redesign .dash-progress-panel .dash-goal-ring {
    justify-self: center;
    margin-inline: auto;
  }

  .dashboard-redesign .dash-goal-controls,
  .dashboard-redesign .dash-goal-metrics {
    justify-items: stretch;
    justify-content: stretch;
  }

  .dashboard-redesign .dash-goal-controls .dash-goal-editor,
  .dashboard-redesign .dash-earned-stat {
    text-align: center;
    justify-items: stretch;
  }

  .dashboard-redesign .dash-goal-controls {
    max-width: min(100%, 520px);
  }

  .dashboard-redesign .dash-goal-metrics {
    gap: 8px;
  }

  .dashboard-redesign .dash-goal-metrics .dash-tracker-label {
    font-size: 0.58rem;
    letter-spacing: 0.015em;
  }

  .dashboard-redesign .dash-stat-value,
  .dashboard-redesign .dash-earned-value,
  .dashboard-redesign .dash-goal-controls .dash-goal-editor input {
    min-height: 42px;
    padding: 9px 8px;
    font-size: 15px;
    border-radius: 11px;
  }
}

@media (max-width: 420px) {
  .dashboard-redesign .dash-goal-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }

  .dashboard-redesign .dash-goal-metrics .dash-tracker-label {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
  }

  .dashboard-redesign .dash-stat-value,
  .dashboard-redesign .dash-earned-value,
  .dashboard-redesign .dash-goal-controls .dash-goal-editor input {
    min-height: 46px;
    padding: 11px 10px;
    font-size: 16px;
  }
}

.dashboard-redesign .dash-header .dash-top-row .dash-page-hero,
.dashboard-redesign .dash-header .dash-top-row .dash-page-hero h1,
.dashboard-redesign .dash-header .dash-top-row .dash-page-lead,
.dashboard-redesign .dash-header .dash-top-row .dash-goal-eyebrow {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.dashboard-redesign .dash-header .dash-top-row .dash-page-lead {
  margin-inline: 0;
}

.dashboard-redesign .dash-goal-controls {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: min(100%, 640px);
  margin-inline: auto;
  justify-items: stretch;
}

.dashboard-redesign .dash-goal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 10px;
  width: 100%;
  overflow: visible;
}

.dashboard-redesign .dash-goal-stats-right {
  display: contents;
}

.dashboard-redesign .dash-goal-stat {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  justify-items: stretch;
  align-content: start;
  text-align: center;
  min-width: 0;
  width: 100%;
  overflow: visible;
}

.dashboard-redesign .dash-goal-controls .dash-goal-editor {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  width: 100%;
  min-width: 0;
  justify-items: stretch;
  text-align: center;
}

.dashboard-redesign .dash-earned-stat,
.dashboard-redesign .dash-closes-stat,
.dashboard-redesign .dash-calls-stat {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  text-align: center;
  justify-items: stretch;
  width: 100%;
  min-width: 0;
}

.dashboard-redesign .dash-goal-metrics .dash-tracker-label {
  display: block;
  min-height: 1.35em;
  width: 100%;
  max-width: none;
  padding: 0;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}

.dashboard-redesign .dash-stat-value,
.dashboard-redesign .dash-earned-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  box-sizing: border-box;
}

.dashboard-redesign .dash-earned-value {
  color: var(--text);
}

.dashboard-redesign .dash-goal-controls .dash-goal-editor input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  -moz-appearance: textfield;
  appearance: textfield;
  box-sizing: border-box;
}

.dashboard-redesign .dash-tracker-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}

.dashboard-redesign .dash-goal-controls .dash-goal-editor input::-webkit-outer-spin-button,
.dashboard-redesign .dash-goal-controls .dash-goal-editor input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dashboard-redesign .dash-goal-controls .dash-goal-editor input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 72%, transparent);
}

.dashboard-redesign .dash-goal-controls .dash-income-action {
  width: 100%;
  margin-top: 0;
}

.dashboard-redesign .dash-progress-panel .dash-goal-summary {
  width: min(100%, 340px);
}

/* Course module · unified nested surfaces (no tint bands inside cards) */
.course-module-shell.card,
html[data-theme="light"] .course-module-shell.card,
html[data-theme="dark"] .course-module-shell.card {
  background: var(--surface) !important;
  border-color: var(--border);
  box-shadow: var(--shadow) !important;
}

.course-module-layout,
.course-module-main,
.course-module-media,
.course-module-video-group {
  background: transparent;
}

.course-module-aside {
  background: transparent !important;
}

.course-module-aside .course-side-panel {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

/* Site-wide · flat card surfaces, consistent nested panels */
.card,
.tool-card,
.role-card,
.settings-card,
.telegram-embed-card,
.accounts-survey,
.owner-card,
.contributors-card,
.lead-card,
.course-module-shell,
.course-mod-card,
.course-hub-progress,
html[data-theme="light"] .card,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .role-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .telegram-embed-card,
html[data-theme="light"] .accounts-survey,
html[data-theme="light"] .owner-card,
html[data-theme="light"] .contributors-card,
html[data-theme="light"] .lead-card,
html[data-theme="light"] .course-module-shell,
html[data-theme="light"] .course-mod-card,
html[data-theme="light"] .course-hub-progress,
html[data-theme="light"] .dash-page-hero,
html[data-theme="light"] .leads-toolbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .course-module-shell {
  background: var(--surface) !important;
  border-color: var(--border);
  filter: none !important;
}

.dashboard-redesign .dash-header .dash-top-row,
.dashboard-redesign .dash-board,
.dashboard-redesign .dash-pending-island.dash-pending-section,
html[data-theme="light"] .dash-board-performance,
html[data-theme="light"] .dash-sale-form,
html[data-theme="light"] .dash-board-log,
html[data-theme="light"] .dash-board-history,
html[data-theme="light"] .dash-pending-island.dash-pending-section,
html[data-theme="light"] .dash-quicklink,
html[data-theme="light"] .dash-stat-chip,
html[data-theme="light"] .dash-sale-form,
html[data-theme="light"] .dash-board-log,
html[data-theme="light"] .dash-board-history,
html[data-theme="light"] .dash-sales-toggle {
  background: var(--surface) !important;
  border-color: var(--border);
  box-shadow: var(--shadow) !important;
}

.dashboard-redesign .dash-quick-stats .dash-mini-widget,
.dashboard-redesign .dash-goal-summary div,
.course-topics-bar {
  background: var(--surface-2) !important;
  border-color: var(--border);
  box-shadow: none !important;
}

/* Survey choice buttons · readable text on every variant */
.survey-choice-btn:not(.survey-choice-btn--danger):not(.survey-proceed-btn):not(.survey-payout-save):not(.survey-payout-later) {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

.survey-choice-btn:not(.survey-choice-btn--danger):not(.survey-proceed-btn):not(.survey-payout-save):not(.survey-payout-later)::after {
  color: var(--muted) !important;
}

.survey-choice-btn:not(.survey-choice-btn--danger):not(.survey-proceed-btn):not(.survey-payout-save):not(.survey-payout-later):hover {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border)) !important;
  color: var(--text) !important;
}

.survey-choice-btn:not(.survey-choice-btn--danger):not(.survey-proceed-btn):not(.survey-payout-save):not(.survey-payout-later):hover::after {
  color: var(--accent) !important;
}

.survey-choice-btn.survey-choice-btn--danger {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
  box-shadow: var(--shadow) !important;
}

.survey-choice-btn.survey-choice-btn--danger::after {
  color: rgba(255, 255, 255, 0.9) !important;
}

.survey-choice-btn.survey-choice-btn--danger:hover {
  background: #991b1b !important;
  border-color: #991b1b !important;
  color: #fff !important;
}

.survey-choice-btn.survey-choice-btn--danger:hover::after {
  color: #fff !important;
}

html[data-theme="dark"] .survey-choice-btn.survey-choice-btn--danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

html[data-theme="dark"] .survey-choice-btn.survey-choice-btn--danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* Course module · unified shell + nav (no footer tint band) */
.course-module-shell.card,
.course-module-shell.card .course-module-layout,
.course-module-shell.card .course-module-main,
.course-module-shell.card .course-module-nav {
  background: var(--surface) !important;
}

.course-module-nav {
  border-top: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Dashboard · ring shows percentage only; expandable log-sale panel */
.dashboard-redesign .dash-goal-ring-track,
.dashboard-redesign .dash-goal-ring-fill {
  stroke-width: 22;
}

.dashboard-redesign .dash-goal-ring-center {
  inset: 0 !important;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dashboard-redesign .dash-goal-ring-pct {
  align-self: center;
  margin: 0;
  font-size: clamp(40px, 5.5vw, 62px);
  line-height: 1;
}

.dashboard-redesign .dash-goal-ring-status,
.dashboard-redesign .dash-goal-ring-meta,
.dashboard-redesign .dash-goal-ring-remaining {
  display: none !important;
}

.dashboard-redesign .dash-overview-panels {
  display: grid;
  gap: 10px;
  width: 100%;
}

.dashboard-redesign .dash-toggle-card,
.dashboard-redesign .dash-log-sale-card {
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 2;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.dashboard-redesign .dash-pending-section.dash-toggle-card {
  padding: 0;
  margin: 0;
  border-top: 0;
  background: var(--surface);
  min-height: 0;
  text-align: left;
}

.dashboard-redesign .dash-toggle-btn,
.dashboard-redesign .dash-log-sale-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 3;
}

.dashboard-redesign .dash-toggle-btn:hover,
.dashboard-redesign .dash-log-sale-toggle:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.dashboard-redesign .dash-toggle-main,
.dashboard-redesign .dash-log-sale-toggle-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dashboard-redesign .dash-toggle-icon,
.dashboard-redesign .dash-log-sale-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.dashboard-redesign .dash-toggle-icon .ico,
.dashboard-redesign .dash-log-sale-icon .ico {
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: currentColor;
}

.dashboard-redesign .dash-toggle-title,
.dashboard-redesign .dash-log-sale-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dashboard-redesign .dash-toggle-meta,
.dashboard-redesign .dash-log-sale-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-redesign .dash-toggle-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-redesign .dash-toggle-label,
.dashboard-redesign .dash-log-sale-toggle-label {
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-redesign .dash-toggle-card.is-open > .dash-toggle-btn,
.dashboard-redesign .dash-log-sale-card.is-open > .dash-log-sale-toggle {
  border-bottom: 1px solid var(--border);
}

.dashboard-redesign .dash-toggle-panel,
.dashboard-redesign .dash-income-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  overflow: hidden;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-redesign .dash-toggle-card:not(.is-open) > .dash-toggle-panel,
.dashboard-redesign .dash-log-sale-card:not(.is-open) > .dash-income-panel {
  visibility: hidden;
  pointer-events: none;
}

.dashboard-redesign .dash-toggle-card.is-open > .dash-toggle-panel,
.dashboard-redesign .dash-log-sale-card.is-open > .dash-income-panel {
  visibility: visible;
  pointer-events: auto;
}

.dashboard-redesign .dash-toggle-card.is-open > .dash-toggle-panel,
.dashboard-redesign .dash-log-sale-card.is-open > .dash-income-panel {
  grid-template-rows: 1fr;
}

.dashboard-redesign .dash-toggle-panel-body,
.dashboard-redesign .dash-toggle-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.dashboard-redesign .dash-toggle-panel-inner {
  display: grid;
  gap: 8px;
  padding: 0 16px;
  transition: padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-redesign .dash-toggle-card.is-open > .dash-toggle-panel > .dash-toggle-panel-inner {
  padding: 12px 16px 14px;
}

.dashboard-redesign .dash-toggle-panel > .dash-income-form,
.dashboard-redesign .dash-toggle-panel-inner > .dash-toggle-sales-list,
.dashboard-redesign .dash-toggle-panel-inner > .dash-pending-empty,
.dashboard-redesign .dash-toggle-panel-inner > .dash-pending-toolbar,
.dashboard-redesign .dash-toggle-panel-inner > .dash-toggle-pending-desc,
.dashboard-redesign .dash-toggle-panel-inner > .dash-pending-foot {
  min-height: 0;
  overflow: hidden;
}

.dashboard-redesign .dash-toggle-panel-inner > .dash-toggle-pending-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dashboard-redesign .dash-toggle-panel-inner > .dash-sales-list-wrap,
.dashboard-redesign .dash-toggle-panel-inner > .dash-sales-log-section {
  min-height: 0;
  overflow: visible;
}

.dashboard-redesign .dash-toggle-panel > :not(.dash-income-form):not(.dash-toggle-panel-inner) {
  padding-left: 16px;
  padding-right: 16px;
}

.dashboard-redesign .dash-toggle-card.is-open .dash-toggle-panel > :not(.dash-income-form):not(.dash-toggle-panel-inner) {
  padding-top: 12px;
}

.dashboard-redesign .dash-toggle-card.is-open .dash-toggle-panel > :last-child:not(.dash-income-form):not(.dash-toggle-panel-inner) {
  padding-bottom: 14px;
}

.dashboard-redesign .dash-toggle-sales-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

.dashboard-redesign .dash-sales-combined {
  gap: 14px;
}

.dashboard-redesign .dash-sales-work-stack {
  display: grid;
  gap: 20px;
  width: 100%;
}

.dashboard-redesign .dash-sales-log-section {
  display: grid;
  gap: 12px;
}

.dashboard-redesign .dash-sales-history-section {
  display: grid;
  gap: 10px;
  padding-top: 0;
  border-top: none;
}

.dashboard-redesign .dash-sales-history-heading,
.dashboard-redesign .dash-sales-log-heading {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-redesign .dash-sales-count-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-redesign .dash-sales-combined .dash-income-form,
.dashboard-redesign .dash-sales-log-section .dash-income-form {
  padding: 0;
  background: transparent;
  border-radius: 0;
  gap: 12px;
  overflow: visible;
}

.dashboard-redesign .dash-sales-log-section .dash-income-field-label {
  font-size: 10px;
  letter-spacing: 0.06em;
}

.dashboard-redesign .dash-sales-log-section .dash-income-amount-wrap,
.dashboard-redesign .dash-sales-log-section .dash-income-amount-select,
.dashboard-redesign .dash-sales-log-section .dash-income-field input {
  min-height: 40px;
  border-radius: 10px;
}

.dashboard-redesign .dash-sales-log-section .dash-income-submit {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
}

.dashboard-redesign .dash-sales-list-wrap {
  display: grid;
  gap: 8px;
}

.dashboard-redesign .dash-sales-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-redesign .dash-sales-list {
  --dash-sales-visible-count: 3;
  display: grid;
  gap: 8px;
  max-height: calc(
    var(--dash-sales-visible-count) * 5.5rem + (var(--dash-sales-visible-count) - 1) * 8px
  );
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

.dashboard-redesign .dash-sales-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-redesign .dash-sales-page-status {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dashboard-redesign .dash-sales-page-btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.dashboard-redesign .dash-toggle-pending-list {
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.dashboard-redesign .dash-pending-section.dash-toggle-card .dash-pending-empty {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.dashboard-redesign .dash-pending-section.dash-toggle-card.is-open
  .dash-toggle-panel-inner
  > .dash-pending-empty:not([hidden]) {
  min-height: 120px;
  padding: 22px 18px;
  place-items: center;
  align-content: center;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-soft) 58%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface) 86%, var(--surface-2));
}

.dashboard-redesign .dash-pending-section.dash-toggle-card .dash-pending-foot {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.dashboard-redesign .dash-pending-section--empty .dash-pending-foot {
  display: none;
}

.dashboard-redesign .dash-pending-section--empty.dash-toggle-card.is-open .dash-pending-foot {
  display: none;
}

.dashboard-redesign .dash-income-form {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  background: var(--surface-2);
  transition: padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-redesign .dash-toggle-card.is-open .dash-income-form,
.dashboard-redesign .dash-log-sale-card.is-open .dash-income-form {
  padding: 14px 16px 16px;
}

.dashboard-redesign .dash-income-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: 10px;
}

.dashboard-redesign .dash-income-field .dash-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.dashboard-redesign .dash-income-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dashboard-redesign .dash-income-field--full {
  grid-column: 1 / -1;
}

.dashboard-redesign .dash-income-field-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-redesign .dash-income-field-optional {
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.dashboard-redesign .sale-card-edit-field .dash-income-field-optional {
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.dashboard-redesign .dash-income-amount-wrap {
  display: flex;
  align-items: stretch;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  overflow: hidden;
}
.dashboard-redesign .dash-income-amount-wrap[hidden] {
  display: none;
}

.dashboard-redesign .dash-income-currency {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.dashboard-redesign .dash-income-amount-wrap input,
.dashboard-redesign .dash-income-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.dashboard-redesign .dash-income-amount-wrap input {
  border: 0;
  border-radius: 0;
  min-width: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.dashboard-redesign .dash-income-amount-wrap input::-webkit-outer-spin-button,
.dashboard-redesign .dash-income-amount-wrap input::-webkit-inner-spin-button,
.dashboard-redesign .sale-card-edit-field input[type="number"]::-webkit-outer-spin-button,
.dashboard-redesign .sale-card-edit-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dashboard-redesign .sale-card-edit-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.dashboard-redesign .dash-income-amount-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.dashboard-redesign .dash-income-field input:focus,
.dashboard-redesign .dash-income-amount-select:focus,
.dashboard-redesign .dash-income-amount-wrap:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 72%, transparent);
}

/* Modern custom dropdown for the sale amount */
.dash-select-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}

.dashboard-redesign .dash-select {
  position: relative;
  width: 100%;
}

.dashboard-redesign .dash-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.dashboard-redesign .dash-select-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.dashboard-redesign .dash-select-trigger.is-placeholder .dash-select-label {
  color: var(--muted);
  font-weight: 500;
}

.dashboard-redesign .dash-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-redesign .dash-select-chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 0.2s ease, color 0.15s ease;
}

.dashboard-redesign .dash-select.is-open .dash-select-trigger,
.dashboard-redesign .dash-select-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 72%, transparent);
}

.dashboard-redesign .dash-select.is-open .dash-select-chev {
  transform: rotate(180deg);
  color: var(--accent);
}

.dashboard-redesign .dash-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

html[data-theme="dark"] .dashboard-redesign .dash-select-menu {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.dashboard-redesign .dash-select.is-open .dash-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dashboard-redesign .dash-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.dashboard-redesign .dash-select-option-price {
  flex: 0 0 auto;
}
.dashboard-redesign .dash-select-option-comm {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.dashboard-redesign .dash-select-option.is-active .dash-select-option-comm {
  color: var(--muted);
}

.dashboard-redesign .dash-select-option:hover {
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
}

.dashboard-redesign .dash-select-option.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 78%, transparent);
}

.dashboard-redesign .dash-select-option.is-active::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
 * Modern select · site-wide (generic version of the dashboard dropdown)
 * ========================================================================== */
.ui-select-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.ui-select {
  position: relative;
  width: 100%;
}
.ui-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: var(--input-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ui-select-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.ui-select-trigger:disabled,
.ui-select.is-disabled .ui-select-trigger {
  cursor: default;
  opacity: 0.55;
}
.ui-select-trigger.is-placeholder .ui-select-label {
  color: var(--muted);
  font-weight: 500;
}
.ui-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 0.2s ease, color 0.15s ease;
}
.ui-select.is-open .ui-select-trigger,
.ui-select-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft, var(--accent)) 55%, transparent);
}
.ui-select.is-open .ui-select-chev {
  transform: rotate(180deg);
  color: var(--accent);
}
.ui-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  padding: 6px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
html[data-theme="dark"] .ui-select-menu {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.ui-select.is-open .ui-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ui-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ui-select-option--icon {
  justify-content: flex-start;
  gap: 10px;
}
.ui-select-option--icon .ui-select-option-text {
  flex: 1 1 auto;
}
.ui-select-option--icon.is-active::after {
  margin-left: auto;
}
.ui-select-label--icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}
.ui-select-option-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #94a3b8;
  overflow: hidden;
}
.ui-select-option-icon img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.ui-select-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-option-icon--cashapp { background: #00d632; }
.ui-select-option-icon--venmo { background: #008cff; }
.ui-select-option-icon--paypal { background: #003087; }
.ui-select-option-icon--zelle { background: #6d1ed4; }
.ui-select-option-icon--applepay,
.ui-select-option-icon--applecash,
.ui-select-option-icon--square { background: #111827; }
.ui-select-option-icon--googlepay { background: #4285f4; }
.ui-select-option-icon--chime { background: #1ec77a; }
.ui-select-option-icon--stripe { background: #635bff; }
.ui-select-option-icon--bitcoin { background: #f7931a; }
.ui-select-option-icon--ethereum { background: #627eea; }
.ui-select-option-icon--wise { background: #9fe870; }
.ui-select-option-icon--wise img { filter: none; }
.ui-select-option-icon--revolut { background: #0666eb; }
.ui-select-option-icon--usdc { background: #2775ca; }
.ui-select-option-icon--cash,
.ui-select-option-icon--check,
.ui-select-option-icon--bank,
.ui-select-option-icon--other { background: #64748b; }
.ui-select-option:hover,
.ui-select-option:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent-soft, var(--accent)) 50%, transparent);
}
.ui-select-option.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft, var(--accent)) 68%, transparent);
}
.ui-select-option.is-disabled {
  opacity: 0.5;
  cursor: default;
}
.ui-select-option.is-active::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Custom amount: compact dropdown on the left, amount input fills the rest */
.dashboard-redesign .dash-income-field--custom {
  grid-template-columns: 116px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}

.dashboard-redesign .dash-income-field--custom .dash-income-field-label {
  grid-column: 1 / -1;
}

.dashboard-redesign .dash-income-field--custom .dash-select {
  grid-column: 1;
  width: 100%;
}

.dashboard-redesign .dash-income-field--custom .dash-select-trigger {
  width: 100%;
  min-width: 0;
  padding-inline: 12px;
}

.dashboard-redesign .dash-income-field--custom .dash-income-amount-wrap {
  grid-column: 2;
  margin: 0;
  min-width: 0;
}

.dashboard-redesign .dash-income-field--custom .dash-select-menu {
  min-width: 100%;
  width: max-content;
  max-width: 240px;
}

.dashboard-redesign .dash-income-submit {
  width: 100%;
  margin-top: 2px;
}

@container dash-work-panels (max-width: 520px) {
  .dashboard-redesign .dash-income-form-grid,
  .dashboard-redesign .sale-card-edit-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-income-field--custom {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-income-field--custom .dash-select,
  .dashboard-redesign .dash-income-field--custom .dash-income-amount-wrap {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@container dash-sale-card (max-width: 420px) {
  .dashboard-redesign .sale-card-edit-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard-redesign .dash-income-form-grid,
  .dashboard-redesign .sale-card-edit-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-income-field--custom {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign .dash-income-field--custom .dash-select,
  .dashboard-redesign .dash-income-field--custom .dash-income-amount-wrap {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Pending business cards · theme-safe overrides */
html[data-theme="light"] .dash-pending-list > .dash-pending-item,
html[data-theme="dark"] .dash-pending-list > .dash-pending-item,
html[data-theme="light"]:not([data-ui-color]) .dash-pending-list > .dash-pending-item {
  border-radius: 10px !important;
  border-left-width: 1px;
  box-shadow: none !important;
  background: var(--surface) !important;
}

/* Dashboard pending section · matches revenue tracker style */
.dashboard-redesign .dash-pending-island-card .dash-toggle-btn {
  padding: 16px 18px;
}

.dashboard-redesign .dash-pending-island-card .dash-toggle-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dashboard-redesign .dash-pending-island-card .dash-toggle-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.dashboard-redesign .dash-toggle-card.is-open > .dash-toggle-panel > .dash-toggle-panel-inner {
  padding: 10px 14px 14px;
}

.dashboard-redesign .dash-toggle-pending-list {
  gap: 6px;
  max-height: min(56vh, 520px);
  scrollbar-width: thin;
}

.dashboard-redesign .dash-pending-empty {
  min-height: 100px;
  padding: 20px 16px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px dashed color-mix(in srgb, var(--border) 88%, transparent);
  box-shadow: none;
}

.dashboard-redesign .dash-pending-empty .dash-empty-title {
  font-size: 14px;
  font-weight: 600;
}

.dashboard-redesign .dash-pending-empty .dash-empty-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 720px) {
  .dash-pending-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .dash-pending-item-actions {
    justify-content: flex-end;
  }
}

/* ===== Mobile compatibility · consolidated ===== */

@media (max-width: 900px) {
  .dash-pending-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .dash-pending-count {
    align-self: flex-start;
  }

  .dashboard-redesign .dash-pending-toolbar .leads-toolbar-filters,
  .dashboard-redesign .dash-pending-toolbar-filters {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .course-module-layout--survey {
    min-height: min(70vh, 520px);
  }

  .course-module-layout--survey .course-module-main {
    padding: 14px 0 16px;
  }

  .course-module-aside--survey {
    padding: 8px;
  }

  .course-everyday-embed {
    padding: 12px 10px 10px;
  }

  .everyday-loop-step {
    padding: 8px 10px;
    gap: 8px;
    align-items: flex-start;
  }

  .everyday-loop-step-copy,
  .everyday-loop-step-copy-stack {
    flex: 1 1 140px;
  }

  .everyday-loop-step-action {
    align-self: center;
  }

  .everyday-loop-step-summary {
    font-size: 12px;
  }

  .course-everyday-list .everyday-tasks-embed-btn {
    width: auto;
    min-height: 28px;
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  .dashboard-redesign .dash-log-sale-toggle,
  .leads-page .leads-page-pending .dash-toggle-btn {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
  }

  .dashboard-redesign .dash-pending-island-card .dash-toggle-btn {
    flex-wrap: nowrap;
    align-items: center;
    padding: 10px 12px;
    gap: 8px;
    min-height: 0;
  }

  .dashboard-redesign .dash-pending-island-card .dash-toggle-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .dashboard-redesign .dash-pending-island-card .dash-toggle-title {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dashboard-redesign .dash-pending-island-card .dash-toggle-meta {
    width: auto;
    flex-shrink: 0;
    padding-top: 0;
    gap: 6px;
  }

  .dashboard-redesign .dash-pending-island-card .dash-toggle-count {
    font-size: 11px;
    white-space: nowrap;
  }

  .dashboard-redesign .dash-log-sale-toggle-meta,
  .leads-page .leads-page-pending .dash-toggle-meta {
    width: 100%;
    justify-content: space-between;
    padding-top: 2px;
  }

  .dash-pending-section.dash-pending-loading .dash-toggle-meta,
  .leads-page .leads-page-pending .dash-pending-section.dash-pending-loading .dash-toggle-meta {
    width: auto;
    padding-top: 0;
    margin-left: auto;
    justify-content: flex-end;
  }

  .dashboard-redesign .dash-toggle-card.is-open > .dash-toggle-panel > .dash-toggle-panel-inner,
  .leads-page .leads-page-pending .dash-toggle-card.is-open > .dash-toggle-panel > .dash-toggle-panel-inner {
    padding: 12px 14px 14px;
  }

  .dashboard-redesign .dash-toggle-pending-list,
  .leads-page .leads-page-pending .dash-toggle-pending-list {
    max-height: none;
  }

  .leads-page .lf-pending-section {
    margin-bottom: 14px;
  }

  .course-module-main {
    padding: 14px 0 16px;
  }

  .course-module-video-group {
    max-width: 100%;
    width: 100%;
  }

  .course-module-video-group .video-wrap.course-module-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }

  .course-module-aside {
    padding: 12px 10px;
  }

  .course-daily-loop-checklist .daily-loop-progress-steps {
    gap: 2px;
  }

  .course-daily-loop-checklist .daily-loop-step-label {
    font-size: 8px;
    letter-spacing: 0;
    line-height: 1.1;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    hyphens: auto;
  }

  .course-daily-loop-checklist .daily-loop-step-dot {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .daily-loop-step-card {
    padding: 14px 12px;
  }

  .daily-loop-step-title {
    font-size: 15px;
    line-height: 1.4;
  }

  .daily-loop-step-detail {
    font-size: 13px;
  }

  .daily-loop-step-nav {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
  }

  .daily-loop-nav-btn {
    flex: 1;
    width: auto;
    min-height: 40px;
    font-size: 13px;
  }

  .daily-loop-step-tool .everyday-tasks-embed-btn {
    width: 100%;
    min-height: 40px;
  }

  .course-chapter-nav.survey-choices--proceed {
    flex-wrap: wrap;
    padding: 12px;
    gap: 8px;
  }

  .course-chapter-nav .btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
  }

  body[data-page="about"] .contributors-team-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="about"] .owner-contributors-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 12px;
  }

  #page-body > h1,
  .page-hero h1,
  .dash-page-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    line-height: 1.05;
  }

  .everyday-tasks-table thead {
    display: none;
  }

  .everyday-tasks-table tbody tr.everyday-tasks-row {
    display: block;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
  }

  .everyday-tasks-table td {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
  }

  .everyday-tasks-table td + td {
    margin-top: 8px;
  }

  .everyday-tasks-step {
    width: auto;
    text-align: left;
    margin-bottom: 6px;
  }

  .everyday-tasks-open {
    width: 100%;
    min-width: 0;
    text-align: left;
    white-space: normal;
  }

  .everyday-tasks-open .btn,
  .everyday-tasks-open .everyday-tasks-embed-btn {
    width: 100%;
    min-height: 40px;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  body[data-page="about"] .owner-contributors-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .dash-pending-name {
    font-size: 13px;
  }

  .leads-page .lf-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leads-page .lf-card-actions--two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .main,
  body > #page-body {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  .dashboard-redesign .dash-action-dock {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 12px 6px 10px;
    gap: 2px;
  }

  .dashboard-redesign .dash-action-dock .dash-quicklink-text {
    font-size: 9px;
    line-height: 1.15;
  }

  .course-daily-loop-checklist .daily-loop-step-label {
    display: none;
  }

  .course-daily-loop-checklist .daily-loop-step-dot {
    width: 24px;
    height: 24px;
  }

  body[data-page="about"] .owner-portfolio-contact--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link {
    min-height: 48px;
    padding: 10px 12px;
  }

  body[data-page="about"] .owner-portfolio-contact--grid .owner-portfolio-link-icon {
    width: 28px;
    height: 28px;
  }

  .course-module-layout--survey {
    min-height: min(85vh, 640px);
    grid-template-rows: auto minmax(300px, 1fr);
  }
}

/* Owner Sales Console (Delexo-only) */
body[data-page="sales-console"] #page-body.dashboard-redesign.owner-console-page,
.main > #page-body.dashboard-redesign.owner-console-page {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  box-sizing: border-box;
}

/* My clients page (owner-only) */
body[data-page="my-clients"] #page-body.dashboard-redesign.owner-clients-page,
.main > #page-body.dashboard-redesign.owner-clients-page {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  box-sizing: border-box;
}

.dashboard-redesign.owner-clients-page .owner-clients-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.dashboard-redesign.owner-clients-page .owner-clients-page-head h1 {
  margin: 0;
}

.dashboard-redesign.owner-clients-page .owner-clients-page-lead {
  margin: 6px 0 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.dashboard-redesign.owner-clients-page .owner-clients-saved-card {
  scroll-margin-top: 18px;
}

.dashboard-redesign.owner-clients-page .owner-clients-saved-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.dashboard-redesign.owner-clients-page .owner-clients-saved-toolbar .owner-clients-card-title {
  margin: 0;
}

.dashboard-redesign.owner-clients-page .owner-clients-saved-card > .owner-console-inbox-status {
  margin-top: 12px;
}

.owner-client-form-dialog {
  width: min(92vw, 440px);
  max-width: 440px;
  max-height: min(88vh, 640px);
}

.owner-client-form-dialog-panel,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel {
  padding: 14px 14px 12px;
  box-sizing: border-box;
  max-height: min(88vh, 640px);
  overflow: auto;
}

.owner-client-form-dialog-head {
  margin: 0 0 10px;
}

.owner-client-form-dialog-head .owner-console-dialog-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.owner-client-form-dialog-lead {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.owner-client-form-dialog-panel .owner-clients-form,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Compact find bar - override page inbox-search pill chrome */
.owner-client-form-dialog-panel .owner-clients-autofill-bar,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-autofill-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 4px;
  margin: 0 0 10px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  box-sizing: border-box;
  /* Never stretch to fill the dialog */
  height: auto;
  min-height: 0;
  max-height: none;
}

.owner-client-form-dialog-panel .owner-clients-table-search-label,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-table-search-label {
  display: block;
  margin: 0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}

.owner-client-form-dialog-panel .owner-clients-autofill-search-field,
.owner-client-form-dialog-panel .owner-console-inbox-search-field,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search-field,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-autofill-search-field,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-table-search-field {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
  padding: 0 !important;
  gap: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

.owner-client-form-dialog-panel .owner-console-inbox-search-field::before,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search-field::before {
  content: none;
  display: none;
}

.owner-client-form-dialog-panel .owner-console-inbox-search,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 6px 32px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 7px;
  background: var(--surface, #fff);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  outline: none;
  box-sizing: border-box;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.owner-client-form-dialog-panel .owner-console-inbox-search::placeholder,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search::placeholder {
  color: var(--muted);
}

.owner-client-form-dialog-panel .owner-console-inbox-search:focus,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search:focus,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search-field:focus-within {
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 6%, transparent);
}

.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search-field:focus-within {
  border: 0;
  box-shadow: none;
}

.owner-client-form-dialog-panel .owner-console-inbox-search-clear,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.owner-client-form-dialog-panel .owner-console-inbox-search-clear[hidden],
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search-clear[hidden] {
  display: none;
}

.owner-client-form-dialog-panel .owner-clients-autofill-status,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-autofill-bar .owner-clients-autofill-status {
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.owner-client-form-dialog-panel .owner-clients-autofill-status.is-error,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-autofill-status.is-error {
  color: var(--danger, #dc2626);
}

.owner-client-form-dialog-panel .owner-clients-autofill-suggestions,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-autofill-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 180px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 8px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 12%, transparent);
}

.owner-client-form-dialog-panel .owner-clients-autofill-suggestions[hidden],
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-autofill-suggestions[hidden] {
  display: none;
}

.owner-client-form-dialog-panel .owner-clients-form-grid,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.owner-client-form-dialog-panel .owner-clients-field,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.owner-client-form-dialog-panel .owner-clients-field--wide,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-field--wide {
  grid-column: 1 / -1;
}

.owner-client-form-dialog-panel .owner-clients-field .dash-tracker-label,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-field .dash-tracker-label {
  display: block;
  margin: 0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}

.owner-client-form-dialog-panel .owner-clients-field input,
.owner-client-form-dialog-panel .owner-clients-field select,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-field input,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-field select {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 7px;
  background: var(--surface, #fff);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.owner-client-form-dialog-panel .owner-clients-field input::placeholder,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-field input::placeholder {
  color: var(--muted);
}

.owner-client-form-dialog-panel .owner-clients-field input:focus,
.owner-client-form-dialog-panel .owner-clients-field select:focus,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-field input:focus,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-field select:focus {
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 6%, transparent);
}

.owner-client-form-dialog-panel .owner-clients-form-actions,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.owner-client-form-dialog-panel .owner-clients-form-actions .btn,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-form-actions .btn {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
}

.owner-client-form-dialog-panel .owner-console-inbox-status,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-status {
  margin-top: 8px;
  font-size: 11px;
}

@media (max-width: 560px) {
  .owner-client-form-dialog {
    width: min(94vw, 400px);
  }

  .owner-client-form-dialog-panel .owner-clients-form-grid,
  .dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-form-grid {
    grid-template-columns: 1fr;
  }

  .owner-client-form-dialog-panel .owner-clients-form-actions,
  .dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-form-actions {
    justify-content: stretch;
  }

  .owner-client-form-dialog-panel .owner-clients-form-actions .btn,
  .dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-form-actions .btn {
    flex: 1 1 auto;
  }
}

.dashboard-redesign.owner-clients-page .owner-clients-export-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.dashboard-redesign.owner-clients-page .owner-clients-export-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-redesign.owner-clients-page .owner-clients-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dashboard-redesign.owner-clients-page .owner-clients-export-btn {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 12px;
}

.dashboard-redesign.owner-clients-page .owner-clients-card-title {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-bar {
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-bar .owner-clients-table-toolbar {
  border-bottom: 0;
  border-radius: 9px;
  background: transparent;
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-search-field {
  position: relative;
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-bar .owner-clients-autofill-status {
  margin: 0;
  padding: 0 12px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-status.is-error {
  color: var(--danger, #dc2626);
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-suggestions,
.dashboard-redesign.owner-clients-page .owner-clients-saved-suggestions {
  max-height: 280px;
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-suggestion:hover,
.dashboard-redesign.owner-clients-page .owner-clients-autofill-suggestion:focus-visible {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  outline: none;
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-suggestion-name {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.dashboard-redesign.owner-clients-page .owner-clients-autofill-suggestion-meta {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}

.dashboard-redesign.owner-clients-page .owner-console-clients-count {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.dashboard-redesign.owner-clients-page .owner-clients-form {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dashboard-redesign.owner-clients-page .owner-clients-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.dashboard-redesign.owner-clients-page .owner-clients-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.dashboard-redesign.owner-clients-page .owner-clients-field--wide {
  grid-column: 1 / -1;
}

.dashboard-redesign.owner-clients-page .owner-clients-field input,
.dashboard-redesign.owner-clients-page .owner-clients-field select {
  width: 100%;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.dashboard-redesign.owner-clients-page .owner-clients-field input::placeholder {
  color: var(--muted);
}

.dashboard-redesign.owner-clients-page .owner-clients-field input:focus,
.dashboard-redesign.owner-clients-page .owner-clients-field select:focus {
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 6%, transparent);
}

.dashboard-redesign.owner-clients-page .owner-clients-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.dashboard-redesign.owner-clients-page .owner-clients-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}

.dashboard-redesign.owner-clients-page .owner-clients-table-search-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-redesign.owner-clients-page .owner-clients-table-search-field {
  flex: 1 1 220px;
  min-width: 0;
}

/* Dialog find-bar must not inherit the 220px flex-basis (column axis = tall empty box). */
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-table-search-field,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-clients-autofill-search-field,
.dashboard-redesign.owner-clients-page .owner-client-form-dialog-panel .owner-console-inbox-search-field {
  flex: 0 0 auto;
  flex-basis: auto;
  height: auto;
  min-height: 0;
}

.dashboard-redesign.owner-clients-page .owner-console-clients-table-wrap {
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 9px;
}

.dashboard-redesign.owner-clients-page .owner-console-clients-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.dashboard-redesign.owner-clients-page .owner-console-clients-table thead th {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-redesign.owner-clients-page .owner-console-clients-table tbody td,
.dashboard-redesign.owner-clients-page .owner-console-clients-table tbody th {
  padding: 9px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  vertical-align: middle;
}

.dashboard-redesign.owner-clients-page .owner-console-clients-table tbody tr:last-child td,
.dashboard-redesign.owner-clients-page .owner-console-clients-table tbody tr:last-child th {
  border-bottom: 0;
}

.dashboard-redesign.owner-clients-page .owner-clients-business {
  font-weight: 650;
  color: var(--text);
}

.dashboard-redesign.owner-clients-page .owner-clients-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.dashboard-redesign.owner-clients-page .owner-clients-link:hover {
  text-decoration: underline;
}

.dashboard-redesign.owner-clients-page .owner-clients-muted {
  color: var(--muted);
}

.dashboard-redesign.owner-clients-page .owner-clients-notes-cell {
  max-width: 220px;
}

.dashboard-redesign.owner-clients-page .owner-clients-website-cell {
  max-width: 180px;
}

.dashboard-redesign.owner-clients-page .owner-clients-website-cell .owner-clients-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.dashboard-redesign.owner-clients-page .owner-clients-notes {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}

.dashboard-redesign.owner-clients-page .owner-clients-actions-cell {
  width: 1%;
  white-space: nowrap;
}

.dashboard-redesign.owner-clients-page .owner-clients-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search-wrap {
  flex-shrink: 0;
  margin: 0;
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 6px 0 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text) 12%);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search-field::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.55;
  background: currentColor;
  color: var(--muted);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search-field:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 48%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 14%, transparent);
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 10px 34px 10px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  outline: none;
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search-clear:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search-clear-ico {
  width: 14px;
  height: 14px;
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 10%, transparent);
  max-height: 220px;
  overflow: auto;
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-status {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.dashboard-redesign.owner-clients-page .owner-console-inbox-status.is-error {
  color: var(--danger, #dc2626);
}

.dashboard-redesign.owner-clients-page .owner-console-btn--ghost {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 94%, transparent);
  color: var(--muted);
}

.dashboard-redesign.owner-clients-page .owner-console-btn--ghost:hover,
.dashboard-redesign.owner-clients-page .owner-console-btn--ghost:focus-visible {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.dashboard-redesign.owner-clients-page .dash-pending-btn.owner-console-btn--danger {
  background: var(--surface);
  border-color: color-mix(in srgb, #b91c1c 28%, var(--border));
  color: #b91c1c;
}

.dashboard-redesign.owner-clients-page .dash-pending-btn.owner-console-btn--danger:hover,
.dashboard-redesign.owner-clients-page .dash-pending-btn.owner-console-btn--danger:focus-visible {
  background: color-mix(in srgb, #b91c1c 8%, var(--surface));
  border-color: color-mix(in srgb, #b91c1c 40%, var(--border));
  color: #b91c1c;
}

@media (max-width: 720px) {
  .dashboard-redesign.owner-clients-page .owner-clients-form-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign.owner-clients-page .owner-clients-row-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Role guides (owner-only) - workflows only, shared card/toggle styles */
body[data-page="role-guides"] #page-body.dashboard-redesign.owner-role-guides-page,
.main > #page-body.dashboard-redesign.owner-role-guides-page {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  box-sizing: border-box;
}

.owner-role-guides-root {
  display: grid;
  gap: 14px;
}

.owner-role-guides-toolbar {
  margin-bottom: 0;
}

.owner-role-guides-toolbar .lf-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.owner-role-guides-toolbar .lf-filter-label {
  flex: 0 0 auto;
}

.owner-role-guides-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
}

.owner-role-guides-toggle .lf-toggle-btn {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.owner-role-guide-content {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.owner-role-guide-role-sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: center;
}

.owner-role-guide-workflow-stack {
  display: grid;
  gap: 12px;
}

.owner-role-guide-workflow-card {
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}

.owner-role-guide-workflow-card:hover {
  transform: none;
}

.owner-role-guide-workflow-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.owner-role-guide-workflow-toggle:hover,
.owner-role-guide-workflow-toggle:focus-visible {
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}

.owner-role-guide-workflow-toggle:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
}

.owner-role-guide-workflow-title-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.owner-role-guide-workflow-title {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.owner-role-guide-workflow-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, #f8fafc);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.owner-role-guide-workflow-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: transform var(--dur-fast) var(--ease-out);
}

.owner-role-guide-workflow-chevron .ico,
.owner-role-guide-workflow-chevron svg {
  width: 14px;
  height: 14px;
}

.owner-role-guide-workflow-card.is-collapsed .owner-role-guide-workflow-chevron {
  transform: rotate(-90deg);
}

.owner-role-guide-workflow-panel {
  padding: 0 18px 18px;
  border-top: 1px solid var(--border);
}

.owner-role-guide-workflow-card.is-collapsed .owner-role-guide-workflow-panel {
  display: none;
}

.owner-role-guide-workflow-note {
  margin: 14px 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
  background: var(--surface-2, #f8fafc);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.owner-role-guide-steps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.owner-role-guide-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.owner-role-guide-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.owner-role-guide-step-content {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 3px;
}

.owner-role-guide-step-tag {
  display: inline-flex;
  align-self: start;
  width: fit-content;
  min-height: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, var(--border));
  background: color-mix(in srgb, var(--accent-blue) 8%, var(--surface));
  color: color-mix(in srgb, var(--accent-blue) 75%, var(--text));
  font-size: 0.68rem;
  font-weight: 700;
}

.owner-role-guide-step-text {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}

.owner-role-guide-inline-link {
  color: var(--accent-blue);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.owner-role-guide-inline-link:hover,
.owner-role-guide-inline-link:focus-visible {
  color: color-mix(in srgb, var(--accent-blue) 80%, #000);
}

.owner-role-guide-empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .owner-role-guides-toggle {
    width: 100%;
  }

  .owner-role-guide-workflow-toggle {
    padding: 14px;
  }

  .owner-role-guide-workflow-panel {
    padding: 0 14px 14px;
  }
}

.dashboard-redesign.owner-console-page .owner-console-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.owner-console-view-banner {
  position: fixed;
  top: 0;
  left: var(--sidebar);
  right: 0;
  width: auto;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 11px 20px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #fde68a;
  border-radius: 0;
  background: #fffbeb;
  color: #78350f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(180, 130, 20, 0.06);
  transform: translateY(-110%);
  pointer-events: none;
  transition:
    transform 1.55s cubic-bezier(0.19, 1, 0.22, 1),
    background 0.15s ease,
    left 0.25s ease;
}

body.sidebar-collapsed .owner-console-view-banner {
  left: 0;
}

@media (max-width: 900px) {
  .owner-console-view-banner {
    left: 0;
  }
}

.owner-console-view-banner.is-snapping {
  transition: none !important;
}

.owner-console-view-banner.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.owner-console-view-banner:hover {
  background: #fef9c3;
}

.owner-console-view-banner:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

.owner-console-view-banner-text {
  display: block;
  margin: 0;
  text-align: center;
}

html[data-theme="dark"] .owner-console-view-banner {
  background: #3f2d0c;
  border-bottom-color: #854d0e;
  color: #fef3c7;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .owner-console-view-banner:hover {
  background: #4a3610;
}

@media (prefers-reduced-motion: reduce) {
  .owner-console-view-banner {
    transition: none;
  }
}

.dashboard-redesign.owner-console-page .owner-console-head h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.dashboard-redesign.owner-console-page #page-body {
  display: grid;
  gap: 20px;
}

.dashboard-redesign.owner-console-page .owner-console-team-overview {
  padding: 16px 16px 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-team-overview-head {
  margin-bottom: 12px;
}

.dashboard-redesign.owner-console-page .owner-console-export-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.dashboard-redesign.owner-console-page .owner-console-export-label {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}

.dashboard-redesign.owner-console-page .owner-console-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.dashboard-redesign.owner-console-page .owner-console-export-btn {
  min-height: 20px;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: 0;
  flex-shrink: 0;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-head-row .dash-sales-history-heading {
  white-space: nowrap;
  flex-shrink: 0;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-head-row .owner-console-filters {
  flex-shrink: 0;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-head .owner-console-export-bar {
  width: 100%;
}

.dashboard-redesign.owner-console-page .owner-console-team-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
  margin-bottom: 12px;
}

.dashboard-redesign.owner-console-page .owner-console-team-head .dash-sales-history-heading {
  white-space: nowrap;
}

.dashboard-redesign.owner-console-page .owner-console-team-overview-head .dash-sales-history-heading {
  white-space: nowrap;
  flex-shrink: 0;
}

.dashboard-redesign.owner-console-page .owner-console-team-totals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.dashboard-redesign.owner-console-page .owner-console-team-total {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 9px;
  background: var(--surface);
}

.dashboard-redesign.owner-console-page .owner-console-team-total--highlight {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent-soft, #eef2ff) 35%, var(--surface));
}

.dashboard-redesign.owner-console-page .owner-console-team-total dt {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-console-team-total dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--text);
}

.dashboard-redesign.owner-console-page .owner-console-team-total-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-console-team-table-wrap {
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 9px;
}

.dashboard-redesign.owner-console-page .owner-console-team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.dashboard-redesign.owner-console-page .owner-console-team-table thead th {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-redesign.owner-console-page .owner-console-team-table tbody td,
.dashboard-redesign.owner-console-page .owner-console-team-table tbody th {
  padding: 9px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  vertical-align: middle;
}

.dashboard-redesign.owner-console-page .owner-console-team-table tbody tr:last-child td,
.dashboard-redesign.owner-console-page .owner-console-team-table tbody tr:last-child th {
  border-bottom: 0;
}

.dashboard-redesign.owner-console-page .owner-console-team-table tbody tr.owner-console-team-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.dashboard-redesign.owner-console-page .owner-console-team-table tbody tr.owner-console-team-row:hover {
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}

.dashboard-redesign.owner-console-page .owner-console-team-table tbody tr.owner-console-team-row.is-selected {
  background: color-mix(in srgb, var(--accent-soft, #eef2ff) 42%, var(--surface));
}

.dashboard-redesign.owner-console-page .owner-console-team-table tbody tr.owner-console-team-row.is-selected:hover {
  background: color-mix(in srgb, var(--accent-soft, #eef2ff) 52%, var(--surface));
}

.dashboard-redesign.owner-console-page .owner-console-team-table tbody tr.owner-console-team-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  outline-offset: -2px;
}

.dashboard-redesign.owner-console-page .owner-console-team-rep-label {
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
}

.dashboard-redesign.owner-console-page .owner-console-team-table tbody tr.is-selected .owner-console-team-rep-label {
  color: var(--accent, #2563eb);
}

.dashboard-redesign.owner-console-page .owner-console-team-rep-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.dashboard-redesign.owner-console-page .owner-console-team-rep-btn:hover,
.dashboard-redesign.owner-console-page .owner-console-team-rep-btn:focus-visible {
  color: var(--accent, #2563eb);
  text-decoration-color: currentColor;
  outline: none;
}

.dashboard-redesign.owner-console-page .owner-console-team-activity.is-online {
  color: #047857;
  font-weight: 600;
}

.dashboard-redesign.owner-console-page .owner-console-team-money {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dashboard-redesign.owner-console-page .owner-console-team-goal {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-console-team-overview-empty {
  margin: 10px 0 0;
}

.dashboard-redesign.owner-console-page .owner-console-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  padding-top: 4px;
  --owner-console-panel-h: clamp(720px, 82vh, 960px);
}

.dashboard-redesign.owner-console-page .owner-console-team-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dashboard-redesign.owner-console-page .owner-console-team {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: var(--owner-console-panel-h);
  max-height: var(--owner-console-panel-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  justify-items: stretch;
  align-content: start;
  gap: 10px;
}

.dashboard-redesign.owner-console-page .owner-console-inbox {
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  box-sizing: border-box;
  height: var(--owner-console-panel-h);
  max-height: var(--owner-console-panel-h);
}

.dashboard-redesign.owner-console-page .owner-console-inbox-body {
  flex: 1 1 auto;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-scroll {
  flex: 1 1 auto;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-body .owner-console-empty {
  flex: 1 1 auto;
  min-height: 120px;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-skeleton {
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 9px;
  background: var(--surface);
}

.dashboard-redesign.owner-console-page .owner-console-inbox-skeleton-bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--surface-2) 88%, var(--border)) 0%,
    color-mix(in srgb, var(--border) 55%, var(--surface-2)) 50%,
    color-mix(in srgb, var(--surface-2) 88%, var(--border)) 100%
  );
  background-size: 200% 100%;
  animation: owner-console-inbox-skeleton-shimmer 1.15s ease-in-out infinite;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-skeleton-bar--title {
  width: min(58%, 220px);
  height: 12px;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-skeleton-bar--sub {
  width: min(38%, 140px);
  opacity: 0.72;
}

@keyframes owner-console-inbox-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-redesign.owner-console-page .owner-console-inbox-skeleton-bar {
    animation: none;
  }
}

.dashboard-redesign.owner-console-page .owner-console-not-interested {
  margin-top: 14px;
  scroll-margin-top: 18px;
}

.dashboard-redesign.owner-console-page .owner-console-not-interested.owner-console-ni-section--focus {
  border-color: color-mix(in srgb, var(--accent-blue, #2563eb) 42%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue, #2563eb) 14%, transparent);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.dashboard-redesign.owner-console-page header.owner-console-ni-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0;
  padding-bottom: 0;
  border-bottom: 0;
  background: transparent;
  cursor: default;
  width: auto;
}

.dashboard-redesign.owner-console-page header.owner-console-ni-head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-redesign.owner-console-page .owner-console-ni-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  flex: 0 1 auto;
  min-width: 0;
}

.dashboard-redesign.owner-console-page .owner-console-ni-lead {
  margin: 4px 0 0;
}

.dashboard-redesign.owner-console-page .owner-console-ni-search-wrap {
  margin: 0 0 12px;
}

.dashboard-redesign.owner-console-page .owner-console-ni-count {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.dashboard-redesign.owner-console-page .owner-console-ni-list {
  margin-top: 0;
  gap: 7px;
}

.dashboard-redesign.owner-console-page .owner-console-ni-item .owner-console-ni-detail {
  margin-top: 1px;
  font-size: 10px;
  color: color-mix(in srgb, var(--muted) 94%, var(--text));
}

.dashboard-redesign.owner-console-page .owner-console-ni-item .owner-console-ni-reason {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
}

.dashboard-redesign.owner-console-page .owner-console-ni-item .owner-console-ni-reason-label {
  font-weight: 700;
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-console-ni-item .owner-console-ni-actions {
  gap: 5px;
}

.dashboard-redesign.owner-console-page .owner-console-ni-item .owner-console-ni-icon-btn {
  width: 27px;
  height: 27px;
  border-radius: 6px;
  border-color: color-mix(in srgb, var(--border) 94%, transparent);
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-console-ni-item .owner-console-ni-icon-btn:hover,
.dashboard-redesign.owner-console-page .owner-console-ni-item .owner-console-ni-icon-btn:focus-visible {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.dashboard-redesign.owner-console-page .owner-console-ni-item .dash-pending-ico,
.dashboard-redesign.owner-console-page .owner-console-ni-item .dash-pending-ico .ico {
  width: 13px;
  height: 13px;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-head {
  flex-shrink: 0;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-wrap {
  flex-shrink: 0;
  margin: 0 0 10px;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 6px 0 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text) 12%);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-field::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.55;
  background: currentColor;
  color: var(--muted);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-field:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 48%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 14%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 10px 34px 10px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  outline: none;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-clear[hidden] {
  display: none !important;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-clear:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-clear-ico {
  width: 14px;
  height: 14px;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 10%, transparent);
  max-height: 220px;
  overflow: auto;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-suggestion {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search-suggestion:hover,
.dashboard-redesign.owner-console-page .owner-console-inbox-search-suggestion:focus-visible {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  outline: none;
}

.dashboard-redesign.owner-console-page .owner-console-inbox-search::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-filters {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.dashboard-redesign.owner-console-page .owner-console-filter {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.dashboard-redesign.owner-console-page .owner-console-filter:hover {
  color: var(--text);
}

.dashboard-redesign.owner-console-page .owner-console-filter.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-inbox-status {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.dashboard-redesign.owner-console-page .owner-console-inbox-status.is-error {
  color: #dc2626;
}

.dashboard-redesign.owner-console-page .owner-console-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.dashboard-redesign.owner-console-page .owner-console-status--pending {
  background: color-mix(in srgb, var(--muted) 11%, var(--surface));
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  border: 1px solid color-mix(in srgb, var(--muted) 16%, var(--border));
}

.dashboard-redesign.owner-console-page .owner-console-status--confirmed {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.18);
}

.dashboard-redesign.owner-console-page .owner-console-status--dismissed {
  background: color-mix(in srgb, var(--muted) 11%, var(--surface));
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--muted) 14%, var(--border));
}

.dashboard-redesign.owner-console-page .owner-console-inbox .dash-pending-list {
  gap: 7px;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.dashboard-redesign.owner-console-page .owner-console-lead-item {
  padding: 8px 10px;
  gap: 12px;
  align-items: center;
  border-radius: 9px;
}

.dashboard-redesign.owner-console-page .owner-console-lead-head {
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}

.dashboard-redesign.owner-console-page .owner-console-lead-item .dash-pending-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

.dashboard-redesign.owner-console-page .owner-console-lead-item .owner-console-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  line-height: 1.35;
}

.dashboard-redesign.owner-console-page .owner-console-lead-meta {
  margin-top: 2px;
  gap: 0;
  font-size: 10.5px;
  line-height: 1.4;
}

.dashboard-redesign.owner-console-page .owner-console-lead-meta .dash-pending-dot {
  margin: 0 4px;
  opacity: 0.55;
}

.dashboard-redesign.owner-console-page .owner-console-lead-rep {
  font-weight: 500;
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-console-lead-meta .dash-pending-price {
  font-weight: 600;
  font-size: 10.5px;
}

.dashboard-redesign.owner-console-page .owner-console-lead-item .dash-pending-item-actions {
  gap: 5px;
}

.dashboard-redesign.owner-console-page .owner-console-lead-item .dash-pending-btn {
  min-height: 24px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
}

/* Not-interested rows · collapsed to name + rep, expand on click. */
/* Sent-leads inbox · collapsible row (essentials shown, full details on click) */
.dashboard-redesign.owner-console-page .owner-console-sent-item {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
}
.dashboard-redesign.owner-console-page .owner-console-sent-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px;
}
.dashboard-redesign.owner-console-page .owner-console-sent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity var(--dur-fast) ease;
}
.dashboard-redesign.owner-console-page .owner-console-sent-item .dash-pending-item-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
}
.dashboard-redesign.owner-console-page .owner-console-sent-item .dash-pending-item-actions .dash-pending-btn {
  flex: 0 1 auto;
  min-width: 0;
}
.dashboard-redesign.owner-console-page .owner-console-sent-item.is-open {
  overflow: visible;
}
.dashboard-redesign.owner-console-page .owner-console-sent-details {
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: color-mix(in srgb, var(--surface-2) 35%, var(--surface));
}
.dashboard-redesign.owner-console-page .owner-console-sent-panel {
  padding: 12px 14px 14px;
}
.dashboard-redesign.owner-console-page .owner-console-sent-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}
.dashboard-redesign.owner-console-page .owner-console-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--surface);
}
.dashboard-redesign.owner-console-page .owner-console-fact-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dashboard-redesign.owner-console-page .owner-console-fact-value {
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}
.dashboard-redesign.owner-console-page .owner-console-fact-link {
  color: var(--accent);
  text-decoration: none;
}
.dashboard-redesign.owner-console-page .owner-console-fact-link:hover {
  text-decoration: underline;
}
.dashboard-redesign.owner-console-page .owner-console-fact-code {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  overflow-wrap: anywhere;
}
.dashboard-redesign.owner-console-page .owner-console-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  background: color-mix(in srgb, var(--surface-2) 75%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.dashboard-redesign.owner-console-page .owner-console-chip--moonrise {
  color: color-mix(in srgb, #1d4ed8 88%, var(--text));
  background: color-mix(in srgb, #dbeafe 72%, var(--surface));
  border-color: color-mix(in srgb, #93c5fd 55%, var(--border));
}
.dashboard-redesign.owner-console-page .owner-console-chip--muted {
  color: var(--muted);
  background: transparent;
  border-color: color-mix(in srgb, var(--border) 75%, transparent);
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-summary-main {
  min-width: 0;
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-kicker {
  margin: 0 0 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-section {
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2));
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-title {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-grid {
  display: grid;
  gap: 5px;
  margin: 0;
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-grid .owner-console-ni-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.44fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-grid .owner-console-ni-row:first-child {
  padding-top: 0;
  border-top: 0;
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-grid .owner-console-ni-row:last-child {
  padding-bottom: 0;
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-grid .owner-console-ni-row-label {
  font-size: 10px;
}
.dashboard-redesign.owner-console-page .owner-console-sent-detail-grid .owner-console-ni-row-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
  color: var(--text);
}
.dashboard-redesign.owner-console-page .owner-console-status--build-none {
  color: var(--muted);
}
.dashboard-redesign.owner-console-page .owner-console-sent-head[disabled] {
  cursor: default;
}
.dashboard-redesign.owner-console-page .owner-console-sent-head:not([disabled]):hover .dash-pending-name {
  color: var(--accent);
}
.dashboard-redesign.owner-console-page .owner-console-sent-head-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.dashboard-redesign.owner-console-page .owner-console-sent-head-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dashboard-redesign.owner-console-page .owner-console-sent-sub {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 10px;
  color: var(--muted);
}
.dashboard-redesign.owner-console-page .owner-console-sent-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform var(--dur-fast) ease;
}
.dashboard-redesign.owner-console-page .owner-console-sent-chevron svg {
  width: 16px;
  height: 16px;
}
.dashboard-redesign.owner-console-page .owner-console-sent-item.is-open .owner-console-sent-chevron {
  transform: rotate(180deg);
}

.dashboard-redesign.owner-console-page .owner-console-ni-item {
  display: block;
  padding: 0;
  overflow: hidden;
}
.dashboard-redesign.owner-console-page .owner-console-ni-item .owner-console-ni-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 11px;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.dashboard-redesign.owner-console-page .owner-console-ni-item .owner-console-ni-head:hover {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.dashboard-redesign.owner-console-page .owner-console-ni-head-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  min-width: 0;
}
.dashboard-redesign.owner-console-page .owner-console-ni-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
.dashboard-redesign.owner-console-page .owner-console-ni-rep {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}
.dashboard-redesign.owner-console-page .owner-console-ni-rep-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
}
.dashboard-redesign.owner-console-page .owner-console-ni-rep--empty {
  font-style: italic;
  opacity: 0.75;
}
.dashboard-redesign.owner-console-page .owner-console-ni-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform var(--dur-fast) ease;
}
.dashboard-redesign.owner-console-page .owner-console-ni-chevron svg {
  width: 16px;
  height: 16px;
}
.dashboard-redesign.owner-console-page .owner-console-ni-item.is-open .owner-console-ni-chevron {
  transform: rotate(180deg);
}
.dashboard-redesign.owner-console-page .owner-console-ni-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 11px 11px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 12px;
}
.dashboard-redesign.owner-console-page .owner-console-ni-details[hidden] {
  display: none;
}

/* Key/value grid - refined tiles */
.dashboard-redesign.owner-console-page .owner-console-ni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin: 0;
}
.dashboard-redesign.owner-console-page .owner-console-ni-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  border-radius: 9px;
}
.dashboard-redesign.owner-console-page .owner-console-ni-row-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dashboard-redesign.owner-console-page .owner-console-ni-row-ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
.dashboard-redesign.owner-console-page .owner-console-ni-row-ico svg {
  width: 12px;
  height: 12px;
}
.dashboard-redesign.owner-console-page .owner-console-ni-row-value {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}
.dashboard-redesign.owner-console-page .owner-console-ni-detail-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 650;
}
.dashboard-redesign.owner-console-page .owner-console-ni-detail-link:hover {
  text-decoration: underline;
}
.dashboard-redesign.owner-console-page .owner-console-ni-id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--muted);
}

/* Reason block - accent callout */
.dashboard-redesign.owner-console-page .owner-console-ni-reason-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: 9px;
}
.dashboard-redesign.owner-console-page .owner-console-ni-reason-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dashboard-redesign.owner-console-page .owner-console-ni-reason-ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
.dashboard-redesign.owner-console-page .owner-console-ni-reason-ico svg {
  width: 12px;
  height: 12px;
}
.dashboard-redesign.owner-console-page .owner-console-ni-reason-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}
.dashboard-redesign.owner-console-page .owner-console-ni-reason-box--empty {
  border-left-color: color-mix(in srgb, var(--border) 80%, transparent);
}
.dashboard-redesign.owner-console-page .owner-console-ni-reason-box--empty .owner-console-ni-reason-text {
  color: var(--muted);
  font-style: italic;
}

/* Action buttons - labeled pills */
.dashboard-redesign.owner-console-page .owner-console-ni-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding-top: 2px;
}
.dashboard-redesign.owner-console-page .owner-console-ni-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 650;
  font-family: inherit;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}
.dashboard-redesign.owner-console-page .owner-console-ni-action:hover,
.dashboard-redesign.owner-console-page .owner-console-ni-action:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-soft, #eef2ff) 40%, var(--surface));
  outline: none;
}
.dashboard-redesign.owner-console-page button.owner-console-ni-action.owner-console-ni-action--danger:hover,
.dashboard-redesign.owner-console-page button.owner-console-ni-action.owner-console-ni-action--danger:focus-visible {
  color: color-mix(in srgb, #b91c1c 88%, var(--text));
  border-color: color-mix(in srgb, #ef4444 42%, var(--border));
  background: color-mix(in srgb, #fee2e2 55%, var(--surface));
}
.dashboard-redesign.owner-console-page .owner-console-ni-action-ico {
  display: inline-flex;
  flex: 0 0 auto;
}
.dashboard-redesign.owner-console-page .owner-console-ni-action-ico-svg,
.dashboard-redesign.owner-console-page .owner-console-ni-action-ico-svg .ico {
  width: 14px;
  height: 14px;
}

.site-dialog .site-dialog-field {
  margin: 0 0 14px;
}
.site-dialog .site-dialog-input {
  display: block;
  width: 100%;
  min-height: 96px;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  resize: vertical;
}
.site-dialog .site-dialog-input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.dashboard-redesign.owner-console-page .owner-console-btn--ghost {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  color: color-mix(in srgb, var(--text) 74%, var(--muted));
}

.dashboard-redesign.owner-console-page .owner-console-btn--ghost:hover,
.dashboard-redesign.owner-console-page .owner-console-btn--ghost:focus-visible {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.dashboard-redesign.owner-console-page .owner-console-btn--primary {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 86%, #000);
  color: #fff;
}

.dashboard-redesign.owner-console-page .owner-console-btn--primary:hover,
.dashboard-redesign.owner-console-page .owner-console-btn--primary:focus-visible {
  background: color-mix(in srgb, var(--accent) 86%, #000);
  border-color: color-mix(in srgb, var(--accent) 92%, #000);
  color: #fff;
}

.dashboard-redesign.owner-console-page .owner-console-btn--build {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  color: var(--text);
}

.dashboard-redesign.owner-console-page .owner-console-btn--build:hover:not(:disabled),
.dashboard-redesign.owner-console-page .owner-console-btn--build:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
}

.dashboard-redesign.owner-console-page .owner-console-btn--build:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dashboard-redesign.owner-console-page .owner-console-btn--build-toggle {
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 86%, #000);
  color: #fff;
}

.dashboard-redesign.owner-console-page .owner-console-btn--build-toggle:hover:not(:disabled),
.dashboard-redesign.owner-console-page .owner-console-btn--build-toggle:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 86%, #000);
  border-color: color-mix(in srgb, var(--accent) 92%, #000);
  color: #fff;
}

.dashboard-redesign.owner-console-page .owner-console-btn--build-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dashboard-redesign.owner-console-page .owner-console-btn--unqueue {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  color: color-mix(in srgb, var(--accent) 86%, var(--text));
}

.dashboard-redesign.owner-console-page .owner-console-btn--unqueue:hover:not(:disabled),
.dashboard-redesign.owner-console-page .owner-console-btn--unqueue:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--accent-soft, #eef2ff) 40%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  color: color-mix(in srgb, var(--accent) 92%, #000);
}

.dashboard-redesign.owner-console-page .owner-console-build-done {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-redesign.owner-console-page .owner-console-status--build {
  margin-left: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-redesign.owner-console-page .owner-console-status--build-queued,
.dashboard-redesign.owner-console-page .owner-console-status--build-processing {
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
}

.dashboard-redesign.owner-console-page .owner-console-status--build-completed {
  color: color-mix(in srgb, #22c55e 70%, var(--text));
}

.dashboard-redesign.owner-console-page .owner-console-status--build-failed {
  color: color-mix(in srgb, #ef4444 72%, var(--text));
}

.dashboard-redesign.owner-console-page .owner-console-lead-actions--meta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.dashboard-redesign.owner-console-page .owner-console-lead-confirmed-meta {
  margin: 0;
  flex: 1 1 100%;
  font-size: 11px;
  color: var(--muted);
  white-space: normal;
}

.dashboard-redesign.owner-console-page .dash-pending-btn.owner-console-btn--danger {
  background: var(--surface);
  border-color: color-mix(in srgb, #b91c1c 28%, var(--border));
  color: #b91c1c;
}

.dashboard-redesign.owner-console-page .dash-pending-btn.owner-console-btn--danger:hover,
.dashboard-redesign.owner-console-page .dash-pending-btn.owner-console-btn--danger:focus-visible {
  background: color-mix(in srgb, #b91c1c 8%, var(--surface));
  border-color: color-mix(in srgb, #b91c1c 40%, var(--border));
  color: #b91c1c;
}

.dashboard-redesign.owner-console-page .owner-console-empty {
  min-height: 140px;
}

.dashboard-redesign.owner-console-page .owner-console-rep-picker {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-redesign.owner-console-page .owner-console-rep-segment {
  width: 100%;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-rep-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.dashboard-redesign.owner-console-page .owner-console-rep-toggle {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.dashboard-redesign.owner-console-page .owner-console-rep-toggle:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-rep-toggle.is-active {
  color: var(--text);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
  font-weight: 650;
}

.dashboard-redesign.owner-console-page .owner-console-rep-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  outline-offset: 1px;
}

.dashboard-redesign.owner-console-page .owner-console-rep-segment.is-empty {
  background: transparent;
  border-color: transparent;
  padding: 0;
}

.dashboard-redesign.owner-console-page .owner-console-rep-empty,
.dashboard-redesign.owner-console-page .owner-console-team-placeholder,
.dashboard-redesign.owner-console-page .owner-console-deals-empty {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.dashboard-redesign.owner-console-page .owner-console-team-placeholder {
  padding: 12px 0 4px;
}

.dashboard-redesign.owner-console-page .owner-console-team-panel {
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .dash-sales-list-wrap {
  gap: 0;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sales-list {
  --dash-sales-visible-count: 4;
  gap: 8px;
  max-height: calc(
    var(--dash-sales-visible-count) * 5.65rem + (var(--dash-sales-visible-count) - 1) * 8px
  );
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card {
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 9px;
  box-shadow: none;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-view {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.dashboard-redesign.owner-console-page .owner-console-sale-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card .sale-amount {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.dashboard-redesign.owner-console-page .owner-console-sale-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.dashboard-redesign.owner-console-page .owner-console-sale-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.dashboard-redesign.owner-console-page .owner-console-sale-card-dot {
  color: var(--muted);
  opacity: 0.5;
  user-select: none;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-date {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-owner-badge {
  font-size: 0.58rem;
  padding: 0.1rem 0.34rem;
  letter-spacing: 0.03em;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-edit-btn.sale-card-edit-btn--icon {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--border) 92%, transparent);
  background: transparent;
  box-shadow: none;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--border) 92%, transparent);
  background: transparent;
  box-shadow: none;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-edit-ico,
.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-delete-ico {
  width: 13px;
  height: 13px;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-edit-btn.sale-card-edit-btn--icon:hover,
.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card-delete-btn:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  box-shadow: none;
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card:hover {
  border-color: color-mix(in srgb, var(--border) 100%, var(--text));
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-recent-sales .sale-card--owner-locked.sale-card--clickable:hover {
  border-color: color-mix(in srgb, #047857 22%, var(--border));
  box-shadow: 0 2px 8px color-mix(in srgb, #047857 8%, transparent);
}

.dashboard-redesign.owner-console-page .owner-console-team .dash-goal-tracker-card {
  gap: 12px;
}

.dashboard-redesign.owner-console-page .owner-console-inbox,
.dashboard-redesign.owner-console-page .owner-console-team {
  padding: clamp(16px, 3vw, 22px);
}

.dashboard-redesign.owner-console-page .owner-console-progress-panel {
  max-width: none;
  gap: 10px;
}

.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-goal-controls {
  max-width: none;
  width: 100%;
  justify-items: stretch;
}

.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-goal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  justify-items: stretch;
  align-items: end;
}

.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-goal-stats-right {
  display: contents;
}

.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-goal-stat,
.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-earned-stat,
.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-closes-stat,
.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-calls-stat {
  width: 100%;
  min-width: 0;
  gap: 3px;
}

.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-tracker-label {
  font-size: 0.58rem;
  letter-spacing: 0.015em;
  line-height: 1.2;
  overflow: visible;
  white-space: nowrap;
}

.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-stat-value,
.dashboard-redesign.owner-console-page .owner-console-progress-panel .dash-earned-value {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 13px;
  border-radius: 7px;
}

.dashboard-redesign.owner-console-page .owner-console-team .dash-goal-ring {
  width: min(100%, 156px);
  height: min(100%, 156px);
}

.dashboard-redesign.owner-console-page .owner-console-team .dash-goal-ring-center {
  inset: 26px;
}

.dashboard-redesign.owner-console-page .owner-console-team .dash-goal-ring-pct {
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.dashboard-redesign.owner-console-page #owner-progress-orbit.goal-progress-bump {
  transform-origin: center center;
  animation: dashGoalRingBounce 760ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

.dashboard-redesign.owner-console-page #owner-progress-orbit.goal-progress-bump .dash-goal-ring-pct {
  display: inline-block;
  transform-origin: center center;
  animation: dashGoalPctBounce 760ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-redesign.owner-console-page #owner-progress-orbit.goal-progress-bump,
  .dashboard-redesign.owner-console-page #owner-progress-orbit.goal-progress-bump .dash-goal-ring-pct {
    animation: none !important;
  }
}

.owner-console-dialog {
  border: 0;
  padding: 0;
  width: min(92vw, 440px);
  max-width: 440px;
  max-height: min(92vh, 760px);
  background: transparent;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  overflow: visible;
}

.owner-console-dialog:not([open]) {
  display: none;
}

.owner-console-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.owner-console-dialog-panel {
  margin: 0;
  padding: 1.15rem;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  max-height: min(92vh, 760px);
  overflow: auto;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.owner-console-dialog-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.owner-console-dialog-details {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.8rem;
  border-radius: 10px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  display: grid;
  gap: 0.55rem;
}

.owner-console-detail-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  font-size: 0.84rem;
}

.owner-console-detail-row dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
}

.owner-console-detail-row dd {
  margin: 0;
  color: var(--text, #0f172a);
  word-break: break-word;
}

.owner-console-detail-row dd strong {
  font-weight: 700;
}

.owner-console-detail-row dd a {
  color: var(--accent-blue, #2563eb);
  text-decoration: none;
}

.owner-console-detail-row dd a:hover {
  text-decoration: underline;
}

.owner-console-dialog-credit {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
}

.owner-console-tier-field {
  margin-bottom: 0.65rem;
}

.owner-console-tier-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
  margin-bottom: 0.4rem;
}

.owner-console-tier-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.owner-console-tier-pills .pill {
  color: var(--text, #0f172a);
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
  font-weight: 600;
  min-width: 4.5rem;
  line-height: 1.2;
}

.owner-console-tier-pills .pill.active {
  background: var(--btn-primary-bg, #1e293b);
  color: var(--btn-primary-fg, #fff);
  border-color: var(--btn-primary-border, #1e293b);
}

.owner-console-commission-preview {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
}

.owner-console-dialog-error {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  color: #dc2626;
}

.owner-console-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

.owner-console-dialog-warning {
  color: color-mix(in srgb, #b91c1c 78%, var(--text, #0f172a));
}

.owner-console-dialog-btn--danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

.owner-console-dialog-btn--danger:hover,
.owner-console-dialog-btn--danger:focus-visible {
  border-color: #b91c1c;
  background: #b91c1c;
  color: #fff;
}

html[data-theme="dark"] .owner-console-dialog-warning {
  color: #fca5a5;
}

.dashboard-redesign .sale-card-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  min-width: 0;
}

.dashboard-redesign .sale-card-owner-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.dashboard-redesign .sale-card--clickable {
  cursor: pointer;
}

.dashboard-redesign .sale-card--owner-locked.sale-card--clickable:hover {
  border-color: color-mix(in srgb, #047857 35%, var(--border));
  box-shadow: 0 8px 22px rgba(4, 120, 87, 0.1);
}

.dashboard-redesign .sale-card--owner-locked.sale-card--clickable:focus-visible {
  outline: 2px solid color-mix(in srgb, #047857 55%, var(--accent));
  outline-offset: 2px;
}

html[data-theme="dark"] .dashboard-redesign .sale-card--owner-locked.sale-card--clickable:hover {
  border-color: color-mix(in srgb, #34d399 40%, var(--border));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .owner-console-dialog-panel {
  background: var(--surface, #11151f);
  border-color: var(--border, #303746);
  color: var(--text, #f7f8fb);
}

html[data-theme="dark"] .owner-console-dialog-details {
  background: var(--surface-2, #1c2230);
  border-color: var(--border, #303746);
}

@media (max-width: 520px) {
  .owner-console-detail-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-console-status--pending,
html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-console-status--dismissed {
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--muted) 20%, var(--border));
  color: color-mix(in srgb, var(--muted) 75%, #e5e7eb);
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-console-status--confirmed {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(52, 211, 153, 0.22);
  color: #6ee7b7;
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-console-lead-rep {
  color: var(--muted, #9ca3af);
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-console-tier-pills .pill {
  background: var(--surface-2, #1c2230);
  border-color: var(--border, #303746);
  color: var(--text, #f7f8fb);
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-console-rep-segment {
  background: color-mix(in srgb, var(--surface-2, #1c2230) 92%, var(--surface, #11151f));
  border-color: var(--border, #303746);
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-console-rep-toggle:hover {
  background: color-mix(in srgb, var(--surface-elevated, #252b38) 85%, var(--bg, #0f1117));
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-console-rep-toggle.is-active {
  background: var(--surface, #11151f);
  border-color: var(--border, #303746);
  color: var(--text, #f7f8fb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-console-filter.is-active {
  background: var(--surface, #11151f);
}

@media (max-width: 960px) {
  .dashboard-redesign.owner-console-page .owner-console-layout {
    grid-template-columns: 1fr;
    --owner-console-panel-h: auto;
  }

  .dashboard-redesign.owner-console-page .owner-console-inbox,
  .dashboard-redesign.owner-console-page .owner-console-team {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .dashboard-redesign.owner-console-page .owner-console-inbox-body {
    flex: 1 1 auto;
    min-height: 220px;
    overflow: visible;
  }

  .dashboard-redesign.owner-console-page .owner-console-inbox-scroll {
    flex: 1 1 auto;
    min-height: 200px;
    max-height: min(78vh, 820px);
  }

  .dashboard-redesign.owner-console-page .owner-console-sent-row {
    flex-direction: column;
    gap: 10px;
  }

  .dashboard-redesign.owner-console-page .owner-console-sent-head {
    flex: 0 0 auto;
    width: 100%;
  }

  .dashboard-redesign.owner-console-page .owner-console-sent-item .dash-pending-item-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-redesign.owner-console-page .owner-console-sent-detail-summary {
    flex-direction: column;
  }

  .dashboard-redesign.owner-console-page .owner-console-sent-detail-badges {
    justify-content: flex-start;
  }

  .dashboard-redesign.owner-console-page .owner-console-sent-detail-sections {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign.owner-console-page .owner-console-sent-facts {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign.owner-console-page .owner-console-team-panel {
    overflow: visible;
  }

  .dashboard-redesign.owner-console-page .owner-console-team-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard-redesign.owner-console-page .owner-console-team-totals {
    grid-template-columns: 1fr;
  }

  .dashboard-redesign.owner-console-page .owner-console-inbox-head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-redesign.owner-console-page header.owner-console-ni-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .dashboard-redesign.owner-console-page .owner-console-ni-head-actions {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .dashboard-redesign.owner-console-page .owner-console-ni-lead {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
  }

  .dashboard-redesign.owner-console-page .owner-console-filters {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-redesign.owner-console-page .dash-pending-item {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-redesign.owner-console-page .dash-pending-item-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.dashboard-redesign.owner-console-page .owner-console-playtest-reset {
  margin-top: 14px;
}

.dashboard-redesign.owner-console-page .owner-console-playtest-head {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}

.dashboard-redesign.owner-console-page .owner-playtest-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-redesign.owner-console-page .owner-playtest-title-row .dash-sales-history-heading {
  margin: 0;
}

.dashboard-redesign.owner-console-page .owner-playtest-badge {
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  color: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 18%, var(--border));
}

.dashboard-redesign.owner-console-page .owner-console-playtest-lead {
  margin: 6px 0 0;
  max-width: 42rem;
}

.dashboard-redesign.owner-console-page .owner-playtest-body {
  display: grid;
  gap: 14px;
}

.dashboard-redesign.owner-console-page .owner-playtest-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-redesign.owner-console-page .owner-playtest-panel {
  min-width: 0;
  padding: 12px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}

.dashboard-redesign.owner-console-page .owner-playtest-panel-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-playtest-segment {
  width: 100%;
  max-width: 100%;
}

.dashboard-redesign.owner-console-page .owner-playtest-segment-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.dashboard-redesign.owner-console-page .owner-playtest-segment-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.dashboard-redesign.owner-console-page .owner-playtest-segment-opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition:
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.dashboard-redesign.owner-console-page .owner-playtest-segment-opt:hover span {
  color: var(--text);
}

.dashboard-redesign.owner-console-page .owner-playtest-segment-opt.is-active span {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
}

.dashboard-redesign.owner-console-page .owner-playtest-rep-field {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  transition: opacity 0.15s ease;
}

.dashboard-redesign.owner-console-page .owner-playtest-rep-field.is-disabled {
  opacity: 0.48;
  pointer-events: none;
}

.dashboard-redesign.owner-console-page .owner-playtest-rep-select {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.dashboard-redesign.owner-console-page .owner-playtest-rep-select:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.dashboard-redesign.owner-console-page .owner-playtest-preset-card {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--surface);
}

.dashboard-redesign.owner-console-page .owner-playtest-preset-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-playtest-datasets {
  margin-top: 10px;
}

.dashboard-redesign.owner-console-page .owner-playtest-datasets-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr;
  max-height: min(42vh, 320px);
  overflow: auto;
  padding-right: 2px;
}

.dashboard-redesign.owner-console-page .owner-playtest-dataset {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.dashboard-redesign.owner-console-page .owner-playtest-dataset:hover {
  border-color: color-mix(in srgb, var(--border) 100%, var(--text));
}

.dashboard-redesign.owner-console-page .owner-playtest-dataset:has(.owner-playtest-dataset-input:checked) {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
}

.dashboard-redesign.owner-console-page .owner-playtest-dataset--everything {
  border-color: color-mix(in srgb, var(--border) 92%, transparent);
}

.dashboard-redesign.owner-console-page .owner-playtest-dataset-input {
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--accent, #2563eb);
}

.dashboard-redesign.owner-console-page .owner-playtest-dataset-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-redesign.owner-console-page .owner-playtest-dataset-copy strong {
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
}

.dashboard-redesign.owner-console-page .owner-playtest-dataset-copy span {
  color: var(--muted);
  font-weight: 500;
}

.dashboard-redesign.owner-console-page .owner-playtest-foot {
  display: grid;
  gap: 10px;
  padding-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.dashboard-redesign.owner-console-page .owner-playtest-safe-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.dashboard-redesign.owner-console-page .owner-playtest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-redesign.owner-console-page .owner-playtest-reset-btn,
.dashboard-redesign.owner-console-page .owner-playtest-seed-btn {
  min-height: 34px;
  padding-inline: 14px;
  font-size: 12px;
  font-weight: 650;
}

.dashboard-redesign.owner-console-page .owner-playtest-seed-btn {
  border-color: color-mix(in srgb, #047857 24%, var(--border));
  color: #047857;
}

.dashboard-redesign.owner-console-page .owner-playtest-seed-btn:hover,
.dashboard-redesign.owner-console-page .owner-playtest-seed-btn:focus-visible {
  background: color-mix(in srgb, #047857 8%, var(--surface));
  border-color: color-mix(in srgb, #047857 42%, var(--border));
  color: #047857;
}

.dashboard-redesign.owner-console-page .owner-playtest-status {
  margin: 0;
}

.dashboard-redesign.owner-console-page .owner-playtest-status.is-success {
  color: #047857;
}

.owner-playtest-dialog-panel .owner-playtest-summary {
  margin: 0 0 0.85rem;
}

.owner-playtest-dialog-panel .owner-playtest-summary-note {
  margin: 0.35rem 0 0 !important;
}

.owner-playtest-dialog-panel .owner-playtest-pin-field {
  margin-bottom: 0.75rem;
}

.owner-playtest-dialog-panel .owner-playtest-pin-input {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.1em;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.owner-playtest-dialog-panel .owner-playtest-pin-input:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-playtest-panel {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}

html[data-theme="dark"] .dashboard-redesign.owner-console-page .owner-playtest-dataset:has(.owner-playtest-dataset-input:checked) {
  background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface));
}

@media (max-width: 820px) {
  .dashboard-redesign.owner-console-page .owner-playtest-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== Handouts · printable reference channel ===== */
.handout-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.handout-toolbar-note {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.handout-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.handout-card {
  padding: 22px;
}
.handout-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.handout-card-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.handout-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 13px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, var(--border));
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.handout-download-btn:hover {
  background: color-mix(in srgb, var(--accent-blue) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
}
.handout-download-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.handout-collapse-tools .handout-card-tools {
  gap: 6px;
}
.handout-card-title {
  margin: 0 0 3px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.handout-card-sub {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted);
}
.handout-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 13px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.handout-print-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.handout-print-btn svg,
#handouts-print-all svg {
  width: 16px;
  height: 16px;
}
#handouts-print-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Packages */
.handout-card--pricing .handout-card-sub {
  max-width: 36em;
}
.handout-pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.handout-pkg {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 10px;
  box-shadow: none;
}
.handout-pkg--entry {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.handout-pkg-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.handout-pkg-tier {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.handout-pkg--entry .handout-pkg-tier {
  color: var(--accent);
}
.handout-pkg-price {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}
.handout-pkg-monthly {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}
.handout-pkg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.handout-pkg-item {
  position: relative;
  padding-left: 12px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.handout-pkg-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 55%, var(--muted));
  transform: translateY(-50%);
}
.handout-pkg-item--includes {
  font-weight: 600;
  color: var(--muted);
}
.handout-pkg-item--includes::before {
  width: 5px;
  height: 5px;
  background: color-mix(in srgb, var(--accent-blue) 45%, var(--muted));
}

/* Call flow */
.handout-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.handout-flow-step {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
}
.handout-flow-step:last-child {
  padding-bottom: 0;
}
.handout-flow-step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.handout-flow-step:last-child::before {
  display: none;
}
.handout-flow-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  z-index: 1;
}
.handout-flow-body {
  padding-top: 4px;
}
.handout-flow-title {
  margin: 0 0 3px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}
.handout-flow-detail {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}
.handout-flow-branch {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 7px 10px;
}

/* Modern step-by-step diagram (Daily workflow) */
.handout-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.handout-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 16px;
  padding: 0 0 24px;
}
.handout-step:last-child {
  padding-bottom: 0;
}
/* Vertical connector line through the circle centers */
.handout-step::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 42px;
  bottom: -4px;
  width: 2px;
  background: color-mix(in srgb, var(--border) 90%, transparent);
}
.handout-step:last-child::before {
  display: none;
}
.handout-step-marker {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.handout-step-num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.handout-step-body {
  padding-top: 5px;
  min-width: 0;
}
.handout-step-title {
  margin: 0 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
}
.handout-step-part {
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--text);
}
.handout-step-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
.handout-step-detail {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}
.handout-step-ask {
  margin: 12px 0 2px;
  padding: 13px 15px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 12px;
}
.handout-step-ask-head {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.handout-step-ask-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ask;
  display: grid;
  gap: 9px;
}
.handout-step-ask-list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 650;
  color: var(--text);
  counter-increment: ask;
}
.handout-step-ask-list li::before {
  content: counter(ask);
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 50%;
}

/* Objections */
.handout-obj-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.handout-obj {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.handout-obj-q {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.handout-obj-a {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Cheat sheet · key facts */
.handout-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.handout-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.handout-fact-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.handout-fact-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

/* Do's & Don'ts */
.handout-dd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.handout-dd {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.handout-dd-head {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.handout-dd--do .handout-dd-head {
  color: var(--green, #16a34a);
}
.handout-dd--dont .handout-dd-head {
  color: var(--red, #dc2626);
}
.handout-dd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.handout-dd-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text);
}
.handout-dd-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}
.handout-dd--do .handout-dd-list li::before {
  content: "\2713";
  color: var(--green, #16a34a);
}
.handout-dd--dont .handout-dd-list li::before {
  content: "\2715";
  color: var(--red, #dc2626);
}

/* Lead qualification checklist */
.handout-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.handout-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.handout-check-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 2px solid var(--accent);
  border-radius: 5px;
  background: var(--surface);
}
.handout-check-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text);
}

/* Branch flow (condition -> action) */
.handout-branch-flow,
.handout-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.handout-branch {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) auto minmax(0, 2fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.handout-branch--good {
  border-left-color: var(--green, #16a34a);
}
.handout-branch--bad {
  border-left-color: var(--red, #dc2626);
}
.handout-branch-when {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.handout-branch-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 6px;
}
.handout-branch-then {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Package picker */
.handout-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.handout-pick-when {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text);
}
.handout-pick-badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 12px;
  min-width: 72px;
  background: var(--accent);
  border-radius: 10px;
  color: #fff;
}
.handout-pick-price {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.1;
}
.handout-pick-tier {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}
@media (max-width: 560px) {
  .handout-branch,
  .handout-pick {
    grid-template-columns: 1fr;
  }
  .handout-branch .handout-branch-arrow,
  .handout-pick .handout-branch-arrow {
    display: none;
  }
}

.handout-pick-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft, var(--accent)) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}
.handout-pick-note-ico {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
  color: var(--accent);
}
.handout-pick-note-ico svg {
  width: 18px;
  height: 18px;
}
.handout-pick-note strong {
  font-weight: 700;
}

/* Earnings / commission bar graph */
.handout-earn {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.handout-earn-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 12px;
}
.handout-earn-label {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.handout-earn-price {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.handout-earn-tier {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.handout-earn-track {
  background: color-mix(in srgb, var(--border) 45%, var(--surface));
  border-radius: 999px;
  overflow: hidden;
}
.handout-earn-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 54px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 78%, #000 0%) 0%,
    var(--accent) 100%
  );
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.handout-earn-val {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.handout-earn-foot {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Owner contact card */
.handout-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.handout-contact-list > li {
  display: flex;
  min-width: 0;
}
.handout-contact-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text) !important;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
}
.handout-contact-btn,
.handout-contact-btn:hover,
.handout-contact-btn:focus,
.handout-contact-btn:focus-visible,
.handout-contact-btn * {
  text-decoration: none !important;
}
.handout-contact-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent);
  transform: translateY(-1px);
}
.handout-contact-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft, var(--accent)) 55%, transparent);
}
.handout-contact-btn--static {
  cursor: default;
}
.handout-contact-btn--static:hover {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
  transform: none;
}
.handout-contact-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  transition: color 0.15s ease, background 0.15s ease;
}
.handout-contact-btn:hover .handout-contact-ico {
  color: #fff;
  background: var(--accent);
}
.handout-contact-btn--static:hover .handout-contact-ico {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.handout-contact-ico svg {
  width: 17px;
  height: 17px;
}
.handout-contact-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.handout-contact-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.handout-contact-val {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Printable daily call log */
.handout-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 14px;
}
.handout-log-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.handout-log-line {
  display: inline-block;
  width: 120px;
  border-bottom: 1.5px solid var(--border);
}
.handout-log-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.handout-log-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}
.handout-log-stat-num {
  width: 100%;
  height: 26px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border));
}
.handout-log-stat-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.handout-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.handout-log-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1.5px solid var(--border);
}
.handout-log-table td {
  height: 30px;
  padding: 4px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.handout-log-num {
  width: 34px;
  color: var(--muted);
  font-weight: 700;
}
.handout-log-result {
  width: 28%;
}
@media (max-width: 560px) {
  .handout-log-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Collapsible help guide */
.handout-collapse-head {
  cursor: pointer;
  user-select: none;
}
.handout-collapse-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.handout-collapse-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.handout-collapse-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.handout-collapse-chevron svg {
  width: 18px;
  height: 18px;
}
.handout-collapse.is-open .handout-collapse-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.handout-collapse-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.handout-help-loading {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.handout-doc-content {
  max-height: 460px;
  overflow-y: auto;
  padding-right: 6px;
}
.handout-doc-content h2 {
  margin: 18px 0 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.handout-doc-content h2:first-child {
  margin-top: 0;
}
.handout-doc-content p {
  margin: 0 0 10px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}
.handout-doc-content strong {
  color: var(--text);
  font-weight: 700;
}
.handout-doc-content a {
  color: var(--accent);
}
/* Call scripts inside a collapsible handout */
.handout-script {
  padding: 12px 14px;
  margin: 0 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.handout-script-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
}
.handout-script-label {
  margin: 10px 0 3px !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent) !important;
}
.handout-script-line {
  margin: 0 0 6px !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
}
.handout-script-line em {
  color: var(--muted);
}

/* Print · show only the handouts content, clean for paper */
@media print {
  body[data-page="handouts"] #shell,
  body[data-page="handouts"] .handout-toolbar,
  body[data-page="handouts"] .handout-print-btn,
  body[data-page="handouts"] .top-actions-float,
  body[data-page="handouts"] .sign-out-float,
  body[data-page="handouts"] .refresh-float,
  body[data-page="handouts"] .site-fab,
  body[data-page="handouts"] .nav-mobile-bar {
    display: none !important;
  }
  body[data-page="handouts"],
  body[data-page="handouts"] #main-content,
  body[data-page="handouts"] #page-body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    display: block !important;
  }
  /* One column so cards print full-width and nothing is squeezed off */
  body[data-page="handouts"] .handout-grid {
    display: block !important;
  }
  body[data-page="handouts"] .handout-pkg-grid,
  body[data-page="handouts"] .handout-obj-list,
  body[data-page="handouts"] .handout-dd-grid {
    grid-template-columns: 1fr !important;
  }
  body[data-page="handouts"] .handout-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    margin: 0 0 16px !important;
    /* Allow tall cards to flow across pages instead of clipping */
    break-inside: auto;
    page-break-inside: auto;
  }
  /* Keep individual rows/items from splitting mid-item */
  body[data-page="handouts"] .handout-step,
  body[data-page="handouts"] .handout-pkg,
  body[data-page="handouts"] .handout-obj,
  body[data-page="handouts"] .handout-branch,
  body[data-page="handouts"] .handout-pick,
  body[data-page="handouts"] .handout-check-item,
  body[data-page="handouts"] .handout-dd,
  body[data-page="handouts"] .handout-earn-row,
  body[data-page="handouts"] .handout-contact-btn,
  body[data-page="handouts"] .handout-log-table tr,
  body[data-page="handouts"] .handout-card-head {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Help guide: print in full, no scroll clipping or chevron */
  body[data-page="handouts"] .handout-collapse-body {
    display: block !important;
  }
  body[data-page="handouts"] .handout-doc-content {
    max-height: none !important;
    overflow: visible !important;
  }
  body[data-page="handouts"] .handout-collapse-chevron {
    display: none !important;
  }
  body[data-page="handouts"] .handout-doc-content h2 {
    break-after: avoid;
    page-break-after: avoid;
  }
  body[data-page="handouts"] .handout-script {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* When printing a single card, show only that card and drop the page chrome */
  body[data-page="handouts"].handout-print-single .handout-card:not(.is-print-target) {
    display: none !important;
  }
  body[data-page="handouts"].handout-print-single #page-body > h1,
  body[data-page="handouts"].handout-print-single #page-body > .lead {
    display: none !important;
  }
  body[data-page="handouts"].handout-print-single .is-print-target {
    margin: 0 !important;
  }
}

/* ===== Install / Add to Home Screen hint (all devices) ===== */
.ios-install-banner {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 99995;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: min(320px, calc(100vw - 56px));
  max-width: calc(100vw - 56px);
  margin: 0;
  padding: 10px 8px 10px 10px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  box-shadow:
    0 12px 32px -12px rgba(15, 23, 42, 0.28),
    0 2px 8px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translate(-50%, 18px);
  pointer-events: none;
  transition:
    opacity 0.34s ease-out,
    transform 0.34s ease-out;
}
.ios-install-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.ios-install-banner.is-leaving {
  opacity: 0;
  transform: translate(-50%, 22px);
  pointer-events: none;
}
html[data-theme="dark"] .ios-install-banner {
  background: color-mix(in srgb, var(--surface-elevated, #1c1c1e) 94%, #fff 6%);
  color: var(--text, #f8fafc);
  border-color: color-mix(in srgb, var(--border, #334155) 80%, transparent);
  box-shadow:
    0 14px 34px -12px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.22);
}
.ios-install-banner--installable {
  cursor: pointer;
}
.ios-install-banner-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: none;
  overflow: hidden;
  display: block;
}
html[data-theme="dark"] .ios-install-banner-icon {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}
.ios-install-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2px;
  font-size: 12px;
  line-height: 1.3;
}
.ios-install-banner-text strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ios-install-banner-text span {
  color: #64748b;
}
html[data-theme="dark"] .ios-install-banner-text span {
  color: var(--muted, #94a3b8);
}
.ios-install-banner-text em {
  font-style: normal;
  font-weight: 650;
  color: #0f172a;
}
html[data-theme="dark"] .ios-install-banner-text em {
  color: var(--text, #f8fafc);
}
.ios-install-banner-share {
  display: inline-flex;
  vertical-align: -3px;
}
.ios-install-banner-share svg {
  width: 14px;
  height: 14px;
  color: #2563eb;
}
.ios-install-banner-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #94a3b8;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out;
}
.ios-install-banner-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #64748b;
}
html[data-theme="dark"] .ios-install-banner-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted, #94a3b8);
}

@media (max-width: 380px) {
  .ios-install-banner {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    gap: 8px;
    padding: 9px 6px 9px 9px;
  }
  .ios-install-banner-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 9px;
  }
  .ios-install-banner-text strong {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ios-install-banner {
    transition: opacity 0.12s linear;
    transform: translate(-50%, 0);
  }
  .ios-install-banner.is-leaving {
    transform: translate(-50%, 0);
  }
}

/* Center dashboard (home only) in the main content column beside the sidebar */
body[data-page="home"] .main,
body[data-page="home"] #main-content.main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body[data-page="home"] .main > #page-body.dashboard-redesign {
  width: min(100%, 1100px) !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box;
}

body[data-page="home"] .main > #page-body.dashboard-redesign > h1,
body[data-page="home"] .main > #page-body.dashboard-redesign > .lead {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

/* Override earlier left-aligned dash-header so the tracker sits centered in the panel */
body[data-page="home"] #page-body.dashboard-redesign .dash-header {
  align-items: center !important;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

body[data-page="home"] #page-body.dashboard-redesign .dash-tracker-stack {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin-inline: auto !important;
}

/* Fallback: #page-body still under body (before shell mount) - fill column, center kids */
body[data-page="home"] > #page-body.dashboard-redesign {
  margin-left: var(--sidebar) !important;
  margin-right: 0 !important;
  width: calc(100% - var(--sidebar)) !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box;
}

body[data-page="home"] > #page-body.dashboard-redesign > h1,
body[data-page="home"] > #page-body.dashboard-redesign > .lead,
body[data-page="home"] > #page-body.dashboard-redesign > .dash-header {
  width: min(100%, 1100px);
  max-width: 1100px;
  margin-inline: auto;
}

body[data-page="sales-console"] .main,
body[data-page="my-clients"] .main {
  align-items: stretch;
}

body[data-page="my-clients"] .main > #page-body.dashboard-redesign.owner-clients-page,
body[data-page="sales-console"] .main > #page-body.dashboard-redesign.owner-console-page {
  width: 100% !important;
  max-width: 1080px !important;
  margin-inline: auto !important;
  display: block !important;
  align-items: unset !important;
  align-self: stretch !important;
}

.dashboard-redesign.owner-clients-page .owner-clients-page-head {
  width: 100%;
}

/* Sidebar - matches active theme (light swatches = light panel; dark/black = dark panel) */
html[data-theme="light"] .sidebar-panel {
  background: var(--surface) !important;
  border-right-color: var(--border) !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-theme="dark"] .sidebar-panel,
html[data-ui-color="black"] .sidebar-panel {
  background: #000000 !important;
  border-right-color: #1f1f1f !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-theme="light"] .sidebar-panel .brand:hover {
  background: color-mix(in srgb, var(--accent-soft) 65%, transparent) !important;
}

html[data-theme="dark"] .sidebar-panel .brand:hover,
html[data-ui-color="black"] .sidebar-panel .brand:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] .sidebar-panel .brand-text strong {
  color: var(--text) !important;
}

html[data-theme="dark"] .sidebar-panel .brand-text strong,
html[data-ui-color="black"] .sidebar-panel .brand-text strong {
  color: #ffffff !important;
}

html[data-theme="light"] .sidebar-panel .brand-sub,
html[data-theme="light"] .sidebar-panel .sidebar-rep-meta {
  color: var(--muted) !important;
}

html[data-theme="dark"] .sidebar-panel .brand-sub,
html[data-theme="dark"] .sidebar-panel .sidebar-rep-meta,
html[data-ui-color="black"] .sidebar-panel .brand-sub,
html[data-ui-color="black"] .sidebar-panel .sidebar-rep-meta {
  color: #9ca3af !important;
}

html[data-theme="light"] .sidebar-panel .sidebar-rep {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .sidebar-panel .sidebar-rep,
html[data-ui-color="black"] .sidebar-panel .sidebar-rep {
  background: #111111 !important;
  border-color: #262626 !important;
}

html[data-theme="light"] .sidebar-panel .sidebar-rep strong {
  color: var(--text) !important;
}

html[data-theme="dark"] .sidebar-panel .sidebar-rep strong,
html[data-ui-color="black"] .sidebar-panel .sidebar-rep strong {
  color: #f3f4f6 !important;
}

html[data-theme="light"] .sidebar-panel .nav-group > .nav-list,
html[data-theme="light"] .sidebar-panel .nav-group-home > .nav-list {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sidebar-panel .nav-group > .nav-list,
html[data-theme="dark"] .sidebar-panel .nav-group-home > .nav-list,
html[data-ui-color="black"] .sidebar-panel .nav-group > .nav-list,
html[data-ui-color="black"] .sidebar-panel .nav-group-home > .nav-list {
  background: #111111 !important;
  border: 1px solid #222222 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .sidebar-panel .nav-section-label,
html[data-theme="light"] .sidebar-panel .nav-section-toggle,
html[data-theme="light"] .sidebar-panel .nav-section-chev,
html[data-theme="light"] .sidebar-panel .nav-section-chev .ico-nav-chev {
  color: var(--muted) !important;
}

html[data-theme="dark"] .sidebar-panel .nav-section-label,
html[data-theme="dark"] .sidebar-panel .nav-section-toggle,
html[data-theme="dark"] .sidebar-panel .nav-section-chev,
html[data-theme="dark"] .sidebar-panel .nav-section-chev .ico-nav-chev,
html[data-ui-color="black"] .sidebar-panel .nav-section-label,
html[data-ui-color="black"] .sidebar-panel .nav-section-toggle,
html[data-ui-color="black"] .sidebar-panel .nav-section-chev,
html[data-ui-color="black"] .sidebar-panel .nav-section-chev .ico-nav-chev {
  color: #9ca3af !important;
}

html[data-theme="light"] .sidebar-panel .ico-nav-section,
html[data-theme="light"] .sidebar-panel .ico-nav,
html[data-theme="light"] .sidebar-panel .nav-link .ico-inline,
html[data-theme="light"] .sidebar-panel .nav-link-trail,
html[data-theme="light"] .sidebar-panel .nav-link-out .ico-nav-trail {
  color: var(--muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .sidebar-panel .ico-nav-section,
html[data-theme="dark"] .sidebar-panel .ico-nav,
html[data-theme="dark"] .sidebar-panel .nav-link .ico-inline,
html[data-theme="dark"] .sidebar-panel .nav-link-trail,
html[data-theme="dark"] .sidebar-panel .nav-link-out .ico-nav-trail,
html[data-ui-color="black"] .sidebar-panel .ico-nav-section,
html[data-ui-color="black"] .sidebar-panel .ico-nav,
html[data-ui-color="black"] .sidebar-panel .nav-link .ico-inline,
html[data-ui-color="black"] .sidebar-panel .nav-link-trail,
html[data-ui-color="black"] .sidebar-panel .nav-link-out .ico-nav-trail {
  color: #d1d5db !important;
  opacity: 1 !important;
}

html[data-theme="light"] .sidebar-panel .nav-link,
html[data-theme="light"] .sidebar-panel .nav-link-text {
  color: var(--text) !important;
  font-weight: 650;
}

html[data-theme="dark"] .sidebar-panel .nav-link,
html[data-theme="dark"] .sidebar-panel .nav-link-text,
html[data-ui-color="black"] .sidebar-panel .nav-link,
html[data-ui-color="black"] .sidebar-panel .nav-link-text {
  color: #f3f4f6 !important;
  font-weight: 650;
}

html[data-theme="light"] .sidebar-panel .nav-link:hover,
html[data-theme="light"] .sidebar-panel .nav-link:hover .nav-link-text {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--accent-soft) 30%) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .sidebar-panel .nav-link:hover,
html[data-theme="dark"] .sidebar-panel .nav-link:hover .nav-link-text,
html[data-ui-color="black"] .sidebar-panel .nav-link:hover,
html[data-ui-color="black"] .sidebar-panel .nav-link:hover .nav-link-text {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

html[data-theme="light"] .sidebar-panel .nav-link:hover .ico-nav {
  color: var(--text) !important;
}

html[data-theme="dark"] .sidebar-panel .nav-link:hover .ico-nav,
html[data-ui-color="black"] .sidebar-panel .nav-link:hover .ico-nav {
  color: #ffffff !important;
}

html[data-theme="light"] .sidebar-panel .nav-link.active,
html[data-theme="light"] .sidebar-panel .nav-link.active .nav-link-text {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sidebar-panel .nav-link.active,
html[data-theme="dark"] .sidebar-panel .nav-link.active .nav-link-text,
html[data-ui-color="black"] .sidebar-panel .nav-link.active,
html[data-ui-color="black"] .sidebar-panel .nav-link.active .nav-link-text {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="light"] .sidebar-panel .nav-link.active .ico-nav,
html[data-theme="light"] .sidebar-panel .nav-link.active .nav-link-text {
  color: var(--accent) !important;
}

html[data-theme="dark"] .sidebar-panel .nav-link.active .ico-nav,
html[data-theme="dark"] .sidebar-panel .nav-link.active .nav-link-text,
html[data-ui-color="black"] .sidebar-panel .nav-link.active .ico-nav,
html[data-ui-color="black"] .sidebar-panel .nav-link.active .nav-link-text {
  color: #ffffff !important;
}

html[data-theme="light"] .sidebar-panel .nav-link-important:not(.active),
html[data-theme="light"] .sidebar-panel .nav-link-important:not(.active) .nav-link-text {
  color: var(--accent-blue) !important;
}

html[data-theme="dark"] .sidebar-panel .nav-link-important:not(.active),
html[data-theme="dark"] .sidebar-panel .nav-link-important:not(.active) .nav-link-text,
html[data-ui-color="black"] .sidebar-panel .nav-link-important:not(.active),
html[data-ui-color="black"] .sidebar-panel .nav-link-important:not(.active) .nav-link-text {
  color: #93c5fd !important;
}

html[data-theme="light"] .sidebar-panel .nav-link .step-badge,
html[data-theme="light"] .sidebar-panel .nav-link.active .step-badge {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .sidebar-panel .nav-link .step-badge,
html[data-theme="dark"] .sidebar-panel .nav-link.active .step-badge,
html[data-ui-color="black"] .sidebar-panel .nav-link .step-badge,
html[data-ui-color="black"] .sidebar-panel .nav-link.active .step-badge {
  background: #262626 !important;
  border: 1px solid #404040 !important;
  color: #f9fafb !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .sidebar-panel .nav-link.active .step-badge {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--btn-primary-fg) !important;
}

html[data-theme="dark"] .sidebar-panel .nav-link.active .step-badge,
html[data-ui-color="black"] .sidebar-panel .nav-link.active .step-badge {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #111111 !important;
}

html[data-theme="light"] .sidebar-panel .nav-link-count,
html[data-theme="light"] .sidebar-panel .nav-link-pct {
  color: var(--muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .sidebar-panel .nav-link-count,
html[data-theme="dark"] .sidebar-panel .nav-link-pct,
html[data-ui-color="black"] .sidebar-panel .nav-link-count,
html[data-ui-color="black"] .sidebar-panel .nav-link-pct {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .sidebar-panel .nav-link--leads.active .nav-link-count {
  color: #ffffff !important;
  opacity: 0.95 !important;
}

html[data-theme="dark"] .sidebar-panel .nav-link--leads.active .nav-link-count,
html[data-ui-color="black"] .sidebar-panel .nav-link--leads.active .nav-link-count {
  color: #ffffff !important;
  opacity: 0.92 !important;
}

html[data-theme="light"] .sidebar-panel .sidebar-legal,
html[data-theme="light"] .sidebar-panel .sidebar-legal-link {
  color: var(--muted) !important;
}

html[data-theme="light"] .sidebar-panel .sidebar-legal-link:hover,
html[data-theme="light"] .sidebar-panel .sidebar-legal-link.active {
  color: var(--text) !important;
}

html[data-theme="dark"] .sidebar-panel .sidebar-legal,
html[data-theme="dark"] .sidebar-panel .sidebar-legal-link,
html[data-ui-color="black"] .sidebar-panel .sidebar-legal,
html[data-ui-color="black"] .sidebar-panel .sidebar-legal-link {
  color: #6b7280 !important;
}

html[data-theme="dark"] .sidebar-panel .sidebar-legal-link:hover,
html[data-theme="dark"] .sidebar-panel .sidebar-legal-link.active,
html[data-ui-color="black"] .sidebar-panel .sidebar-legal-link:hover,
html[data-ui-color="black"] .sidebar-panel .sidebar-legal-link.active {
  color: #d1d5db !important;
}

html[data-theme="light"] .sidebar .menu-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

html[data-theme="light"] .sidebar .menu-btn:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .sidebar .menu-btn,
html[data-ui-color="black"] .sidebar .menu-btn {
  background: #111111 !important;
  border-color: #333333 !important;
  color: #e5e7eb !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sidebar .menu-btn:hover,
html[data-ui-color="black"] .sidebar .menu-btn:hover {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

/* Theme swatch contrast - main content uses palette tokens */
html[data-ui-color] body,
html[data-ui-color] .main,
html[data-ui-color] #page-body {
  color: var(--text);
}

html[data-ui-color] .muted,
html[data-ui-color] .section-desc,
html[data-ui-color] .dash-empty-desc,
html[data-ui-color] .lead,
html[data-ui-color] .faq-qa-muted,
html[data-ui-color] .owner-console-sent-sub {
  color: var(--muted);
}

html[data-ui-color] h1,
html[data-ui-color] h2,
html[data-ui-color] h3,
html[data-ui-color] .dash-page-hero h1,
html[data-ui-color] .page-hero h1,
html[data-ui-color] .card h2,
html[data-ui-color] .card h3,
html[data-ui-color] .tool-card h2,
html[data-ui-color] .settings-card h2 {
  color: var(--text);
}

html[data-ui-color] .card,
html[data-ui-color] .tool-card,
html[data-ui-color] .settings-card,
html[data-ui-color] .dash-page-hero,
html[data-ui-color] .leads-toolbar,
html[data-ui-color] .owner-card,
html[data-ui-color] .contributors-card {
  color: var(--text);
}

html[data-ui-color] input,
html[data-ui-color] textarea,
html[data-ui-color] select,
html[data-ui-color] .ui-select-trigger,
html[data-ui-color] .ui-select-label {
  color: var(--text);
}

html[data-ui-color] input::placeholder,
html[data-ui-color] textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}

html[data-ui-color] .nav-link-count,
html[data-ui-color] .nav-link-pct,
html[data-ui-color] .dash-stat-chip .dash-tracker-stat-lbl,
html[data-ui-color] .lf-card-meta,
html[data-ui-color] .lf-card-sub {
  color: var(--muted);
}

/* Black swatch: keep accent chips readable on dark surfaces */
html[data-ui-color="black"] .page-label,
html[data-ui-color="black"] .pill.is-active,
html[data-ui-color="black"] .settings-segment button.is-active {
  color: var(--text);
}

html[data-ui-color="black"] a.link-bold-blue,
html[data-ui-color="black"] #page-body p a[href]:not(.btn):not(.link-card) {
  color: #93c5fd;
}

html[data-ui-color="black"] a.link-bold-blue:hover,
html[data-ui-color="black"] #page-body p a[href]:not(.btn):not(.link-card):hover {
  color: #bfdbfe;
}

/* ===== Mobile polish · layout fit on small screens ===== */

@media (max-width: 1100px) {
  .dashboard-redesign.owner-console-page .owner-console-team-totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-redesign.owner-console-page .owner-console-team-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-redesign.owner-console-page .owner-console-team-head .dash-sales-history-heading,
  .dashboard-redesign.owner-console-page .owner-console-team-overview-head .dash-sales-history-heading,
  .dashboard-redesign.owner-console-page .owner-console-inbox-head-row .dash-sales-history-heading {
    white-space: normal;
  }

  .dashboard-redesign.owner-console-page .owner-console-export-label {
    font-size: 10px;
  }

  .dashboard-redesign.owner-console-page .owner-console-export-btn {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 11px;
  }

  .dashboard-redesign.owner-console-page .owner-console-team-total dt,
  .dashboard-redesign.owner-console-page .owner-console-team-total-sub {
    font-size: 0.72rem;
  }
}

@media (max-width: 640px) {
  .dashboard-redesign .dash-goal-panel-body {
    grid-template-columns: 1fr !important;
  }

  .dashboard-redesign .dash-top-row {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .dashboard-redesign .dash-page-hero h1 {
    font-size: clamp(1.65rem, 7.5vw, 2.25rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
  }

  .dashboard-redesign .dash-page-lead {
    font-size: 14px;
    line-height: 1.55;
  }

  .dashboard-redesign .dash-income-action {
    width: 100%;
    white-space: normal;
    text-align: center;
    justify-self: stretch;
  }

  .dashboard-redesign .dash-goal-btn,
  .dashboard-redesign .dash-goal-edit {
    font-size: clamp(18px, 5vw, 26px);
    min-height: 46px;
  }

  .dashboard-redesign .dash-goal-ring-pct {
    font-size: clamp(36px, 12vw, 52px);
  }

  .dashboard-redesign .dash-board,
  .dashboard-redesign .dash-action-dock {
    width: 100%;
    max-width: 100%;
    border-radius: 22px;
  }

  .dashboard-redesign .dash-pending-island-card.dash-pending-island {
    padding: 0;
  }

  .dashboard-redesign .dash-board-performance,
  .dashboard-redesign .dash-board-work {
    padding: 14px 12px;
  }

  .course-topics-bar {
    flex-wrap: nowrap;
    align-items: center;
    padding: 5px 8px;
    gap: 6px;
    margin-top: 8px;
  }

  .course-topics-label {
    flex: 0 0 auto;
    margin-bottom: 0;
    font-size: 9px;
    letter-spacing: 0.05em;
  }

  .course-panel-toolbar {
    flex: 1 1 auto;
    min-width: 0;
    gap: 5px;
  }

  .course-panel-tag {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 10px;
  }

  .course-panel-toolbar::-webkit-scrollbar {
    height: 3px;
  }

  .course-module-nav {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
  }

  .course-module-prev,
  .course-module-next {
    min-width: 0;
    flex: 1 1 calc(50% - 4px);
    font-size: 13px;
    padding-inline: 12px;
  }

  .scripts-custom-section,
  .scripts-outreach-section {
    padding: 16px;
  }

  .acc-q {
    padding: 12px 14px;
    font-size: 13px;
    align-items: flex-start;
  }

  .acc-a-inner {
    padding: 0 14px 14px;
    font-size: 13px;
  }

  body[data-page="scripts"] .acc-q {
    padding: 11px 14px;
    font-size: 13px;
    align-items: center;
  }

  body[data-page="scripts"] .acc.open .acc-a-inner {
    padding: 10px 12px 14px;
  }

  body[data-page="scripts"] .script-block {
    padding: 8px 10px;
    margin-bottom: 6px;
  }

  body[data-page="scripts"] .script-block-layout {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
  }

  body[data-page="scripts"] .script-step-num {
    font-size: 8px;
  }

  body[data-page="scripts"] .script-step-title {
    font-size: 11px;
    margin-bottom: 5px;
  }

  body[data-page="scripts"] .script-prompt {
    font-size: 13px;
    padding: 7px 9px;
  }

  body[data-page="scripts"] .script-body {
    font-size: 12px;
    padding: 7px 9px;
  }

  body[data-page="scripts"] .script-path-btn {
    font-size: 10px;
    padding: 5px 9px;
  }

  body[data-page="scripts"] #scripts-editor {
    gap: 8px;
  }

  body[data-page="scripts"] #scripts-editor > .scripts-list-divider {
    margin: 18px 0 12px;
  }

  .script-block {
    padding: 12px 14px;
    font-size: 13px;
  }

  .dashboard-redesign.owner-console-page .owner-playtest-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-redesign.owner-console-page .owner-playtest-reset-btn,
  .dashboard-redesign.owner-console-page .owner-playtest-seed-btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  .dashboard-redesign.owner-console-page .owner-playtest-segment-opt span {
    font-size: 12px;
    padding: 8px 10px;
  }

  .dashboard-redesign.owner-console-page .owner-console-sent-row {
    gap: 10px;
  }

  body.legal-standalone-mode .legal-page-toolbar {
    flex-wrap: nowrap;
    border-radius: 16px;
    gap: 6px;
    padding: 6px 8px 6px 6px;
  }

  .legal-page-back-label {
    display: none;
  }

  .legal-page-back {
    padding: 8px 10px;
    flex-shrink: 0;
  }

  .legal-page-nav {
    flex: 1 1 0;
    min-width: 0;
  }

  .legal-page-segment {
    flex-wrap: nowrap;
  }

  .legal-page-nav-btn {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .dashboard-redesign .dash-action-dock .dash-quicklink .ico,
  .dashboard-redesign .dash-action-dock .dash-quicklink svg {
    width: 22px;
    height: 22px;
  }

  .dashboard-redesign .dash-action-dock .dash-quicklink-active .ico,
  .dashboard-redesign .dash-action-dock .dash-quicklink-active svg {
    width: 20px;
    height: 20px;
    padding: 6px;
  }

  body[data-page="about"] .owner-contributors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Business Finder · professional cards (lf-pro) ===== */
.leads-page .leads-grid {
  /* min(100%, 300px) prevents tracks wider than the viewport on small phones */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.leads-page .lead-card.lf-pro {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: visible;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  background: var(--surface-elevated);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.leads-page .lead-card.lf-pro:hover {
  border-color: color-mix(in srgb, var(--border) 70%, var(--accent));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 6%, transparent);
  transform: none;
}

.leads-page .lead-card.lf-pro.lead-card--complete {
  border-left: 3px solid #16a34a;
}

.leads-page .lead-card.lf-pro.lead-card--pending {
  border-left: 3px solid #d97706;
}

.leads-page .lead-card.lf-pro.lead-card--saved {
  border-left: 3px solid #e11d48;
}

.leads-page .lead-card.lf-pro.lead-card--not-interested {
  opacity: 0.7;
}

.leads-page .lf-pro-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.leads-page .lf-pro-head .lf-card-identity {
  gap: 11px;
  min-width: 0;
}

.leads-page .lf-pro-head .lf-avatar {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 12px;
}

.leads-page .lf-pro-head .lead-card-name {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}

.leads-page .lf-pro-category {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}

.leads-page .lf-pro-category--error {
  color: #dc2626;
}

.leads-page .lf-pro-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.leads-page .lf-pro-head .lf-card-head-actions {
  gap: 4px;
  align-items: flex-start;
}

.leads-page .lf-card-mark-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.leads-page .lf-pro-head .lf-mark-btn,
.leads-page .lf-pro-head .lf-menu-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 85%, var(--text));
}

.leads-page .lf-pro-head .lf-mark-quick-prompt:hover {
  color: color-mix(in srgb, var(--accent-blue, #2563eb) 70%, var(--text));
}

.leads-page .lf-pro-head .lf-mark-quick-prompt.is-busy,
.leads-page .lf-pro-head .lf-mark-quick-prompt:disabled {
  opacity: 0.55;
  cursor: wait;
}

.leads-page .lf-pro-head .lf-mark-btn:hover,
.leads-page .lf-pro-head .lf-menu-btn:hover,
.leads-page .lf-pro-head .lf-card-menu-wrap.is-open .lf-menu-btn {
  background: color-mix(in srgb, var(--surface-2) 80%, var(--surface));
  color: var(--text);
}

.leads-page .lf-pro-head .lf-mark-save.is-on {
  color: #e11d48;
}

.leads-page .lf-pro-head .lf-status-chip {
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  background: var(--surface-2);
}

.leads-page .lf-pro-details {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(120px, 0.85fr);
  gap: 0 8px;
  padding: 6px 6px 8px;
  overflow: visible;
  align-items: start;
}

.leads-page .lf-pro-details-main,
.leads-page .lf-pro-details-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.leads-page .lf-pro-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 4px 8px;
  text-decoration: none;
  color: inherit;
  border: none;
  border-radius: 8px;
  position: relative;
}

.leads-page .lf-pro-row.has-tip {
  cursor: help;
}

.leads-page .lf-pro-row.has-tip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -2px;
}

.leads-page .lf-pro-row--open .lf-pro-row-text {
  color: #16a34a;
  font-weight: 650;
}

.leads-page .lf-pro-row--closed .lf-pro-row-text {
  color: #dc2626;
  font-weight: 650;
}

.leads-page .lf-pro-row--hours:hover,
.leads-page .lf-pro-row--hours:focus-within {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.leads-page .lf-pro-tip {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 8px);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
}

.leads-page .lf-pro-row.has-tip:hover .lf-pro-tip,
.leads-page .lf-pro-row.has-tip:focus-within .lf-pro-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: none;
}

.leads-page .lf-pro-tip--schedule {
  min-width: 200px;
  max-width: min(280px, 72vw);
  left: 50%;
  right: auto;
  transform: translate(-50%, 6px);
}

.leads-page .lf-pro-row.has-tip:hover .lf-pro-tip--schedule,
.leads-page .lf-pro-row.has-tip:focus-within .lf-pro-tip--schedule {
  transform: translate(-50%, 0);
}

.leads-page .lf-pro-tip-inner {
  display: block;
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--surface-elevated);
  box-shadow:
    0 4px 6px color-mix(in srgb, var(--text) 5%, transparent),
    0 16px 32px color-mix(in srgb, var(--text) 10%, transparent);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
  color: color-mix(in srgb, var(--text) 90%, var(--muted));
}

.leads-page .lf-pro-tip-p {
  display: block;
  margin: 0 0 6px;
}

.leads-page .lf-pro-tip-p:last-child {
  margin-bottom: 0;
}

.leads-page .lf-pro-category {
  position: relative;
}

.leads-page .lf-pro-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--muted) 75%, var(--text));
}

.leads-page .lf-pro-ico {
  width: 14px;
  height: 14px;
}

.leads-page .lf-pro-row-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--text) 92%, var(--muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leads-page .lf-pro-row.is-empty .lf-pro-row-text {
  color: var(--muted);
  font-style: italic;
  font-weight: 450;
}

.leads-page .lf-pro-row.is-link .lf-pro-row-text {
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  font-weight: 550;
}

.leads-page .lf-pro-row.is-link:hover .lf-pro-row-text {
  text-decoration: underline;
}

.leads-page .lf-pro-row.is-wrap .lf-pro-row-text {
  white-space: normal;
}

.leads-page .lf-pro-details--error {
  padding: 12px 14px;
}

.leads-page .lf-pro-details--error .lf-format-error-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.leads-page .lf-pro-foot {
  padding: 12px 14px 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2) 30%, transparent);
}

.leads-page .lf-pro-foot .lf-action-builder--full {
  width: 100%;
}

.leads-page .lead-card.lf-pro.lead-card--format-error {
  opacity: 0.75;
  pointer-events: none;
}

@media (max-width: 640px) {
  body[data-page="leads"] #page-body,
  .leads-page {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .leads-page .leads-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .leads-page .lead-card.lf-pro {
    border-radius: 12px;
  }

  .leads-page .lf-pro-head {
    padding: 12px 12px 10px;
    gap: 8px;
  }

  .leads-page .lf-pro-head .lf-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 11px;
  }

  .leads-page .lf-pro-head .lead-card-name {
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .leads-page .lf-pro-category {
    font-size: 11px;
  }

  /* Keep desktop 2-column details layout, just tighter for phones */
  .leads-page .lf-pro-details {
    grid-template-columns: minmax(0, 1.45fr) minmax(88px, 0.7fr);
    gap: 0 4px;
    padding: 4px 4px 6px;
    align-items: start;
  }

  .leads-page .lf-pro-details-side {
    display: flex;
    flex-direction: column;
  }

  .leads-page .lf-pro-row {
    gap: 8px;
    min-height: 30px;
    padding: 3px 6px;
  }

  .leads-page .lf-pro-row-icon {
    width: 14px;
  }

  .leads-page .lf-pro-ico {
    width: 12px;
    height: 12px;
  }

  .leads-page .lf-pro-row-text {
    font-size: 12px;
    letter-spacing: -0.015em;
  }

  .leads-page .lf-pro-details-side .lf-pro-row-text {
    font-size: 12px;
  }

  .leads-page .lf-pro-foot {
    padding: 10px 12px 12px;
  }

  .leads-page .lf-pro-foot .lf-action-builder--full {
    min-height: 40px;
    font-size: 13px;
  }

  .leads-page .lf-pro-tip--schedule {
    max-width: min(240px, calc(100vw - 40px));
  }
}

@media (max-width: 380px) {
  .leads-page .lf-pro-details {
    grid-template-columns: minmax(0, 1.5fr) minmax(76px, 0.65fr);
    gap: 0 2px;
    padding: 2px 2px 4px;
  }

  .leads-page .lf-pro-row {
    gap: 6px;
    min-height: 28px;
    padding: 2px 5px;
  }

  .leads-page .lf-pro-row-text {
    font-size: 11.5px;
  }

  .leads-page .lf-pro-head {
    padding: 10px 10px 8px;
  }

  .leads-page .lf-pro-foot {
    padding: 8px 10px 10px;
  }
}

/* -- Sliding multi-way segment switches -- */
.seg-switch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.seg-switch-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  box-sizing: border-box;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transform: translate(0, 0);
  will-change: transform, width, height;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

.seg-switch.is-ready > .seg-switch-indicator {
  opacity: 1;
}

.seg-switch[data-seg-tone="surface"] > .seg-switch-indicator {
  background: var(--surface);
  border: none;
  box-shadow: none;
}

.seg-switch[data-seg-tone="primary"] > .seg-switch-indicator {
  background: var(--btn-primary-bg);
  border: none;
  box-shadow: none;
}

.seg-switch > .owner-console-filter,
.seg-switch > .owner-playtest-segment-opt,
.seg-switch > .lf-toggle-btn,
.seg-switch > .owner-console-rep-toggle,
.seg-switch > .settings-segment-btn {
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.28s ease;
}

/* No hover/active flash or brightness lift on segment options */
.seg-switch > .owner-console-filter:hover,
.seg-switch > .owner-console-filter:active,
.seg-switch > .lf-toggle-btn:hover,
.seg-switch > .lf-toggle-btn:active,
.seg-switch > .owner-console-rep-toggle:hover,
.seg-switch > .owner-console-rep-toggle:active,
.seg-switch > .settings-segment-btn:hover,
.seg-switch > .settings-segment-btn:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.seg-switch > .lf-toggle-btn:hover:not(.active),
.seg-switch > .owner-console-filter:hover:not(.is-active),
.seg-switch > .owner-console-rep-toggle:hover:not(.is-active),
.seg-switch > .settings-segment-btn:hover:not(.active) {
  color: var(--text);
  background: transparent !important;
}

.seg-switch > .owner-playtest-segment-opt:hover > span,
.seg-switch > .owner-playtest-segment-opt:active > span {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.dashboard-redesign.owner-console-page .owner-console-filters.seg-switch,
.dashboard-redesign.owner-console-page .owner-console-rep-toggles.seg-switch,
.lf-website-toggle.seg-switch,
.lf-advanced-pills.seg-switch,
.settings-segment.seg-switch {
  overflow: hidden;
  isolation: isolate;
}

.dashboard-redesign.owner-console-page .owner-console-rep-toggles.seg-switch {
  position: relative;
}

.dashboard-redesign.owner-console-page .owner-console-rep-segment .owner-console-rep-toggles.seg-switch > .seg-switch-indicator {
  border-radius: 8px;
}

/* When the sliding indicator is ready, drop static active backgrounds */
.seg-switch.is-ready > .owner-console-filter.is-active,
.seg-switch.is-ready > .owner-console-rep-toggle.is-active,
.seg-switch.is-ready > .settings-segment-btn.active,
.seg-switch.is-ready > .lf-toggle-btn.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.seg-switch.is-ready > .owner-playtest-segment-opt.is-active > span {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.seg-switch.is-ready[data-seg-tone="primary"] > .lf-toggle-btn.active {
  color: var(--btn-primary-fg) !important;
}

.seg-switch.is-ready[data-seg-tone="surface"] > .lf-toggle-btn.active {
  color: var(--text) !important;
}

.lf-website-toggle.seg-switch,
.lf-advanced-pills.seg-switch {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html[data-theme="dark"] .seg-switch[data-seg-tone="surface"] > .seg-switch-indicator {
  background: color-mix(in srgb, var(--surface) 92%, var(--text));
  border: none;
  box-shadow: none;
}

html[data-theme="dark"] .seg-switch[data-seg-tone="primary"] > .seg-switch-indicator {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .seg-switch-indicator {
    transition: none;
  }
}