:root {
    --canvas: #f5f6f3; --surface: #fff; --surface-alt: #f1f4ef; --ink: #24352f;
    --muted: #68766f; --line: #dfe6df; --accent: #28624e; --accent-hover: #1c4d3c;
    --accent-soft: #e8f0e7; --lime: #d4ec9c; --hero: #183e34; --shadow: 0 5px 20px rgba(30,55,43,.035);
    --sidebar-width: 236px; --bs-body-bg: var(--canvas); --bs-body-color: var(--ink);
    --bs-primary: #28624e; --bs-primary-rgb: 40,98,78; --bs-success-rgb: 40,114,78;
    --bs-border-color: var(--line); --bs-secondary-color: var(--muted); --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover); --bs-body-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}
html[data-theme="dark"] {
    --canvas: #13221d; --surface: #1b2d25; --surface-alt: #22382d; --ink: #e9efe8;
    --muted: #a6b7ac; --line: #354b3e; --accent: #a8d5a6; --accent-hover: #c3e5be;
    --accent-soft: #2c4635; --hero: #0e2b23; --shadow: 0 5px 20px rgba(0,0,0,.08);
    --bs-primary-rgb: 168,213,166; --bs-success-rgb: 116,182,134;
}
* { box-sizing: border-box; }
html { font-size: 15px; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-family: var(--bs-body-font-family); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
h1,h2,h3,h4,h5,h6 { color: var(--ink); font-weight: 650; letter-spacing: -.035em; line-height: 1.2; }
h1,.h1 { font-size: 2.25rem; } h2,.h2 { font-size: 1.6rem; } .h3 { font-size: 1.85rem; } .h5 { font-size: 1.16rem; }
p { margin-bottom: 1rem; }
button,input,select { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.icon { width: 21px; height: 21px; display: inline-block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; z-index: 2000; top: -100px; left: 20px; background: var(--surface); padding: 12px 20px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--surface); border-right: 1px solid var(--line); z-index: 1060; display: flex; flex-direction: column; padding: 28px 18px 20px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 24px; font-weight: 750; letter-spacing: -1.15px; line-height: 1; text-decoration: none; padding: 0 8px; }
.brand:hover { color: var(--accent); }
.brand-light { font-weight: 400; }
.brand-mark { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: var(--lime); color: #173e35; }
.brand-mark img { width: 36px; height: 36px; display: block; }
.hero-bike { display: block; height: auto; max-height: 300px; object-fit: contain; }
@media(max-width:767.98px) { .hero-art .hero-bike { height: 180px; max-height: 180px; margin: 0 auto; } }
.brand-mark .icon { width: 29px; height: 29px; stroke-width: 1.4; }
.brand-caption { display: block; font-size: 8px; font-weight: 650; letter-spacing: 1.75px; margin-top: 7px; color: var(--muted); }
.sidebar-shop { display: flex; align-items: center; gap: 10px; margin: 34px 4px 25px; padding: 12px 9px; border: 1px solid var(--line); border-radius: 10px; }
.shop-monogram { width: 31px; height: 33px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-alt); color: var(--accent); font-size: 11px; font-weight: 750; }
.sidebar-shop strong { font-size: 12px; display: block; line-height: 1.5; }
.sidebar-shop small { font-size: 10px; color: var(--muted); display: block; }
.shop-dot { width: 6px; height: 6px; border-radius: 50%; background: #6d9a65; margin-left: auto; }
.nav-section-label { padding: 0 13px; font-size: 9px; text-transform: uppercase; letter-spacing: 1.65px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.tools-label { margin-top: 28px; }
.workspace-link { display: flex; align-items: center; gap: 12px; margin-bottom: 5px; padding: 11px 13px; border-radius: 8px; text-decoration: none; font-size: 12px; color: var(--muted); font-weight: 550; transition: background .15s, color .15s; }
.workspace-link .icon { width: 18px; height: 18px; }
.workspace-link:hover { color: var(--ink); background: var(--surface-alt); }
.workspace-link.active { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.nav-plus { font-size: 17px; font-weight: 400; margin-left: auto; }
.sidebar-bottom { margin: auto 8px 0; padding-top: 28px; color: var(--muted); }
.sidebar-bottom .icon { display: block; margin-bottom: 12px; color: var(--accent); }
.sidebar-bottom strong { font-size: 11px; color: var(--ink); }
.sidebar-bottom p { font-size: 11px; line-height: 1.7; margin: 7px 0 0; }
.app-topbar { position: relative; min-height: 79px; margin-left: var(--sidebar-width); padding: 16px 42px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar-location { display: flex; gap: 14px; align-items: center; font-size: 12px; font-weight: 550; }
.breadcrumb-workspace { color: var(--muted); font-weight: 400; }.breadcrumb-divider { color: #b2bdb5; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }.topbar-actions form { margin: 0; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--muted); cursor: pointer; }
.icon-button:hover { background: var(--surface-alt); color: var(--accent); }.icon-button .icon { width: 17px; height: 17px; }
.user-avatar { text-decoration: none; width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 12px; font-weight: 700; }
.mobile-menu { display: none; }.nav-scrim { display: none; }
.app-main { margin-left: var(--sidebar-width); min-height: calc(100vh - 151px); padding: 38px 42px 44px; }
.app-content { max-width: 1340px; margin: 0 auto; }
.app-content > .container { max-width: none; padding: 0; }.app-content > .container.py-4 { padding-top: 0 !important; padding-bottom: 0 !important; }
.app-footer { margin-left: var(--sidebar-width); padding: 20px 42px; display: flex; justify-content: space-between; gap: 15px; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; }.footer-dot { padding: 0 8px; }
.global-loader { position: fixed; z-index: 2000; top: 16px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); align-items: center; gap: 10px; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 10px; }
.page-heading { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }.page-heading h1 { margin: 0 0 9px; }.page-heading p { color: var(--muted); margin: 0; font-size: 13px; max-width: 650px; }
.page-heading .btn { flex-shrink: 0; }
.card { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.card-body { padding: 25px; }.card-header { background: transparent; border-color: var(--line); padding: 16px 24px; font-weight: 650; font-size: 13px; }.card-header h2 { margin: 0; }
.card-footer { background: var(--surface-alt); border-color: var(--line); }
.btn { border-radius: 7px; font-size: 12px; font-weight: 650; padding: 10px 17px; letter-spacing: -.1px; transition: background-color .15s, border-color .15s, transform .15s; display: inline-flex; justify-content: center; align-items: center; gap: 9px; }
.btn .icon { width: 16px; height: 16px; }.btn-lg { padding: 13px 22px; font-size: 13px; }.btn-sm { padding: 7px 12px; font-size: 11px; }.btn:active { transform: translateY(1px); }
.btn-primary,.btn-success,.submit-btn { --bs-btn-color: var(--surface); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-hover-color: var(--surface); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-active-color: var(--surface); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); }
.btn-outline-primary,.btn-outline-success { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--accent); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-color: var(--accent); --bs-btn-active-border-color: var(--accent); }
.btn-outline-secondary,.btn-outline-light { --bs-btn-color: var(--muted); --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface-alt); --bs-btn-hover-border-color: var(--muted); }
.btn-check:checked + .btn { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn-check:focus-visible + .btn { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn-lime { color: #183e34; background: var(--lime); border-color: var(--lime); }.btn-lime:hover { color: #183e34; background: #e0f5b1; border-color: #e0f5b1; }
.form-label { color: var(--ink); font-size: 12px; font-weight: 600; margin-bottom: 8px; }.form-text,.text-muted { color: var(--muted) !important; }.form-text { font-size: 11px; }
.form-control,.form-select { color: var(--ink); background-color: var(--surface); border: 1px solid var(--line); border-radius: 7px; font-size: 13px; padding: 11px 13px; min-width: 0; }.form-control::placeholder { color: var(--muted); opacity: .8; }
.form-control:focus,.form-select:focus { color: var(--ink); background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
.form-control:disabled { background: var(--surface-alt); color: var(--muted); }.input-group-text { background: var(--surface-alt); border-color: var(--line); color: var(--muted); font-size: 12px; }.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-hover-bg: var(--surface-alt); font-size: 12px; vertical-align: middle; }.table > :not(caption) > * > * { padding: 13px 12px; }.table thead th { color: var(--muted); background: var(--surface-alt); text-transform: uppercase; letter-spacing: .7px; font-size: 9px; font-weight: 700; border-bottom-width: 1px; white-space: nowrap; }.table-sm > :not(caption) > * > * { padding: 9px 8px; }
.badge { padding: 6px 9px; font-size: 10px; font-weight: 650; border-radius: 5px; letter-spacing: .15px; }.badge.fs-6 { font-size: 11px !important; }.text-bg-success { background: #e5f0e5 !important; color: #326145 !important; }.text-bg-warning { background: #faf0d9 !important; color: #8b6517 !important; }.text-bg-info { background: #e7eef1 !important; color: #3f6472 !important; }.text-bg-secondary,.text-bg-light { background: var(--surface-alt) !important; color: var(--muted) !important; }
.alert { padding: 13px 17px; font-size: 12px; border-radius: 9px; }.alert-light { color: var(--muted); background: var(--surface-alt); border-color: var(--line); }.alert-warning { background: #faf4e6; color: #765d28; border-color: #ecdfbc; }.alert-success { background: #eaf2e8; color: #365e3b; border-color: #d5e5d1; }
summary { cursor: pointer; }details > summary::marker { color: var(--accent); }details[open] > summary { margin-bottom: 8px; }
.section-title { margin: 28px 0 18px; padding-bottom: 12px; font-size: 15px; border-bottom: 1px solid var(--line); }
.app-content .text-light { color: var(--ink) !important; }.app-content .bg-dark { background: var(--surface) !important; }.app-content .bg-secondary { background: var(--surface-alt) !important; }
.app-content .border-secondary { border-color: var(--line) !important; }.app-content .shadow-sm { box-shadow: var(--shadow) !important; }.app-content .border-primary { border-color: var(--line) !important; }
.modal-content { background: var(--surface); color: var(--ink); border-color: var(--line); }.modal-header,.modal-footer { border-color: var(--line); }
.welcome-title { font-size: 29px; letter-spacing: -.8px; }.welcome-heading { margin-bottom: 26px; }.workspace-tag { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--muted); padding: 7px 11px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); }.workspace-tag .icon { width: 13px; height: 13px; color: var(--accent); }
.home-hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 310px; background: var(--hero); color: #f2f5ec; border-radius: 17px; overflow: hidden; margin-bottom: 32px; }
.hero-copy { position: relative; z-index: 1; padding: 38px 0 36px 38px; }.hero-copy .eyebrow { color: #bed2ba; font-size: 9px; letter-spacing: 2px; }.hero-copy h2 { font-size: clamp(36px,3.4vw,53px); font-weight: 550; letter-spacing: -2px; color: #f5f7ef; line-height: 1.08; margin-bottom: 18px; }.hero-copy h2 span { color: var(--lime); }.hero-copy p { font-size: 12px; line-height: 1.8; color: #c5d5c9; max-width: 320px; margin-bottom: 23px; }.hero-copy .btn { padding: 12px 17px; }
.hero-art { position: relative; display: grid; align-items: center; padding: 25px 20px 40px 0; overflow: hidden; }.hero-art:before { content: ''; position: absolute; width: 370px; height: 370px; border: 1px solid #3b5d4b; border-radius: 50%; left: 12%; top: -40px; opacity: .5; }.hero-art:after { content: ''; position: absolute; width: 270px; height: 270px; border: 1px solid #3b5d4b; border-radius: 50%; left: 24%; top: 10px; opacity: .5; }.hero-bike { position: relative; z-index: 1; width: 100%; max-width: 500px; overflow: visible; }.hero-art-caption { position: absolute; bottom: 21px; right: 28px; color: #b3c9b8; font-size: 8px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }.section-heading h2 { font-size: 17px; margin: 0; }.section-heading p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }.section-heading > span { font-size: 10px; color: var(--muted); }
.action-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; margin-bottom: 33px; }.action-card { display: flex; flex-direction: column; align-items: flex-start; padding: 23px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: border-color .2s, transform .2s; }.action-card:hover { color: var(--ink); transform: translateY(-3px); border-color: var(--accent); }.action-card.featured { border-color: #a5c1a4; }.action-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; color: var(--accent); background: var(--accent-soft); margin-bottom: 19px; }.action-icon.sand { color: #96743a; background: #f5efe2; }.action-icon.blue { color: #577784; background: #eaf0f2; }.action-card h3 { font-size: 16px; margin: 0 0 8px; }.action-card p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-bottom: 19px; }.action-link { font-size: 11px; font-weight: 650; color: var(--accent); margin-top: auto; display: flex; align-items: center; gap: 8px; }.action-link .icon { width: 15px; height: 15px; }
.home-bottom { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; }.workflow-card { padding: 23px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }.workflow-card h2 { font-size: 16px; margin: 0 0 7px; }.workflow-card > p { color: var(--muted); font-size: 11px; margin-bottom: 23px; }.workflow-steps { display: flex; gap: 14px; list-style: none; padding: 0; margin: 0; }.workflow-steps li { flex: 1; position: relative; }.workflow-steps li:not(:last-child):after { content: ''; position: absolute; top: 13px; left: 37px; right: 9px; height: 1px; background: var(--line); }.step-number { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 700; margin-bottom: 12px; }.workflow-steps strong { display: block; font-size: 11px; margin-bottom: 4px; }.workflow-steps small { font-size: 10px; display: block; color: var(--muted); line-height: 1.65; max-width: 140px; }
.setup-card { background: var(--accent-soft); border-radius: 12px; padding: 23px; display: flex; flex-direction: column; align-items: flex-start; }.setup-card .eyebrow { font-size: 9px; }.setup-card h2 { font-size: 19px; max-width: 250px; line-height: 1.35; }.setup-card p { font-size: 11px; color: var(--muted); margin-bottom: 20px; }.setup-card a { margin-top: auto; }
.match-progress { display: flex; align-items: center; gap: 18px; margin-bottom: 25px; padding: 13px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 11px; }.match-progress span { display: flex; align-items: center; gap: 8px; }.match-progress b { width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 10px; border: 1px solid var(--line); border-radius: 50%; font-weight: 600; }.match-progress .current { color: var(--accent); font-weight: 650; }.match-progress .current b { color: var(--surface); background: var(--accent); border-color: var(--accent); }.progress-line { flex: 1; max-width: 90px; height: 1px; background: var(--line); }
.match-stock-summary { display: flex; align-items: center; gap: 12px; white-space: nowrap; }.stock-stat { background: var(--surface); border: 1px solid var(--line); padding: 8px 13px; border-radius: 8px; font-size: 10px; color: var(--muted); }.stock-stat strong { font-size: 17px; color: var(--ink); margin-right: 5px; }
.rider-form-card .card-body { padding: 29px; }.form-section-heading { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 21px; margin-bottom: 25px; }.form-section-heading .action-icon { margin: 0; width: 36px; height: 36px; }.form-section-heading h2 { font-size: 16px; margin: 0 0 4px; }.form-section-heading p { font-size: 11px; color: var(--muted); margin: 0; }
.style-grid .btn { min-height: 61px; font-size: 12px; background: var(--surface); }.style-grid .btn:hover { background: var(--surface-alt); }.stepper .btn { background: var(--surface-alt); }.stepper input { font-weight: 600; }.advanced-options { padding-top: 18px; border-top: 1px solid var(--line); }.advanced-options summary { font-size: 11px; }.match-submit-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 25px; }.match-submit-row p { color: var(--muted); font-size: 10px; max-width: 390px; margin: 0; }.match-submit-row .btn { min-width: 190px; }
.match-empty { display: grid; grid-template-columns: 45px 1fr; gap: 16px; padding: 23px 25px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }.match-empty .icon { width: 34px; height: 34px; color: #91a78f; }.match-empty h2 { font-size: 14px; margin: 0 0 6px; }.match-empty p { font-size: 12px; margin: 0; max-width: 650px; }
.result-card { transition: border-color .15s, box-shadow .15s; }.result-card.chosen { outline: none !important; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }.result-card h3 { font-size: 21px; margin-top: 19px !important; }.result-card .choose-bike + label { font-size: 11px; min-width: 83px; padding: 8px 14px; }.result-card .card-body { padding: 25px; }.result-card .border.rounded { background: var(--surface-alt); border: 0 !important; border-radius: 7px !important; padding: 12px !important; }.result-card .fs-4 { font-size: 22px !important; }.result-card details { border-top: 1px solid var(--line); padding-top: 13px; margin-top: 16px; }.result-card .table { font-size: 11px; }.result-card .table thead th { font-size: 8px; }.result-card p { font-size: 12px; }.result-card .table td { vertical-align: top; }
#quoteForm.quote-bar { left: var(--sidebar-width); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -5px 25px rgba(0,0,0,.06) !important; padding: 17px 25px; }.quote-bar .form-control { font-size: 12px; }.quote-bar .btn { font-size: 12px; }
#realtime-container { max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #0e1f18; }#realtime-container video { max-width: 100%; height: auto; }#realtime-container canvas { max-width: 100%; height: auto !important; }
@media(min-width:1600px) { .app-main { padding-left: 60px; padding-right: 60px; }.hero-copy { padding-top: 46px; padding-bottom: 46px; }.home-hero { min-height: 340px; } }
@media(max-width:1200px) { .app-main { padding: 30px; }.app-topbar { padding: 16px 30px; }.action-card { padding: 20px; }.hero-copy { padding-left: 28px; }.hero-copy h2 { font-size: 41px; }.home-bottom { grid-template-columns: 1.2fr 1fr; } }
@media(max-width:1099.98px) { .app-sidebar { transform: translateX(-100%); transition: transform .2s; }.app-topbar,.app-main,.app-footer { margin-left: 0; }.mobile-menu { display: grid; }.nav-open .app-sidebar { transform: translateX(0); }.nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(10,25,17,.42); border: 0; z-index: 1050; }.nav-open { overflow: hidden; }#quoteForm.quote-bar { left: 0; }.hero-copy h2 { font-size: 48px; } }
@media(max-width:767.98px) { .app-topbar { min-height: 66px; padding: 13px 20px; }.app-main { padding: 25px 20px 32px; }.app-footer { padding: 18px 20px; flex-direction: column; gap: 4px; }.breadcrumb-workspace,.breadcrumb-divider,.workspace-tag,.register-link { display: none; }.topbar-location { gap: 10px; }.topbar-actions { gap: 8px; }.page-heading { flex-direction: column; margin-bottom: 22px; gap: 15px; }.page-heading h1 { font-size: 27px; }.welcome-title { font-size: 26px; }.home-hero { grid-template-columns: 1fr; min-height: 0; }.hero-copy { padding: 30px; }.hero-copy h2 { font-size: 44px; }.hero-art { min-height: 170px; max-height: 220px; padding: 0 25px 20px; }.hero-bike { max-width: 390px; margin: -15px auto 5px; }.hero-art-caption { bottom: 15px; }.hero-art:before { top: -170px; left: 15%; }.hero-art:after { top: -120px; left: 30%; }.action-grid { grid-template-columns: 1fr; gap: 12px; }.action-card { position: relative; padding: 22px 22px 22px 80px; min-height: 130px; }.action-icon { position: absolute; left: 22px; top: 23px; width: 37px; height: 37px; }.action-card p { margin-bottom: 10px; }.home-bottom { grid-template-columns: 1fr; }.workflow-card,.setup-card { padding: 22px; }.setup-card h2 { max-width: none; }.card-body,.rider-form-card .card-body { padding: 21px; }.form-section-heading .action-icon { position: static; }.match-progress { gap: 9px; padding: 12px; font-size: 10px; }.progress-line { max-width: 20px; }.match-stock-summary { width: 100%; }.stock-stat { flex: 1; }.match-submit-row { flex-direction: column; align-items: stretch; }.match-submit-row .btn { width: 100%; }.match-submit-row p { max-width: none; }.match-empty { padding: 20px; }.section-heading > span { display: none; }#quoteForm.quote-bar { padding: 12px 15px; }.quote-spacer { height: 19rem !important; }.form-label { font-size: 12px; }.style-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }.style-grid .btn { min-width: 0; font-size: 11px; }.table-responsive { border-radius: 10px; }.stepper .btn { min-width: 2.8rem !important; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; }*,*::before,*::after { transition: none !important; animation: none !important; }.action-card:hover { transform: none; } }
@media print { :root,html[data-theme="dark"] { --ink: #111; --surface: #fff; --canvas: #fff; --line: #ddd; --muted: #444; }.app-sidebar,.app-topbar,.app-footer,.nav-scrim,.skip-link,.global-loader,.quote-bar,.quote-spacer { display: none !important; }.app-main { margin: 0; padding: 0; min-height: 0; }.app-content { max-width: none; }.card { box-shadow: none; }.home-hero { background: #fff; color: #111; }.hero-copy h2,.hero-copy h2 span,.hero-copy p { color: #111; } }
/* Explicit values retain the palette with the bundled Bootstrap 5.1 controls. */
.btn-primary,.btn-success { color: var(--surface); background-color: var(--accent); border-color: var(--accent); }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-success:hover,.btn-success:focus,.btn-success:active { color: var(--surface); background-color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled,.btn-success:disabled { color: var(--surface); background-color: var(--accent); border-color: var(--accent); opacity: .5; }
.btn-outline-primary,.btn-outline-success { color: var(--accent); border-color: var(--line); background-color: transparent; }
.btn-outline-primary:hover,.btn-outline-primary:active,.btn-outline-success:hover,.btn-outline-success:active { color: var(--accent); background-color: var(--accent-soft); border-color: var(--accent); }
.btn-outline-secondary,.btn-outline-light { color: var(--muted); background-color: transparent; border-color: var(--line); }
.btn-outline-secondary:hover,.btn-outline-secondary:active,.btn-outline-light:hover { color: var(--ink); background-color: var(--surface-alt); border-color: var(--muted); }
.btn-primary:focus-visible,.btn-outline-primary:focus-visible,.btn-success:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent); }
.form-control:focus-visible,.form-select:focus-visible { outline: none; }
.table { --bs-table-striped-bg: var(--surface-alt); --bs-table-striped-color: var(--ink); --bs-table-hover-color: var(--ink); border-color: var(--line); }
.table > :not(caption) > * > * { color: var(--ink); }.table > thead > tr > th { color: var(--muted); }
.app-content > .container.mt-4,.app-content > .container.mt-5 { margin-top: 0 !important; }
.app-content .bg-dark.text-light { color: var(--ink) !important; }.text-bg-dark { background: var(--ink); color: var(--surface); }.text-bg-primary { color: var(--surface); background: var(--accent); }
.fw-semibold { font-weight: 600 !important; }.rounded-4 { border-radius: 13px !important; }
.workspace-link { font-size: 13px; }
.table-responsive { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }.table-responsive .table { margin-bottom: 0; }
.recording-grid { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 22px; align-items: start; }.recording-stage { padding: 24px; text-align: center; }.recording-stage #realtime-container { aspect-ratio: 4/3; width: 100% !important; height: auto !important; }.recording-stage video,.recording-stage canvas { display: block; width: 100%; height: auto; }.recording-guide { padding: 24px; }.recording-guide h2 { font-size: 15px; margin-bottom: 17px; }.recording-guide ol { padding-left: 18px; font-size: 12px; color: var(--muted); }.recording-guide li { margin-bottom: 15px; padding-left: 4px; }.recording-status { background: var(--surface-alt); border-radius: 8px; padding: 13px; margin-top: 20px; text-align: left; }.recording-status .eyebrow { margin-bottom: 5px; font-size: 9px; }.recording-status #status { color: var(--ink) !important; font-size: 12px; }.recording-status #loader { float: right; margin-top: 0 !important; }.recording-note { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; font-size: 11px; color: var(--muted); }
.calculator-form { background: var(--surface); padding: 27px; border: 1px solid var(--line); border-radius: 13px; }.calculator-form > .section-title:first-of-type { margin-top: 0; }
html[data-theme="dark"] .btn-close { filter: invert(1); }html[data-theme="dark"] .text-dark { color: var(--ink) !important; }
@media(max-width:850px) { .recording-grid { grid-template-columns: minmax(0,1fr); }.recording-guide ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }.recording-guide li { margin-bottom: 0; } }
@media(max-width:575.98px) { .recording-stage,.recording-guide,.calculator-form { padding: 18px; }.recording-guide ol { display: block; }.recording-guide li { margin-bottom: 12px; } }
.rider-form-card .style-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
@media(min-width:1600px) { .rider-form-card .style-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } }
@media(max-width:767.98px) { .rider-form-card .style-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
.topbar-location { min-width: 0; }.topbar-location > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.topbar-actions { flex-shrink: 0; }
.nav-pills .nav-link.active { color: var(--surface); background: var(--accent); }.nav-pills .nav-link { color: var(--accent); }
@media(max-width:575.98px) { .topbar-actions .user-avatar { display: none; }.icon-button { width: 40px; height: 40px; }.topbar-location { gap: 9px; }.topbar-location .mobile-menu { flex-shrink: 0; }.app-topbar { padding-left: 15px; padding-right: 15px; gap: 10px; } }