/* ========================================================================== 
   FleetX Design System v3 — unified experience layer
   Public marketplace · live auction · buyer/seller/company/admin workspaces
   Loaded last by the HTML security shell so it can normalize legacy layers.
   ========================================================================== */

:root {
  --fx-ink-950: #07111f;
  --fx-ink-900: #0b1728;
  --fx-ink-850: #102038;
  --fx-ink-800: #172a45;
  --fx-ink-700: #33465f;
  --fx-slate-600: #52637a;
  --fx-slate-500: #718096;
  --fx-slate-300: #cbd5e1;
  --fx-slate-200: #dfe7f0;
  --fx-slate-100: #edf2f7;
  --fx-slate-50: #f7f9fc;
  --fx-white: #fff;
  --fx-green-700: #087f4d;
  --fx-green-600: #0e9f61;
  --fx-green-500: #16bd72;
  --fx-green-400: #36d58c;
  --fx-blue-500: #1488cc;
  --fx-gold-500: #d5a72d;
  --fx-red-500: #e5485d;
  --fx-orange-500: #e89525;
  --fx-purple-500: #8b5cf6;

  --fx-canvas: #f3f6fa;
  --fx-surface: #fff;
  --fx-surface-soft: #f8fafc;
  --fx-line: #dfe7ef;
  --fx-line-strong: #c9d5e3;
  --fx-text: #122033;
  --fx-text-muted: #65748a;

  --fx-radius-sm: 10px;
  --fx-radius-md: 14px;
  --fx-radius-lg: 20px;
  --fx-radius-xl: 28px;
  --fx-radius-pill: 999px;
  --fx-shadow-xs: 0 1px 2px rgba(7, 17, 31, .04);
  --fx-shadow-sm: 0 8px 24px rgba(16, 32, 56, .07);
  --fx-shadow-md: 0 18px 44px rgba(16, 32, 56, .10);
  --fx-shadow-focus: 0 0 0 4px rgba(22, 189, 114, .14);
  --fx-ease: cubic-bezier(.22, 1, .36, 1);
  --fx-fast: 160ms;
  --fx-normal: 280ms;
  --fx-nav-height: 76px;

  /* Normalize names used by earlier FleetX layers. */
  --primary: var(--fx-green-500);
  --primary-hover: var(--fx-green-600);
  --primary-light: rgba(22, 189, 114, .09);
  --primary-border: rgba(22, 189, 114, .30);
  --primary-gradient: linear-gradient(135deg, var(--fx-green-500), #1594ca);
  --bg-light: var(--fx-canvas);
  --bg-white: var(--fx-surface);
  --text-dark: var(--fx-text);
  --text-body: #29384d;
  --text-muted: var(--fx-text-muted);
  --border-light: var(--fx-line);
  --border-medium: var(--fx-line-strong);
}

html { color-scheme: light; background: var(--fx-canvas); }
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(20, 136, 204, .045), transparent 26rem),
    var(--fx-canvas);
  color: var(--fx-text);
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(22, 189, 114, .22); color: var(--fx-ink-950); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fx-green-500) !important;
  outline-offset: 3px !important;
  box-shadow: var(--fx-shadow-focus);
}
:where(button, .btn, [role="button"]):disabled,
:where(button, .btn, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .55;
  transform: none !important;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.navbar {
  min-height: var(--fx-nav-height);
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid rgba(201, 213, 227, .78) !important;
  box-shadow: 0 1px 0 rgba(7, 17, 31, .02) !important;
  backdrop-filter: saturate(145%) blur(18px);
  -webkit-backdrop-filter: saturate(145%) blur(18px);
}
.navbar.scrolled { box-shadow: 0 10px 32px rgba(7, 17, 31, .08) !important; }
.navbar-inner { min-height: var(--fx-nav-height); gap: 24px; }
.navbar-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.navbar-links { gap: 5px !important; }
.navbar-links > li > a {
  position: relative;
  border-radius: var(--fx-radius-sm);
  padding: 10px 12px !important;
  color: #34445b !important;
  font-weight: 800 !important;
}
.navbar-links > li > a:hover { color: var(--fx-green-700) !important; background: rgba(22, 189, 114, .07); }
.navbar-links > li > a.active { color: var(--fx-green-700) !important; background: rgba(22, 189, 114, .10); }
.navbar-links > li > a.active::after {
  content: '';
  position: absolute;
  inset-inline: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--fx-green-500);
}
.navbar-toggle { border-radius: 12px !important; }
.nav-dropdown-menu,
.notif-panel {
  border: 1px solid var(--fx-line) !important;
  border-radius: var(--fx-radius-lg) !important;
  box-shadow: var(--fx-shadow-md) !important;
  overflow: hidden;
}
#mobileMenu { border-top: 1px solid var(--fx-line); box-shadow: var(--fx-shadow-md); }
#mobileMenu a { min-height: 46px; border-radius: var(--fx-radius-sm); }

