/* KeyBro app design system.
   Look (Mohamed, 2026-10-08): black and white, Apple website
   style. White surfaces, soft gray panels (#f5f5f7), near black
   text (#1d1d1f), hairline borders, pill buttons, big clean type,
   generous whitespace. No color anywhere: black is the accent.
   Presentation only: element ids and JS behavior are unchanged by
   anything in this file. */
:root {
  --bg: #ffffff;
  --panel: #f5f5f7;
  --panel-2: #e8e8ed;
  --line: #d2d2d7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --black: #000000;
  --radius: 22px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.shell {
  max-width: 560px;
  margin: 0 auto;
  /* Generous fixed top padding plus the device inset: on Android 15
     the app draws under the status bar, and the inset alone came
     back too small on a real phone, clipping the logo (2026-10-08). */
  padding: calc(54px + env(safe-area-inset-top)) 20px 48px;
}
.shell.has-tabs { padding-bottom: 110px; }
a { color: var(--ink); }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 30px 0 10px; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 24px 0 8px; }
p { line-height: 1.5; }
.section-note { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

/* Brand header: the logo and a quiet wordmark line. */
.brand { margin-bottom: 8px; }
.brand h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.brand p { color: var(--muted); margin: 0 0 16px; }
.brand-row { display: flex; align-items: center; gap: 12px; }
/* The logo lives in a circular badge on every screen (Mohamed,
   2026-10-09): a white disc with a hairline ring and a soft shadow,
   the wide wordmark contained inside it. The same treatment styles
   the launch splash logo (.splash-logo) so the intro can land the
   big logo exactly onto this badge with no visible swap. Every
   page load, the badge zooms in with a small settle. */
.brand-logo, .splash-logo {
  display: block;
  box-sizing: border-box;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid #e9e9ee;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(29, 29, 31, 0.08);
}
.brand-logo {
  width: 92px;
  height: 92px;
  max-width: 34vw;
  padding: 15px;
  /* The logo badge is always centered on the page (Mohamed,
     2026-10-09), on the home hero and on every brand header. */
  margin-left: auto;
  margin-right: auto;
  animation: kb-logo-in 0.9s cubic-bezier(0.22, 0.8, 0.32, 1) both;
}
@keyframes kb-logo-in {
  0% { opacity: 0; transform: scale(0.55); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.hero { padding: 10px 0 4px; }
.hero .brand-logo { width: 118px; height: 118px; padding: 25px; margin-bottom: 22px; }
.hero h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 10px; }
.hero h1 .accent { color: var(--ink); }
.hero p { color: var(--muted); margin: 0 0 8px; font-size: 17px; }
.back-link {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Cards: flat soft gray panels on white, the Apple store look. */
.card {
  display: block;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
  text-decoration: none;
  color: inherit;
}
.card strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.card span { color: var(--muted); line-height: 1.5; }

/* Home entry cards: pure typography, title, one quiet line, and
   an arrow. No pictures: the words do the work. */
.entry-choices { display: block; margin-top: 26px; }
.entry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  transition: transform 0.16s ease;
}
.entry-card:active { transform: scale(0.98); }
.entry-card .entry-text { flex: 1; }
.entry-card .entry-text strong { font-size: 20px; margin-bottom: 3px; }
.entry-card .chev {
  color: #aeaeb2;
  font-size: 22px;
  font-weight: 300;
  transition: transform 0.2s ease;
}
.entry-card:active .chev { transform: translateX(3px); }
.contact { color: var(--muted); margin-top: 28px; text-align: center; font-size: 14px; }

/* Bottom of the home and customer pages: two quiet links, no
   sentences (Mohamed, 2026-10-08). */
.legal-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 44px;
}
.legal-links a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.legal-links a:active { color: var(--ink); }

/* Stat cards (locksmith and admin dashboards): real counts only,
   filled in by JS from the loaded lists. */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 4px; }
.stat-card { background: var(--panel); border-radius: var(--radius); padding: 16px 18px; }
.stat-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* Job cards in lists: black service badge, gray status chip,
   vehicle as the title, meta lines, price in solid black. */
