/* ============================================================
   Asaptic RFQ Portal — assets/portal.css
   Full design-token system + base component library
   Canonical CSS file — 28 frontend agents import this.
   Dark navy palette: --bg / --bg-card / --accent / --cyan
   Fonts: Inter (body) + JetBrains Mono (mono)
   ============================================================

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────
   §00  CSS Custom Properties (Design Tokens)
   §01  Reset & Base
   §02  Typography Scale
   §03  Layout Utilities
   §04  Navigation
   §05  Buttons  (.btn-primary / .btn-secondary / .btn-ghost / .btn-danger)
   §06  Cards     (.card / .card--raised / .card--dashed)
   §07  Form Controls  (.field-* family, input/select/textarea)
   §08  Checkbox & Radio Custom Controls
   §09  Pills / Badges  (.pill-* / .badge)
   §10  Status Pills  (.status-*)  — 8 RFQ statuses
   §11  Table  (.data-table / .data-table--compact)
   §12  Modal  (.modal-overlay / .modal)
   §13  Toast  (.toast-stack / .toast)
   §14  Drawer  (.drawer-overlay / .drawer)
   §15  Skeleton Loader  (.skeleton)
   §16  Empty State  (.empty-state)
   §17  SLA Timer  (.sla-timer)
   §18  Notification items  (.notif-*)
   §19  Wizard Progress  (.wizard-progress)
   §20  Category / Tile Selector  (.tile-grid / .tile-btn)
   §21  File Drop Zone  (.drop-zone)
   §22  Hero / Landing sections
   §23  Stat Cards  (.stat-card)
   §24  Sidebar / Bottom Tab Bar
   §25  Topbar
   §26  Animations & Keyframes
   §27  Responsive Breakpoints
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   §00  DESIGN TOKENS
   ══════════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds ── */
  --bg:           #0A1428;   /* page background */
  --bg-card:      #0F1E38;   /* card / elevated surface */
  --bg-darker:    #080F1E;   /* deepest: footer, drawers */
  --bg-step:      #111D33;   /* form fields, wizard steps */
  --bg-overlay:   rgba(5, 10, 22, 0.82); /* modal scrim */

  /* ── Brand Accents ── */
  --accent:       #29B6F6;   /* primary interactive blue */
  --cyan:         #00E5FF;   /* highlight / gradient end */
  --accent-dim:   rgba(41, 182, 246, 0.15); /* fill on selected/active */
  --accent-glow:  rgba(41, 182, 246, 0.28); /* shadow / glow */
  --cyan-dim:     rgba(0, 229, 255, 0.12);

  /* ── Semantic Colours ── */
  --green:        #66BB6A;   /* success / delivered */
  --green-bright: #00C853;   /* success icon emphasis */
  --amber:        #FFA726;   /* warning / on-hold */
  --amber-dim:    rgba(255, 167, 38, 0.15);
  --yellow:       #FFC107;   /* quoted-action-needed */
  --yellow-dim:   rgba(255, 193, 7, 0.15);
  --red:          #EF5350;   /* error / cancelled */
  --red-dim:      rgba(239, 83, 80, 0.12);

  /* ── Text ── */
  --text-primary: #F0F4FF;   /* headings, labels */
  --text-muted:   #8A9BBE;   /* helper text, placeholders */
  --text-dim:     #4A5568;   /* very muted, disabled */
  --steel:        #D8E7EF;   /* field labels */
  --white:        #FFFFFF;

  /* ── Borders ── */
  --border:       #1A385C;   /* default border */
  --border-bright: rgba(41, 182, 246, 0.40); /* hover/focus border */
  --border-card:  rgba(41, 182, 246, 0.20);  /* card border */

  /* ── Typography ── */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Type Scale ── */
  --text-xs:      0.68rem;  /* 10.9px */
  --text-sm:      0.78rem;  /* 12.5px */
  --text-base:    0.875rem; /* 14px   */
  --text-md:      1rem;     /* 16px   */
  --text-lg:      1.125rem; /* 18px   */
  --text-xl:      1.375rem; /* 22px   */
  --text-2xl:     1.75rem;  /* 28px   */
  --text-3xl:     2.25rem;  /* 36px   */

  /* ── Spacing Scale ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Radii ── */
  --radius-sm:   4px;   /* inputs */
  --radius-md:   8px;   /* cards, buttons */
  --radius-lg:   12px;  /* large cards */
  --radius-xl:   16px;  /* modal, wizard card */
  --radius-pill: 100px; /* pill/badge */

  /* ── Shadows ── */
  --shadow-card:    0 4px 24px rgba(0,0,0,0.32);
  --shadow-raised:  0 12px 48px rgba(0,0,0,0.44), 0 0 0 1px rgba(41,182,246,0.08);
  --shadow-modal:   0 24px 72px rgba(0,0,0,0.56), 0 0 0 1px rgba(41,182,246,0.10);

  /* ── Motion ── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:     120ms;
  --dur-base:     220ms;
  --dur-slow:     360ms;

  /* ── Z-index ladder ── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-drawer:  300;
  --z-modal:   400;
  --z-toast:   500;
}


/* ══════════════════════════════════════════════════════════
   §01  RESET & BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(10,20,40,0.97), rgba(8,15,30,1) 50%),
    radial-gradient(circle at 70% 6%, rgba(0,229,255,0.13), transparent 36%),
    radial-gradient(circle at 20% 80%, rgba(41,182,246,0.09), transparent 40%),
    var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

ul, ol { list-style: none; }

/* Focus ring — accessible, non-default */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Mono helper class */
.mono { font-family: var(--font-mono); }


