/* ======================================================================
   SURFACE — MachineStand's visual language, in the manner of Apple's web
   work: an airy off-white canvas, pure white surfaces with a 16px radius and
   a hairline border, diffused shadows, the system type stack with tight
   tracking, a monochrome foundation with amber kept for the actions that
   matter, and spring easing on everything that moves.

   This sheet is loaded LAST (index.html) and is purely presentational: it
   retunes the design tokens so every earlier layer follows, then restyles
   the components those layers own. No markup it relies on was added for it
   except the filter rail's .rail-body wrapper. Delete this one file to get
   the industrial look back.

   Sections
     1. Tokens and type
     2. Shell: navbar, mode switch, phone bars, footer
     3. Controls: buttons, inputs, segmented controls, chips, badges
     4. Surfaces: cards, panels, tables, sheets, modals
     5. Marketplace: hero, search widget, filter rail, machine cards
     6. Hub, studio, pipeline, onboarding
   ====================================================================== */

/* ---- 1. Tokens and type ------------------------------------------------ */
:root {
  --font-brand: "Barlow Condensed", system-ui, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-heading: var(--font-system);
  --font-body: var(--font-system);
  --font-heading-weight: 600;

  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --canvas: #fbfbfd;
  --surface: #ffffff;
  --line-soft: rgba(0, 0, 0, .06);
  --line-mid: rgba(0, 0, 0, .1);
  --fill-100: #f8fafc;
  --fill-200: #f1f5f9;
  --fill-300: #e2e8f0;

  --amber: #f59e0b;
  --amber-hover: #e8940a;
  --amber-press: #d97706;
  --amber-soft: #fff7e6;
  --amber-deep: #92400e;
  --amber-ink: #111827;

  --wa-soft: #ecfdf5;
  --wa-soft-hover: #d1fae5;
  --wa-line: #bbf7d0;
  --wa-ink: #15803d;

  --radius-card: 16px;
  --radius-sheet: 20px;
  --radius-ctl: 10px;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, .04), 0 2px 6px -1px rgba(0, 0, 0, .02);
  --shadow-lift: 0 14px 30px -8px rgba(0, 0, 0, .10), 0 4px 10px -2px rgba(0, 0, 0, .04);
  --shadow-float: 0 24px 60px -12px rgba(15, 23, 42, .18), 0 8px 20px -8px rgba(15, 23, 42, .08);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: .2s var(--ease);

  /* Retune the tokens the earlier layers read, so they follow. */
  --color-bg: var(--canvas);
  --color-surface: var(--surface);
  --color-text: var(--ink-900);
  --color-divider: var(--line-soft);
  --color-neutral-100: var(--fill-100);
  --color-neutral-200: var(--fill-200);
  --color-neutral-300: var(--fill-300);
  --color-neutral-400: #cbd5e1;
  --color-neutral-500: #94a3b8;
  --color-neutral-600: var(--ink-500);
  --color-neutral-700: #475569;
  --color-neutral-800: var(--ink-700);
  --color-neutral-900: var(--ink-900);
  --brand-100: var(--amber-soft);
  --brand-200: #fdebc2;
  --brand-300: #fcd34d;
  --brand-400: #fbbf24;
  --brand-500: var(--amber);
  --brand-600: var(--amber-press);
  --brand-700: #b45309;
  --brand-ink: var(--amber-ink);
  --steel-900: var(--ink-900);
  --steel-800: #1e293b;
  --steel-700: var(--ink-700);
  --line: var(--line-soft);
  --hub-line: var(--line-soft);
  --studio-line: var(--line-soft);
  --hub-bg: var(--canvas);
  --hub-shadow: var(--shadow-card);
  --hub-amber: var(--amber);
  --studio-amber: var(--amber);
  --radius-sm: 6px;
  --radius-md: var(--radius-ctl);
  --radius-lg: var(--radius-card);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-lift);
  --shadow-lg: var(--shadow-float);
}