/* ── Buttons and controls ──────────────────────────────────────────────── */
.btn,
.fx-btn-auth,
.pbb-btn-submit,
.fleet-btn,
.wallet-btn,
.settings-submit,
.btn-action-top {
  min-height: 44px;
  border-radius: 12px !important;
  font-weight: 850 !important;
  letter-spacing: -.01em;
  box-shadow: none !important;
  transition: transform var(--fx-fast) var(--fx-ease), background-color var(--fx-fast), border-color var(--fx-fast), color var(--fx-fast), box-shadow var(--fx-fast) !important;
}
.btn-primary,
.fx-btn-gradient,
.fx-btn-auth,
.pbb-btn-submit--primary {
  color: #03140c !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--fx-green-400), var(--fx-green-500)) !important;
}
.btn-primary:hover,
.fx-btn-gradient:hover,
.fx-btn-auth:hover,
.pbb-btn-submit--primary:hover {
  color: #020d08 !important;
  background: linear-gradient(135deg, #4bdd9a, var(--fx-green-600)) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(14, 159, 97, .20) !important;
}
.btn-secondary,
.btn-outline,
.btn-outline-dark {
  background: var(--fx-white) !important;
  color: var(--fx-ink-800) !important;
  border: 1px solid var(--fx-line-strong) !important;
}
.btn-secondary:hover,
.btn-outline:hover,
.btn-outline-dark:hover {
  color: var(--fx-green-700) !important;
  border-color: rgba(22, 189, 114, .45) !important;
  background: #f4fff9 !important;
}
.btn-danger { border-radius: 12px !important; }
.btn-sm { min-height: 38px; }
.btn-icon { aspect-ratio: 1; padding: 0 !important; display: inline-grid !important; place-items: center; }

/* ── Shared page structure and hero ───────────────────────────────────── */
.container { width: min(100%, 1372px); padding-inline: clamp(16px, 3vw, 28px); }
.fx-page-body { padding-bottom: clamp(56px, 7vw, 96px) !important; }
.fx-page-body--overlap { position: relative; z-index: 4; }
.fx-page-hero {
  isolation: isolate;
  min-height: clamp(280px, 34vw, 430px);
  border-radius: 0 0 clamp(26px, 4vw, 54px) clamp(26px, 4vw, 54px) !important;
  box-shadow: inset 0 -1px rgba(255, 255, 255, .08);
}
.fx-page-hero--compact { min-height: clamp(240px, 28vw, 350px); }
.fx-page-hero__overlay-dark {
  background: linear-gradient(105deg, rgba(5, 14, 26, .97) 5%, rgba(7, 22, 38, .86) 48%, rgba(7, 22, 38, .50) 100%) !important;
}
.fx-page-hero__overlay-fade { background: linear-gradient(to top, rgba(5, 14, 26, .54), transparent 60%) !important; }
.fx-page-hero__content { max-width: 760px; }
.fx-page-hero__eyebrow {
  width: fit-content;
  padding: 7px 12px;
  border: 1px solid rgba(54, 213, 140, .26);
  border-radius: var(--fx-radius-pill);
  background: rgba(22, 189, 114, .10);
  color: #8af0be !important;
  font-weight: 850;
}
.fx-page-hero__title { font-size: clamp(2rem, 4.2vw, 3.55rem) !important; letter-spacing: -.035em; text-wrap: balance; }
.fx-page-hero__desc { max-width: 680px; color: rgba(255, 255, 255, .78) !important; text-wrap: pretty; }
.fx-page-hero__chip {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: var(--fx-radius-pill) !important;
  background: rgba(8, 21, 37, .55) !important;
  color: rgba(255, 255, 255, .90) !important;
  backdrop-filter: blur(10px);
}
.fx-page-hero__chip--accent { border-color: rgba(54, 213, 140, .32) !important; background: rgba(22, 189, 114, .16) !important; color: #a1f5cb !important; }
.fx-back-link { color: rgba(255, 255, 255, .78) !important; }
.fx-back-link:hover { color: #fff !important; transform: translateX(3px); }

/* ── Cards and content surfaces ───────────────────────────────────────── */
:where(.auction-card.fx-card-unified, .event-card, .fx-company-card, .fleet-card,
  .fx-card, .card, .fx-detail-block, .fx-pricing-panel, .pricing-card,
  .activity-card, .bid-card, .report-card, .fx-profile-card, .fx-seller-card,
  .fx-buyer-card, .fx-live-card, .fx-check-card, .settings-section,
  .fx-filter-panel, .fx-search-panel, .admin-card) {
  background: var(--fx-surface) !important;
  border: 1px solid var(--fx-line) !important;
  border-radius: var(--fx-radius-lg) !important;
  box-shadow: var(--fx-shadow-xs) !important;
}
:where(.auction-card.fx-card-unified, .event-card, .fx-company-card, .fleet-card, .fx-card):hover {
  border-color: rgba(22, 189, 114, .42) !important;
  box-shadow: var(--fx-shadow-md) !important;
  transform: translateY(-5px);
}
.auction-card.fx-card-unified { overflow: hidden; height: 100%; }
.auction-card.fx-card-unified .ac-img-wrap { background: #e8eef5; overflow: hidden; }
.auction-card.fx-card-unified .ac-img-wrap img { transition: transform 650ms var(--fx-ease), filter 300ms ease; }
.auction-card.fx-card-unified:hover .ac-img-wrap img { transform: scale(1.045); }
.auction-card.fx-card-unified .ac-body { padding: 18px !important; gap: 13px; }
.auction-card.fx-card-unified .ac-title { color: var(--fx-ink-900) !important; font-size: 17px !important; line-height: 1.5; }
.auction-card.fx-card-unified .ac-meta { color: var(--fx-text-muted) !important; }
.auction-card.fx-card-unified .ac-info-row { padding-top: 13px; border-top: 1px solid var(--fx-slate-100); }
.auction-card.fx-card-unified .ac-price-val { color: var(--fx-ink-950) !important; letter-spacing: -.02em; }
.auction-card.fx-card-unified .ac-actions { margin-top: auto; }
.card-badges-container { gap: 6px !important; }
.badge-item,
.badge,
.status-badge,
.subscription-badge {
  border-radius: var(--fx-radius-pill) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}
.card-fav {
  border: 1px solid rgba(255, 255, 255, .58) !important;
  background: rgba(255, 255, 255, .90) !important;
  backdrop-filter: blur(10px);
  transition: transform var(--fx-fast), background var(--fx-fast), color var(--fx-fast) !important;
}
.card-fav:hover { transform: scale(1.08); background: #fff !important; }

/* ── Forms, filters and checkout ──────────────────────────────────────── */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
  .form-input, .form-control, .fx-form-input, .settings-input, .modal-field) {
  min-height: 48px;
  border: 1px solid var(--fx-line-strong) !important;
  border-radius: 12px !important;
  color: var(--fx-text) !important;
  background-color: #fff !important;
  box-shadow: inset 0 1px 1px rgba(7, 17, 31, .025) !important;
  transition: border-color var(--fx-fast), box-shadow var(--fx-fast), background-color var(--fx-fast) !important;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
  .form-input, .form-control, .fx-form-input, .settings-input, .modal-field):hover {
  border-color: #aebdce !important;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
  .form-input, .form-control, .fx-form-input, .settings-input, .modal-field):focus {
  border-color: var(--fx-green-500) !important;
  box-shadow: var(--fx-shadow-focus) !important;
  outline: none;
}
textarea { min-height: 112px; resize: vertical; }
:where(.form-label, .fx-form-label, .fx-field-label, .settings-label, .modal-label) {
  color: var(--fx-ink-800) !important;
  font-weight: 850 !important;
  margin-bottom: 8px;
}
.fx-form-hint { color: var(--fx-text-muted) !important; line-height: 1.65; }
.fx-filter-panel { padding: 18px !important; }
.fx-filter-panel__head { padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--fx-slate-100); }
.fx-filter-group { padding-block: 15px !important; border-bottom-color: var(--fx-slate-100) !important; }
.fx-seller-form-box,
.fx-bulk-box,
.fx-checkout-main,
.fx-cart-summary { border-radius: var(--fx-radius-xl) !important; border-color: var(--fx-line) !important; box-shadow: var(--fx-shadow-sm) !important; }
.payment-option { border-radius: var(--fx-radius-md) !important; border-color: var(--fx-line) !important; }
.payment-option:hover { border-color: rgba(22, 189, 114, .45) !important; background: #f7fffb !important; }

/* ── Buyer and seller dashboards ─────────────────────────────────────── */
.fx-buyer-layout,
.fx-seller-layout { gap: clamp(18px, 2.4vw, 30px) !important; align-items: start; }
.fx-profile-sidebar--home {
  width: 282px !important;
  border-radius: var(--fx-radius-xl) !important;
  border: 1px solid var(--fx-line) !important;
  background: linear-gradient(180deg, #fff, #fbfcfe) !important;
  box-shadow: var(--fx-shadow-sm) !important;
  overflow: hidden;
}
.fx-buyer-profile,
.fx-seller-profile { background: linear-gradient(145deg, var(--fx-ink-900), var(--fx-ink-800)) !important; color: #fff; }
.fx-buyer-name,
.fx-seller-company-name { color: #fff !important; }
.fx-buyer-avatar,
.fx-seller-avatar,
.fx-profile-avatar { box-shadow: 0 0 0 7px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .18) !important; }
.fx-profile-nav { padding: 10px !important; gap: 3px !important; }
.fx-profile-nav a {
  min-height: 46px;
  border-radius: 11px !important;
  color: #4e6077 !important;
  border-inline-start: 3px solid transparent;
}
.fx-profile-nav a:hover { background: #f0fbf6 !important; color: var(--fx-green-700) !important; }
.fx-profile-nav a.active {
  background: linear-gradient(90deg, rgba(22, 189, 114, .13), rgba(22, 189, 114, .04)) !important;
  color: var(--fx-green-700) !important;
  border-inline-start-color: var(--fx-green-500);
}
.fx-profile-nav a.danger { color: var(--fx-red-500) !important; }
.fx-seller-main,
.fx-buyer-main { min-width: 0; }
.seller-header-bar,
.buyer-header-bar { padding: 18px 20px !important; border-radius: var(--fx-radius-lg) !important; box-shadow: var(--fx-shadow-xs) !important; }
.seller-section-title,
.buyer-title { color: var(--fx-ink-900) !important; letter-spacing: -.02em; }
.stats-grid,
.stat-grid { gap: 15px !important; }
.stat-card,
.fx-stat-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 142px;
  padding: 20px !important;
  border-radius: var(--fx-radius-lg) !important;
  border-color: var(--fx-line) !important;
  background: linear-gradient(145deg, #fff, #fbfdff) !important;
  box-shadow: var(--fx-shadow-xs) !important;
}
.stat-card::before,
.fx-stat-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 20px;
  width: 3px;
  height: 38px;
  border-radius: 4px;
  background: var(--fx-green-500);
}
.stat-card:hover,
.fx-stat-card:hover { border-color: rgba(22, 189, 114, .34) !important; box-shadow: var(--fx-shadow-sm) !important; transform: translateY(-3px); }
.stat-card-icon,
.stat-icon,
.fx-stat-icon { border-radius: 14px !important; }
.stat-card-value,
.stat-value,
.fx-stat-value { color: var(--fx-ink-950) !important; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.stat-card-label,
.stat-label,
.fx-stat-label { color: var(--fx-text-muted) !important; }
.fx-dash-alert { border-radius: var(--fx-radius-md) !important; border-width: 1px !important; box-shadow: var(--fx-shadow-xs); }
.activity-item { border-bottom-color: var(--fx-slate-100) !important; }

/* ── Live auction control room ────────────────────────────────────────── */
.fx-live-room { gap: clamp(18px, 2.5vw, 32px) !important; align-items: start; }
.fx-live-card,
.pbb-board,
.fx-detail-block { border-radius: var(--fx-radius-xl) !important; border: 1px solid var(--fx-line) !important; box-shadow: var(--fx-shadow-sm) !important; overflow: hidden; }
.pbb-board { background: linear-gradient(165deg, var(--fx-ink-950), #10243c) !important; border-color: rgba(255, 255, 255, .10) !important; }
.pbb-top { border-bottom: 1px solid rgba(255, 255, 255, .10) !important; }
.pbb-timer { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.pbb-price-wrap { background: radial-gradient(circle at 50% 0%, rgba(22, 189, 114, .18), transparent 70%) !important; }
.pbb-price-val { font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.pbb-history-container { border-color: rgba(255, 255, 255, .10) !important; }
.pbb-history-list { scrollbar-color: rgba(54, 213, 140, .45) transparent; }
.pbb-btn-quick { border-radius: 11px !important; transition: transform var(--fx-fast), border-color var(--fx-fast), background var(--fx-fast) !important; }
.pbb-btn-quick:hover { transform: translateY(-2px); border-color: var(--fx-green-400) !important; }
.pbb-ai-wrapper { border-radius: var(--fx-radius-md) !important; }
.mazad-premium-gallery,
.mpg-main-view { border-radius: var(--fx-radius-lg) !important; overflow: hidden; }
.mpg-main-view img { transition: opacity 220ms ease, transform 600ms var(--fx-ease); }
.mpg-main-view:hover img { transform: scale(1.018); }
.mpg-thumb { border-radius: 10px !important; }
.fx-live-spec { border-radius: var(--fx-radius-md) !important; background: var(--fx-surface-soft) !important; border-color: var(--fx-slate-100) !important; }

/* ── Tables, tabs and operational density ────────────────────────────── */
:where(.fx-table-scroll, .admin-table-wrapper, .table-responsive) {
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius-md);
  background: #fff;
  overflow: auto;
  scrollbar-color: #b8c6d6 transparent;
}
:where(.admin-table, .data-table, .payout-table, table) { border-collapse: separate; border-spacing: 0; }
:where(.admin-table, .data-table, .payout-table) th {
  background: #f6f8fb !important;
  color: #53657c !important;
  border-bottom: 1px solid var(--fx-line) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}
:where(.admin-table, .data-table, .payout-table) td { border-bottom-color: var(--fx-slate-100) !important; color: #26374d !important; }
:where(.admin-table, .data-table, .payout-table) tbody tr { transition: background-color var(--fx-fast); }
:where(.admin-table, .data-table, .payout-table) tbody tr:hover { background: #f7fbf9 !important; }
:where(.fx-tabs-bar, .tabs-row, .filter-tabs) { scrollbar-width: thin; }
:where(.fx-tab-btn, .user-tab-btn, .filter-tab) { border-radius: 10px !important; font-weight: 850 !important; }

/* ── Admin workspace ─────────────────────────────────────────────────── */
body.admin-body { background: #f2f5f9 !important; color: var(--fx-text); }
.admin-sidebar {
  width: 274px !important;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
  border-left: 1px solid var(--fx-line) !important;
  box-shadow: -10px 0 34px rgba(7, 17, 31, .055) !important;
}
.admin-sidebar-header { min-height: 82px; border-bottom: 1px solid var(--fx-line); }
.admin-nav { padding: 13px 10px 24px !important; }
.admin-nav-section { padding: 18px 12px 7px !important; color: #8794a6 !important; font-size: 10px !important; letter-spacing: .04em; }
.admin-nav-link {
  min-height: 46px;
  margin: 2px 0;
  padding: 11px 13px !important;
  border-radius: 11px !important;
  color: #4a5c72 !important;
  border-inline-start: 3px solid transparent;
  font-weight: 800 !important;
}
.admin-nav-link:hover { background: #eefaf4 !important; color: var(--fx-green-700) !important; }
.admin-nav-link.active {
  background: linear-gradient(90deg, rgba(22, 189, 114, .14), rgba(22, 189, 114, .04)) !important;
  color: var(--fx-green-700) !important;
  border-inline-start-color: var(--fx-green-500);
}
.admin-nav-link i { width: 22px; text-align: center; }
.admin-content { margin-right: 274px !important; padding: clamp(18px, 2.6vw, 36px) !important; }
.admin-topbar {
  position: sticky;
  top: 12px;
  z-index: 30;
  min-height: 68px;
  padding: 10px 12px !important;
  margin-bottom: 22px;
  border: 1px solid rgba(223, 231, 239, .84);
  border-radius: var(--fx-radius-lg);
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: var(--fx-shadow-sm) !important;
  backdrop-filter: blur(16px);
}
.admin-search-bar { min-height: 44px; background: #f6f8fb !important; border-color: var(--fx-line) !important; border-radius: 12px !important; }
.admin-search-bar input { color: var(--fx-text) !important; }
.welcome-bar { margin-bottom: 22px; padding: 6px 2px; gap: 20px; }
.kpi-grid { gap: 15px !important; }
.kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  border: 1px solid var(--fx-line) !important;
  border-radius: var(--fx-radius-lg) !important;
  background: linear-gradient(145deg, #fff, #fbfdff) !important;
  box-shadow: var(--fx-shadow-xs) !important;
  transition: transform var(--fx-normal) var(--fx-ease), border-color var(--fx-fast), box-shadow var(--fx-fast) !important;
}
.kpi-card::after { content: ''; position: absolute; inset-inline-start: 0; top: 20px; width: 3px; height: 42px; background: var(--fx-green-500); border-radius: 4px; }
.kpi-card:hover { transform: translateY(-3px); border-color: rgba(22, 189, 114, .35) !important; box-shadow: var(--fx-shadow-sm) !important; }
.kpi-icon { border-radius: 14px !important; }
.kpi-value { color: var(--fx-ink-950) !important; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.kpi-label { color: var(--fx-text-muted) !important; }
.admin-card { padding: clamp(16px, 2vw, 24px) !important; box-shadow: var(--fx-shadow-xs) !important; }
.admin-card:hover { border-color: #d3dee9 !important; }
.modal-box,
.modal-container { border-radius: var(--fx-radius-xl) !important; box-shadow: 0 28px 80px rgba(7, 17, 31, .24) !important; }

/* ── Auth and onboarding ──────────────────────────────────────────────── */
.fx-auth-body,
.fx-onboarding-body { background: #f4f7fa !important; }
.fx-auth-topbar { background: rgba(255, 255, 255, .90) !important; border-bottom: 1px solid var(--fx-line) !important; backdrop-filter: blur(16px); }
.fx-auth-wrap { background: transparent !important; }
.fx-auth-visual--light {
  background:
    radial-gradient(circle at 28% 22%, rgba(54, 213, 140, .18), transparent 24rem),
    linear-gradient(145deg, var(--fx-ink-950), var(--fx-ink-800)) !important;
}
.fx-auth-tagline--light,
.fx-auth-visual--light .fx-auth-sub { color: #fff !important; }
.fx-auth-tagline--light span { color: #76e7ae !important; }
.fx-auth-box,
.reg-card,
.onboarding-card,
.fx-nafath-card,
.sanad-card {
  border: 1px solid var(--fx-line) !important;
  border-radius: var(--fx-radius-xl) !important;
  box-shadow: var(--fx-shadow-md) !important;
}
.fx-type-card { border-radius: var(--fx-radius-md) !important; border-color: var(--fx-line) !important; }
.fx-type-card:hover { border-color: rgba(22, 189, 114, .42) !important; transform: translateY(-2px); }
.fx-type-card.active { background: #f1fcf6 !important; border-color: var(--fx-green-500) !important; box-shadow: var(--fx-shadow-focus) !important; }

/* ── Motion: progressive enhancement only ────────────────────────────── */
.fx-ui-ready .fx-ui-enter {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--fx-ease), transform 520ms var(--fx-ease);
  transition-delay: var(--fx-enter-delay, 0ms);
}
.fx-ui-ready .fx-ui-enter.fx-ui-visible { opacity: 1; transform: translateY(0); }
.fx-live-flash { animation: fx-live-flash 700ms var(--fx-ease); }
@keyframes fx-live-flash {
  0% { box-shadow: inset 0 0 0 999px rgba(54, 213, 140, .16); }
  100% { box-shadow: inset 0 0 0 999px rgba(54, 213, 140, 0); }
}

/* ── Responsive behavior ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .fx-profile-sidebar--home { width: 250px !important; }
  .stats-grid, .stat-grid, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 992px) {
  .fx-profile-sidebar--home { width: 100% !important; position: static !important; }
  .admin-content { margin-right: 0 !important; }
  .admin-topbar { top: 8px; }
  .admin-sidebar { width: min(310px, 88vw) !important; transform: translateX(105%) !important; }
  .admin-sidebar.open { transform: translateX(0) !important; }
}
@media (max-width: 768px) {
  :root { --fx-nav-height: 68px; }
  .container { padding-inline: 16px; }
  .fx-page-hero { min-height: 270px; border-radius: 0 0 28px 28px !important; }
  .fx-page-hero__row { align-items: flex-start !important; }
  .fx-page-hero__actions { width: 100%; }
  .fx-page-hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .fx-page-body--overlap { margin-top: -20px !important; }
  .auction-card.fx-card-unified .ac-img-wrap { aspect-ratio: 16 / 10; }
  .fx-seller-form-box, .fx-bulk-box, .fx-profile-card { padding: 20px !important; border-radius: var(--fx-radius-lg) !important; }
  .admin-content { padding: 12px !important; }
  .admin-topbar { position: static; border-radius: var(--fx-radius-md); }
  .fx-admin-user-pill { display: none !important; }
}
@media (max-width: 560px) {
  .stats-grid, .stat-grid, .kpi-grid { grid-template-columns: 1fr !important; }
  .stat-card, .fx-stat-card, .kpi-card { min-height: 124px; }
  .fx-page-hero__meta { gap: 7px !important; }
  .fx-page-hero__chip { min-height: 34px; font-size: 11px !important; }
  .seller-header-bar, .buyer-header-bar { align-items: stretch !important; }
  .fx-seller-actions-top, .fx-buyer-actions-top { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
  .btn-action-top { justify-content: center; }
  .admin-card { padding: 14px !important; border-radius: var(--fx-radius-md) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .fx-ui-ready .fx-ui-enter { opacity: 1 !important; transform: none !important; }
}

@media (forced-colors: active) {
  :where(.btn, input, select, textarea, .auction-card, .admin-card, .stat-card) { border: 1px solid CanvasText !important; }
}

/* ========================================================================== 
   FleetX Design System v4 — visible product-wide transformation
   Keeps the established identity while aligning marketplace and workspaces.
   ========================================================================== */

:root {
  --fx-brand-gradient: linear-gradient(135deg, #28dc91 0%, #16b978 44%, #1098d4 100%);
  --fx-brand-gradient-deep: linear-gradient(135deg, #0eaa68 0%, #087f71 48%, #0d7fc4 100%);
  --fx-workspace-gradient: linear-gradient(155deg, #061326 0%, #0a2138 62%, #073426 100%);
  --fx-shadow-brand: 0 16px 36px rgba(14, 159, 97, .22);
  --primary-gradient: var(--fx-brand-gradient);
}

/* Brand gradient is an interaction language, not a one-off decoration. */
:where(.btn-primary, .fx-btn-gradient, .fx-btn-auth, .pbb-btn-submit--primary,
  .fx-form-submit, .wallet-btn-primary, .settings-submit, .auctions-tab-btn.active,
  .btn-action-top--live, .btn-submit, .submit-btn, button[type="submit"].btn-primary) {
  color: #03150d !important;
  background: var(--fx-brand-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(14, 159, 97, .17) !important;
}
:where(.btn-primary, .fx-btn-gradient, .fx-btn-auth, .pbb-btn-submit--primary,
  .fx-form-submit, .wallet-btn-primary, .settings-submit, .auctions-tab-btn.active,
  .btn-action-top--live, .btn-submit, .submit-btn):hover {
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-2px);
  box-shadow: var(--fx-shadow-brand) !important;
}
.navbar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, #22d98b 34%, #1098d4 68%, transparent 95%);
  opacity: .7;
}
.navbar-links > li > a.active::after { background: var(--fx-brand-gradient) !important; }

/* Homepage hero: decision-ready, balanced, and still recognisably FleetX. */
body.fx-home-index .fx-hero-wrap--fleet1,
body.fx-home-index .fx-hero-wrapper--fleet1,
body.fx-home-index .fx-hero-section--fleet1 {
  min-height: clamp(660px, 78vh, 820px) !important;
  height: auto !important;
}
body.fx-home-index .fx-hero-wrap--fleet1 {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px) !important;
  box-shadow: 0 24px 70px rgba(7, 17, 31, .10);
}
body.fx-home-index .fx-hero-wrap--fleet1::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  z-index: 5;
  background: var(--fx-brand-gradient);
}
body.fx-home-index .fx-hero-bg-gradient {
  background:
    radial-gradient(circle at 78% 25%, rgba(38, 220, 145, .11), transparent 30%),
    linear-gradient(100deg, rgba(247, 250, 252, .98) 0%, rgba(247, 250, 252, .91) 36%, rgba(247, 250, 252, .34) 65%, transparent 82%) !important;
}
body.fx-home-index .fx-hero-section--fleet1 {
  display: flex !important;
  align-items: center !important;
  padding: calc(var(--fx-nav-height) + 38px) clamp(22px, 7vw, 110px) 42px !important;
}
body.fx-home-index .fx-hero-content--fleet1 {
  width: min(610px, 48vw) !important;
  max-width: 610px !important;
  margin-inline: 0 auto !important;
  padding: clamp(26px, 3.2vw, 42px) !important;
  text-align: right !important;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .91), rgba(250, 253, 255, .72));
  box-shadow: 0 24px 70px rgba(7, 17, 31, .13);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  transform: none !important;
}
body.fx-home-index .fx-hero-subtitle--fleet1 {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  margin: 0 0 14px !important;
  border: 1px solid rgba(14, 159, 97, .20);
  border-radius: 999px;
  background: rgba(22, 189, 114, .08);
  color: #087f4d !important;
  font-size: clamp(12px, 1.1vw, 15px) !important;
  font-weight: 900 !important;
}
body.fx-home-index .fx-hero-title--fleet1 {
  max-width: 580px;
  margin: 0 !important;
  color: var(--fx-ink-950) !important;
  font-size: clamp(38px, 4.35vw, 67px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}
body.fx-home-index .fx-hero-title--fleet1::after {
  content: '';
  display: block;
  width: 86px;
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--fx-brand-gradient);
}
body.fx-home-index .fx-hero-value {
  max-width: 540px;
  margin: 18px 0 0;
  color: #52637a;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 650;
  line-height: 1.85;
}
body.fx-home-index .fx-hero-cta-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 22px !important;
  opacity: 1 !important;
  transform: none !important;
}
body.fx-home-index .fx-hero-cta-btn {
  min-height: 50px;
  padding-inline: 19px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px !important;
}
body.fx-home-index .fx-hero-cta-btn.btn-outline-dark {
  background: rgba(255, 255, 255, .74) !important;
  border: 1px solid #cbd7e4 !important;
  color: #102038 !important;
}
body.fx-home-index .fx-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 20px;
  color: #53657a;
  font-size: 12px;
  font-weight: 800;
}
body.fx-home-index .fx-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
body.fx-home-index .fx-hero-trust i { color: var(--fx-green-600); font-size: 16px; }

/* Homepage rhythm and surfaces. */
body.fx-home-index .fx-home-auctions,
body.fx-home-index .fx-why-fleetx,
body.fx-home-index .fx-home-stats-section.stats-section--parallax,
body.fx-home-index .fx-home-contact {
  padding-block: clamp(64px, 7vw, 92px) !important;
}
body.fx-home-index .fx-home-auctions {
  background:
    radial-gradient(circle at 90% 10%, rgba(22, 189, 114, .07), transparent 28rem),
    linear-gradient(180deg, #f7fafc 0%, #eef4f9 100%) !important;
}
body.fx-home-index .fx-home-section-intro { margin-bottom: 26px !important; }
body.fx-home-index .section-title,
body.fx-home-index .hiw-dark-title,
body.fx-home-index .fx-contact-title { letter-spacing: -.035em; text-wrap: balance; }
body.fx-home-index .fx-auctions-panel {
  position: relative;
  padding: clamp(18px, 2.5vw, 32px) !important;
  border: 1px solid rgba(190, 205, 219, .82) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 24px 64px rgba(16, 32, 56, .10) !important;
  backdrop-filter: blur(14px);
}
body.fx-home-index .fx-auctions-panel::before {
  content: '';
  position: absolute;
  inset: 0 24px auto;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--fx-brand-gradient);
}
body.fx-home-index .fx-home-tabs {
  width: fit-content;
  margin: 0 auto 24px !important;
  padding: 5px !important;
  border: 1px solid var(--fx-line);
  border-radius: 16px !important;
  background: #eef3f7 !important;
}
body.fx-home-index .auctions-tab-btn { min-width: 180px; border-radius: 12px !important; }
body.fx-home-index .auction-card.fx-card-unified {
  border-color: #d7e1eb !important;
  box-shadow: 0 12px 30px rgba(16, 32, 56, .09) !important;
}
body.fx-home-index .auction-card.fx-card-unified:hover {
  border-color: rgba(22, 185, 120, .55) !important;
  box-shadow: 0 22px 46px rgba(16, 32, 56, .15) !important;
}
body.fx-home-index .auction-card .btn,
body.fx-home-index .auction-card .ac-btn { background: var(--fx-brand-gradient) !important; color: #03150d !important; border: 0 !important; }

/* Replace the two-screen sticky story with two compact product panels. */
body.fx-home-index .fx-hiw-section--dark {
  padding: clamp(70px, 7vw, 96px) 0 !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(16, 152, 212, .13), transparent 30rem),
    radial-gradient(circle at 88% 75%, rgba(40, 220, 145, .11), transparent 30rem),
    #061326 !important;
}
body.fx-home-index .fx-hiw-section--dark #buyers-section,
body.fx-home-index .fx-hiw-section--dark #sellers-section {
  position: relative !important;
  inset: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.fx-home-index .fx-hiw-section--dark #sellers-section { margin-top: 28px !important; }
body.fx-home-index .fx-hiw-section--dark .container { display: grid; grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr); gap: 28px; align-items: center; }
body.fx-home-index .fx-hiw-section--dark .hiw-dark-head { margin: 0 !important; text-align: right !important; }
body.fx-home-index .fx-hiw-section--dark .hiw-dark-title { font-size: clamp(28px, 3vw, 44px) !important; color: #fff; line-height: 1.25; }
body.fx-home-index .fx-hiw-section--dark .hiw-dark-sub { color: #9fb0c5 !important; }
body.fx-home-index .fx-hiw-browser {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: 0 24px 65px rgba(0, 0, 0, .20) !important;
  backdrop-filter: blur(12px);
}
body.fx-home-index .fx-hiw-section--dark .browser-tabs {
  order: 1 !important;
  margin: 0 !important;
  padding: 8px !important;
  background: rgba(2, 10, 22, .35) !important;
}
body.fx-home-index .fx-hiw-section--dark .b-tab { min-height: 44px; color: #aebdd0 !important; }
body.fx-home-index .fx-hiw-section--dark .b-tab.active { background: var(--fx-brand-gradient) !important; color: #03150d !important; }
body.fx-home-index .fx-hiw-section--dark .browser-content.hiw-panel {
  order: 2 !important;
  min-height: 310px !important;
  padding: clamp(22px, 3vw, 38px) !important;
  background: transparent !important;
}
body.fx-home-index .fx-hiw-section--dark .hiw-tab-content.active { gap: clamp(20px, 3vw, 42px) !important; }
body.fx-home-index .fx-hiw-section--dark .hiw-tab-img { height: 230px !important; border-radius: 18px !important; box-shadow: 0 14px 38px rgba(0,0,0,.25); }
body.fx-home-index .fx-hiw-section--dark .hiw-tab-icon { color: #2bdd90 !important; }

body.fx-home-index .fx-why-fleetx {
  background: linear-gradient(180deg, #f4f8fb 0%, #fff 100%) !important;
}
body.fx-home-index .fx-why-bento { gap: 18px !important; }
body.fx-home-index .fx-why-card,
body.fx-home-index .fx-why-journey {
  border-radius: 26px !important;
  box-shadow: 0 16px 44px rgba(16, 32, 56, .10) !important;
}
body.fx-home-index .fx-why-card--trust,
body.fx-home-index .fx-why-card--ai { background: var(--fx-workspace-gradient) !important; border-color: rgba(40, 220, 145, .18) !important; }
body.fx-home-index .fx-why-journey { background: linear-gradient(125deg, #072b32, #0a4651 46%, #0e5d78 100%) !important; }
body.fx-home-index .fx-home-stats-section.stats-section--parallax { min-height: 0 !important; }
body.fx-home-index .fx-home-stats-section .stats-section__overlay {
  background: linear-gradient(110deg, rgba(3, 12, 25, .96), rgba(5, 25, 41, .82), rgba(2, 45, 39, .76)) !important;
}
body.fx-home-index .fx-home-stats-section .stat-feature-card {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.075) !important;
  backdrop-filter: blur(12px);
}
body.fx-home-index .fx-home-stats-section .stat-feature-card i { color: #36dc94 !important; }
body.fx-home-index .fx-home-contact {
  background:
    radial-gradient(circle at 10% 90%, rgba(16, 152, 212, .08), transparent 25rem),
    #f4f7fa !important;
}
body.fx-home-index .fx-home-contact .contact-grid { align-items: stretch !important; gap: clamp(30px, 5vw, 70px) !important; }
body.fx-home-index .fx-home-contact .contact-info-col,
body.fx-home-index .fx-home-contact .fx-contact-form-card {
  border: 1px solid var(--fx-line) !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(16, 32, 56, .09) !important;
}
body.fx-home-index .fx-home-contact .contact-info-col { padding: clamp(26px, 4vw, 44px) !important; }
body.fx-home-index .fx-home-contact .fx-contact-form-card { padding: clamp(24px, 3vw, 38px) !important; }

/* Public subpages share one confident shell. */
body.fx-page-shell:not(.admin-body) { background: #f2f6f9 !important; }
.fx-page-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  z-index: 2;
  background: var(--fx-brand-gradient);
}
.fx-page-hero__content { position: relative; z-index: 3; }
.fx-page-body--overlap { margin-top: -42px !important; }
.fx-page-body--overlap > :first-child { position: relative; z-index: 5; }
:where(.fx-filter-panel, .fx-search-panel, .fx-detail-block, .fx-pricing-panel,
  .fx-seller-form-box, .fx-bulk-box, .fx-checkout-main, .fx-cart-summary,
  .settings-section, .fx-profile-card) { box-shadow: 0 16px 44px rgba(16, 32, 56, .08) !important; }

/* Buyer, seller and company workspaces. */
.fx-profile-sidebar--home {
  border-color: rgba(11, 32, 56, .12) !important;
  background: #fff !important;
  box-shadow: 0 20px 54px rgba(7, 17, 31, .12) !important;
}
.fx-buyer-profile,
.fx-seller-profile {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 28px 22px !important;
  background: var(--fx-workspace-gradient) !important;
}
.fx-buyer-profile::after,
.fx-seller-profile::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  inset: -62px auto auto -45px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40,220,145,.28), transparent 68%);
}
.fx-profile-nav a { display: flex !important; align-items: center; gap: 11px; width: 100%; }
.fx-profile-nav a.active {
  color: #073c2b !important;
  background: linear-gradient(90deg, rgba(40,220,145,.22), rgba(16,152,212,.10)) !important;
  border-inline-start-color: #16b978 !important;
}
.seller-header-bar,
.buyer-header-bar,
.fx-dash-mobile-profile { border: 1px solid var(--fx-line) !important; background: #fff !important; }
.stat-card::before,
.fx-stat-card::before { width: 5px; height: 100%; top: 0; background: var(--fx-brand-gradient); }

/* Admin command centre: dark navigation + denser operational canvas. */
body.admin-body {
  background:
    radial-gradient(circle at 12% 0%, rgba(16, 152, 212, .06), transparent 30rem),
    #edf2f7 !important;
}
.admin-sidebar {
  width: 286px !important;
  background: var(--fx-workspace-gradient) !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: -16px 0 46px rgba(4, 12, 24, .20) !important;
}
.admin-sidebar-header {
  min-height: 94px !important;
  padding: 20px 18px !important;
  border-bottom-color: rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.035);
}
.admin-sidebar-header .brand-ar { color: #fff !important; }
.admin-sidebar-header .brand-en { color: #45e49d !important; }
.admin-nav { display: flex !important; flex-direction: column; gap: 3px; padding: 14px 12px 28px !important; }
.admin-nav-section { color: #71849b !important; padding: 20px 13px 8px !important; }
.admin-nav-link {
  display: flex !important;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 47px;
  margin: 0;
  color: #b9c6d6 !important;
  border: 1px solid transparent;
}
.admin-nav-link i { color: #8295aa; font-size: 16px; }
.admin-nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.07);
}
.admin-nav-link.active {
  color: #03150d !important;
  background: var(--fx-brand-gradient) !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(18, 184, 119, .20) !important;
}
.admin-nav-link.active i { color: #052718 !important; }
.admin-content { margin-right: 286px !important; padding: clamp(18px, 2.3vw, 32px) !important; }
.admin-topbar {
  top: 14px;
  min-height: 70px;
  border-color: rgba(203, 215, 228, .88) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 38px rgba(16, 32, 56, .10) !important;
}
.welcome-bar {
  padding: 22px 24px !important;
  border: 1px solid rgba(12, 49, 69, .10);
  border-radius: 20px;
  background: linear-gradient(120deg, #fff, #f8fcfb);
  box-shadow: 0 10px 28px rgba(16,32,56,.06);
}
.kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.kpi-card { min-height: 164px; padding: 22px !important; }
.kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--fx-brand-gradient);
}
.kpi-card::after { display: none; }
.kpi-icon { background: linear-gradient(145deg, rgba(40,220,145,.15), rgba(16,152,212,.11)) !important; color: #087f5d !important; }
.admin-chart-grid { gap: 18px !important; }
.admin-card { border-color: #d6e0ea !important; box-shadow: 0 14px 38px rgba(16, 32, 56, .075) !important; }
.admin-table-wrapper { box-shadow: inset 0 1px rgba(255,255,255,.8); }

/* Motion is subtle, useful, and disabled for users who request it. */
@keyframes fx-brand-sheen {
  0% { transform: translateX(130%) skewX(-18deg); }
  100% { transform: translateX(-260%) skewX(-18deg); }
}
:where(.btn-primary, .fx-btn-gradient, .auctions-tab-btn.active) { position: relative; overflow: hidden; isolation: isolate; }
:where(.btn-primary, .fx-btn-gradient, .auctions-tab-btn.active)::after {
  content: '';
  position: absolute;
  inset: -40% auto -40% 118%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent);
  transform: skewX(-18deg);
  animation: fx-brand-sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
.fx-ui-interactive-surface { position: relative; isolation: isolate; }
.fx-ui-surface-glow {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(260px circle at var(--fx-pointer-x, 50%) var(--fx-pointer-y, 50%), rgba(40, 220, 145, .09), transparent 72%);
  transition: opacity 220ms ease;
  pointer-events: none;
}
.fx-ui-interactive-surface:hover > .fx-ui-surface-glow { opacity: 1; }
.fx-ui-interactive-surface > :not(.fx-ui-surface-glow) { position: relative; z-index: 1; }

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.fx-home-index .fx-hero-content--fleet1 { width: min(620px, 55vw) !important; }
}
@media (max-width: 992px) {
  body.fx-home-index .fx-hero-wrap--fleet1,
  body.fx-home-index .fx-hero-wrapper--fleet1,
  body.fx-home-index .fx-hero-section--fleet1 { min-height: 720px !important; }
  body.fx-home-index .fx-hero-section--fleet1 { align-items: flex-start !important; padding: 110px 18px 28px !important; }
  body.fx-home-index .fx-hero-content--fleet1 {
    width: min(620px, 92vw) !important;
    margin-inline: auto !important;
    padding: 26px !important;
  }
  body.fx-home-index .fx-hiw-section--dark .container { grid-template-columns: 1fr; gap: 18px; }
  body.fx-home-index .fx-hiw-section--dark .hiw-dark-head { text-align: center !important; }
  .admin-content { margin-right: 0 !important; }
  .admin-sidebar { width: min(320px, 90vw) !important; }
}
@media (max-width: 768px) {
  body.fx-home-index .fx-hero-wrap--fleet1,
  body.fx-home-index .fx-hero-wrapper--fleet1,
  body.fx-home-index .fx-hero-section--fleet1 { min-height: 680px !important; }
  body.fx-home-index .fx-hero-bg-gradient {
    background: linear-gradient(180deg, rgba(247,250,252,.96) 0%, rgba(247,250,252,.80) 48%, rgba(247,250,252,.18) 100%) !important;
  }
  body.fx-home-index .fx-hero-content--fleet1 { transform: none !important; text-align: center !important; border-radius: 22px; }
  body.fx-home-index .fx-hero-subtitle--fleet1 { margin-inline: auto !important; }
  body.fx-home-index .fx-hero-title--fleet1 { font-size: clamp(32px, 10vw, 48px) !important; }
  body.fx-home-index .fx-hero-title--fleet1::after { margin-inline: auto; }
  body.fx-home-index .fx-hero-value { font-size: 13px; line-height: 1.75; }
  body.fx-home-index .fx-hero-trust { justify-content: center; gap: 7px 12px; }
  body.fx-home-index .fx-auctions-panel { padding: 14px !important; border-radius: 22px !important; }
  body.fx-home-index .fx-home-tabs { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
  body.fx-home-index .auctions-tab-btn { min-width: 0; padding-inline: 8px !important; font-size: 12px !important; }
  body.fx-home-index .fx-hiw-section--dark { padding-block: 58px !important; }
  body.fx-home-index .fx-hiw-section--dark .browser-content.hiw-panel { min-height: 0 !important; padding: 18px !important; }
  body.fx-home-index .fx-hiw-section--dark .hiw-tab-img { height: 190px !important; }
  .fx-page-body--overlap { margin-top: -24px !important; }
  .welcome-bar { padding: 18px !important; align-items: stretch !important; }
  .welcome-bar > div:last-child .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  body.fx-home-index .fx-hero-cta-row { display: grid !important; grid-template-columns: 1fr; }
  body.fx-home-index .fx-hero-cta-btn { width: 100%; }
  body.fx-home-index .fx-hero-trust span { flex: 1 1 42%; justify-content: center; }
  .kpi-grid { grid-template-columns: 1fr !important; }
  .kpi-card { min-height: 132px; }
}