/* ══════════════════════════════════════════════════════════
   §02  TYPOGRAPHY SCALE
   ══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.font-400  { font-weight: 400; }
.font-500  { font-weight: 500; }
.font-600  { font-weight: 600; }
.font-700  { font-weight: 700; }
.font-800  { font-weight: 800; }

.text-primary { color: var(--text-primary); }
.text-muted   { color: var(--text-muted); }
.text-dim     { color: var(--text-dim); }
.text-accent  { color: var(--accent); }
.text-cyan    { color: var(--cyan); }
.text-green   { color: var(--green); }
.text-amber   { color: var(--amber); }
.text-red     { color: var(--red); }

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: var(--sp-3);
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.2;
}

.section-sub {
  color: var(--text-muted);
  font-size: var(--text-base);
  max-width: 520px;
  line-height: 1.7;
  margin-top: var(--sp-3);
}

/* i18n: hidden text for screen-readers (locale switching hooks) */
[data-i18n-key] { /* populated at runtime by i18n.js */ }


/* ══════════════════════════════════════════════════════════
   §03  LAYOUT UTILITIES
   ══════════════════════════════════════════════════════════ */
.container {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}

.container--narrow { max-width: 640px; margin-inline: auto; }
.container--mid    { max-width: 780px; margin-inline: auto; }

.flex   { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.wrap   { flex-wrap: wrap; }

.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.grid-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Content page wrapper (accounts for fixed nav + optional sidebar) */
.page-body {
  padding-top: 64px; /* nav height */
  min-height: 100vh;
}
.page-body--with-sidebar {
  display: flex;
}
.page-main {
  flex: 1;
  min-width: 0;
  padding: var(--sp-8) var(--sp-6);
}


/* ══════════════════════════════════════════════════════════
   §04  NAVIGATION
   ══════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(8, 15, 30, 0.88);
  border-bottom: 1px solid rgba(41, 182, 246, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: var(--z-nav);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2) + 2px;
  gap: 10px;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.nav-logo-mark {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent) 0%, var(--cyan) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--bg);
  letter-spacing: -0.5px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.nav-tagline {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--dur-fast), transform var(--dur-fast);
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.nav-cta:hover { background: var(--cyan); transform: translateY(-1px); }

/* Icon buttons in nav (notification bell, avatar) */
.nav-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.nav-icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Unread badge on bell */
.nav-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Avatar dropdown trigger */
.nav-avatar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}
.nav-avatar-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--bg);
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════
   §05  BUTTONS
   ══════════════════════════════════════════════════════════
   Data attribute convention: data-loading="true" shows spinner.
   Disabled via [disabled] or .btn--disabled.
   Size modifiers: .btn--sm / .btn--lg
   ══════════════════════════════════════════════════════════ */

/* Base button reset */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast),
    border-color var(--dur-fast);
  white-space: nowrap;
  user-select: none;
  padding: 10px 22px;
}

.btn:disabled, .btn--disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none !important;
  pointer-events: none;
}

/* Loading state: content hidden, spinner shown */
.btn[data-loading="true"] {
  color: transparent;
  pointer-events: none;
  position: relative;
}
.btn[data-loading="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--bg);
  animation: spin 0.7s linear infinite;
}

/* Primary */
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--cyan) 100%);
  color: var(--bg);
  box-shadow: 0 4px 20px var(--accent-glow);
  padding: 12px 26px;
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 229, 255, 0.30);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

/* Secondary — outlined */
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid rgba(41, 182, 246, 0.50);
  padding: 11px 24px;
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-1px);
}

/* Ghost — minimal, text-only feel */
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

/* Danger */
.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1.5px solid rgba(239, 83, 80, 0.45);
}
.btn-danger:hover:not(:disabled) {
  background: var(--red-dim);
  border-color: var(--red);
}

/* Size modifiers */
.btn--sm  { padding: 7px 16px; font-size: var(--text-sm); }
.btn--lg  { padding: 15px 32px; font-size: var(--text-md); }
.btn--xl  { padding: 18px 36px; font-size: var(--text-lg); font-weight: 700; }
.btn--full { width: 100%; }

/* Legacy aliases (used in index.html — do not remove) */
.btn-back {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.btn-back:hover { border-color: var(--accent); color: var(--accent); }

.btn-next {
  padding: 10px 26px;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  color: var(--bg);
  border: none;
  border-radius: 7px;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  display: flex; align-items: center; gap: 6px;
}
.btn-next:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.btn-next:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }


/* ══════════════════════════════════════════════════════════
   §06  CARDS
   ══════════════════════════════════════════════════════════
   .card            — standard surface
   .card--raised    — elevated (shadow + subtle glow)
   .card--dashed    — dashed border (alt-path / informational)
   .card--accent    — left accent border (info/notice)
   .card--hover     — adds hover lift interaction
   ══════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.card--raised {
  box-shadow: var(--shadow-raised);
  border-color: rgba(41, 182, 246, 0.10);
}

.card--dashed {
  border-style: dashed;
  border-color: rgba(41, 182, 246, 0.30);
  background: rgba(15, 30, 56, 0.50);
}

.card--accent {
  border-left: 3px solid var(--accent);
}

.card--warning {
  border-left: 3px solid var(--amber);
}

.card--error {
  border: 1.5px solid var(--red);
  background: rgba(239, 83, 80, 0.06);
}

.card--hover {
  cursor: pointer;
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.card--hover:hover {
  border-color: rgba(41, 182, 246, 0.40);
  transform: translateY(-3px);
}

/* Card header / body / footer internal sections */
.card-header {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(41, 182, 246, 0.10);
  margin-bottom: var(--sp-4);
}
.card-title {
  font-size: var(--text-lg);
  font-weight: 800;
  margin-bottom: 2px;
}
.card-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.card-footer {
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(41, 182, 246, 0.10);
  margin-top: var(--sp-4);
}


