:root {
  --fx-bg-1: #f7f1e7;
  --fx-bg-2: #f2ede5;
  --fx-surface: #fffdfa;
  --fx-surface-soft: #f7f1e7;
  --fx-ink: #191309;
  --fx-muted: #6f6152;
  --fx-faint: #7a6b5c;
  --fx-primary: #ea580c;
  --fx-primary-dark: #c2410c;
  --fx-accent-soft: #fff1e4;
  --fx-accent-ink: #9a3412;
  --fx-trust: #2563eb;
  --fx-success: #0f9d6b;
  --fx-success-soft: #e7f7f0;
  --fx-danger: #dc2626;
  --fx-warning: #b45309;
  --fx-warning-soft: #fef3e2;
  --fx-card-border: #f0e6d8;
  --fx-line: #ede3d3;
  --fx-shadow-sm: 0 2px 4px rgba(90, 58, 24, .04);
  --fx-shadow: 0 2px 4px rgba(90, 58, 24, .04), 0 16px 34px -24px rgba(90, 58, 24, .26);
  --fx-shadow-lg: 0 3px 6px rgba(90, 58, 24, .05), 0 26px 56px -30px rgba(90, 58, 24, .34);
  --fx-glow: 0 10px 26px -10px rgba(234, 88, 12, .62);
  --fx-radius: 20px;
  --fx-radius-card: 24px;
  --fx-radius-pill: 999px;
  --fx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Dark theme: night blue, the same family as the public website. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fx-bg-1: #0a0f1d;
  --fx-bg-2: #0f1628;
  --fx-surface: #151d33;
  --fx-surface-soft: #1c263f;
  --fx-ink: #f5f1ea;
  --fx-muted: #b7bfd0;
  --fx-faint: #9aa4b9;
  --fx-primary: #e8743b;
  --fx-primary-dark: #d4652f;
  --fx-accent-soft: #2e2230;
  --fx-accent-ink: #f0a47c;
  --fx-trust: #7aa7f5;
  --fx-success: #5cc49a;
  --fx-success-soft: #1f3a2f;
  --fx-danger: #f07a6f;
  --fx-warning: #e0b25c;
  --fx-warning-soft: #3a3122;
  --fx-card-border: #26324f;
  --fx-line: #1f2a44;
  --fx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --fx-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .3);
  --fx-shadow-lg: 0 3px 6px rgba(0, 0, 0, .35), 0 26px 56px -24px rgba(0, 0, 0, .5);
  --fx-glow: 0 10px 26px -12px rgba(232, 116, 59, .45);
}

:root[data-theme="dark"] .table {
  --bs-table-striped-bg: var(--fx-bg-2);
  --bs-table-color: var(--fx-ink);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] input {
  background: var(--fx-bg-2) !important;
  color: var(--fx-ink) !important;
  border-color: var(--fx-card-border) !important;
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
  background: var(--fx-bg-1) !important;
}

