css
/* --- RESET & VARIABLES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root {
    --bg-color: #0f1115;
    --card-bg: #ffffff;
    --card-text: #161920;
    --border-glow: #3aa0ff;
    --border-dim: #1e2633;
    --text-white: #ffffff;
    --text-gray: #a1b0bc;
    --accent-red: #ff3a5c;
    --accent-green: #30d158;
    --accent-orange: #ff9f0a;
}

body {
    background-color: var(--bg-color);
    color: var(--text-white);
    min-height: 100vh;
    padding-bottom: 80px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Subtle premium contour wave background overlay (Inspired by PewDiePie wavy pattern but low-opacity aqua) */
body::before {
    content: "";
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-color: var(--bg-color);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' width='100%' height='100%'><g stroke='%233ae0ff' fill='none' opacity='0.07'><path d='M-100,100 C200,-50 400,250 800,50 C1100,-100 1300,150 1600,50' stroke-width='1.5'/><path d='M-100,130 C210,-20 410,280 810,80 C1110,-70 1310,180 1600,80' stroke-width='3'/><path d='M-100,165 C220,10 420,310 820,110 C1120,-40 1320,210 1600,110' stroke-width='1'/><path d='M-100,205 C230,40 430,340 830,140 C1130,-10 1330,240 1600,140' stroke-width='2'/><path d='M-100,255 C240,70 440,370 840,170 C1140,20 1340,270 1600,170' stroke-width='4'/><path d='M-100,450 C300,300 500,600 900,400 C1200,250 1300,550 1600,450' stroke-width='2.5'/><path d='M-100,480 C310,330 510,630 910,430 C1210,280 1310,580 1600,480' stroke-width='1.5'/><path d='M-100,515 C320,360 520,660 920,460 C1220,310 1320,610 1600,510' stroke-width='3.5'/><path d='M-100,560 C330,390 530,690 930,490 C1230,340 1330,640 1600,540' stroke-width='1.2'/><path d='M-100,750 C250,850 650,650 1000,800 C1250,900 1350,700 1600,800' stroke-width='2'/><path d='M-100,780 C260,880 660,680 1010,830 C1260,930 1360,730 1600,830' stroke-width='4'/><path d='M-100,820 C270,910 670,710 1020,860 C1270,960 1370,760 1600,860' stroke-width='1.5'/></g></svg>");
    background-size: cover;
    background-repeat: no-repeat;
    /* Slow, steady, almost imperceptible drifting movement */
    animation: slowDrift 120s ease-in-out infinite alternate;
    z-index: -1;
}

@keyframes slowDrift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-2%, -2%) scale(1.03); }
    100% { transform: translate(0, 0) scale(1); }
}

