.compare-form, .compare-summary { padding: 20px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-panel); }
.compare-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compare-results { --compare-card-width: 300px; --compare-column-gap: 16px; overflow-x: auto; }
.compare-toggles { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; }
.compare-toggles label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.compare-builds, .compare-stat-pair { display: grid; grid-template-columns: repeat(2, var(--compare-card-width)); gap: var(--compare-column-gap); }
.compare-summary, .compare-stat-group { box-sizing: border-box; min-width: 0; }
.compare-builds { margin-top: var(--site-block-gap); }
.compare-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.compare-picker legend { margin-bottom: 11px; font-weight: 600; }
.compare-picker select { width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-page); color: var(--color-text); margin-bottom: 16px; font: inherit; }
.compare-summary header { display: flex; align-items: center; gap: 12px; }
.compare-summary h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.compare-summary h3 { font-size: 13px; margin: 18px 0 10px; }
.compare-styles { display: grid; gap: 8px; }
.compare-style-row { display: flex; align-items: center; gap: inherit; min-width: 0; }
.compare-styles .playstyle-set-slot { box-sizing: border-box; flex: 0 1 auto; min-width: 0; width: 46px; height: auto; aspect-ratio: 1; }
.compare-styles .playstyle-set-slot.is-signature { margin-inline-end: 0; }
.compare-styles .playstyle-set-slot img { width: 70%; height: 70%; }
.compare-meta { display: flex; flex-wrap: wrap; gap: 16px; }
.compare-meta:not(.compare-star-rows){justify-content:space-between}
.compare-meta dt { font-size: 11px; color: var(--color-text-muted); }
.compare-meta dd { margin: 6px 0 0; font-weight: 600; }
.compare-stars { display: flex; gap: 3px; font-size: 20px; color: var(--color-text); }
.compare-stars .is-better { color: var(--color-brand); }
.compare-stars .is-empty { color: var(--color-text-muted); opacity: .4; }
.compare-star-rows { display: grid; gap: 4px; margin-bottom: 0; }
.compare-star-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.compare-star-rows dt { font-size: 11px; font-weight: 600; color: var(--color-text); }
.compare-star-rows dd { margin: 0; color: var(--color-brand); }
.compare-difference { font-size: 0.9em; }
@media (max-width:650px) { .compare-selectors { grid-template-columns: minmax(0, 1fr); } .compare-form { padding: 14px; } }
.compare-attributes { margin-top: calc(var(--site-block-gap) + 30px); }
.account-card .compare-attributes > h2 { margin-bottom: 8px; }
.compare-attributes > .account-help { margin-top: 0; }
.compare-stat-group { min-width: 0; padding: 20px; background: var(--color-panel); border-inline: 1px solid var(--color-border); }
.compare-stat-pair:first-of-type .compare-stat-group { border-top: 1px solid var(--color-border); border-radius: 12px 12px 0 0; }
.compare-stat-pair:last-child .compare-stat-group { border-bottom: 1px solid var(--color-border); border-radius: 0 0 12px 12px; }
.compare-stat-group h3 { margin: 0 0 18px; font-size: 13px; }
.compare-stat { margin-top: 14px; color: var(--color-text-muted); }
.compare-stat-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.compare-stat-label strong { white-space: nowrap; }
.compare-stat-track { height: 2px; background: var(--color-border); margin-top: 6px; }
.compare-stat-track span { display: block; height: 100%; background: var(--stat-rating-color); max-width: 100%; }
.compare-stat .is-positive { color: var(--color-rating-high); }
.compare-stat .is-negative { color: var(--color-error); }
.compare-error { color: var(--color-error); }
.compare-group-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.compare-group-style { width: 26px; height: 26px; opacity: .25; }
.compare-group-style:is(.is-silver, .is-gold) { opacity: 1; }
.compare-stat[hidden], .compare-stat-pair[hidden] { display: none; }
@media(max-width:650px) {
.compare-results { --compare-column-gap: 10px; overflow-x: hidden; }
.compare-results :is(.compare-builds, .compare-stat-pair) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-summary, .compare-stat-group { padding: 10px; }
.compare-summary header { flex-wrap: wrap; gap: 6px; }
.compare-summary h2 { font-size: 14px; }
.compare-meta:not(.compare-star-rows) { gap: 10px; }
.compare-meta dd { font-size: 12px; }
.compare-styles { gap: 4px; }
.compare-styles .playstyle-set-slot { box-sizing: border-box; width: 26px; height: 26px; font-size: 17px; }
.compare-styles .playstyle-set-slot img { width: 20px; height: 20px; }
.compare-star-rows > div { flex-wrap: wrap; gap: 4px; }
.compare-stars { font-size: 17px; gap: 1px; }
.compare-group-styles { gap: 4px; }
.compare-group-style { width: 20px; height: 20px; }
.compare-stat-label { font-size: 11px; flex-wrap: wrap; gap: 4px; }
.compare-stat-label strong { margin-left: auto; }
}