/* ══════════════════════════════════════════════════════════
   §07  FORM CONTROLS
   ══════════════════════════════════════════════════════════
   Data attributes:
     data-invalid="true"  — shows error styling
     data-warn="true"     — shows warning (amber) styling
     data-ai-extracted="true" — yellow highlight (AI pre-fill)
   ══════════════════════════════════════════════════════════ */
.field-group { margin-bottom: var(--sp-5); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.field-label {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--steel);
  margin-bottom: var(--sp-2);
}
.field-label .req {
  color: var(--cyan);
  font-size: var(--text-xs);
  line-height: 1;
}
.field-label .opt {
  color: var(--text-dim);
  font-size: var(--text-xs);
  font-weight: 400;
  margin-left: 4px;
}

/* Base input / select / textarea */
.field-input,
.field-select,
.field-textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--bg-step);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  outline: none;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
  appearance: none;
  -webkit-appearance: none;
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(41, 182, 246, 0.12);
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--text-dim);
}

/* Invalid state */
.field-input[data-invalid="true"],
.field-select[data-invalid="true"],
.field-textarea[data-invalid="true"],
.field-input.invalid,
.field-select.invalid,
.field-textarea.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.10);
}

/* Warning state (e.g. personal email) */
.field-input[data-warn="true"],
.field-select[data-warn="true"],
.field-textarea[data-warn="true"] {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(255, 167, 38, 0.10);
}

/* AI-extracted field (yellow highlight) */
.field-input[data-ai-extracted="true"],
.field-select[data-ai-extracted="true"],
.field-textarea[data-ai-extracted="true"] {
  border-color: var(--yellow);
  background: rgba(255, 193, 7, 0.05);
}

/* Textarea */
.field-textarea {
  min-height: 96px;
  resize: vertical;
}

/* Select arrow */
.field-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2329B6F6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field-select option {
  background: #111D33;
  color: var(--text-primary);
}

/* Inline error/warning messages */
.field-error {
  font-size: var(--text-xs);
  color: var(--red);
  margin-top: var(--sp-1) + 2px;
  margin-top: 5px;
  display: none; /* shown by JS: element.style.display = 'block' */
}
.field-error.visible { display: block; }

.field-warn {
  font-size: var(--text-xs);
  color: var(--amber);
  margin-top: 5px;
  display: none;
}
.field-warn.visible { display: block; }

/* Helper / hint text */
.field-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.5;
}

/* Character counter */
.char-counter {
  font-size: var(--text-xs);
  color: var(--text-dim);
  font-family: var(--font-mono);
  text-align: right;
  margin-top: 4px;
}
.char-counter[data-near-limit="true"] { color: var(--amber); }

/* Input row with inline unit dropdown */
.input-with-unit {
  display: flex;
  gap: 0;
}
.input-with-unit .field-input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
  flex: 1;
}
.input-with-unit .field-select {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  width: 120px;
  flex-shrink: 0;
}

/* Input row with currency prefix */
.input-with-prefix {
  display: flex;
  gap: 0;
}
.input-with-prefix .field-select {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  width: 90px;
  flex-shrink: 0;
  border-right: none;
}
.input-with-prefix .field-input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  flex: 1;
}


/* ══════════════════════════════════════════════════════════
   §08  CHECKBOX & RADIO CUSTOM CONTROLS
   ══════════════════════════════════════════════════════════
   Usage:
     <label class="check-item [check-item--checked]" data-value="ce">
       <span class="chk-box" aria-hidden="true">✓</span>
       CE (EU)
     </label>
   JS toggles .check-item--checked on click.
   ══════════════════════════════════════════════════════════ */
.check-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 12px;
  background: var(--bg-step);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
  user-select: none;
  line-height: 1.4;
}
.check-item:hover { border-color: rgba(41, 182, 246, 0.40); }
.check-item--checked {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text-primary);
}

.chk-box {
  width: 16px; height: 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  font-size: 10px;
  color: transparent;
}
.check-item--checked .chk-box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* Grid layouts for cert/check grids */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
}

/* Radio pill row */
.radio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.radio-pill {
  padding: 8px 16px;
  background: var(--bg-step);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}
.radio-pill:hover { border-color: rgba(41, 182, 246, 0.40); }
.radio-pill--selected {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text-primary);
  font-weight: 600;
}
.radio-pill--recommended::after {
  content: ' ★';
  color: var(--cyan);
  font-size: var(--text-xs);
}

/* Single compliance attestation checkbox */
.attestation-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-step);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast);
  line-height: 1.55;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.attestation-check:hover { border-color: rgba(41, 182, 246, 0.40); }
.attestation-check--checked {
  border-color: var(--accent);
  color: var(--text-primary);
}
.attestation-check .chk-box {
  width: 18px; height: 18px;
  margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════
   §09  PILLS / BADGES
   ══════════════════════════════════════════════════════════
   .pill               — generic pill (cyan tint)
   .pill--accent       — blue fill
   .pill--muted        — gray fill
   .badge              — numeric badge (unread count etc.)
   ══════════════════════════════════════════════════════════ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--accent-dim);
  border: 1px solid rgba(41, 182, 246, 0.22);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

.pill--cyan {
  background: var(--cyan-dim);
  border-color: rgba(0, 229, 255, 0.25);
  color: var(--cyan);
}

.pill--muted {
  background: rgba(74, 85, 104, 0.20);
  border-color: rgba(74, 85, 104, 0.35);
  color: var(--text-muted);
}

.pill--green {
  background: rgba(102, 187, 106, 0.12);
  border-color: rgba(102, 187, 106, 0.25);
  color: var(--green);
}

