/* ===========================================================================
   AeroInfinite — Material Design 3 (Material You).
   Tonal color tokens, elevation, state layers, shape scale, refined type.
   =========================================================================== */

/* ---- Color tokens: light (default) ---- */
:root, [data-theme="light"] {
  --primary: #415f91;
  --on-primary: #ffffff;
  --primary-container: #d6e3ff;
  --on-primary-container: #001b3e;
  --secondary: #565f71;
  --on-secondary: #ffffff;
  --secondary-container: #dae2f9;
  --on-secondary-container: #131c2b;
  --tertiary: #6f5575;
  --tertiary-container: #f9d8fd;
  --on-tertiary-container: #281430;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --success: #2e6b3e;
  --success-container: #b1f1bb;
  --warning: #7d5700;

  --background: #f9f9ff;
  --on-background: #191c20;
  --surface: #f9f9ff;
  --surface-dim: #d8dae0;
  --surface-bright: #f9f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f3fa;
  --surface-container: #eceef4;
  --surface-container-high: #e7e8ee;
  --surface-container-highest: #e1e2e8;
  --on-surface: #191c20;
  --on-surface-variant: #43474e;
  --outline: #73777f;
  --outline-variant: #c3c6cf;
  --shadow: 0,0,0;

  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);

  --maxw: 1240px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-font: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---- Color tokens: dark ---- */
[data-theme="dark"] {
  --primary: #aac7ff;
  --on-primary: #0a305f;
  --primary-container: #284777;
  --on-primary-container: #d6e3ff;
  --secondary: #bec6dc;
  --on-secondary: #283141;
  --secondary-container: #3e4759;
  --on-secondary-container: #dae2f9;
  --tertiary: #ddbce0;
  --tertiary-container: #573e5c;
  --on-tertiary-container: #f9d8fd;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --success: #96d6a0;
  --success-container: #0f5223;
  --warning: #f0bf5a;

  --background: #111318;
  --on-background: #e2e2e9;
  --surface: #111318;
  --surface-dim: #111318;
  --surface-bright: #37393e;
  --surface-container-lowest: #0c0e13;
  --surface-container-low: #191c20;
  --surface-container: #1d2024;
  --surface-container-high: #282a2f;
  --surface-container-highest: #33353a;
  --on-surface: #e2e2e9;
  --on-surface-variant: #c3c6cf;
  --outline: #8d9199;
  --outline-variant: #43474e;
  --shadow: 0,0,0;

  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font);
  background: var(--background); color: var(--on-background);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
  overflow-x: hidden;
}
::selection { background: var(--primary-container); color: var(--on-primary-container); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* SVG icons */
.svg-icon { width: 24px; height: 24px; display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.svg-icon.s20 { width: 20px; height: 20px; }
.svg-icon.s18 { width: 18px; height: 18px; }
.svg-icon.s40 { width: 40px; height: 40px; }

/* ===== TYPE SCALE ====================================================== */
.display-l, .headline-l, .headline-m, .title-l, h1, h2, h3, .brand { font-family: var(--display-font); letter-spacing: 0; }
.display-l { font-size: clamp(40px,6vw,57px); line-height: 1.05; font-weight: 700; }
.headline-l { font-size: 32px; line-height: 1.22; font-weight: 700; }
.headline-m { font-size: 28px; line-height: 1.25; font-weight: 700; }
.title-l { font-size: 22px; line-height: 1.27; font-weight: 700; }
.title-m { font-size: 16px; line-height: 1.5; font-weight: 600; letter-spacing: 0; }
.label-l { font-size: 14px; line-height: 1.43; font-weight: 600; letter-spacing: 0; }
.label-m { font-size: 12px; line-height: 1.33; font-weight: 600; letter-spacing: 0; }
.body-l { font-size: 16px; line-height: 1.5; }
.body-m { font-size: 14px; line-height: 1.43; }
.body-s { font-size: 12px; line-height: 1.33; }
.muted { color: var(--on-surface-variant); }
.mono { font-family: var(--mono); }
.center { text-align: center; }

/* layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.flex { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px} .mt24{margin-top:24px}

/* ===== TOP APP BAR ===================================================== */
.appbar { position: sticky; top: 0; z-index: 50; background: var(--surface-container);
  color: var(--on-surface); }
.appbar.scrolled { box-shadow: var(--elev-2); }
.appbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; height: 64px;
  display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 20px; }
.brand .logo { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  background: var(--primary-container); color: var(--on-primary-container); }
.brand .brand-logo { width: 78px; height: 56px; overflow: hidden; border-radius: 0; background: transparent; color: inherit; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand .accent { color: var(--primary); }
.appbar-actions { display: flex; align-items: center; gap: 4px; }

/* ===== BUTTONS (MD3) =================================================== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px; border-radius: 20px; font-size: 14px; font-weight: 600; letter-spacing: 0;
  border: none; background: transparent; color: var(--primary); overflow: hidden; transition: box-shadow .2s; }
.btn .svg-icon { width: 18px; height: 18px; }
.btn::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; }
.btn:hover::before { opacity: .08; }
.btn:active::before { opacity: .12; }
.btn-filled { background: var(--primary); color: var(--on-primary); }
.btn-filled:hover { box-shadow: var(--elev-1); }
.btn-tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn-outlined { border: 1px solid var(--outline); color: var(--primary); }
.btn-text { padding: 0 12px; }
.btn-block { width: 100%; }
.btn-sm { height: 36px; padding: 0 18px; }

/* icon button */
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: none; color: var(--on-surface-variant); overflow: hidden; }
.icon-btn::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; }
.icon-btn:hover::before { opacity: .08; }

/* FAB */
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 40; height: 56px; min-width: 56px;
  padding: 0 20px; border-radius: 16px; background: var(--primary-container); color: var(--on-primary-container);
  border: none; display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500;
  box-shadow: var(--elev-3); transition: box-shadow .2s; }
.fab:hover { box-shadow: var(--elev-3); filter: brightness(1.02); }

/* ===== CARDS =========================================================== */
.card { display: block; background: var(--surface-container-low); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--outline-variant); position: relative; transition: box-shadow .2s, background .2s; }
.card::before { content: ''; position: absolute; inset: 0; background: var(--on-surface); opacity: 0; transition: opacity .15s; pointer-events: none; }
.card:hover { box-shadow: var(--elev-1); }
.card:hover::before { opacity: .04; }
.card-elevated { border: none; box-shadow: var(--elev-1); background: var(--surface-container-low); }
.panel { background: var(--surface-container-low); border-radius: 16px; border: 1px solid var(--outline-variant); }

/* ===== HERO ============================================================ */
.hero { position: relative; background: var(--surface-container-low); overflow: hidden; }
.hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 72px 24px 68px; position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr); align-items: center; gap: 44px; }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-blob { position: absolute; top: -200px; right: -150px; width: 600px; height: 600px; border-radius: 50%;
  background: var(--primary-container); opacity: .4; filter: blur(20px); z-index: 0; }
/* fade art under the text column so copy stays readable */
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--surface-container-low) 0%, color-mix(in srgb, var(--surface-container-low) 55%, transparent) 38%, transparent 72%); }
.kicker { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 8px;
  background: var(--tertiary-container); color: var(--on-tertiary-container); font-size: 14px; font-weight: 500; }
.kicker .svg-icon { width: 18px; height: 18px; }
h1.title { margin: 28px 0 0; max-width: 16ch; font-weight: 400; }
/* phrases stacked in one grid cell so h1 keeps the tallest phrase's height — no shift on rotate */
.title .line2 { display: grid; color: var(--primary); }
.title .line2 .phrase { grid-area: 1 / 1; opacity: 0; transition: opacity .28s ease; }
.title .line2 .phrase.is-active { opacity: 1; }
.lead { margin: 20px 0 0; max-width: 56ch; color: var(--on-surface-variant); }

/* Product-led hero visual: brand mark + real, recent inventory. */
.hero-visual { position: relative; min-width: 0; min-height: 500px; isolation: isolate; animation-delay: .12s; }
.hero-visual::before { content: ''; position: absolute; inset: 20px -24px 12px; z-index: -2; border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 39%, color-mix(in srgb, var(--primary) 18%, transparent) 39.3% 39.8%, transparent 40.2% 55%, color-mix(in srgb, var(--primary) 12%, transparent) 55.3% 55.8%, transparent 56.2%),
    radial-gradient(circle at center, color-mix(in srgb, var(--primary-container) 70%, transparent), transparent 68%);
  opacity: .9; }
.hero-visual::after { content: ''; position: absolute; left: 5%; right: 0; top: 49%; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 28%, transparent), transparent); }
.hero-orbit { position: absolute; inset: 52px 6px 62px 24px; z-index: -1; border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 50%; transform: rotate(-8deg); }
.hero-orbit::before, .hero-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 12%, transparent), 0 0 18px var(--primary); }
.hero-orbit::before { left: 9%; top: 21%; }
.hero-orbit::after { right: 4%; bottom: 28%; }
.hero-mark { position: absolute; top: 42px; left: 50%; width: min(118%, 540px); height: auto; transform: translateX(-50%);
  object-fit: contain; opacity: .76; filter: saturate(.9) contrast(1.04) drop-shadow(0 18px 30px rgba(20, 55, 110, .18));
  animation: hero-mark-float 8s ease-in-out infinite; }

.inventory-panel { position: absolute; z-index: 3; left: 6px; right: 0; bottom: 8px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 82%, transparent); border-radius: 20px;
  background: color-mix(in srgb, var(--surface-container-lowest) 90%, transparent); box-shadow: 0 22px 50px rgba(20, 38, 68, .18);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  animation: inventory-panel-float 8s ease-in-out infinite; }
.inventory-panel-head, .inventory-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inventory-panel-head { padding: 13px 16px; border-bottom: 1px solid var(--outline-variant); font-size: 12px; }
.inventory-live { display: inline-flex; align-items: center; gap: 8px; color: var(--on-surface); font-weight: 700; letter-spacing: .02em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
  animation: live-pulse 2.4s ease-out infinite; }
.inventory-total { color: var(--on-surface-variant); }
.inventory-list { padding: 4px 8px; }
.inventory-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 8px; }
.inventory-row + .inventory-row { border-top: 1px solid var(--outline-variant); }
.inventory-index { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  background: var(--primary-container); color: var(--on-primary-container); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.inventory-part { min-width: 0; display: grid; }
.inventory-pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-surface); font-family: var(--mono); font-size: 13px; font-weight: 600; }
.inventory-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-surface-variant); font-size: 11px; }
.inventory-availability { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px; color: var(--success); text-align: right; }
.inventory-availability strong { font-family: var(--mono); font-size: 16px; }
.inventory-availability span { font-size: 10px; font-weight: 600; }
.inventory-panel-foot { padding: 10px 16px; background: color-mix(in srgb, var(--primary-container) 32%, transparent);
  color: var(--on-surface-variant); font-size: 10px; font-weight: 600; }
.inventory-panel-foot span { display: inline-flex; align-items: center; gap: 6px; }
.inventory-panel-foot .svg-icon { color: var(--primary); }

.network-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--outline-variant);
  border-radius: 14px; background: var(--surface-container-lowest); color: var(--on-surface); box-shadow: var(--elev-1); }
.network-chip-top { top: 50px; right: -8px; }
.network-chip-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px;
  background: var(--primary); color: var(--on-primary); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.network-chip strong, .network-chip small { display: block; line-height: 1.25; white-space: nowrap; }
.network-chip strong { font-size: 11px; }
.network-chip small { margin-top: 2px; color: var(--on-surface-variant); font-size: 9px; }

[data-theme="dark"] .hero-mark { opacity: .58; filter: saturate(.85) contrast(1.08) drop-shadow(0 20px 35px rgba(60, 120, 220, .18)); }
[data-theme="dark"] .inventory-panel { background: color-mix(in srgb, var(--surface-container-lowest) 88%, transparent); box-shadow: 0 22px 50px rgba(0, 0, 0, .36); }

@keyframes hero-mark-float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
@keyframes inventory-panel-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes live-pulse { 0%, 45% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
  75%, 100% { box-shadow: 0 0 0 9px transparent; } }

/* ===== TEXT FIELD (filled, MD3) ======================================= */
.field { position: relative; max-width: 720px; margin: 36px 0 0; }
.field.search { }
.field input, .field textarea, .text-input {
  width: 100%; height: 64px; padding: 0 56px 0 56px; font-size: 16px; font-family: var(--font);
  color: var(--on-surface); background: var(--surface-container-highest);
  border: none; border-bottom: 1px solid var(--on-surface-variant);
  border-radius: 8px 8px 0 0; outline: none; transition: border-color .15s, background .15s; }
.field input::placeholder, .text-input::placeholder { color: var(--on-surface-variant); }
.field input:focus, .text-input:focus { border-bottom: 2px solid var(--primary); }
.field .lead-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--on-surface-variant); }
.field .trail { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

/* small outlined text input / select */
.text-input { height: 48px; padding: 0 16px; background: transparent; border: 1px solid var(--outline);
  border-radius: 8px; }
.text-input:focus { border: 2px solid var(--primary); }
select.text-input { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2373777f' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
textarea.text-input { height: auto; padding: 12px 16px; resize: vertical; line-height: 1.6; font-family: var(--mono); }

/* ===== CHIPS =========================================================== */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--outline); background: transparent; color: var(--on-surface-variant);
  font-size: 14px; font-weight: 500; transition: background .15s, border-color .15s; }
.chip:hover { background: var(--surface-container-high); }
.chip.assist { color: var(--on-surface); }

/* ===== STATS =========================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 24px; border-radius: 16px; background: var(--surface-container); }
.stat .num { font-size: 40px; font-weight: 400; line-height: 1; color: var(--primary); }
.stat .lbl { color: var(--on-surface-variant); font-size: 14px; margin-top: 8px; }

/* ===== SECTIONS ======================================================== */
.section { padding: 56px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head h2 { margin: 0; }
.link { color: var(--primary); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { text-decoration: underline; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

/* ===== PART CARD ======================================================= */
.pc-in { padding: 20px; }
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pc-pn { font-family: var(--mono); font-weight: 500; font-size: 16px; }
.pc-desc { font-size: 14px; color: var(--on-surface-variant); margin-top: 2px; }
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 16px; font-size: 14px; }
.pc-grid .k { color: var(--on-surface-variant); font-size: 12px; }
.pc-grid .v { font-weight: 500; margin-top: 2px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--outline-variant); font-size: 14px; }
.pc-foot .ata { color: var(--on-surface-variant); }
.pc-foot .more { color: var(--primary); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.in-stock { color: var(--success); } .out-stock { color: var(--error); }

/* condition chips (assist) */
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0; }
.pill-ok { background: var(--success-container); color: var(--on-background); }
.pill-blue { background: var(--primary-container); color: var(--on-primary-container); }
.pill-warn { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.pill-bad { background: var(--error-container); color: var(--on-error-container); }
.pill-muted { background: var(--surface-container-high); color: var(--on-surface-variant); }

/* ===== SEARCH PAGE ===================================================== */
.search-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.filters { position: sticky; top: 88px; padding: 20px; }
.filters .f-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.filters .f-group { margin-bottom: 18px; }
.filters label { display: block; font-size: 12px; color: var(--on-surface-variant); margin-bottom: 6px; }
.result-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
  font-size: 14px; color: var(--on-surface-variant); }
.result-bar b { color: var(--on-surface); }
.empty { padding: 72px 24px; text-align: center; border-radius: 16px; background: var(--surface-container); }
.empty .svg-icon { color: var(--on-surface-variant); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.pager .pg-num { font-size: 14px; color: var(--on-surface-variant); }

.quote-panel { padding: 14px 16px; margin-bottom: 16px; }
.quote-panel summary { cursor: pointer; color: var(--primary); }
.quote-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; align-items: start; }
.quote-form textarea { grid-column: 1 / -1; }
.quote-form .btn { height: 48px; border-radius: 24px; }

/* Repair availability on the part page. Shows that repair exists and how
   fast -- never which repair center, see CLAUDE.md business rule 1. */
.repair-banner { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--outline-variant); border-radius: 16px; background: var(--surface-container-low); }
.repair-banner-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  background: var(--primary-container); color: var(--on-primary-container); }
.repair-banner-copy strong { display: block; font-size: 15px; }
.repair-banner-copy p { margin: 4px 0 0; color: var(--on-surface-variant); font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) {
  .repair-banner { grid-template-columns: 44px minmax(0, 1fr); }
  .repair-banner > .btn { grid-column: 1 / -1; width: 100%; }
}