/* Dark theme: components whose base rules below hard-code light colours. */
:root[data-theme="dark"] .app-nav { background: rgba(10, 15, 29, .9) !important; }
:root[data-theme="dark"] .app-nav .navbar-collapse { background: var(--fx-surface); }
:root[data-theme="dark"] .navbar .nav-link:hover,
:root[data-theme="dark"] .navbar .nav-link:focus-visible,
:root[data-theme="dark"] .navbar .nav-link.active,
:root[data-theme="dark"] .nav-user-chip { background: var(--fx-surface-soft); }
:root[data-theme="dark"] .logout-link:hover { background: var(--fx-surface-soft) !important; }
:root[data-theme="dark"] body:not(.fx-ws) .fx-rail { background: var(--fx-bg-2); }
/* The logo's navy lettering disappears on charcoal: invert lightness, keep the orange hue. */
:root[data-theme="dark"] .brand-logo { filter: invert(1) hue-rotate(180deg) saturate(1.3); }
:root[data-theme="dark"] .fx-bottom-nav {
  background: rgba(15, 22, 40, .96);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .card-soft:hover,
:root[data-theme="dark"] .stat-tile:hover,
:root[data-theme="dark"] .fx-lang-select:hover,
:root[data-theme="dark"] .empty-state { border-color: #33415f; }
:root[data-theme="dark"] .table tbody tr:hover { background: var(--fx-surface-soft) !important; }
:root[data-theme="dark"] label,
:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] .alert,
:root[data-theme="dark"] .fx-month-row,
:root[data-theme="dark"] .fx-checklist-label { color: var(--fx-ink); }
:root[data-theme="dark"] .btn-outline-primary {
  --bs-btn-border-color: #6b4a36;
  --bs-btn-hover-border-color: #8a5a3e;
  --bs-btn-active-bg: var(--fx-accent-soft);
  --bs-btn-active-border-color: #8a5a3e;
  --bs-btn-disabled-color: #7d6a5c;
  --bs-btn-disabled-border-color: #4a3f37;
}
:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--fx-ink);
  --bs-btn-border-color: #33415f;
  --bs-btn-hover-color: var(--fx-ink);
  --bs-btn-hover-bg: var(--fx-surface-soft);
  --bs-btn-hover-border-color: #5c5a54;
}
:root[data-theme="dark"] .btn-outline-danger {
  --bs-btn-border-color: #6e3a36;
  --bs-btn-hover-bg: #3a2624;
  --bs-btn-hover-border-color: #8a4640;
  --bs-btn-hover-color: var(--fx-danger);
}
:root[data-theme="dark"] .fx-inline-banner-warm { border-color: #5a3f2e; }
:root[data-theme="dark"] .fx-inline-banner-danger { background: linear-gradient(120deg, #3a2624, var(--fx-surface)); border-color: #6e3a36; }
:root[data-theme="dark"] .alert-success { background: var(--fx-success-soft); border-color: #2f5a47; color: var(--fx-success); }
:root[data-theme="dark"] .alert-warning { background: var(--fx-warning-soft); border-color: #5a4a2e; color: var(--fx-warning); }
:root[data-theme="dark"] .alert-danger { background: #3a2624; border-color: #6e3a36; color: var(--fx-danger); }
:root[data-theme="dark"] .fx-verified-chip { color: var(--fx-success); border-color: #2f5a47; }
:root[data-theme="dark"] .nav-role-badge.role-pro { color: var(--fx-success); }
:root[data-theme="dark"] .fx-pro-avatar { border-color: var(--fx-accent-soft); }
:root[data-theme="dark"] .fx-earnings-bar-track { background: var(--fx-surface-soft); }
:root[data-theme="dark"] .fx-rail-newchat:hover,
:root[data-theme="dark"] .fx-rail-newchat:focus-visible { border-color: #6b4a36; }
:root[data-theme="dark"] .fx-rail-dot-cancelled { background: #5c5a54; }
:root[data-theme="dark"] .fx-toast { box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
/* Bootstrap utility colours used in templates that don't adapt on their own. */
:root[data-theme="dark"] .badge.text-dark,
:root[data-theme="dark"] .text-dark { color: var(--fx-ink) !important; }
:root[data-theme="dark"] .text-primary { color: #8fb4ff !important; }
:root[data-theme="dark"] .badge.bg-info { background-color: #22304a !important; color: #9dbdf7 !important; }
:root[data-theme="dark"] .hero-image-wrap,
:root[data-theme="dark"] .hero-demo-wrap { border-color: var(--fx-card-border); }
:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="dark"] .btn-outline-dark { color: var(--fx-ink); }

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

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--fx-ink);
  background: var(--fx-bg-1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--fx-primary);
  text-decoration: none;
  text-underline-offset: .2em;
}

a:hover,
a:focus-visible {
  color: var(--fx-primary-dark);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fx-ink);
  letter-spacing: -.015em;
  font-family: "Bricolage Grotesque", "Inter", sans-serif;
}

.fx-display {
  font-family: "Bricolage Grotesque", "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

.app-nav {
  background: rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fx-line) !important;
  box-shadow: none;
}

.app-nav .container {
  max-width: 1240px;
}

.navbar-brand {
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--fx-ink) !important;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.brand-logo {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}

.navbar .nav-link {
  color: var(--fx-muted);
  font-weight: 600;
  border-radius: 10px;
  padding: .45rem .8rem !important;
  transition: color .15s ease, background .15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible,
.navbar .nav-link.active {
  color: var(--fx-ink);
  background: #f4efe7;
}

.logout-link {
  color: var(--fx-muted) !important;
  background: transparent !important;
  border: 0;
  padding: .45rem .8rem !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  font-weight: 600;
  border-radius: 10px;
}

.logout-link:hover {
  color: var(--fx-danger) !important;
  background: #fdf0f0 !important;
}

main.container {
  max-width: 1240px;
}

.fx-page {
  padding-top: 1.6rem;
  padding-bottom: 2.2rem;
}

.fx-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.3rem;
}

.fx-page-kicker {
  margin: 0 0 .45rem;
  color: var(--fx-primary);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 800;
}

.fx-page-title {
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--fx-ink);
}

.fx-page-subtitle {
  margin: .5rem 0 0;
  color: var(--fx-muted);
  max-width: 70ch;
  line-height: 1.6;
}

.fx-section {
  border: 1px solid var(--fx-card-border);
  border-radius: 16px;
  background: var(--fx-surface);
  box-shadow: var(--fx-shadow);
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.fx-auth-shell {
  display: flex;
  justify-content: center;
}

.fx-auth-card {
  width: min(640px, 100%);
}

.card-soft,
.card {
  border: 1px solid var(--fx-card-border);
  border-radius: var(--fx-radius-card, var(--fx-radius));
  box-shadow: var(--fx-shadow);
  background: var(--fx-surface);
  transition: box-shadow .22s var(--fx-ease), border-color .22s var(--fx-ease), transform .22s var(--fx-ease);
}

.card-soft:hover {
  transform: translateY(-5px);
  border-color: #e4d6c0;
  box-shadow: var(--fx-shadow-lg);
}

/* The lift on .card-soft is a cue that a card can be clicked. A sign-in,
   sign-up or review card is a form you type into, not something you click, so
   there it is just movement under the cursor while you are aiming at a field.
   Two classes, so this beats the single-class rules above whatever the order. */
.card-soft.fx-auth-card,
.card-soft.fx-auth-card:hover,
.card-soft.fx-auth-card:active {
  transform: none;
  box-shadow: var(--fx-shadow);
  border-color: var(--fx-card-border);
}

.card-soft:active {
  transform: translateY(-1px) scale(.99);
  transition-duration: .1s;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.section-head h2,
.section-head h3,
.section-head h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fx-ink);
}

.section-head p {
  margin: .2rem 0 0;
  color: var(--fx-muted);
}

.stat-tile {
  border: 1px solid var(--fx-card-border);
  border-radius: var(--fx-radius);
  background: var(--fx-surface);
  padding: 1.05rem;
  height: 100%;
  box-shadow: var(--fx-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--fx-shadow);
  border-color: #d8cfc1;
}

.stat-tile .label {
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fx-muted);
  font-weight: 700;
  margin-bottom: .3rem;
}

.stat-tile .value {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--fx-ink);
  margin: 0;
  line-height: 1.15;
}

.stat-tile .hint {
  margin: .25rem 0 0;
  color: var(--fx-muted);
  font-size: .85rem;
}

.empty-state {
  border: 1px dashed #d5cbbc;
  border-radius: var(--fx-radius);
  background: var(--fx-surface-soft);
  color: var(--fx-muted);
  padding: 1.05rem 1.1rem;
}

.table-wrap {
  border: 1px solid var(--fx-card-border);
  border-radius: var(--fx-radius);
  overflow: hidden;
  background: var(--fx-surface);
}

.table {
  margin-bottom: 0;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: #faf7f2;
}

.table > :not(caption) > * > * {
  border-bottom: 1px solid var(--fx-line);
  padding-top: .75rem;
  padding-bottom: .75rem;
  vertical-align: middle;
}

.table thead th {
  color: var(--fx-muted);
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 700;
  background: var(--fx-surface-soft);
  border-bottom: 1px solid var(--fx-line);
}

.badge {
  border-radius: 999px;
  padding: .4em .7em;
  font-weight: 700;
  letter-spacing: .01em;
}

.fx-segmented {
  display: inline-flex;
  gap: .2rem;
  padding: .22rem;
  border: 1px solid var(--fx-card-border);
  border-radius: 999px;
  background: var(--fx-surface-soft);
  flex-wrap: wrap;
}

.fx-segmented-btn {
  border: 0;
  background: transparent;
  color: var(--fx-muted);
  font-size: .8rem;
  font-weight: 700;
  padding: .4rem .8rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .22s var(--fx-ease), color .22s var(--fx-ease), transform .22s var(--fx-ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fx-segmented-btn:hover,
.fx-segmented-btn:focus-visible {
  color: var(--fx-ink);
}

.fx-segmented-btn:active {
  transform: scale(.96);
  transition-duration: .1s;
}

.fx-segmented-btn.is-active {
  background: var(--fx-surface);
  color: var(--fx-accent-ink);
  box-shadow: var(--fx-shadow-sm);
}

.btn {
  border-radius: 11px;
  font-weight: 600;
  border-width: 1px;
  transition: transform .22s var(--fx-ease), box-shadow .22s var(--fx-ease), background-color .22s var(--fx-ease), border-color .22s var(--fx-ease), color .22s var(--fx-ease);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn-lg:hover,
.btn-lg:focus-visible {
  transform: translateY(-3px);
}

.btn:active {
  transform: scale(.97);
  transition-duration: .1s;
}

.btn-primary {
  --bs-btn-bg: var(--fx-primary);
  --bs-btn-border-color: var(--fx-primary);
  --bs-btn-hover-bg: var(--fx-primary-dark);
  --bs-btn-hover-border-color: var(--fx-primary-dark);
  --bs-btn-active-bg: var(--fx-primary-dark);
  --bs-btn-active-border-color: var(--fx-primary-dark);
  --bs-btn-focus-shadow-rgb: 234,88,12;
  box-shadow: var(--fx-glow);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 14px 32px -10px rgba(234, 88, 12, .72);
}

.btn-outline-primary {
  --bs-btn-disabled-color: #c9a389;
  --bs-btn-disabled-border-color: #ecd9c8;
  --bs-btn-color: var(--fx-primary);
  --bs-btn-border-color: #fdba74;
  --bs-btn-hover-bg: var(--fx-accent-soft);
  --bs-btn-hover-border-color: #fdba74;
  --bs-btn-hover-color: var(--fx-accent-ink);
  --bs-btn-active-bg: #ffedd5;
  --bs-btn-active-border-color: #fdba74;
}

.btn-success {
  --bs-btn-bg: var(--fx-success);
  --bs-btn-border-color: var(--fx-success);
  --bs-btn-hover-bg: #0c875b;
  --bs-btn-hover-border-color: #0c875b;
}

.btn-outline-secondary {
  --bs-btn-color: #544b40;
  --bs-btn-border-color: #d5cbbc;
  --bs-btn-hover-color: var(--fx-ink);
  --bs-btn-hover-bg: #f4efe7;
  --bs-btn-hover-border-color: #c4b8a6;
}

.btn-outline-dark {
  --bs-btn-color: #3f382f;
  --bs-btn-border-color: #d5cbbc;
  --bs-btn-hover-color: var(--fx-ink);
  --bs-btn-hover-bg: #f2ede5;
  --bs-btn-hover-border-color: #c4b8a6;
}

.btn-outline-danger {
  --bs-btn-color: var(--fx-danger);
  --bs-btn-border-color: #f0b9b9;
  --bs-btn-hover-bg: #fdf0f0;
  --bs-btn-hover-border-color: #e89a9a;
  --bs-btn-hover-color: #b91c1c;
}

form p {
  margin-bottom: .9rem;
}

label,
.form-label {
  font-weight: 600;
  color: #3f382f;
  margin-bottom: .35rem;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
  border-radius: 10px !important;
  border-color: #ddd4c6;
  background: #fdfcfa;
  padding: .58rem .8rem;
  box-shadow: none !important;
  color: var(--fx-ink);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--fx-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(234, 88, 12, .18) !important;
  transition: border-color .22s var(--fx-ease), box-shadow .22s var(--fx-ease);
}

.form-check-input {
  border-color: #cfc5b4;
}

.form-check-input:checked {
  background-color: var(--fx-primary);
  border-color: var(--fx-primary);
}

.alert {
  border-radius: 12px;
  border: 1px solid var(--fx-line);
  box-shadow: var(--fx-shadow-sm);
  background: var(--fx-surface);
  color: #3f382f;
}

.fx-inline-banner {
  border-radius: 16px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  border: 1px solid var(--fx-card-border);
}

.fx-inline-banner-warm {
  background: linear-gradient(120deg, var(--fx-accent-soft), var(--fx-surface));
  border-color: #fed7aa;
  color: var(--fx-ink);
}

.fx-inline-banner-danger {
  background: linear-gradient(120deg, #fdecec, var(--fx-surface));
  border-color: #f3c0c0;
  color: var(--fx-ink);
}

.alert-success {
  border-color: #b7e4cf;
  background: var(--fx-success-soft);
  color: #0c6b4a;
}

.alert-warning {
  border-color: #f3d8a8;
  background: var(--fx-warning-soft);
  color: #92500a;
}

.alert-danger {
  border-color: #f3c0c0;
  background: #fdecec;
  color: #b91c1c;
}

.fx-chat-thread {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius);
  background: var(--fx-surface-soft);
  padding: .95rem;
}

.fx-chat-message {
  border-bottom: 1px solid var(--fx-line);
  padding-bottom: .65rem;
  margin-bottom: .65rem;
}

.fx-chat-message:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.fx-chat-meta {
  color: var(--fx-muted);
  font-size: .84rem;
}

.fx-finance-shell {
  background: var(--fx-surface);
  border-radius: 16px;
  border: 1px solid var(--fx-card-border);
  box-shadow: var(--fx-shadow);
}

.fx-finance-panel {
  border: 1px solid var(--fx-card-border);
  border-radius: var(--fx-radius);
  background: var(--fx-surface);
  box-shadow: var(--fx-shadow-sm);
}

.fx-finance-kpi {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--fx-radius);
  padding: 1.05rem;
  color: #fff;
  height: 100%;
  background: linear-gradient(145deg, var(--fx-primary), var(--fx-primary-dark));
}

.fx-finance-kpi::after {
  content: "";
  position: absolute;
  right: -2rem;
  top: -2rem;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  z-index: -1;
}

.fx-finance-kpi h6 {
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: .4rem;
  color: #fff;
}

.fx-finance-kpi p {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.fx-finance-kpi small {
  opacity: .9;
}

.fx-finance-kpi.kpi-alt {
  background: linear-gradient(145deg, #2563eb, #1d4ed8);
}

.fx-finance-kpi.kpi-soft {
  background: linear-gradient(145deg, #0f9d6b, #0c7a54);
}

.fx-finance-kpi.kpi-light {
  background: linear-gradient(145deg, #7c3aed, #6021d1);
}

.fx-earnings-chart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .8rem;
  align-items: end;
  min-height: 230px;
  padding-top: .5rem;
}

.fx-earnings-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}

.fx-earnings-value {
  font-size: .75rem;
  color: var(--fx-muted);
  font-weight: 700;
  min-height: 1.2rem;
}

.fx-earnings-bar-track {
  width: 100%;
  max-width: 38px;
  height: 140px;
  border-radius: 10px;
  background: #f2ede5;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.fx-earnings-bar {
  width: 100%;
  border-radius: 10px;
  background: var(--fx-primary);
  min-height: 6px;
  align-self: flex-end;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: fxGrow .6s var(--fx-ease) forwards;
  animation-delay: calc(var(--fx-bar-index, 0) * 80ms);
}

.fx-earnings-bar.is-current {
  background: linear-gradient(180deg, #fb923c, var(--fx-primary));
  box-shadow: 0 0 0 1px rgba(234, 88, 12, .15);
}

@keyframes fxGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-earnings-bar { animation: none; transform: scaleY(1); }
}

.fx-earnings-month {
  font-size: .8rem;
  font-weight: 700;
  color: var(--fx-muted);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.fx-month-row {
  border-bottom: 1px solid var(--fx-line);
  padding: .44rem 0;
  font-size: .92rem;
  color: #3f382f;
}

.fx-month-row:last-child {
  border-bottom: 0;
}

.app-footer {
  border-top: 1px solid var(--fx-line);
  background: var(--fx-surface);
  margin-top: 2.5rem;
  padding: 1.5rem 0 1.35rem;
}

.app-footer-title {
  margin: 0 0 .35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--fx-ink);
}

.app-footer-copy {
  margin: 0;
  color: var(--fx-muted);
  font-size: .93rem;
  max-width: 56ch;
}

.app-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .5rem .75rem;
  flex-wrap: wrap;
}

.app-footer-links a {
  text-decoration: none;
  font-weight: 600;
  color: var(--fx-muted);
  border-bottom: 1px solid transparent;
}

.app-footer-links a:hover,
.app-footer-links a:focus-visible {
  color: var(--fx-ink);
  border-bottom-color: var(--fx-ink);
}

.app-footer-note {
  margin: .85rem 0 0;
  color: var(--fx-faint);
  font-size: .82rem;
}

@media (max-width: 991px) {
  .brand-logo {
    height: 32px;
  }

  .app-nav .navbar-collapse {
    border: 1px solid var(--fx-line);
    border-radius: 12px;
    margin-top: .6rem;
    padding: .6rem;
    background: #fff;
  }

  .fx-page {
    padding-top: 1.2rem;
  }

  .fx-earnings-chart {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .fx-page-title {
    font-size: 1.6rem;
  }

  .app-footer {
    padding-top: 1.1rem;
  }
}

/* ── Page fade-in ── */
/* Opacity only: a transform here would also make position: fixed children
   (the quote panel) position relative to <main> instead of the window. */
@keyframes fx-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
main.container { animation: fx-fadein .26s ease both; }

/* ── Icon buttons ── */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
}
.btn-icon i { font-size: 1.05em; line-height: 1; }

/* ── Nav icons ── */
.navbar .nav-link i {
  font-size: .95em;
  margin-right: .3rem;
  opacity: .7;
  vertical-align: -.05em;
}
.navbar .nav-link:hover i,
.navbar .nav-link.active i { opacity: 1; }

/* ── User chip in nav ── */
.nav-user-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .7rem .28rem .32rem;
  border-radius: 999px;
  background: #f4efe7;
  border: 1px solid var(--fx-line);
  font-size: .86rem;
  font-weight: 600;
  color: var(--fx-ink);
  white-space: nowrap;
}
.nav-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fx-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── Role badge ── */
.nav-role-badge {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .16em .5em;
  border-radius: 999px;
  background: var(--fx-accent-soft);
  color: var(--fx-accent-ink);
}
.nav-role-badge.role-pro { background: var(--fx-success-soft); color: #0c6b4a; }
.nav-role-badge.role-admin { background: #ede9fe; color: #6d28d9; }

/* ── Better alerts with icons ── */
.alert::before {
  font-family: "bootstrap-icons";
  font-size: 1.1em;
  margin-right: .5rem;
  vertical-align: -.1em;
}
.alert-success::before { content: "\F26A"; color: var(--fx-success); }
.alert-warning::before { content: "\F33A"; color: var(--fx-warning); }
.alert-danger::before  { content: "\F335"; color: var(--fx-danger); }
.alert-info::before    { content: "\F431"; color: var(--fx-trust); }

/* ── Divider label ── */
.fx-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--fx-faint);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 1rem 0;
}
.fx-divider::before,
.fx-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fx-line);
}

.fx-section + .fx-section { margin-top: .85rem; }

/* ── Back link ── */
.fx-back-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--fx-muted);
  text-decoration: none;
  margin-bottom: .75rem;
}
.fx-back-link:hover { color: var(--fx-ink); }
.fx-back-link i { font-size: .9em; }

/* ── Info rows (label + value) ── */
.fx-field-row {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--fx-line);
}
.fx-field-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fx-field-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fx-muted);
}
.fx-field-value {
  font-weight: 600;
  color: var(--fx-ink);
}