.pill--amber {
  background: var(--amber-dim);
  border-color: rgba(255, 167, 38, 0.30);
  color: var(--amber);
}

.pill--red {
  background: var(--red-dim);
  border-color: rgba(239, 83, 80, 0.28);
  color: var(--red);
}

/* Badge: circle with number */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
}


/* ══════════════════════════════════════════════════════════
   §10  STATUS PILLS  — 8 RFQ statuses
   ══════════════════════════════════════════════════════════
   Used in RFQ table and buyer dashboard.
   Pulse animation on QUOTED status.
   All have role="status" aria labels (set via JS).
   ══════════════════════════════════════════════════════════ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.status-pill--triaging {
  background: var(--accent-dim);
  color: var(--accent);
}

.status-pill--matched {
  background: var(--cyan-dim);
  color: var(--cyan);
}

.status-pill--quoted {
  background: var(--yellow-dim);
  color: var(--yellow);
  animation: pulse-pill 2.2s ease-in-out infinite;
}

.status-pill--deal_room {
  background: rgba(102, 187, 106, 0.15);
  color: var(--green);
}

.status-pill--ordered {
  background: rgba(102, 187, 106, 0.25);
  color: var(--green);
}

.status-pill--delivered {
  background: rgba(102, 187, 106, 0.35);
  color: #81C784;
}

.status-pill--on_hold {
  background: var(--amber-dim);
  color: var(--amber);
}

.status-pill--cancelled {
  background: var(--red-dim);
  color: var(--red);
}

@keyframes pulse-pill {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}


/* ══════════════════════════════════════════════════════════
   §11  DATA TABLE
   ══════════════════════════════════════════════════════════
   .data-table              — full table
   .data-table--compact     — tighter row height
   Row states via data-attrs on <tr>:
     data-unread="true"     — left cyan border
     data-action-needed="true" — accent tint
     data-archived="true"   — dimmed
   ══════════════════════════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: default;
}

.data-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-fast);
}
.data-table thead th.sortable:hover { color: var(--accent); }
.data-table thead th[aria-sort="ascending"]::after  { content: ' ↑'; color: var(--accent); }
.data-table thead th[aria-sort="descending"]::after { content: ' ↓'; color: var(--accent); }

.data-table tbody tr {
  border-bottom: 1px solid rgba(26, 56, 92, 0.60);
  transition: background var(--dur-fast), border-left-color var(--dur-fast);
}

.data-table tbody tr td {
  padding: 14px 16px;
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: rgba(41, 182, 246, 0.05);
}

/* Unread row */
.data-table tbody tr[data-unread="true"] {
  border-left: 3px solid var(--cyan);
}
.data-table tbody tr[data-unread="true"] .rfq-id {
  font-weight: 700;
}

/* Action-needed row */
.data-table tbody tr[data-action-needed="true"] {
  background: rgba(41, 182, 246, 0.04);
  border-left: 3px solid var(--accent);
}

/* Archived row */
.data-table tbody tr[data-archived="true"] {
  opacity: 0.45;
}

/* RFQ ID cell */
.rfq-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast);
}
.rfq-id:hover { color: var(--cyan); }

/* Context menu trigger */
.ctx-menu-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.ctx-menu-btn:hover {
  border-color: var(--border);
  color: var(--text-muted);
}

.data-table--compact tbody tr td {
  padding: 10px 14px;
}

/* Docs count cell */
.docs-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
}
.docs-count:hover { color: var(--accent); }


/* ══════════════════════════════════════════════════════════
   §12  MODAL
   ══════════════════════════════════════════════════════════
   Usage:
     <div class="modal-overlay" data-state="open|closed" role="dialog"
          aria-modal="true" aria-labelledby="modal-title">
       <div class="modal">
         <div class="modal-header">…</div>
         <div class="modal-body">…</div>
         <div class="modal-footer">…</div>
       </div>
     </div>
   JS: set data-state attr. Focus trapped inside.
   Esc key closes (JS).
   ══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  /* Transition */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.modal-overlay[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  overflow-y: auto;
  transform: scale(0.96) translateY(8px);
  transition: transform var(--dur-base) var(--ease-out);
}
.modal-overlay[data-state="open"] .modal {
  transform: scale(1) translateY(0);
}

.modal--wide  { max-width: 780px; }
.modal--narrow { max-width: 440px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid rgba(41, 182, 246, 0.10);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: 800;
}

.modal-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.modal-close:hover { border-color: var(--accent); color: var(--accent); }

.modal-body {
  padding: var(--sp-6);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border-top: 1px solid rgba(41, 182, 246, 0.10);
}


