:root { --navy: #132238; --navy-soft: #1c304a; --accent: #2563eb; --page: #f4f7fb; }
body { background: var(--page); color: #172033; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell { min-height: 100vh; display: flex; }.sidebar { background: var(--navy); color: #c7d2e0; width: 260px; flex: 0 0 260px; border: 0; }.sidebar-inner { padding: 26px 16px; height: 100%; }.brand { color: #fff; font-size: 1.25rem; font-weight: 300; letter-spacing: .2px; text-decoration: none; display: block; padding: 0 12px 28px; }.brand strong { font-weight: 700; color: #69a5ff; }.nav-caption { color: #7f92ac; display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 0 12px 9px; }.sidebar .nav-link { color: #b8c5d5; border-radius: 8px; font-size: .93rem; padding: 10px 12px; }.sidebar .nav-link i { font-size: 1.05rem; margin-right: 11px; width: 18px; display: inline-block; }.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }.sidebar .nav-link.active { color: #fff; background: var(--accent); box-shadow: 0 5px 12px rgba(0,0,0,.15); }.app-content { min-width: 0; flex: 1; }.topbar { height: 74px; background: #fff; border-bottom: 1px solid #e7edf4; }.user-menu { display: flex; align-items: center; gap: 9px; border: 0; padding: 5px; }.user-menu strong, .user-menu small { display: block; font-size: .8rem; line-height: 1.3; }.user-menu small { color: #718096; }.avatar, .table-avatar { width: 36px; height: 36px; align-items: center; background: #dbeafe; border-radius: 50%; color: #1d4ed8; display: inline-flex; font-size: .8rem; font-weight: 700; justify-content: center; }.page-heading h1 { font-size: 1.65rem; font-weight: 700; margin: 0; }.eyebrow { color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .1em; margin: 0 0 4px; text-transform: uppercase; }.metric-card, .content-card { box-shadow: 0 3px 18px rgba(18, 38, 63, .06); border-radius: 12px; }.metric-card .card-body { position: relative; }.metric-card p { color: #68778b; font-size: .85rem; font-weight: 600; margin: 14px 0 4px; }.metric-card h2 { font-size: 1.75rem; font-weight: 700; margin: 0; }.metric-icon { align-items: center; border-radius: 9px; display: flex; font-size: 1.25rem; height: 40px; justify-content: center; width: 40px; }.content-card .card-header { padding: 20px 24px; }.table { --bs-table-bg: transparent; }.table thead th { background: #f8fafc; border-bottom: 1px solid #e8eef5; color: #6d7b8e; font-size: .7rem; letter-spacing: .06em; padding: 13px 16px; text-transform: uppercase; }.table td { border-color: #edf1f5; padding: 15px 16px; }.role-badge { border-radius: 20px; font-size: .72rem; font-weight: 600; padding: 6px 10px; }.role-admin { background: #ede9fe; color: #6d28d9; }.role-operator { background: #dcfce7; color: #15803d; }.form-card { max-width: 820px; }.placeholder-panel { min-height: 300px; display: flex; align-items: center; flex-direction: column; justify-content: center; }.placeholder-icon { align-items: center; background: #eaf2ff; border-radius: 16px; color: var(--accent); display: flex; font-size: 2rem; height: 72px; justify-content: center; width: 72px; }.login-page { align-items: center; background: linear-gradient(135deg, #0f1e33, #23476f); display: flex; justify-content: center; min-height: 100vh; padding: 24px; }.login-card { border-radius: 16px; max-width: 440px; width: 100%; }.login-card .brand { padding: 0; }.form-label { font-size: .86rem; font-weight: 600; }.form-control, .form-select { border-color: #dbe3ec; padding: .65rem .75rem; }.form-control:focus, .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(37,99,235,.12); }.btn-primary { background: var(--accent); border-color: var(--accent); }.btn-light { border-color: #e2e8f0; }.offcanvas-lg { --bs-offcanvas-width: 260px; }
@media (max-width: 991.98px) { .sidebar { width: auto; flex: initial; }.sidebar-inner { padding-top: 20px; }.app-shell { display: block; } }
.import-status { border-radius: 20px; font-size: .72rem; font-weight: 600; padding: 6px 10px; }.status-completed { background: #dcfce7; color: #15803d; }.status-processing { background: #dbeafe; color: #1d4ed8; }.status-failed { background: #fee2e2; color: #b91c1c; }.image-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }.image-thumb { border: 1px solid #e5ebf2; border-radius: 9px; color: #69798d; display: block; font-size: .7rem; overflow: hidden; text-decoration: none; }.image-thumb img { background: #f8fafc; display: block; height: 95px; object-fit: contain; width: 100%; }.image-thumb span { display: block; overflow: hidden; padding: 7px 8px; text-overflow: ellipsis; white-space: nowrap; }.empty-inline { color: #8695a8; padding: 42px 8px; text-align: center; }.empty-inline i { display: block; font-size: 1.5rem; margin-bottom: 8px; }.json-modal-preview { background: #f8fafc; border: 1px solid #e7edf4; border-radius: 8px; color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.6; padding: 16px; white-space: pre-wrap; word-break: break-word; }
.search-tool-card { overflow: hidden; position: relative; }.search-tool-card::after { background: radial-gradient(circle, rgba(37,99,235,.10), transparent 62%); content: ""; height: 180px; position: absolute; right: -70px; top: -80px; width: 180px; }.search-tool-card .card-body { position: relative; z-index: 1; }.search-tool-icon { align-items: center; border-radius: 14px; display: flex; font-size: 1.35rem; height: 48px; justify-content: center; width: 48px; }.search-page-input { border-radius: 14px; box-shadow: 0 10px 28px rgba(15, 23, 42, .06); }.search-page-input .input-group-text { background: #f8fafc; border-color: #dbe3ec; color: #64748b; padding-left: 18px; }.search-page-input .form-control { font-size: 1rem; min-height: 52px; }.search-page-input .btn { border-radius: 0 14px 14px 0; }.mini-result-card { background: #f8fafc; border: 1px solid #e7edf4; border-radius: 12px; padding: 13px 15px; }.mini-result-card span { color: #64748b; display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.mini-result-card strong { display: block; margin-top: 4px; }.parsed-filter { border: 1px solid #e2e8f0; padding: 8px 10px; }.result-thumb { align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; display: inline-flex; height: 46px; justify-content: center; object-fit: contain; width: 46px; }.result-thumb.placeholder { color: #64748b; }
.search-side-panel, .search-actions-panel { position: sticky; top: 92px; }.search-description { min-height: 146px; resize: vertical; }.vehicle-empty { align-items: center; display: flex; gap: 16px; min-height: 180px; }.vehicle-hero { border-radius: 16px; box-shadow: 0 14px 36px rgba(15, 23, 42, .12); overflow: hidden; }.vehicle-photo { background-color: #132238; background-position: center; background-size: cover; min-height: 265px; position: relative; }.vehicle-photo::after { background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .45)); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; }.vehicle-photo-fallback { color: rgba(255,255,255,.16); font-size: 8rem; position: absolute; right: 28px; top: 28px; z-index: 1; }.vehicle-photo-content { bottom: 26px; color: #fff; left: 28px; max-width: 75%; position: absolute; z-index: 2; }.vehicle-photo-content h2 { font-size: 2rem; font-weight: 800; margin: 0 0 6px; }.vehicle-photo-content p:not(.eyebrow) { color: rgba(255,255,255,.78); }.vin-data-table { max-height: 360px; overflow: auto; }
.oem-finder-card { background: linear-gradient(180deg, #ffffff, #f8fbff); border: 1px solid #dbeafe; border-radius: 16px; box-shadow: 0 12px 28px rgba(37, 99, 235, .08); padding: 16px; }.oem-code-display { background: #0f172a; border-radius: 14px; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; padding: 14px 16px; text-align: center; word-break: break-word; }.oem-finder-card .list-group-item { background: transparent; border-color: #eef2f7; }
.supplier-checks { border-top: 1px solid #e7edf4; padding-top: 14px; }.supplier-check-item { background: rgba(248, 250, 252, .92); border: 1px solid #e7edf4; border-radius: 12px; padding: 11px 12px; }
.search-main-row .search-side-panel { position: static; top: auto; }.search-equal-card { min-height: 100%; }.search-content-stack { display: flex; flex-direction: column; }.search-content-stack > .content-card:last-child, .search-content-stack > .vehicle-hero:last-child { margin-bottom: 0 !important; }
@media (max-width: 1199.98px) { .search-side-panel { position: static; }.vehicle-photo { min-height: 220px; } }
.search-loading-overlay { align-items: center; background: rgba(244, 247, 251, .78); backdrop-filter: blur(8px); bottom: 0; display: flex; justify-content: center; left: 0; opacity: 0; padding: 24px; pointer-events: none; position: fixed; right: 0; top: 0; transition: opacity .18s ease; z-index: 2000; }.search-loading-overlay.is-visible { opacity: 1; pointer-events: auto; }.search-loading-card { align-items: center; background: #fff; border: 1px solid #dbeafe; border-radius: 22px; box-shadow: 0 24px 70px rgba(15, 23, 42, .20); display: flex; gap: 18px; max-width: 460px; padding: 24px 28px; width: min(100%, 460px); }.search-loading-spinner { animation: searchSpin .8s linear infinite; background: conic-gradient(from 0deg, #2563eb, #60a5fa, #bfdbfe, transparent 78%); border-radius: 999px; flex: 0 0 auto; height: 64px; position: relative; width: 64px; }.search-loading-spinner::after { background: #fff; border-radius: inherit; content: ""; inset: 8px; position: absolute; }.search-loading-card h2 { color: #132238; }.search-loading-card p { line-height: 1.45; }@keyframes searchSpin { to { transform: rotate(360deg); } }@media (max-width: 575.98px) { .search-loading-card { align-items: center; flex-direction: column; text-align: center; }.search-loading-spinner { height: 58px; width: 58px; } }

body { background: #07111f; color: #dbe7f6; }
.app-content { background: linear-gradient(180deg, #081424 0%, #0d1b2d 46%, #07111f 100%); }
.sidebar { background: #050d18; border-right: 1px solid rgba(148, 163, 184, .12); }
.brand { color: #f8fbff; font-size: 1.35rem; font-weight: 800; letter-spacing: .08em; }
.brand strong { color: inherit; }
.offcanvas-header { border-bottom-color: rgba(148, 163, 184, .14) !important; }
.topbar { background: #081424; border-bottom: 0; box-shadow: 0 1px 0 rgba(148, 163, 184, .10); }
.user-menu { color: #dbe7f6; }
.user-menu:hover, .user-menu:focus { color: #fff; background: rgba(96, 165, 250, .10); }
.user-menu small, .text-muted { color: #8da2bd !important; }
.avatar, .table-avatar { background: #12345c; color: #93c5fd; }
.card, .content-card, .metric-card, .login-card, .modal-content, .dropdown-menu { background-color: #0d1b2d; border-color: rgba(148, 163, 184, .14); color: #dbe7f6; }
.card-header, .card-footer, .bg-white { background-color: #0d1b2d !important; border-color: rgba(148, 163, 184, .12) !important; }
.table { --bs-table-color: #dbe7f6; --bs-table-border-color: rgba(148, 163, 184, .14); }
.table thead th { background: #12243a; border-bottom-color: rgba(148, 163, 184, .18); color: #9fb4d0; }
.table td { border-color: rgba(148, 163, 184, .12); }
.form-control, .form-select { background-color: #081424; border-color: #213753; color: #e8f1ff; }
.form-control:focus, .form-select:focus { background-color: #081424; color: #fff; border-color: #3b82f6; box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .18); }
.form-control::placeholder { color: #6f86a3; }
.btn-light { background: #12243a; border-color: #213753; color: #dbe7f6; }
.btn-light:hover { background: #19314d; border-color: #2b4566; color: #fff; }
.login-page { background: radial-gradient(circle at top, #12345c 0%, #07111f 48%, #030712 100%); }
.list-group-item, .mini-result-card, .supplier-check-item, .manual-match-card, .manual-summary-grid div, .manual-pair-row, .manual-pair-row strong, .excel-match-snippet, .json-modal-preview { background: #102033; border-color: rgba(148, 163, 184, .14); color: #dbe7f6; }
.oem-finder-card { background: linear-gradient(180deg, #102033, #0d1b2d); border-color: rgba(96, 165, 250, .24); box-shadow: 0 16px 34px rgba(0, 0, 0, .22); }
.search-page-input, .manual-match-card { box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
.search-page-input .input-group-text { background: #102033; border-color: #213753; color: #8da2bd; }
.search-loading-overlay { background: rgba(3, 7, 18, .78); }
.search-loading-card { background: #0d1b2d; border-color: rgba(96, 165, 250, .24); color: #dbe7f6; }
.search-loading-spinner::after { background: #0d1b2d; }
.search-loading-card h2 { color: #f8fbff; }
.dropdown-item, .dropdown-item-text { color: #dbe7f6; }
.dropdown-item:hover, .dropdown-item:focus { background: #12243a; color: #fff; }
.modal-backdrop.show { opacity: .78; }
.modal-content { background: #0b1728 !important; border: 1px solid rgba(96, 165, 250, .22) !important; box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
.modal-header, .modal-footer { background: #0f1f34 !important; border-color: rgba(148, 163, 184, .14) !important; }
.modal-body { background: #0b1728 !important; color: #dbe7f6; }
.btn-close { filter: invert(1) grayscale(100%) brightness(180%); opacity: .8; }
.btn-close:hover { opacity: 1; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(96, 165, 250, .10); color: #fff; }
.text-bg-light { background-color: #172a44 !important; color: #dbe7f6 !important; border: 1px solid rgba(148, 163, 184, .16); }
.alert-light { background: #102033 !important; border-color: rgba(148, 163, 184, .16) !important; color: #dbe7f6 !important; }
.alert-warning { background: #3a2a12 !important; border-color: rgba(250, 204, 21, .26) !important; color: #fde68a !important; }
.alert-info { background: #0f2b46 !important; border-color: rgba(56, 189, 248, .24) !important; color: #bae6fd !important; }
.alert-success { background: #0f2f24 !important; border-color: rgba(74, 222, 128, .24) !important; color: #bbf7d0 !important; }
.manual-summary-grid strong, .manual-pair-row strong { color: #f8fbff !important; }
.manual-pair-head { background: #172a44 !important; color: #a9bdd6 !important; }
.manual-pair-table, .catalog-article-table-wrap { border-color: rgba(148, 163, 184, .16) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important; }
.catalog-article-table thead th { background: #172a44 !important; color: #bcd0ea !important; border-bottom-color: rgba(148, 163, 184, .18) !important; }
.catalog-article-table tbody tr:nth-child(even), .catalog-article-table tbody tr:hover { background: rgba(96, 165, 250, .08) !important; }
.catalog-row-details span { background: #172a44 !important; border-color: rgba(148, 163, 184, .16) !important; color: #dbe7f6 !important; }
.search-loading-card, .manual-match-card, .manual-summary-grid div, .manual-pair-row, .manual-pair-row strong, .excel-match-snippet { background: #102033 !important; border-color: rgba(148, 163, 184, .16) !important; color: #dbe7f6 !important; }
.search-loading-spinner::after { background: #102033 !important; }
.process-step, .process-step.is-success, .process-step.is-warning, .process-step.is-muted { background: #102033 !important; border-color: rgba(148, 163, 184, .16) !important; color: #dbe7f6 !important; }
.process-step.is-success .process-icon { background: rgba(34, 197, 94, .18) !important; color: #86efac !important; }
.process-step.is-warning .process-icon { background: rgba(245, 158, 11, .18) !important; color: #fde68a !important; }
.process-step.is-muted .process-icon { background: #172a44 !important; color: #9fb4d0 !important; }