/* Customer guide: the familiar Deal Cars workspace, presented one step at a time. */
.tour-invitation { width:100%; display:flex; align-items:center; gap:13px; text-align:start; margin-top:18px; padding:15px; border:1px solid color-mix(in srgb,var(--brand) 38%,var(--line)); border-radius:14px; color:var(--ink); background:linear-gradient(120deg,var(--brand-soft),var(--surface)); cursor:pointer; transition:transform .25s,box-shadow .25s,border-color .25s; }
.tour-invitation > span:nth-child(2) { flex:1; min-width:0; }
.tour-invitation strong { display:block; font-size:16px; line-height:1.4; }
.tour-invitation small { display:block; font-size:13px; line-height:1.5; margin-top:3px; color:var(--muted); }
.tour-invitation-icon { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:12px; background:var(--brand); color:#fff; box-shadow:0 5px 18px #ef142628; }
.tour-invitation > .icon { color:var(--brand); }
.tour-replay { margin-bottom:22px; }
#dealCarsTour { width:min(1060px,calc(100vw - 40px)); height:min(790px,calc(100dvh - 40px)); overflow:hidden; border-radius:24px; padding:0; color:var(--ink); background:var(--surface); box-shadow:0 30px 120px #0008; }
#dealCarsTour::backdrop { background:#090a10c9; backdrop-filter:blur(12px); }
.tour-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; overflow:hidden; background:var(--surface); }
.tour-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:19px 24px; border-bottom:1px solid var(--line); }
.tour-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.tour-brand img { object-fit:contain; border-radius:12px; }
.tour-brand strong { display:block; font-size:16px; }
.tour-brand span { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.tour-header-actions { display:flex; align-items:center; gap:10px; }
.tour-header-actions .select { min-height:44px; max-width:135px; font-size:14px; padding-block:8px; }
.tour-body { min-height:0; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; }
.tour-slide { min-height:100%; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.tour-story { padding:32px 34px; align-self:center; min-width:0; }
.tour-chapter { display:flex; align-items:center; gap:10px; color:var(--brand-strong); font-size:13px; font-weight:700; letter-spacing:.04em; }
html[data-theme="dark"] .tour-chapter { color:var(--brand); }
.tour-chapter > span { display:grid; place-items:center; width:28px; height:28px; background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 25%,transparent); border-radius:8px; font-variant-numeric:tabular-nums; }
.tour-story h2 { font-size:clamp(28px,3vw,42px); line-height:1.1; letter-spacing:-.035em; margin:17px 0; font-weight:760; text-wrap:balance; outline:none; }
.tour-story h2 > span { display:inline-block; animation:tour-word-in .52s var(--interaction-ease) both; animation-delay:calc(var(--word-index) * 30ms); }
.tour-description { font-size:16px; line-height:1.65; color:var(--muted); margin:0 0 22px; }
.tour-steps { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.tour-steps li { display:flex; gap:11px; align-items:flex-start; }
.tour-steps li > span { display:grid; place-items:center; width:23px; height:23px; flex:0 0 23px; border:1px solid var(--line); border-radius:50%; font-size:12px; font-weight:700; color:var(--muted); margin-top:2px; }
.tour-steps p { margin:0; font-size:14px; line-height:1.6; }
.tour-note { display:flex; gap:9px; margin:20px 0 0; padding:12px 13px; border-radius:10px; background:var(--soft); color:var(--muted); font-size:13px; line-height:1.6; }
.tour-note .icon { width:16px; height:16px; margin-top:3px; }
.tour-website { margin-top:16px; font-size:14px; }
.tour-footer { padding:10px 24px 20px; border-top:1px solid var(--line); background:var(--surface); }
.tour-progress-row { display:flex; align-items:center; gap:14px; }
#tourStepCount { flex:0 0 auto; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.tour-progress { display:flex; align-items:center; gap:3px; flex:1; max-width:260px; margin-inline:auto; }
.tour-progress button { display:grid; align-items:center; flex:1; min-width:0; height:44px; padding:0 2px; background:none; border:0; cursor:pointer; }
.tour-progress button span { display:block; height:4px; width:100%; border-radius:8px; background:var(--line); transition:background .25s,height .25s; }
.tour-progress button[aria-current="step"] span { background:var(--brand); height:6px; }
.tour-progress-row > .btn { min-height:44px; padding-inline:8px; font-size:13px; }
.tour-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.tour-controls .btn { min-height:48px; padding-inline:22px; font-size:15px; }
.tour-controls .btn-primary { min-width:145px; }
.tour-illustration { display:grid; grid-template-rows:minmax(0,1fr) auto; align-items:center; margin:0; padding:32px; min-width:0; overflow:hidden; position:relative; isolation:isolate; background:radial-gradient(ellipse at 18% 22%,#68202c 0,transparent 65%),linear-gradient(150deg,#19181f,#090b10); color:#f5f5f7; }
.tour-illustration::before { content:''; width:340px; height:340px; position:absolute; inset:auto auto -180px -90px; border:1px solid #ffffff16; border-radius:50%; z-index:-1; box-shadow:0 0 0 54px #ffffff03,0 0 0 108px #ffffff02; }
.tour-illustration-content { width:100%; position:relative; padding-block:18px; }
.tour-illustration figcaption { color:#b4afb9; font-size:12px; line-height:1.4; text-align:center; margin-top:22px; }
.tour-demo-brand { display:grid; place-items:center; gap:13px; margin-bottom:24px; }
.tour-demo-brand img, .tour-demo-payment > img, .tour-demo-help > img { width:88px; height:88px; object-fit:contain; border-radius:24px; box-shadow:0 14px 50px #0005; animation:tour-drift 5s ease-in-out infinite; }
.tour-demo-brand > strong { font-size:24px; letter-spacing:-.04em; }
.tour-demo-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tour-demo-tile { display:flex; flex-direction:column; gap:10px; border:1px solid #ffffff16; background:#ffffff09; border-radius:15px; padding:16px; font-size:13px; animation:tour-drift 6s ease-in-out infinite; }
.tour-demo-tile:nth-child(even) { animation-delay:-3s; }
.tour-demo-tile .icon { color:#ff7786; width:24px; height:24px; }
.tour-demo-window { border:1px solid #ffffff20; border-radius:20px; background:#191a22f2; box-shadow:0 24px 60px #0005; overflow:hidden; transform:rotate(-2deg); animation:tour-window-in .6s var(--interaction-ease) both; }
.tour-demo-window-head { display:flex; align-items:center; gap:8px; font-size:13px; padding:14px 17px; border-bottom:1px solid #ffffff12; }
.tour-demo-window-head > span:last-child { margin-inline-start:auto; color:#ff8c9b; }
.tour-demo-dot { width:7px; height:7px; border-radius:50%; background:#ef1426; }
.tour-demo-languages { display:flex; flex-wrap:wrap; gap:8px; padding:24px 18px 16px; font-size:12px; color:#ccc; }
.tour-demo-languages > span { padding:7px; border:1px solid #ffffff1c; border-radius:7px; }
.tour-demo-languages > span.is-selected { color:#fff; border-color:#ed3346; background:#ed334622; }
.tour-demo-code { display:flex; gap:13px; align-items:center; margin:0 18px 16px; border:1px solid #ffffff2a; border-radius:10px; padding:16px; font-size:18px; }
.tour-demo-code .icon { color:#a9a5b5; }
.tour-demo-code > b { margin-inline-start:auto; color:#ff7786; }
.tour-demo-cta { display:flex; align-items:center; justify-content:center; gap:14px; margin:0 18px 24px; padding:14px; border-radius:10px; background:#ef1426; color:#fff; font-size:14px; font-weight:700; box-shadow:0 8px 24px #ed334640; }
.tour-demo-line { height:7px; border-radius:8px; background:#ffffff17; margin:14px 18px; }
.tour-demo-line.short { width:48%; }
.tour-demo-search { display:flex; gap:10px; align-items:center; margin:18px; padding:14px; border:1px solid #ef14268c; border-radius:10px; background:#ffffff05; font-size:14px; }
.tour-demo-cursor { height:18px; width:2px; background:#ff7786; animation:tour-cursor 1.4s ease-in-out infinite; }
.tour-demo-row { display:flex; align-items:center; gap:12px; margin:10px 15px; padding:13px 0; border-bottom:1px solid #ffffff10; font-size:13px; line-height:1.5; }
.tour-demo-row > .icon { color:#ff8996; flex-shrink:0; }
.tour-demo-row > span { flex:1; }
.tour-demo-row > b { font-size:12px; font-weight:500; opacity:.5; }
.tour-demo-tabs { display:flex; gap:10px; padding:14px; font-size:12px; }
.tour-demo-tabs > span:first-child { color:#ff8c9b; }
.tour-demo-document { display:grid; grid-template-columns:1.5fr 1fr; gap:10px; padding:0 16px; }
.tour-demo-vehicle { display:grid; place-items:center; min-height:132px; border:1px solid #ffffff1a; border-radius:14px; background:linear-gradient(130deg,#ffffff10,transparent); }
.tour-demo-vehicle .icon { width:70px; height:70px; stroke-width:1; color:#ddd7e2; }
.tour-demo-photo-grid { display:grid; gap:8px; }
.tour-demo-photo-grid > span { display:grid; place-items:center; border:1px solid #ffffff18; background:#ffffff05; border-radius:9px; color:#baabb8; }
.tour-demo-route { display:flex; align-items:center; padding:20px 30px; gap:9px; }
.tour-demo-route > i { flex:1; height:1px; background:#ff77864a; }
.tour-demo-route > span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid #ff77864a; color:#ff8c9b; }
.tour-demo-finance { padding:20px; }
.tour-demo-finance > div:first-child { display:flex; align-items:center; gap:12px; font-size:17px; }
.tour-demo-meter { height:9px; overflow:hidden; background:#ffffff16; border-radius:8px; margin-top:20px; }
.tour-demo-meter > span { display:block; width:65%; height:100%; border-radius:8px; background:linear-gradient(90deg,#ee1426,#ff8a98); animation:tour-meter-in .8s var(--interaction-ease) both; }
.tour-demo-market { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.tour-demo-listing { padding:20px 14px; border:1px solid #ffffff24; border-radius:15px; background:#22212b; box-shadow:0 15px 30px #0004; animation:tour-drift 6s ease-in-out infinite; }
.tour-demo-listing:nth-child(2) { margin-top:35px; animation-delay:-2s; }
.tour-demo-listing:nth-child(3) { display:none; }
.tour-demo-listing > .icon { display:block; width:66px; height:66px; stroke-width:1; margin:0 auto 20px; color:#f0d8dc; }
.tour-demo-listing .tour-demo-line { margin-inline:0; }
.tour-demo-listing > strong { display:block; font-size:13px; }
.tour-demo-listing > span { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#ef1426; margin-top:16px; }
.tour-demo-floating-tag { display:flex; gap:8px; align-items:center; position:relative; width:max-content; max-width:100%; margin:24px auto 0; padding:12px 16px; border:1px solid #ff778642; border-radius:30px; background:#431923; font-size:13px; animation:tour-drift 4.5s ease-in-out infinite; }
.tour-demo-report { padding-top:22px; }
.tour-demo-report > span { display:grid; place-items:center; width:62px; height:62px; border-radius:18px; background:#ef142622; color:#ff8996; margin:0 auto 12px; }
.tour-demo-report > span .icon { width:32px; height:32px; }
.tour-demo-report > strong { display:block; text-align:center; font-size:21px; margin-bottom:22px; }
.tour-demo-payment, .tour-demo-help { padding:0 8px; text-align:center; }
.tour-demo-payment > img, .tour-demo-help > img { margin:0 auto 20px; }
.tour-demo-payment .tour-demo-row, .tour-demo-help .tour-demo-row { border:1px solid #ffffff20; border-radius:14px; background:#ffffff09; margin:10px 0; padding:15px; text-align:start; }
.tour-demo-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tour-demo-plans > div { display:flex; flex-direction:column; align-items:flex-start; gap:16px; border:1px solid #ffffff26; border-radius:18px; background:#ffffff08; padding:20px 16px; }
.tour-demo-plans > div:last-child { border-color:#ff778685; background:linear-gradient(145deg,#ef142630,#ffffff05); transform:translateY(-12px); }
.tour-demo-plans strong { font-size:60px; line-height:1; font-weight:500; }
.tour-demo-plans span { font-size:13px; line-height:1.55; }
.tour-demo-plans .icon { color:#ff8996; }
@keyframes tour-word-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes tour-window-in { from { opacity:0; transform:translateY(24px) rotate(-4deg) scale(.96); } to { opacity:1; transform:rotate(-2deg); } }
@keyframes tour-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes tour-cursor { 0%,100% { opacity:.1; } 50% { opacity:1; } }
@keyframes tour-meter-in { from { transform:scaleX(0); transform-origin:left; } to { transform:scaleX(1); transform-origin:left; } }

/* Loading follows actual requests. The surrounding navigation stays reachable. */
.page-loading { position:fixed; z-index:60; top:var(--page-loader-top,110px); inset-inline-start:var(--sidebar); inset-inline-end:0; bottom:0; display:grid; place-items:center; padding:28px; overflow:auto; background:color-mix(in srgb,var(--canvas) 96%,transparent); backdrop-filter:blur(8px); animation:interface-backdrop .18s ease-out; }
.page-loading-card { width:min(420px,100%); display:grid; justify-items:center; gap:16px; text-align:center; padding:30px 24px; }
#mainContent[data-page-loading] > * { visibility:hidden; }
.page-loading-mark { width:104px; height:104px; position:relative; display:grid; place-items:center; }
.page-loading-mark::before { content:''; position:absolute; inset:-9px; border:1px solid color-mix(in srgb,var(--brand) 18%,transparent); border-top:2px solid var(--brand); border-radius:32px; animation:logo-orbit 2s linear infinite; }
.page-loading-mark img { display:block; width:100%; height:100%; object-fit:contain; border-radius:26px; box-shadow:0 15px 40px #0002; animation:tour-drift 4s ease-in-out infinite; }
.page-loading-card h2 { margin:10px 0 0; font-size:22px; line-height:1.3; }
.page-loading-card > p { margin:0; color:var(--muted); line-height:1.5; font-size:14px; }
.page-loading-tip { width:100%; margin-top:8px; padding:17px 19px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.page-loading-tip small { display:block; color:var(--brand-strong); margin-bottom:8px; font-size:12px; font-weight:700; }
html[data-theme="dark"] .page-loading-tip small { color:var(--brand); }
.page-loading-tip p { font-size:14px; line-height:1.65; color:var(--muted); margin:0; }
.page-loading-slow { display:grid; gap:12px; font-size:13px; color:var(--muted); }
.page-loading-slow .btn { min-height:44px; justify-self:center; }
.route-launch { position:fixed; z-index:180; border:1px solid color-mix(in srgb,var(--brand) 65%,transparent); border-radius:14px; background:var(--brand-soft); pointer-events:none; box-shadow:0 0 35px color-mix(in srgb,var(--brand) 18%,transparent); }
.button-loading-logo { display:inline-block; width:23px; height:23px; object-fit:contain; border-radius:6px; animation:logo-breathe 1.4s ease-in-out infinite; }
.btn.is-working { scale:1.025; box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent); }
.busy-card > .spinner { width:44px; height:44px; border:0; border-radius:12px; background:url('/deal-cars-logo.png') center/contain no-repeat; animation:logo-breathe 1.4s ease-in-out infinite; }
.modal:has(.detail-loading) { position:relative; }
.detail-loading { position:absolute; inset:var(--detail-loader-top,80px) 0 0; z-index:6; display:grid; place-items:center; overflow:auto; background:var(--surface); }
.detail-loading .page-loading-mark { width:80px; height:80px; }
.detail-loading .page-loading-card { gap:12px; }
[data-interface-reveal] { transition:opacity .42s var(--interaction-ease); }
[data-interface-reveal="outside"] { opacity:0; }
[data-interface-reveal="inside"], [data-interface-reveal]:focus-within { opacity:1; }
html[data-motion="REDUCED"] [data-interface-reveal] { opacity:1 !important; }
@keyframes logo-orbit { to { rotate:360deg; } }
@keyframes logo-breathe { 0%,100% { opacity:.6; scale:.94; } 50% { opacity:1; scale:1.04; } }
@media (hover:hover) and (pointer:fine) {
  .tour-invitation:hover { transform:translateY(-3px); border-color:var(--brand); box-shadow:0 10px 30px color-mix(in srgb,var(--brand) 12%,transparent); }
  .tour-progress button:hover span { background:var(--brand); height:6px; }
  .tour-demo-window:hover { box-shadow:0 28px 65px #0007; }
  .page-head h2 { transition:text-shadow .3s; }
  .page-head h2:hover { text-shadow:0 4px 24px color-mix(in srgb,var(--brand) 25%,transparent); }
}
@media (max-width:900px) {
  .page-loading { inset-inline-start:0; }
  .tour-story { padding:26px; }
  .tour-illustration { padding:24px; }
}
@media (max-width:680px) {
  #dealCarsTour { inset:0; width:100dvw; height:100dvh; max-height:none; margin:0; border-radius:0; }
  .tour-header { padding:max(12px,env(safe-area-inset-top)) 14px 12px; gap:8px; }
  .tour-brand { gap:9px; }
  .tour-brand img { width:34px; height:34px; }
  .tour-brand strong { font-size:15px; }
  .tour-brand span { font-size:12px; max-width:145px; }
  .tour-header-actions { gap:5px; }
  .tour-header-actions .select { width:105px; padding-inline:8px; font-size:16px; }
  .tour-header-actions .icon-btn { width:44px; height:44px; }
  .tour-slide { display:flex; flex-direction:column; min-height:0; }
  .tour-illustration { min-height:200px; max-height:250px; padding:18px 24px 14px; }
  .tour-illustration-content { padding:0; width:min(310px,100%); margin:auto; }
  .tour-illustration figcaption { margin-top:10px; font-size:12px; }
  .tour-story { padding:24px 21px 28px; }
  .tour-story h2 { font-size:30px; margin:13px 0; }
  .tour-description { margin-bottom:18px; }
  .tour-steps { gap:11px; }
  .tour-demo-brand { display:flex; justify-content:center; gap:12px; margin-bottom:12px; }
  .tour-demo-brand img { width:46px; height:46px; border-radius:12px; }
  .tour-demo-brand strong { font-size:22px; }
  .tour-demo-tiles { gap:7px; }
  .tour-demo-tile { flex-direction:row; align-items:center; gap:8px; padding:10px; font-size:12px; border-radius:10px; }
  .tour-demo-tile .icon { width:18px; height:18px; }
  .tour-demo-window { width:min(280px,100%); margin:auto; border-radius:13px; }
  .tour-demo-window-head { padding:8px 12px; font-size:12px; }
  .tour-demo-languages { padding:9px 12px; gap:6px; }
  .tour-demo-languages > span { padding:4px; }
  .tour-demo-code { padding:9px 12px; margin:0 12px 9px; font-size:15px; }
  .tour-demo-cta { margin:0 12px 12px; padding:9px; font-size:12px; }
  .tour-demo-window > .tour-demo-line { display:none; }
  .tour-demo-search { margin:10px 12px; padding:8px; font-size:12px; }
  .tour-demo-row { margin:5px 12px; padding:7px 0; font-size:12px; gap:9px; }
  .tour-demo-row > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tour-demo-tabs { padding:8px 12px; }
  .tour-demo-vehicle { min-height:75px; }
  .tour-demo-vehicle .icon { width:50px; height:50px; }
  .tour-demo-photo-grid { grid-template-columns:repeat(3,1fr); }
  .tour-demo-document { grid-template-columns:1.2fr 1fr; padding:0 12px; }
  .tour-demo-route { padding:10px 22px; }
  .tour-demo-route > span { width:28px; height:28px; }
  .tour-demo-finance { padding:12px; }
  .tour-demo-finance > div:first-child { font-size:14px; }
  .tour-demo-finance .tour-demo-meter { margin-top:10px; }
  .tour-demo-market { width:260px; max-width:100%; margin:auto; gap:10px; }
  .tour-demo-listing { padding:12px; }
  .tour-demo-listing:nth-child(2) { margin-top:15px; }
  .tour-demo-listing > .icon { width:44px; height:44px; margin-bottom:10px; }
  .tour-demo-listing .tour-demo-line { margin-block:8px; }
  .tour-demo-listing > span { display:none; }
  .tour-demo-floating-tag { margin-top:12px; padding:8px 12px; font-size:12px; }
  .tour-demo-report { padding-top:10px; }
  .tour-demo-report > span { display:none; }
  .tour-demo-report > strong { font-size:16px; margin-bottom:10px; }
  .tour-demo-report .tour-demo-row:last-child { display:none; }
  .tour-demo-payment > img, .tour-demo-help > img { display:none; }
  .tour-demo-payment .tour-demo-row, .tour-demo-help .tour-demo-row { padding:13px; margin:8px 0; }
  .tour-demo-plans { max-width:280px; margin:10px auto 0; }
  .tour-demo-plans > div { padding:12px; gap:9px; }
  .tour-demo-plans strong { font-size:40px; }
  .tour-demo-plans span { font-size:12px; max-height:38px; overflow:hidden; }
  .tour-footer { padding:2px 16px calc(12px + env(safe-area-inset-bottom)); }
  .tour-controls .btn { min-height:46px; padding-inline:16px; min-width:0; flex:1; white-space:normal; }
  .tour-controls .btn-primary { min-width:0; }
  .tour-progress-row { gap:7px; }
  .tour-progress { gap:1px; }
  .tour-progress-row > .btn { font-size:12px; }
  .page-loading { bottom:var(--mobile-dock-height); padding:16px; }
  .page-loading-card { padding:22px 16px; gap:12px; }
  .page-loading-mark { width:80px; height:80px; }
  .page-loading-card h2 { font-size:20px; }
  .page-loading-tip { padding:14px; }
}
html[dir="rtl"] .tour-controls .icon, html[dir="rtl"] .tour-invitation > .icon { rotate:180deg; }
@media (max-width:420px) {
  .auth-panel { padding-inline:16px; }
  .auth-card { padding:24px 20px; }
  .tour-invitation { gap:10px; padding:13px; }
}
@media (max-height:600px) {
  .page-loading, .detail-loading { align-items:start; }
  .page-loading-card { padding-block:20px; }
}
html[dir="rtl"] .tour-story h2 { letter-spacing:0; line-height:1.4; }
html[data-motion="REDUCED"] .tour-invitation, html[data-motion="REDUCED"] .tour-demo-window { transform:none !important; }
html[data-motion="REDUCED"] .route-launch { display:none; }
html[data-motion="REDUCED"] .tour-story h2 > span { animation:none !important; }
@media (prefers-reduced-motion:reduce) {
  [data-interface-reveal] { opacity:1 !important; }
  .tour-invitation, .tour-demo-window { transform:none !important; }
  .route-launch { display:none; }
  .tour-story h2 > span { animation:none !important; }
}
@media print {
  [data-interface-reveal] { opacity:1 !important; transform:none !important; translate:none !important; }
  .page-loading, .route-launch, .detail-loading, .mobile-navigation { display:none !important; }
}