/* --- HEADER & ALIGNMENTS --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    border-bottom: 1px solid var(--border-dim);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.primary-nav { display: flex; align-items: center; gap: 4px; }
.primary-nav button { border: 0; background: transparent; color: var(--text-gray); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 8px 9px; border-radius: 7px; }
.primary-nav button:hover { background: rgba(58, 160, 255, .12); color: var(--border-glow); }
.dashboard-hero { padding: 42px 0 28px; max-width: 700px; }
.dashboard-hero h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.02; margin: 10px 0 14px; letter-spacing: -2px; }
.dashboard-hero p { color: var(--text-gray); font-size: 17px; line-height: 1.6; max-width: 600px; }
.eyebrow { color: var(--border-glow); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.dashboard-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0 28px; }
.dashboard-action { text-align: left; cursor: pointer; min-height: 188px; padding: 23px; border: 1px solid var(--border-dim); border-radius: 16px; background: rgba(255,255,255,.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; color: var(--text-white); }
.dashboard-action:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(19, 73, 115, .26); border-color: var(--border-glow); }
.dashboard-action.analyze { background: linear-gradient(135deg, #09213c, #0b5b92); color: #fff; border-color: #0b5b92; }
.dashboard-action-icon { display: block; font-size: 30px; margin-bottom: 28px; color: var(--border-glow); }
.dashboard-action.analyze .dashboard-action-icon { color: #82e7ff; }
.dashboard-action strong, .dashboard-action small { display: block; }
.dashboard-action strong { font-size: 18px; margin-bottom: 8px; }.dashboard-action small { font-size: 13px; line-height: 1.45; opacity: .75; }
.dashboard-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.dashboard-status-card { padding: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--border-dim); border-radius: 12px; }.dashboard-status-card span, .dashboard-status-card strong { display: block; }.dashboard-status-card span { color: var(--text-gray); font-size: 12px; }.dashboard-status-card strong { margin: 6px 0 12px; font-size: 25px; }.dashboard-status-card button { background: none; border: 0; padding: 0; color: var(--border-glow); font-weight: 700; cursor: pointer; }
.dashboard-ask-section { margin-bottom:28px; }.dashboard-ask { width:100%; min-height:126px; text-align:left; display:flex; align-items:center; gap:18px; }.dashboard-ask .dashboard-action-icon { margin:0; flex:0 0 auto; }.dashboard-ask strong { margin:0; }.dashboard-ask small { margin-left:auto; max-width:520px; }
.dashboard-alerts { margin-bottom: 40px; }.alert-form { display: flex; gap: 10px; margin: 18px 0; }.alert-form input { flex: 1; }.alerts-list { display: flex; flex-direction: column; gap: 10px; }
.deal-alert-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; margin:18px 0 10px; }.deal-alert-form .form-group { margin:0; }.deal-alert-form label { display:block; margin-bottom:6px; font-size:12px; font-weight:700; color:var(--text-gray); text-transform:uppercase; letter-spacing:.04em; }.deal-alert-form .action-sub-btn { align-self:end; min-height:42px; }.alert-range-fields { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; }.alert-range-fields>span { color:var(--text-gray); font-size:12px; }.alert-currency-field { position:relative; }.alert-currency-field span { position:absolute; top:50%; left:12px; transform:translateY(-50%); color:var(--text-gray); font-weight:700; pointer-events:none; }.alert-currency-field input { width:100%; padding-left:29px; }.deal-alert-mobile-note { margin:0 0 18px; color:var(--text-gray); font-size:12px; line-height:1.45; }
.deal-alert-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px; background:rgba(255,255,255,.02); border:1px solid var(--border-dim); border-radius:6px; }.deal-alert-row strong { display:block; color:#dceaf2; font-size:13px; }.deal-alert-row span { display:block; margin-top:4px; font-size:11px; color:var(--border-glow); font-weight:700; }.deal-alert-row .action-sub-btn { padding:6px 12px; font-size:11px; border-color:var(--accent-red); color:var(--accent-red); }
.member-app-callout { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px; margin:-10px 0 28px; border:1px solid rgba(58,160,255,.5); border-radius:12px; background:linear-gradient(90deg,rgba(58,160,255,.14),rgba(255,255,255,.02)); }.member-app-callout strong,.member-app-callout span { display:block; }.member-app-callout span { color:var(--text-gray); font-size:13px; margin-top:3px; }
.dashboard-scanner-link { width:100%; padding:14px; margin:-12px 0 28px; color:#9ceaff; background:rgba(58,160,255,.12); border:1px solid var(--border-glow); border-radius:10px; cursor:pointer; font-weight:800; }
.dashboard-about { margin-bottom:40px; }.dashboard-about h2 { font-size:clamp(24px,3.2vw,38px); max-width:700px; line-height:1.15; margin:8px 0 14px; }.dashboard-about p { max-width:780px; color:var(--text-gray); font-size:15px; }
.dashboard-partnerships { margin:0 0 40px; }.dashboard-partnerships h2 { margin:7px 0 16px; color:var(--border-glow); font-size:clamp(24px,3.2vw,34px); }.partnership-action { display:block; max-width:360px; text-decoration:none; }.partnership-action .dashboard-action-icon { color:#82e7ff; }
.membership-plan-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.membership-plan-grid>div { border:1px solid #cbd5e1; border-radius:8px; padding:12px; }.membership-plan-grid h4 { font-size:12px; margin-bottom:5px; }.membership-plan-grid p { font-size:11px; line-height:1.45; color:#475569; }
.membership-selection-grid { grid-template-columns:repeat(3,1fr); align-items:stretch; }.membership-selection-grid .pro-tier-card, .membership-selection-grid .upgrade-opt-card { display:flex; flex-direction:column; }.membership-selection-grid .primary-btn { margin-top:auto; }
.owned-car-form { margin-bottom: 24px; }.owned-car-form h3 { margin-bottom: 18px; font-size: 17px; }
.garage-step-indicator { display:flex; gap:6px; margin:0 0 18px; overflow:auto; }.garage-step-indicator span { white-space:nowrap; padding:5px 9px; border-radius:20px; color:var(--text-gray); font-size:11px; border:1px solid var(--border-dim); }.garage-step-indicator span.active { color:#fff; background:var(--border-glow); border-color:var(--border-glow); }.garage-setup-step { display:none; }.garage-setup-step.active { display:block; }
.intro-screen { position: fixed; inset: 0; z-index: 100; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #12395b 0, #07111d 38%, #030609 100%); transition: transform .8s cubic-bezier(.75,0,.2,1), opacity .5s ease; }
.intro-video { width:100%; height:100%; object-fit:cover; background:#030609; }
.intro-screen.complete { transform: translateY(-105%); opacity: 0; pointer-events: none; }.intro-skip { position:absolute; right:26px; top:24px; opacity:0; transition:opacity .25s ease; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:30px; padding:9px 14px; cursor:pointer; z-index:2; }.intro-screen.can-skip .intro-skip { opacity:1; }.intro-screen::after { content:""; position:absolute; width:100%; height:1px; bottom:8%; background:linear-gradient(90deg,transparent,#42d5ff,transparent); box-shadow:0 0 22px #42d5ff; }
@keyframes introTurn { 0%,20% { transform:perspective(850px) rotateY(-43deg) rotateX(7deg); } 26%,39% { transform:perspective(850px) rotateY(-14deg) rotateX(7deg); } 45%,58% { transform:perspective(850px) rotateY(17deg) rotateX(7deg); } 64%,76% { transform:perspective(850px) rotateY(42deg) rotateX(7deg); } 88%,100% { transform:perspective(850px) rotateY(0) rotateX(5deg) scale(.8); } }
@keyframes introBrand { to { opacity:1; transform:translateY(-18px); } }
.coming-soon-card, .scanner-card { max-width:780px; margin:80px auto; text-align:center; padding:60px; }.coming-soon-card h1,.scanner-card h1,.business-head h1 { font-size:clamp(30px,4vw,48px); margin:9px 0 12px; }.coming-soon-card p,.scanner-card p { color:var(--text-gray); max-width:590px; margin:0 auto 28px; }.scanner-demo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:left; margin:30px 0; }.scanner-demo-grid>div { padding:18px; background:rgba(58,160,255,.08); border:1px solid var(--border-dim); border-radius:12px; }.scanner-demo-grid span,.scanner-demo-grid strong,.scanner-demo-grid small { display:block; }.scanner-demo-grid span { color:var(--border-glow); font-size:24px; font-weight:800; }.scanner-demo-grid strong { margin:6px 0; }.scanner-demo-grid small { color:var(--text-gray); line-height:1.4; }.scanner-access,.scanner-results { margin:18px auto; max-width:560px; color:var(--text-gray); }.scanner-results { text-align:left; }.business-head { display:flex; justify-content:space-between; align-items:start; gap:20px; padding:44px 0 25px; }.business-head p { color:var(--text-gray); }.business-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }.business-actions button { text-align:left; cursor:pointer; min-height:110px; padding:18px; color:var(--text-white); background:rgba(255,255,255,.04); border:1px solid var(--border-dim); border-radius:12px; }.business-actions button:hover { border-color:var(--border-glow); }.business-actions strong,.business-actions small { display:block; }.business-actions strong { font-size:16px; }.business-actions small { margin-top:7px; color:var(--text-gray); }.inventory-toolbar { display:flex; gap:12px; margin-bottom:20px; }.inventory-toolbar input { flex:1; }.business-list { display:flex; flex-direction:column; gap:10px; }.business-row { display:flex; gap:15px; align-items:center; padding:16px; border:1px solid var(--border-dim); border-radius:10px; }.business-row .code { color:var(--border-glow); font-weight:800; }.business-row .meta { flex:1; color:var(--text-gray); font-size:13px; }.business-row .actions { display:flex; gap:7px; }.business-row button { font-size:11px; }.garage-tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }.garage-tools-grid h3 { font-size:16px; margin-bottom:8px; }.garage-tools-grid p { min-height:66px; color:var(--text-gray); font-size:13px; }.workflow-modal { position:fixed; z-index:101; inset:0; background:rgba(0,0,0,.75); padding:20px; overflow:auto; }.workflow-dialog { position:relative; max-width:620px; margin:7vh auto; background:#101923; color:var(--text-white); border:1px solid var(--border-dim); border-radius:15px; padding:30px; }.workflow-dialog h2 { margin-bottom:9px; }.workflow-dialog p { color:var(--text-gray); margin-bottom:18px; }.workflow-dialog .form-group { margin-bottom:13px; }.workflow-dialog label { display:block; margin-bottom:5px; font-size:12px; font-weight:700; }.workflow-dialog input,.workflow-dialog select,.workflow-dialog textarea { width:100%; }.workflow-dialog textarea { min-height:100px; padding:12px; border-radius:8px; }
.care-secondary-heading { max-width:620px; margin:0 auto 20px; color:#dff4ff; font-size:clamp(18px,2.5vw,24px); line-height:1.35; }
.care-app-note { color:#9ceaff !important; font-size:13px; font-weight:700; }
.scanner-card.spa-card { background:linear-gradient(145deg,#07121c,#0a1f30); color:#fff; border-color:var(--border-glow); }
.scanner-card h1, .scanner-card h2, .scanner-card .care-secondary-heading { color:var(--border-glow); }
.scanner-card p, .scanner-card .care-health-list { color:#fff; }
.scanner-card .scanner-demo-grid>div, .scanner-card .care-health-section { background:rgba(58,160,255,.10); border-color:rgba(98,198,255,.45); }
.scanner-card .scanner-demo-grid strong, .scanner-card .scanner-demo-grid small { color:#fff; }
.scanner-card .scanner-demo-grid small { opacity:.82; }
.scanner-card .care-app-note { color:#9ceaff !important; }
.care-health-section { max-width:620px; margin:36px auto 24px; padding:24px; text-align:left; background:rgba(58,160,255,.08); border:1px solid var(--border-dim); border-radius:14px; }
.care-health-section h2 { margin:0 0 10px; color:#e8f7ff; font-size:clamp(20px,2.7vw,28px); }
.care-health-section p { max-width:none; margin:0 0 16px; }
.care-health-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 22px; margin:0; padding-left:20px; color:#d7e9f4; line-height:1.45; }
.care-health-list li::marker { color:var(--border-glow); }
@media (max-width:560px) { .care-health-list { grid-template-columns:1fr; } .care-health-section { padding:20px; } }
.scanner-bundle-plan { position:relative; border-color:var(--accent-orange); box-shadow:0 12px 35px rgba(255,159,10,.15); }
.checkout-billing-block { margin:0 0 20px; padding:16px; border:1px solid var(--border-dim); border-radius:12px; background:rgba(58,160,255,.07); }
.checkout-billing-block>span { display:block; margin-bottom:10px; color:var(--text-gray); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.subscription-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.subscription-switch button { padding:12px; color:var(--text-gray); background:rgba(255,255,255,.04); border:1px solid var(--border-dim); border-radius:9px; cursor:pointer; font:inherit; font-size:12px; line-height:1.45; }
.subscription-switch button strong { color:var(--text-white); font-size:15px; }.subscription-switch button small { color:var(--border-glow); font-weight:800; }
.subscription-switch button.active { color:#fff; background:rgba(58,160,255,.2); border-color:var(--border-glow); box-shadow:0 0 18px rgba(58,160,255,.14); }
.partner-roadmap { max-width:410px; margin:0 auto 25px; padding:16px; text-align:left; border:1px solid var(--border-dim); border-radius:10px; background:rgba(58,160,255,.06); }.partner-roadmap span { color:var(--border-glow); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:1px; }.partner-roadmap ul { margin:8px 0 0 18px; color:var(--text-gray); font-size:14px; }.ad-template { max-width:520px; margin:0 auto; overflow:hidden; color:#eef7ff; background:radial-gradient(circle at 0 0,#184e7a 0,#071625 38%,#02070d 100%); border:1px solid #3e9ed8; box-shadow:inset 0 0 42px rgba(75,182,255,.24); text-align:center; }.ad-template header { padding:28px 20px 18px; }.ad-template .dealer-name { font-size:clamp(24px,6vw,42px); letter-spacing:5px; font-weight:800; text-transform:uppercase; }.ad-template .dealer-details { color:#c0d8e8; margin-top:8px; font-size:13px; }.ad-photo { margin:0 16px 16px; height:220px; border:2px solid #4b9bd1; background:linear-gradient(135deg,#123754,#06121e); display:flex; align-items:center; justify-content:center; overflow:hidden; }.ad-photo img { width:100%; height:100%; object-fit:cover; }.ad-photo span { color:#92b4ca; font-size:12px; }.ad-template h3 { font-size:28px; margin:24px 14px 5px; }.ad-template .ad-price { font-size:24px; font-weight:800; color:#fff; margin-bottom:24px; }.ad-specs { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; text-align:left; background:#255c84; }.ad-specs div { padding:12px; background:#071827; }.ad-specs span { display:block; color:#79bdec; font-size:10px; text-transform:uppercase; }.ad-specs strong { font-size:13px; }.ad-print-action { margin-top:18px; }

/* Portrait dealership advert: supplied reference structure with live content layered over it. */
.workflow-dialog label, .workflow-dialog input, .workflow-dialog select, .workflow-dialog textarea, .workflow-dialog option { color:#e7f1f7; }.workflow-dialog input, .workflow-dialog select, .workflow-dialog textarea { background:#172735; border:1px solid #527992; }.workflow-dialog input::placeholder, .workflow-dialog textarea::placeholder { color:#acc1cf; opacity:1; }.modal-tab-btn, .tab-btn, .primary-nav button { color:#d7e4ec; }
.ad-template { position:relative; width:min(100%,470px); aspect-ratio:9/16; margin:0 auto; overflow:hidden; color:#eef7ff; background:#061523 url('assets/business-ad-template.png') center/cover no-repeat; text-align:center; }
.ad-template header { position:absolute; z-index:2; inset:3% 7% auto; padding:0; }.ad-template .dealer-name { font-size:clamp(17px,4.6vw,31px); letter-spacing:3px; font-weight:800; text-transform:uppercase; text-shadow:0 2px 3px #000; }.ad-template .dealer-details { color:#d5e5ef; margin-top:5px; font-size:10px; line-height:1.4; }.ad-photo { position:absolute; z-index:1; left:4%; width:92%; height:27%; margin:0; border:0; background:#071827; display:flex; align-items:center; justify-content:center; overflow:hidden; }.ad-photo:nth-of-type(1) { top:13.5%; }.ad-photo:nth-of-type(2) { top:42.2%; }.ad-photo img { width:100%; height:100%; object-fit:cover; }.ad-photo span { color:#92b4ca; font-size:10px; padding:20px; }.ad-template h3 { position:absolute; z-index:2; left:6%; right:6%; top:70.1%; margin:0; font-size:clamp(16px,4vw,25px); line-height:1.1; text-shadow:0 2px 3px #000; }.ad-template .ad-price { position:absolute; z-index:2; left:6%; right:6%; top:75.1%; font-size:clamp(15px,3.8vw,23px); font-weight:800; color:#fff; text-shadow:0 2px 3px #000; }.ad-specs { position:absolute; z-index:2; left:13%; right:10%; bottom:2.7%; display:grid; grid-template-columns:repeat(2,1fr); gap:7px 14px; text-align:left; background:transparent; }.ad-specs div { padding:0; background:transparent; min-width:0; }.ad-specs span { display:block; color:#53baff; font-size:7px; text-transform:uppercase; }.ad-specs strong { display:block; font-size:9px; line-height:1.2; color:#eef7ff; overflow-wrap:anywhere; }
.ad-template h3 { top:71.8%; font-size:clamp(18px,4.5vw,27px); font-weight:800; }.ad-template .ad-price { top:76.5%; font-size:clamp(17px,4.1vw,24px); }.ad-spec-heading { position:absolute; z-index:2; left:10%; right:10%; top:82%; color:#4eb9ff; text-transform:uppercase; letter-spacing:2px; font-weight:800; font-size:8px; }.ad-specs { left:11%; right:9%; bottom:2.1%; gap:5px 12px; }.ad-specs span { font-size:7px; }.ad-specs strong { font-size:9px; }

.logo {
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 1.5px;
}

.logo .highlight {
    color: var(--border-glow);
}

.logo .badge {
    font-size: 10px;
    background-color: rgba(58, 160, 255, 0.15);
    color: var(--border-glow);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 600;
}

.header-tag {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-gray);
    letter-spacing: 1px;
    border-left: 2px solid var(--border-glow);
    padding-left: 10px;
}

/* --- PROFILE BUTTON & DROPDOWN --- */
.profile-container {
    position: relative;
}

.profile-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-dim);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.profile-btn:hover {
    border-color: var(--border-glow);
    background: rgba(58, 160, 255, 0.1);
    box-shadow: 0 0 10px rgba(58, 160, 255, 0.2);
}

.profile-dropdown {
    position: absolute;
    top: 52px;
    right: 0;
    background: #14161d;
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    width: 220px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.profile-dropdown button, .profile-dropdown a {
    background: transparent;
    border: none;
    padding: 12px 16px;
    color: var(--text-gray);
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: block;
    width: 100%;
    transition: all 0.2s ease;
}

.profile-dropdown button:hover, .profile-dropdown a:hover {
    background: rgba(58, 160, 255, 0.1);
    color: var(--text-white);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-dim);
    margin: 6px 0;
}

/* --- SPA CARD GENERIC STYLE --- */
.spa-card {
    background-color: var(--card-bg);
    color: var(--card-text);
    border: 2px solid var(--border-glow);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 16px 40px rgba(58, 160, 255, 0.15);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

/* --- HERO SECTION --- */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero {
    text-align: center;
    margin: 60px 0 40px;
}

.hero h1 {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #ffffff 60%, #a4cfff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero .subtitle {
    font-size: 18px;
    color: var(--text-gray);
    font-weight: 400;
}

/* --- WORKSPACE CARD --- */
.workspace-card {
    background-color: var(--card-bg);
    color: var(--card-text);
    border: 2px solid var(--border-glow);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 16px 40px rgba(58, 160, 255, 0.15);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

/* Tabs */
.tab-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e1e8ed;
    padding-bottom: 20px;
}

.tab-btn {
    background: #f4f6f8;
    border: 1px solid #e1e8ed;
    color: #4a5568;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tab-btn:hover {
    background: #e9ecef;
}

.tab-btn.active {
    background: var(--bg-color);
    color: var(--text-white);
    border-color: var(--bg-color);
}

.tab-btn svg {
    stroke: currentColor;
}

/* Panels */
.panel-content {
    display: none;
}

.panel-content.active {
    display: block;
}

/* Option 1: Drag Zone */
.drop-zone-wrapper {
    margin-bottom: 24px;
}

.drop-zone {
    border: 2px dashed #b2c0cc;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    background-color: #f8fafc;
    transition: all 0.2s ease-in-out;
}

.drop-zone:hover {
    border-color: var(--border-glow);
    background-color: rgba(58, 160, 255, 0.05);
}

.drop-zone-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.drop-text-bold {
    font-size: 15px;
    font-weight: 600;
    color: #2d3748;
}

.drop-text-sub {
    font-size: 12px;
    color: #718096;
    margin-top: 4px;
}

.image-preview-tray {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    background-color: #f1f5f9;
    padding: 12px;
    border-radius: 8px;
}

.preview-thumb {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid var(--border-glow);
}

/* Option 2: Link Input */
.link-input-wrapper {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.link-input-wrapper input {
    flex: 1;
}

/* Manual inputs form structures */
.manual-inputs {
    border-top: 1px solid #e1e8ed;
    padding-top: 30px;
    margin-top: 24px;
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.col-12 { width: 100%; }
.col-6 { width: calc(50% - 8px); }
.garage-vehicle-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }.garage-vehicle-fields .form-group { width:auto; min-width:0; }.garage-vehicle-fields input { width:100%; height:48px; box-sizing:border-box; }

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"] {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 15px;
    color: #0f172a;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--border-glow);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(58, 160, 255, 0.15);
}

.input-hint {
    font-size: 12px;
    color: #64748b;
    margin-top: 6px;
}

/* BUTTONS */
.primary-btn {
    width: 100%;
    background-color: #0f1115;
    border: 2px solid var(--border-glow);
    color: var(--text-white);
    font-size: 16px;
    font-weight: 700;
    padding: 18px 24px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 10px;
}

.primary-btn:hover {
    background-color: var(--border-glow);
    color: #0c0e12;
    box-shadow: 0 0 25px rgba(58, 160, 255, 0.4);
}

.action-sub-btn {
    background-color: var(--bg-color);
    border: 1px solid var(--border-glow);
    color: var(--text-white);
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.action-sub-btn:hover {
    background-color: var(--border-glow);
    color: var(--bg-color);
}

/* --- AI STATUS --- */
.ai-status-banner {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(58, 160, 255, 0.25);
    background: rgba(58, 160, 255, 0.1);
    color: #e2f3ff;
}

.ai-status-banner.error {
    border-color: rgba(255, 58, 92, 0.35);
    background: rgba(255, 58, 92, 0.12);
    color: #ffe2e8;
}

.ai-status-banner.success {
    border-color: rgba(48, 209, 88, 0.3);
    background: rgba(48, 209, 88, 0.12);
    color: #e8ffee;
}

/* --- LOADER --- */
.loader-container {
    text-align: center;
    padding: 50px 0;
}

.spinner {
    border: 3px solid rgba(58, 160, 255, 0.15);
    border-top: 3px solid var(--border-glow);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px;
}

.glowing-text {
    color: var(--border-glow);
    text-shadow: 0 0 8px rgba(58, 160, 255, 0.4);
    font-weight: 500;
    margin-top: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- DYNAMIC OUTPUT RESULTS --- */
.results-container {
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.results-header {
    border-bottom: 2px solid var(--border-glow);
    padding-bottom: 14px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.results-header h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.report-id {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--border-glow);
    background-color: rgba(58, 160, 255, 0.12);
    padding: 4px 10px;
    border-radius: 4px;
}

.output-card {
    background-color: var(--card-bg);
    color: var(--card-text);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 24px;
    border: 1px solid rgba(58, 160, 255, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.card-title {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    color: #4a5568;
    margin-bottom: 20px;
    border-left: 3px solid var(--border-glow);
    padding-left: 10px;
}

/* Output Card 1: Fairness Scale */
.fairness-scale-container {
    padding: 10px 0;
}

.scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #718096;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.fairness-gradient-bar {
    height: 16px;
    background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-orange) 50%, var(--accent-green) 100%);
    border-radius: 8px;
    position: relative;
    margin-bottom: 24px;
}

.fairness-pointer {
    position: absolute;
    top: -14px;
    transform: translateX(-50%);
    font-size: 14px;
    color: var(--bg-color);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: left 1s ease-in-out;
}

.fairness-status {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
}

/* Output Card 2: Market Range */
.value-range-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.range-box {
    flex: 1;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.range-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.range-price {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
}

.range-divider {
    width: 20px;
    height: 2px;
    background-color: #cbd5e1;
}

.market-subtext {
    font-size: 12px;
    color: #64748b;
    margin-top: 14px;
    text-align: center;
}

/* Output Card 3: Reliability Score */
.reliability-grid {
    display: flex;
    align-items: center;
    gap: 30px;
}

.score-circle-wrapper {
    flex-shrink: 0;
}

.score-radial {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: #f1f5f9;
}

.reliability-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

#reliability-stroke {
    stroke-dasharray: 282.743;
    stroke-dashoffset: 282.743;
}

.reliability-radial-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-number {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.score-total {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.reliability-text-wrapper h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.reliability-text-wrapper p {
    font-size: 14px;
    color: #475569;
}

/* Output Card 4: Tables */
.table-wrapper {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th, .data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #cbd5e1;
    font-size: 14px;
}

.data-table th {
    font-weight: 700;
    color: #475569;
    background-color: #f8fafc;
}

.data-table td {
    color: #1e293b;
}

/* Output Card 5: Simplified Competitor Comparison Values */
.matrix-description {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
}

.value-comparison-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comparison-metric-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.comparison-metric-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.metric-label-bold {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.metric-value-text {
    font-size: 14px;
    color: #475569;
}

.overall-competitor-verdict {
    background-color: #f1f5f9;
    border-radius: 8px;
    padding: 16px;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    border: 1px solid #cbd5e1;
}

/* Output Card 6: Service Cost */
.service-split {
    display: flex;
    gap: 16px;
}

.service-box {
    flex: 1;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 20px;
}

.service-header {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.service-cost {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.service-details {
    font-size: 12px;
    color: #64748b;
}

/* Output Card 7: Resale Predictor */
.resale-grid {
    display: flex;
    gap: 16px;
}

.resale-card {
    flex: 1;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.resale-year {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.resale-value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.resale-pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--border-glow);
}

/* Output Card 8: Highlight Decision Block */
.highlight-card {
    background-color: #0f1115;
    border: 2px solid var(--border-glow);
    box-shadow: 0 0 30px rgba(58, 160, 255, 0.25);
    color: var(--text-white);
}

.decision-badge {
    display: inline-block;
    font-size: 24px;
    font-weight: 900;
    padding: 10px 24px;
    border-radius: 6px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.decision-badge.buy {
    background-color: var(--accent-green);
    color: #0c0e12;
}

.decision-badge.negotiate {
    background-color: var(--accent-orange);
    color: #0c0e12;
}

.decision-badge.avoid {
    background-color: var(--accent-red);
    color: #0c0e12;
}

.decision-reasoning {
    font-size: 15px;
    line-height: 1.6;
    color: #e2e8f0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-dim);
    padding-bottom: 20px;
}

.inspection-advice h4 {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--border-glow);
    margin-bottom: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.inspection-advice ul {
    list-style-type: none;
}

.inspection-advice li {
    font-size: 14px;
    color: #cbd5e1;
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.inspection-advice li::before {
    content: "⚡";
    position: absolute;
    left: 0;
    color: var(--border-glow);
}

.actions-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

/* --- PARTNERSHIP BUTTONS SECTION --- */
.partners-section {
    display: none !important;
    margin-top: 60px;
    border-top: 1px solid var(--border-dim);
    padding-top: 40px;
}

.partners-title {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--border-glow);
    text-align: center;
    margin-bottom: 8px;
}

.partners-sub {
    font-size: 13px;
    color: var(--text-gray);
    text-align: center;
    margin-bottom: 30px;
}

.partners-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.partner-btn {
    text-decoration: none;
    display: block;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-dim);
    border-left: 4px solid var(--border-glow);
    padding: 20px;
    border-radius: 8px;
    color: var(--text-white);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-btn:hover {
    border-color: var(--border-glow);
    background-color: rgba(58, 160, 255, 0.05);
    box-shadow: 0 4px 20px rgba(58, 160, 255, 0.15);
    transform: translateY(-2px);
}

.partner-main {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.partner-sub-text {
    display: block;
    font-size: 12px;
    color: var(--text-gray);
}

/* Toast alert styling */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: #0f172a;
    border: 1px solid var(--border-glow);
    color: var(--text-white);
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1000;
    transform: translateY(150%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
    transform: translateY(0);
}

/* Keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- FEATURE 1-9: ADDED NEW UI STYLE RULES --- */
.spa-view {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Auth Tabs */
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    border-bottom: 1px solid #e1e8ed;
    padding-bottom: 16px;
}

/* My Garage Grid list */
.saved-cars-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.garage-card {
    background: var(--card-bg);
    color: var(--card-text);
    border: 1px solid rgba(58, 160, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.garage-card:hover {
    border-color: var(--border-glow);
    box-shadow: 0 8px 25px rgba(58, 160, 255, 0.15);
    transform: translateY(-2px);
}

.garage-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.garage-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.garage-card-meta {
    font-size: 13px;
    color: #64748b;
}

/* AutoIntel Pro Page elements */
.pro-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pro-tier-card {
    background: var(--card-bg);
    color: var(--card-text);
    border: 1px solid rgba(58, 160, 255, 0.3);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.pro-tier-card.pro {
    border: 2px solid var(--border-glow);
    box-shadow: 0 12px 35px rgba(58, 160, 255, 0.25);
}

.tier-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background-color: var(--border-glow);
    color: #0c0e12;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
}

.tier-header {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #0f172a;
    border-bottom: 1px solid #e1e8ed;
    padding-bottom: 12px;
}

.tier-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: #334155;
}

.tier-features li::before {
    content: "✓ ";
    color: var(--border-glow);
    font-weight: 800;
}

.membership-status-text {
    font-size: 26px;
    font-weight: 800;
    color: var(--border-glow);
    text-transform: uppercase;
}

/* Upgrade Page Option Selection */
.upgrade-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.upgrade-opt-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.upgrade-opt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(58, 160, 255, 0.2);
}

.upgrade-opt-card.featured {
    border: 2px solid var(--accent-orange);
    box-shadow: 0 12px 35px rgba(255, 159, 10, 0.15);
}

.upgrade-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background-color: var(--accent-orange);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
}

.upgrade-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.upgrade-price {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 8px;
}

.upgrade-inclusion {
    font-size: 12px;
    color: #475569;
    background-color: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
}

/* Checkout Page Methods */
.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.pay-method-label {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}

.pay-method-label:hover {
    border-color: var(--border-glow);
    background-color: #f8fafc;
}

.pay-method-label input {
    accent-color: var(--border-glow);
}

.pay-method-label span {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* Checkout uses a light, high-contrast surface for readable payment details. */
#checkout-view .spa-card { background:#fff; color:#000; }
#checkout-view h2, #checkout-view h4, #checkout-view .checkout-billing-block>span { color:var(--border-glow); }
#checkout-view p, #checkout-view label, #checkout-view span, #checkout-view strong { color:#000; }
#checkout-view p { color:#000 !important; }
#checkout-view .report-id { color:var(--border-glow); }
#checkout-view input, #checkout-view select, #checkout-view textarea { color:#000 !important; background:#fff !important; border-color:#94a3b8 !important; }
#checkout-view input::placeholder { color:#64748b; opacity:1; }
#checkout-view .pay-method-label { background:#fff; border-color:#94a3b8; }
#checkout-view .pay-method-label:hover { background:#eff9ff; }
#checkout-view .pay-method-label span { color:#000; }
#checkout-view .subscription-switch button { color:#000; background:#fff; border-color:#94a3b8; }
#checkout-view .subscription-switch button strong { color:#000; }
#checkout-view .subscription-switch button small { color:var(--border-glow); }
#checkout-view .subscription-switch button.active { color:#000; background:#e6f6ff; border-color:var(--border-glow); }
#checkout-view .checkout-billing-block { background:#f5fbff; border-color:#93d5ff; }
#checkout-view .checkout-terms-acceptance { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; }
#checkout-view .checkout-terms-acceptance input { width:17px; height:17px; margin:0; accent-color:var(--border-glow); cursor:pointer; }
#checkout-view .checkout-terms-acceptance label { margin:0; cursor:pointer; text-transform:none; font-size:13px; font-weight:700; }
#checkout-view .checkout-terms-link { padding:0; border:0; background:transparent; color:var(--border-glow); font:inherit; font-size:13px; font-weight:800; text-decoration:underline; cursor:pointer; }
#checkout-view #checkout-submit-btn:disabled { cursor:not-allowed; opacity:.48; filter:saturate(.55); }
.terms-content { color:#dbeaf2; line-height:1.6; }
.terms-content .eyebrow { color:#83d6ff; font-weight:800; font-size:11px; letter-spacing:.09em; }
.terms-content h2, .terms-content h3 { color:#8dd3ff; }
.terms-content h3 { margin:24px 0 7px; font-size:16px; }
.terms-content p, .terms-content li { color:#dbeaf2 !important; }
.terms-content ul { margin:8px 0 18px; padding-left:20px; }
.terms-content .terms-notice { margin-top:24px; padding:13px; border:1px solid rgba(115,206,255,.5); border-radius:8px; background:rgba(58,160,255,.1); color:#fff !important; font-weight:700; }
.research-sources-list { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:10px; font-size:11px; line-height:1.35; }
.research-sources-list strong { color:var(--border-glow); text-transform:uppercase; letter-spacing:.06em; }
.research-sources-list a { color:#7fd4ff; text-decoration:underline; overflow-wrap:anywhere; }

/* ==================== VERSION 1.3: PREMIUM FEATURES STYLING ==================== */

/* Confidence Meter Styles */
.confidence-card {
    border-left: 4px solid var(--border-glow);
    padding: 18px 24px !important;
    margin-bottom: 24px;
}

.confidence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.confidence-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    color: #475569;
}

.confidence-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--border-glow);
}

.confidence-bar-bg {
    height: 6px;
    background-color: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.confidence-bar-fill {
    height: 100%;
    background-color: var(--border-glow);
    border-radius: 3px;
    transition: width 1.2s ease-out;
}

.confidence-reasoning {
    font-size: 12px;
    color: #64748b;
}

/* Lock & Blur Premium Layer Styles */
.premium-card {
    position: relative;
    overflow: hidden;
}

.premium-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 17, 21, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 12px;
    transition: all 0.3s;
}

.premium-lock-overlay .lock-box {
    text-align: center;
    padding: 24px;
    max-width: 360px;
    background: #14161d;
    border: 2px solid var(--border-glow);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: var(--text-white);
}

.premium-lock-overlay .lock-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 12px;
}

.premium-lock-overlay h3 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text-white);
}

.premium-lock-overlay p {
    font-size: 12px;
    color: var(--text-gray);
    margin-bottom: 16px;
    line-height: 1.5;
}

.premium-content-blur {
    transition: filter 0.3s;
}

/* Applied when FREE / locked */
.premium-card.locked .premium-content-blur {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.premium-card.locked .premium-lock-overlay {
    display: flex !important;
}

.premium-card:not(.locked) .premium-lock-overlay {
    display: none !important;
}

/* Feature 1: Buy Score Radial Path Styles */
.buyscore-layout {
    display: flex;
    align-items: center;
    gap: 32px;
}

.buyscore-circle-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.radial-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.radial-bg {
    fill: none;
    stroke: #f1f5f9;
    stroke-width: 8;
}

.radial-stroke {
    fill: none;
    stroke: var(--border-glow);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 339.29; /* 2 * PI * 54 */
    stroke-dashoffset: 339.29;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.5s;
}

.radial-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-num {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.score-denom {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
}

.factors-grid-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    font-size: 13px;
}

.factor-item-p {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
}

.factor-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.factor-bullet.green { background-color: var(--accent-green); }
.factor-bullet.red { background-color: var(--accent-red); }
.factor-bullet.yellow { background-color: var(--accent-orange); }

/* Feature 2: Ownership Cost Styles */
.ownership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cost-card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #475569;
}

.cost-card-item strong {
    color: #0f172a;
    font-weight: 700;
}

.cost-card-item.highlight-cost {
    border: 2px solid var(--border-glow);
    background-color: rgba(58, 160, 255, 0.05);
}

.cost-card-item.highlight-cost strong {
    color: var(--border-glow);
    font-size: 16px;
}

.cost-card-item.highlight-cost-yr {
    border: 2px solid var(--accent-green);
    background-color: rgba(48, 209, 88, 0.05);
}

.cost-card-item.highlight-cost-yr strong {
    color: var(--border-glow);
    font-size: 16px;
}

/* Feature 3: Negotiation Section Styles */
.negotiation-layout {
    display: flex;
    gap: 24px;
}

.nego-targets {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nego-target-item {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.nego-target-item span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}

.nego-target-item h4 {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.nego-strategy-block {
    flex: 1;
}

.nego-strategy-block h4 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1e293b;
    margin-bottom: 8px;
}

/* Feature 4: Better Alternatives Styles */
.alternatives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.alternative-card {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alt-photo-ph {
    height: 80px;
    background-color: #e2e8f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 24px;
}

.alt-name-bold {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.alt-spec {
    font-size: 12px;
    color: #475569;
}

.alt-reason {
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(58, 160, 255, 0.08);
    color: var(--border-glow);
    padding: 6px;
    border-radius: 4px;
    margin-top: 4px;
    line-height: 1.4;
}

/* Feature 5: Inspection Checklist Styles */
.checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.checklist-sub {
    font-size: 13px;
    color: #64748b;
}

.progress-container {
    text-align: right;
    width: 200px;
}

#checklist-progress-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--border-glow);
    display: block;
    margin-bottom: 6px;
}

.checklist-progress-bg {
    height: 6px;
    background-color: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.checklist-progress-fill {
    height: 100%;
    background-color: var(--border-glow);
    border-radius: 3px;
    transition: width 0.3s;
}

.checklist-items-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.chk-item-lbl {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    border-radius: 6px;
    transition: all 0.2s;
}

.chk-item-lbl:hover {
    border-color: var(--border-glow);
    background-color: rgba(58, 160, 255, 0.02);
}

.chk-item-lbl input[type="checkbox"] {
    accent-color: var(--border-glow);
    width: 16px;
    height: 16px;
}

/* Comparison Panels and Layouts */
.compare-col {
    flex: 1;
    min-width: 250px;
    background: #fff;
    border: 1px solid rgba(58,160,255,0.3);
    border-radius: 8px;
    padding: 16px;
    color: #161920;
}

.compare-header-row {
    font-weight: 800;
    border-bottom: 2px solid var(--border-glow);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 15px;
}

.compare-metric-item {
    margin-bottom: 10px;
    font-size: 12px;
}

.compare-metric-item label {
    display: block;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    font-size: 10px;
}

.compare-metric-item span {
    color: #0f172a;
    font-weight: 600;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .header-right {
        flex-direction: column;
        gap: 10px;
    }
    .primary-nav { display: none; }
    .dashboard-actions, .dashboard-status-grid { grid-template-columns: 1fr; }
    .dashboard-ask { align-items:flex-start; flex-direction:column; gap:8px; }.dashboard-ask small { margin-left:0; max-width:none; }
    .dashboard-action { min-height: 130px; }
    .dashboard-action-icon { margin-bottom: 14px; }
    .alert-form { flex-direction: column; }
    .member-app-callout { flex-direction:column; align-items:flex-start; }
    .scanner-demo-grid, .business-actions, .garage-tools-grid { grid-template-columns: 1fr; }
    .membership-plan-grid { grid-template-columns:1fr; }
    .membership-selection-grid { grid-template-columns:1fr; }
    .business-head { flex-direction: column; }
    .business-row { flex-wrap: wrap; }
    .intro-car { width:82vw; }
    .hero h1 {
        font-size: 32px;
    }
    .hero .subtitle {
        font-size: 15px;
    }
    .workspace-card, .spa-card {
        padding: 24px;
    }
    .tab-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .form-row {
        flex-direction: column;
        gap: 16px;
    }
    .col-6 {
        width: 100%;
    }
    .value-range-wrapper {
        flex-direction: column;
        gap: 12px;
    }
    .range-divider {
        display: none;
    }
    .reliability-grid {
        flex-direction: column;
        text-align: center;
    }
    .service-split {
        flex-direction: column;
        gap: 12px;
    }
    .resale-grid {
        flex-direction: column;
        gap: 12px;
    }
    .link-input-wrapper {
        flex-direction: column;
    }
    .comparison-metric-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .pro-comparison-grid, .upgrade-options-grid, .payment-method-grid {
        grid-template-columns: 1fr;
    }
    .buyscore-layout {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    .factors-grid-list {
        grid-template-columns: 1fr;
    }
    .ownership-grid, .negotiation-layout, .checklist-items-grid, .alternatives-grid {
        grid-template-columns: 1fr;
    }
    .nego-targets {
        width: 100%;
    }
}

/* ==================== CENTERED PROFILE MODAL LAYOUT ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 17, 21, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

.modal-content {
    background: #ffffff;
    color: #161920;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(58, 160, 255, 0.25);
    border: 2px solid var(--border-glow);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close-btn:hover {
    color: #0f172a;
}

.modal-tabs {
    display: flex;
    border-bottom: 1px solid #cbd5e1;
    margin-bottom: 24px;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
}

.modal-tabs::-webkit-scrollbar {
    display: none;
}

.modal-tab-btn {
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all 0.2s;
}

.modal-tab-btn:hover {
    color: #334155;
}

.modal-tab-btn.active {
    color: var(--border-glow);
    border-bottom-color: var(--border-glow);
}

.modal-tab-panel {
    display: none;
}

.modal-tab-panel.active {
    display: block;
    animation: modalFadeIn 0.3s ease-out forwards;
}

.text-link-btn {
    background: none;
    border: none;
    color: var(--border-glow);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    transition: color 0.2s;
}

.text-link-btn:hover {
    text-decoration: underline;
    color: #2b7ccc;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.profile-detail-card {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 12px;
    border-radius: 8px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-detail-card span {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.profile-detail-card strong {
    font-size: 14px;
    color: #0f172a;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.alt-photo-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.alternatives-heading {
    margin: 24px 0 14px;
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
}

/* ==================== DEALERSHIP ANALYSIS ==================== */
.dealer-analysis-shell { max-width: 1180px; margin: 0 auto; }
.dealer-analysis-hero { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:30px; margin-bottom:20px; border:1px solid rgba(73,178,255,.45); border-radius:18px; background:linear-gradient(135deg,rgba(18,50,72,.94),rgba(8,20,32,.96)); box-shadow:0 16px 42px rgba(0,0,0,.2); }
.dealer-analysis-hero h1 { margin:6px 0; font-size:clamp(25px,4vw,42px); color:#f2f8fc; }
.dealer-analysis-hero p { margin:0; color:#c7d9e5; }
.dealer-score { min-width:145px; text-align:center; border:2px solid #48b7ff; border-radius:50%; width:145px; height:145px; display:grid; place-content:center; background:rgba(6,20,31,.65); }
.dealer-score strong { font-size:42px; color:#66c7ff; line-height:1; }.dealer-score span { color:#d9e8f2; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.dealer-analysis-note { margin:0 0 22px; padding:12px 15px; border-left:3px solid #55bfff; border-radius:8px; color:#d1e2ec; background:rgba(57,142,205,.12); }
.dealer-analysis-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.dealer-analysis-card { min-height:160px; padding:20px; border:1px solid rgba(101,163,196,.35); border-radius:14px; background:#102331; color:#edf7fc; }
.dealer-analysis-card.wide { grid-column:span 2; }.dealer-analysis-card h3 { margin:0 0 11px; color:#8dd3ff; font-size:15px; text-transform:uppercase; letter-spacing:.055em; }.dealer-analysis-card .dealer-value { display:block; font-size:23px; font-weight:800; color:#fff; margin-bottom:7px; }.dealer-analysis-card p { margin:0; line-height:1.55; color:#cadbe5; }.dealer-analysis-card ul { margin:8px 0 0; padding-left:18px; color:#d4e5ee; line-height:1.55; }
.dealer-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.dealer-metrics div { padding:9px; background:rgba(255,255,255,.045); border-radius:8px; }.dealer-metrics span { display:block; color:#a9c2d1; font-size:11px; text-transform:uppercase; }.dealer-metrics strong { color:#f4fbff; font-size:15px; }
.dealer-analysis-actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }

/* Consumer analysis keeps its existing layout, with the same blue-and-white report theme as dealership analysis. */
#analysis-results { color:#edf7fc; }
#analysis-results .results-header h2 { color:#f2f8fc; }
#analysis-results .output-card { background:#102331; color:#edf7fc; border-color:rgba(101,163,196,.35); box-shadow:0 12px 28px rgba(0,0,0,.18); }
#analysis-results .card-title, #analysis-results .confidence-label, #analysis-results .alternatives-heading, #analysis-results .inspection-advice h4 { color:#8dd3ff; }
#analysis-results .confidence-reasoning, #analysis-results .matrix-description, #analysis-results .market-subtext, #analysis-results .reliability-text-wrapper p, #analysis-results .service-details, #analysis-results .checklist-sub, #analysis-results .metric-value-text, #analysis-results .factor-item-p { color:#cadbe5; }
#analysis-results .scale-labels, #analysis-results .range-label, #analysis-results .score-total, #analysis-results .service-header, #analysis-results .resale-year, #analysis-results .nego-target-item span { color:#a9c2d1; }
#analysis-results .fairness-status, #analysis-results .range-price, #analysis-results .score-number, #analysis-results .score-num, #analysis-results .reliability-text-wrapper h4, #analysis-results .service-cost, #analysis-results .resale-value, #analysis-results .alt-name-bold, #analysis-results .nego-target-item h4, #analysis-results .nego-strategy-block h4 { color:#f4fbff; }
#analysis-results .cost-card-item strong, #analysis-results .cost-card-item.highlight-cost strong, #analysis-results .cost-card-item.highlight-cost-yr strong { color:#48b7ff; }
#analysis-results .radial-stroke { stroke:#48b7ff; }
#analysis-results .range-box, #analysis-results .score-radial, #analysis-results .service-box, #analysis-results .resale-card, #analysis-results .cost-card-item, #analysis-results .nego-target-item, #analysis-results .alternative-card, #analysis-results .chk-item-lbl, #analysis-results .overall-competitor-verdict { background:#152d3e; border-color:rgba(101,163,196,.35); color:#edf7fc; }
#analysis-results .data-table th { background:#152d3e; color:#8dd3ff; border-color:rgba(101,163,196,.35); }
#analysis-results .data-table td { color:#edf7fc; border-color:rgba(101,163,196,.28); }
#analysis-results .comparison-metric-row, #analysis-results .checklist-header { border-color:rgba(101,163,196,.28); }
#analysis-results .metric-label-bold, #analysis-results .alt-spec, #analysis-results .chk-item-lbl { color:#d4e5ee; }
#analysis-results .alt-photo-ph { background:#0b1d29; color:#8dd3ff; }
#analysis-results .alt-reason { background:rgba(57,142,205,.16); color:#8dd3ff; }
#analysis-results .confidence-bar-bg, #analysis-results .checklist-progress-bg { background:#0b1d29; }
#analysis-results .radial-bg { stroke:#0b1d29; }
#analysis-results .fairness-pointer { color:#edf7fc; }
@media (max-width: 850px) { .dealer-analysis-grid { grid-template-columns:1fr; }.dealer-analysis-card.wide { grid-column:auto; }.dealer-analysis-hero { align-items:flex-start; flex-direction:column; }.dealer-score { width:125px; height:125px; min-width:125px; } }
@media (max-width: 650px) { .deal-alert-form { grid-template-columns:1fr; } }
@media (max-width: 768px) { .garage-vehicle-fields { grid-template-columns:1fr; } }

/* ==================== AI STOCK MANAGER (BUSINESS ONLY) ==================== */
.stock-manager { margin:0 0 18px; padding:20px; border-color:rgba(73,178,255,.5); background:linear-gradient(135deg,rgba(18,50,72,.94),rgba(10,27,40,.96)); }
.stock-manager-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:13px; }
.stock-manager-head h2 { margin:4px 0; font-size:20px; }.stock-manager-head p { margin:0; color:#c7d9e5; font-size:13px; }
.stock-manager-badge { padding:5px 8px; border:1px solid var(--border-glow); border-radius:999px; color:#93d5ff; font-size:10px; font-weight:800; text-transform:uppercase; white-space:nowrap; }
.stock-manager-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.stock-manager-grid article { padding:11px; background:rgba(255,255,255,.045); border:1px solid rgba(119,184,220,.26); border-radius:10px; }
.stock-manager-grid strong { color:#8dd3ff; text-transform:uppercase; font-size:11px; letter-spacing:.06em; }
.stock-manager-grid p { margin:6px 0 0; color:#e4f0f6; line-height:1.4; font-size:12px; }
.stock-manager-grid .stock-manager-capital { grid-column:span 2; border-color:rgba(255,184,91,.48); }.stock-manager-grid .stock-manager-capital strong { color:#ffd083; }
@media (max-width:850px) { .stock-manager-head { flex-direction:column; }.stock-manager-grid { grid-template-columns:1fr; }.stock-manager-grid .stock-manager-capital { grid-column:auto; } }

/* High-contrast, single-colour response fields for dealership workflow dialogs. */
.workflow-dialog .form-group label { color:#c9e7f6 !important; letter-spacing:.04em; }
.workflow-dialog input:not([type="file"]), .workflow-dialog select, .workflow-dialog textarea { background:#172f40 !important; color:#edf8ff !important; border:1px solid #6ba2c2 !important; }
.workflow-dialog input[type="file"] { background:#172f40 !important; color:#edf8ff !important; border:1px solid #6ba2c2 !important; padding:5px !important; }
.workflow-dialog input[type="file"]::file-selector-button { background:#315d78; color:#f3fbff; border:0; border-radius:4px; padding:5px 10px; margin-right:9px; }
.workflow-dialog input::placeholder, .workflow-dialog textarea::placeholder { color:#b9d1e0 !important; opacity:1; }
.workflow-dialog input:focus, .workflow-dialog select:focus, .workflow-dialog textarea:focus { outline:none; border-color:#81d0ff !important; box-shadow:0 0 0 2px rgba(91,190,245,.18); }
.demand-mode-switch { display:inline-flex; border:1px solid #6ba2c2; border-radius:8px; overflow:hidden; background:#172f40; }
.demand-mode-switch button { background:#172f40; color:#c9e7f6; border:0; padding:8px 14px; font-weight:800; cursor:pointer; }
.demand-mode-switch button + button { border-left:1px solid #6ba2c2; }.demand-mode-switch button.active { background:#315d78; color:#fff; }
.service-reminder-result { margin-top:18px; padding:16px; border:1px solid rgba(91,190,245,.45); border-radius:10px; background:rgba(58,160,255,.08); }.service-reminder-result h3 { margin:0 0 8px; color:#8dd3ff; font-size:15px; }.service-reminder-result p { margin:7px 0 !important; color:#e4f0f6 !important; }.service-reminder-result strong { color:#fff; }.monthly-mileage-note { margin:0 0 16px !important; padding:10px 12px; border-left:3px solid #55bfff; border-radius:6px; background:rgba(57,142,205,.12); color:#d1e2ec !important; font-size:12px; line-height:1.45; }
.finance-balance-display { margin-top:8px; padding:24px; text-align:center; border:1px solid rgba(91,190,245,.45); border-radius:12px; background:linear-gradient(135deg,rgba(18,50,72,.9),rgba(10,27,40,.96)); }.finance-balance-display span { display:block; color:#a9c2d1; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }.finance-balance-display strong { display:block; margin:8px 0; color:#fff; font-size:34px; }.finance-balance-display p { margin:10px 0 0 !important; color:#d1e2ec !important; font-size:12px; line-height:1.45; }
.demand-auto-note { margin:8px 0 0 !important; color:#b9ddec !important; font-size:12px; line-height:1.4; }
.workflow-dialog #business-demand-manual { margin-top:10px; }
.workflow-dialog .workflow-two-col { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; align-items:start; width:100%; }
.workflow-dialog .workflow-two-col .col-6 { width:auto !important; min-width:0; max-width:none; }.workflow-dialog .workflow-two-col .form-group { margin-bottom:13px; }
.workflow-dialog .workflow-two-col .condition-field { padding-right:20px; }.workflow-dialog .workflow-two-col #business-condition { width:calc(100% - 20px) !important; max-width:100%; box-sizing:border-box; }
.demand-manual-options { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }.demand-manual-options button { background:#172f40; color:#c9e7f6; border:1px solid #6ba2c2; border-radius:6px; padding:7px 10px; font-size:12px; font-weight:800; cursor:pointer; }.demand-manual-options button.active { background:#315d78; color:#fff; border-color:#81d0ff; }
@media (max-width:600px) { .workflow-dialog .workflow-two-col { grid-template-columns:1fr; gap:0; } }

/* Extra sourcing inputs shown only while a Business member is analysing a car. */
.dealership-analysis-fields { margin-top:18px; padding:18px; border:1px solid rgba(58,160,255,.38); border-radius:10px; background:rgba(58,160,255,.045); }
.dealership-analysis-fields textarea { width:100%; min-height:82px; resize:vertical; }

/* Three current membership options. */
.pro-comparison-grid.membership-selection-grid,
.upgrade-options-grid.membership-selection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px) { .pro-comparison-grid.membership-selection-grid,
    .upgrade-options-grid.membership-selection-grid { grid-template-columns:1fr; } }
.membership-status-compact { display:inline-flex; flex-direction:column; gap:5px; margin:24px 0 0; padding:12px 16px; min-width:190px; border:1px solid var(--border-dim); border-radius:10px; background:rgba(58,160,255,.08); }
.membership-status-compact span { color:var(--text-gray); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.membership-status-compact strong { color:var(--border-glow); font-size:15px; }

/* Keep the Scanner Bundle value marker fully inside the card so it cannot be clipped. */
.scanner-bundle-plan { padding-top:54px; }
.scanner-bundle-plan .tier-badge { top:14px; right:18px; z-index:2; padding:7px 13px; background:#ff9f0a; color:#111827; border:1px solid #c96d00; border-radius:999px; box-shadow:0 3px 10px rgba(201,109,0,.28); font-size:11px; line-height:1; letter-spacing:.04em; white-space:nowrap; }

/* The Upgrade page uses a spa-card, which normally hides overflow. Let the
   Best Value marker sit clearly above its Scanner Bundle card instead. */
.upgrade-options-grid.membership-selection-grid { padding-top:22px; }
.upgrade-options-grid .upgrade-opt-card.featured { overflow:visible; }
.upgrade-options-grid .upgrade-opt-card.featured .upgrade-badge { top:-18px; right:18px; z-index:5; padding:7px 14px; background:#ff9f0a; color:#111827; border:1px solid #c96d00; border-radius:999px; box-shadow:0 3px 10px rgba(201,109,0,.32); font-size:11px; line-height:1; letter-spacing:.04em; white-space:nowrap; }