.tf-vehicle-wrap{border:1px solid #dbe2ea;padding:28px;border-radius:24px;background:
linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);box-shadow:0 18px 40px rgba(15,23,42,.08)}
.tf-topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
.tf-chip{display:inline-flex;padding:7px 11px;border-radius:999px;background:#eaf2ff;color:#2155d6;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.tf-topbar h3{margin:0 0 6px;font-size:34px;line-height:1.04;color:#0f172a}
.tf-topbar p{margin:0;color:#667085;max-width:760px}
.tf-topbar-side{display:flex;align-items:center}
.tf-mini-stat{padding:12px 16px;border:1px solid #e6edf5;border-radius:16px;background:#fff;min-width:110px;text-align:center}
.tf-mini-stat span{display:block;font-size:11px;color:#667085;text-transform:uppercase;letter-spacing:.06em}
.tf-mini-stat strong{display:block;font-size:18px;color:#111827}
.tf-filter-shell{padding:18px;border:1px solid #e6edf5;border-radius:20px;background:#ffffff}
.tf-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tf-field label{display:block;font-size:12px;font-weight:800;color:#334155;letter-spacing:.03em;text-transform:uppercase;margin-bottom:7px}
.tf-field select{width:100%;min-height:52px;padding:12px 14px;border:1px solid #ced8e3;border-radius:14px;background:#fff;color:#0f172a;box-shadow:0 1px 1px rgba(15,23,42,.02)}
.tf-field select:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 4px rgba(79,70,229,.10)}
.tf-field select:disabled{background:#f8fafc;color:#98a2b3}
.tf-actions{margin-top:14px}
.tf-btn{padding:10px 14px;border-radius:12px;border:1px solid #d0d7de;background:#fff;cursor:pointer;font-weight:700}
.tf-btn-ghost{background:#f8fafc}
.tf-status{margin-top:14px;font-size:14px;color:#475467}
.tf-detail{margin-top:24px}
.tf-showcase{display:grid;gap:18px}
.tf-hero-card{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;padding:24px;border:1px solid #e7edf4;border-radius:24px;background:radial-gradient(circle at top right,#edf4ff 0%,#ffffff 56%)}
.tf-hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tf-pill{padding:8px 12px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:800}
.tf-pill-dark{background:#111827;color:#fff}
.tf-hero-copy h2{margin:0 0 10px;font-size:38px;line-height:1.02;color:#0f172a}
.tf-subline{margin:0 0 18px;color:#667085;max-width:760px}
.tf-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.tf-kpi{padding:16px;border:1px solid #e7edf4;border-radius:18px;background:#fff}
.tf-kpi span{display:block;font-size:12px;color:#667085;margin-bottom:5px}
.tf-kpi strong{display:block;font-size:24px;color:#0f172a}
.tf-tags{display:flex;flex-wrap:wrap;gap:8px}
.tf-tags span{padding:9px 12px;border-radius:999px;background:#f1f5f9;color:#0f172a;font-size:12px;font-weight:700}
.tf-hero-media{display:grid;gap:14px}
.tf-brand-card,.tf-engine-card{display:flex;align-items:center;justify-content:center;border:1px solid #e7edf4;border-radius:22px;background:#fff;padding:18px;min-height:170px}
.tf-brand-card img{max-width:150px;max-height:70px;object-fit:contain}
.tf-engine-card img{max-width:100%;max-height:280px;object-fit:contain}
.tf-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tf-panel{padding:20px;border:1px solid #e7edf4;border-radius:22px;background:#fff}
.tf-section-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:14px}
.tf-section-head h4{margin:0;font-size:20px;color:#0f172a}
.tf-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tf-meta{padding:12px;border:1px solid #edf1f5;border-radius:14px;background:#fbfdff}
.tf-meta span{display:block;font-size:12px;color:#667085;margin-bottom:4px}
.tf-meta strong{display:block;color:#0f172a}
.tf-stage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tf-stage-card{padding:18px;border:1px solid #edf1f5;border-radius:18px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.tf-stage-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.tf-stage-title-wrap{display:flex;gap:10px;align-items:center}
.tf-stage-title{font-size:20px;font-weight:800;color:#0f172a}
.tf-stage-icon{width:38px;height:38px;object-fit:contain}
.tf-price{font-size:26px;font-weight:800;color:#0f172a;white-space:nowrap}
.tf-stage-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tf-stage-stats div{padding:12px;border:1px solid #edf1f5;border-radius:14px;background:#fff}
.tf-stage-stats span{display:block;font-size:12px;color:#667085;margin-bottom:4px}
.tf-stage-stats strong{display:block;font-size:18px}
.tf-stack{display:grid;gap:12px}
.tf-mini-card{padding:16px;border:1px solid #edf1f5;border-radius:16px;background:#fbfdff}
.tf-mini-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.tf-mini-head img{width:44px;height:44px;object-fit:contain;flex:0 0 auto}
.tf-mini-head strong{display:block;color:#0f172a}
.tf-mini-head span{display:block;color:#667085;font-size:13px;margin-top:3px}
.tf-muted{margin:0;color:#667085}
.tf-option-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.tf-option-list li{display:flex;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid #edf1f5;border-radius:12px;background:#fff}
.tf-option-list em{font-style:normal;font-weight:700;white-space:nowrap}
.tf-option-row{display:flex;align-items:center;gap:8px;position:relative}
.tf-info-popover{width:22px;height:22px;border-radius:999px;border:1px solid #d0d7de;background:#fff;color:#111827;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;line-height:1}
.tf-popover-panel{position:absolute;top:30px;left:0;z-index:20;min-width:220px;max-width:320px;padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#111827;color:#fff;box-shadow:0 12px 24px rgba(0,0,0,.18);font-size:12px;line-height:1.45}
.tf-popover-panel[hidden]{display:none}
.tf-thumb-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tf-thumb-row img{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid #e5e7eb;background:#fff}
.tf-pre{overflow:auto;background:#0f172a;color:#f8fafc;padding:14px;border-radius:14px;font-size:12px;line-height:1.45}
@media (max-width:1200px){.tf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tf-kpi-row,.tf-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.tf-topbar,.tf-hero-card,.tf-split-grid,.tf-stage-grid{grid-template-columns:1fr;display:grid}.tf-topbar{display:grid}.tf-hero-copy h2{font-size:32px}}
@media (max-width:640px){.tf-grid,.tf-kpi-row,.tf-meta-grid,.tf-stage-grid{grid-template-columns:1fr}.tf-topbar h3{font-size:28px}}


/* v6.9 color fix */
.tf-vehicle-wrap,
.tf-showcase{
  color: var(--tf-primary);
}

.tf-vehicle-wrap{
  background: linear-gradient(180deg, var(--tf-surface) 0%, var(--tf-bg) 100%);
  border-color: color-mix(in srgb, var(--tf-primary) 12%, white);
}

.tf-filter-shell,
.tf-admin-like,
.tf-panel,
.tf-brand-card,
.tf-engine-card,
.tf-kpi,
.tf-stage-card,
.tf-meta,
.tf-mini-card,
.tf-option-list li,
.tf-field select,
.tf-admin-stat{
  background: var(--tf-surface);
}

.tf-topbar h3,
.tf-hero-copy h2,
.tf-section-head h4,
.tf-stage-title,
.tf-price,
.tf-kpi strong,
.tf-meta strong,
.tf-mini-head strong{
  color: var(--tf-primary);
}

.tf-chip,
.tf-pill,
.tf-admin-badge{
  color: var(--tf-accent);
}

.tf-pill{
  background: color-mix(in srgb, var(--tf-accent) 10%, white);
}

.tf-field select:focus{
  border-color: var(--tf-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tf-accent) 12%, white);
}

.tf-topbar,
.tf-filter-shell,
.tf-hero-card,
.tf-panel,
.tf-stage-card,
.tf-mini-card,
.tf-field select,
.tf-brand-card,
.tf-engine-card,
.tf-kpi,
.tf-meta{
  border-color: color-mix(in srgb, var(--tf-primary) 10%, white);
}

.tf-hero-card{
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--tf-accent) 10%, white) 0%, var(--tf-surface) 56%);
}

.tf-btn,
.tf-btn-ghost{
  color: var(--tf-primary);
  border-color: color-mix(in srgb, var(--tf-primary) 16%, white);
  background: color-mix(in srgb, var(--tf-bg) 50%, var(--tf-surface));
}

.tf-status,
.tf-subline,
.tf-topbar p,
.tf-muted,
.tf-admin-note,
.tf-meta span,
.tf-kpi span,
.tf-stage-stats span,
.tf-mini-head span{
  color: color-mix(in srgb, var(--tf-primary) 55%, white);
}


/* v8.2 select background removed */
.tf-vehicle-wrap .tf-field select{
  background: transparent !important;
  box-shadow: none !important;
}


/* v8.3 remove filter background around selects */
.tf-vehicle-wrap .tf-filter-shell{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.tf-vehicle-wrap .tf-grid{
  background: transparent !important;
}
.tf-vehicle-wrap .tf-field{
  background: transparent !important;
}
.tf-vehicle-wrap .tf-field label{
  background: transparent !important;
}
.tf-vehicle-wrap .tf-field select{
  background: transparent !important;
  box-shadow: none !important;
}


/* v8.4 fully transparent widget filter */
.tf-vehicle-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.tf-vehicle-wrap .tf-topbar,
.tf-vehicle-wrap .tf-filter-shell,
.tf-vehicle-wrap .tf-grid,
.tf-vehicle-wrap .tf-field{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.tf-vehicle-wrap .tf-field select{
  background: transparent !important;
  background-color: transparent !important;
}


/* v8.5 detail view transparent too */
.tf-showcase,
.tf-showcase .tf-hero-card,
.tf-showcase .tf-panel,
.tf-showcase .tf-brand-card,
.tf-showcase .tf-engine-card,
.tf-showcase .tf-kpi,
.tf-showcase .tf-stage-card,
.tf-showcase .tf-meta,
.tf-showcase .tf-mini-card,
.tf-showcase .tf-option-list li{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.tf-showcase .tf-hero-card,
.tf-showcase .tf-panel,
.tf-showcase .tf-brand-card,
.tf-showcase .tf-engine-card,
.tf-showcase .tf-kpi,
.tf-showcase .tf-stage-card,
.tf-showcase .tf-meta,
.tf-showcase .tf-mini-card,
.tf-showcase .tf-option-list li,
.tf-showcase .tf-thumb-row img{
  border-color: rgba(255,255,255,.16) !important;
}


/* v8.6 select border + admin background */
.tf-vehicle-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.tf-vehicle-wrap .tf-topbar,
.tf-vehicle-wrap .tf-filter-shell,
.tf-vehicle-wrap .tf-grid,
.tf-vehicle-wrap .tf-field{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.tf-vehicle-wrap .tf-field select{
  background: var(--tf-surface) !important;
  background-color: var(--tf-surface) !important;
  border: 1px solid rgba(244,247,250,.22) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
.tf-showcase .tf-hero-card,
.tf-showcase .tf-panel,
.tf-showcase .tf-brand-card,
.tf-showcase .tf-engine-card,
.tf-showcase .tf-kpi,
.tf-showcase .tf-stage-card,
.tf-showcase .tf-meta,
.tf-showcase .tf-mini-card,
.tf-showcase .tf-option-list li{
  background: transparent !important;
  background-color: transparent !important;
}


/* v10.5 responsive frontend */
@media (max-width: 1200px){
  .tf-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width: 820px){
  .tf-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .tf-topbar h3{font-size:26px !important}
}
@media (max-width: 560px){
  .tf-grid{grid-template-columns:1fr !important}
  .tf-vehicle-wrap{padding-left:0 !important;padding-right:0 !important}
  .tf-field label{font-size:11px !important}
}


/* v10.8 more space between selection and stage detail */
.tf-status{
  margin-top: 18px !important;
}
.tf-detail{
  margin-top: 38px !important;
}
@media (max-width: 820px){
  .tf-detail{
    margin-top: 28px !important;
  }
}