.compare-page{min-height:100vh;padding:32px 16px}.compare-container{max-width:1280px;margin:0 auto}.compare-hero{text-align:center;background:linear-gradient(135deg,#6366f11f,#9333ea0d);border-radius:16px;margin-bottom:24px;padding:32px 16px}.compare-title{color:var(--text-primary);margin:0 0 12px;font-size:1.8rem;font-weight:700}.compare-lead{color:var(--text-secondary);max-width:720px;margin:0 auto;font-size:.95rem;line-height:1.7}.compare-section{margin-bottom:40px}.compare-section-title{color:var(--text-primary);margin:0 0 18px;font-size:1.2rem;font-weight:700}.compare-bars{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px;padding:16px 20px}.compare-bar-row{color:inherit;border-radius:6px;grid-template-columns:180px 1fr 180px;align-items:center;gap:14px;padding:6px 8px;text-decoration:none;transition:background .12s;display:grid}.compare-bar-row:hover{background:#6366f114}.compare-bar-label{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:600;overflow:hidden}.compare-bar-track{background:#94a3b826;border-radius:9px;height:18px;overflow:hidden}.compare-bar-fill{background:linear-gradient(90deg, var(--accent), #8b5cf6);border-radius:9px;height:100%;transition:width .4s}.compare-bar-value{color:var(--text-secondary);text-align:right;white-space:nowrap;font-size:.85rem}.compare-bar-share{color:var(--text-muted);margin-left:4px;font-size:.78rem}.compare-genre-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;display:grid}.compare-genre-card{background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--shadow-sm);border-radius:12px;flex-direction:column;gap:12px;padding:16px 18px;transition:box-shadow .2s,transform .2s,border-color .2s;display:flex}.compare-genre-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent);transform:translateY(-1px)}.compare-genre-header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.compare-genre-name{margin:0;font-size:1rem;font-weight:700}.compare-genre-name a{color:var(--text-primary);text-decoration:none}.compare-genre-name a:hover{color:var(--accent)}.compare-genre-count{color:var(--accent);white-space:nowrap;font-size:.82rem;font-weight:600}.compare-genre-stats{background:#94a3b80f;border-radius:6px;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0;padding:10px;display:grid}.compare-genre-stats div{flex-direction:column;gap:2px;display:flex}.compare-genre-stats dt{color:var(--text-muted);margin:0;font-size:.7rem}.compare-genre-stats dd{color:var(--text-primary);margin:0;font-size:.82rem}.compare-genre-stats strong{font-weight:700}.compare-sub{color:var(--text-muted);margin-left:4px;font-size:.72rem}.compare-muted{color:var(--text-muted);font-size:.78rem}.compare-site-dist{flex-wrap:wrap;gap:4px;display:flex}.compare-site-chip{white-space:nowrap;border:1px solid #0000;border-radius:10px;padding:2px 8px;font-size:.7rem;font-weight:600}.compare-top-products{flex-direction:column;gap:6px;padding-top:4px;display:flex}.compare-top-title{color:var(--text-muted);font-size:.78rem;font-weight:600}.compare-top-item{color:var(--text-secondary);border-radius:4px;grid-template-columns:18px 40px 1fr;align-items:center;gap:8px;padding:4px 6px;font-size:.78rem;text-decoration:none;transition:background .12s;display:grid}.compare-top-item:hover{color:var(--text-primary);background:#6366f114}.compare-top-rank{color:var(--accent);text-align:center;font-weight:700}.compare-top-item img{object-fit:cover;border-radius:3px;width:40px;height:28px}.compare-top-ph{background:#94a3b826;border-radius:3px;justify-content:center;align-items:center;width:40px;height:28px;font-size:.8rem;display:flex}.compare-top-title-text{text-overflow:ellipsis;white-space:nowrap;line-height:1.3;overflow:hidden}.compare-genre-cta{text-align:center;color:var(--accent);background:#6366f11a;border:1px solid #6366f140;border-radius:6px;margin-top:auto;padding:8px;font-size:.82rem;font-weight:600;text-decoration:none;transition:background .15s;display:block}.compare-genre-cta:hover{background:#6366f12e}.compare-footer-note{text-align:center;color:var(--text-muted);margin-top:40px;padding:16px;font-size:.82rem}.compare-footer-note a{color:var(--accent)}@media (max-width:640px){.compare-bar-row{grid-template-columns:110px 1fr 100px;gap:8px;font-size:.76rem}.compare-bar-label{font-size:.78rem}.compare-bar-value{font-size:.72rem}.compare-genre-stats{grid-template-columns:1fr}}