.comparator-page{padding:var(--space-8)var(--space-4);max-width:var(--container-max);padding-bottom:var(--space-24);margin:0 auto}.comparator-empty{text-align:center;min-height:400px;padding:var(--space-8);flex-direction:column;justify-content:center;align-items:center;display:flex}.comparator-empty .empty-icon{color:rgba(var(--color-primary-rgb),.5);margin-bottom:var(--space-6);font-size:4rem}.comparator-empty h2{color:var(--text-primary);margin-bottom:var(--space-2);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}.comparator-empty p{color:var(--text-tertiary);margin-bottom:var(--space-6);max-width:400px}.comparator-header{margin-bottom:var(--space-8);justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.comparator-title{align-items:center;gap:var(--space-3);display:flex}.comparator-title svg{color:var(--color-primary);font-size:1.5rem}.comparator-title h1{font-size:var(--font-size-3xl);color:var(--text-primary);font-weight:var(--font-weight-bold);margin:0}.compare-count{background:rgba(var(--color-primary-rgb),.15);color:var(--color-primary);padding:var(--space-1)var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.comparator-actions{gap:var(--space-3);display:flex}.btn-add-more,.btn-clear{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border-radius:var(--radius-md);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);display:flex}.btn-add-more{background:rgba(var(--color-primary-rgb),.15);border:1px solid rgba(var(--color-primary-rgb),.3);color:var(--color-primary)}.btn-add-more:hover{background:rgba(var(--color-primary-rgb),.25);border-color:var(--color-primary);transform:translateY(-2px)}.btn-clear{background:var(--color-error-bg);color:var(--color-error);border:1px solid rgba(255,71,87,.3)}.btn-clear:hover{border-color:var(--color-error);background:rgba(255,71,87,.25)}.comparison-summary{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-8);border:var(--border-accent);position:relative;overflow:hidden}.comparison-summary:before{content:"";background:var(--gradient-glow);opacity:.05;pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.comparison-summary h3{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0 0 var(--space-4)0;text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);z-index:1;position:relative}.summary-cards{gap:var(--space-4);z-index:1;flex-wrap:wrap;display:flex;position:relative}.summary-card{background:var(--bg-tertiary);border-radius:var(--radius-lg);min-width:200px;padding:var(--space-4);gap:var(--space-1);border:var(--border-subtle);transition:all var(--transition-fast);flex-direction:column;flex:1;display:flex}.summary-card:hover{border-color:rgba(var(--color-primary-rgb),.3);transform:translateY(-2px)}.summary-card .summary-icon{margin-bottom:var(--space-2);font-size:1.5rem}.summary-card.best-rated .summary-icon{color:var(--color-accent-gold)}.summary-card.earliest .summary-icon{color:var(--color-secondary)}.summary-card.common-genres .summary-icon{color:var(--color-accent-coral)}.summary-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.summary-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.summary-detail{font-size:var(--font-size-sm);color:var(--text-secondary)}.summary-genres{gap:var(--space-2);margin-top:var(--space-1);flex-wrap:wrap;display:flex}.summary-genres .genre-tag{font-size:var(--font-size-xs);padding:var(--space-1)var(--space-2)}.comparison-grid{gap:var(--space-6);display:grid}.comparison-grid.items-1{grid-template-columns:1fr 1fr}.comparison-grid.items-2,.comparison-grid.items-3{grid-template-columns:repeat(3,1fr)}.compare-card{background:var(--gradient-card);border-radius:var(--radius-xl);border:var(--border-subtle);transition:all var(--transition-base)var(--ease-out-expo);position:relative;overflow:hidden}.compare-card:before{content:"";border-radius:inherit;background:linear-gradient(135deg,rgba(var(--color-primary-rgb),.3),transparent 50%);-webkit-mask-composite:xor;opacity:0;transition:opacity var(--transition-base);pointer-events:none;padding:1px;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:linear-gradient(#fff 0,#fff 0),linear-gradient(#fff 0,#fff 0);mask-image:linear-gradient(#fff 0,#fff 0),linear-gradient(#fff 0,#fff 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.compare-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-6px)}.compare-card:hover:before{opacity:1}.compare-card-remove{top:var(--space-3);right:var(--space-3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-primary);border-radius:var(--radius-full);cursor:pointer;z-index:2;width:36px;height:36px;transition:all var(--transition-fast);background:rgba(0,0,0,.6);border:none;justify-content:center;align-items:center;display:flex;position:absolute}.compare-card-remove:hover{background:var(--color-error);transform:scale(1.1)}.compare-card-image{cursor:pointer;width:100%;height:180px;position:relative;overflow:hidden}.compare-card-image:after{content:"";background:linear-gradient(to top,var(--bg-card),transparent);pointer-events:none;height:60%;position:absolute;bottom:0;left:0;right:0}.compare-card-image img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-base)var(--ease-out-expo)}.compare-card:hover .compare-card-image img{transform:scale(1.08)}.compare-card-content{padding:var(--space-5)}.compare-card-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0 0 var(--space-4)0;cursor:pointer;transition:color var(--transition-fast)}.compare-card-title:hover{color:var(--color-primary)}.compare-card-field{margin-bottom:var(--space-3);gap:var(--space-1);flex-direction:column;display:flex}.compare-card-field .field-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);align-items:center;gap:var(--space-1);display:flex}.compare-card-field .field-label svg{font-size:var(--font-size-sm)}.compare-card-field .field-value{color:var(--text-primary);font-size:var(--font-size-base)}.compare-card-field .field-value.rating{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.compare-card-field .rating-stars{gap:2px;display:flex}.compare-card-field .rating-stars .star-filled{color:var(--color-accent-gold)}.compare-card-field .rating-stars .star-empty{color:var(--text-muted)}.compare-card-field .rating-number{font-weight:var(--font-weight-semibold)}.compare-card-field .rating-count{color:var(--text-muted);font-size:var(--font-size-sm)}.compare-card-field .field-value.genres{gap:var(--space-1);flex-wrap:wrap;display:flex}.compare-card-field .genre-tag{background:rgba(var(--color-primary-rgb),.15);color:var(--color-primary);padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs)}.compare-card-field .no-data{color:var(--text-muted);font-style:italic}.compare-card-field .field-value.price{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-secondary)}.compare-card-actions{gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:var(--border-subtle);display:flex}.btn-compare-detail,.btn-compare-website{justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-3)var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);flex:1;text-decoration:none;display:flex}.btn-compare-detail{background:rgba(var(--color-primary-rgb),.15);border:1px solid rgba(var(--color-primary-rgb),.3);color:var(--color-primary)}.btn-compare-detail:hover{background:var(--color-primary);color:var(--text-primary);transform:translateY(-2px)}.btn-compare-website{background:var(--bg-elevated);border:var(--border-default);color:var(--text-primary)}.btn-compare-website:hover{background:var(--bg-tertiary);border-color:rgba(var(--color-primary-rgb),.3)}.compare-card-placeholder{background:rgba(var(--color-primary-rgb),.05);border:2px dashed rgba(var(--color-primary-rgb),.3);border-radius:var(--radius-xl);justify-content:center;align-items:center;gap:var(--space-3);cursor:pointer;min-height:400px;transition:all var(--transition-fast);color:var(--text-muted);flex-direction:column;display:flex}.compare-card-placeholder:hover{border-color:var(--color-primary);color:var(--color-primary);background:rgba(var(--color-primary-rgb),.1);transform:translateY(-4px)}.compare-card-placeholder span{font-weight:var(--font-weight-medium)}.comparison-note{text-align:center;margin-top:var(--space-8);padding:var(--space-4);background:rgba(var(--color-primary-rgb),.1);border-radius:var(--radius-md);border:1px solid rgba(var(--color-primary-rgb),.2)}.comparison-note p{color:var(--text-secondary);margin:0}.compare-floating-bar{bottom:var(--space-6);align-items:center;gap:var(--space-4);padding:var(--space-3)var(--space-4);background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:0 4px 0 0 var(--color-primary);z-index:var(--z-fixed);white-space:nowrap;display:flex;position:fixed;left:50%;transform:translate(-50%)}.compare-floating-bar .compare-count{font-family:var(--font-family-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);font-size:.76rem}.compare-floating-bar .btn-view-compare{align-items:center;gap:var(--space-2);background:var(--color-primary);border-radius:var(--radius-sm);color:#0c0b09;font:inherit;font-size:var(--font-size-sm);cursor:pointer;border:none;padding:.5rem 1rem;font-weight:700;display:flex}.compare-floating-bar .btn-view-compare:hover{background:var(--color-primary-light)}.compare-floating-bar .btn-clear-compare{padding:var(--space-1);color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;place-items:center;display:grid}.compare-floating-bar .btn-clear-compare:hover{color:var(--text-primary)}body:has(.cc-bar) .compare-floating-bar{bottom:150px}@media (max-width:768px){body:has(.cc-bar) .compare-floating-bar{bottom:330px}.compare-floating-bar{bottom:calc(var(--bottom-nav-height) + var(--space-3));max-width:calc(100% - 2*var(--space-3));gap:var(--space-3)}}@media (max-width:1024px){.comparison-grid.items-2,.comparison-grid.items-3{grid-template-columns:1fr 1fr}}@media (max-width:768px){.comparator-page{padding:var(--space-4);padding-bottom:var(--space-24)}.comparator-header{flex-direction:column;align-items:flex-start}.comparator-title h1{font-size:var(--font-size-2xl)}.comparison-grid.items-1,.comparison-grid.items-2,.comparison-grid.items-3{grid-template-columns:1fr}.summary-cards{flex-direction:column}.summary-card{min-width:auto}.compare-floating-bar{left:var(--space-4);right:var(--space-4);border-radius:var(--radius-xl);bottom:calc(var(--bottom-nav-height) + var(--safe-area-bottom) + var(--space-4));justify-content:space-between;transform:none}.compare-card-actions{flex-direction:column}}@media (prefers-reduced-motion:reduce){.compare-card,.summary-card,.btn-add-more,.btn-clear,.btn-compare-detail,.btn-compare-website,.compare-card-placeholder,.compare-floating-bar .btn-view-compare{transition:none}.compare-floating-bar{animation:none}}