/* ===== SEARCH WORKSPACE =============================================== */
.search-page { position: relative; min-height: 760px; padding-bottom: 54px; }
.search-page.has-selection { padding-bottom: 160px; }
.search-utility-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--outline-variant);
  background: linear-gradient(115deg, var(--surface-container-low) 0 56%, color-mix(in srgb, var(--primary-container) 52%, var(--surface-container-low)) 100%); }
.search-utility-hero::before { content: ''; position: absolute; width: 440px; height: 440px; right: 10%; top: -300px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); box-shadow: 0 0 0 70px color-mix(in srgb, var(--primary) 5%, transparent), 0 0 0 145px color-mix(in srgb, var(--primary) 4%, transparent); }
.search-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(470px, .9fr); align-items: center; gap: 54px; padding-top: 42px; padding-bottom: 91px; }
.search-eyebrow, .search-result-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.search-eyebrow .live-dot { width: 7px; height: 7px; }
.search-hero-copy h1 { max-width: 760px; margin: 11px 0 0; font-size: clamp(32px, 3.3vw, 45px); line-height: 1.08; font-weight: 600; letter-spacing: -.035em; }
.search-hero-copy h1 span { color: var(--primary); }
.search-hero-copy p { max-width: 66ch; margin: 13px 0 0; color: var(--on-surface-variant); font-size: 13px; line-height: 1.55; }
.search-hero-signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 18px;
  background: color-mix(in srgb, var(--surface-container-lowest) 84%, transparent); box-shadow: var(--elev-1); backdrop-filter: blur(14px); }
.search-signal { min-width: 0; display: grid; align-content: start; gap: 9px; padding: 16px; }
.search-signal + .search-signal { border-left: 1px solid var(--outline-variant); }
.search-signal-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-container); color: var(--on-primary-container); }
.search-signal-ai .search-signal-icon { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.search-signal strong, .search-signal small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-signal strong { font-size: 11px; }
.search-signal small { margin-top: 2px; color: var(--on-surface-variant); font-size: 9px; }

.search-content { position: relative; z-index: 3; margin-top: -51px; }
.search-command { padding: 17px; border: 1px solid color-mix(in srgb, var(--outline-variant) 82%, transparent); border-radius: 22px;
  background: var(--surface-container-lowest); box-shadow: 0 18px 45px rgba(25, 48, 84, .14); }
.search-command-head, .search-command-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.search-command-head { padding: 0 4px 11px; }
.search-command-head > div { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.search-command-label { color: var(--on-surface); font-size: 12px; font-weight: 700; }
.search-command-help { color: var(--on-surface-variant); font-size: 10px; }
.search-key-hint { color: var(--on-surface-variant); font-size: 9px; white-space: nowrap; }
.search-key-hint kbd { min-width: 23px; height: 23px; display: inline-grid; place-items: center; margin-right: 4px; border: 1px solid var(--outline-variant); border-radius: 6px;
  background: var(--surface-container-low); color: var(--on-surface); font-family: var(--mono); box-shadow: 0 1px 0 var(--outline-variant); }
.search-query-field { min-height: 62px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px auto; align-items: center; gap: 2px; padding: 6px;
  border: 2px solid transparent; border-radius: 16px; background: var(--surface-container-low); transition: border-color .15s, box-shadow .15s, background .15s; }
.search-query-field:focus-within { border-color: var(--primary); background: var(--surface-container-lowest); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 11%, transparent); }
.search-query-icon { justify-self: center; color: var(--primary); }
.search-query-field input { min-width: 0; width: 100%; height: 48px; padding: 0 8px; border: 0; outline: 0; background: transparent; color: var(--on-surface);
  font-family: var(--font); font-size: 16px; }
.search-query-field input::placeholder { color: var(--on-surface-variant); }
.search-query-field input::-webkit-search-cancel-button { display: none; }
.search-query-clear { width: 44px; height: 44px; }
.search-submit { min-width: 104px; height: 48px; border-radius: 14px; }
.search-command-foot { padding: 12px 4px 0; color: var(--on-surface-variant); font-size: 10px; }
.search-examples { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.search-examples > span { margin-right: 2px; font-weight: 600; }
.search-examples a { padding: 4px 8px; border-radius: 7px; background: var(--surface-container); color: var(--on-surface); font-family: var(--mono); font-size: 9px; }
.search-examples a:hover { background: var(--primary-container); color: var(--on-primary-container); }
.search-bulk-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--on-surface-variant); white-space: nowrap; }
.search-bulk-link strong { color: var(--primary); }

.search-layout-new { display: grid; grid-template-columns: 255px minmax(0, 1fr); align-items: start; gap: 26px; margin-top: 30px; }
.search-filter-rail { position: sticky; top: 82px; overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-low); }
.search-filter-rail > summary { display: none; list-style: none; }
.search-filter-rail > summary::-webkit-details-marker { display: none; }
.search-filter-content { padding: 19px; }
.search-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 19px; }
.search-filter-head > div > span, .search-filter-head > div > small { display: block; }
.search-filter-head > div > span { font-family: var(--display-font); font-size: 15px; font-weight: 600; }
.search-filter-head > div > small { margin-top: 2px; color: var(--on-surface-variant); font-size: 9px; }
.search-filter-head .btn { height: 32px; padding: 0 10px; }
.search-filter-group + .search-filter-group { margin-top: 15px; }
.search-filter-group label { display: block; margin-bottom: 6px; color: var(--on-surface-variant); font-size: 10px; font-weight: 600; }
.search-filter-group .text-input { height: 44px; font-size: 12px; }
.search-filter-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; padding: 11px; border-radius: 11px; background: var(--primary-container);
  color: var(--on-primary-container); font-size: 9px; line-height: 1.45; }
.search-filter-note .svg-icon { width: 15px; height: 15px; margin-top: 1px; }
.search-filter-count { padding: 4px 7px; border-radius: 7px; background: var(--primary-container); color: var(--on-primary-container); font-size: 9px; font-weight: 700; }
.search-filter-clear-mobile { display: none; }

.search-results-column { position: relative; min-width: 0; }
.search-progress { min-height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 0 4px; visibility: hidden; }
.search-progress.htmx-request { visibility: visible; opacity: 1; }
.search-progress .spinner { width: 16px; height: 16px; border-width: 2px; }
.search-progress strong, .search-progress small { display: block; }
.search-progress strong { font-size: 10px; }
.search-progress small { color: var(--on-surface-variant); font-size: 8px; }
.search-results-region { min-width: 0; scroll-margin-top: 86px; outline: none; transition: opacity .15s; }
.search-results-region[aria-busy="true"] { opacity: .48; }
.search-skeleton-list { display: grid; gap: 10px; }
.search-skeleton-row { min-height: 142px; display: grid; grid-template-columns: 1.4fr 1fr .5fr; align-items: center; gap: 26px; padding: 22px; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-low); }
.search-skeleton-row .skel-line { margin: 0; }

.search-result-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 0 2px 17px; }
.search-result-head h2 { margin: 7px 0 0; font-size: clamp(27px, 3vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -.025em; }
.search-result-head p { margin: 7px 0 0; color: var(--on-surface-variant); font-size: 11px; }
.search-result-head p strong { color: var(--on-surface); font-weight: 600; }
.search-select-guidance { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; max-width: 250px; padding: 10px 12px; border: 1px solid var(--outline-variant); border-radius: 13px; background: var(--surface-container-low); }
.search-select-guidance > span:first-child { color: var(--primary); }
.search-select-guidance strong, .search-select-guidance small { display: block; }
.search-select-guidance strong { font-size: 10px; }
.search-select-guidance small { margin-top: 2px; color: var(--on-surface-variant); font-size: 8px; }
.search-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; color: var(--on-surface-variant); font-size: 9px; }
.search-active-filters > span { margin-right: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.search-active-filters button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--outline-variant); border-radius: 9px;
  background: var(--surface-container-low); color: var(--on-surface-variant); font-family: var(--font); font-size: 9px; cursor: pointer; }
.search-active-filters button:hover { border-color: var(--primary); color: var(--primary); }
.search-active-filters button b { color: var(--on-surface); }
.search-active-filters .svg-icon { width: 13px; height: 13px; }
.search-result-list { display: grid; gap: 10px; }
.search-result-card { min-width: 0; display: grid; grid-template-columns: 44px minmax(210px, 1.35fr) minmax(210px, 1fr) 108px 144px; align-items: center; gap: 16px;
  padding: 18px; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; }
.search-result-card:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--outline-variant)); box-shadow: var(--elev-1); transform: translateY(-1px); }
.search-result-card.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary-container) 16%, var(--surface-container-lowest)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
.search-result-card.is-exact { border-left: 4px solid var(--primary); }
.search-result-select { position: relative; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.search-result-select input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.search-result-select span { width: 20px; height: 20px; display: block; border: 2px solid var(--outline); border-radius: 6px; background: var(--surface-container-lowest); }
.search-result-select input:checked + span { border-color: var(--primary); background: var(--primary); }
.search-result-select input:disabled + span { cursor: not-allowed; opacity: .4; }
.search-result-select input:checked + span::after { content: ''; width: 8px; height: 4px; display: block; margin: 5px 0 0 4px; border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg); }
.search-result-select input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 3px; }
.search-result-identity { min-width: 0; }
.search-exact-badge { display: block; width: max-content; margin-bottom: 5px; padding: 3px 7px; border-radius: 6px; background: var(--primary-container); color: var(--on-primary-container); font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.search-result-pn { display: block; overflow: hidden; color: var(--on-surface); font-family: var(--mono); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.search-result-pn:hover { color: var(--primary); text-decoration: underline; }
.search-result-identity p { display: -webkit-box; overflow: hidden; margin: 4px 0 0; color: var(--on-surface-variant); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.search-result-source { display: block; margin-top: 7px; color: var(--on-surface-variant); font-size: 9px; font-weight: 600; }
.search-result-specs { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; margin: 0; }
.search-result-specs div { min-width: 0; }
.search-result-specs dt { color: var(--on-surface-variant); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.search-result-specs dd { overflow: hidden; margin: 2px 0 0; color: var(--on-surface); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.search-result-availability { min-width: 0; text-align: right; }
.search-result-availability > span { display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--success); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.search-stock-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 12%, transparent); }
.search-result-availability strong { display: block; margin-top: 4px; color: var(--success); font-family: var(--mono); font-size: 23px; line-height: 1; }
.search-result-availability small { display: block; margin-top: 3px; color: var(--on-surface-variant); font-size: 9px; }
.search-result-availability.is-unavailable > span, .search-result-availability.is-unavailable strong { color: var(--on-surface-variant); }
.search-result-action { height: 42px; padding: 0 14px; border-radius: 12px; font-size: 11px; white-space: nowrap; }

.search-empty-state { padding: 54px 42px 34px; border: 1px solid var(--outline-variant); border-radius: 22px; background: var(--surface-container-low); text-align: center; }
.search-empty-icon { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 22px; background: var(--surface-container-high); color: var(--on-surface-variant); }
.search-empty-state h2 { margin: 9px 0 0; font-size: 28px; font-weight: 600; }
.search-empty-state > p { max-width: 58ch; margin: 9px auto 0; color: var(--on-surface-variant); font-size: 12px; }
.search-empty-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 21px; }
.search-empty-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 35px; padding-top: 20px; border-top: 1px solid var(--outline-variant); text-align: left; }
.search-empty-tips span { display: flex; align-items: flex-start; gap: 8px; color: var(--on-surface-variant); font-size: 9px; line-height: 1.45; }
.search-empty-tips b { color: var(--primary); font-family: var(--mono); font-size: 8px; }
.search-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--outline-variant); }
.search-pager > div:last-child { text-align: right; }
.search-pager > span { text-align: center; }
.search-pager > span strong, .search-pager > span small { display: block; }
.search-pager > span strong { font-size: 11px; }
.search-pager > span small { color: var(--on-surface-variant); font-size: 9px; }

.search-quote-dock { position: fixed; z-index: 45; left: 50%; bottom: 18px; width: min(930px, calc(100% - 36px)); overflow: hidden; transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--outline-variant)); border-radius: 20px; background: color-mix(in srgb, var(--surface-container-lowest) 96%, transparent); box-shadow: 0 22px 60px rgba(12, 28, 55, .28); backdrop-filter: blur(18px); }
.search-quote-dock-bar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 13px 11px 18px; }
.search-selection-summary { display: flex; align-items: center; gap: 11px; }
.search-selection-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container); }
.search-selection-summary strong { font-family: var(--mono); font-size: 16px; }
.search-selection-summary small { display: block; margin-top: 1px; color: var(--on-surface-variant); font-size: 8px; }
.search-selection-actions { display: flex; align-items: center; gap: 4px; }
.search-quote-dock-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; padding: 18px; border-top: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.search-quote-dock-form label { min-width: 0; display: grid; gap: 6px; color: var(--on-surface-variant); font-size: 9px; }
.search-quote-dock-form label > span { display: flex; justify-content: space-between; gap: 8px; }
.search-quote-dock-form label b { color: inherit; font-size: 8px; font-weight: 500; opacity: .7; }
.search-quote-dock-form .text-input { width: 100%; height: 44px; background: var(--surface-container-lowest); font-size: 11px; }
.search-quote-dock-form textarea.text-input { min-height: 70px; }
.search-quote-note { grid-column: 1 / 4; }
.search-quote-send { grid-column: 4; align-self: end; min-height: 46px; }
.search-quote-response { grid-column: 1 / -1; }
.quote-feedback { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 11px; font-size: 10px; line-height: 1.45; }
.quote-feedback-error { background: var(--error-container); color: var(--on-error-container); }
.quote-feedback-success { background: var(--success-container); color: var(--on-surface); }
.quote-feedback strong, .quote-feedback small { display: block; }
.quote-feedback small { margin-top: 2px; color: inherit; opacity: .78; }

.home-search-results { padding: 20px 0 12px; }
.home-search-result-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; color: var(--on-surface-variant); font-size: 11px; }
.home-search-result-head strong { color: var(--on-surface); }
.home-search-empty { display: flex; align-items: center; gap: 14px; margin: 20px 0; padding: 18px; border: 1px solid var(--outline-variant); border-radius: 16px; background: var(--surface-container-low); }
.home-search-empty > .svg-icon { color: var(--on-surface-variant); }
.home-search-empty > span { min-width: 0; flex: 1; }
.home-search-empty strong, .home-search-empty small { display: block; }
.home-search-empty small { margin-top: 2px; color: var(--on-surface-variant); font-size: 10px; }

.search-page button:focus-visible, .search-page a:focus-visible, .search-page input:focus-visible, .search-page select:focus-visible, .search-page textarea:focus-visible, .search-page summary:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 3px; }
[data-theme="dark"] .search-command { box-shadow: 0 18px 45px rgba(0, 0, 0, .3); }
[data-theme="dark"] .search-quote-dock { box-shadow: 0 22px 60px rgba(0, 0, 0, .48); }
[data-theme="dark"] select.text-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23c3c6cf' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

@media (max-width: 1120px) {
  .search-hero-inner { grid-template-columns: 1fr; gap: 22px; }
  .search-hero-signals { width: min(100%, 700px); }
  .search-result-card { grid-template-columns: 44px minmax(200px, 1.25fr) minmax(190px, 1fr) 100px; }
  .search-result-action { grid-column: 2 / -1; justify-self: end; width: 150px; }
}