/* ── Pro profile avatar ── */
.fx-pro-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fx-primary);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  border: 3px solid #ffedd5;
}

/* ── Step badge ── */
.fx-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fx-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Table row hover ── */
.table tbody tr {
  transition: background .15s ease;
  cursor: default;
}
.table tbody tr:hover {
  background: #faf7f2 !important;
}

/* ── Smooth focus ring ── */
:focus-visible {
  outline: 2px solid var(--fx-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Submit button loading state ── */
.btn[data-loading] {
  pointer-events: none;
  opacity: .75;
}

@keyframes fx-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ── Verified pro chip ── */
.fx-verified-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #0c6b4a;
  background: var(--fx-success-soft);
  border: 1px solid #b7e4cf;
  border-radius: 999px;
  padding: .2em .6em;
  white-space: nowrap;
}

.fx-theme-toggle {
  border: 0;
  font-size: 1.05rem;
  padding: .45rem .6rem !important;
}
.fx-theme-toggle i { margin: 0; }

/* ── Skip link ── */
.fx-skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1300;
  background: var(--fx-primary);
  color: #fff;
  font-weight: 700;
  padding: .6rem 1rem;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top .15s ease;
}
.fx-skip-link:focus {
  top: 0;
  color: #fff;
}
main:focus-visible { outline: none; }