/* ══════════════════════════════════════════════════════════
   §13  TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════════════
   Usage:
     <div class="toast-stack" aria-live="polite" aria-atomic="false">
       <!-- toasts appended here by JS -->
     </div>

   Each toast:
     <div class="toast toast--success|info|warning|error"
          role="status" data-toast-id="…">
       <span class="toast-icon">…</span>
       <span class="toast-msg">…</span>
       <button class="toast-close" aria-label="Dismiss">×</button>
     </div>

   JS: add .toast--visible to show, remove after 4s.
   ══════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  min-width: 280px;
  max-width: 380px;
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out);
}

.toast--visible {
  transform: translateX(0);
  opacity: 1;
}

.toast--success { border-left: 3px solid var(--green-bright); }
.toast--info    { border-left: 3px solid var(--accent); }
.toast--warning { border-left: 3px solid var(--amber); }
.toast--error   { border-left: 3px solid var(--red); }

.toast-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.toast-msg  { font-size: var(--text-sm); line-height: 1.5; flex: 1; }
.toast-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--dur-fast);
}
.toast-close:hover { color: var(--text-muted); }


/* ══════════════════════════════════════════════════════════
   §14  DRAWER  (slides in from right)
   ══════════════════════════════════════════════════════════
   Usage:
     <div class="drawer-overlay" data-state="open|closed">
       <div class="drawer" role="complementary" aria-label="…">
         <div class="drawer-header">…</div>
         <div class="drawer-body">…</div>
       </div>
     </div>
   Esc and overlay click to close (JS).
   ══════════════════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  pointer-events: none;
}
.drawer-overlay[data-state="open"] { pointer-events: auto; }

.drawer-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.drawer-overlay[data-state="open"]::before { opacity: 1; }

.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  max-width: 100%;
  background: var(--bg-card);
  border-left: 1px solid var(--border-card);
  box-shadow: -12px 0 48px rgba(0,0,0,0.38);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.drawer-overlay[data-state="open"] .drawer { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid rgba(41, 182, 246, 0.10);
  flex-shrink: 0;
}

.drawer-title {
  font-size: var(--text-md);
  font-weight: 700;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
}

.drawer-footer {
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  border-top: 1px solid rgba(41, 182, 246, 0.10);
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════
   §15  SKELETON LOADER
   ══════════════════════════════════════════════════════════
   Usage: <div class="skeleton skeleton--text"></div>
          <div class="skeleton skeleton--rect" style="height:48px"></div>
   ══════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-step) 25%,
    rgba(41, 182, 246, 0.07) 50%,
    var(--bg-step) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease infinite;
  border-radius: var(--radius-sm);
}
.skeleton--text   { height: 14px; border-radius: var(--radius-pill); }
.skeleton--rect   { border-radius: var(--radius-md); }
.skeleton--circle { border-radius: 50%; }

/* Skeleton row for table */
.skeleton-row td { padding: 14px 16px; }
.skeleton-row td .skeleton { display: block; }

@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}


/* ══════════════════════════════════════════════════════════
   §16  EMPTY STATE
   ══════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  gap: var(--sp-3);
}

.empty-state-icon {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

.empty-state-title {
  font-size: var(--text-xl);
  font-weight: 700;
}

.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════
   §17  SLA TIMER
   ══════════════════════════════════════════════════════════
   Usage:
     <div class="sla-timer" data-state="ok|warn|danger|elapsed"
          aria-live="polite" aria-label="Time remaining: 2h 47m">
       <span class="sla-timer-icon">⏱</span>
       <span class="sla-timer-value">02:47:15</span>
       <span class="sla-timer-label">of 4h SLA</span>
     </div>
   ══════════════════════════════════════════════════════════ */
.sla-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

.sla-timer-value { font-size: var(--text-base); }
.sla-timer-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; font-family: var(--font-sans); }

.sla-timer[data-state="ok"]    { color: var(--cyan); }
.sla-timer[data-state="warn"]  { color: var(--amber); animation: pulse-text 1.8s ease-in-out infinite; }
.sla-timer[data-state="danger"]{ color: var(--red);   animation: pulse-text 1.0s ease-in-out infinite; }
.sla-timer[data-state="elapsed"]{ color: var(--amber); }

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}


/* ══════════════════════════════════════════════════════════
   §18  NOTIFICATION ITEMS
   ══════════════════════════════════════════════════════════ */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(41, 182, 246, 0.08);
  cursor: pointer;
  transition: background var(--dur-fast);
  border-radius: var(--radius-sm);
}
.notif-item:hover { background: rgba(41, 182, 246, 0.04); }
.notif-item[data-unread="true"] { background: rgba(41, 182, 246, 0.03); }

.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
  margin-top: 5px;
}
.notif-item[data-unread="false"] .notif-dot { background: transparent; }

.notif-content { flex: 1; min-width: 0; }
.notif-type {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.notif-desc  { font-size: var(--text-sm); line-height: 1.4; }
.notif-time  { font-size: var(--text-xs); color: var(--text-dim); margin-top: 2px; }
.notif-action {
  font-size: var(--text-xs);
  color: var(--accent);
  margin-top: var(--sp-1);
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════
   §19  WIZARD PROGRESS BAR
   ══════════════════════════════════════════════════════════ */
.wizard-progress {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.wizard-step-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-base);
}
.wizard-step-tab[data-state="active"] { border-color: var(--accent); }
.wizard-step-tab[data-state="done"]   { border-color: var(--green); }

.wizard-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.wizard-step-tab[data-state="active"] .wizard-step-num {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.wizard-step-tab[data-state="done"] .wizard-step-num {
  background: var(--green);
  color: var(--bg);
  border-color: var(--green);
}

.wizard-step-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  font-weight: 600;
  text-align: center;
}
.wizard-step-tab[data-state="active"] .wizard-step-label { color: var(--accent); }
.wizard-step-tab[data-state="done"]   .wizard-step-label { color: var(--green); }

/* SLA badge — sticky on wizard */
.sla-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: rgba(41, 182, 246, 0.10);
  border: 1px solid rgba(41, 182, 246, 0.22);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

/* Step content pane animation */
.wizard-pane { display: none; }
.wizard-pane[data-state="active"] { display: block; animation: fadeSlide var(--dur-base) var(--ease-out); }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ══════════════════════════════════════════════════════════
   §20  TILE / CATEGORY SELECTOR
   ══════════════════════════════════════════════════════════
   Usage:
     <div class="tile-grid">
       <button class="tile-btn [tile-btn--selected]" data-value="energy"
               role="option" aria-selected="false">
         <span class="tile-icon">⚡</span>
         <span class="tile-name">Energy & BESS</span>
         <span class="tile-hint">Batteries, inverters…</span>
       </button>
     </div>
   ══════════════════════════════════════════════════════════ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-2) + 2px;
  gap: 10px;
}