html, body { background: var(--canvas); }
body, .ph {
  font-family: var(--font-body); color: var(--ink-700);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { line-height: 1.6; }
.ph { font-size: 14px; line-height: 1.5; }
h1, h2, h3, h4, .ph .h1, .page-title, .card-heading, .card-title, .kpi-value, .stat-value,
.lead-company, .drawer-head h2, .qmodal-head h2, .rail-head h2, .machine-name {
  font-family: var(--font-heading); color: var(--ink-900);
  letter-spacing: -0.025em; font-weight: 600; line-height: 1.15;
}
.ph .h1 { letter-spacing: -0.025em; }
.page-title { font-weight: 700; letter-spacing: -0.03em; }
.page-sub, .card-meta, .card-owner, .card-loc, .kv span:first-child { color: var(--ink-700); }
.lbl, .seg > label, .field > label, .kpi-label, .suggest-group, .leads-table th, .fleet-table th,
.kanban-head h2, .drawer-sec h3, .qcard h3, .doc-kind, .demand, .cover-badge {
  font-family: var(--font-heading); letter-spacing: .04em; color: var(--ink-500); font-weight: 600;
}
.field > label { text-transform: none; letter-spacing: -0.005em; font-size: 12.5px; color: var(--ink-700); font-weight: 500; }
.rail-title, .studio-title, .hub-card-head h2 {
  text-transform: none; letter-spacing: -0.02em; color: var(--ink-900); font-weight: 600;
}
.rail-title { font-size: 13.5px; }
.rail-title small { color: var(--ink-500); }
.studio-title { font-size: 17px; }
.hub-card-head h2 { font-size: 16px; }
.hub-card-head small, .hub-note, .card-note, .field-hint, .field-note, .kpi-foot, .lead-meta,
.card-distance, .chips-note, .page-sub, .form-error { line-height: 1.5; }
a { color: var(--brand-700); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* The wordmark keeps the brand face; everything else is the system stack.
   The mark (the yard from above) draws its fence and parked machines in
   currentColor, so it is charcoal on every light surface. */
.nav-wordmark, .auth-wordmark, .site-links-wordmark, .site-wordmark { font-family: var(--font-brand); }
.brand-mark { color: var(--ink-900); }

/* ---- 2. Shell ----------------------------------------------------------- */
/* Frosted glass, on the phone's bottom tab bar and the desktop top bar alike. */
.nav {
  background: rgba(255, 255, 255, .82); color: var(--ink-900); box-shadow: none;
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-color: var(--line-soft);
}
.nav-link {
  font-family: var(--font-heading); text-transform: none; letter-spacing: -0.01em;
  font-weight: 500; font-size: 11.5px; transition: color var(--t), border-color var(--t);
}
.topbar {
  background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--line-soft);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
}
.topbar-signedout { background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--line-soft); color: var(--ink-700); }
.topbar-signedout .topbar-note { color: var(--ink-700); }
.topbar-signedout .topbar-note strong { color: var(--ink-900); }
.mode-option {
  border-radius: var(--radius-ctl); border: 1px solid var(--line-soft); background: var(--fill-100);
  color: var(--ink-700); transition: background var(--t), color var(--t), border-color var(--t);
}
.mode-option .mode-label { text-transform: none; letter-spacing: -0.01em; font-weight: 600; }
.mode-option.on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.mode-option:not(.on):active { background: var(--fill-200); }