/* ── Nav badge ── */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 .34em;
  margin-left: .38em;
  border-radius: 999px;
  background: var(--fx-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

/* ── Toast notifications ── */
.fx-toast-stack {
  position: fixed;
  top: 76px;
  right: 16px;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: min(380px, calc(100vw - 32px));
}
.fx-toast {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-left: 4px solid var(--fx-trust);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(46, 36, 24, .16);
  padding: .8rem .9rem;
  font-weight: 600;
  color: var(--fx-ink);
  animation: fx-toast-in .28s cubic-bezier(.21, .8, .35, 1) both;
}
.fx-toast-hide {
  transition: opacity .3s ease, transform .3s ease;
  opacity: 0;
  transform: translateX(12px);
}
.fx-toast-icon { font-size: 1.05rem; line-height: 1.5; }
.fx-toast-body { flex: 1; font-size: .93rem; line-height: 1.45; }
.fx-toast-close {
  border: 0;
  background: transparent;
  color: var(--fx-faint);
  padding: .1rem .2rem;
  border-radius: 6px;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
.fx-toast-close:hover { color: var(--fx-ink); background: var(--fx-bg-2); }
.fx-toast-success { border-left-color: var(--fx-success); }
.fx-toast-success .fx-toast-icon { color: var(--fx-success); }
.fx-toast-warning { border-left-color: var(--fx-warning); }
.fx-toast-warning .fx-toast-icon { color: var(--fx-warning); }
.fx-toast-error, .fx-toast-danger { border-left-color: var(--fx-danger); }
.fx-toast-error .fx-toast-icon, .fx-toast-danger .fx-toast-icon { color: var(--fx-danger); }
.fx-toast-info .fx-toast-icon { color: var(--fx-trust); }
@keyframes fx-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-toast { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Translucent surfaces go solid when the user asks for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  html .app-nav,
  html body.nav-scrolled .app-nav {
    background: var(--fx-surface) !important;
    backdrop-filter: none !important;
  }
  .fx-workspace-hero .fx-workspace-metrics { background: var(--fx-surface); }
  .jf-thumb-wrap .jf-photo-count { backdrop-filter: none; background: rgba(30, 20, 10, .88); }
}

/* Higher-contrast tokens and defined edges when the user asks for more contrast. */
@media (prefers-contrast: more) {
  :root {
    --fx-muted: #4a4034;
    --fx-faint: #5c5044;
    --fx-card-border: #b9ab98;
    --fx-line: #b9ab98;
  }
  .card, .card-soft, .fx-section, .stat-tile, .table-wrap, .fx-rail, .fx-segmented {
    border-width: 1.5px;
  }
  .btn-primary { border: 1.5px solid #7c2d12; }
}

/* Apple HIG 44pt minimum hit target, applied where a finger (not a mouse) is the pointer. */
@media (pointer: coarse) {
  .btn, .btn-sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .form-control, .form-select { min-height: 44px; }
  .fx-segmented-btn, .fx-rail-link, .fx-rail-theme-toggle, .fx-lang-select { min-height: 44px; }
  .fx-segmented-btn, .fx-rail-theme-toggle { min-width: 44px; }
}

/* ── Checklist item ── */
.fx-checklist-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--fx-line);
  font-size: .93rem;
}
.fx-checklist-item:last-child { border-bottom: 0; }
.fx-checklist-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .9rem;
}
.fx-checklist-icon.done { background: var(--fx-success-soft); color: var(--fx-success); }
.fx-checklist-icon.missing { background: var(--fx-warning-soft); color: var(--fx-warning); }
.fx-checklist-label { flex: 1; color: #3f382f; font-weight: 600; }
.fx-checklist-action { font-size: .82rem; }

/* ── Mobile bottom nav ── */
.fx-bottom-nav {
  display: none;
}
@media (max-width: 767px) {
  .fx-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--fx-line);
    padding: .3rem .2rem calc(.3rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(46, 36, 24, .08);
  }
  main.fx-page {
    padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
  }
  .fx-toast-stack {
    top: auto;
    bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
    right: 8px;
    left: 8px;
    width: auto;
  }
}
.fx-bottom-link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .5rem 0;
  min-height: 48px;
  color: var(--fx-muted);
  font-size: .68rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  transition: transform .22s var(--fx-ease), color .22s var(--fx-ease);
}
.fx-bottom-link i { font-size: 1.15rem; line-height: 1; }
.fx-bottom-link.active,
.fx-bottom-link:hover,
.fx-bottom-link:focus-visible {
  color: var(--fx-primary);
  text-decoration: none;
}
.fx-bottom-link:active {
  transform: scale(.94);
  transition-duration: .1s;
}

.fx-bottom-dot {
  position: absolute;
  top: .25rem;
  right: calc(50% - 14px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fx-primary);
  border: 1.5px solid var(--fx-surface);
}

/* ── Lightbox ── */
.fx-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(20, 15, 8, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}
.fx-lightbox[hidden] { display: none; }
.fx-lightbox-figure {
  margin: 0;
  max-width: min(920px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.fx-lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.fx-lightbox-figure figcaption {
  color: #f1e9dd;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
}
.fx-lightbox-figure figcaption:empty { display: none; }
.fx-lightbox-close,
.fx-lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .15s ease;
}
.fx-lightbox-close:hover,
.fx-lightbox-nav:hover { background: rgba(255, 255, 255, .22); }
.fx-lightbox-close { top: 1rem; right: 1rem; }
.fx-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.fx-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.fx-lightbox-nav[hidden] { display: none; }
.fx-lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #e7dccb;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
}
@media (max-width: 575px) {
  .fx-lightbox-nav { width: 38px; height: 38px; font-size: 1rem; }
}

/* ── App shell: sticky left rail (desktop, logged-in) ── */
.fx-shell {
  display: flex;
  align-items: flex-start;
}

.fx-rail {
  flex: 0 0 248px;
  width: 248px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.3rem 1rem;
  border-right: 1px solid var(--fx-line);
  background: var(--fx-surface);
}

.fx-rail-brand {
  display: inline-flex;
  align-items: center;
  padding: 0 .3rem;
}

.fx-rail-brand img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.fx-rail-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.fx-rail-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .58rem .75rem;
  border-radius: 12px;
  color: var(--fx-muted);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: transform .22s var(--fx-ease), background-color .22s var(--fx-ease), color .22s var(--fx-ease);
  position: relative;
}

.fx-rail-link i {
  font-size: 1.05rem;
  width: 1.3rem;
  text-align: center;
}

.fx-rail-link:hover,
.fx-rail-link:focus-visible {
  color: var(--fx-ink);
  background: var(--fx-surface-soft);
  transform: translateX(2px);
  text-decoration: none;
}

.fx-rail-link.active {
  color: var(--fx-accent-ink);
  background: var(--fx-accent-soft);
}

.fx-rail-link:active {
  transform: translateX(2px) scale(.98);
  transition-duration: .1s;
}

.fx-rail-badge {
  margin-left: auto;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--fx-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fx-rail-promo {
  margin-top: auto;
  border: 1px solid var(--fx-card-border);
  border-radius: 16px;
  padding: .9rem;
  background: linear-gradient(150deg, var(--fx-accent-soft), var(--fx-surface));
}

.fx-rail-promo-title {
  margin: 0 0 .3rem;
  font-weight: 800;
  font-size: .88rem;
  color: var(--fx-ink);
}

.fx-rail-promo-copy {
  margin: 0 0 .7rem;
  font-size: .8rem;
  color: var(--fx-muted);
  line-height: 1.4;
}

/* ── Homeowner rail: "New chat" button and recent requests (chat-app style) ── */
.fx-rail-newchat {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border: 1px solid var(--fx-card-border);
  border-radius: 12px;
  background: var(--fx-surface-soft);
  color: var(--fx-ink);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: background-color .22s var(--fx-ease), border-color .22s var(--fx-ease), color .22s var(--fx-ease), transform .22s var(--fx-ease);
}

.fx-rail-newchat i {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--fx-primary);
  color: #fff;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fx-rail-newchat:hover,
.fx-rail-newchat:focus-visible {
  background: var(--fx-accent-soft);
  border-color: #fdba74;
  color: var(--fx-accent-ink);
  text-decoration: none;
}

.fx-rail-newchat:active {
  transform: scale(.98);
  transition-duration: .1s;
}

.fx-rail-recents {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.fx-rail-section-label {
  margin: 0 0 .35rem;
  padding: 0 .75rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fx-faint);
}

.fx-rail-recents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .05rem;
}

.fx-rail-recent {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .75rem;
  border-radius: 10px;
  color: var(--fx-muted);
  font-size: .86rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s var(--fx-ease), color .2s var(--fx-ease);
}

.fx-rail-recent:hover,
.fx-rail-recent:focus-visible {
  background: var(--fx-surface-soft);
  color: var(--fx-ink);
  text-decoration: none;
}

.fx-rail-recent-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-rail-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fx-faint);
}
.fx-rail-dot-open { background: var(--fx-primary); }
.fx-rail-dot-booked { background: var(--fx-trust); }
.fx-rail-dot-completed { background: var(--fx-success); }
.fx-rail-dot-cancelled { background: #cfc5b4; }

.fx-rail-empty {
  margin: 0;
  padding: 0 .75rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--fx-faint);
}

@media (pointer: coarse) {
  .fx-rail-newchat, .fx-rail-recent { min-height: 44px; }
}

.fx-rail-footer {
  border-top: 1px solid var(--fx-line);
  padding-top: .9rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.fx-rail-user {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .3rem;
}

.fx-rail-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fx-rail-user-name {
  font-weight: 700;
  font-size: .86rem;
  color: var(--fx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-rail-theme-toggle {
  align-self: flex-start;
  border: 1px solid var(--fx-card-border);
  background: var(--fx-surface-soft);
  color: var(--fx-muted);
  border-radius: 10px;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .22s var(--fx-ease), background-color .22s var(--fx-ease);
}

.fx-rail-theme-toggle:hover {
  color: var(--fx-ink);
  background: var(--fx-accent-soft);
}

.fx-rail-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Language switcher (rail footer, mobile bar, logged-out header) ── */
.fx-lang-code { display: none; }

.fx-lang-switch {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.fx-lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--fx-card-border);
  border-radius: 999px;
  background-color: var(--fx-surface-soft);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f6152' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 10px 6px;
  color: var(--fx-muted);
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.2;
  padding: .42rem 1.7rem .42rem .8rem;
  cursor: pointer;
  transition: color .22s var(--fx-ease), background-color .22s var(--fx-ease), border-color .22s var(--fx-ease);
}

.fx-lang-select:hover {
  color: var(--fx-ink);
  border-color: #e4d6c0;
}

.fx-lang-select:focus-visible {
  outline: 0;
  border-color: var(--fx-primary);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, .18);
}

.navbar .fx-lang-switch {
  margin-right: .35rem;
}

.fx-rail-logout {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
}

.fx-rail-logout:hover {
  color: var(--fx-danger);
  background: var(--fx-warning-soft);
}

.fx-shell-main {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 991px) {
  .fx-rail {
    display: none;
  }

  .fx-shell {
    display: block;
  }
}

/* Admin pages share the normal theme; this strip is the only reminder that actions are live. */
.fx-admin-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .35rem .75rem;
  background: var(--fx-accent-soft);
  color: var(--fx-accent-ink);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Rail links for admin exports sit under a small heading like the recents list. */
.fx-rail-group {
  margin-top: .4rem;
}

/* ── Mobile performance ──────────────────────────────────────────────────
   Blur behind the bars and lift-on-hover effects cost frames on phones and
   do nothing for a finger, so they are desktop-only. */
@media (max-width: 991px) {
  .app-nav,
  body.nav-scrolled .app-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--fx-surface) !important;
  }
  .fx-bottom-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--fx-surface);
  }
  :root[data-theme="dark"] .fx-bottom-nav {
    background: var(--fx-bg-2);
  }
}