.tile-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  background: var(--bg-step);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md) + 2px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  outline: none;
}
.tile-btn:hover { border-color: rgba(41, 182, 246, 0.45); background: rgba(41, 182, 246, 0.06); }
.tile-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tile-btn--selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.tile-icon { font-size: 1.3rem; }
.tile-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.tile-hint { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }


/* ══════════════════════════════════════════════════════════
   §21  FILE DROP ZONE
   ══════════════════════════════════════════════════════════ */
.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6);
  background: var(--bg-step);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.drop-zone:hover,
.drop-zone[data-dragging="true"] {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.drop-zone-icon  { font-size: 1.5rem; color: var(--text-dim); }
.drop-zone-label { font-size: var(--text-sm); font-weight: 600; }
.drop-zone-hint  { font-size: var(--text-xs); color: var(--text-muted); }

/* Uploaded file row */
.upload-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-step);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: var(--sp-2);
}
.upload-item-name  { flex: 1; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item-status{ font-size: var(--text-xs); color: var(--green); }
.upload-item-remove{ font-size: var(--text-xs); color: var(--red); cursor: pointer; background: none; border: none; font-family: var(--font-sans); }

/* Progress bar inside upload item */
.upload-progress {
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 4px;
}
.upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width 0.3s ease;
}


/* ══════════════════════════════════════════════════════════
   §22  HERO / LANDING SECTIONS
   ══════════════════════════════════════════════════════════ */
.hero {
  padding: 148px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -120px; right: -180px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,229,255,0.07) 0%, transparent 65%);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 14px;
  border: 1px solid rgba(0, 229, 255, 0.30);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--cyan);
  font-family: var(--font-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse-dot 2.2s ease-in-out infinite;
}

.hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.5px;
  max-width: 820px;
  margin-bottom: var(--sp-6);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--text-muted);
  max-width: 640px;
  margin-bottom: var(--sp-10);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: var(--sp-12) + 4px;
  margin-bottom: 56px;
}

/* Trust strip */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  padding: var(--sp-6) + 2px 0;
  padding: 28px 0;
  border-top: 1px solid rgba(41, 182, 246, 0.12);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.trust-icon { font-size: 1.1rem; flex-shrink: 0; }
.trust-item strong { color: var(--text-primary); font-weight: 600; }

/* Alt-path entry card */
.alt-path-card {
  border-style: dashed;
  border-color: rgba(41, 182, 246, 0.30);
}


/* ══════════════════════════════════════════════════════════
   §23  STAT CARDS  (buyer dashboard)
   ══════════════════════════════════════════════════════════ */
.stat-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transition: border-color var(--dur-base);
}
.stat-card:hover { border-color: rgba(41, 182, 246, 0.35); }

.stat-card-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card-value {
  font-size: var(--text-2xl);
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--cyan);
  line-height: 1;
}

.stat-card-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* Stat cells (landing page variant — horizontal connected) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2px;
}
.stat-cell {
  padding: 32px 24px;
  background: var(--bg-card);
  text-align: center;
  border: 1px solid var(--border);
  transition: border-color var(--dur-base);
}
.stat-cell:first-child { border-radius: 10px 0 0 10px; }
.stat-cell:last-child  { border-radius: 0 10px 10px 0; }
.stat-cell:hover { border-color: rgba(41, 182, 246, 0.40); }
.stat-num {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
}
.stat-label { font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 0.3px; }


/* ══════════════════════════════════════════════════════════
   §24  SIDEBAR + BOTTOM TAB BAR  (dashboard layout)
   ══════════════════════════════════════════════════════════ */
.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid rgba(41, 182, 246, 0.10);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px); /* subtract nav */
  padding: var(--sp-4) 0;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.sidebar-nav { flex: 1; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-left-color var(--dur-fast);
  border-left: 3px solid transparent;
  text-decoration: none;
}
.sidebar-link:hover { background: rgba(41, 182, 246, 0.05); color: var(--text-primary); }
.sidebar-link[data-active="true"] {
  background: var(--accent-dim);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.sidebar-link-icon { font-size: 1rem; flex-shrink: 0; width: 18px; text-align: center; }

.sidebar-divider { height: 1px; background: rgba(41, 182, 246, 0.08); margin: var(--sp-3) var(--sp-5); }

/* Collapsed sidebar (icon-only, 48px) */
.sidebar--collapsed { width: 48px; }
.sidebar--collapsed .sidebar-link-label { display: none; }
.sidebar--collapsed .sidebar-link { padding: 10px 0; justify-content: center; }

/* Language switcher (in sidebar footer) */
.lang-switcher {
  display: flex;
  gap: 4px;
  padding: var(--sp-3) var(--sp-5);
  flex-wrap: wrap;
}
.lang-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-btn[data-active="true"] { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }

/* Bottom Tab Bar (mobile) */
.bottom-tab-bar {
  display: none; /* shown via media query */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--bg-card);
  border-top: 1px solid rgba(41, 182, 246, 0.14);
  z-index: var(--z-sticky);
  grid-template-columns: repeat(4, 1fr);
}
.tab-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: var(--text-xs);
  font-weight: 500;
  transition: color var(--dur-fast);
}
.tab-bar-btn[data-active="true"] { color: var(--accent); }
.tab-bar-icon { font-size: 1.1rem; }