.job-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.badge {
  display: inline-block;
  background: var(--ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.chip {
  display: inline-block;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.job-price { color: var(--ink); font-weight: 800; font-size: 17px; margin-top: 4px; }
.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn-row button { flex: 1; margin-top: 0; width: auto; }

/* Admin list tools: job search and the locksmith filter. */
.list-tools { display: block; margin: 4px 0 14px; }
.list-tools input, .list-tools select { margin-bottom: 10px; }
.job-locksmith-line { color: var(--ink); font-weight: 600; }

/* Service history rows on the customer page: tappable records. */
.history-item { width: 100%; text-align: left; cursor: pointer; }

/* Forms: soft gray panels, white inputs, hairline borders. */
form {
  background: var(--panel);
  border-radius: 24px;
  padding: 20px 18px;
  margin: 14px 0;
}
form h2 { margin-top: 0; }
label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 6px;
}
label:first-of-type { margin-top: 4px; }
input, select, textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 16px;
  background: #ffffff;
  color: var(--ink);
  font-family: inherit;
}
input::placeholder, textarea::placeholder { color: #aeaeb2; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
button {
  background: var(--black);
  color: #ffffff;
  border: 0;
  border-radius: 980px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  width: 100%;
  min-height: 52px;
}
button:active { transform: scale(0.99); }
button.btn-ghost {
  background: #ffffff;
  border: 1px solid var(--ink);
  color: var(--ink);
}
form p { color: var(--muted); font-size: 14px; }

/* Status timeline (customer tracker and job history): dots on a
   rail, finished steps in solid black, the current step ringed. */
.status-list { list-style: none; padding: 0; margin: 8px 0; }
.status-list li {
  position: relative;
  padding: 11px 0 11px 36px;
  color: var(--muted);
}
.status-list li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 15px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #c7c7cc;
  z-index: 1;
}
.status-list li::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 32px;
  bottom: -8px;
  width: 2px;
  background: #e5e5ea;
}
.status-list li:last-child::after { display: none; }
.status-list li.done { color: var(--ink); font-weight: 600; }
.status-list li.done::before { background: var(--ink); border-color: var(--ink); }
.status-list li.done::after { background: var(--ink); }
.status-list li.current::before { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.12); }

/* Locksmith status controls on the job screen: the next step
   button is the primary action and is sized for one handed use in
   a work van. The release button is deliberately quieter. */
button.status-next { min-height: 60px; font-size: 18px; }
button.status-release {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--muted);
  min-height: 48px;
}

/* Pinned job summary: soft gray card, order number up top. Stays
   visible above the message thread so the service, vehicle, and
   agreed price are always on screen while either side messages. */
