/* Petromix · Smart Advisor (the supplied "AI Lube Advisor" tab)
   Scoped under .la. Same industrial theme as the Price Calculator.

   IN THE APP — the supplied lube-advisor.css, every rule unchanged, plus:
   1. The Google Fonts @import is replaced by @font-face rules for the SAME
      font files (Barlow, Barlow Condensed, IBM Plex Mono — the same weights,
      the same unicode ranges), served from ./fonts/ and precached, so the tab
      looks identical with no signal. The app's service worker refuses other
      origins, so the @import would have dropped to system fonts offline.
   2. A baseline matching the demo page the design was drawn on: 16px, normal
      line-height and letter-spacing. The app's own body and heading rules
      (line-height 1.5, headings at -0.01em) would otherwise shift the layout.
   3. The frame it sits in inside Live Orders (rounded, no full-page height). */

/* 1. The same font files the supplied @import loaded, served locally. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("./fonts/barlow-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("./fonts/barlow-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("./fonts/barlow-condensed-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("./fonts/barlow-condensed-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.la {
  --la-acc: #FFC20E;
  --la-shell: #121417;
  --la-shell-raised: #1C1F23;
  --la-card: #FFFFFF;
  --la-card-sub: #F7F8F8;
  --la-line: #DADDE1;
  --la-line-soft: #E6E8EB;
  --la-text: #121417;
  --la-text-2: #3B424A;
  --la-muted: #5B636D;
  --la-on-dark-muted: #A3ABB4;
  --la-green: #1F9D55; --la-green-text: #157A41; --la-green-bg: #EEF8F2; --la-green-line: #BFE3CC;
  --la-amber: #E08A00; --la-amber-text: #9A5B00; --la-amber-bg: #FFF6E5; --la-amber-line: #F2D59E;
  --la-red: #D92D20;   --la-red-text: #B42318;   --la-red-bg: #FDEEEC;   --la-red-line: #F4C3BE;
  --la-font: "Barlow", system-ui, sans-serif;
  --la-cond: "Barlow Condensed", "Barlow", sans-serif;
  --la-mono: "IBM Plex Mono", ui-monospace, monospace;

  box-sizing: border-box;
  min-height: 100%;
  padding: 32px 24px 56px;
  background: var(--la-shell);
  color: var(--la-text);
  font-family: var(--la-font);
  -webkit-font-smoothing: antialiased;
}
/* 2. The demo page's baseline. Declared before the supplied rules that set
      their own values, so those still win exactly as designed. */
.la { font-size: 16px; line-height: normal; letter-spacing: normal; text-align: left; }
.la :where(h1, h2, h3) { letter-spacing: normal; }
/* The app makes buttons inherit the page font; the demo had the browser's own
   button font. Restored so an unstyled button measures as designed. */
.la :where(button) { font-size: 13.3333px; line-height: normal; }
.la *, .la *::before, .la *::after { box-sizing: border-box; }
:where(.la) :where(button, textarea) { font-family: inherit; color: inherit; }
.la h1, .la h2, .la h3, .la p, .la ul { margin: 0; }
.la [hidden] { display: none !important; }
.la-num { font-variant-numeric: tabular-nums; }
.la-cond { font-family: var(--la-cond); }
.la-mono { font-family: var(--la-mono); }
.la-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--la-muted); }