/* ══════════════════════════════════════════════════════════
   §25  TOPBAR  (authenticated dashboard)
   ══════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(10, 20, 40, 0.95);
  border-bottom: 1px solid rgba(41, 182, 246, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  gap: var(--sp-4);
}

.topbar-brand {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-sans);
  flex-shrink: 0;
}

.topbar-spacer { flex: 1; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Dropdown menu (avatar, context menus) */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  z-index: var(--z-raised);
  padding: var(--sp-1) 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.dropdown[data-open="true"] .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.dropdown-item {
  display: block;
  padding: 9px var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.dropdown-item:hover { background: rgba(41, 182, 246, 0.06); color: var(--text-primary); }
.dropdown-item--danger { color: var(--red); }
.dropdown-item--danger:hover { background: var(--red-dim); color: var(--red); }
.dropdown-divider { height: 1px; background: rgba(41, 182, 246, 0.08); margin: var(--sp-1) 0; }


/* ══════════════════════════════════════════════════════════
   §26  ANIMATIONS & KEYFRAMES
   ══════════════════════════════════════════════════════════ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Utility animation classes */
.animate-fade-in { animation: fadeIn var(--dur-base) var(--ease-out) both; }
.animate-slide-up { animation: slideUp var(--dur-slow) var(--ease-out) both; }


/* ══════════════════════════════════════════════════════════
   §27  RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

/* ── Tablet: 768–1279px ── */
@media (max-width: 1279px) {
  .sidebar { width: 48px; }
  .sidebar-link-label { display: none; }
  .sidebar-link { padding: 10px 0; justify-content: center; }
  .stat-cards-row { grid-template-columns: repeat(2, 1fr); }
  /* Hide low-priority columns in table */
  .data-table .col-last-activity { display: none; }
}

/* ── Mobile: < 768px ── */
@media (max-width: 767px) {
  /* Hide sidebar, show bottom tab bar */
  .sidebar { display: none; }
  .bottom-tab-bar { display: grid; }
  .page-body--with-sidebar { flex-direction: column; }
  .page-main { padding: var(--sp-4) var(--sp-4) 72px; /* bottom tab bar clearance */ }

  /* Stat cards 2×2 */
  .stat-cards-row { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero { padding: 110px 0 60px; }
  .hero-actions { gap: 10px; }

  /* Wizard */
  .rfq-body, .rfq-header { padding-left: 20px; padding-right: 20px; }
  .rfq-footer { flex-direction: column; align-items: flex-start; padding: 16px 20px 22px; }
  .rfq-footer-btns { width: 100%; justify-content: flex-end; }

  /* Field row: single column */
  .field-row { grid-template-columns: 1fr; }
  .grid-2col { grid-template-columns: 1fr; }
  .grid-4col { grid-template-columns: repeat(2, 1fr); }

  /* Tile grid: 2 columns */
  .tile-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stat strip */
  .stat-cell:first-child { border-radius: 10px 10px 0 0; }
  .stat-cell:last-child  { border-radius: 0 0 10px 10px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Nav */
  .nav-tagline { display: none; }

  /* Drawer: full width */
  .drawer { width: 100%; }

  /* Toast: full width */
  .toast-stack { left: var(--sp-3); right: var(--sp-3); bottom: 72px; align-items: stretch; }
  .toast { max-width: 100%; }

  /* Hide non-essential table columns */
  .data-table .col-last-activity,
  .data-table .col-category { display: none; }

  /* Wizard progress: show step num only (labels hidden) */
  .wizard-step-label { display: none; }
}

/* ── Very small: < 400px ── */
@media (max-width: 399px) {
  .container { width: calc(100% - 24px); }
  .stat-cards-row { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
}


/* ══════════════════════════════════════════════════════════
   LEGACY ALIASES — for index.html existing class names
   Do not remove; these forward to the token system above.
   ══════════════════════════════════════════════════════════ */

/* Legacy wizard card shell */
.rfq-card  { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-raised); }
.rfq-header { padding: 32px 36px 24px; border-bottom: 1px solid rgba(41,182,246,0.12); }
.rfq-title  { font-size: var(--text-xl); font-weight: 800; margin-bottom: 4px; }
.rfq-subtitle { font-size: var(--text-sm); color: var(--text-muted); }
.rfq-body   { padding: 32px 36px; min-height: 340px; }
.rfq-pane   { display: none; }
.rfq-pane.active { display: block; animation: fadeSlide var(--dur-base) var(--ease-out); }
.rfq-footer { padding: 20px 36px 28px; border-top: 1px solid rgba(41,182,246,0.10); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.rfq-footer-note { font-size: var(--text-xs); color: var(--text-dim); flex: 1; }
.rfq-footer-btns { display: flex; gap: 10px; align-items: center; }

/* Legacy wizard step tabs (old class names) */
.rfq-progress { display: flex; align-items: stretch; gap: 0; margin-top: var(--sp-6); }
.rfq-step-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: var(--sp-3); border-bottom: 2px solid var(--border); cursor: pointer; transition: border-color var(--dur-base); }
.rfq-step-tab.active { border-color: var(--accent); }
.rfq-step-tab.done   { border-color: var(--green); }
.rfq-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; font-family: var(--font-mono); color: var(--accent); transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.rfq-step-tab.active .rfq-step-num { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.rfq-step-tab.done   .rfq-step-num { background: var(--green); color: var(--bg); border-color: var(--green); }
.rfq-step-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); font-weight: 600; text-align: center; }
.rfq-step-tab.active .rfq-step-label { color: var(--accent); }
.rfq-step-tab.done   .rfq-step-label { color: var(--green); }
.rfq-pane-title { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--sp-5); display: flex; align-items: center; gap: var(--sp-2); }
.step-badge { font-size: var(--text-xs); background: var(--accent-dim); color: var(--accent); border-radius: var(--radius-pill); padding: 2px 8px; font-family: var(--font-mono); font-weight: 600; }
.rfq-success { display: none; text-align: center; padding: 52px 36px; animation: fadeSlide var(--dur-slow) var(--ease-out); }
.rfq-success.active { display: block; }
.success-icon  { font-size: 3rem; margin-bottom: var(--sp-4); }
.success-title { font-size: var(--text-2xl); font-weight: 800; margin-bottom: 10px; }
.success-sub   { color: var(--text-muted); font-size: var(--text-sm); max-width: 440px; margin: 0 auto var(--sp-6); line-height: 1.6; }
.success-ref   { display: inline-block; padding: 8px 20px; background: var(--accent-dim); border: 1px solid rgba(41,182,246,0.25); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--cyan); letter-spacing: 0.5px; margin-bottom: var(--sp-5); }