.job-summary {
  position: sticky;
  top: calc(8px + env(safe-area-inset-top));
  z-index: 1;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.job-summary h2 { margin: 0 0 8px; font-size: 21px; }
.job-summary p { margin: 3px 0; color: #3a3a3c; }
.job-summary p:first-of-type { color: var(--ink); font-weight: 700; font-size: 16px; }
#job-status-line {
  display: inline-block;
  background: var(--ink);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  margin: 2px 0 14px;
}

/* Dedicated job screen: one job per screen, opened by navigation
   from a list, never expanded inside one (see BUILD_NOTES.md,
   "Navigation pattern"). Bottom padding clears the fixed tab bar. */
.job-screen { padding-bottom: 112px; }

/* Bottom tab bars: frosted white with a hairline top border, the
   active tab in solid black. */
.job-tabs, .app-tabs {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 560px;
  display: flex;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 2;
}
.job-tabs .job-tab {
  flex: 1;
  margin: 0;
  min-height: 62px;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 0 3px 0 transparent;
}
.job-tabs .job-tab.active { color: var(--ink); box-shadow: inset 0 3px 0 var(--ink); }
.app-tabs a {
  flex: 1;
  text-align: center;
  padding: 9px 0 7px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.app-tabs a .tab-ic, .app-tabs button .tab-ic { display: block; margin-bottom: 3px; }
/* Tab buttons (the customer page's real tabs, 2026-10-09): same
   look as the tab links, but they switch panels in place instead
   of navigating. The global action button sizing does not apply. */
.app-tabs button {
  flex: 1;
  margin: 0;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  padding: 9px 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.app-tabs button.active { color: var(--ink); }
.app-tabs button:active .tab-ic svg { transform: scale(1.18); }
/* Drawn line icons (inline SVG), sized here and in the job tabs.
   The press zoom is deliberate: a tapped tab answers back. */
.tab-ic svg {
  width: 25px;
  height: 25px;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-tabs a:active .tab-ic svg { transform: scale(1.18); }
.app-tabs a.active { color: var(--ink); }
.job-tabs .job-tab svg {
  width: 21px;
  height: 21px;
  vertical-align: -4px;
  margin-right: 7px;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.job-tabs .job-tab.active svg { transform: scale(1.12); }

/* Message threads: chat bubbles, own messages in solid black with
   white text, pushed right, sender named above the text. */
#message-thread { margin: 10px 0; }
.msg {
  max-width: 86%;
  background: var(--panel-2);
  color: var(--ink);
  border-radius: 18px;
  padding: 9px 13px;
  margin: 9px 0;
  line-height: 1.45;
}
.msg .msg-who {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 2px;
}
.msg-mine { margin-left: auto; background: var(--ink); color: #ffffff; }
.msg-mine .msg-who { color: rgba(255, 255, 255, 0.65); }

/* Notices: quiet gray panels with a black edge. JS fills these
   with state text (not connected yet, waiting for approval). */
.notice {
  background: var(--panel);
  border-left: 4px solid var(--ink);
  color: var(--muted);
  padding: 13px 14px;
  border-radius: 12px;
  margin-top: 20px;
  line-height: 1.5;
}
#request-result {
  background: var(--panel);
  border-left: 4px solid var(--ink);
  border-radius: 12px;
  padding: 14px;
  line-height: 1.55;
}
#request-result strong { color: var(--ink); font-size: 18px; }

/* Empty list placeholders written by JS ("No jobs waiting…"). */
#queue-list p, #my-jobs p, #job-list p, #decision-list p,
#locksmith-list p, #history-list p, #message-thread p.plain { color: var(--muted); }

/* Motion: pages arrive like paper being put down one sheet at a
   time (Mohamed, 2026-10-09). Every block drops in from just above,
   a touch askew, and settles flat, and the blocks land one after
   another instead of all at once: first the page sections, then
   the cards inside each list stack the same way. Tab panels settle
   in with a small zoom, and cards answer a press by shrinking a
   touch. All of it stops under prefers-reduced-motion below. */
@keyframes kb-rise {
  from { opacity: 0; transform: translateY(-18px) rotate(-0.5deg) scale(0.99); }
  to { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
.shell > *:not(nav) { animation: kb-rise 0.85s cubic-bezier(0.22, 0.8, 0.32, 1) both; }
.shell > *:nth-child(2) { animation-delay: 0.12s; }
.shell > *:nth-child(3) { animation-delay: 0.24s; }
.shell > *:nth-child(4) { animation-delay: 0.60s; }
.shell > *:nth-child(5) { animation-delay: 0.48s; }
.shell > *:nth-child(6) { animation-delay: 0.60s; }
.shell > *:nth-child(7) { animation-delay: 0.72s; }
.shell > *:nth-child(8) { animation-delay: 0.84s; }
.shell > *:nth-child(9) { animation-delay: 0.96s; }
.shell > *:nth-child(10) { animation-delay: 1.08s; }
.shell > *:nth-child(11) { animation-delay: 0.7s; }
.shell > *:nth-child(12) { animation-delay: 1.32s; }
/* The same one by one landing for the boxes inside a page: the two
   home entry cards, the dashboard stat cards, and every card in
   the job, history, decision, and locksmith lists. */
.entry-choices > .card,
.stats > .stat-card,
#queue-list > .card,
#my-jobs > .card,
#history-list > .card,
#decision-list > .card,
#job-list > .card,
#locksmith-list > .card {
  animation: kb-rise 0.85s cubic-bezier(0.22, 0.8, 0.32, 1) both;
}
.entry-choices > :nth-child(2), .stats > :nth-child(2),
#queue-list > :nth-child(2), #my-jobs > :nth-child(2),
#history-list > :nth-child(2), #decision-list > :nth-child(2),
#job-list > :nth-child(2), #locksmith-list > :nth-child(2) { animation-delay: 0.15s; }
.entry-choices > :nth-child(3), .stats > :nth-child(3),
#queue-list > :nth-child(3), #my-jobs > :nth-child(3),
#history-list > :nth-child(3), #decision-list > :nth-child(3),
#job-list > :nth-child(3), #locksmith-list > :nth-child(3) { animation-delay: 0.30s; }
.entry-choices > :nth-child(4), .stats > :nth-child(4),
#queue-list > :nth-child(4), #my-jobs > :nth-child(4),
#history-list > :nth-child(4), #decision-list > :nth-child(4),
#job-list > :nth-child(4), #locksmith-list > :nth-child(4) { animation-delay: 0.75s; }
#queue-list > :nth-child(5), #my-jobs > :nth-child(5),
#history-list > :nth-child(5), #decision-list > :nth-child(5),
#job-list > :nth-child(5), #locksmith-list > :nth-child(5) { animation-delay: 0.60s; }
#queue-list > :nth-child(6), #my-jobs > :nth-child(6),
#history-list > :nth-child(6), #decision-list > :nth-child(6),
#job-list > :nth-child(6), #locksmith-list > :nth-child(6) { animation-delay: 0.75s; }
#queue-list > :nth-child(7), #my-jobs > :nth-child(7),
#history-list > :nth-child(7), #decision-list > :nth-child(7),
#job-list > :nth-child(7), #locksmith-list > :nth-child(7) { animation-delay: 0.54s; }
#queue-list > :nth-child(8), #my-jobs > :nth-child(8),
#history-list > :nth-child(8), #decision-list > :nth-child(8),
#job-list > :nth-child(8), #locksmith-list > :nth-child(8) { animation-delay: 0.63s; }
@keyframes kb-panel {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tab-enter { animation: kb-panel 0.3s ease both; }
.card { transition: transform 0.16s ease; }
.history-item:active { transform: scale(0.985); }
button { transition: transform 0.12s ease; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Language switch (2026-10-09): EN and ES buttons pinned at the top
   right corner of every screen, injected by shared/i18n.js. English
   is the default; tapping ES reloads the app fully in Spanish. */
.lang-switch {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  z-index: 60;
  display: flex;
  gap: 6px;
}
.lang-switch button {
  border: 1px solid #d2d2d7;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #1d1d1f;
  border-radius: 999px;
  /* Small on purpose (Mohamed, 2026-10-09): the global button rule
     sets a 52px min height for real action buttons, which made
     these little pills render as big circles next to the logo.
     Reset it here so EN and ES stay small corner buttons. */
  min-height: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
.lang-switch button.active {
  background: #1d1d1f;
  color: #ffffff;
  border-color: #1d1d1f;
}

/* Launch intro (Mohamed, 2026-10-09): when the app opens, the logo
   is the first thing on screen, big and centered on white, the way
   a game logo opens. It holds for a beat, then zooms out and flies
   up to its place at the top of the home screen and sits there.
   The home page script drives the move and removes the overlay;
   it plays once per app run (sessionStorage) and never when the
   system asks for reduced motion. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.8s ease;
}
.splash.fly { background: rgba(255, 255, 255, 0); }
.splash-logo {
  width: 196px;
  height: 196px;
  padding: 40px;
  animation: kb-splash-in 0.8s cubic-bezier(0.22, 0.8, 0.32, 1) both;
}
.splash-logo.fly {
  animation: none;
  transition: transform 1.1s cubic-bezier(0.22, 0.8, 0.32, 1);
}
@keyframes kb-splash-in {
  0% { opacity: 0; transform: scale(0.7); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Learn: course list, lessons, video, quizzes. */
.learn-mod-title { margin: 22px 0 8px; }
.learn-progress-wrap { margin-bottom: 6px; }
.progress-track { height: 8px; border-radius: 999px; background: #e8e8ed; overflow: hidden; margin: 8px 0 4px; }
.progress-fill { height: 100%; background: #1d1d1f; border-radius: 999px; transition: width 400ms ease; }
.lesson-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 0; margin: 0 0 8px; padding: 14px 16px;
  background: #f5f5f7; color: #1d1d1f; border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px; text-align: left; font-size: 16px; font-weight: 600;
}
.lesson-row .lesson-meta { font-size: 13px; font-weight: 400; color: #6e6e73; }
.done-badge {
  flex: none; font-size: 12px; font-weight: 700; color: #fff; background: #1d1d1f;
  border-radius: 999px; padding: 4px 10px;
}
.learn-module-line { color: #6e6e73; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; }
.learn-steps li { margin-bottom: 10px; line-height: 1.5; }
.video-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: #000; margin: 8px 0;
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tip-box { background: #f5f5f7; border-radius: 16px; padding: 14px 16px; margin: 18px 0; }
.quiz-q { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.quiz-q.quiz-right { border-color: #1d1d1f; background: #f5f5f7; }
.quiz-q.quiz-wrong { border-color: #b00020; }
.quiz-question { font-weight: 600; margin: 0 0 8px; }
.quiz-opt { display: block; padding: 8px 6px; font-size: 16px; }
.quiz-opt input { width: auto; min-height: 0; margin-right: 6px; }

/* Services picker (locksmith sign up and dashboard). */
.svc-group { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 10px 14px 12px; margin: 12px 0; }
.svc-group legend { font-weight: 700; padding: 0 6px; }
.svc-opt { display: block; padding: 8px 4px; font-size: 16px; }
.svc-opt input { width: auto; min-height: 0; margin-right: 6px; }

/* Centered wording (Mohamed, 2026-10-09): headings, display text,
   notes, form labels, input text, and the words inside cards sit
   centered. Chat bubbles, the status timeline, and checkbox rows
   keep their working alignment. */
h1, h2, h3,
.tagline, .section-note, .notice, .plain,
.legal-links, .stat-card, .brand, .card,
form label, #request-result {
  text-align: center;
}
input, select, textarea { text-align: center; }
.job-top, .btn-row { justify-content: center; }

/* Vehicle brand dropdown (customer request form): tap the field,
   pick from an alphabetical list with each brand's logo. Only the
   makes KeyBro services. No European brands, by Mohamed's rule. */
.brand-dd { position: relative; margin: 6px 0 12px; }
.brand-select {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; margin: 0; padding: 10px 16px;
  background: #fff; color: #1d1d1f; font-size: 16px; font-weight: 600;
  border: 1.5px solid rgba(0, 0, 0, 0.14); border-radius: 14px;
}
.brand-select img { width: 40px; height: 28px; object-fit: contain; }
.brand-select:disabled { opacity: 0.45; }
.brand-chevron { color: var(--muted); font-size: 13px; }
.brand-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  max-height: 320px; overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}
.brand-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 0; margin: 0; padding: 10px 12px;
  background: transparent; color: #1d1d1f; font-size: 16px; font-weight: 600;
  border: none; border-radius: 10px; text-align: left;
}
.brand-row img { width: 38px; height: 28px; object-fit: contain; flex: none; }
.brand-row.selected { background: #f5f5f7; }

/* Highlighted recommended price in the offer guidance. */
#offer-guide {
  background: #f5f5f7; border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px; padding: 12px 14px; font-size: 15px; color: #1d1d1f;
}
.price-hl {
  background: #1d1d1f; color: #fff; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap;
}

/* Missed required field: red ring and a blush of background until
   the customer corrects it. */
.field-error {
  border-color: #d70015 !important;
  box-shadow: 0 0 0 3px rgba(215, 0, 21, 0.16);
  background-color: #fff6f6;
}

/* All keys lost highlight: only the words themselves, a small
   dark pill inside the sentence under the price recommendation. */
.akl-hl {
  background: #1d1d1f; color: #fff; font-weight: 700;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}

/* Text only button (forgot password) and the danger button
   (delete account). */
.link-btn {
  background: none; border: none; color: #0066cc; font-size: 15px;
  min-height: 0; width: auto; margin: 0; padding: 6px 4px; font-weight: 600;
}
.danger-btn {
  background: #fff; color: #d70015; border: 1.5px solid #d70015;
}
.danger-btn:active { background: #fff0f0; }

/* Star rating row on the customer tracker. */
.star-row { display: flex; justify-content: center; gap: 6px; margin: 8px 0; }
.star-btn {
  background: none; border: none; font-size: 34px; line-height: 1;
  color: rgba(0, 0, 0, 0.22); min-height: 0; width: auto; margin: 0; padding: 2px 4px;
}
.star-btn.on { color: #1d1d1f; }

/* Info buttons by the personal fields: a small circled i that
   opens the plain promise for that field. */
.label-row { display: flex; justify-content: center; align-items: center; gap: 6px; }
.info-btn {
  flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
  border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.28);
  background: #fff; color: var(--muted);
  font-size: 12px; font-weight: 700; font-style: italic; font-family: Georgia, serif;
  line-height: 1;
}
.info-note {
  background: #f5f5f7; border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px; padding: 9px 12px; font-size: 13.5px;
  color: #1d1d1f; text-align: center; margin: 6px 0 10px;
}