@media (max-width: 960px) {
  .search-hero-inner { padding-top: 34px; padding-bottom: 84px; }
  .search-layout-new { grid-template-columns: 1fr; gap: 12px; }
  .search-filter-rail { position: static; }
  .search-filter-rail > summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 17px; cursor: pointer; }
  .search-filter-rail > summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
  .search-filter-rail[open] > summary { border-bottom: 1px solid var(--outline-variant); }
  .search-filter-head { display: none; }
  .search-filter-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .search-filter-group + .search-filter-group { margin-top: 0; }
  .search-filter-note { grid-column: 1 / -1; margin-top: 0; }
  .search-filter-clear-mobile { grid-column: 1 / -1; display: inline-flex; justify-self: start; min-height: 44px; }
  .search-progress { min-height: 34px; }
  .search-result-head { align-items: flex-start; }
  .search-result-card { grid-template-columns: 44px minmax(180px, 1fr) minmax(190px, .9fr) 105px; }
  .search-result-action { grid-column: 2 / -1; }
}

@media (max-width: 700px) {
  .search-page.has-search-state .search-hero-signals { display: none; }
  .search-page.has-search-state .search-hero-inner { padding-bottom: 72px; }
  .search-hero-signals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-command-head > div { display: block; }
  .search-command-help { display: block; margin-top: 2px; }
  .search-command-foot { align-items: flex-start; flex-direction: column; }
  .search-bulk-link { white-space: normal; }
  .search-result-head { flex-direction: column; gap: 14px; }
  .search-select-guidance { width: 100%; max-width: none; }
  .search-result-card { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .search-result-identity { align-self: start; }
  .search-result-specs { grid-column: 1 / -1; padding-top: 13px; border-top: 1px solid var(--outline-variant); }
  .search-result-availability { grid-column: 1 / 2; text-align: left; }
  .search-result-availability > span { justify-content: flex-start; }
  .search-result-action { grid-column: 2; justify-self: stretch; width: 100%; min-height: 44px; }
  .search-result-identity p { font-size: 11px; }
  .search-result-source { font-size: 9px; }
  .search-result-specs dt, .search-result-availability > span { font-size: 9px; }
  .search-result-specs dd { font-size: 11px; }
  .search-result-availability small { font-size: 9px; }
  .search-empty-tips { grid-template-columns: 1fr; }
  .search-quote-dock-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-quote-note { grid-column: 1 / -1; }
  .search-quote-send { grid-column: 2; }
}

@media (max-width: 560px) {
  .search-page { padding-bottom: 36px; }
  .search-page.has-selection { padding-bottom: 150px; }
  .search-hero-inner, .search-content { padding-left: 16px; padding-right: 16px; }
  .search-hero-copy h1 { font-size: 35px; }
  .search-hero-signals { border-radius: 15px; }
  .search-signal { gap: 7px; padding: 11px 9px; }
  .search-signal-icon { width: 28px; height: 28px; }
  .search-signal strong { font-size: 9px; }
  .search-signal small { font-size: 8px; }
  .search-command { padding: 12px; border-radius: 18px; }
  .search-command-head { padding-bottom: 9px; }
  .search-key-hint { display: none; }
  .search-query-field { grid-template-columns: 34px minmax(0, 1fr) 44px auto; min-height: 58px; padding: 4px; }
  .search-query-field input { padding: 0 4px; font-size: 16px; }
  .search-submit { min-width: 78px; height: 44px; padding: 0 14px; }
  .search-examples { gap: 5px; }
  .search-examples a { min-height: 34px; display: inline-flex; align-items: center; }
  .search-examples a:nth-of-type(n+4) { display: none; }
  .search-filter-content { grid-template-columns: 1fr; padding: 15px; }
  .search-filter-note { grid-column: 1; }
  .search-filter-clear-mobile { grid-column: 1; }
  .search-filter-group .text-input { height: 48px; font-size: 16px; }
  .search-results-region { scroll-margin-top: 74px; }
  .search-result-head h2 { font-size: 28px; }
  .search-empty-state { padding: 38px 18px 24px; }
  .search-empty-actions .btn { width: 100%; }
  .search-pager { gap: 8px; }
  .search-pager .btn { min-width: 0; height: 42px; padding: 0 13px; font-size: 11px; }
  .search-quote-dock { bottom: 0; width: 100%; max-height: 86vh; overflow-y: auto; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 20px 20px 0 0; }
  .search-quote-dock-bar { align-items: stretch; flex-direction: column; gap: 9px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .search-selection-actions { width: 100%; }
  .search-selection-actions .btn { min-height: 44px; }
  .search-selection-actions .btn-filled { flex: 1; }
  .search-quote-dock-form { grid-template-columns: 1fr; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); }
  .search-quote-dock-form .text-input { min-height: 48px; font-size: 16px; }
  .search-quote-note, .search-quote-send { grid-column: 1; }
  .search-quote-send { width: 100%; }
  .home-search-empty { align-items: flex-start; flex-wrap: wrap; }
  .home-search-empty .btn { width: 100%; }
}

@media (max-width: 360px) {
  .search-hero-inner, .search-content { padding-left: 12px; padding-right: 12px; }
  .search-signal-icon { display: none; }
  .search-signal { padding: 10px 7px; }
  .search-query-field { grid-template-columns: 30px minmax(0, 1fr) 44px auto; }
  .search-submit { min-width: 64px; padding: 0 10px; font-size: 12px; }
  .search-result-card { padding: 14px; }
  .search-result-specs { gap: 10px; }
}

/* skeleton */
.skel { border-radius: 16px; padding: 20px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); }
.skel-line { height: 14px; border-radius: 8px; margin-bottom: 12px; background: var(--surface-container-high);
  background-image: linear-gradient(90deg, transparent, var(--surface-container-highest), transparent);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ===== PART DETAIL ===================================================== */
.detail { padding: 32px; }
.detail .pn { font-family: var(--mono); font-size: clamp(28px,4.5vw,44px); font-weight: 500; letter-spacing: 0; margin: 4px 0 0; }
.detail .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--outline-variant); }
.detail .spec .k { font-size: 12px; color: var(--on-surface-variant); }
.detail .spec .v { font-size: 18px; font-weight: 500; margin-top: 4px; }
.qty-big { font-size: 26px; font-weight: 500; }

/* ===== TABLES ========================================================== */
.table-wrap { border-radius: 16px; overflow: hidden; border: 1px solid var(--outline-variant); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface-container-low); }
table.tbl thead { color: var(--on-surface-variant); text-align: left; }
table.tbl th { padding: 14px 18px; font-weight: 500; font-size: 12px; border-bottom: 1px solid var(--outline-variant); }
table.tbl td { padding: 14px 18px; border-bottom: 1px solid var(--outline-variant); }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--surface-container); }
.admin-filter { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr)) auto auto;
  gap: 10px; padding: 14px; margin-bottom: 16px; align-items: center; }
.admin-table td { vertical-align: middle; }
.admin-actions { display: flex; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.admin-actions form { margin: 0; }
.admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 24px; }
.admin-form label { display: grid; gap: 6px; color: var(--on-surface-variant); font-size: 12px; }
.admin-form .wide { grid-column: 1 / -1; }
.admin-form .check-label { display: flex; align-items: center; gap: 8px; color: var(--on-surface); font-size: 14px; }
@media (max-width: 980px) {
  .admin-filter, .admin-form { grid-template-columns: 1fr; }
}

/* ===== MODAL / DIALOG ================================================== */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5); display: grid; place-items: center; padding: 24px; }
.modal { width: 100%; max-width: 480px; padding: 24px; border-radius: 28px; background: var(--surface-container-high); }
.download-options { display: grid; gap: 10px; margin-top: 20px; }
.download-option { width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--outline-variant); border-radius: 8px; background: var(--surface-container-low); color: var(--on-surface); cursor: pointer; }
.download-option:hover { background: var(--surface-container); }
.download-option b, .download-option span { display: block; }
.download-option span { margin-top: 4px; color: var(--on-surface-variant); font-size: 13px; }

/* file input */
input[type=file] { width: 100%; font-size: 14px; color: var(--on-surface-variant); }
input[type=file]::file-selector-button { margin-right: 12px; height: 40px; padding: 0 20px; border-radius: 20px;
  border: 1px solid var(--outline); background: transparent; color: var(--primary); cursor: pointer; font-weight: 500; }

/* import report */
.report-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.report-grid .box { padding: 16px; text-align: center; border-radius: 12px; }
.report-grid .box b { display: block; font-size: 28px; font-weight: 400; }
.report-grid .box span { font-size: 12px; }

/* features */
.feature-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 32px; }
.feature { padding: 24px; border-radius: 16px; background: var(--surface-container); }
.feature .svg-icon { color: var(--primary); }
.feature h3 { font-size: 16px; font-weight: 500; margin: 12px 0 8px; }

/* ===== ABOUT =========================================================== */
.about-page { overflow: hidden; }
.about-hero-shell { position: relative; overflow: hidden; background: var(--surface-container-low); border-bottom: 1px solid var(--outline-variant); }
.about-hero-shell::before { content: ''; position: absolute; width: 780px; height: 780px; right: -250px; top: -330px; border-radius: 50%;
  background: var(--primary-container); opacity: .52; filter: blur(10px); }
.about-hero-shell::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 53%, color-mix(in srgb, var(--surface-container-low) 35%, transparent) 78%, transparent); }
.about-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(500px, .95fr);
  align-items: center; gap: 56px; padding-top: 76px; padding-bottom: 104px; }
.about-hero-copy { min-width: 0; position: relative; z-index: 2; }
.about-eyebrow, .about-ai-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--primary);
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.about-eyebrow span, .about-ai-kicker span { width: 28px; height: 2px; border-radius: 99px; background: currentColor; }
.about-display { max-width: 14ch; margin: 22px 0 0; font-family: var(--display-font); font-size: clamp(44px, 4.5vw, 64px);
  line-height: 1.04; font-weight: 600; letter-spacing: -.035em; }
.about-display span { display: block; color: var(--primary); }
.about-lead { max-width: 60ch; margin: 24px 0 0; color: var(--on-surface-variant); font-size: 17px; line-height: 1.65; }
.about-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.about-search-scope { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: var(--on-surface-variant); font-size: 12px; font-weight: 600; }
.about-search-scope .svg-icon { color: var(--primary); }
.about-page .btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* Sourcing signal map */
.about-signal-map { position: relative; width: min(100%, 560px); min-height: 500px; justify-self: end; isolation: isolate; }
.about-signal-grid { position: absolute; inset: 12px -18px; z-index: -3; opacity: .5;
  background-image: linear-gradient(color-mix(in srgb, var(--primary) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 72%); mask-image: radial-gradient(circle at center, #000 25%, transparent 72%); }
.about-signal-map::before, .about-signal-map::after { content: ''; position: absolute; z-index: -2; border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); border-radius: 50%; }
.about-signal-map::before { width: 360px; height: 360px; left: 125px; top: 63px; }
.about-signal-map::after { width: 260px; height: 260px; left: 175px; top: 113px; border-style: dashed; animation: about-orbit-spin 28s linear infinite; }
.about-signal-mark { position: absolute; z-index: -1; width: 430px; height: auto; left: 53%; top: 64px; transform: translateX(-50%);
  opacity: .11; filter: grayscale(.15) saturate(.8); }
.about-signal-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.about-signal-lines path { fill: none; stroke: color-mix(in srgb, var(--primary) 62%, transparent); stroke-width: 1.6;
  stroke-linecap: round; stroke-dasharray: 5 8; animation: about-signal-flow 9s linear infinite; }
.about-signal-lines .about-output-path { stroke: color-mix(in srgb, var(--success) 76%, transparent); }
.about-source { position: absolute; z-index: 2; width: 178px; display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--outline-variant); border-radius: 14px; background: color-mix(in srgb, var(--surface-container-lowest) 92%, transparent);
  color: var(--on-surface); box-shadow: 0 8px 24px rgba(20, 38, 68, .09); }
.about-source-no { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px;
  background: var(--primary-container); color: var(--on-primary-container); font-family: var(--mono); font-size: 9px; font-weight: 700; }
.about-source strong, .about-source small { display: block; line-height: 1.25; white-space: nowrap; }
.about-source strong { font-size: 11px; }
.about-source small { margin-top: 3px; color: var(--on-surface-variant); font-size: 9px; }
.about-source-stock { left: 0; top: 52px; }
.about-source-warehouse { left: -10px; top: 188px; }
.about-source-wanted { left: 15px; bottom: 64px; }
.about-intelligence { position: absolute; z-index: 3; left: 210px; top: 170px; width: 150px; height: 132px; display: grid;
  place-content: center; justify-items: center; border-radius: 30px; background: var(--primary); color: var(--on-primary);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--primary) 34%, transparent); animation: about-core-float 8s ease-in-out infinite; }
.about-intelligence::before { content: ''; position: absolute; inset: -10px; border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent); border-radius: 36px; }
.about-intelligence-mark { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--on-primary) 18%, transparent); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.about-intelligence strong { font-family: var(--display-font); font-size: 14px; }
.about-intelligence small { margin-top: 2px; opacity: .78; font-size: 9px; }
.about-match-card { position: absolute; z-index: 3; right: 0; bottom: 45px; width: 192px; padding: 14px 15px; border: 1px solid var(--outline-variant);
  border-radius: 16px; background: var(--surface-container-lowest); box-shadow: var(--elev-2); animation: about-match-float 8s ease-in-out infinite; }
.about-match-status { display: flex; align-items: center; gap: 7px; color: var(--success); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-match-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.about-match-card > strong, .about-match-card > small { display: block; }
.about-match-card > strong { margin-top: 9px; color: var(--on-surface); font-size: 12px; }
.about-match-card > small { margin-top: 3px; color: var(--on-surface-variant); font-size: 9px; }

/* Live proof rail */
.about-proof { position: relative; z-index: 3; margin-top: -44px; }
.about-proof-inner { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--outline-variant);
  border-radius: 22px; background: var(--surface-container-lowest); box-shadow: 0 18px 44px rgba(24, 40, 70, .12); }
.about-proof-stat { min-width: 0; padding: 25px 30px; }
.about-proof-stat + .about-proof-stat { border-left: 1px solid var(--outline-variant); }
.about-proof-stat strong { display: block; color: var(--primary); font-family: var(--display-font); font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.about-proof-stat span { display: block; margin-top: 7px; color: var(--on-surface-variant); font-size: 12px; }

/* Editorial mission */
.about-section { padding-top: 88px; padding-bottom: 88px; }
.about-section-label { color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.about-editorial { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 72px; align-items: start; margin-top: 18px; }
.about-editorial h2, .about-section-head h2, .about-ai-copy h2, .about-closing h2 { margin: 0; font-family: var(--display-font); font-weight: 600; letter-spacing: -.025em; }
.about-editorial h2 { max-width: 14ch; font-size: clamp(34px, 4vw, 50px); line-height: 1.08; }
.about-editorial-copy { color: var(--on-surface-variant); font-size: 16px; line-height: 1.75; }
.about-editorial-copy p { margin: 0; }
.about-editorial-copy p + p { margin-top: 18px; }
.about-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.about-principle { min-width: 0; padding: 25px; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-low); }
.about-principle > span { color: var(--primary); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.about-principle h3 { margin: 28px 0 0; font-family: var(--display-font); font-size: 18px; font-weight: 600; }
.about-principle p { margin: 9px 0 0; color: var(--on-surface-variant); font-size: 13px; line-height: 1.55; }

/* Sourcing workflow */
.about-process-shell { border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.about-section-head { display: flex; align-items: end; justify-content: space-between; gap: 48px; }
.about-section-head h2 { max-width: 16ch; margin-top: 14px; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; }
.about-section-head > p { max-width: 46ch; margin: 0; color: var(--on-surface-variant); font-size: 14px; line-height: 1.6; }
.about-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 46px 0 0; padding: 0; list-style: none; }
.about-steps::before { content: ''; position: absolute; left: 8%; right: 8%; top: 31px; height: 1px; background: var(--outline-variant); }
.about-step { position: relative; z-index: 1; min-width: 0; padding: 24px; border: 1px solid var(--outline-variant); border-radius: 20px; background: var(--surface-container-lowest); }
.about-step-no { position: absolute; right: 20px; top: 20px; color: var(--on-surface-variant); font-family: var(--mono); font-size: 10px; }
.about-step-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--primary-container); color: var(--on-primary-container); }
.about-step h3 { margin: 24px 0 0; font-family: var(--display-font); font-size: 19px; font-weight: 600; }
.about-step p { margin: 9px 0 0; color: var(--on-surface-variant); font-size: 13px; line-height: 1.6; }

