:root {
  --blue: #194da8;
  --blue-dark: #0c2f70;
  --orange: #f36b21;
  --ink: #111827;
  --muted: #667085;
  --line: #d9dee8;
  --soft: #f4f7fb;
  --white: #fff;
  --success: #147d4f;
  --danger: #b42318;
  --radius: 24px;
  --shadow: 0 20px 60px rgba(13, 45, 100, .08);
}
* { box-sizing: border-box; }
[hidden], .is-hidden { display: none !important; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; max-width: 100%; overflow-x: hidden; color: var(--ink); background: var(--soft); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
main { min-width: 0; }
.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; padding: 16px clamp(18px, 4vw, 64px); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { flex: 0 1 300px; min-width: 0; }
.brand img { width: min(285px, 48vw); max-height: 76px; object-fit: contain; object-position: left center; }
.main-nav { display: flex; align-items: center; gap: 20px; font-weight: 800; }
.main-nav a { text-decoration: none; white-space: nowrap; }
.nav-pill, .button { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: 100%; min-height: 44px; padding: 10px 17px; border: 0; color: #fff; background: var(--blue); font-weight: 900; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, opacity .15s ease, background .15s ease; }
.nav-pill { border-radius: 999px; }
.button { border-radius: 12px; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button.secondary { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.button.small { min-height: 38px; padding: 8px 14px; font-size: .88rem; }
.button.large { min-height: 50px; padding: 12px 22px; font-size: 1rem; }
.button.mini { min-height: 34px; padding: 7px 10px; font-size: .8rem; border-radius: 10px; }
.menu-toggle { display: none; min-height: 48px; padding: 10px 18px; border: 0; border-radius: 999px; color: #fff; background: var(--blue); font-weight: 900; }
.page-hero { padding: clamp(46px, 8vw, 100px) clamp(20px, 7vw, 110px); color: #fff; background: linear-gradient(120deg, var(--blue-dark), var(--blue)); }
.page-hero h1 { max-width: 900px; margin: 8px 0 14px; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -.04em; }
.page-hero p { max-width: 760px; margin: 0; font-size: clamp(1rem, 2vw, 1.25rem); }
.page-hero.compact { padding-block: 54px; }
.booking-hero { padding-block: clamp(36px, 6vw, 72px); }
.eyebrow { margin: 0 0 8px; color: var(--orange); font-size: .78rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.section { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 54px 0; min-width: 0; }
.section.narrow, .booking-section { width: min(920px, calc(100% - 28px)); }
.site-footer { display: flex; justify-content: space-between; gap: 32px; padding: 42px clamp(20px, 6vw, 90px); color: #fff; background: #090e18; }
.alert { margin-bottom: 18px; padding: 14px 18px; border-radius: 14px; }
.alert.danger { color: #7a271a; background: #fef3f2; border: 1px solid #fecdca; }
.alert.success { color: #05603a; background: #ecfdf3; border: 1px solid #abefc6; }
.success-box { padding: clamp(28px, 6vw, 60px); text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.success-box h2 { margin: 8px 0 12px; font-size: clamp(1.7rem, 5vw, 3rem); }
.success-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; color: #fff; background: var(--success); font-size: 2rem; font-weight: 950; }
.success-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* Smart booking wizard */
.wizard { min-width: 0; }
.wizard-progress { position: sticky; top: 96px; z-index: 20; margin-bottom: 22px; padding: 16px 18px; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(13,45,100,.08); backdrop-filter: blur(14px); }
.progress-track { height: 8px; overflow: hidden; background: #e9edf4; border-radius: 99px; }
.progress-track span { display: block; width: 12.5%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); border-radius: inherit; transition: width .25s ease; }
.progress-copy { display: flex; justify-content: space-between; gap: 16px; margin-top: 9px; font-size: .88rem; }
.progress-copy span { color: var(--muted); }
.wizard-step { display: none; padding: clamp(24px, 5vw, 44px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.wizard-step.active { display: block; animation: fade .2s ease; }
@keyframes fade { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.step-heading { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 28px; }
.step-heading > span { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; color: #fff; background: var(--blue); border-radius: 50%; font-weight: 950; }
.step-heading h2 { margin: 0; font-size: clamp(1.55rem, 4vw, 2.25rem); line-height: 1.1; letter-spacing: -.025em; }
.step-heading p { margin: 7px 0 0; color: var(--muted); }
.situation-grid, .service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.situation-card, .service-card { min-width: 0; min-height: 190px; padding: 24px; text-align: left; color: var(--ink); background: #fff; border: 2px solid #e3e7ee; border-radius: 22px; cursor: pointer; transition: border .15s ease, background .15s ease, transform .15s ease; }
.situation-card:hover, .service-card:hover { transform: translateY(-2px); border-color: #aab8cf; }
.situation-card.selected, .service-card.selected { border-color: var(--orange); background: #fff8f2; box-shadow: 0 0 0 4px rgba(243,107,33,.08); }
.situation-card strong, .service-card strong { display: block; margin-bottom: 8px; font-size: 1.1rem; line-height: 1.25; }
.situation-card small, .service-card small { display: block; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.situation-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; color: #fff; background: var(--blue); border-radius: 14px; font-size: 1.35rem; }
.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-card { min-height: 130px; }
.form-grid, .grid { display: grid; gap: 18px; min-width: 0; }
.form-grid.two, .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid label, .control-panel label, .booking-form label { display: block; min-width: 0; color: #243047; font-weight: 850; }
.form-grid .full, .control-panel .wide, .grid .wide { grid-column: 1 / -1; }
input, select, textarea { display: block; width: 100%; min-width: 0; margin-top: 8px; padding: 14px 15px; color: var(--ink); background: #fff; border: 1px solid #cfd6e2; border-radius: 14px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(25,77,168,.12); }
textarea { resize: vertical; }
.native-date-wrap { display: flex; width: 100%; min-width: 0; margin-top: 8px; padding: 14px 15px; background: #fff; border: 1px solid #cfd6e2; border-radius: 14px; }
.native-date-wrap input { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.conditional-block { margin-top: 24px; padding: 22px; background: #fff8f2; border: 1px solid #fed7aa; border-radius: 18px; }
.conditional-block[hidden], #scheduleFields[hidden] { display: none !important; }
.conditional-block h3 { margin-top: 0; }
.safety-note { margin: 16px 0 0; color: #7a2e0e; font-weight: 750; }
.timing-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.timing-cards label { position: relative; min-width: 0; cursor: pointer; }
.timing-cards input { position: absolute; opacity: 0; pointer-events: none; }
.timing-cards span { display: block; min-height: 118px; padding: 22px; background: #fff; border: 2px solid #e3e7ee; border-radius: 18px; }
.timing-cards strong, .timing-cards small { display: block; }
.timing-cards small { margin-top: 7px; color: var(--muted); }
.timing-cards input:checked + span { border-color: var(--orange); background: #fff8f2; box-shadow: 0 0 0 4px rgba(243,107,33,.08); }
.review-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; }
.review-card > div { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.review-card > div:last-of-type { border-bottom: 0; }
.review-card span { color: var(--muted); }
.review-card strong { overflow-wrap: anywhere; }
.review-card details { padding: 15px 18px; border-top: 1px solid var(--line); }
.review-card summary { cursor: pointer; font-weight: 900; }
.review-card ul { margin: 12px 0 0; padding: 0; list-style: none; }
.review-card li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--line); text-transform: capitalize; }
.payment-explainer { margin-top: 18px; padding: 20px; color: #17335e; background: #eef4ff; border: 1px solid #c7d7f6; border-radius: 18px; }
.payment-explainer p { margin-bottom: 0; }
.consent-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; font-weight: 650; }
.consent-row input { flex: 0 0 20px; width: 20px; height: 20px; margin: 3px 0 0; }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.wizard-actions #nextButton, .wizard-actions #submitButton { margin-left: auto; }

/* App dashboard */
.app-shell { display: grid; grid-template-columns: 260px minmax(0,1fr); min-height: 100vh; background: #eef2f7; }
.app-sidebar { position: sticky; top: 0; height: 100vh; min-width: 0; padding: 24px 18px; color: #fff; background: #0a1428; overflow-y: auto; }
.app-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-logo img { width: 180px; max-height: 68px; object-fit: contain; object-position: left center; }
.app-menu-toggle { display: none; }
.app-sidebar-content { min-width: 0; }
.user-card { margin: 28px 0 16px; padding: 16px; background: rgba(255,255,255,.08); border-radius: 16px; }
.user-card span, .user-card strong { display: block; overflow-wrap: anywhere; }
.user-card span { color: #c7d2e5; }
.app-nav { display: grid; gap: 6px; }
.app-nav a { position: relative; padding: 11px 13px; color: #e7edf8; text-decoration: none; border-radius: 11px; font-weight: 800; }
.app-nav a:hover { background: rgba(255,255,255,.08); }
.app-nav a.active { color: #fff; background: rgba(25,77,168,.42); }
.app-nav a.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--orange); border-radius: 3px; }
.app-main { width: 100%; min-width: 0; max-width: 1680px; padding: clamp(18px, 3vw, 40px); }
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.app-topbar h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.8rem); }
.panel { min-width: 0; margin-bottom: 22px; padding: clamp(20px, 3vw, 30px); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 40px rgba(13,45,100,.06); }
.panel-head, .work-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel h2 { margin-top: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card, .mini-card { min-width: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.stat-card span, .stat-card strong, .stat-card small { display: block; }
.stat-card span { color: var(--muted); font-size: .86rem; }
.stat-card strong { margin-top: 7px; font-size: clamp(1.35rem, 3vw, 1.9rem); }
.stat-card small { margin-top: 6px; color: var(--muted); font-size: .76rem; }
.work-card { min-width: 0; margin-top: 18px; padding: 20px; background: #fbfcfe; border: 1px solid var(--line); border-radius: 18px; }
.work-card h3 { margin: 5px 0; overflow-wrap: anywhere; }
.work-card p { overflow-wrap: anywhere; }
.code { color: var(--blue); font-weight: 950; }
.badge { display: inline-flex; flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #e8eef8; font-size: .76rem; font-weight: 900; white-space: nowrap; }
.note { padding: 12px; background: #fff; border-left: 4px solid var(--orange); border-radius: 8px; }
.control-panel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; gap: 14px; min-width: 0; margin-top: 18px; }
.control-panel > *, .form-grid > *, .grid > * { min-width: 0; }
.control-panel > .button { justify-self: start; align-self: end; }
.control-panel.two-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
.control-panel.one-column { grid-template-columns: 1fr; }
.status-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 700px; border-collapse: collapse; }
th, td { padding: 13px; text-align: left; border-bottom: 1px solid var(--line); }
.empty { color: var(--muted); }

@media (max-width: 1024px) {
  .main-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; display: none; padding: 18px 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px rgba(0,0,0,.08); }
  .main-nav.open { display: grid; }
  .main-nav a { padding: 10px 0; }
  .menu-toggle { display: inline-flex; }
  .situation-grid { grid-template-columns: 1fr; }
  .situation-card { min-height: 140px; }
  .app-shell { display: block; padding-left:0; background:#eef2f7; }
  .app-sidebar { position: relative; height: auto; min-height:0; max-height:none; padding: 14px 18px; overflow: visible; }
  .dashboard-grid-main > .dashboard-panel-scroll { height:auto; min-height:0; max-height:none; overflow:visible; }
  .dashboard-panel-scroll > .snapshot-list,.dashboard-panel-scroll > .quick-link-grid { overflow:visible; padding-right:0; }
  .app-menu-toggle { display: inline-flex; min-height: 42px; padding: 9px 14px; color: #fff; background: var(--blue); border: 0; border-radius: 999px; font-weight: 900; }
  .app-sidebar-content { display: none; }
  .app-sidebar-content.open { display: block; }
  .app-logo img { width: 180px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .control-panel { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .site-header { min-height: 90px; padding: 12px 16px; }
  .brand img { width: min(225px, 56vw); max-height: 66px; }
  .menu-toggle { min-height: 46px; padding: 10px 17px; }
  .wizard-progress { top: 90px; }
  .page-hero { padding-inline: 20px; }
  .booking-hero h1 { font-size: 2rem; }
  .section, .section.narrow, .booking-section { width: min(100% - 20px, 920px); padding-block: 28px; }
  .wizard-step { padding: 24px 18px; border-radius: 20px; }
  .step-heading { gap: 11px; }
  .step-heading > span { flex-basis: 36px; width: 36px; height: 36px; }
  .step-heading h2 { font-size: 1.55rem; }
  .service-grid, .form-grid.two, .grid.two, .grid.three, .timing-cards, .control-panel { grid-template-columns: 1fr; }
  .service-card { min-height: 112px; }
  .timing-cards span { min-height: 92px; }
  .progress-copy { align-items: flex-start; flex-direction: column; gap: 2px; }
  .review-card > div { grid-template-columns: 1fr; gap: 3px; }
  .review-card li { align-items: flex-start; flex-direction: column; gap: 2px; }
  .wizard-actions { position: sticky; bottom: 8px; z-index: 15; padding: 10px; background: rgba(244,247,251,.94); border-radius: 18px; backdrop-filter: blur(12px); }
  .wizard-actions .button { min-width: 0; padding-inline: 16px; }
  .site-footer { flex-direction: column; }
  .app-main { padding: 16px 10px 30px; }
  .app-topbar { align-items: flex-start; flex-direction: column; }
  .panel { padding: 18px 14px; border-radius: 18px; }
  .panel-head, .work-card-head { flex-direction: column; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .work-card { padding: 16px 12px; }
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 390px) {
  .brand img { width: 205px; }
  .menu-toggle { padding-inline: 14px; }
  .stat-grid { grid-template-columns: 1fr; }
  .step-heading h2 { font-size: 1.38rem; }
  .situation-card { padding: 20px; }
  .wizard-actions { gap: 8px; }
}
.hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: clamp(24px,5vw,70px); align-items: center; padding: clamp(56px,9vw,110px) clamp(20px,7vw,110px); background: linear-gradient(135deg,#fff,#edf3ff); }
.hero h1 { margin: 8px 0 18px; max-width: 800px; font-size: clamp(2.3rem,6vw,5.3rem); line-height: .98; letter-spacing: -.055em; }
.hero-copy > p:not(.eyebrow) { max-width: 680px; color: var(--muted); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-panel { padding: 28px; color: #fff; background: var(--blue-dark); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero-panel h2 { margin: 10px 0 16px; }
.status-dot { display: block; width: 12px; height: 12px; background: #57db8b; border-radius: 50%; box-shadow: 0 0 0 7px rgba(87,219,139,.15); }
.mini-list { display: grid; gap: 10px; }
.mini-list span { padding: 12px 14px; background: rgba(255,255,255,.09); border-radius: 12px; }
.section > h2 { max-width: 780px; font-size: clamp(1.8rem,4vw,3.2rem); line-height: 1.08; letter-spacing: -.035em; }
.section article.service-card { display: block; min-height: 240px; }
.section article.service-card a { display: inline-block; margin-top: 14px; color: var(--blue); font-weight: 900; }
.dark-band { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; max-width: none; padding-inline: clamp(20px,7vw,110px); color: #fff; background: #0a1428; }
.dark-band h2 { margin: 0; }
.button.light { color: var(--ink); background: #fff; }
.lookup-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 14px; margin-bottom: 22px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.tracking-card { padding: clamp(20px,4vw,34px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.timeline { position: relative; margin: 28px 0; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 7px; bottom: 7px; width: 2px; background: var(--line); }
.timeline > div { position: relative; padding: 0 0 20px 14px; }
.timeline > div > span { position: absolute; left: -25px; top: 5px; width: 14px; height: 14px; background: var(--blue); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--blue); }
.timeline strong, .timeline small { display: block; }
.timeline small { color: var(--muted); }
.timeline p { margin: 4px 0 0; }
.payment-box, .review-box { margin-top: 18px; padding: 22px; background: #f8faff; border: 1px solid #ccd9f0; border-radius: 18px; }
.answers-panel { margin-top: 16px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.answers-panel summary { cursor: pointer; font-weight: 900; }
.answers-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.answers-grid div { min-width: 0; padding: 10px; background: var(--soft); border-radius: 10px; }
.answers-grid span, .answers-grid strong { display: block; overflow-wrap: anywhere; }
.answers-grid span { color: var(--muted); font-size: .78rem; }
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; }
  .hero-panel { max-width: 560px; }
  .dark-band { align-items: flex-start; flex-direction: column; }
  .lookup-form { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hero { padding: 44px 20px; }
  .hero h1 { font-size: 2.65rem; }
  .answers-grid { grid-template-columns: 1fr; }
}


/* Production v2 components */
.alert.warning { color:#7a2e0e; background:#fff8ed; border:1px solid #fed7aa; }
.badge.success { color:#05603a; background:#ecfdf3; }
.badge.warning { color:#7a2e0e; background:#fff3e8; }
.badge.danger { color:#912018; background:#fef3f2; }
.badge.info { color:#17335e; background:#eef4ff; }
.text-link { display:inline-block; margin-top:16px; color:var(--blue); font-weight:800; }
.footer-links { display:flex; gap:14px; align-items:flex-start; }
.footer-links a { color:#fff; }
.section-intro { max-width:760px; color:var(--muted); font-size:1.05rem; }
.trust-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.trust-row span { padding:7px 11px; color:#17335e; background:#fff; border:1px solid #d8e2f2; border-radius:999px; font-size:.82rem; font-weight:800; }
.hero-steps { display:grid; gap:16px; margin:0; padding:0; list-style:none; counter-reset:step; }
.hero-steps li { display:grid; gap:3px; padding-left:0; }
.hero-steps strong { font-size:1.02rem; }
.hero-steps span { color:#cbd7eb; font-size:.9rem; }
.path-number { display:inline-block; margin-bottom:24px; color:var(--orange); font-size:.78rem; font-weight:950; letter-spacing:.12em; }
.service-paths ul { padding-left:18px; color:var(--muted); }
.feature-band { width:100%; padding:clamp(42px,7vw,80px) clamp(20px,7vw,110px); color:#fff; background:#0a1428; }
.feature-band h2 { margin:0 0 28px; font-size:clamp(2rem,5vw,4rem); }
.feature-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.feature-grid div { min-width:0; padding:18px 12px; border:1px solid rgba(255,255,255,.15); border-radius:16px; }
.feature-grid strong,.feature-grid span { display:block; }
.feature-grid strong { color:var(--orange); }
.feature-grid span { margin-top:6px; overflow-wrap:anywhere; font-weight:800; }
.split-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:clamp(28px,6vw,80px); align-items:center; }
.split-section.reverse > :first-child { order:2; }
.visual-card { min-width:0; padding:clamp(22px,4vw,38px); background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.status-preview { display:grid; gap:12px; }
.status-preview > strong { font-size:2rem; }
.mini-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.mini-progress span { height:7px; background:#dfe6f1; border-radius:99px; }
.mini-progress span.active,.mini-progress span:first-child,.mini-progress span:nth-child(2) { background:var(--blue); }
.mini-dashboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mini-dashboard div { min-width:0; padding:18px; background:var(--soft); border-radius:16px; }
.mini-dashboard span,.mini-dashboard strong { display:block; }
.mini-dashboard span { color:var(--muted); font-size:.84rem; }
.mini-dashboard strong { margin-top:5px; font-size:1.35rem; }
.review-card-public { margin:0; padding:24px; background:#fff; border:1px solid var(--line); border-radius:20px; }
.review-card-public > strong { color:var(--orange); letter-spacing:.08em; }
.review-card-public cite { color:var(--muted); font-style:normal; }

.login-wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); min-height:calc(100vh - 96px); }
.login-brand-panel { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:clamp(36px,7vw,90px); color:#fff; background:linear-gradient(145deg,#0a1428,#194da8); }
.login-brand-panel img { width:min(420px,85%); margin-bottom:32px; }
.login-brand-panel h1 { margin:6px 0 12px; font-size:clamp(2.3rem,6vw,5rem); line-height:1; }
.login-brand-panel p { max-width:620px; color:#d9e3f3; }
.login-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.login-chips span { padding:8px 11px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:999px; }
.login-card { align-self:center; width:min(520px,calc(100% - 36px)); margin:36px auto; padding:clamp(26px,5vw,48px); background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.login-card h1,.login-card h2 { margin-top:0; }
.login-card label { display:block; margin-top:16px; font-weight:800; }
.login-card .button { width:100%; margin-top:22px; }
.setup-card { width:100%; margin-inline:0; }

.upload-panel { margin-top:24px; padding:18px; background:var(--soft); border:1px dashed #b9c4d4; border-radius:16px; }
.upload-panel label { font-weight:850; }
.upload-panel small { display:block; margin-top:7px; color:var(--muted); }
.optional-consent { color:var(--muted); font-size:.9rem; }
.consent-row a { color:var(--blue); }
.photo-strip { display:flex; max-width:100%; gap:8px; overflow-x:auto; margin-top:14px; padding-bottom:4px; }
.photo-strip a { flex:0 0 92px; width:92px; height:72px; overflow:hidden; border:1px solid var(--line); border-radius:12px; }
.photo-strip img { width:100%; height:100%; object-fit:cover; }
.operator-tools { margin-top:18px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.operator-tools > summary { cursor:pointer; font-weight:900; }
.quote-builder,.inline-action { min-width:0; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.quote-builder h4,.inline-action h4 { margin:0 0 10px; }
.quote-editor { display:grid; gap:8px; }
.quote-row { display:grid; grid-template-columns:minmax(0,1fr) 90px 140px 38px; align-items:center; gap:8px; min-width:0; }
.quote-row input { margin-top:0; }
.quote-lines { display:grid; gap:8px; margin-top:12px; }
.quote-lines > div { display:flex; justify-content:space-between; gap:18px; padding:8px 0; border-bottom:1px solid var(--line); }
.quote-lines .quote-total { font-size:1.08rem; font-weight:900; border-bottom:0; }
.invoice-chip { padding:10px 12px; background:#eef4ff; border-radius:12px; }
.queue-key { display:flex; flex-wrap:wrap; gap:8px; }
.queue-key span { padding:7px 10px; background:var(--soft); border-radius:999px; font-size:.8rem; font-weight:850; }
.check-row { display:flex !important; align-items:center; gap:10px; }
.check-row input { width:20px; height:20px; margin:0; }
.table-form { display:flex; gap:6px; align-items:center; }
.table-form input { width:120px; margin:0; padding:8px; }
.technician-actions { display:flex; gap:8px; margin-top:12px; }

.customer-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:20px 0; }
.customer-summary > div { min-width:0; padding:14px; background:var(--soft); border-radius:14px; }
.customer-summary span,.customer-summary strong { display:block; overflow-wrap:anywhere; }
.customer-summary span { color:var(--muted); font-size:.78rem; }
.customer-action-card { margin-top:18px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.warning-card { background:#fffaf4; border-color:#fed7aa; }
.legal-copy h2 { margin-top:34px; }
.legal-copy p { color:#344054; }

@media (max-width: 1000px) {
  .feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .split-section { grid-template-columns:1fr; }
  .split-section.reverse > :first-child { order:initial; }
  .login-wrap { grid-template-columns:1fr; }
  .login-brand-panel { min-height:420px; }
  .login-brand-panel img { width:min(330px,70%); }
}
@media (max-width: 700px) {
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .customer-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quote-row { grid-template-columns:minmax(0,1fr) 74px 110px 36px; }
  .login-brand-panel { min-height:auto; padding:34px 20px; }
  .login-brand-panel h1 { font-size:2.5rem; }
  .login-card { width:calc(100% - 20px); margin:20px auto; padding:24px 18px; }
  .footer-links { flex-direction:column; }
}
@media (max-width: 480px) {
  .feature-grid,.mini-dashboard,.customer-summary { grid-template-columns:1fr; }
  .quote-row { grid-template-columns:1fr; }
  .quote-row input { width:100%; }
  .table-form { align-items:stretch; flex-direction:column; }
  .table-form input { width:100%; }
}
.dark-band { padding-block:54px; }
.tech-status-form .tech-status-note { flex:1 1 100%; margin:0 0 4px; }

/* v2.1 interface polish */
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.form-actions.wide { grid-column:1 / -1; }
.form-help { margin:0 0 14px; color:var(--muted); font-size:.88rem; }
.icon-button { display:inline-grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:#fff; font-size:1.25rem; cursor:pointer; }
.icon-button:hover { color:var(--danger); border-color:#f1b5ae; background:#fff7f6; }

.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; min-width:0; }
.dashboard-grid-main { grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr); }
.dashboard-grid > .panel { margin-bottom:0; }
.dashboard-panel { min-height:100%; }
.quick-link-grid { display:grid; gap:10px; }
.quick-link { display:grid; gap:3px; padding:15px 16px; color:var(--ink); background:var(--soft); border:1px solid transparent; border-radius:14px; text-decoration:none; }
.quick-link:hover { border-color:#c9d6ec; background:#f8faff; }
.quick-link strong { font-size:.98rem; }
.quick-link span { color:var(--muted); font-size:.84rem; }
.quick-link b { margin-top:5px; color:var(--blue); font-size:.82rem; }
.text-link-inline { color:var(--blue); font-size:.88rem; font-weight:850; text-decoration:none; white-space:nowrap; }
.snapshot-list { display:grid; gap:11px; }

.queue-card { min-width:0; padding:16px; background:#fbfcfe; border:1px solid var(--line); border-radius:16px; }
.queue-card-main { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.queue-card-title { min-width:0; }
.queue-card-title h3 { margin:3px 0 0; font-size:1.02rem; overflow-wrap:anywhere; }
.queue-card-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 18px; margin-top:14px; }
.queue-card-meta > span { min-width:0; color:#344054; font-size:.86rem; overflow-wrap:anywhere; }
.queue-card-meta strong { display:block; margin-bottom:2px; color:var(--muted); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }
.queue-card-meta .wide { grid-column:span 2; }
.queue-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid #e8ecf2; }
.queue-financial { min-width:0; color:var(--muted); font-size:.8rem; overflow-wrap:anywhere; }
.queue-filters { display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(180px,.8fr) minmax(180px,.8fr) auto; align-items:end; gap:12px; margin:18px 0; padding:14px; background:var(--soft); border-radius:16px; }
.queue-filters label { min-width:0; font-size:.82rem; font-weight:850; }
.queue-filters input,.queue-filters select { margin-top:6px; }
.filter-actions { display:flex; gap:8px; }

.tech-load-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.tech-load-grid .mini-card { position:relative; padding-left:42px; }
.tech-load-grid .status-dot { position:absolute; left:17px; top:20px; width:10px; height:10px; background:#49b978; box-shadow:0 0 0 5px rgba(73,185,120,.12); }
.tech-load-grid .status-dot.busy { background:var(--orange); box-shadow:0 0 0 5px rgba(243,107,33,.12); }
.tech-load-grid strong,.tech-load-grid span { display:block; }
.tech-load-grid span:last-child { margin-top:3px; color:var(--muted); font-size:.82rem; }
.tech-snapshot { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); }
.tech-snapshot:last-child { border-bottom:0; }
.tech-snapshot > div { display:grid; gap:2px; min-width:0; }
.tech-snapshot > div span:last-child { color:var(--muted); font-size:.85rem; overflow-wrap:anywhere; }

.work-order-shell { padding:0; overflow:hidden; }
.work-order-shell > .work-card { margin:0; border:0; border-radius:0; background:#fff; }
.work-card-detail { padding:clamp(18px,3vw,28px); }
.work-meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0; }
.work-meta-grid > div { min-width:0; padding:12px; background:var(--soft); border-radius:12px; }
.work-meta-grid > div.wide { grid-column:span 2; }
.work-meta-grid span,.work-meta-grid strong { display:block; overflow-wrap:anywhere; }
.work-meta-grid span { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.035em; }
.work-meta-grid strong { margin-top:3px; font-size:.9rem; }
.factory-wheel-card { border:1px solid #c9d8f1; background:#f4f8ff !important; }
.factory-wheel-card small { display:block; margin-top:4px; color:var(--muted); font-size:.74rem; overflow-wrap:anywhere; }
.operator-tools { margin-top:22px; padding:18px; background:#f8faff; border:1px solid #d8e2f2; border-radius:18px; }
.operator-tools-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.operator-tools-heading h3 { margin:0; }
.operator-section { margin-top:10px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.operator-section > summary { padding:15px 16px; cursor:pointer; font-weight:900; }
.operator-section[open] > summary { border-bottom:1px solid var(--line); }
.operator-section > form,.operator-section > .operator-section-grid { padding:0 16px 16px; }
.operator-section-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.operator-form { margin-top:0; }
.operator-section .inline-action { margin-top:0; padding-top:14px; border-top:0; }
.inline-action.no-divider { border-top:0; }
.quote-builder { margin-top:0; padding:16px; border-top:0; }
.quote-options { margin-top:14px; }
.add-quote-line { margin-top:10px; }

.inventory-panels { align-items:start; margin-bottom:20px; }
.application-decision { grid-template-columns:repeat(2,minmax(0,1fr)) auto; }
.business-app-card + .business-app-card,.review-admin-card + .review-admin-card { margin-top:12px; }
.service-area-grid { margin-top:18px; }
.system-endpoint { overflow-wrap:anywhere; }

/* Prevent buttons from stretching to the full height/width of grid cells. */
.control-panel .button,.inline-action .button,.quote-builder .button,.status-buttons .button { align-self:auto; justify-self:start; }
.control-panel .form-actions .button { width:auto; }

/* Wizard controls: exactly one forward action is visible at a time. */
.wizard-actions { align-items:center; }
.wizard-actions .button { flex:0 0 auto; }
.wizard-actions #nextButton,.wizard-actions #submitButton { margin-left:auto; }

@media (min-width: 1025px) {
  /* Desktop app navigation is a true fixed rail. It remains full-height while
     long dashboards/work orders scroll independently in the main workspace. */
  body.app-shell {
    display: block;
    min-height: 100vh;
    padding-left: 260px;
    background: #eef2f7;
  }
  .app-sidebar {
    position: fixed;
    z-index: 60;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .app-main {
    max-width: none;
  }
  /* Dashboard columns stay aligned to the viewport and scroll inside their cards
     instead of forcing a very tall executive snapshot. */
  .dashboard-grid-main {
    align-items: stretch;
  }
  .dashboard-grid-main > .dashboard-panel-scroll {
    height: clamp(500px, calc(100vh - 230px), 720px);
    min-height: 500px;
    max-height: 720px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .dashboard-panel-scroll > .snapshot-list,
  .dashboard-panel-scroll > .quick-link-grid {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 7px;
  }
  .dashboard-panel-scroll > .snapshot-list {
    flex: 1 1 auto;
  }
  .dashboard-panel-scroll > .quick-link-grid {
    flex: 1 1 auto;
    align-content: start;
  }
  .dashboard-panel-scroll > .snapshot-list::-webkit-scrollbar,
  .dashboard-panel-scroll > .quick-link-grid::-webkit-scrollbar,
  .app-sidebar::-webkit-scrollbar {
    width: 9px;
  }
  .dashboard-panel-scroll > .snapshot-list::-webkit-scrollbar-thumb,
  .dashboard-panel-scroll > .quick-link-grid::-webkit-scrollbar-thumb {
    background: #c8d2e2;
    border-radius: 999px;
  }
  .app-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
    border-radius: 999px;
  }
}

@media (max-width: 1180px) {
  .dashboard-grid-main { grid-template-columns:1fr; }
  .queue-card-meta { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .work-meta-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .queue-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-actions { align-self:end; }
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns:1fr; }
  .queue-card-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .operator-section-grid { grid-template-columns:1fr; }
  .inventory-panels { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .app-main { padding:14px 10px 28px; }
  .app-topbar { margin-bottom:16px; }
  .app-topbar .button { align-self:flex-start; }
  .panel { margin-bottom:16px; }
  .queue-card-main,.queue-card-footer,.operator-tools-heading { align-items:flex-start; flex-direction:column; }
  .queue-card-footer .button,.operator-tools-heading .button { width:100%; }
  .queue-card-meta,.work-meta-grid { grid-template-columns:1fr; }
  .queue-card-meta .wide,.work-meta-grid > div.wide { grid-column:auto; }
  .queue-filters { grid-template-columns:1fr; }
  .filter-actions { width:100%; }
  .filter-actions .button { flex:1 1 0; }
  .operator-tools { padding:12px; }
  .operator-section > summary { padding:14px; }
  .operator-section > form,.operator-section > .operator-section-grid { padding:0 12px 12px; }
  .quote-row { grid-template-columns:1fr 80px 1fr 36px; }
  .control-panel.two-column,.application-decision { grid-template-columns:1fr; }
  .form-actions { width:100%; }
  .form-actions .button { width:100%; }
  .wizard-actions { padding:8px; }
  .wizard-actions #backButton { flex:0 0 auto; }
  .wizard-actions #nextButton,.wizard-actions #submitButton { flex:1 1 auto; width:auto; }
}
@media (max-width: 480px) {
  .quote-row { grid-template-columns:1fr 72px 1fr; }
  .quote-row .quote-remove { grid-column:3; justify-self:end; }
  .stat-card { padding:15px; }
  .queue-card { padding:14px; }
}

/* Extra-narrow phones: keep the wizard action bar inside the visual viewport. */
@media (max-width: 360px) {
  .wizard-actions {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .wizard-actions #backButton,
  .wizard-actions #nextButton,
  .wizard-actions #submitButton {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    min-width: 0;
  }
}

/* Quote editor stays legible on narrow phones instead of squeezing three inputs into one row. */
@media (max-width: 480px) {
  .quote-row {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 38px;
    gap: 8px;
  }
  .quote-row > input:first-child {
    grid-column: 1 / -1;
  }
  .quote-row > input:nth-of-type(2) {
    grid-column: 1;
  }
  .quote-row > input:nth-of-type(3) {
    grid-column: 2;
  }
  .quote-row .quote-remove {
    grid-column: 3;
    grid-row: 2;
    justify-self: stretch;
  }
}

.field-help{display:block;margin-top:6px;color:var(--muted);font-size:.78rem;font-weight:650;line-height:1.35}
.required-field::after{content:" Required";margin-left:6px;color:var(--orange);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:380px){
  .quote-row{grid-template-columns:1fr 1fr 36px}
  .quote-row>input:first-child{grid-column:1/-1}
  .quote-row>input:nth-of-type(2){grid-column:1}
  .quote-row>input:nth-of-type(3){grid-column:2}
}

.form-fieldset{display:contents;border:0;padding:0;margin:0;min-width:0}
.form-fieldset:disabled{opacity:.62}

/* Vehicle identification — v2.2 */
.vehicle-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}
.vehicle-method{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding:18px;border:2px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}
.vehicle-method strong{font-size:1rem}.vehicle-method small{color:var(--muted);font-weight:650}.vehicle-method.selected{border-color:var(--blue);background:#f4f8ff;box-shadow:0 0 0 3px rgba(30,87,184,.08)}
.vehicle-lookup-panel{margin-bottom:20px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fbfcff}
.vin-field{display:block;color:#243047;font-weight:850}.vin-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}.vin-input-row .button{white-space:nowrap}
.lookup-status{min-height:22px;margin-top:10px;color:var(--muted);font-size:.9rem;font-weight:700}.lookup-status.success{color:#166534}.lookup-status.error{color:#b42318}
.vehicle-match-card{margin-top:14px;padding:18px;border:1px solid #bfd2f7;border-radius:16px;background:#f4f8ff}.vehicle-match-card h3{margin:2px 0 6px}.vehicle-match-card p{margin:0 0 12px}.vehicle-match-card small{display:block;margin-top:12px;color:var(--muted)}
.inline-actions{display:flex;flex-wrap:wrap;gap:10px}.text-button{border:0;background:transparent;color:var(--blue);font-weight:900;cursor:pointer;padding:6px 4px}
.vehicle-confirmed-banner{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:14px 16px;border:1px solid #b7dfc3;border-radius:16px;background:#f1fbf4}.vehicle-confirmed-banner>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#187a37;color:#fff;font-weight:900}.vehicle-confirmed-banner div{display:flex;flex-direction:column;min-width:0;flex:1}.vehicle-confirmed-banner small{color:#446154;overflow-wrap:anywhere}
.vehicle-extra-fields{margin-top:6px}.tire-confirm-panel{margin-top:22px;padding:20px;border:1px solid #fed7aa;border-radius:18px;background:#fff8f2}.tire-confirm-panel h3{margin:2px 0 6px}.tire-confirm-panel p{margin-top:0}.tire-confirm-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.tire-confirm-options label{display:block}.tire-confirm-options input{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}.tire-confirm-options span{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px;border:2px solid #efd8c2;border-radius:14px;background:#fff;cursor:pointer}.tire-confirm-options input:checked+span{border-color:var(--orange);background:#fff4e9}.tire-confirm-options small{color:var(--muted);font-weight:650}
@media(max-width:700px){.vehicle-methods{grid-template-columns:1fr}.vin-input-row{grid-template-columns:1fr}.vin-input-row .button{width:100%}.tire-confirm-options{grid-template-columns:1fr}.vehicle-lookup-panel,.tire-confirm-panel{padding:14px}.inline-actions .button{width:100%}}

/* v3 vehicle + tire matching */
.vehicle-lookup-panel select[disabled] { opacity:.68; cursor:not-allowed; }
.vehicle-lookup-panel input[hidden], .vehicle-lookup-panel select[hidden] { display:none !important; }
.tire-match-panel { margin-top:1.25rem; padding:1.1rem; border:1px solid var(--line,#d9e0ea); border-radius:20px; background:#f8fbff; }
.tire-match-panel[hidden] { display:none !important; }
.tire-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:.8rem 0; }
.tire-product-card { width:100%; min-width:0; text-align:left; border:1px solid #d7dfeb; background:#fff; border-radius:16px; padding:1rem; display:grid; gap:.35rem; color:#14213a; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.tire-product-card:hover { border-color:#2458b7; transform:translateY(-1px); }
.tire-product-card.selected { border:2px solid #f47a20; box-shadow:0 0 0 3px rgba(244,122,32,.12); }
.tire-product-top { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.tire-product-top strong { min-width:0; overflow-wrap:anywhere; }
.tire-product-top b { white-space:nowrap; color:#0f4fb5; }
.tire-product-card span:not(.tire-product-top), .tire-product-card small { color:#667085; }
#sourceTireButton.selected { border-color:#f47a20; box-shadow:0 0 0 3px rgba(244,122,32,.12); }
.requested-tire-card { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem; margin:.9rem 0; border:1px solid #d7dfeb; border-radius:16px; background:#f8fbff; }
.requested-tire-card > div { display:grid; gap:.25rem; min-width:0; }
.requested-tire-card strong,.requested-tire-card small { overflow-wrap:anywhere; }
.inventory-request-action { margin-top:.8rem; padding-top:.8rem; border-top:1px solid #e2e7ef; }
.inline-reserve-form { margin:0; }
.success-note { border-color:#b8e2c8 !important; background:#f0fbf4 !important; }

@media (max-width: 700px) {
  .tire-option-grid { grid-template-columns:1fr; }
  .tire-match-panel { padding:.9rem; border-radius:16px; }
  .requested-tire-card { align-items:flex-start; flex-direction:column; }
}