/* Legacy category selector (old names) */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-bottom: var(--sp-5); }
.cat-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; background: var(--bg-step); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); text-align: left; }
.cat-btn:hover { border-color: rgba(41,182,246,0.45); background: rgba(41,182,246,0.06); }
.cat-btn.selected { border-color: var(--accent); background: var(--accent-dim); }
.cat-icon { font-size: 1.3rem; }
.cat-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.cat-hint { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }
.cat-tags  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* Legacy cert-check (old names) */
.cert-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.cert-check { display: flex; align-items: center; gap: var(--sp-2); padding: 10px 12px; background: var(--bg-step); border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; user-select: none; }
.cert-check:hover { border-color: rgba(41,182,246,0.35); }
.cert-check.checked { border-color: var(--accent); background: var(--accent-dim); color: var(--text-primary); }
.cert-check .chk-box { width: 16px; height: 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur-fast), border-color var(--dur-fast); font-size: 10px; color: transparent; }
.cert-check.checked .chk-box { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* Legacy field validation */
.field-error { font-size: var(--text-xs); color: var(--red); margin-top: 5px; display: none; }
.field-input.invalid, .field-select.invalid, .field-textarea.invalid { border-color: var(--red); }

/* Legacy pillar cards, how-it-works, FAQ (landing page) */
.pillars { padding: 80px 0; }
.section-head { text-align: center; margin-bottom: 52px; }
.section-eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 600; color: var(--cyan); letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--font-mono); margin-bottom: 14px; }
.section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.8px; line-height: 1.2; }
.section-sub { color: var(--text-muted); margin-top: 12px; font-size: var(--text-base); max-width: 520px; margin-left: auto; margin-right: auto; }
.pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.pillar-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; transition: border-color var(--dur-base), transform var(--dur-base); }
.pillar-card:hover { border-color: rgba(41,182,246,0.4); transform: translateY(-3px); }
.pillar-icon { font-size: 1.8rem; margin-bottom: 14px; display: block; }
.pillar-name { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--sp-2); }
.pillar-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
.pillar-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pillar-tag  { padding: 3px 10px; background: var(--accent-dim); border: 1px solid rgba(41,182,246,0.20); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--accent); font-family: var(--font-mono); }
.how { padding: 80px 0; background: rgba(15,30,56,0.25); border-top: 1px solid rgba(41,182,246,0.10); border-bottom: 1px solid rgba(41,182,246,0.10); }
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); position: relative; }
.how-steps::before { content: ''; position: absolute; top: 26px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), var(--accent), transparent); opacity: 0.22; pointer-events: none; }
.how-step { padding: 28px 20px; text-align: center; position: relative; }
.how-step-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg-card); border: 1.5px solid rgba(41,182,246,0.35); font-size: var(--text-md); font-weight: 700; font-family: var(--font-mono); color: var(--accent); margin: 0 auto 14px; position: relative; z-index: 1; }
.how-step-title { font-size: var(--text-sm) + 0.08rem; font-weight: 700; margin-bottom: 6px; }
.how-step-desc  { font-size: var(--text-xs) + 0.1rem; color: var(--text-muted); line-height: 1.55; }
.categories { padding: 80px 0; border-top: 1px solid rgba(41,182,246,0.10); }
.cat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
.cat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: border-color var(--dur-base), transform var(--dur-base); }
.cat-card:hover { border-color: rgba(41,182,246,0.35); transform: translateY(-2px); }
.cat-card-head  { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cat-card-icon  { font-size: 1.5rem; flex-shrink: 0; }
.cat-card-name  { font-size: var(--text-base); font-weight: 700; }
.cat-card-desc  { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.cat-card-tags  { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { padding: 3px 9px; background: rgba(41,182,246,0.08); border: 1px solid rgba(41,182,246,0.18); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.faq-section { padding: 80px 0; border-top: 1px solid rgba(41,182,246,0.10); }
.faq-list { max-width: 740px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(41,182,246,0.10); }
.faq-q { width: 100%; background: none; border: none; padding: 18px 0; text-align: left; color: var(--text-primary); font-size: var(--text-sm) + 0.05rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); transition: color var(--dur-fast); font-family: var(--font-sans); }
.faq-q:hover { color: var(--accent); }
.faq-arrow { font-size: var(--text-xs) + 0.08rem; color: var(--accent); flex-shrink: 0; transition: transform 0.25s; display: inline-block; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding-bottom 0.3s ease; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.65; padding-bottom: 0; }
.faq-item.open .faq-a { max-height: 240px; padding-bottom: 18px; }
.site-footer { padding: 48px 0; border-top: 1px solid rgba(41,182,246,0.12); background: rgba(8,15,30,0.6); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand { font-size: var(--text-sm); font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: var(--text-sm); color: var(--text-muted); }
.footer-links a:hover { color: var(--accent); }
.footer-copy { font-size: var(--text-xs); color: var(--text-dim); }
.stats-row { padding: 72px 0; border-top: 1px solid rgba(41,182,246,0.10); }