/* AI direction */
.about-ai-panel { --ai-text: #f5f7ff; --ai-muted: #c8d5ec; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr);
  gap: 48px; min-height: 500px; overflow: hidden; padding: clamp(32px, 5vw, 64px); border-radius: 32px;
  background: radial-gradient(circle at 88% 15%, rgba(102, 151, 235, .3), transparent 32%), linear-gradient(135deg, #07192f, #142d54 58%, #091a31);
  color: var(--ai-text); box-shadow: 0 28px 70px rgba(4, 18, 38, .2); }
.about-ai-copy { align-self: center; position: relative; z-index: 2; }
.about-ai-kicker { color: #aac7ff; }
.about-ai-copy h2 { max-width: 13ch; margin-top: 18px; font-size: clamp(36px, 4.3vw, 54px); line-height: 1.04; }
.about-ai-copy > p { max-width: 58ch; margin: 22px 0 0; color: var(--ai-muted); font-size: 15px; line-height: 1.7; }
.about-now-next { display: grid; gap: 9px; margin-top: 28px; }
.about-now-next > div { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 13px;
  border: 1px solid rgba(185, 207, 243, .2); border-radius: 12px; background: rgba(255, 255, 255, .05); }
.about-now-next span { color: #aac7ff; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-now-next strong { min-width: 0; color: var(--ai-muted); font-size: 10px; font-weight: 600; }
.about-ai-note { margin-top: 18px; color: rgba(226, 234, 248, .7); font-size: 10px; }
.about-ai-visual { position: relative; min-height: 370px; align-self: center; isolation: isolate; }
.about-ai-visual::before { content: ''; position: absolute; inset: 4% -8%; z-index: -2; opacity: .28;
  background-image: linear-gradient(rgba(170, 199, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 199, 255, .16) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle, #000, transparent 68%); mask-image: radial-gradient(circle, #000, transparent 68%); }
.about-ai-orbit { position: absolute; width: 260px; height: 260px; left: 50%; top: 50%; border: 1px solid rgba(170, 199, 255, .28);
  border-radius: 50%; transform: translate(-50%, -50%); animation: about-ai-orbit-spin 22s linear infinite; }
.about-ai-orbit::before, .about-ai-orbit::after { content: ''; position: absolute; border-radius: 50%; background: #aac7ff; box-shadow: 0 0 18px #78a9ff; }
.about-ai-orbit::before { width: 8px; height: 8px; left: 17px; top: 50px; }
.about-ai-orbit::after { width: 6px; height: 6px; right: 8px; bottom: 76px; }
.about-ai-input { position: absolute; z-index: 2; padding: 8px 11px; border: 1px solid rgba(185, 207, 243, .26); border-radius: 10px;
  background: rgba(8, 27, 51, .86); color: var(--ai-muted); font-size: 9px; font-weight: 700; box-shadow: 0 10px 25px rgba(0, 0, 0, .2); }
.about-ai-input-pn { left: 0; top: 50px; }
.about-ai-input-aircraft { right: 0; top: 105px; }
.about-ai-input-list { left: 2%; bottom: 68px; }
.about-ai-core { position: absolute; z-index: 3; width: 132px; height: 132px; left: 50%; top: 48%; display: grid; place-content: center; justify-items: center;
  border: 1px solid rgba(202, 220, 250, .45); border-radius: 38px; transform: translate(-50%, -50%); background: linear-gradient(145deg, #4d78c1, #234a88);
  box-shadow: 0 0 0 10px rgba(105, 151, 225, .08), 0 28px 60px rgba(0, 0, 0, .35); animation: about-ai-breathe 6s ease-in-out infinite; }
.about-ai-core strong { font-family: var(--mono); font-size: 26px; }
.about-ai-core span { margin-top: 4px; color: #d9e5fa; font-size: 9px; }
.about-ai-result { position: absolute; z-index: 4; right: 0; bottom: 18px; min-width: 160px; padding: 12px 14px; border: 1px solid rgba(155, 222, 170, .3);
  border-radius: 14px; background: rgba(9, 33, 48, .9); box-shadow: 0 16px 38px rgba(0, 0, 0, .25); }
.about-ai-result span, .about-ai-result strong { display: block; }
.about-ai-result span { color: #96d6a0; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.about-ai-result strong { margin-top: 5px; color: var(--ai-text); font-size: 11px; }

/* Closing action */
.about-closing { padding-bottom: 24px; }
.about-closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 44px; padding: 44px 48px; border-radius: 28px;
  background: linear-gradient(120deg, var(--primary-container), color-mix(in srgb, var(--tertiary-container) 58%, var(--primary-container)));
  color: var(--on-primary-container); }
.about-closing h2 { max-width: 17ch; margin-top: 12px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; }
.about-closing p { max-width: 52ch; margin: 13px 0 0; color: color-mix(in srgb, var(--on-primary-container) 76%, transparent); font-size: 14px; }
.about-closing-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; }

[data-theme="dark"] .about-signal-mark { opacity: .16; }
[data-theme="dark"] .about-source { background: color-mix(in srgb, var(--surface-container-lowest) 90%, transparent); box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }
[data-theme="dark"] .about-proof-inner { box-shadow: 0 18px 44px rgba(0, 0, 0, .28); }

@keyframes about-signal-flow { to { stroke-dashoffset: -52; } }
@keyframes about-orbit-spin { to { transform: rotate(360deg); } }
@keyframes about-ai-orbit-spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes about-core-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes about-match-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes about-ai-breathe { 0%, 100% { box-shadow: 0 0 0 10px rgba(105, 151, 225, .08), 0 28px 60px rgba(0, 0, 0, .35); }
  50% { box-shadow: 0 0 0 18px rgba(105, 151, 225, .03), 0 32px 70px rgba(0, 0, 0, .42); } }

/* ===== BULK LOOKUP ===================================================== */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.bulk-page { min-height: 70vh; }
.bulk-hero-shell { border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.bulk-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; padding-top: 28px; padding-bottom: 26px; }
.bulk-hero h1 { max-width: 18ch; margin: 14px 0 0; font-family: var(--display-font); font-size: clamp(36px, 4vw, 46px); line-height: 1.05;
  font-weight: 600; letter-spacing: -.035em; }
.bulk-hero > div > p { max-width: 68ch; margin: 12px 0 0; color: var(--on-surface-variant); font-size: 15px; line-height: 1.55; }
.bulk-hero-facts { display: grid; min-width: 250px; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); overflow: hidden; }
.bulk-hero-facts span { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 15px; color: var(--on-surface-variant); font-size: 10px; }
.bulk-hero-facts span + span { border-top: 1px solid var(--outline-variant); }
.bulk-hero-facts strong { color: var(--on-surface); font-family: var(--mono); font-size: 11px; }
.bulk-content { padding-top: 24px; padding-bottom: 64px; }

/* Unified input workspace */
.bulk-workspace { overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 24px; background: var(--surface-container-lowest);
  box-shadow: 0 18px 50px rgba(24, 40, 70, .1); }
.bulk-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 20px; border-bottom: 1px solid var(--outline-variant); }
.bulk-overline { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bulk-workspace-head h2 { margin: 4px 0 0; font-family: var(--display-font); font-size: 20px; line-height: 1.2; font-weight: 600; }
.bulk-workspace-head p { margin: 3px 0 0; color: var(--on-surface-variant); font-size: 11px; line-height: 1.35; }
.bulk-count { flex: 0 0 auto; min-width: 112px; padding: 9px 12px; border-radius: 12px; background: var(--surface-container); color: var(--on-surface-variant);
  font-size: 11px; text-align: center; }
.bulk-count strong { color: var(--primary); font-family: var(--mono); font-size: 15px; }
.bulk-count-warning { color: var(--warning); font-weight: 700; }
.bulk-input-grid { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; padding: 14px; }
.bulk-input-panel { min-width: 0; padding: 17px; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-low); }
.bulk-method-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.bulk-method-head > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px;
  background: var(--primary-container); color: var(--on-primary-container); font-family: var(--mono); font-size: 9px; font-weight: 700; }
.bulk-method-head h3 { margin: 0; font-family: var(--display-font); font-size: 16px; font-weight: 600; }
.bulk-method-head p { margin: 2px 0 0; color: var(--on-surface-variant); font-size: 11px; }
.bulk-method-divider { display: flex; align-items: center; justify-content: center; color: var(--on-surface-variant); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.bulk-method-divider::before, .bulk-method-divider::after { content: ''; width: 1px; height: 38%; background: var(--outline-variant); }
.bulk-method-divider { flex-direction: column; gap: 9px; }
.bulk-textarea { width: 100%; min-height: 160px; resize: vertical; padding: 15px 16px; border: 1px solid var(--outline); border-radius: 14px;
  outline: none; background: var(--surface-container-lowest); color: var(--on-surface); font-family: var(--mono); font-size: 14px; line-height: 1.75; }
.bulk-textarea::placeholder { color: var(--on-surface-variant); opacity: .7; }
.bulk-textarea:focus { border: 2px solid var(--primary); padding: 14px 15px; }
.bulk-input-note { margin-top: 11px; color: var(--on-surface-variant); font-size: 10px; line-height: 1.45; }
.bulk-dropzone { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px;
  border: 1.5px dashed var(--outline); border-radius: 14px; background: var(--surface-container-lowest); text-align: center; transition: border-color .18s, background .18s, transform .18s; }
.bulk-dropzone.is-dragging { border-color: var(--primary); background: var(--primary-container); transform: scale(.99); }
.bulk-drop-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 13px; background: var(--primary-container); color: var(--on-primary-container); }
.bulk-dropzone > strong { font-family: var(--display-font); font-size: 15px; }
.bulk-dropzone > span:not(.bulk-drop-icon) { color: var(--on-surface-variant); font-size: 11px; }
.bulk-dropzone .btn { margin-top: 4px; }
.bulk-dropzone small { margin-top: 3px; color: var(--on-surface-variant); font-size: 9px; }
.bulk-selected-file { min-height: 180px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; gap: 14px; padding: 22px;
  border: 1px solid var(--primary); border-radius: 14px; background: color-mix(in srgb, var(--primary-container) 28%, var(--surface-container-lowest)); }
.bulk-selected-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: var(--success-container); color: var(--success); }
.bulk-selected-file > div > span, .bulk-selected-file > div > strong { display: block; }
.bulk-selected-file > div > span { color: var(--success); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.bulk-selected-file > div > strong { overflow: hidden; margin-top: 4px; color: var(--on-surface); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bulk-file-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; }
.bulk-workspace-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 16px; border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-low); }
.bulk-privacy-note { display: flex; align-items: center; gap: 8px; color: var(--on-surface-variant); font-size: 10px; }
.bulk-privacy-note .svg-icon { color: var(--success); }
.bulk-submit { min-width: 190px; height: 48px; border-radius: 24px; }
.bulk-submit:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.bulk-progress { display: none; align-items: center; justify-content: center; gap: 14px; margin: 26px 0 0; padding: 18px; border: 1px solid var(--outline-variant);
  border-radius: 16px; background: var(--surface-container-low); }
.bulk-progress.htmx-request { display: flex; opacity: 1; }
.bulk-progress > span:last-child strong, .bulk-progress > span:last-child small { display: block; }
.bulk-progress > span:last-child strong { font-size: 13px; }
.bulk-progress > span:last-child small { margin-top: 2px; color: var(--on-surface-variant); font-size: 10px; }
.bulk-result-region { scroll-margin-top: 88px; outline: none; }

/* Friendly feedback and result hierarchy */
.bulk-feedback { display: flex; align-items: flex-start; gap: 14px; margin-top: 32px; padding: 20px; border-radius: 18px; }
.bulk-feedback-error { border: 1px solid color-mix(in srgb, var(--error) 32%, var(--outline-variant)); background: var(--error-container); color: var(--on-error-container); }
.bulk-feedback-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--error) 12%, transparent); }
.bulk-feedback strong { font-size: 14px; }
.bulk-feedback p { margin: 5px 0 0; font-size: 12px; }
.bulk-results { margin-top: 52px; }
.bulk-result-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.bulk-complete-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.bulk-result-head h2 { margin: 8px 0 0; font-family: var(--display-font); font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; font-weight: 600; letter-spacing: -.025em; }
.bulk-result-head p { max-width: 58ch; margin: 10px 0 0; color: var(--on-surface-variant); font-size: 13px; line-height: 1.55; }
.bulk-result-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.bulk-result-action { height: 48px; border-radius: 24px; white-space: nowrap; }
.bulk-download-menu { position: relative; }
.bulk-download-menu > summary { list-style: none; }
.bulk-download-menu > summary::-webkit-details-marker { display: none; }
.bulk-download-popover { position: absolute; z-index: 20; right: 0; top: calc(100% + 10px); width: 360px; overflow: hidden; padding: 8px;
  border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); box-shadow: var(--elev-3); }
.bulk-download-head { padding: 10px 10px 12px; }
.bulk-download-head strong, .bulk-download-head span { display: block; }
.bulk-download-head strong { font-size: 13px; }
.bulk-download-head span { margin-top: 3px; color: var(--on-surface-variant); font-size: 10px; }
.bulk-download-popover form { margin: 0; }
.bulk-download-option { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px;
  border: none; border-radius: 12px; background: transparent; color: var(--on-surface); text-align: left; cursor: pointer; }
.bulk-download-option:hover { background: var(--surface-container); }
.bulk-download-option:disabled { cursor: not-allowed; opacity: .45; }
.bulk-download-option-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-container); color: var(--on-primary-container); }
.bulk-download-option-icon.is-found { background: var(--success-container); color: var(--success); }
.bulk-download-option-icon.is-missing { background: var(--error-container); color: var(--error); }
.bulk-download-option b, .bulk-download-option small { display: block; }
.bulk-download-option b { font-size: 12px; }
.bulk-download-option small { margin-top: 3px; color: var(--on-surface-variant); font-size: 9px; }
.bulk-limit-notice { display: flex; align-items: center; gap: 9px; margin-top: 22px; padding: 11px 13px; border-radius: 12px;
  background: var(--tertiary-container); color: var(--on-tertiary-container); font-size: 11px; }
.bulk-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.bulk-metric { padding: 21px 23px; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-low); }
.bulk-metric strong { display: block; color: var(--primary); font-family: var(--display-font); font-size: 34px; line-height: 1; font-weight: 600; }
.bulk-metric span { display: block; margin-top: 7px; color: var(--on-surface-variant); font-size: 11px; }
.bulk-metric-found strong { color: var(--success); }
.bulk-metric-missing strong { color: var(--error); }

/* Quote handoff */
.bulk-quote-panel { margin-top: 20px; padding: 24px; border: 1px solid var(--outline-variant); border-radius: 20px; background: var(--surface-container-low); }
.bulk-quote-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.bulk-quote-head h3 { margin: 6px 0 0; font-family: var(--display-font); font-size: 21px; font-weight: 600; }
.bulk-quote-panel > p { margin: 8px 0 0; color: var(--on-surface-variant); font-size: 11px; }
.bulk-quote-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; align-items: end; }
.bulk-quote-form label { min-width: 0; display: grid; gap: 6px; color: var(--on-surface-variant); font-size: 10px; }
.bulk-quote-form label > span { display: flex; justify-content: space-between; gap: 8px; }
.bulk-quote-form label small { opacity: .7; }
.bulk-quote-form .text-input { width: 100%; }
.bulk-quote-note { grid-column: 1 / -1; }
.bulk-quote-form textarea.text-input { min-height: 76px; }
.bulk-quote-form > .btn { grid-column: 4; min-height: 48px; }
.bulk-quote-response { margin-top: 12px; }

