.compare-page{flex-direction:column;gap:1.5rem;display:flex}.compare-header{border-bottom:1px solid var(--line);flex-direction:column;gap:.5rem;padding-bottom:1.25rem;display:flex}.compare-header-nav{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.compare-header-actions{align-items:center;gap:.5rem;display:flex}.header-action-btn{font-family:var(--font-display);letter-spacing:.03em;color:var(--text-dim);background:var(--bg-raised);border:1px solid var(--line-bright);border-radius:var(--radius);cursor:pointer;align-items:center;gap:.4rem;padding:.35rem .75rem;font-size:.76rem;font-weight:600;transition:all .15s;display:inline-flex}.header-action-btn:hover{color:var(--cyan-bright);border-color:var(--cyan);background:color-mix(in srgb, var(--cyan) 8%, var(--bg-raised))}.header-action-btn--danger:hover{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, var(--bg-raised))}.compare-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:.5rem;display:flex}.compare-search-box{flex:1;max-width:480px;position:relative}.compare-search-box .search-icon{color:var(--text-faint);pointer-events:none;position:absolute;top:50%;left:.85rem;transform:translateY(-50%)}.compare-search-input{background:var(--bg-inset);border:1px solid var(--line-bright);border-radius:var(--radius);width:100%;font-family:var(--font-mono);color:var(--text);outline:none;padding:.55rem .85rem .55rem 2.25rem;font-size:.84rem;transition:border-color .15s,box-shadow .15s}.compare-search-input:focus{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}.compare-search-dropdown{background:var(--bg-raised);border:1px solid var(--line-bright);border-radius:var(--radius);z-index:50;max-height:320px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #0009}.search-item{cursor:pointer;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:.55rem .85rem;font-size:.84rem;transition:background .12s;display:flex}.search-item:last-child{border-bottom:none}.search-item:hover{background:color-mix(in srgb, var(--cyan) 12%, var(--bg-raised))}.search-item-type{font-family:var(--font-mono);color:var(--text-strong);font-weight:600}.search-item-specs{color:var(--text-faint);font-size:.78rem}.search-item-price{font-family:var(--font-mono);color:var(--cyan-bright);font-size:.8rem}.search-item--empty{color:var(--text-faint);text-align:center;cursor:default;padding:.75rem 1rem}.diff-toggle-label{font-family:var(--font-display);color:var(--text-dim);cursor:pointer;user-select:none;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;display:inline-flex}.diff-toggle-checkbox{opacity:0;pointer-events:none;position:absolute}.diff-toggle-switch{background:var(--line-bright);border-radius:10px;width:32px;height:18px;transition:background .2s;position:relative}.diff-toggle-switch:after{content:"";background:var(--bg-raised);border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:2px;left:2px}.diff-toggle-checkbox:checked+.diff-toggle-switch{background:var(--cyan)}.diff-toggle-checkbox:checked+.diff-toggle-switch:after{transform:translate(14px)}.compare-empty{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);text-align:center;margin:1rem 0;padding:3rem 2rem}.empty-icon-wrap{background:var(--bg-inset);border:1px solid var(--line-bright);width:64px;height:64px;color:var(--cyan-bright);border-radius:50%;justify-content:center;align-items:center;margin-bottom:1.25rem;display:inline-flex}.compare-empty h2{font-family:var(--font-display);color:var(--text-strong);border-bottom:none;margin:0 0 .5rem;padding:0;font-size:1.35rem;font-weight:700}.compare-empty p{max-width:58ch;color:var(--text-dim);margin:0 auto 2rem;font-size:.92rem}.presets-section{text-align:left;max-width:720px;margin:0 auto 2rem}.presets-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:.75rem;font-size:.72rem;font-weight:700;display:block}.presets-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.65rem;display:grid}.preset-card{background:var(--bg-inset);border:1px solid var(--line-bright);border-radius:var(--radius);cursor:pointer;text-align:left;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.75rem 1rem;transition:all .15s;display:flex}.preset-card:hover{border-color:var(--cyan);background:color-mix(in srgb, var(--cyan) 8%, var(--bg-inset));transform:translateY(-1px)}.preset-name{font-family:var(--font-display);color:var(--cyan-bright);font-size:.84rem;font-weight:600}.preset-desc{font-family:var(--font-mono);color:var(--text-faint);font-size:.72rem}.compare-empty-cta{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--cyan-bright);border:1px solid var(--cyan-dim);border-radius:var(--radius);padding:.65rem 1.4rem;font-size:.82rem;font-weight:600;display:inline-block}.compare-empty-cta:hover{color:var(--cyan);border-color:var(--cyan)}.compare-container{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-raised);position:relative;overflow:auto visible}.compare-grid{--compare-cols:2;--total-cols:2;grid-template-columns:220px repeat(var(--total-cols), minmax(200px, 1fr));background:var(--line);gap:1px;width:100%;min-width:680px;display:grid}.compare-section,.compare-section-header{display:contents}.compare-section-title-cell{background:var(--bg-inset);border-top:1px solid var(--line-bright);z-index:12;padding:.65rem 1rem;position:sticky;left:0}.section-title-inner{color:var(--cyan);align-items:center;gap:.5rem;display:inline-flex}.section-title-inner h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);margin:0;font-size:.76rem;font-weight:700}.compare-section-rule-cell{background:var(--bg-inset);border-top:1px solid var(--line-bright)}.compare-row{display:contents}.compare-cell{background:var(--bg-raised);font-family:var(--font-body);font-variant-numeric:tabular-nums;color:var(--text);align-items:center;padding:.65rem 1rem;font-size:.86rem;display:flex}.compare-label{font-family:var(--font-display);color:var(--text-dim);letter-spacing:.01em;background:color-mix(in srgb, var(--bg-raised) 96%, var(--text-strong) 4%);z-index:10;font-size:.78rem;font-weight:600;position:sticky;left:0}.compare-row-header .compare-cell{z-index:25;background:var(--bg-raised);border-bottom:2px solid var(--line-bright);box-shadow:0 4px 14px var(--card-hover-shadow);position:sticky;top:57px}.compare-corner-cell{background:var(--bg-raised);z-index:30;align-items:flex-end;position:sticky;top:57px;left:0}.instances-count-tag{font-family:var(--font-mono);color:var(--text-faint);text-transform:uppercase;font-size:.7rem}.compare-header-cell{background:var(--bg-raised);flex-direction:column;align-items:flex-start;gap:.4rem;padding:1rem 1rem .85rem;position:relative}.compare-remove-btn{border:1px solid var(--line-bright);color:var(--text-faint);border-radius:var(--radius);cursor:pointer;background:0 0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:1rem;line-height:1;transition:all .15s;display:flex;position:absolute;top:.6rem;right:.6rem}.compare-remove-btn:hover{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, transparent)}.compare-header-top{flex-direction:column;gap:.15rem;padding-right:1.5rem;display:flex}.compare-type-name{font-family:var(--font-display);color:var(--text-strong);letter-spacing:-.02em;border:none;font-size:1.15rem;font-weight:800}.compare-type-name:hover{color:var(--cyan-bright)}.compare-family-name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--cyan-bright);border:none;font-size:.72rem;font-weight:600}.compare-badges{flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.15rem;display:flex}.badge{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;border-radius:3px;padding:.15rem .4rem;font-size:.66rem;font-weight:700}.badge-gen{color:#34d399;background:#34d3991a;border:1px solid #34d39940}.badge-prev{color:var(--text-faint);background:color-mix(in srgb, var(--line-bright) 20%, transparent);border:1px solid var(--line-bright)}.badge-metal{color:#60a5fa;background:#60a5fa1a;border:1px solid #60a5fa40}.badge-gpu{color:#f59e0b;background:#f59e0b1f;border:1px solid #f59e0b4d}.compare-header-price{font-family:var(--font-mono);color:var(--cyan-bright);margin-top:.25rem;font-size:.95rem;font-weight:700}.compare-add-col-header{cursor:pointer;border:1px dashed var(--line-bright);background:color-mix(in srgb, var(--bg-inset) 90%, var(--text-strong) 10%);justify-content:center;align-items:center;transition:all .15s}.compare-add-col-header:hover{border-color:var(--cyan);background:color-mix(in srgb, var(--cyan) 8%, var(--bg-inset))}.add-slot-box{text-align:center;flex-direction:column;align-items:center;gap:.25rem;display:flex}.add-slot-icon{color:var(--cyan-bright);font-size:1.4rem;font-weight:300;line-height:1}.add-slot-text{font-family:var(--font-display);color:var(--text-dim);font-size:.78rem;font-weight:600}.add-slot-count{font-family:var(--font-mono);color:var(--text-faint);font-size:.68rem}.compare-add-col-cell{color:var(--text-faint);justify-content:center}.empty-slot-dash{opacity:.3}.compare-sticky-bar{z-index:90;pointer-events:none;opacity:0;max-width:1100px;margin:0 auto;padding:0 1.5rem;transition:opacity .15s,transform .15s;position:fixed;top:66px;left:0;right:0;transform:translateY(-4px)}.compare-sticky-bar.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}.compare-sticky-scroll{border:1px solid var(--line-bright);border-radius:0 0 var(--radius) var(--radius);background:var(--bg-raised);box-shadow:var(--sticky-shadow);scrollbar-width:none;border-top:none;overflow-x:auto}.compare-sticky-scroll::-webkit-scrollbar{display:none}.compare-sticky-grid{--compare-cols:2;--total-cols:2;grid-template-columns:220px repeat(var(--total-cols), minmax(200px, 1fr));background:var(--line);gap:1px;width:100%;min-width:680px;display:grid}.sticky-corner-cell,.sticky-inst-cell{background:var(--bg-raised);align-items:center;padding:.65rem .9rem;display:flex}.sticky-corner-cell{background:var(--bg-inset);align-items:center}.sticky-inst-cell{flex-direction:column;justify-content:center;align-items:stretch;gap:.3rem;position:relative}.sticky-inst-top{justify-content:space-between;align-items:baseline;gap:.4rem;padding-right:1.4rem;display:flex}.sticky-inst-name{font-family:var(--font-display);color:var(--text-strong);letter-spacing:-.01em;border:none;font-size:1rem;font-weight:800}.sticky-inst-name:hover{color:var(--cyan-bright)}.sticky-inst-fam{font-family:var(--font-display);color:var(--cyan-bright);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;border:none;font-size:.68rem;font-weight:600;overflow:hidden}.sticky-inst-bottom{justify-content:space-between;align-items:center;gap:.4rem;display:flex}.sticky-inst-price{font-family:var(--font-mono);color:var(--cyan-bright);font-size:.84rem;font-weight:700}.sticky-badges{align-items:center;gap:.25rem;display:flex}.sticky-remove-btn{border:1px solid var(--line-bright);color:var(--text-faint);border-radius:var(--radius);cursor:pointer;background:0 0;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;font-size:.85rem;line-height:1;transition:all .15s;display:flex;position:absolute;top:.5rem;right:.5rem}.sticky-remove-btn:hover{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, transparent)}.sticky-add-cell{background:color-mix(in srgb, var(--bg-inset) 90%, var(--text-strong) 10%);justify-content:center}.sticky-add-btn{font-family:var(--font-display);color:var(--cyan-bright);border:1px dashed var(--cyan-dim);border-radius:var(--radius);cursor:pointer;background:0 0;padding:.3rem .65rem;font-size:.74rem;font-weight:600}.sticky-add-btn:hover{border-color:var(--cyan);background:color-mix(in srgb, var(--cyan) 12%, transparent)}.compare-value.is-best{color:#34d399;background:color-mix(in srgb, #10b981 12%, var(--bg-raised));font-weight:700;box-shadow:inset 3px 0 #10b981}.row-diff-highlight .compare-cell{background:color-mix(in srgb, #3b82f6 6%, var(--bg-raised))}.row-diff-highlight .compare-label{color:var(--cyan-bright)}.row-diff-same .compare-cell{opacity:.6}@media (width<=768px){.compare-toolbar{flex-direction:column;align-items:stretch}.compare-search-box{max-width:none}.compare-grid,.compare-sticky-grid{grid-template-columns:160px repeat(var(--total-cols), minmax(170px, 1fr))}}