@media (hover: none) {
  .card-soft:hover,
  .stat-tile:hover,
  .btn:hover,
  .btn-lg:hover,
  .fx-rail-link:hover,
  .fx-request-card:hover {
    transform: none;
  }
  .card-soft,
  .stat-tile,
  .btn,
  .fx-rail-link,
  .fx-segmented-btn,
  .fx-bottom-link {
    transition-duration: .12s;
  }
}

/* Pager — shared by the job feed, bookings and requests lists.
   Hidden entirely when a list fits on one page, so a quiet site never shows
   pagination furniture it has no use for. */
.fx-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fx-border);
}

.fx-pager-count {
  margin: 0;
  font-size: .82rem;
  color: var(--fx-muted);
}

.fx-pager-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.fx-pager-position {
  font-size: .82rem;
  color: var(--fx-muted);
  padding: 0 .35rem;
}

.fx-pager-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .75rem;
  border: 1px solid var(--fx-border);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--fx-ink);
  text-decoration: none !important;
  background: var(--fx-surface);
  transition: border-color .22s var(--fx-ease), color .22s var(--fx-ease);
}

.fx-pager-link:hover,
.fx-pager-link:focus-visible {
  border-color: var(--fx-accent);
  color: var(--fx-accent-ink);
}

.fx-pager-link.is-disabled {
  opacity: .45;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .fx-pager { justify-content: center; text-align: center; }
  .fx-pager-link { min-height: 44px; }
}