/* Result filters and table */
.bulk-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; margin-bottom: 12px; }
.bulk-filter-group { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-container); }
.bulk-filter-group button { min-height: 36px; padding: 0 13px; border: none; border-radius: 10px; background: transparent; color: var(--on-surface-variant);
  font-family: var(--font); font-size: 11px; font-weight: 600; cursor: pointer; }
.bulk-filter-group button:hover { background: var(--surface-container-high); }
.bulk-filter-group button.is-active { background: var(--surface-container-lowest); color: var(--primary); box-shadow: var(--elev-1); }
.bulk-filter-group button:disabled { cursor: not-allowed; opacity: .45; }
.bulk-filter-group button span { margin-left: 5px; color: inherit; font-family: var(--mono); font-size: 9px; }
.bulk-table-hint { color: var(--on-surface-variant); font-size: 10px; }
.bulk-table-wrap { overflow-x: auto; background: var(--surface-container-lowest); }
.bulk-results-table { min-width: 900px; }
.bulk-results-table td { vertical-align: middle; }
.bulk-results-table tbody tr.bulk-row-missing { background: color-mix(in srgb, var(--error-container) 12%, transparent); }
.bulk-part-cell strong, .bulk-part-cell small { display: block; }
.bulk-part-cell small { margin-top: 3px; color: var(--on-surface-variant); font-size: 9px; }
.bulk-description-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-surface-variant); }
.bulk-row-action { text-align: right; white-space: nowrap; }
.bulk-row-action > span { color: var(--on-surface-variant); }
.bulk-page button:focus-visible, .bulk-page summary:focus-visible, .bulk-page a:focus-visible, .bulk-page input:focus-visible, .bulk-page .bulk-file-picker:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 3px; }

[data-theme="dark"] .bulk-workspace { box-shadow: 0 18px 50px rgba(0, 0, 0, .26); }
[data-theme="dark"] .bulk-selected-icon { color: var(--success); }

/* footer */
.footer { background: var(--surface-container); margin-top: 56px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px; display: flex; justify-content: space-between;
  gap: 16px; color: var(--on-surface-variant); font-size: 14px; flex-wrap: wrap; }

/* HTMX / progress */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.spinner { width: 20px; height: 20px; border: 3px solid var(--surface-container-highest); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
.upload-progress-label { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; color: var(--on-surface-variant); font-size: 13px; }
.upload-progress-label b { color: var(--primary); font-size: 14px; font-weight: 700; }
.upload-progress { height: 8px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-container-highest); }
.upload-progress-bar { height: 100%; width: 0; border-radius: inherit; background: var(--primary); transition: width .15s ease; }
.upload-progress-bar.is-processing { background: linear-gradient(90deg, var(--primary), var(--primary-container), var(--primary)); background-size: 180% 100%; animation: progress-wait 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes progress-wait { to { background-position: 180% 0; } }

/* entrances */
.fadeup { animation: fadeup .35s cubic-bezier(.2,0,0,1) both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[x-cloak] { display: none !important; }

/* responsive */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 56px; gap: 28px; }
  .hero-visual { width: min(100%, 590px); min-height: 430px; margin: 0 auto; }
  .hero-mark { top: 12px; width: min(100%, 470px); }
  .network-chip-top { top: 12px; right: 0; }
}

@media (max-width: 880px) {
  .search-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .feature-row, .detail .spec-grid { grid-template-columns: 1fr; }
  .appbar-actions .hide-sm { display: none; }
}

@media (max-width: 1050px) {
  .about-hero { grid-template-columns: 1fr; gap: 18px; }
  .about-hero-copy { max-width: 780px; }
  .about-display { max-width: 15ch; }
  .about-signal-map { justify-self: center; }
  .about-ai-panel { grid-template-columns: 1fr; }
  .about-ai-copy h2 { max-width: 16ch; }
  .about-ai-visual { width: min(100%, 560px); margin: 0 auto; }
}

@media (max-width: 900px) {
  .bulk-hero { grid-template-columns: 1fr; align-items: start; }
  .bulk-hero-facts { min-width: 0; grid-template-columns: repeat(3, 1fr); }
  .bulk-hero-facts span { align-items: flex-start; flex-direction: column; justify-content: flex-start; gap: 3px; }
  .bulk-hero-facts span + span { border-top: none; border-left: 1px solid var(--outline-variant); }
  .bulk-input-grid { grid-template-columns: 1fr; }
  .bulk-method-divider { height: 48px; flex-direction: row; }
  .bulk-method-divider::before, .bulk-method-divider::after { width: 40%; height: 1px; }
  .bulk-result-head { align-items: flex-start; flex-direction: column; gap: 22px; }
  .bulk-result-actions { justify-content: flex-start; }
  .bulk-quote-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bulk-quote-form > .btn { grid-column: 2; }
}

@media (max-width: 800px) {
  .bulk-table-wrap { overflow: visible; border: none; background: transparent; }
  table.tbl.bulk-results-table { min-width: 0; background: transparent; }
  table.tbl.bulk-results-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.tbl.bulk-results-table, table.tbl.bulk-results-table tbody { display: block; }
  table.tbl.bulk-results-table tbody { display: grid; gap: 10px; }
  table.tbl.bulk-results-table tbody tr { display: grid; padding: 14px 16px; border: 1px solid var(--outline-variant); border-radius: 16px; background: var(--surface-container-lowest); }
  table.tbl.bulk-results-table tbody tr.bulk-row-missing { background: color-mix(in srgb, var(--error-container) 12%, var(--surface-container-lowest)); }
  table.tbl.bulk-results-table td { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 12px; padding: 7px 0; border: none; text-align: left; white-space: normal; }
  table.tbl.bulk-results-table td::before { content: attr(data-label); color: var(--on-surface-variant); font-size: 9px; font-weight: 600; }
  .bulk-description-cell { max-width: none; white-space: normal; }
  .bulk-row-action { text-align: left; }
}

@media (max-width: 760px) {
  .about-editorial { grid-template-columns: 1fr; gap: 24px; }
  .about-principles, .about-steps { grid-template-columns: 1fr; }
  .about-steps::before { display: none; }
  .about-section-head, .about-closing-inner { align-items: flex-start; flex-direction: column; }
  .about-section-head { display: flex; }
  .about-section-head > p { max-width: 58ch; }
  .about-closing-actions { width: 100%; }
  .about-section { padding-top: 68px; padding-bottom: 68px; }
}

@media (max-width: 680px) {
  .bulk-hero, .bulk-content { padding-left: 18px; padding-right: 18px; }
  .bulk-hero { padding-top: 36px; padding-bottom: 34px; gap: 28px; }
  .bulk-hero h1 { font-size: 40px; }
  .bulk-hero-facts span { padding: 11px 9px; font-size: 9px; }
  .bulk-workspace { border-radius: 20px; }
  .bulk-workspace-head { align-items: flex-start; flex-direction: column; padding: 20px; }
  .bulk-count { align-self: flex-start; }
  .bulk-input-grid { padding: 12px; }
  .bulk-input-panel { padding: 16px; }
  .bulk-textarea, .bulk-dropzone, .bulk-selected-file { min-height: 180px; }
  .bulk-workspace-foot { align-items: stretch; flex-direction: column; padding: 16px; }
  .bulk-privacy-note { align-items: flex-start; line-height: 1.5; }
  .bulk-submit { width: 100%; }
  .bulk-results { margin-top: 42px; }
  .bulk-result-actions, .bulk-result-actions > .btn, .bulk-download-menu, .bulk-download-menu > summary { width: 100%; }
  .bulk-download-popover { position: static; width: 100%; margin-top: 8px; }
  .bulk-metrics { gap: 8px; }
  .bulk-metric { padding: 17px 14px; }
  .bulk-metric strong { font-size: 28px; }
  .bulk-quote-panel { padding: 19px; }
  .bulk-quote-form { grid-template-columns: 1fr; }
  .bulk-quote-form > .btn { grid-column: 1; width: 100%; }
  .bulk-table-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .bulk-filter-group { width: 100%; overflow-x: auto; }
  .bulk-filter-group button { flex: 1 0 auto; }
  .bulk-table-hint { display: none; }
}

@media (max-width: 640px) {
  .hero-inner { padding: 48px 18px 52px; }
  .hero-visual { min-height: 320px; margin-top: 4px; }
  .hero-visual::before { inset: 0 -35px; opacity: .6; }
  .hero-mark { top: 0; width: min(108%, 390px); opacity: .5; }
  .network-chip { display: none; }
  .inventory-panel { left: 0; bottom: 0; }
  .inventory-panel-head { padding: 11px 12px; }
  .inventory-total { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inventory-row { padding: 10px 4px; }
  .inventory-panel-foot { padding: 9px 12px; }

  .about-hero { padding: 52px 18px 84px; }
  .about-display { max-width: none; font-size: clamp(41px, 12vw, 52px); }
  .about-lead { font-size: 16px; }
  .about-actions .btn { width: 100%; }
  .about-search-scope { line-height: 1.5; }
  .about-signal-map { min-height: 440px; margin-top: 8px; }
  .about-signal-lines { display: none; }
  .about-signal-map::before { width: 280px; height: 280px; left: 50%; top: 118px; transform: translateX(-50%); }
  .about-signal-map::after { display: none; }
  .about-signal-mark { width: 340px; left: 50%; top: 105px; opacity: .09; }
  .about-source { width: 148px; padding: 9px; }
  .about-source small { white-space: normal; }
  .about-source-stock { left: 0; top: 18px; }
  .about-source-warehouse { left: auto; right: 0; top: 18px; }
  .about-source-wanted { left: 50%; bottom: auto; top: 98px; transform: translateX(-50%); }
  .about-intelligence { left: 50%; top: 194px; transform: translateX(-50%); }
  .about-match-card { width: 220px; left: 50%; right: auto; bottom: 2px; transform: translateX(-50%); }
  .about-intelligence, .about-match-card { animation: none; }
  .about-proof { padding-left: 18px; padding-right: 18px; }
  .about-proof-stat { padding: 20px 12px; }
  .about-proof-stat strong { font-size: 27px; }
  .about-proof-stat span { font-size: 10px; line-height: 1.35; }
  .about-section { padding-left: 18px; padding-right: 18px; }
  .about-principles { margin-top: 36px; }
  .about-ai-panel { min-height: 0; padding: 28px 22px; border-radius: 24px; }
  .about-ai-copy h2 { font-size: 39px; }
  .about-now-next > div { grid-template-columns: 42px minmax(0, 1fr); }
  .about-ai-visual { min-height: 330px; }
  .about-ai-orbit { width: 220px; height: 220px; }
  .about-ai-input-aircraft { top: 80px; }
  .about-closing { padding-left: 18px; padding-right: 18px; }
  .about-closing-inner { padding: 32px 24px; }
  .about-closing-actions .btn { width: 100%; }
}

@media (max-width: 520px) {
  .appbar-actions .hide-xs { display: none; }
}

@media (max-width: 360px) {
  .appbar-actions .hide-xxs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fadeup, .hero-mark, .inventory-panel, .live-dot, .skel-line, .spinner, .upload-progress-bar.is-processing,
  .about-signal-lines path, .about-signal-map::after, .about-intelligence, .about-match-card, .about-ai-orbit, .about-ai-core {
    animation: none !important;
  }
  .title .line2 .phrase, .bulk-dropzone, .search-query-field, .search-results-region, .search-result-card, .search-quote-dock { transition: none !important; }
}

/* ===== OPERATIONS + SUPPLIER PORTALS ================================== */
.portal-shell { min-height: 100vh; background: var(--background); }
.portal-main { min-height: calc(100vh - 72px); }
.portal-bar { position: sticky; top: 0; z-index: 70; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 78%, transparent);
  background: color-mix(in srgb, var(--surface-container-lowest) 90%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); }
.portal-bar.is-scrolled { box-shadow: 0 10px 30px rgba(24, 40, 70, .08); }
.portal-bar-inner { width: 100%; max-width: var(--maxw); min-height: 72px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; }
.portal-brand { min-width: max-content; display: inline-flex; align-items: center; gap: 10px; }
.portal-brand-mark { width: 64px; height: 46px; display: grid; place-items: center; overflow: hidden; }
.portal-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.portal-brand-copy { display: grid; line-height: 1.05; }
.portal-brand-copy strong { font-family: var(--display-font); font-size: 17px; letter-spacing: -.02em; }
.portal-brand-copy strong span { color: var(--primary); }
.portal-brand-copy small { margin-top: 5px; color: var(--on-surface-variant); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.portal-nav { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 auto; }
.portal-nav-link { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 12px;
  color: var(--on-surface-variant); font-size: 11px; font-weight: 600; transition: color .15s, background .15s; }
.portal-nav-link .svg-icon { width: 16px; height: 16px; }
.portal-nav-link:hover { background: var(--surface-container); color: var(--on-surface); }
.portal-nav-link.is-active { background: var(--primary-container); color: var(--on-primary-container); }
.portal-bar-actions { min-width: max-content; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.portal-site-link, .portal-signout { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 12px;
  color: var(--on-surface-variant); font-size: 10px; font-weight: 600; }
.portal-site-link:hover, .portal-signout:hover { background: var(--surface-container); color: var(--on-surface); }
.portal-signout:hover { color: var(--error); }
.portal-theme-toggle { width: 40px; height: 40px; }
.portal-page { min-height: calc(100vh - 72px); }
.portal-page button:focus-visible, .portal-page a:focus-visible, .portal-page input:focus-visible, .portal-page select:focus-visible,
.portal-auth-page button:focus-visible, .portal-auth-page a:focus-visible, .portal-auth-page input:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 3px;
}

/* Portal authentication */
.portal-auth-shell { background: var(--surface-container-low); }
.portal-auth-page { position: relative; min-height: calc(100vh - 72px); overflow: hidden; }
.portal-auth-page::before { content: ''; position: absolute; width: 720px; height: 720px; left: -300px; top: -330px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary-container) 72%, transparent); filter: blur(12px); opacity: .75; }
.portal-auth-page::after { content: ''; position: absolute; width: 540px; height: 540px; right: -250px; bottom: -300px; border-radius: 50%;
  background: color-mix(in srgb, var(--tertiary-container) 58%, transparent); filter: blur(18px); opacity: .58; }
.portal-auth-layout { position: relative; z-index: 1; width: 100%; min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(400px, .72fr);
  align-items: center; gap: clamp(54px, 7vw, 104px); padding-top: 54px; padding-bottom: 58px; }
.portal-auth-story { min-width: 0; }
.portal-auth-eyebrow, .portal-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.portal-auth-eyebrow > span { width: 25px; height: 2px; border-radius: 99px; background: currentColor; }
.portal-auth-story h1 { max-width: 12ch; margin: 17px 0 0; font-size: clamp(43px, 4.4vw, 62px); line-height: 1.03; font-weight: 600; letter-spacing: -.04em; }
.portal-auth-story h1 span { display: block; color: var(--primary); }
.portal-auth-story > p { max-width: 58ch; margin: 20px 0 0; color: var(--on-surface-variant); font-size: 15px; line-height: 1.65; }
.portal-auth-visual { position: relative; width: min(100%, 590px); min-height: 290px; margin-top: 24px; isolation: isolate; }
.portal-auth-visual::before { content: ''; position: absolute; left: 3%; right: 4%; top: 51%; height: 1px; z-index: -2;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 34%, transparent), transparent); }
.portal-auth-visual > img { position: absolute; z-index: -1; left: 50%; top: 5px; width: min(76%, 420px); height: auto; transform: translateX(-50%); opacity: .17; filter: saturate(.75); }
.portal-auth-orbit { position: absolute; z-index: -2; width: 270px; height: 270px; left: 50%; top: 0; border: 1px dashed color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: 50%; transform: translateX(-50%); animation: about-orbit-spin 28s linear infinite; }
.portal-auth-core { position: absolute; left: 50%; top: 82px; min-width: 188px; display: flex; align-items: center; gap: 12px; padding: 16px;
  border-radius: 18px; background: var(--primary); color: var(--on-primary); box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 30%, transparent); transform: translateX(-50%); }