.la-container { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

/* ---------- Header ---------- */
.la-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.09); }
.la-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--la-on-dark-muted); margin-bottom: 6px; }
.la-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--la-acc); }
.la-title { font-family: var(--la-cond); font-size: 40px; line-height: 1; font-weight: 800; color: #FFFFFF; text-transform: uppercase; }
.la-header-actions { display: flex; align-items: center; gap: 12px; }
.la-status { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; font-family: var(--la-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #D5DAE0; }
.la-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--la-on-dark-muted); }
.la-reset { height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: transparent; color: #FFFFFF !important; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .15s; }
.la-reset:hover { background: rgba(255,255,255,.06); }
.la-reset:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* ---------- Layout ---------- */
.la-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.la-input { flex: 1 1 440px; min-width: 0; background: var(--la-card); border: 1px solid var(--la-line); border-radius: 10px; }
.la-output { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.la-block { padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.la-block + .la-block { border-top: 1px solid var(--la-line-soft); }
.la-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.la-step-title { display: flex; align-items: baseline; gap: 12px; }
.la-step-no { font-family: var(--la-cond); font-size: 14px; font-weight: 700; color: var(--la-muted); }
.la-h { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Prompt console ---------- */
.la-console { border: 1px solid #C9CED4; border-radius: 10px; background: var(--la-card-sub); display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.la-console:focus-within { border-color: var(--la-shell); box-shadow: 0 0 0 3px rgba(255,194,14,.45); }
.la-console textarea { min-height: 168px; resize: vertical; border: 0; background: transparent; padding: 16px 18px; font-size: 16px; line-height: 1.55; color: var(--la-text); outline: none; }
.la-console textarea::placeholder { color: #7A828C; }
.la-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-top: 1px solid #E3E6E9; }
.la-mic { position: relative; width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: var(--la-shell); color: #FFFFFF !important; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .15s; }
.la-mic:hover { background: #2A2F35; }
.la-mic:disabled { opacity: .4; cursor: not-allowed; }
.la-mic[aria-pressed="true"] { background: var(--la-acc); color: var(--la-shell) !important; }
.la-mic[aria-pressed="true"]::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--la-acc); animation: la-ping 1.2s ease-out infinite; }
@keyframes la-ping { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.la-mic-hint { font-size: 13px; font-weight: 600; color: var(--la-muted); display: flex; align-items: center; gap: 10px; }
.la-eq { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.la-eq span { width: 3px; border-radius: 2px; background: var(--la-shell); animation: la-eq .9s ease-in-out infinite; }
.la-eq span:nth-child(2) { animation-delay: .15s; } .la-eq span:nth-child(3) { animation-delay: .3s; } .la-eq span:nth-child(4) { animation-delay: .45s; } .la-eq span:nth-child(5) { animation-delay: .6s; }
@keyframes la-eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.la-analyze { margin-left: auto; height: 48px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--la-shell); color: #FFFFFF !important; font-size: 15px; font-weight: 800; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: transform .14s, filter .14s; }
.la-analyze:hover { filter: brightness(1.25); transform: translateY(-1px); }
.la-analyze:active { transform: scale(.985); }
.la-analyze:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.la-mic:focus-visible, .la-analyze:focus-visible, .la-chip:focus-visible, .la-step:focus-visible, .la-cta:focus-visible, .la-review:focus-visible { outline: 3px solid var(--la-shell); outline-offset: 2px; }

.la-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.la-chip { height: 44px; padding: 0 14px; border: 1px solid var(--la-line); border-radius: 999px; background: var(--la-card-sub); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s, background-color .15s; }
.la-chip:hover { border-color: var(--la-shell); background: #FFFFFF; }

.la-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.la-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #E3E6E9; border-radius: 8px; background: #FFFFFF; font-size: 14px; font-weight: 700; transition: background-color .2s, border-color .2s; }
.la-check i { width: 20px; height: 20px; flex: none; border-radius: 50%; background: #C9CED4; color: #FFFFFF; display: flex; align-items: center; justify-content: center; transition: background-color .2s; }
.la-check small { display: block; font-size: 12px; font-weight: 600; color: var(--la-muted); }
.la-check.is-hit { background: #F3FAF6; border-color: var(--la-green-line); }
.la-check.is-hit i { background: var(--la-green); }

/* ---------- Idle ---------- */
.la-idle { min-height: 520px; border: 1px dashed rgba(255,255,255,.18); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px; text-align: center; }
.la-idle h2 { font-family: var(--la-cond); font-size: 28px; font-weight: 800; color: #FFFFFF; text-transform: uppercase; }
.la-idle p { max-width: 420px; font-size: 15px; line-height: 1.55; color: var(--la-on-dark-muted); }

/* ---------- Loading ---------- */
.la-loading { position: relative; min-height: 520px; background: #0B0C0E; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 40px; }
.la-scanline { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.06); overflow: hidden; }
.la-scanline::after { content: ""; position: absolute; top: 0; left: 0; width: 25%; height: 2px; background: var(--la-acc); animation: la-scan 1.4s linear infinite; }
@keyframes la-scan { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
.la-loading-label { font-family: var(--la-mono); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #FFFFFF; }
.la-blink { animation: la-blink 1s steps(2) infinite; color: var(--la-acc); }
@keyframes la-blink { 50% { opacity: .2; } }
.la-steps { display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.la-stepline { display: flex; align-items: center; gap: 10px; font-family: var(--la-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: #5B636D; }
.la-stepline i { width: 8px; height: 8px; border-radius: 50%; background: #3A3F45; }
.la-stepline span:last-child { margin-left: auto; }
.la-stepline.is-active { color: #FFFFFF; } .la-stepline.is-active i { background: var(--la-acc); box-shadow: 0 0 0 4px rgba(255,194,14,.25); }
.la-stepline.is-done { color: var(--la-on-dark-muted); } .la-stepline.is-done i { background: var(--la-green); }
.la-progress { width: 300px; height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.la-progress div { height: 3px; width: 8%; background: var(--la-acc); transition: width .8s ease; }

/* ---------- Result ---------- */
.la-fade { animation: la-in .45s cubic-bezier(.2,.7,.2,1) both; }
.la-fade-2 { animation-delay: .08s; } .la-fade-3 { animation-delay: .16s; }
@keyframes la-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.la-card { background: var(--la-card); border: 1px solid var(--la-line); border-radius: 10px; }
.la-rec { overflow: hidden; }
.la-rec-head { padding: 14px 24px; background: var(--la-shell-raised); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.la-rec-head .la-h { color: #FFFFFF; font-size: 12px; letter-spacing: .14em; }
.la-rec-head .la-mono { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--la-on-dark-muted); }
.la-rec-body { padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.la-rec-main { flex: 999 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.la-rec-name { font-family: var(--la-cond); font-size: 48px; line-height: .95; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.la-rec-sub { font-size: 16px; font-weight: 600; color: var(--la-text-2); }
.la-spec { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid var(--la-line); border-radius: 4px; background: var(--la-card-sub); font-family: var(--la-mono); font-size: 12px; font-weight: 600; }

.la-conf { flex: 1 1 300px; display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 10px; border: 1px solid; }
.la-conf.is-high { background: var(--la-green-bg); border-color: var(--la-green-line); --ring: var(--la-green); --conf-text: var(--la-green-text); }
.la-conf.is-med  { background: var(--la-amber-bg); border-color: var(--la-amber-line); --ring: var(--la-amber); --conf-text: var(--la-amber-text); }
.la-conf.is-low  { background: var(--la-red-bg);   border-color: var(--la-red-line);   --ring: var(--la-red);   --conf-text: var(--la-red-text); }
.la-ring { position: relative; width: 104px; height: 104px; flex: none; }
.la-ring svg { transform: rotate(-90deg); }
.la-ring .arc { stroke: var(--ring); transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1); }
.la-ring-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.la-ring-val b { font-family: var(--la-cond); font-size: 32px; line-height: 1; font-weight: 800; }
.la-ring-val small { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--la-muted); }
.la-conf-label { font-size: 17px; font-weight: 800; color: var(--conf-text); }
.la-conf-note { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--la-text-2); }

.la-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.la-pane { flex: 1 1 320px; min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.la-why, .la-openlist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.la-why li, .la-openlist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; font-weight: 600; }
.la-why i, .la-openlist i { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 4px; background: var(--la-shell); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.la-why li.is-warn i, .la-openlist li.is-warn i { color: var(--la-acc); }

.la-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--la-line); border-radius: 8px; overflow: hidden; }
.la-pair > div { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.la-pair > div + div { border-left: 1px solid var(--la-line); }
.la-pair b { font-size: 15px; font-weight: 800; }
.la-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.la-qty-label b { display: block; font-size: 15px; font-weight: 700; }
.la-qty-label small { font-size: 12px; font-weight: 600; color: var(--la-muted); }
.la-stepper { display: flex; align-items: center; gap: 8px; }
.la-step { width: 48px; height: 48px; border: 1px solid var(--la-line); border-radius: 8px; background: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.la-step:hover { background: #EDEFF1; }
.la-qty-val { min-width: 64px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--la-shell); border-radius: 8px; font-family: var(--la-cond); font-size: 24px; font-weight: 800; }
.la-vol { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 2px solid var(--la-shell); }
.la-vol span:first-child { font-size: 13px; font-weight: 700; color: var(--la-text-2); }
.la-vol b { font-family: var(--la-cond); font-size: 30px; font-weight: 800; line-height: 1; }
.la-vol small { font-size: 16px; color: var(--la-muted); }
.la-cta { height: 56px; border: 0; border-radius: 8px; background: var(--la-acc); color: var(--la-shell) !important; font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 0 0 1px rgba(18,20,23,.12) inset; transition: transform .14s, box-shadow .14s, filter .14s; }
.la-cta:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(18,20,23,.55); }
.la-cta:active { transform: scale(.985); }
.la-cta svg { transition: transform .14s; } .la-cta:hover svg { transform: translateX(3px); }
.la-review { height: 56px; border: 0; border-radius: 8px; background: var(--la-shell); color: #FFFFFF !important; font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.la-error { padding: 16px 20px; border-radius: 10px; background: var(--la-red-bg); border: 1px solid var(--la-red-line); color: var(--la-red-text); font-weight: 700; }

@media (max-width: 640px) {
  .la { padding: 24px 16px 48px; }
  .la-title { font-size: 32px; }
  .la-checks { grid-template-columns: minmax(0, 1fr); }
  .la-rec-name { font-size: 36px; }
  .la-idle, .la-loading { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .la *, .la *::before, .la *::after { animation: none !important; transition: none !important; }
}

/* 3. Inside Live Orders: the dark shell becomes a rounded panel in the view,
      instead of the whole page it was in the demo. */
.adv-host { min-width: 0; }
.adv-host .la { min-height: 0; border-radius: var(--r-lg, 16px); overflow: hidden; }

/* 4. Light theme. The design's panels are already white; what is dark is the
      FRAME around them (the shell, the header, the empty state). In the app's
      light theme that frame goes light and its text dark. The dark buttons
      (Analyze, the mic, Request review) and the scanner during loading stay
      as designed — they read as controls and an instrument on any ground. */
:root[data-scheme="light"] .adv-host .la { background: #ECEEF1; }
:root[data-scheme="light"] .la-header { border-bottom-color: rgba(18,20,23,.12); }
:root[data-scheme="light"] .la-eyebrow { color: #5B636D; }
:root[data-scheme="light"] .la-title, :root[data-scheme="light"] .la-idle h2 { color: #121417; }
:root[data-scheme="light"] .la-status { border-color: rgba(18,20,23,.16); color: #3B424A; }
:root[data-scheme="light"] .la-reset { border-color: rgba(18,20,23,.2); color: #121417 !important; }
:root[data-scheme="light"] .la-reset:hover { background: rgba(18,20,23,.05); }
:root[data-scheme="light"] .la-reset:focus-visible { outline-color: #121417; }
:root[data-scheme="light"] .la-idle { border-color: rgba(18,20,23,.2); }
:root[data-scheme="light"] .la-idle p { color: #5B636D; }

/* 5. The questions (advisor.js change 9): "Understood", the confidence change,
      and the "Sharpen the match" card. On the design's white panels, in its
      own tokens: #121417 on #F7F8F8 is 17:1, the muted #5B636D on white 6.1:1,
      the green and red delta inks 4.9:1 or better on every confidence tint. */
.la-understood { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--la-text-2); }
.la-delta { margin-top: 2px; font-family: var(--la-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.la-delta.is-up { color: var(--la-green-text); }
.la-delta.is-down { color: var(--la-red-text); }
.la-ask { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.la-ask-sub { margin-top: -6px; font-size: 14px; font-weight: 600; color: var(--la-muted); }
.la-answered { display: flex; flex-wrap: wrap; gap: 8px; }
.la-ans { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--la-green-line); border-radius: 999px; background: var(--la-green-bg); color: var(--la-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.la-ans b { font-weight: 800; }
.la-ans span { margin-left: 2px; font-size: 16px; line-height: 1; color: var(--la-muted); }
.la-ans:hover { border-color: var(--la-green); }
.la-q { padding-top: 14px; border-top: 1px solid var(--la-line-soft); display: flex; flex-direction: column; gap: 10px; }
.la-q-text { font-size: 16px; line-height: 1.35; font-weight: 800; color: var(--la-text); }
.la-q-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 4px; background: var(--la-shell); color: var(--la-acc); font-family: var(--la-cond); font-size: 14px; font-weight: 800; vertical-align: 1px; }
.la-q-text small { display: block; margin: 4px 0 0 32px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--la-muted); }
.la-q-opts { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 32px; }
.la-opt { min-height: 44px; padding: 0 14px; border: 1px solid #C9CED4; border-radius: 8px; background: var(--la-card-sub); color: var(--la-text) !important; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s, background-color .15s; }
.la-opt:hover { border-color: var(--la-shell); background: #FFFFFF; }
.la-opt--muted { background: transparent; color: var(--la-text-2) !important; font-weight: 600; }
.la-opt--go { background: var(--la-shell); border-color: var(--la-shell); color: #FFFFFF !important; }
.la-opt--go:hover { background: #2A2E33; border-color: #2A2E33; }
.la-q-form { display: flex; gap: 8px; padding-left: 32px; }
.la-q-input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #C9CED4; border-radius: 8px; background: #FFFFFF; color: var(--la-text); font: inherit; font-size: 15px; font-weight: 600; outline: none; }
.la-q-input:focus { border-color: var(--la-shell); box-shadow: 0 0 0 3px rgba(255,194,14,.45); }
.la-opt:focus-visible, .la-ans:focus-visible { outline: 3px solid var(--la-shell); outline-offset: 2px; }
@media (max-width: 640px) {
  .la-ask { padding: 18px 16px; }
  .la-q-opts, .la-q-form { padding-left: 0; }
  .la-q-text small { margin-left: 0; }
}

/* 10. The conversation (v4.186): the state in words, what was understood, the evidence, the candidates side by side. */
.la-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 24px 14px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--la-line); background: var(--la-card-sub); }
.la-state b { font-size: 15px; font-weight: 800; color: var(--la-text); }
.la-state span { font-size: 13px; font-weight: 600; color: var(--la-text-2); }
.la-state.is-verified { background: var(--la-green-bg); border-color: var(--la-green-line); } .la-state.is-verified b { color: var(--la-green-text); }
.la-state.is-potential { background: var(--la-amber-bg); border-color: var(--la-amber-line); } .la-state.is-potential b { color: var(--la-amber-text); }
.la-state.is-insufficient { background: var(--la-card-sub); } .la-state.is-insufficient b { color: var(--la-text-2); }
.la-state.is-none { background: var(--la-red-bg); border-color: var(--la-red-line); } .la-state.is-none b { color: var(--la-red-text); }
.la-more { font-size: 13px; font-weight: 600; color: var(--la-muted); }
.la-reply { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--la-line-soft); }
.la-reply-row { display: flex; gap: 8px; }
.la-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.la-fact { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--la-line); border-radius: 8px; background: var(--la-card-sub); font-size: 13.5px; font-weight: 600; color: var(--la-text); overflow-wrap: anywhere; }
.la-fact b { font-weight: 800; color: var(--la-text-2); }
.la-fact small { font-size: 11.5px; color: var(--la-muted); }
.la-fact.is-assumed { background: var(--la-amber-bg); border-color: var(--la-amber-line); }
.la-fact-x { width: 28px; height: 28px; margin: -4px -6px -4px 0; border: 0; border-radius: 6px; background: transparent; color: var(--la-muted) !important; font-size: 16px; cursor: pointer; }
.la-fact-x:hover { color: var(--la-red-text) !important; }
.la-unknown, .la-fresh, .la-muted { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--la-muted); }
.la-ev { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
.la-ev li { display: flex; gap: 8px; align-items: flex-start; color: var(--la-text-2); overflow-wrap: anywhere; }
.la-ev li.is-warn { color: var(--la-amber-text); }
.la-ev a { color: var(--la-text); font-weight: 800; text-decoration: underline; }
.la-tablewrap { overflow-x: auto; margin-top: 10px; }
.la-cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.la-cmp th, .la-cmp td { padding: 8px 10px; border-top: 1px solid var(--la-line-soft); text-align: left; vertical-align: top; min-width: 130px; overflow-wrap: anywhere; }
.la-cmp thead th { border-top: 0; font-weight: 800; }
.la-cmp tbody th { font-weight: 700; color: var(--la-muted); min-width: 84px; white-space: nowrap; }
.la-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--la-acc); color: var(--la-shell); font-size: 11px; font-weight: 800; }
.la-sec { height: 48px; border: 1px solid var(--la-line); border-radius: 8px; background: var(--la-card-sub); color: var(--la-text) !important; font-size: 15px; font-weight: 800; cursor: pointer; }
.la-cta--soft { background: var(--la-card-sub); border: 1px solid var(--la-amber-line); color: var(--la-amber-text) !important; }
@media (max-width: 640px) { .la-state { margin-inline: 16px; } }

/* Analyze a customer (v4.187): the second tab of the Smart Advisor, in the advisor's own styling. */
.adv-modes { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; border: 1px solid var(--hairline-strong, rgba(255,255,255,.14)); border-radius: 12px; background: var(--e2-bg, rgba(255,255,255,.04)); width: fit-content; max-width: 100%; }
.adv-mode { min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-muted, #aaa); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.adv-mode.is-on { background: var(--accent, #f7a11a); color: var(--on-accent, #1a1206); }
.adv-host[hidden] { display: none; }
.ca .ca-top .ca-pad { padding: 4px 24px 20px; }
.ca .ca-sub { margin: 14px 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--la-muted); }
.ca .ca-profile { font-size: 15px; font-weight: 600; color: var(--la-text-2); }
.ca .ca-k-estimate { background: var(--la-amber-bg); border-color: var(--la-amber-line); }
.ca .ca-k-reported { background: var(--la-card); }
.ca .ca-k-record { background: var(--la-card-sub); }
.ca .ca-opp { padding: 14px 0; border-top: 1px solid var(--la-line-soft); display: flex; flex-direction: column; gap: 6px; }
.ca .ca-opp:first-of-type { border-top: 0; }
.ca .ca-opp-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 10px; }
.ca .ca-opp-h b { font-size: 16px; font-weight: 800; color: var(--la-text); }
.ca .ca-rank { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 4px; background: var(--la-shell); color: var(--la-acc); font-size: 13px; }
.ca .ca-line { font-size: 14px; font-weight: 600; color: var(--la-text-2); overflow-wrap: anywhere; }
.ca .ca-link { padding: 0; border: 0; background: none; color: var(--la-text) !important; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.ca .ca-btn { align-self: flex-start; padding: 0 16px; }
.ca .ca-list { margin: 0 0 6px 18px; padding: 0; font-size: 14px; font-weight: 600; color: var(--la-text-2); display: flex; flex-direction: column; gap: 4px; }
.ca .ca-warn { color: var(--la-amber-text); }
.ca .ca-obj { padding: 8px 0; border-top: 1px solid var(--la-line-soft); } .ca .ca-obj small { display: block; color: var(--la-muted); font-weight: 600; } .ca .ca-obj p { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--la-text-2); }
.ca .ca-draft { width: 100%; min-height: 150px; margin: 6px 0 12px; padding: 10px 12px; border: 1px solid #C9CED4; border-radius: 8px; background: #fff; color: var(--la-text); font: inherit; font-size: 14px; line-height: 1.45; resize: vertical; }
.ca .ca-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ca .ca-acts .la-cta, .ca .ca-acts .la-sec { height: 48px; padding: 0 16px; }
.ca-ov { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.6); }
.ca-dlg { width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 20px; border-radius: 14px; background: var(--la-card); color: var(--la-text); display: flex; flex-direction: column; gap: 10px; }
.ca-dlg h2 { margin: 0; font-size: 18px; font-weight: 800; } .ca-dlg p { margin: 0; font-size: 14px; font-weight: 600; color: var(--la-text-2); }
.ca-pre { margin: 0; padding: 10px 12px; border: 1px solid var(--la-line); border-radius: 8px; background: var(--la-card-sub); font: inherit; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .ca .ca-top .ca-pad { padding: 4px 16px 16px; } .adv-mode { padding: 0 12px; font-size: 13.5px; } }