@media (min-width: 1024px) {
  .nav { border-bottom: 1px solid var(--line-soft); }
  .nav-link { font-size: 14px; color: var(--ink-700); }
  .nav-link:hover { color: var(--ink-900); }
  .nav-link.on { color: var(--ink-900); border-bottom-color: var(--amber); }
  .nav-wordmark { color: var(--ink-900); }
  .nav-sub { color: var(--ink-500); }
  .nav-util {
    font-family: var(--font-heading); text-transform: none; letter-spacing: -0.01em;
    font-size: 14px; font-weight: 500; color: var(--ink-700); transition: color var(--t);
  }
  .nav-util:hover { color: var(--ink-900); }
  .topbar { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mode-option { background: var(--fill-200); border-color: transparent; }
  .mode-option:not(.on):hover { background: var(--fill-300); border-color: transparent; color: var(--ink-900); }
  .mode-option.on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
  .mode-option.on .mode-hint { opacity: .7; }
  .mode-option .mode-label { font-size: 13px; }
  .page-head { border-bottom: 0; }
}

/* The footer: one quiet band on the canvas. */
.site-links { background: var(--fill-100); border-top: 1px solid var(--line-soft); }
.site-links a {
  font-family: var(--font-heading); text-transform: none; letter-spacing: -0.01em;
  font-size: 13px; font-weight: 500; color: var(--ink-700); transition: color var(--t);
}
.site-links a:hover { color: var(--ink-900); text-decoration: none; }
.site-links-note { color: var(--ink-500); font-size: 12px; line-height: 1.6; }
.site-links-wordmark { color: var(--ink-900); }

/* ---- 3. Controls --------------------------------------------------------- */
.btn {
  font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  border-radius: var(--radius-ctl); border-color: var(--line-mid); color: var(--ink-900);
  transition: all var(--t);
}
.btn:hover { background: var(--fill-100); }
.btn:active { transform: scale(.985); }
.btn-primary, .btn-primary:hover, .btn-primary:active { color: var(--amber-ink); border-color: transparent; }
.btn-primary { background: var(--amber); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.btn-primary:hover { background: var(--amber-hover); }
.btn-primary:active { background: var(--amber-press); }
.btn-secondary { background: var(--fill-200); border-color: transparent; color: var(--ink-900); }
.btn-secondary:hover { background: var(--fill-300); }
.btn-ghost { background: #fff; border-color: var(--line-mid); }
.btn-ghost:hover { border-color: rgba(0, 0, 0, .2); background: #fff; }
.btn-boost { background: var(--amber-soft); border-color: transparent; color: var(--amber-deep); }
/* WhatsApp: a soft green tool, not a neon block. */
.btn-whatsapp, .btn-wa { background: var(--wa-soft); border-color: var(--wa-line); color: var(--wa-ink); font-weight: 600; }
.btn-whatsapp:hover, .btn-wa:hover { background: var(--wa-soft-hover); border-color: #86efac; color: #166534; }
.btn-whatsapp svg, .btn-wa svg { margin-right: 2px; }
.nav-cta, .topbar-signin, .filter-btn { border-radius: 999px; }
.search-go { border-radius: 12px; font-size: 15px; }
.clear-all, .rate-edit-btn, .dropzone .browse { color: var(--ink-700); }

.cta { background: var(--amber); color: var(--amber-ink); transition: background var(--t); }
.cta-label { text-transform: none; letter-spacing: -0.01em; font-weight: 600; font-size: 16px; color: inherit; }
.cta-action { text-transform: none; letter-spacing: -0.01em; font-weight: 600; font-size: 15px; }
.cta-whatsapp { background: #dcfce7; color: #166534; }
.cta-call { background: var(--ink-900); color: #fff; }

.input {
  background: #fff; border: 1px solid var(--line-mid); border-radius: var(--radius-ctl); color: var(--ink-900);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.input::placeholder { color: #94a3b8; }
.input:hover { border-color: rgba(0, 0, 0, .18); }
.input:focus-visible { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245, 158, 11, .16); outline: none; }
.seg .input, .qcard .input, .studio .input, .rail-section .input, .results-bar .input-compact { background: #fff; }
.results-bar .input-compact { border-radius: var(--radius-ctl); }
.aed-input, .unit-input { border-radius: var(--radius-ctl); border-color: var(--line-mid); transition: border-color var(--t), box-shadow var(--t); }
.aed-input:focus-within, .unit-input:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245, 158, 11, .16); }
.aed-input .prefix, .aed-input .unit, .unit-input .unit {
  background: var(--fill-100); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 500;
}
.notes-area { border-radius: var(--radius-ctl); border-color: var(--line-mid); }
.status-select, .stage-select { border-color: var(--line-mid); font-weight: 500; }
.rail-check input, .qtoggle input, .hire-model input { accent-color: var(--amber); }

/* Segmented controls: a soft track, the selected segment lifts out in white. */
.term-toggle, .view-toggle, .seg-toggle, .scope-toggle, .qpreview-tabs, .range-picker {
  background: var(--fill-200); border: 0; border-radius: var(--radius-ctl); padding: 3px; gap: 2px;
}
.term-toggle button, .view-toggle button, .seg-toggle button, .scope-toggle button, .qpreview-tabs button, .range-picker button {
  background: transparent; border: 0; border-radius: 8px; text-transform: none; letter-spacing: -0.01em;
  font-weight: 500; color: var(--ink-700); transition: all var(--t);
}
.term-toggle button + button, .view-toggle button + button, .seg-toggle button + button,
.scope-toggle button + button, .qpreview-tabs button + button, .range-picker button + button { border-left: 0; }
.term-toggle button.on, .view-toggle button.on, .seg-toggle button.on, .scope-toggle button.on,
.qpreview-tabs button.on, .range-picker button.on {
  background: #fff; color: var(--ink-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .03);
}
.term-toggle { align-self: end; }
.term-toggle button { min-height: 40px; font-size: 13px; }
.view-toggle button { width: 34px; height: 30px; }
.status-option {
  border-radius: var(--radius-ctl); border-color: var(--line-soft); background: var(--fill-100);
  text-transform: none; letter-spacing: -0.01em; font-weight: 500; transition: all var(--t);
}
.status-option.on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.term-switch span { background: var(--fill-300); }
.term-switch input:checked + span { background: var(--amber); }

/* Chips and pills. Amber marks the active filter; everything else is quiet. */
.chip {
  font-family: var(--font-heading); text-transform: none; letter-spacing: -0.01em; font-size: 13px;
  font-weight: 500; border-radius: 999px; border-color: var(--line-mid); background: #fff;
  color: var(--ink-700); padding: 6px 12px; transition: all var(--t);
}
.chip:hover { border-color: rgba(0, 0, 0, .2); color: var(--ink-900); background: #fff; }
.chip.on, .pill-rail .chip.on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.pill-rail .chip { padding: 8px 14px; color: var(--ink-700); }
.pill-rail .chip:hover { border-color: rgba(0, 0, 0, .2); color: var(--ink-900); }
.chip-count { opacity: .7; }
.tag-filter { border-color: var(--line-mid); transition: all var(--t); }
.tag-filter b { color: var(--ink-900); }
.pill { border-color: var(--line-mid); font-weight: 500; transition: all var(--t); }
.pill:hover { border-color: rgba(0, 0, 0, .2); }
.pill.on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pill.on small { color: rgba(255, 255, 255, .7); }
.hire-model { border-color: var(--line-mid); transition: all var(--t); }
.hire-model.on { border-color: var(--ink-900); background: var(--fill-100); }
.tag, .trust-item, .field-optional, .lead-scope span, .machine-loc, .doc-kind { border-radius: 999px; }
.tag-accent, .trust-verified { background: var(--amber-soft); color: var(--amber-deep); border-color: transparent; }
.tag-outline { border-color: var(--line-mid); color: var(--ink-700); }
.trust-item { border-color: var(--line-mid); }
.demand { border-radius: 999px; text-transform: none; letter-spacing: -0.005em; }
.query-hint { border-color: var(--line-mid); }
.query-hint b { color: var(--ink-900); }

.badge {
  font-family: var(--font-heading); text-transform: none; letter-spacing: -0.01em; font-weight: 600;
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.badge-live { background: var(--amber); color: var(--amber-ink); }
.badge-verified, .badge-hire { background: rgba(15, 23, 42, .84); color: #fff; }
.badge-unconfirmed { background: rgba(255, 255, 255, .92); color: var(--ink-700); border: 0; }
.cover-badge { text-transform: none; letter-spacing: -0.005em; border-radius: 999px; }
.set-cover, .rail-progress { border-radius: 999px; }
.step-n { background: var(--fill-200); color: var(--ink-900); font-weight: 600; }
.delta { font-weight: 600; }

/* ---- 4. Surfaces ---------------------------------------------------------- */
.card, .machine-card, .hub-card, .kpi, .stat, .studio-card, .lead-card, .qcard, .drawer-sec, .term,
.filter-rail, .filter-panel, .leads-table, .ph > .panel, .qpreview {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.card, .machine-card, .card-link, .stat, .kpi, .hub-card, .lead-card, .studio-card {
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.machine-card:hover, .machine-card:focus-within, .card-link:hover, a.stat:hover, a.stat:focus-visible {
  transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: rgba(0, 0, 0, .08);
}
.card-link:active { transform: none; }
.stat, .kpi { padding: 16px 18px; }
.stat-value, .kpi-value { letter-spacing: -0.03em; font-weight: 700; }
.kanban-col { background: var(--fill-100); border-color: var(--line-soft); border-radius: var(--radius-card); }
.kanban-head { border-bottom-width: 2px; }
.kanban-count { border-color: var(--line-soft); }
.lead-card { border-radius: 14px; cursor: grab; }
.lead-card:hover { transform: none; box-shadow: var(--shadow-lift); }
.leads-table { overflow: hidden; }
.leads-table th, .fleet-table th { border-color: var(--line-soft); background: var(--fill-100); }
.leads-table td, .fleet-table td { border-color: var(--line-soft); }
.machine-thumb, .lead-thumb { border-radius: 8px; border-color: var(--line-soft); }
.kv { border-color: var(--line-soft); }
.hair { border-color: var(--line-mid); }
.map-canvas { border-radius: 12px; border-color: var(--line-soft); }
.photo-strip-item, .gallery-thumb, .rail-item { border-radius: 12px; border-color: var(--line-soft); overflow: hidden; }
.detail-photo .card-photo { border-radius: var(--radius-card); border: 0; }
.photo-preview { border-radius: 10px; border-color: var(--line-soft); }
.gallery-thumb button { border-color: var(--line-soft); }
.rate-card { border-radius: 12px; background: var(--fill-100); border-color: var(--line-soft); }
.dropzone { border-radius: var(--radius-card); border-color: var(--line-mid); background: var(--fill-100); }
.dropzone.is-over, .dropzone:focus-visible { border-color: var(--amber); background: var(--amber-soft); }
.hub-warn, .lead-conflict, .lead-urgent, .delete-confirm { border-radius: 12px; }
.qpaper { border-radius: 12px; border-color: var(--line-soft); }
.qwa { border-radius: 14px; background: var(--wa-soft); border-color: var(--wa-line); }
.suggest { border-radius: 14px; border-color: var(--line-soft); box-shadow: var(--shadow-float); padding: 6px; }
.suggest-item { border-radius: 8px; transition: background var(--t); }
.suggest-item:hover, .suggest-item.active { background: var(--fill-200); }
.suggest-item .kbd { border-radius: 4px; border-color: var(--line-mid); }
#toast {
  border-radius: 12px; background: rgba(15, 23, 42, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-float);
}

/* Sheets and modals. */
.sheet-backdrop, .drawer-backdrop, .qmodal-backdrop {
  background: rgba(15, 23, 42, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.drawer { border-radius: var(--radius-sheet) 0 0 var(--radius-sheet); box-shadow: -12px 0 40px rgba(15, 23, 42, .12); }
.drawer-head, .drawer-actions, .qmodal-head, .qmodal-foot { border-color: var(--line-soft); }
.drawer-close, .qmodal-close, .rail-close { color: var(--ink-500); transition: color var(--t); }
.drawer-close:hover, .rail-close:hover { color: var(--ink-900); }
.qmodal-foot { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.qmodal-foot .btn { border-radius: var(--radius-ctl); }
@media (min-width: 1024px) {
  .qmodal { border-radius: var(--radius-sheet); box-shadow: var(--shadow-float); }
}

/* ---- 5. Marketplace ---------------------------------------------------------- */
.search-hero { background: transparent; border-bottom: 0; }
.search-hero .page-title { font-weight: 700; letter-spacing: -0.03em; }
.search-hero .page-sub { color: var(--ink-700); }
.seg > label { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.near-btn { border-radius: var(--radius-ctl); border-color: var(--line-mid); transition: all var(--t); }
.near-btn[aria-expanded="true"], .near-btn.set { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); }
.trust-bar { color: var(--ink-500); }
.trust-bar span::before { color: #16a34a; }
.results-count { color: var(--ink-900); font-weight: 600; }
.filter-panel { padding: 16px; border-top: 1px solid var(--line-soft); }

/* The filter rail is a rigid column: a fixed head, a body that scrolls,
   and a foot that always sits below the last field - so "Show machines"
   can never land on top of the rate inputs. */
.filter-rail { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.rail-head { padding: 16px 18px 12px; margin: 0; border-bottom: 1px solid var(--line-soft); flex: none; }
.rail-head h2 { text-transform: none; letter-spacing: -0.02em; font-size: 17px; }
.rail-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px 18px 8px; display: flex; flex-direction: column; }
.rail-section { padding: 16px 0; border-top: 1px solid var(--line-soft); flex: none; }
.rail-body > .rail-section:first-child { border-top: 0; }
.rail-section .field + .field { margin-top: 12px; }
.rail-check { padding: 6px 0; color: var(--ink-700); }
.range-values {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  margin-top: 12px; padding: 6px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--fill-100);
}
.range-values .input { min-height: 36px; border-radius: 8px; font-size: 13px; padding: 4px 10px; }
.range-values span { text-align: center; color: var(--ink-500); font-size: 12px; }
.rail-foot {
  position: static; flex: none; display: flex; gap: 10px; margin: 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: #fff;
}
.rail-foot .btn { min-height: 42px; border-radius: var(--radius-ctl); }
.range-dual::before { background: var(--fill-300); }
.range-dual .range-fill { background: var(--amber); }
.range-dual input[type="range"]::-webkit-slider-thumb {
  width: 20px; height: 20px; margin-top: -8px; background: #fff; border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06);
}
.range-dual input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; background: #fff; border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06);
}
@media (max-width: 1023px) {
  .filter-rail { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; max-height: 86dvh; padding: 0; box-shadow: var(--shadow-float); }
}
@media (min-width: 1024px) {
  .filter-rail { max-height: calc(100vh - var(--nav-h) - 24px); overflow: hidden; }
  .rail-foot { padding-bottom: 12px; }
  .search-widget { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-card); padding: 12px; box-shadow: var(--shadow-card); }
  .term-toggle button { min-height: 42px; }
}

/* Machine cards: balanced padding, clear spec chips, aligned actions. */
.machine-card { padding: 0; overflow: hidden; }
.card-media { background: var(--fill-200); }
.card-media .card-photo { border-bottom: 1px solid var(--line-soft); }
.card-photo-empty { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink-500); }
.card-body { padding: 20px; gap: 8px; }
.card-heading { font-size: 17px; letter-spacing: -0.02em; }
.card-year { color: var(--ink-500); font-weight: 500; }
.card-owner, .card-loc { font-size: 13px; }
.card-loc svg { color: var(--ink-500); }
.card-specs { gap: 6px; margin-top: 4px; }
.spec { border-radius: 999px; background: var(--fill-200); border-color: transparent; color: var(--ink-700); font-size: 12px; padding: 4px 10px; font-weight: 500; }
.spec-cert { background: var(--amber-soft); color: var(--amber-deep); }
.spec-tool { background: var(--fill-300); color: var(--ink-900); }
.card-price-block { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.card-price-block .card-price { font-size: 20px; letter-spacing: -0.02em; color: var(--ink-900); }
.card-price small, .card-price-alt { color: var(--ink-500); }
.card-actions { gap: 10px; margin-top: 14px; }
.card-actions .btn { text-transform: none; letter-spacing: -0.01em; font-size: 13.5px; min-height: 42px; border-radius: var(--radius-ctl); }
.card-actions .btn:not(.btn-whatsapp) { background: var(--fill-200); border-color: transparent; color: var(--ink-900); }
.card-actions .btn:not(.btn-whatsapp):hover { background: var(--fill-300); }
.feed-list .card-media .card-photo { border-right-color: var(--line-soft); }
.card-edit { text-transform: none; letter-spacing: 0; color: var(--ink-700); }
.card-removed .card-photo { filter: grayscale(1) opacity(.8); }

/* ---- 6. Hub, studio, pipeline, onboarding ------------------------------------- */
.fleet-row .stat { border-radius: 12px; transition: all var(--t); }
.fleet-row .stat:hover { border-color: rgba(0, 0, 0, .18); transform: none; box-shadow: var(--shadow-card); }
.fleet-row .stat[aria-pressed="true"] .lbl { color: rgba(255, 255, 255, .72); }
.util-bar { background: var(--fill-300); }
.hub-chart .line, .hub-chart .dot { stroke: var(--ink-900); }
.activity-icon { background: var(--fill-200); }
.row-actions .btn, .lead-actions .btn, .rate-form-actions .btn, .map-toolbar .btn { border-radius: 8px; }

.studio-scan { background: var(--amber-soft); border-color: #fcd34d; }
.studio-actions {
  background: rgba(255, 255, 255, .88); border-top: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .08);
}
.studio-actions .btn-primary { background: var(--amber); border-color: transparent; }
.studio-actions .btn-primary:hover { background: var(--amber-hover); }
.rail-item.is-cover { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.strength-bar { background: var(--fill-300); }

.pipe-toolbar .chip { background: #fff; }
.stage-select[data-stage="new"] { background: var(--amber-soft); }
.notes-foot { color: var(--ink-500); }

/* Onboarding panel on desktop: one white card with a rounded top and the
   amber action as its rounded bottom. */
@media (min-width: 1024px) {
  .ph:not(:has(> .nav)) > .pad {
    background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    box-shadow: var(--shadow-card);
  }
  .ph:not(:has(> .nav)) > .pad + .pad { border-radius: 0; border-top: 0; }
  .ph:not(:has(> .nav)) > .cta {
    background: var(--amber); color: var(--amber-ink); border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
    box-shadow: var(--shadow-card);
  }
  .ph:not(:has(> .nav)) > .cta:hover { background: var(--amber-hover); }
  .ph > .cta .cta-label { background: var(--amber); color: var(--amber-ink); border-radius: 12px; transition: background var(--t); }
  .ph > .cta:hover .cta-label { background: var(--amber-hover); }
  .ph:not(:has(> .nav)) > .cta .cta-label { background: transparent; }
}

/* Motion respects the user's preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .machine-card:hover, .card-link:hover, a.stat:hover { transform: none; }
}