.portal-auth-core > .svg-icon { width: 28px; height: 28px; }
.portal-auth-core strong, .portal-auth-core small { display: block; }
.portal-auth-core strong { font-family: var(--display-font); font-size: 13px; }
.portal-auth-core small { margin-top: 2px; font-size: 8px; opacity: .78; }
.supplier-auth-core { background: var(--secondary); color: var(--on-secondary); box-shadow: 0 18px 42px color-mix(in srgb, var(--secondary) 28%, transparent); }
.portal-auth-signal { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid var(--outline-variant);
  border-radius: 11px; background: var(--surface-container-lowest); box-shadow: var(--elev-1); color: var(--on-surface); font-size: 9px; font-weight: 600; }
.portal-auth-signal i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent); }
.portal-auth-signal.signal-one { left: 4%; top: 55px; }
.portal-auth-signal.signal-two { right: 3%; bottom: 57px; color: var(--on-surface-variant); }
.portal-auth-trust { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 2px; color: var(--on-surface-variant); font-size: 9px; font-weight: 600; }
.portal-auth-trust span { display: inline-flex; align-items: center; gap: 7px; }
.portal-auth-trust .svg-icon { color: var(--primary); }
.portal-auth-card { min-width: 0; overflow: hidden; padding: 30px; border: 1px solid color-mix(in srgb, var(--outline-variant) 85%, transparent); border-radius: 24px;
  background: color-mix(in srgb, var(--surface-container-lowest) 94%, transparent); box-shadow: 0 24px 64px rgba(24, 40, 70, .15); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.portal-auth-card-head { display: flex; align-items: flex-start; gap: 14px; }
.portal-auth-card-icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: var(--primary-container); color: var(--on-primary-container); }
.supplier-auth-icon { background: var(--secondary-container); color: var(--on-secondary-container); }
.portal-auth-overline { color: var(--primary); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.portal-auth-card h2 { margin: 4px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.portal-auth-card-head p { margin: 4px 0 0; color: var(--on-surface-variant); font-size: 11px; }
.portal-alert { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 12px 13px; border-radius: 12px; font-size: 10px; line-height: 1.45; }
.portal-alert-error { background: var(--error-container); color: var(--on-error-container); }
.portal-alert > .svg-icon { flex: 0 0 auto; margin-top: 1px; }
.portal-alert strong, .portal-alert span { display: block; }
.portal-alert strong { margin-bottom: 1px; font-size: 11px; }
.portal-auth-form { display: grid; gap: 16px; margin-top: 25px; }
.portal-auth-form > label { display: grid; gap: 7px; color: var(--on-surface-variant); font-size: 10px; font-weight: 600; }
.portal-auth-field { height: 52px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; border: 1px solid var(--outline);
  border-radius: 13px; background: var(--surface-container-lowest); transition: border-color .15s, box-shadow .15s; }
.portal-auth-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent); }
.portal-auth-field > .svg-icon { justify-self: center; color: var(--on-surface-variant); }
.portal-auth-field:focus-within > .svg-icon { color: var(--primary); }
.portal-auth-field input { min-width: 0; width: 100%; height: 50px; padding: 0 14px 0 0; border: 0; outline: 0; background: transparent; color: var(--on-surface); font: 500 13px var(--font); }
.portal-auth-field input::placeholder { color: color-mix(in srgb, var(--on-surface-variant) 72%, transparent); font-weight: 400; }
.portal-auth-field input:focus-visible { outline: none; }
.portal-auth-submit { width: 100%; min-height: 50px; margin-top: 4px; border-radius: 14px; }
.portal-auth-help { display: flex; align-items: flex-start; gap: 9px; margin: 22px -30px -30px; padding: 15px 30px; border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-low); color: var(--on-surface-variant); font-size: 9px; line-height: 1.45; }
.portal-auth-help > .svg-icon { flex: 0 0 auto; color: var(--primary); }
[data-theme="dark"] .portal-auth-card { box-shadow: 0 24px 64px rgba(0, 0, 0, .38); }

/* Portal hero + workspace */
.portal-hero-shell { position: relative; overflow: hidden; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.portal-hero-shell::before { content: ''; position: absolute; width: 620px; height: 620px; right: -140px; top: -410px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary-container) 74%, transparent); }
.portal-hero-shell::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: linear-gradient(color-mix(in srgb, var(--primary) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 7%, transparent) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%); mask-image: linear-gradient(90deg, transparent 20%, #000 80%); }
.portal-hero { position: relative; z-index: 1; min-height: 246px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 46px; padding-top: 45px; padding-bottom: 74px; }
.portal-hero-copy h1 { margin: 11px 0 0; font-size: clamp(35px, 4vw, 50px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; }
.portal-hero-copy > p { max-width: 65ch; margin: 12px 0 0; color: var(--on-surface-variant); font-size: 13px; line-height: 1.6; }
.portal-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; color: var(--on-surface-variant); font-size: 9px; font-weight: 600; }
.portal-hero-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.portal-status { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 5px 8px; border-radius: 8px; background: var(--surface-container-high); color: var(--on-surface-variant);
  font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.portal-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.portal-status-live { background: color-mix(in srgb, var(--success-container) 62%, transparent); color: var(--success); }
.portal-status-off { background: var(--surface-container-high); color: var(--on-surface-variant); }
.portal-hero-actions { min-width: 270px; display: grid; justify-items: stretch; gap: 8px; }
.portal-hero-action-row { grid-template-columns: 1fr 1fr; min-width: 360px; }
.portal-primary-action { min-height: 46px; border-radius: 14px; }
.portal-action-note { color: var(--on-surface-variant); font-size: 8px; text-align: center; }
.portal-content { position: relative; z-index: 3; margin-top: -42px; padding-bottom: 70px; }

/* Metrics + health */
.portal-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 20px;
  background: var(--surface-container-lowest); box-shadow: 0 18px 42px rgba(24, 40, 70, .1); }
.portal-metric-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-metric { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; padding: 21px; background: var(--surface-container-lowest); }
a.portal-metric { transition: background .15s; }
a.portal-metric:hover { background: var(--surface-container-low); }
.portal-metric + .portal-metric { border-left: 1px solid var(--outline-variant); }
.portal-metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container); }
.portal-metric-success .portal-metric-icon { background: color-mix(in srgb, var(--success-container) 65%, transparent); color: var(--success); }
.portal-metric > div { min-width: 0; display: grid; }
.portal-metric > div > span { color: var(--on-surface-variant); font-size: 9px; font-weight: 600; }
.portal-metric strong { margin-top: 7px; color: var(--on-surface); font-family: var(--display-font); font-size: 31px; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.portal-metric strong.portal-metric-word { font-size: 25px; }
.portal-metric small { overflow: hidden; margin-top: 6px; color: var(--on-surface-variant); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.portal-section { padding-top: 66px; }
.portal-section-last { padding-bottom: 8px; }
.portal-section-compact { padding-top: 30px; }
.portal-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 18px; }
.portal-section-kicker { display: block; margin-bottom: 5px; color: var(--primary); font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.portal-section-head h2 { margin: 0; font-size: 27px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; }
.portal-section-head p { margin: 6px 0 0; color: var(--on-surface-variant); font-size: 10px; }
.portal-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portal-health-card { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 15px;
  border: 1px solid var(--outline-variant); border-radius: 15px; background: var(--surface-container-lowest); transition: border-color .15s, transform .15s, box-shadow .15s; }
.portal-health-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--outline-variant)); box-shadow: var(--elev-1); transform: translateY(-1px); }
.portal-health-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
.portal-health-card.needs-attention .portal-health-icon { background: color-mix(in srgb, var(--error-container) 62%, transparent); color: var(--error); }
.portal-health-card.is-clear .portal-health-icon { background: color-mix(in srgb, var(--success-container) 58%, transparent); color: var(--success); }
.portal-health-card strong, .portal-health-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-health-card strong { font-size: 10px; }
.portal-health-card small { margin-top: 3px; color: var(--on-surface-variant); font-size: 8px; }
.portal-health-card > b { font-family: var(--mono); font-size: 17px; }
.portal-health-card.needs-attention > b { color: var(--error); }
.portal-health-card.is-clear > b { color: var(--success); }
.portal-health-card > .svg-icon { color: var(--on-surface-variant); }

/* Portal tables */
.portal-table-card { min-width: 0; max-width: 100%; overflow: hidden; contain: inline-size; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); }
.portal-table-toolbar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-container-low); color: var(--on-surface-variant); font-size: 9px; }
.portal-table-toolbar > span { display: inline-flex; align-items: center; gap: 7px; color: var(--on-surface); font-weight: 600; }
.portal-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
table.tbl.portal-table { min-width: 880px; background: var(--surface-container-lowest); font-size: 11px; }
table.tbl.portal-table th { padding: 12px 15px; background: var(--surface-container-low); font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
table.tbl.portal-table td { padding: 13px 15px; }
.supplier-inventory-table { min-width: 980px !important; }
.admin-parts-table { min-width: 1040px !important; }
.admin-quotes-table { min-width: 1060px !important; }
.portal-part-number { color: var(--on-surface); font-family: var(--mono); font-size: 11px; font-weight: 700; white-space: nowrap; }
.portal-cell-description { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-condition { display: inline-flex; padding: 4px 7px; border-radius: 7px; background: var(--surface-container-high); color: var(--on-surface-variant); font-size: 8px; font-weight: 700; white-space: nowrap; }
.portal-quantity { min-width: 30px; display: inline-flex; justify-content: center; padding: 4px 7px; border-radius: 7px; background: var(--surface-container-high); color: var(--on-surface-variant); font-family: var(--mono); font-weight: 700; }
.portal-quantity.is-stocked { background: color-mix(in srgb, var(--success-container) 58%, transparent); color: var(--success); }
.portal-supplier-name { white-space: nowrap; }
.portal-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
.portal-row-actions form { margin: 0; }
.portal-row-actions .icon-btn { width: 36px; height: 36px; }
.portal-delete-action:hover { color: var(--error); }
.admin-parts-table th:last-child, .admin-parts-table td:last-child { position: sticky; right: 0; z-index: 2; background: var(--surface-container-lowest); box-shadow: -8px 0 14px rgba(0, 0, 0, .07); }
.admin-parts-table th:last-child { z-index: 3; background: var(--surface-container-low); }
.portal-request-id { display: inline-flex; padding: 4px 7px; border-radius: 7px; background: var(--primary-container); color: var(--on-primary-container); font-family: var(--mono); font-size: 9px; font-weight: 700; }
.portal-cell-subline { display: block; max-width: 240px; overflow: hidden; margin-top: 3px; color: var(--on-surface-variant); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.portal-items-preview { display: block; max-width: 220px; overflow: hidden; color: var(--on-surface-variant); font-family: var(--mono); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.portal-items-preview-wide { max-width: 260px; }
.portal-quote-note { max-width: 240px; color: var(--on-surface-variant); font-size: 9px; }
.portal-status-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 8px; background: var(--surface-container-high); color: var(--on-surface-variant); font-size: 8px; font-weight: 700; }
.portal-status-chip.status-new, .status-select.status-new { background-color: var(--primary-container); color: var(--on-primary-container); }
.portal-status-chip.status-contacted, .status-select.status-contacted { background-color: var(--secondary-container); color: var(--on-secondary-container); }
.portal-status-chip.status-quoted, .status-select.status-quoted { background-color: var(--tertiary-container); color: var(--on-tertiary-container); }
.portal-status-chip.status-closed, .status-select.status-closed { background-color: color-mix(in srgb, var(--success-container) 60%, transparent); color: var(--success); }
.portal-status-form { margin: 0; }
.status-select { width: 118px; height: 38px; border: 0; border-radius: 10px; font-size: 9px; font-weight: 700; }
.portal-file-name { min-width: 0; display: flex; align-items: center; gap: 7px; }
.portal-file-name .svg-icon { flex: 0 0 auto; color: var(--primary); }
.portal-file-name strong { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-count { min-width: 30px; display: inline-flex; justify-content: center; padding: 4px 7px; border-radius: 7px; background: var(--surface-container-high); color: var(--primary); font-family: var(--mono); font-weight: 700; }
.portal-count-good { background: color-mix(in srgb, var(--success-container) 58%, transparent); color: var(--success); }
.portal-count-bad { background: color-mix(in srgb, var(--error-container) 62%, transparent); color: var(--error); }
.portal-empty-row:hover { background: transparent !important; }
.portal-empty-row td { padding: 48px 20px !important; text-align: center; }
.portal-empty-row td > * { margin-right: auto; margin-left: auto; }
.portal-empty-row strong, .portal-empty-row small { display: block; }
.portal-empty-row strong { margin-top: 11px; font-size: 13px; }
.portal-empty-row small { margin-top: 4px; color: var(--on-surface-variant); font-size: 9px; }
.portal-empty-row .btn { margin-top: 15px; }
.portal-empty-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: var(--surface-container-high); color: var(--on-surface-variant); }
.portal-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 22px; }
.portal-pager > span:nth-child(2) { text-align: center; }
.portal-pager > span:last-child { text-align: right; }
.portal-pager strong, .portal-pager small { display: block; }
.portal-pager strong { font-size: 10px; }
.portal-pager small { margin-top: 2px; color: var(--on-surface-variant); font-size: 8px; }

/* Portal list pages + filters */
.portal-subhero { position: relative; overflow: hidden; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.portal-subhero::after { content: ''; position: absolute; width: 420px; height: 420px; right: -100px; top: -315px; border-radius: 50%; background: var(--primary-container); opacity: .72; }
.portal-subhero-inner { position: relative; z-index: 1; min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 38px; padding-top: 35px; padding-bottom: 55px; }
.portal-subhero h1 { margin: 9px 0 0; font-size: clamp(34px, 3.6vw, 47px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; }
.portal-subhero p { max-width: 62ch; margin: 9px 0 0; color: var(--on-surface-variant); font-size: 11px; }
.portal-list-content { margin-top: -28px; }
.portal-filter-panel { overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); box-shadow: 0 14px 34px rgba(24, 40, 70, .09); }
.portal-filter-heading { min-height: 57px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 9px 15px; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.portal-filter-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-container); color: var(--on-primary-container); }
.portal-filter-heading strong, .portal-filter-heading small { display: block; }
.portal-filter-heading strong { font-size: 11px; }
.portal-filter-heading small { margin-top: 2px; color: var(--on-surface-variant); font-size: 8px; }
.portal-filter-state { padding: 4px 7px; border-radius: 7px; background: var(--tertiary-container); color: var(--on-tertiary-container); font-size: 8px; font-weight: 700; }
.portal-filter-grid { display: grid; grid-template-columns: minmax(220px, 1.7fr) repeat(4, minmax(135px, 1fr)); gap: 10px; padding: 15px; }
.portal-filter-grid label { min-width: 0; display: grid; gap: 6px; color: var(--on-surface-variant); font-size: 8px; font-weight: 700; }
.portal-filter-grid .text-input { height: 43px; background-color: var(--surface-container-lowest); font-size: 10px; }
.portal-input-with-icon { position: relative; display: block; }
.portal-input-with-icon > .svg-icon { position: absolute; z-index: 1; left: 12px; top: 50%; color: var(--on-surface-variant); transform: translateY(-50%); }
.portal-input-with-icon .text-input { padding-left: 40px; }
.portal-filter-issue { display: flex; align-items: center; gap: 7px; margin: 0 15px 12px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--error-container) 42%, transparent);
  color: var(--on-error-container); font-size: 9px; }
.portal-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 11px 15px; border-top: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.supplier-inventory-filter { display: grid; grid-template-columns: minmax(210px, 1.55fr) repeat(4, minmax(120px, 1fr)) auto; align-items: end; gap: 9px; margin-bottom: 12px; padding: 13px;
  border: 1px solid var(--outline-variant); border-radius: 16px; background: var(--surface-container-lowest); }
