/* Autos compare — Platform 21.2.3 (ac- prefix) */
.ac-page { padding: 2rem 0 4rem; overflow-x: clip; background: var(--au-surface-2, #f8fafc); color: var(--au-text, #0f172a); }
.ac-page.ac-compare-show { padding-bottom: 2rem; }
body.ac-has-floating-bar .ac-page { padding-bottom: 6rem; }
.ac-container { max-width: 1280px; margin: 0 auto; padding: 0 1rem 3rem; }

.ac-breadcrumb { font-size: .875rem; color: var(--au-muted, #64748b); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; }
.ac-breadcrumb a { color: var(--au-primary, #059669); text-decoration: none; }
.ac-breadcrumb li:not(:last-child)::after { content: '/'; margin-left: .35rem; }

.ac-sticky-header { position: sticky; top: 0; z-index: 100; background: var(--au-surface, #fff); border-bottom: 1px solid var(--au-border, #e2e8f0); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.ac-sticky-inner { max-width: 1280px; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items: center; gap: 1rem; overflow-x: auto; }
.ac-sticky-devices { display: flex; gap: .75rem; flex: 1; min-width: 0; }
.ac-sticky-device { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--au-border); border-radius: .5rem; min-width: 160px; flex-shrink: 0; background: var(--au-surface); }
.ac-sticky-device.ac-overall-winner { border-color: var(--au-primary); background: color-mix(in srgb, var(--au-primary) 10%, transparent); }
.ac-sticky-price { font-size: .75rem; }

.ac-winners { margin: 1.5rem 0; }
.ac-winners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.ac-winner-card { padding: .75rem; border-radius: .5rem; background: var(--au-surface); border: 1px solid var(--au-border); text-align: center; }
.ac-winner-label { display: block; font-size: .6875rem; text-transform: uppercase; color: var(--au-muted); margin-bottom: .25rem; }

.ac-section-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.ac-section-nav-link { padding: .4rem .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; border: 1px solid var(--au-border); color: var(--au-muted); text-decoration: none; }
.ac-section-nav-link:hover { color: var(--au-primary); border-color: var(--au-primary); }

.ac-mobile-cards { display: none; gap: 1rem; overflow-x: auto; margin-bottom: 1rem; }
@media (max-width: 767px) { .ac-mobile-cards { display: flex; } .ac-table-wrap { display: none; } }
.ac-mobile-card { min-width: 220px; border: 1px solid var(--au-border); border-radius: .75rem; padding: 1rem; background: var(--au-surface); }

.ac-table-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1rem 0; }
.ac-search-specs { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 200px; border: 1px solid var(--au-border); border-radius: .5rem; padding: .5rem .75rem; background: var(--au-surface); }
.ac-search-specs input { border: none; outline: none; width: 100%; background: transparent; color: var(--au-text); }
.ac-diff-toggle { font-size: .875rem; display: flex; align-items: center; gap: .35rem; color: var(--au-text); }

.ac-table-wrap { overflow-x: auto; }
.ac-compare-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ac-compare-table th, .ac-compare-table td { border: 1px solid var(--au-border, #e2e8f0); padding: .75rem; text-align: left; vertical-align: top; }
.ac-group-header th { background: color-mix(in srgb, var(--au-primary) 8%, var(--au-surface)); }
.ac-group-toggle { background: none; border: none; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: .5rem; color: var(--au-text); width: 100%; text-align: left; }
.ac-spec-row.ac-hidden, .ac-spec-row.ac-diff-hidden { display: none; }
.ac-status-winner { background: color-mix(in srgb, var(--au-primary) 12%, transparent); font-weight: 600; }
.ac-diff-badge { margin-left: .35rem; font-size: .75rem; }
.ac-diff-winner { color: var(--au-primary); }

.ac-ai-summary { background: color-mix(in srgb, var(--au-primary) 8%, var(--au-surface)); border: 1px solid color-mix(in srgb, var(--au-primary) 25%, transparent); border-radius: .75rem; padding: 1.25rem; margin-bottom: 1.5rem; }

.ac-floating-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--au-surface, #fff); border-top: 2px solid var(--au-primary, #059669);
  box-shadow: 0 -4px 24px rgba(0,0,0,.1); padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
body.ac-has-floating-bar { padding-bottom: 4.5rem; }
.ac-floating-bar[hidden] { display: none !important; }
.ac-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem 1rem; border-radius: .5rem; font-weight: 600; font-size: .875rem; border: none; cursor: pointer; text-decoration: none; }
.ac-btn-primary { background: var(--au-primary, #059669); color: #fff; }
.ac-btn-outline { background: var(--au-surface); border: 1px solid var(--au-border); color: var(--au-text); }
.ac-toast { position: fixed; bottom: 5rem; right: 1rem; z-index: 100; padding: .75rem 1.25rem; background: #0f172a; color: #fff; border-radius: .5rem; opacity: 0; transition: opacity .2s; }
.ac-toast.is-visible { opacity: 1; }
.ac-toast--error { background: #b91c1c; }

.autos-theme.au-dark .ac-page,
html.dark .autos-theme .ac-page {
  --au-surface: #1e293b; --au-surface-2: #0f172a; --au-border: #334155; --au-text: #f1f5f9; --au-muted: #94a3b8;
}

@media print {
  .ac-floating-bar, .au-nav, .ac-section-nav, .ac-table-toolbar, .ac-mobile-cards { display: none !important; }
  .ac-table-wrap { display: block !important; }
  .ac-status-winner { background: #ecfdf5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}