/* "Confirm your email" strip at the top of every page until the link is opened. */
.fx-verify-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  border-radius: 16px;
  padding: .8rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid #fed7aa;
  background: linear-gradient(120deg, var(--fx-accent-soft), var(--fx-surface));
  color: var(--fx-ink);
  font-size: .92rem;
}
.fx-verify-banner > i { color: var(--fx-primary); font-size: 1.15rem; }
.fx-verify-banner > span { flex: 1 1 18rem; }
:root[data-theme="dark"] .fx-verify-banner { border-color: #5a3f2e; }


/* Cookie information note: small, bottom corner, never blocks the page. */
.fx-cookie-note {
  position: fixed; z-index: 1040; left: 16px; right: 16px; bottom: 16px;
  max-width: 26rem; margin-left: auto;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; font-size: .85rem; line-height: 1.4;
  background: var(--fx-surface); color: var(--fx-ink);
  border: 1px solid var(--fx-line); border-radius: 14px; box-shadow: var(--fx-shadow);
}
.fx-cookie-note[hidden] { display: none; }
.fx-cookie-note p { flex: 1; }
.fx-cookie-note .btn { flex-shrink: 0; min-height: 36px; }
@media (max-width: 575.98px) { .fx-cookie-note { bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* Phones: the cookie note sits above the bottom tab bar instead of behind it,
   and filter tabs scroll sideways on one line instead of wrapping inside the pill. */
@media (max-width: 767px) {
  body:has(.fx-bottom-nav) .fx-cookie-note {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .fx-segmented {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fx-segmented::-webkit-scrollbar { display: none; }
}

/* Contrast (WCAG AA, 4.5:1 for small text): the brand orange stays for
   buttons and large type; small badges and inline links use deeper tones. */
.fx-rail-badge { background: var(--fx-primary-dark); }
:root[data-theme="dark"] .fx-rail-badge { background: var(--fx-primary); color: #0a0f1d; }
.app-footer-note a,
.fx-cookie-note a { color: var(--fx-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
:root:not([data-theme="dark"]) .btn-primary.btn-sm {
  --bs-btn-bg: var(--fx-primary-dark);
  --bs-btn-border-color: var(--fx-primary-dark);
  --bs-btn-hover-bg: var(--fx-accent-ink);
  --bs-btn-hover-border-color: var(--fx-accent-ink);
}
:root:not([data-theme="dark"]) .btn-outline-primary { --bs-btn-color: var(--fx-primary-dark); }
:root[data-theme="dark"] .btn-primary {
  --bs-btn-color: #0a0f1d;
  --bs-btn-hover-color: #0a0f1d;
  --bs-btn-active-color: #0a0f1d;
}

/* ══ Liquid glass ════════════════════════════════════════════════════════
   Reusable translucent material. Light glass for chrome over the warm app,
   dark glass for panels on the night stage (landing hero, sign-in pages).
   Every glass surface has a solid fallback when blur is unsupported or the
   visitor asks for less transparency, and text on it stays at AA contrast
   because the tint alone is opaque enough to carry it. */
:root {
  --fx-night-1: #0a0f1d;
  --fx-night-2: #121a2e;
  --fx-night-ink: #f5f1ea;
  --fx-night-muted: #b7bfd0;
  --fx-glass-light-bg: rgba(255, 253, 250, .74);
  --fx-glass-light-border: rgba(255, 255, 255, .7);
  --fx-glass-dark-bg: rgba(22, 30, 52, .6);
  --fx-glass-dark-border: rgba(255, 255, 255, .14);
  --fx-glass-blur: blur(18px) saturate(170%);
  --fx-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .55);
  --fx-glass-highlight-dark: inset 0 1px 0 rgba(255, 255, 255, .12);
}
:root[data-theme="dark"] {
  --fx-glass-light-bg: rgba(21, 29, 51, .74);
  --fx-glass-light-border: rgba(255, 255, 255, .09);
  --fx-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.fx-glass {
  background: var(--fx-glass-light-bg);
  -webkit-backdrop-filter: var(--fx-glass-blur);
  backdrop-filter: var(--fx-glass-blur);
  border: 1px solid var(--fx-glass-light-border);
  box-shadow: var(--fx-glass-highlight), var(--fx-shadow);
}
.fx-glass-dark {
  color: var(--fx-night-ink);
  background: var(--fx-glass-dark-bg);
  -webkit-backdrop-filter: var(--fx-glass-blur);
  backdrop-filter: var(--fx-glass-blur);
  border: 1px solid var(--fx-glass-dark-border);
  box-shadow: var(--fx-glass-highlight-dark), 0 18px 40px -18px rgba(0, 0, 0, .6);
}

/* Glass buttons. The primary keeps its solid orange fill (contrast) and gains
   a glass sheen; the secondary glass buttons are translucent. */
.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--fx-glow);
}
.btn-glass,
.btn-glass-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: var(--fx-radius-pill);
  font-weight: 600;
  padding: .8rem 1.35rem;
  -webkit-backdrop-filter: var(--fx-glass-blur);
  backdrop-filter: var(--fx-glass-blur);
  transition: background .2s var(--fx-ease), border-color .2s var(--fx-ease);
}
.btn-glass {
  color: var(--fx-ink);
  background: var(--fx-glass-light-bg);
  border: 1px solid var(--fx-glass-light-border);
  box-shadow: var(--fx-glass-highlight), var(--fx-shadow-sm);
}
.btn-glass:hover, .btn-glass:focus-visible { color: var(--fx-ink); background: var(--fx-surface); }
.btn-glass-dark {
  color: var(--fx-night-ink);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: var(--fx-glass-highlight-dark);
}
.btn-glass-dark:hover, .btn-glass-dark:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .34);
}
.btn-glass-dark:focus-visible,
.nx-btn-primary:focus-visible { outline: 3px solid #ffc08f; outline-offset: 2px; }

/* Chrome: top nav and bottom tab bar become glass. */
html .app-nav {
  background: var(--fx-glass-light-bg) !important;
  -webkit-backdrop-filter: var(--fx-glass-blur);
  backdrop-filter: var(--fx-glass-blur);
}
:root[data-theme="dark"] .app-nav { background: rgba(10, 15, 29, .74) !important; }
.fx-nav-pill { border-radius: var(--fx-radius-pill) !important; padding-inline: 1rem !important; }
@media (max-width: 767px) {
  html .fx-bottom-nav,
  :root[data-theme="dark"] .fx-bottom-nav {
    background: var(--fx-glass-light-bg);
    -webkit-backdrop-filter: var(--fx-glass-blur);
    backdrop-filter: var(--fx-glass-blur);
    border-top: 1px solid var(--fx-glass-light-border);
    box-shadow: var(--fx-glass-highlight), 0 -8px 24px rgba(46, 36, 24, .08);
  }
}
@media (max-width: 991px) {
  html .app-nav,
  html body.nav-scrolled .app-nav {
    background: var(--fx-glass-light-bg) !important;
    -webkit-backdrop-filter: var(--fx-glass-blur) !important;
    backdrop-filter: var(--fx-glass-blur) !important;
  }
  html .app-nav .navbar-collapse { background: var(--fx-surface); }
}

/* ── Night stage: the dark hero surface shared by the landing page and the
   sign-in pages. Orange glows are plain blurred gradients, no images. */
.nx-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
}
.nx-glow-a {
  width: min(560px, 90vw);
  aspect-ratio: 1;
  right: -10%;
  top: -14%;
  background: radial-gradient(circle, rgba(232, 116, 59, .5), rgba(232, 116, 59, 0) 68%);
}
.nx-glow-b {
  width: min(400px, 70vw);
  aspect-ratio: 1;
  left: -12%;
  bottom: -20%;
  background: radial-gradient(circle, rgba(90, 110, 220, .28), rgba(90, 110, 220, 0) 70%);
}
.nx-title-gradient {
  background: linear-gradient(95deg, #ffc9a1 0%, #f39a62 45%, #ec8047 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nx-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  border-radius: var(--fx-radius-pill);
  padding: .85rem 1.55rem;
  font-weight: 700;
  color: #1c0f06;
  background: linear-gradient(180deg, #f6a06b, #e8743b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 34px -12px rgba(232, 116, 59, .75);
  transition: transform .2s var(--fx-ease), box-shadow .2s var(--fx-ease);
}
.nx-btn-primary:hover,
.nx-btn-primary:focus-visible {
  color: #1c0f06;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 18px 40px -12px rgba(232, 116, 59, .9);
}
.nx-btn-primary:active { transform: scale(.98); }
.nx-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border-radius: 16px;
  font-size: .85rem;
  line-height: 1.25;
  animation: nx-bob 7s ease-in-out infinite;
}
.nx-float strong { font-weight: 700; }
.nx-float-sub { color: var(--fx-night-muted); font-size: .76rem; }
.nx-float-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #ffc08f;
  background: rgba(232, 116, 59, .18);
}
.nx-float-icon.is-ok { color: #7fe0b4; background: rgba(92, 196, 154, .16); }
@keyframes nx-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── Auth pages on the night stage ── */
.fx-auth-night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  border-radius: 32px;
  color: var(--fx-night-ink);
  background:
    radial-gradient(120% 90% at 0% 0%, #1a2440 0%, transparent 60%),
    linear-gradient(160deg, var(--fx-night-2), var(--fx-night-1));
  box-shadow: 0 30px 70px -40px rgba(10, 15, 29, .8);
}
.fx-auth-night > .fx-auth-card,
.fx-auth-night > .fx-auth-card:hover,
.fx-auth-night > .fx-auth-card:active {
  position: relative;
  z-index: 1;
  width: 100%;
  color: var(--fx-ink);
  background: rgba(255, 253, 250, .96);
  -webkit-backdrop-filter: var(--fx-glass-blur);
  backdrop-filter: var(--fx-glass-blur);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 30px 60px -30px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .fx-auth-night > .fx-auth-card {
  background: rgba(48, 48, 46, .96);
  border-color: rgba(255, 255, 255, .1);
}
.fx-auth-aside {
  position: relative;
  z-index: 1;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fx-auth-aside-title {
  font-family: "Bricolage Grotesque", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 0 0 1rem;
}
.fx-auth-aside-title span { display: block; }
.fx-auth-aside-lead { color: var(--fx-night-muted); max-width: 30rem; margin: 0 0 1.6rem; }
.fx-auth-aside-cards { position: relative; display: grid; gap: .7rem; max-width: 330px; }
.fx-auth-aside-cards .nx-float { position: relative; }
.fx-auth-aside-cards .nx-float:nth-child(2) { margin-left: 2.2rem; animation-delay: -2.3s; }
.fx-auth-aside-cards .nx-float:nth-child(3) { margin-left: .8rem; animation-delay: -4.6s; }
@media (max-width: 899.98px) {
  .fx-auth-night { grid-template-columns: minmax(0, 1fr); padding: 1rem; border-radius: 26px; gap: 1rem; }
  .fx-auth-aside { min-height: 0; padding: .6rem .4rem 0; }
  .fx-auth-aside-lead, .fx-auth-aside-cards { display: none; }
  .fx-auth-aside-title { font-size: clamp(1.6rem, 7vw, 2.1rem); margin: 0; }
}
@media (max-width: 575.98px) {
  .fx-auth-night { padding: .6rem; border-radius: 22px; }
  .fx-auth-night > .fx-auth-card { padding: 1.25rem !important; }
}

/* ── Fallbacks and preferences ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fx-glass, .btn-glass, html .app-nav, html .fx-bottom-nav,
  :root[data-theme="dark"] .app-nav { background: var(--fx-surface) !important; }
  .fx-glass-dark, .btn-glass-dark { background: var(--fx-night-2); }
  .fx-auth-night > .fx-auth-card { background: var(--fx-surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .fx-glass, .btn-glass, html .app-nav, html body.nav-scrolled .app-nav, html .fx-bottom-nav,
  :root[data-theme="dark"] .app-nav, :root[data-theme="dark"] .fx-bottom-nav,
  .fx-auth-night > .fx-auth-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--fx-surface) !important;
  }
  .fx-glass-dark, .btn-glass-dark {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--fx-night-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nx-float { animation: none; }
  .nx-btn-primary, .btn-glass, .btn-glass-dark { transition: none; }
  .nx-btn-primary:hover, .nx-btn-primary:active { transform: none; }
}

/* ── Sign-in pages: one night canvas like the home page (no dark box on cream) ── */
body:has(.fx-auth-night) {
  --fx-ink: #f5f1ea;
  --fx-muted: #b7bfd0;
  --fx-line: rgba(255, 255, 255, .1);
  --fx-surface: transparent;
  color: #f5f1ea;
  background:
    radial-gradient(1000px 650px at 80% 120px, rgba(232, 116, 59, .22), transparent 65%),
    radial-gradient(900px 700px at 0% 0%, rgba(59, 90, 170, .22), transparent 65%),
    linear-gradient(180deg, #0a0f1d 0%, #0e1528 60%, #0a0f1d 100%);
  background-attachment: fixed;
}
body:has(.fx-auth-night) .fx-auth-night {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding-left: 0;
  padding-right: 0;
}
/* The form keeps its light card, with its own light tokens. */
body:has(.fx-auth-night) .fx-auth-card {
  --fx-ink: #191309;
  --fx-muted: #5c4d3c;
  --fx-line: #e9e2d7;
  --fx-surface: #fffdfa;
}
body:has(.fx-auth-night) .app-nav {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
body:has(.fx-auth-night) .app-nav .navbar-brand img { filter: invert(1) hue-rotate(180deg) saturate(1.3); }
body:has(.fx-auth-night) .app-nav .nav-link { color: #c3cadb; }
body:has(.fx-auth-night) .app-nav .nav-link:hover,
body:has(.fx-auth-night) .app-nav .nav-link:focus-visible,
body:has(.fx-auth-night) .app-nav .nav-link.active { color: #fff; background: rgba(255, 255, 255, .08); }
body:has(.fx-auth-night) .app-nav .fx-lang-select { color-scheme: dark; color: #f5f1ea; background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
body:has(.fx-auth-night) .app-nav .fx-lang-select option { color: #191309; }
body:has(.fx-auth-night) .app-nav .navbar-toggler { border-color: rgba(255, 255, 255, .25); filter: invert(1); }
@media (max-width: 991.98px) {
  body:has(.fx-auth-night) .app-nav { background: #0a0f1d !important; }
  body:has(.fx-auth-night) .app-nav .navbar-collapse { background: #121a2e; border-color: rgba(255, 255, 255, .12); }
}
body:has(.fx-auth-night) .app-footer { background: transparent; border-top-color: rgba(255, 255, 255, .08); color: #b7bfd0; }
body:has(.fx-auth-night) .app-footer a { color: #d7dcea; }

/* ── Public info pages (help, what's new, legal): night header banner,
   warm light content below, the same combo as the signed-in app. ── */
body:not(.fx-ws) .fx-page-header {
  position: relative;
  padding: 1.4rem 1.6rem;
  border-radius: 22px;
  color: #f5f1ea;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(232, 116, 59, .30), transparent 70%),
    linear-gradient(135deg, #0a0f1d, #16203a);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 44px -26px rgba(10, 15, 29, .9);
}
body:not(.fx-ws) .fx-page-header .fx-page-title,
body:not(.fx-ws) .fx-page-header h1 { color: #f5f1ea; }
body:not(.fx-ws) .fx-page-header .fx-page-subtitle,
body:not(.fx-ws) .fx-page-header p { color: #c3cadb; }
body:not(.fx-ws) .fx-page-header .fx-page-kicker { color: #ffb48a; }
/* The cookie note needs a solid surface on the night sign-in pages. */
body:has(.fx-auth-night) .fx-cookie-note {
  background: #141c31;
  border-color: rgba(255, 255, 255, .14);
  color: #f5f1ea;
}
body:has(.fx-auth-night) .fx-cookie-note a { color: #ffb48a; }
body:has(.fx-auth-night) #fx-cookie-ok {
  color: #f5f1ea;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
}
body:has(.fx-auth-night) #fx-cookie-ok:hover,
body:has(.fx-auth-night) #fx-cookie-ok:focus-visible { color: #fff; background: rgba(255, 255, 255, .16); }

/* ── "Top pro" badge: earned from the record (marketplace/top_pro.py) ── */
.fx-top-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #7c2d12;
  background: linear-gradient(135deg, #ffe2c7, #ffc59a);
  border: 1px solid rgba(232, 116, 59, .45);
  box-shadow: 0 4px 12px -6px rgba(232, 116, 59, .7);
  text-decoration: none;
}
.fx-top-pro-badge:hover, .fx-top-pro-badge:focus-visible { color: #7c2d12; box-shadow: 0 6px 16px -6px rgba(232, 116, 59, .9); }
.fx-top-pro-badge i { color: #c2410c; }
:root[data-theme="dark"] .fx-top-pro-badge { color: #ffd9bd; background: rgba(232, 116, 59, .2); border-color: rgba(255, 180, 138, .45); }
:root[data-theme="dark"] .fx-top-pro-badge i { color: #ffab7a; }
.fx-top-progress { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fx-top-progress li { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; }
.fx-top-progress .is-met { color: var(--fx-success, #1f9d6b); }
.fx-top-progress .is-open { color: var(--fx-muted); }


/* "≈ kr 1 050": a price in the visitor's own currency, for information. */
.fx-approx {
  display: inline-block;
  margin-left: .35rem;
  font-size: .8em;
  font-weight: 500;
  color: var(--fx-muted);
  white-space: nowrap;
  cursor: help;
}


/* ── The small mascot ("buddy") on empty pages and happy moments ── */
.fx-buddy {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--buddy-size, 46px);
  height: var(--buddy-size, 46px);
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.fx-buddy svg { width: 100%; height: 100%; overflow: visible; }
.fx-buddy .fx-mascot-roof { fill: #e8743b; }
.fx-buddy .fx-mascot-body { fill: #fbf7f1; stroke: #e7dccd; stroke-width: 1; }
.fx-buddy .fx-mascot-screen { fill: #1d1a24; filter: drop-shadow(0 0 3px rgba(232, 116, 59, .55)); }
.fx-buddy-eyes circle { fill: #ffb27f; transform-box: fill-box; transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.5, 0, .75, 0); }
.fx-buddy-happy path { stroke: #ffb27f; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.fx-buddy-blush ellipse { fill: #ff8fa3; }
.fx-buddy-torch rect { fill: #4a4550; }
.fx-buddy-beam path { fill: rgba(255, 214, 120, .45); }
.fx-buddy-heart { fill: #ff5d7d; }
.fx-buddy-happy, .fx-buddy-blush, .fx-buddy-torch, .fx-buddy-beam, .fx-buddy-heart { opacity: 0; }
.fx-buddy-body, .fx-buddy-beam, .fx-buddy-heart { transform-box: fill-box; }
.fx-buddy-body { transform-origin: 50% 100%; }

/* Dozing: slits for eyes, opening slowly for a peek. */
.fx-buddy-doze .fx-buddy-eyes circle { transform: scaleY(.12); }
.fx-buddy-doze.peek-l .fx-buddy-eye-l,
.fx-buddy-doze.peek-r .fx-buddy-eye-r,
.fx-buddy-doze.peek-both .fx-buddy-eyes circle { transform: scaleY(1); transition: transform 1s cubic-bezier(.25, .1, .25, 1); }
.fx-buddy-doze .fx-buddy-body { animation: fx-buddy-breathe 3.6s ease-in-out infinite; }
@keyframes fx-buddy-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .97); } }

/* Searching with a flashlight. */
.fx-buddy-search .fx-buddy-torch, .fx-buddy-search .fx-buddy-beam { opacity: 1; }
.fx-buddy-search .fx-buddy-beam { transform-origin: 0% 50%; animation: fx-buddy-sweep 2.6s ease-in-out infinite; }
.fx-buddy-search .fx-buddy-eyes { animation: fx-buddy-scan 2.6s ease-in-out infinite; }
@keyframes fx-buddy-sweep { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes fx-buddy-scan { 0%, 100% { transform: translate(1.5px, -1px); } 50% { transform: translate(1.5px, 1.5px); } }

/* Happy moments. */
.fx-buddy-hop .fx-buddy-body { animation: fx-buddy-hop .55s cubic-bezier(.3, 1.6, .5, 1) 3; }
.fx-buddy-hop .fx-buddy-eyes, .fx-buddy-hearts .fx-buddy-eyes { opacity: 0; }
.fx-buddy-hop .fx-buddy-happy, .fx-buddy-hearts .fx-buddy-happy, .fx-buddy-hearts .fx-buddy-blush { opacity: 1; }
@keyframes fx-buddy-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: scale(1.1, .88); } 60% { transform: translateY(-8px) scale(.95, 1.06); } }
.fx-buddy-hearts .fx-buddy-heart { animation: fx-buddy-heart 1.8s ease-out infinite; }
.fx-buddy-hearts .fx-buddy-heart-2 { animation-delay: .9s; }
.fx-buddy-hearts .fx-buddy-body { animation: fx-buddy-sway 1.8s ease-in-out infinite; }
@keyframes fx-buddy-heart { 0% { opacity: 0; transform: translateY(3px) scale(.5); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px) scale(1.1); } }
@keyframes fx-buddy-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* Tapped. */
.fx-buddy.is-poked .fx-buddy-body { animation: fx-buddy-poke .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes fx-buddy-poke { 0% { transform: scale(1); } 25% { transform: scale(1.15, .8); } 60% { transform: scale(.94, 1.08) rotate(-6deg); } 100% { transform: none; } }

/* Its word bubble. */
.fx-buddy-say {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  width: max-content;
  max-width: 200px;
  padding: .3rem .6rem;
  border-radius: 12px 12px 12px 4px;
  background: #1d1a24;
  color: #fff;
  font: 600 .74rem/1.3 "Inter", sans-serif;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(4px) scale(.9);
  transform-origin: 10% 100%;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 5;
}
.fx-buddy-say.is-shown { opacity: 1; transform: none; }
:root[data-theme="dark"] .fx-buddy-say { background: #f5f1ea; color: #1d1a24; }

/* In the empty-state boxes it takes the place of the icon. */
.px-empty .fx-buddy { --buddy-size: 64px !important; margin: 0 auto .5rem; }
.fx-requests-empty .fx-buddy, .fx-requests-empty-filtered .fx-buddy { --buddy-size: 52px !important; }
.pc-agenda-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; }

@media (prefers-reduced-motion: reduce) {
  .fx-buddy *, .fx-buddy .fx-buddy-body { animation: none !important; transition: none !important; }
}


/* A happy moment: booked, or a review sent. Bottom corner, once, then away. */
.fx-buddy-moment {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: min(360px, calc(100vw - 32px));
  padding: .8rem 2.4rem .8rem .9rem;
  border-radius: 20px;
  background: var(--fx-surface, #fffdfa);
  border: 1px solid var(--fx-card-border, #e9e2d7);
  box-shadow: 0 18px 44px -18px rgba(29, 26, 36, .45);
  animation: fx-moment-in .5s cubic-bezier(.3, 1.4, .5, 1) both;
}
.fx-buddy-moment p { margin: 0; font-size: .88rem; line-height: 1.35; color: var(--fx-ink); }
.fx-buddy-moment .fx-buddy-say { display: none; }
.fx-buddy-moment-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fx-muted);
}
.fx-buddy-moment-close:hover, .fx-buddy-moment-close:focus-visible { background: rgba(60, 40, 20, .08); color: var(--fx-ink); }
.fx-buddy-moment.is-leaving { animation: fx-moment-out .35s ease-in both; }
@keyframes fx-moment-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fx-moment-out { to { opacity: 0; transform: translateY(12px); } }
@media (max-width: 767.98px) {
  /* At the top, under the header: the bottom is where messages appear, and
     the two used to land on top of each other. */
  .fx-buddy-moment { right: 12px; left: 12px; top: calc(68px + env(safe-area-inset-top)); bottom: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-buddy-moment, .fx-buddy-moment.is-leaving { animation: none; }
}


/* Awake with news: bouncing, with a "!". (Pro dashboard banner.) */
.fx-buddy-bang { opacity: 0; fill: #ff9a62; }
.fx-buddy-alert .fx-buddy-bang { opacity: 1; animation: fx-buddy-bang 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.fx-buddy-alert .fx-buddy-body { animation: fx-buddy-hop .6s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: .4s; }
@keyframes fx-buddy-bang { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25) rotate(8deg); } }
/* On the night banner: the word bubble opens downwards, inside the page. */
.px-head-actions .fx-buddy { align-self: center; }
.px-head-actions .fx-buddy-say { bottom: auto; top: calc(100% + 4px); left: auto; right: 0; border-radius: 12px 4px 12px 12px; transform-origin: 90% 0%; }
:root:not([data-theme="dark"]) .px-head-actions .fx-buddy-say { background: #fff; color: #1d1a24; }
@media (max-width: 767.98px) {
  /* No room next to the two buttons on a phone. */
  .px-head-actions .fx-buddy { display: none; }
}

/* ── Phones: smooth first ─────────────────────────────────────────────────
   A blur behind an element is recalculated every frame anything under it
   moves, and the landing page had over twenty (some on floating cards).
   On phones only the top bar keeps its glass; the rest use their tinted
   background as it is. */
@media (max-width: 991.98px) {
  .fx-glass, .fx-glass-dark, .btn-glass, .btn-glass-dark,
  .premium-card, .trust-copy, .for-pros-band, .nx-feature, .nx-float, .nx-eyebrow {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .fx-glass-dark, .btn-glass-dark { background: rgba(22, 30, 52, .82); }

  /* The menu opened by animating its height, which re-lays out the page on
     every frame. It now appears at once and fades in with a small slide,
     which the phone does on the graphics chip. */
  .app-nav .navbar-collapse.collapsing {
    height: auto !important;
    transition: none !important;
  }
  .app-nav .navbar-collapse.show {
    animation: fx-menu-in .18s cubic-bezier(.22, .61, .36, 1);
  }
}
@keyframes fx-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-nav .navbar-collapse.show { animation: none; }
}

/* Pages only scroll up and down. Decorative glows reach past the screen edge
   on purpose; they used to make a phone page slide sideways. "clip" keeps the
   sticky header working, where "hidden" would not; older browsers get hidden. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
html { overscroll-behavior-x: none; }

/* Moving between pages: a short cross-fade instead of a white flash, in the
   browsers that support it (Chrome, Edge, Safari 18+). Others just change page. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Accessibility: a focus ring anyone can see, and links with enough contrast
   on light pages (the bright orange stays for buttons and glows). */
.fx-lang-select:focus-visible {
  outline: 2px solid var(--fx-primary-dark, #c2410c) !important;
  outline-offset: 2px;
}
:root:not([data-theme="dark"]) main :is(p, li, small, .form-text, label, td) > a:not([class]) {
  color: var(--fx-primary-dark, #c2410c);
}

/* Filter pills on phones (every page): one swipeable line that fades at the
   edge, instead of wrapping or being cut off. */
@media (max-width: 767.98px) {
  .px-seg-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    padding-right: 1.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .px-seg-scroll::-webkit-scrollbar { display: none; }
  .px-seg-scroll > * { flex: 0 0 auto; }
}

/* Jumping to the booking chat: clear of the sticky header. */
#chat { scroll-margin-top: 84px; }

/* Buddy: binoculars while waiting for quotes, a ticked checklist on home maintenance */
.fx-buddy-binoculars, .fx-buddy-list { opacity: 0; }
.fx-buddy-bino { fill: #3a3f4d; }
.fx-buddy-bino-bridge { fill: #3a3f4d; }
.fx-buddy-bino-glass { fill: #9fd3ff; }
.fx-buddy-watch .fx-buddy-binoculars { opacity: 1; }
.fx-buddy-watch .fx-buddy-eyes { opacity: 0; }
.fx-buddy-watch .fx-buddy-body { transform-origin: 50% 100%; animation: fx-buddy-scan 3.2s ease-in-out infinite; }
@keyframes fx-buddy-scan { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 65% { transform: rotate(6deg); } }
.fx-buddy-arm { fill: none; stroke: #e7dccd; stroke-width: 2.2; stroke-linecap: round; }
.fx-buddy-hand { fill: #fbf7f1; stroke: #e7dccd; stroke-width: 1; }
.fx-buddy-board { fill: #fffdf9; stroke: #e8743b; stroke-width: 1.2; }
.fx-buddy-clip { fill: #e8743b; }
.fx-buddy-ticks { fill: none; stroke: #1f9d6a; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.fx-buddy-lines { stroke: #c9c1b6; stroke-width: 1; stroke-linecap: round; }
.fx-buddy-checklist .fx-buddy-list { opacity: 1; }
.fx-buddy-checklist .fx-buddy-ticks { stroke-dasharray: 8; stroke-dashoffset: 8; animation: fx-buddy-tick 4s ease-out infinite; }
@keyframes fx-buddy-tick { 10%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
:root[data-theme="dark"] .fx-buddy-bino-glass { fill: #6fb6ff; }
@media (prefers-reduced-motion: reduce) { .fx-buddy-checklist .fx-buddy-ticks { stroke-dashoffset: 0; } }
/* Home maintenance: the buddy with its checklist sits beside the page title, phones included */
.fx-page-header-buddy { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; }
.fx-page-header-buddy > .fx-buddy { flex: none; }
@media (max-width: 575.98px) { .fx-page-header-buddy { gap: .6rem; } .fx-page-header-buddy > .fx-buddy { --buddy-size: 46px !important; } }

/* ── Change password: password rules as a soft checklist ── */
.fx-pw-help ul {
  list-style: none;
  margin: .55rem 0 0;
  padding: .75rem .9rem;
  display: grid;
  gap: .3rem;
  border: 1px solid var(--fx-card-border);
  border-radius: 14px;
  background: var(--fx-surface-soft);
}

.fx-pw-help li {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  color: var(--fx-muted);
}

.fx-pw-help li::before {
  content: "\F26E"; /* bi-check */
  font-family: "bootstrap-icons";
  color: var(--fx-primary);
}

/* ── Pro profile: trade categories as selectable chips ── */
#id_categories {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

#id_categories > div {
  margin: 0;
}

#id_categories label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .45rem .95rem;
  border: 1px solid var(--fx-card-border);
  border-radius: var(--fx-radius-pill);
  background: var(--fx-surface);
  color: var(--fx-ink);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--fx-ease), background-color .2s var(--fx-ease), box-shadow .2s var(--fx-ease);
}

#id_categories label:hover {
  border-color: var(--fx-primary);
}

#id_categories .form-check-input {
  margin: 0;
  border-radius: 50%;
}

#id_categories label:has(:checked) {
  border-color: var(--fx-primary);
  background: var(--fx-accent-soft);
  color: var(--fx-accent-ink);
  box-shadow: var(--fx-glow);
}

#id_categories label:has(:focus-visible) {
  outline: 2px solid var(--fx-primary);
  outline-offset: 2px;
}

/* Sidebar footer (theme, language, account, sign out) always sits at the very
   bottom, also on pages without a recents list (admin) or under the admin strip. */
.fx-rail-footer {
  margin-top: auto;
}

/* Admin strip and footer live in the main column, so the sidebar runs the
   full height from top to bottom. */
.fx-shell-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.fx-shell-main > .app-footer {
  margin-top: auto;
}

.fx-shell-main > .fx-admin-strip {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* Phones have their own sticky top bar, so the strip scrolls away there. */
@media (max-width: 991px) {
  .fx-shell-main > .fx-admin-strip {
    position: static;
  }
}

/* Scrollbars: no track, invisible until something scrolls, then just a thin
   rounded handle that fades out again (scrollbars.js adds .fx-scrolling). */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.fx-scrolling {
  scrollbar-color: color-mix(in srgb, var(--fx-muted) 55%, transparent) transparent;
}

/* ══ Polish pass ══════════════════════════════════════════════════════════ */

/* Smooth page changes: a short cross-fade between pages (Chrome, Edge, Safari). */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .16s;
  animation-timing-function: var(--fx-ease);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* One field style everywhere (same as the job draft panel). */
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
input[type="url"] {
  border-radius: 14px !important;
  border-color: var(--fx-card-border);
  background-color: var(--fx-surface-soft);
  padding: .62rem .85rem;
  transition: border-color .2s var(--fx-ease), box-shadow .2s var(--fx-ease), background-color .2s var(--fx-ease);
}

.form-select {
  padding-right: 2.2rem;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
  background-color: var(--fx-surface);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, .14) !important;
}

.form-control::placeholder,
textarea::placeholder {
  color: var(--fx-faint);
}

/* Field labels as small caps; checkbox and radio labels stay normal text. */
.form-label:not(:has(input)) {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fx-faint);
}

.form-text {
  color: var(--fx-faint);
}

/* Money and counts: even digits, bold amount. */
.amount,
.px-money,
.px-stat-value,
.oc-price-total,
.nx-float-price,
.px-row-amount {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.px-stat-value,
.oc-price-total {
  font-weight: 800;
}

/* Show/hide eye on password fields (added by base.html). */
.fx-pw {
  position: relative;
  display: block;
}
.fx-pw > .form-control {
  padding-right: 3rem;
}
.fx-pw-toggle {
  position: absolute;
  top: 50%;
  right: .35rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a93a6;
  font-size: 1.15rem;
  cursor: pointer;
}
.fx-pw-toggle:hover {
  color: var(--fx-primary, #ea580c);
}
.fx-pw-toggle:focus-visible {
  outline: 2px solid var(--fx-primary, #ea580c);
  outline-offset: 1px;
}