.supplier-inventory-filter > label { min-width: 0; display: grid; gap: 6px; color: var(--on-surface-variant); font-size: 8px; font-weight: 700; }
.supplier-inventory-filter .text-input { height: 42px; background-color: var(--surface-container-lowest); font-size: 9px; }
.supplier-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.supplier-filter-actions .btn { height: 42px; padding: 0 16px; white-space: nowrap; }
.portal-result-heading { align-items: center; }
.portal-page-range { padding: 7px 10px; border-radius: 9px; background: var(--surface-container-high); color: var(--on-surface-variant); font-size: 9px; font-weight: 600; white-space: nowrap; }
.portal-directory-summary { min-height: 82px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid var(--outline-variant);
  border-radius: 18px; background: var(--surface-container-lowest); box-shadow: 0 14px 34px rgba(24, 40, 70, .09); }
.portal-directory-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--primary-container); color: var(--on-primary-container); }
.portal-directory-summary strong, .portal-directory-summary small { display: block; }
.portal-directory-summary strong { font-size: 13px; }
.portal-directory-summary small { margin-top: 3px; color: var(--on-surface-variant); font-size: 9px; }

/* Supplier account directory */
.portal-supplier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.portal-supplier-card { min-width: 0; padding: 19px; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); transition: transform .15s, box-shadow .15s, border-color .15s; }
.portal-supplier-card:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--outline-variant)); box-shadow: var(--elev-1); transform: translateY(-2px); }
.portal-supplier-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portal-supplier-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--primary); color: var(--on-primary); font-family: var(--display-font); font-size: 16px; font-weight: 700; }
.portal-supplier-card h3 { overflow: hidden; margin: 17px 0 0; font-size: 18px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.portal-supplier-contact { display: grid; gap: 8px; margin-top: 15px; }
.portal-supplier-contact > * { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--on-surface-variant); font-size: 9px; }
.portal-supplier-contact .svg-icon { flex: 0 0 auto; color: var(--primary); }
.portal-supplier-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-supplier-contact a:hover span { color: var(--primary); text-decoration: underline; }
.portal-supplier-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--outline-variant); }
.portal-supplier-card-foot > span { display: inline-flex; align-items: center; gap: 6px; color: var(--on-surface-variant); font-size: 8px; }
.portal-empty-state { display: grid; justify-items: center; padding: 48px 24px; border: 1px dashed var(--outline-variant); border-radius: 18px; background: var(--surface-container-low); text-align: center; }
.portal-empty-state-wide { grid-column: 1 / -1; }
.portal-empty-state strong { margin-top: 12px; font-size: 14px; }
.portal-empty-state small { max-width: 48ch; margin-top: 5px; color: var(--on-surface-variant); font-size: 9px; }
.portal-empty-state .btn { margin-top: 16px; }

/* Quote pipeline */
.portal-subhero-count { min-width: 130px; padding: 14px 17px; border: 1px solid var(--outline-variant); border-radius: 15px; background: var(--surface-container-lowest); box-shadow: var(--elev-1); }
.portal-subhero-count strong, .portal-subhero-count span { display: block; }
.portal-subhero-count strong { color: var(--primary); font-family: var(--display-font); font-size: 28px; line-height: 1; }
.portal-subhero-count span { margin-top: 5px; color: var(--on-surface-variant); font-size: 8px; }
.portal-segmented { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 6px; border: 1px solid var(--outline-variant); border-radius: 15px;
  background: var(--surface-container-lowest); box-shadow: 0 14px 34px rgba(24, 40, 70, .09); }
.portal-segmented a { min-width: max-content; min-height: 38px; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border-radius: 10px;
  color: var(--on-surface-variant); font-size: 9px; font-weight: 700; }
.portal-segmented a:hover { background: var(--surface-container); }
.portal-segmented a.is-active { background: var(--primary-container); color: var(--on-primary-container); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--outline); }
.status-dot.status-new { background: var(--primary); }
.status-dot.status-contacted { background: var(--secondary); }
.status-dot.status-quoted { background: var(--tertiary); }
.status-dot.status-closed { background: var(--success); }

/* Upload dialog */
.portal-modal-backdrop { z-index: 100; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.portal-upload-modal { width: min(100%, 610px); max-width: 610px; max-height: calc(100vh - 42px); overflow-y: auto; padding: 0; border: 1px solid var(--outline-variant); border-radius: 24px; background: var(--surface-container-lowest); box-shadow: 0 30px 80px rgba(0, 0, 0, .28); outline: none; }
.portal-modal-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--outline-variant); }
.portal-modal-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--primary-container); color: var(--on-primary-container); }
.portal-modal-head h2 { margin: 2px 0 0; font-size: 21px; font-weight: 600; }
.portal-modal-lead { margin: 0; padding: 16px 22px 0; color: var(--on-surface-variant); font-size: 10px; line-height: 1.55; }
.portal-upload-form { padding: 18px 22px 22px; }
.portal-form-field { display: grid; gap: 7px; margin-bottom: 15px; color: var(--on-surface-variant); font-size: 9px; font-weight: 700; }
.portal-form-field .text-input { height: 44px; background-color: var(--surface-container-lowest); font-size: 10px; }
.portal-upload-drop { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 24px; border: 1px dashed var(--outline); border-radius: 17px;
  background: var(--surface-container-low); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.portal-upload-drop:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary-container) 22%, var(--surface-container-low)); }
.portal-upload-drop:focus-visible { border-color: var(--primary); outline: 3px solid var(--primary); outline-offset: 3px; }
.portal-upload-drop-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-container); color: var(--on-primary-container); }
.portal-upload-drop strong { margin-top: 4px; font-size: 12px; }
.portal-upload-drop > span:not(.portal-upload-drop-icon):not(.btn) { color: var(--on-surface-variant); font-size: 9px; }
.portal-upload-drop .btn { margin-top: 7px; }
.portal-selected-file { min-height: 84px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--outline-variant);
  border-radius: 15px; background: var(--surface-container-low); }
.portal-selected-file-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--success-container) 62%, transparent); color: var(--success); }
.portal-selected-file small, .portal-selected-file strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-selected-file small { color: var(--on-surface-variant); font-size: 8px; }
.portal-selected-file strong { margin-top: 3px; font-size: 10px; }
.portal-upload-result:empty { display: none; }
.portal-upload-result:not(:empty) { margin-top: 15px; }
.portal-upload-report { overflow: hidden; border: 1px solid color-mix(in srgb, var(--success) 38%, var(--outline-variant)); border-radius: 14px; background: var(--surface-container-low); }
.portal-upload-report.needs-attention { border-color: color-mix(in srgb, var(--error) 38%, var(--outline-variant)); }
.portal-upload-report-head { display: flex; align-items: center; gap: 10px; padding: 12px; }
.portal-upload-report-head > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--success-container) 62%, transparent); color: var(--success); }
.portal-upload-report.needs-attention .portal-upload-report-head > span { background: var(--error-container); color: var(--on-error-container); }
.portal-upload-report-head strong, .portal-upload-report-head small { display: block; }
.portal-upload-report-head strong { font-size: 10px; }
.portal-upload-report-head small { max-width: 360px; overflow: hidden; margin-top: 2px; color: var(--on-surface-variant); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.portal-upload-report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--outline-variant); }
.portal-upload-report-grid > div { min-width: 0; padding: 10px; text-align: center; }
.portal-upload-report-grid > div + div { border-left: 1px solid var(--outline-variant); }
.portal-upload-report-grid b, .portal-upload-report-grid span { display: block; }
.portal-upload-report-grid b { color: var(--primary); font-family: var(--mono); font-size: 14px; }
.portal-upload-report-grid .has-failures b { color: var(--error); }
.portal-upload-report-grid span { margin-top: 2px; color: var(--on-surface-variant); font-size: 7px; }
.portal-upload-report-notes { border-top: 1px solid var(--outline-variant); }
.portal-upload-report-notes summary { display: flex; align-items: center; gap: 6px; padding: 10px 12px; color: var(--warning); font-size: 8px; font-weight: 700; cursor: pointer; }
.portal-upload-report-notes ul { max-height: 150px; overflow-y: auto; margin: 0; padding: 0 28px 11px; color: var(--on-surface-variant); font-size: 8px; }
.portal-modal-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 19px; }
.portal-modal-actions button:disabled, .portal-modal-head button:disabled { cursor: not-allowed; opacity: .5; }

@media (max-width: 1080px) {
  .portal-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-metric:nth-child(3) { border-left: 0; border-top: 1px solid var(--outline-variant); }
  .portal-metric:nth-child(4) { border-top: 1px solid var(--outline-variant); }
  .portal-metric-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-metric-grid-three .portal-metric:nth-child(3) { border-left: 1px solid var(--outline-variant); border-top: 0; }
  .portal-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-filter-search { grid-column: 1 / -1; }
  .supplier-inventory-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-filter-search, .supplier-filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .portal-bar-inner { min-height: 68px; flex-wrap: wrap; gap: 0 14px; padding-top: 6px; }
  .portal-brand { margin-right: auto; }
  .portal-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; margin: 5px 0 0; padding: 5px 0 7px; }
  .portal-nav-link { flex: 1 0 auto; justify-content: center; }
  .portal-nav-supplier .portal-nav-link { flex: 0 0 auto; }
  .portal-main { min-height: calc(100vh - 120px); }
  .portal-auth-layout { grid-template-columns: 1fr minmax(370px, .82fr); gap: 44px; }
  .portal-auth-visual { min-height: 250px; }
  .portal-auth-trust { display: none; }
  .portal-hero { grid-template-columns: 1fr; gap: 24px; padding-bottom: 72px; }
  .portal-hero-actions { min-width: 0; width: min(100%, 520px); justify-self: start; }
  .portal-health-grid { grid-template-columns: 1fr; }
  .portal-supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .portal-auth-layout { grid-template-columns: minmax(0, 1fr); gap: 38px; padding-top: 30px; }
  .portal-auth-card { order: -1; width: 100%; max-width: 520px; justify-self: center; }
  .portal-auth-story { width: min(100%, 620px); justify-self: center; text-align: center; }
  .portal-auth-eyebrow { justify-content: center; }
  .portal-auth-story h1 { max-width: 14ch; margin-right: auto; margin-left: auto; font-size: 40px; }
  .portal-auth-story > p { margin-right: auto; margin-left: auto; }
  .portal-auth-visual { display: none; }
  .portal-metric-grid-three { grid-template-columns: 1fr; }
  .portal-metric-grid-three .portal-metric + .portal-metric { border-top: 1px solid var(--outline-variant); border-left: 0; }
  .portal-section { padding-top: 52px; }
  .portal-section-head { align-items: flex-start; flex-direction: column; gap: 13px; }
  .portal-section-head > .btn { width: 100%; }
  .portal-table-card { overflow: visible; border: 0; background: transparent; }
  .portal-table-scroll { overflow: visible; }
  table.tbl.portal-table, table.tbl.portal-table tbody { min-width: 0 !important; display: block; background: transparent; }
  table.tbl.portal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.tbl.portal-table tbody { display: grid; gap: 10px; }
  table.tbl.portal-table tbody tr { display: grid; padding: 12px 14px; border: 1px solid var(--outline-variant); border-radius: 15px; background: var(--surface-container-lowest); }
  table.tbl.portal-table td { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 12px; padding: 7px 0; border: 0; text-align: left; white-space: normal; }
  table.tbl.portal-table td::before { content: attr(data-label); color: var(--on-surface-variant); font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .portal-cell-description, .portal-quote-note { max-width: none; overflow: visible; white-space: normal; }
  .portal-items-preview, .portal-file-name strong { max-width: 100%; white-space: normal; }
  .portal-row-actions { justify-content: flex-start; }
  .admin-parts-table th:last-child, .admin-parts-table td:last-child { position: static; box-shadow: none; }
  table.tbl.portal-table .portal-empty-row { padding: 0; }
  table.tbl.portal-table .portal-empty-row td { display: block; padding: 36px 18px !important; text-align: center; }
  table.tbl.portal-table .portal-empty-row td::before { display: none; }
  .portal-pager .btn { padding: 0 13px; }
  .portal-subhero-inner { align-items: flex-start; flex-direction: column; gap: 20px; padding-top: 35px; }
  .portal-subhero-inner > .btn { width: 100%; }
  .portal-subhero-count { width: 100%; }
  .portal-directory-summary { grid-template-columns: 42px minmax(0, 1fr); }
  .portal-directory-summary > .btn { grid-column: 1 / -1; width: 100%; }
  .portal-supplier-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .portal-bar-inner { padding-right: 14px; padding-left: 14px; }
  .portal-brand-mark { width: 54px; height: 40px; }
  .portal-brand-copy strong { font-size: 15px; }
  .portal-site-link span, .portal-signout span { display: none; }
  .portal-site-link, .portal-signout { width: 40px; justify-content: center; padding: 0; }
  .portal-nav { gap: 2px; }
  .portal-nav-link { min-height: 38px; padding: 0 9px; font-size: 9px; }
  .portal-auth-layout, .portal-hero, .portal-content, .portal-subhero-inner { padding-right: 17px; padding-left: 17px; }
  .portal-auth-card { padding: 24px; border-radius: 20px; }
  .portal-auth-help { margin-right: -24px; margin-bottom: -24px; margin-left: -24px; padding-right: 24px; padding-left: 24px; }
  .portal-auth-story h1 { font-size: 36px; }
  .portal-hero { padding-top: 36px; padding-bottom: 68px; }
  .portal-hero-copy h1 { font-size: 36px; }
  .portal-hero-action-row { grid-template-columns: 1fr; }
  .portal-metric-grid { grid-template-columns: 1fr; border-radius: 17px; }
  .portal-metric + .portal-metric, .portal-metric:nth-child(3), .portal-metric:nth-child(4) { border-top: 1px solid var(--outline-variant); border-left: 0; }
  .portal-filter-grid { grid-template-columns: 1fr; }
  .portal-filter-search { grid-column: auto; }
  .portal-filter-heading { grid-template-columns: 34px minmax(0, 1fr); }
  .portal-filter-state { grid-column: 1 / -1; width: max-content; }
  .portal-filter-actions { align-items: stretch; flex-direction: column-reverse; }
  .portal-filter-actions .btn { width: 100%; }
  .supplier-inventory-filter { grid-template-columns: 1fr; padding: 12px; }
  .supplier-filter-search, .supplier-filter-actions { grid-column: auto; }
  .supplier-filter-actions { align-items: stretch; flex-direction: column-reverse; }
  .supplier-filter-actions .btn { width: 100%; }
  .portal-segmented a { padding: 0 12px; }
  .portal-modal-backdrop { align-items: end; padding: 0; }
  .portal-upload-modal { max-height: 92vh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }
  .portal-modal-head, .portal-upload-form { padding-right: 17px; padding-left: 17px; }
  .portal-modal-lead { padding-right: 17px; padding-left: 17px; }
  .portal-modal-actions { align-items: stretch; flex-direction: column-reverse; }
  .portal-modal-actions .btn { width: 100%; }
}