.account-card .compare-differences { margin:4px 0 12px;width:auto }
.compare-differences > span:last-child { line-height: 1.4; }
.compare-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 16px; }
.account-card .compare-picker input { color: var(--color-text-muted); font-size: 12px; }
.compare-summary h2 a { color: var(--color-text); text-decoration: none; }
.compare-summary h2 a:hover { color: var(--color-brand); }
@media (max-width: 650px) {
    .compare-toggles { flex-wrap: nowrap; gap: 10px; }
    .compare-actions { flex-wrap: nowrap; gap: 6px; }
    .compare-actions .page-action { flex: 1 1 0; min-width: 0; padding: 9px 5px; font-size: 11px; white-space: nowrap; }
}

.compare-form.community-intro{--panel-inline-padding:20px;margin-bottom:0}
.compare-footer{margin:16px calc(-1 * var(--panel-inline-padding)) calc(-1 * var(--panel-inline-padding));border-radius:0 0 12px 12px}
.compare-footer .compare-toggles{margin:0;flex-wrap:wrap}
.compare-footer .compare-actions{margin:0 0 0 auto;gap:8px}
.compare-styles .site-tooltip::after{left:0;right:auto;max-width:180px;white-space:normal;text-align:left}
.compare-styles .club-origin-badge{cursor:help}
@media(max-width:650px){.compare-form.community-intro{--panel-inline-padding:16px;padding:16px}.compare-footer{gap:14px}.compare-footer .compare-actions{width:100%;margin:0;flex-wrap:wrap}.compare-footer .compare-actions .page-action{flex:1 1 auto}}
.account-card.account-settings-page.comparison-page{padding-bottom:110px}
.compare-form .compare-selectors{padding-top:20px}
.compare-picker[hidden]{display:none}
.compare-selectors:has([data-comparison-side='right'][hidden]){grid-template-columns:minmax(0,1fr)}
.compare-results.is-single-build :is(.compare-builds,.compare-stat-pair){grid-template-columns:var(--compare-card-width)}
@media(max-width:650px){.compare-results.is-single-build :is(.compare-builds,.compare-stat-pair){grid-template-columns:minmax(0,calc((100% - var(--compare-column-gap))/2))}}
[data-compare-results][aria-busy='true']{opacity:.55}
.account-card .compare-picker legend{font-size:12px;font-weight:500}
@media(max-width:650px){.compare-picker legend{margin-bottom:7px}.compare-selectors{row-gap:26px}}
.compare-form.page-header{overflow:visible;z-index:2}
.compare-combobox{position:relative}
.account-card .compare-combobox input{padding-right:44px}
.compare-picker-toggle{position:absolute;right:1px;top:1px;display:grid;place-items:center;width:40px;height:calc(100% - 2px);padding:0;border:0;border-radius:0 8px 8px 0;background:transparent;color:var(--color-text-caption);cursor:pointer}
.compare-picker-options{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:45;max-height:240px;overflow-y:auto;padding:5px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-panel);box-shadow:0 8px 24px #0005}
.compare-picker-options[hidden]{display:none}
.compare-picker-options [data-compare-option]{display:block;width:100%;padding:11px 12px;border:0;border-radius:5px;background:transparent;color:var(--color-text);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.compare-picker-options [data-compare-option][hidden]{display:none}
.compare-picker-options [data-compare-option]:hover,.compare-picker-options [aria-selected='true']{background:var(--color-surface-hover);color:var(--color-brand)}
.compare-picker-empty{display:block;padding:12px;color:var(--color-text-caption);font-size:12px}
.compare-picker-empty[hidden]{display:none}
.compare-summary{position:relative}
.compare-summary header{padding-right:20px}
.compare-remove{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--color-text-meta);cursor:pointer}
.compare-remove:hover,.compare-remove:focus-visible{color:var(--color-text);background:var(--color-surface-hover)}
.compare-remove:focus-visible{outline: 1px solid var(--color-text-meta);outline-offset:2px}
.compare-remove[hidden]{display:none}
.compare-card-remove{position:absolute;top:10px;right:8px}
.compare-input-remove{position:absolute;right:40px;top:50%;transform:translateY(-50%)}
.account-card .compare-combobox input{padding-right:76px}
.compare-styles .site-tooltip::after{display:none}
.compare-floating-tooltip{position:fixed;z-index:1000;box-sizing:border-box;max-width:min(260px,calc(100vw - 16px));padding:9px 11px;border:1px solid var(--color-success-alpha-48);border-radius:7px;background:var(--color-panel);color:var(--color-text);font-size:11px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;pointer-events:none;box-shadow:0 6px 20px #0005}
.compare-floating-tooltip[hidden]{display:none}
.compare-stat-label .is-maximum{color:var(--color-rating-high)}
.compare-maximum-arrow{display:inline-block;margin-right:4px;color:var(--color-rating-high);font-size:14px;font-weight:700;line-height:1}
.compare-results.is-three-builds :is(.compare-builds,.compare-stat-pair){grid-template-columns:repeat(3,var(--compare-card-width))}
.compare-selectors:has([data-comparison-side='third']:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:650px){.compare-results.is-three-builds{overflow-x:auto;max-width:100%}.compare-results.is-three-builds :is(.compare-builds,.compare-stat-pair){grid-template-columns:repeat(3,calc((100% - var(--compare-column-gap))/2))}.compare-selectors:has([data-comparison-side='third']:not([hidden])){grid-template-columns:minmax(0,1fr)}}

.compare-floating-tooltip{border:0;border-radius:5px;background:var(--color-tooltip-background);color:var(--color-text-tooltip);box-shadow:none;font-size:12px;padding-bottom:15px;clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 0.4px) calc(100% - 9px),calc(100% - 1.5px) calc(100% - 7.5px),calc(100% - 3px) calc(100% - 6.4px),calc(100% - 5px) calc(100% - 6px),calc(50% + 6px) calc(100% - 6px),50% 100%,calc(50% - 6px) calc(100% - 6px),5px calc(100% - 6px),3px calc(100% - 6.4px),1.5px calc(100% - 7.5px),0.4px calc(100% - 9px),0 calc(100% - 11px))}
@media(max-width:650px){.comparison-page .builder-tools button:not(#builder_scroll_top){width:auto;min-width:0;padding:6px 9px;gap:5px}.comparison-page .builder-tools .builder-tool-label{display:inline;font-size:11px;white-space:nowrap}}
.comparison-page .builder-tools button:disabled,.comparison-page .builder-tools button:disabled:hover{opacity:.4;color:var(--color-text-meta);border-color:var(--color-border);background:var(--color-page);cursor:default;box-shadow:none}
.compare-pending{display:flex;align-items:flex-start;gap:12px;margin-bottom:var(--site-block-gap,10px);padding:16px 20px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-panel)}.compare-pending>div{flex:1;min-width:0}.comparison-page .compare-pending-title{margin:0;color:var(--color-text-meta);font-size:14px;line-height:1.5}.compare-pending-title strong{color:var(--color-text);font-weight:600}.comparison-page .compare-pending-description{margin:6px 0 0;color:var(--color-text-caption);font-size:12px;line-height:1.5}.compare-pending>button{flex:0 0 28px;width:28px;height:28px;margin:-4px -8px 0 0;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--color-text-meta);font:400 24px/1 Arial,sans-serif;cursor:pointer}.compare-pending>button:hover{border-color:var(--color-border-hover)}@media(max-width:650px){.compare-pending{padding:14px 15px}.comparison-page .compare-pending-title{font-size:13px}}
.compare-pending>[data-cancel-comparison-pending]{flex:0 0 auto;width:auto;height:32px;margin:0;padding:6px 10px;border-color:var(--color-border);background:var(--color-page);font:inherit;font-size:12px;color:var(--color-text);white-space:nowrap}@media(max-width:650px){.compare-pending{flex-wrap:wrap}.compare-pending>div{flex-basis:100%}}
.compare-summary header{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:8px}.compare-summary header>img{width:24px;height:24px;flex:0 0 24px}