@media (max-width: 380px) {
  .portal-brand-copy small { display: none; }
  .portal-nav-link .svg-icon { display: none; }
  .portal-auth-card-head { align-items: center; }
  .portal-auth-card-icon { width: 42px; height: 42px; }
  .portal-auth-card h2 { font-size: 24px; }
  .portal-health-card { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .portal-health-card > .svg-icon { display: none; }
  .portal-pager { gap: 7px; }
  .portal-pager .btn { padding: 0 10px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-auth-orbit { animation: none !important; }
  .portal-health-card, .portal-supplier-card, .portal-bar { transition: none !important; }
}

/* Portal editors */
.portal-breadcrumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; color: var(--primary); font-size: 9px; font-weight: 700; }
.portal-breadcrumb:hover { text-decoration: underline; }
.portal-editor-content { max-width: 1180px; }
.portal-editor-content-narrow { max-width: 1080px; }
.portal-editor-content > .portal-alert { margin: 0 0 14px; box-shadow: var(--elev-1); }
.portal-alert-success { background: color-mix(in srgb, var(--success-container) 68%, var(--surface-container-lowest)); color: var(--success); }
.portal-alert-warning { background: color-mix(in srgb, var(--tertiary-container, var(--primary-container)) 55%, var(--surface-container-lowest)); color: var(--on-surface); }
.portal-alert ul { margin: 5px 0 0; padding-left: 16px; }
.portal-alert li { margin-top: 2px; }
.portal-metric-warning .portal-metric-icon { background: color-mix(in srgb, var(--error-container) 55%, transparent); color: var(--error); }
/* Metric captions ellipsize by default. Inside an import result the caption
   explains what a number means ("Of your 3 current lines"), so it wraps. */
.portal-form-card .portal-metric small { overflow: visible; white-space: normal; }
.portal-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; align-items: start; gap: 18px; }
.supplier-editor-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.portal-editor-main { min-width: 0; display: grid; gap: 14px; }
.portal-form-card { overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); }
.portal-form-card-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 13px; padding: 19px 20px; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.portal-form-card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--primary-container); color: var(--on-primary-container); }
.portal-form-card-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.portal-form-card-head p { margin: 4px 0 0; color: var(--on-surface-variant); font-size: 9px; }
.portal-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; padding: 20px; }
.portal-form-grid > label:not(.portal-access-toggle) { min-width: 0; display: grid; gap: 6px; color: var(--on-surface-variant); font-size: 9px; font-weight: 700; }
.portal-form-grid > label > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.portal-form-grid > label > span b { color: var(--primary); font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-form-grid .text-input { height: 45px; background-color: var(--surface-container-lowest); font-size: 11px; }
.portal-form-grid textarea.text-input { min-height: 108px; font-family: var(--font); }
.portal-form-wide { grid-column: 1 / -1; }
.portal-editor-aside { position: sticky; top: 88px; overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); box-shadow: 0 12px 30px rgba(24, 40, 70, .08); }
.portal-editor-summary { padding: 21px; }
.portal-editor-summary-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 14px; background: var(--secondary-container); color: var(--on-secondary-container); }
.portal-editor-summary h2 { overflow: hidden; margin: 0; font-size: 19px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.portal-editor-summary > p { margin: 8px 0 0; color: var(--on-surface-variant); font-size: 9px; line-height: 1.55; }
.portal-editor-summary dl { display: grid; gap: 0; margin: 18px 0 0; }
.portal-editor-summary dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--outline-variant); font-size: 9px; }
.portal-editor-summary dt { color: var(--on-surface-variant); }
.portal-editor-summary dd { margin: 0; font-weight: 700; text-align: right; }
.supplier-editor-summary ul { display: grid; gap: 9px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--outline-variant); list-style: none; }
.supplier-editor-summary li { display: flex; align-items: center; gap: 7px; color: var(--on-surface-variant); font-size: 9px; }
.supplier-editor-summary li .svg-icon { color: var(--success); }
.portal-editor-actions { display: grid; gap: 6px; padding: 14px; border-top: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.portal-editor-actions .btn { width: 100%; }
/* The checkbox is position:absolute, so it claims no grid track: only the
   toggle track and the label text do. Three columns here left the text in a
   42px column, one word per line. */
.portal-access-toggle { min-height: 66px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--outline-variant); border-radius: 13px; cursor: pointer; position: relative; }
.portal-access-toggle > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.portal-toggle-track { width: 38px; height: 22px; display: block; padding: 3px; border-radius: 99px; background: var(--surface-container-highest); transition: background .15s; }
.portal-toggle-track i { width: 16px; height: 16px; display: block; border-radius: 50%; background: var(--outline); transition: transform .15s, background .15s; }
.portal-access-toggle input:checked + .portal-toggle-track { background: var(--primary); }
.portal-access-toggle input:checked + .portal-toggle-track i { background: var(--on-primary); transform: translateX(16px); }
.portal-access-toggle input:focus-visible + .portal-toggle-track { outline: 3px solid var(--primary); outline-offset: 3px; }
.portal-access-toggle > span:last-child strong, .portal-access-toggle > span:last-child small { display: block; }
.portal-access-toggle > span:last-child strong { font-size: 10px; }
.portal-access-toggle > span:last-child small { margin-top: 3px; color: var(--on-surface-variant); font-size: 8px; }

/* Admin import review */
.import-review-content { max-width: 1140px; }
.import-step-badge { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--outline-variant); border-radius: 14px; background: var(--surface-container-lowest); box-shadow: var(--elev-1); }
.import-step-badge > strong { color: var(--primary); font-family: var(--display-font); font-size: 28px; line-height: 1; }
.import-step-badge > span { color: var(--on-surface-variant); font-size: 8px; font-weight: 600; line-height: 1.35; }
.import-context-bar { min-height: 80px; display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 14px 17px;
  border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); box-shadow: 0 14px 34px rgba(24, 40, 70, .09); }
.import-context-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--primary-container); color: var(--on-primary-container); }
.import-context-bar > div { min-width: 0; }
.import-context-bar > div > span, .import-context-bar > div > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-context-bar > div > span { color: var(--on-surface-variant); font-size: 8px; }
.import-context-bar > div > strong { margin-top: 3px; font-size: 10px; }
.import-review-form { margin-top: 16px; }
.import-policy-card { overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); }
.import-policy-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 18px 19px; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); cursor: pointer; list-style: none; }
.import-policy-head::-webkit-details-marker { display: none; }
.import-policy-card:not([open]) .import-policy-head { border-bottom: 0; }
.import-policy-card[open] .import-sheet-chevron { transform: rotate(90deg); }
.import-policy-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.import-policy-head p { margin: 4px 0 0; color: var(--on-surface-variant); font-size: 9px; line-height: 1.5; }
.import-policy-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 14px; }
.import-policy-options label { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 9px; padding: 13px; border: 1px solid var(--outline-variant); border-radius: 13px;
  background: var(--surface-container-low); cursor: pointer; }
.import-policy-options label.is-selected, .import-policy-options label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-container) 25%, var(--surface-container-lowest)); }
.import-policy-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.import-radio { width: 18px; height: 18px; display: block; border: 2px solid var(--outline); border-radius: 50%; }
.import-policy-options input:checked + .import-radio { border: 5px solid var(--primary); }
.import-policy-options input:focus-visible + .import-radio { outline: 3px solid var(--primary); outline-offset: 3px; }
.import-policy-options strong, .import-policy-options small { display: block; }
.import-policy-options strong { font-size: 10px; }
.import-policy-options small { margin-top: 4px; color: var(--on-surface-variant); font-size: 8px; line-height: 1.45; }

/* Supplier import ask screen — variable option count (2 for a quantity
   question, 5+ for a PN question), so a fixed column count doesn't fit;
   auto-fit flows however many candidates there are. Text runs larger than
   .import-policy-options because this is a supplier's primary decision
   point, not a dense admin control. */
.import-ask-card { margin-top: 16px; }
.import-ask-question { padding: 16px 19px; border-bottom: 1px solid var(--outline-variant); }
.import-ask-question:last-child { border-bottom: 0; }
.import-ask-prompt { margin: 0 0 11px; font-size: 13px; line-height: 1.5; }
.import-ask-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.import-ask-options label { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; padding: 14px; border: 1px solid var(--outline-variant); border-radius: 13px;
  background: var(--surface-container-low); cursor: pointer; }
.import-ask-options label.is-selected, .import-ask-options label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-container) 25%, var(--surface-container-lowest)); }
.import-ask-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.import-ask-options input:checked + .import-radio { border: 5px solid var(--primary); }
.import-ask-options input:focus-visible + .import-radio { outline: 3px solid var(--primary); outline-offset: 3px; }
.import-ask-options strong, .import-ask-options small { display: block; }
.import-ask-options strong { font-size: 12px; }
.import-ask-options small { margin-top: 4px; color: var(--on-surface-variant); font-size: 10px; line-height: 1.5; }
.import-sheet-list { display: grid; gap: 11px; margin-top: 15px; }
.import-sheet { overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 17px; background: var(--surface-container-lowest); }
.import-sheet > summary { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 11px 15px; background: var(--surface-container-low); cursor: pointer; list-style: none; }
.import-sheet > summary::-webkit-details-marker { display: none; }
.import-sheet-toggle { position: relative; cursor: pointer; }
.import-sheet-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.import-sheet-toggle > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--outline); border-radius: 9px; color: transparent; }
.import-sheet-toggle input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.import-sheet-toggle input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.import-sheet-identity { min-width: 0; display: grid; }
.import-sheet-identity strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.import-sheet-identity small { margin-top: 2px; color: var(--on-surface-variant); font-size: 8px; }
.import-sheet-reason { min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; color: var(--warning); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.import-sheet-chevron { margin-left: auto; color: var(--on-surface-variant); transition: transform .15s; }
.import-sheet[open] .import-sheet-chevron { transform: rotate(90deg); }
.import-sheet-body { padding: 16px; border-top: 1px solid var(--outline-variant); }
.import-header-control { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.import-header-control .portal-form-field { width: min(100%, 560px); margin: 0; }
.import-header-control > span { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 11px; color: var(--on-surface-variant); font-size: 8px; }
.import-warning { margin: 0 0 14px; background: color-mix(in srgb, var(--tertiary-container) 58%, transparent); color: var(--on-tertiary-container); }
.import-mapping { min-width: 760px !important; }
.import-mapping td:first-child { min-width: 180px; }
.import-map-select { min-width: 155px; height: 40px; background-color: var(--surface-container-lowest); font-size: 9px; }
.import-qty-hint { display: inline-flex; margin-left: 6px; color: var(--warning); vertical-align: middle; }
.import-samples { max-width: 360px; overflow: hidden; color: var(--on-surface-variant); font-family: var(--mono); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.import-preview-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 15px; padding: 17px 18px; border: 1px solid var(--outline-variant); border-radius: 17px;
  background: var(--surface-container-lowest); }
.import-preview-action strong, .import-preview-action small { display: block; }
.import-preview-action strong { font-size: 12px; }
.import-preview-action small { margin-top: 3px; color: var(--on-surface-variant); font-size: 8px; }
.import-preview-card { margin-top: 15px; overflow: hidden; padding: 20px; border: 1px solid var(--outline-variant); border-radius: 18px; background: var(--surface-container-lowest); box-shadow: 0 14px 34px rgba(24, 40, 70, .08); }
.import-busy { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 220px; color: var(--on-surface-variant); font-size: 13px; font-weight: 600; }
.import-busy > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.import-busy-bar { width: 100%; height: 6px; margin-top: 0; }
.import-busy-bar .upload-progress-bar { transition: width .6s linear; }
.import-busy b { color: var(--primary); font-size: 12px; font-weight: 700; }
.import-review-page .btn:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; pointer-events: none; }
.import-busy svg { animation: importBusyPulse 1.1s ease-in-out infinite; }
@keyframes importBusyPulse { 50% { opacity: .35; } }
/* Mapping changed after a preview: grey it out and force a re-preview. */
#import-preview.import-stale { position: relative; }
#import-preview.import-stale > * { opacity: .35; pointer-events: none; user-select: none; }
#import-preview.import-stale::after { content: "Mapping changed — preview again to refresh this summary."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border: 1px solid var(--outline-variant); border-radius: 12px; background: var(--surface-container-lowest); box-shadow: var(--elev-1); color: var(--on-surface); font-size: 13px; font-weight: 600; white-space: nowrap; }
.import-preview-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 13px; }
.import-preview-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.import-preview-head p { margin: 4px 0 0; color: var(--on-surface-variant); font-size: 9px; }
.import-complete-card .portal-form-card-icon { background: color-mix(in srgb, var(--success-container) 62%, transparent); color: var(--success); }
.import-blocked-card { border-color: color-mix(in srgb, var(--error) 42%, var(--outline-variant)); }
.import-blocked-card .portal-form-card-icon { background: var(--error-container); color: var(--on-error-container); }
.import-report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; margin-top: 18px; border: 1px solid var(--outline-variant); border-radius: 15px; }
.import-report-grid > div { min-width: 0; padding: 16px; background: var(--surface-container-low); }
.import-report-grid > div + div { border-left: 1px solid var(--outline-variant); }
.import-report-grid strong, .import-report-grid span { display: block; }
.import-report-grid strong { color: var(--primary); font-family: var(--display-font); font-size: 25px; line-height: 1; }
.import-report-grid span { margin-top: 5px; color: var(--on-surface-variant); font-size: 8px; }
.import-report-grid .is-create strong { color: var(--success); }
.import-report-grid .is-update strong { color: var(--primary); }
.import-report-grid .is-remove strong { color: var(--warning); }
.import-report-grid .has-errors strong { color: var(--error); }
.import-preview-facts { display: grid; margin: 16px 0 0; border-top: 1px solid var(--outline-variant); }
.import-preview-facts > div { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--outline-variant); font-size: 9px; }
.import-preview-facts dt { color: var(--on-surface-variant); }
.import-preview-facts dd { margin: 0; }
.import-note-list { margin-top: 12px; border: 1px solid var(--outline-variant); border-radius: 12px; background: var(--surface-container-low); }
.import-note-list summary { display: flex; align-items: center; gap: 7px; padding: 11px 13px; color: var(--warning); font-size: 9px; font-weight: 700; cursor: pointer; }
.import-note-list ul { max-height: 220px; overflow-y: auto; margin: 0; padding: 0 30px 13px; color: var(--on-surface-variant); font-size: 9px; }
.import-note-list li + li { margin-top: 6px; }
.import-problem-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.import-problem-list li { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 11px; background: var(--error-container); color: var(--on-error-container); font-size: 9px; }
.import-problem-list .svg-icon { flex: 0 0 auto; }
.import-commit-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 18px -20px -20px; padding: 16px 20px; border-top: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.import-commit-bar strong, .import-commit-bar small { display: block; }
.import-commit-bar strong { font-size: 11px; }
.import-commit-bar small { margin-top: 3px; color: var(--on-surface-variant); font-size: 8px; }
.import-preview-foot { margin-top: 17px; text-align: right; }

@media (max-width: 880px) {
  .portal-editor-layout, .supplier-editor-layout { grid-template-columns: 1fr; }
  .portal-editor-aside { position: static; }
  .portal-editor-summary { display: none; }
  .portal-editor-actions { grid-template-columns: auto 1fr; }
  .import-policy-options { grid-template-columns: 1fr; }
  .import-ask-options { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .portal-editor-hero .portal-subhero-inner { padding-bottom: 52px; }
  .portal-form-grid { grid-template-columns: 1fr; padding: 17px; }
  .portal-form-wide { grid-column: auto; }
  .portal-form-card-head { padding: 17px; }
  .portal-editor-actions { grid-template-columns: 1fr; }
  .import-context-bar { grid-template-columns: 42px minmax(0, 1fr); }
  .import-context-bar > div:nth-of-type(2), .import-context-bar > .portal-status { grid-column: 1 / -1; }
  .import-policy-head { padding: 16px; }
  .import-sheet > summary { flex-wrap: wrap; }
  .import-sheet-reason { order: 4; width: 100%; padding-left: 40px; white-space: normal; }
  .import-header-control { align-items: flex-start; flex-direction: column; }
  .import-header-control > span { padding: 0; }
  .import-preview-action, .import-commit-bar { align-items: stretch; flex-direction: column; }
  .import-preview-action .btn, .import-commit-bar .btn { width: 100%; }
  .import-preview-head { grid-template-columns: 42px minmax(0, 1fr); }
  .import-preview-head > .portal-status { grid-column: 1 / -1; }
  .import-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-report-grid > div:nth-child(3) { border-top: 1px solid var(--outline-variant); border-left: 0; }
  .import-report-grid > div:nth-child(4) { border-top: 1px solid var(--outline-variant); }
  .import-preview-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .import-preview-foot .btn { width: 100%; }
}