.compare-hero {
  padding: 76px 0 58px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 88% 18%, rgba(102, 196, 255, .12), transparent 32%), linear-gradient(180deg, #111d31, #0b1423);
}
.compare-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 34px; align-items: center; }
.compare-hero h1 { max-width: 760px; }
.compare-warning { padding: 22px; }
.compare-warning p { margin: 7px 0 0; color: var(--muted); }
.compare-controls-section { padding-bottom: 20px; }
.compare-controls { padding: 22px; }
.compare-select-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.compare-level-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.compare-control-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.optional-label { color: var(--muted); font-size: .72rem; font-weight: 650; }
.form-status { min-height: 1.2em; margin: 11px 0 0; color: var(--muted); font-size: .8rem; }
.compare-results-section { padding-top: 12px; }
.compare-section { margin-top: 30px; }
.compare-section:first-child { margin-top: 0; }
.compare-section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 14px; }
.compare-section-heading h2, .compare-section-heading h3 { margin-bottom: 0; }
.compare-section-heading > p { max-width: 620px; margin: 0; color: var(--muted); font-size: .84rem; }
.compare-grid { --compare-columns: 2; display: grid; grid-template-columns: repeat(var(--compare-columns), minmax(0, 1fr)); gap: 14px; }
.compare-hero-card { min-width: 0; padding: 20px; }
.compare-identity { display: grid; grid-template-columns: 92px 1fr; gap: 15px; align-items: center; }
.compare-avatar-wrap { position: relative; width: 92px; height: 92px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #091321; }
.compare-avatar { width: 100%; height: 100%; object-fit: cover; }
.compare-image-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--accent); font-size: 1.35rem; font-weight: 950; }
.compare-identity h3 { margin: 0 0 6px; }
.compare-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.compare-meta span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .68rem; font-weight: 800; }
.compare-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.compare-tag { display: inline-flex; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #0a1423; color: #e2e9f4; font-size: .7rem; font-weight: 750; }
.compare-tag.shared { border-color: rgba(102,196,255,.48); background: rgba(102,196,255,.08); }
.compare-tag.unique { border-color: rgba(243,201,105,.45); background: rgba(243,201,105,.07); }
.comparison-insights { padding: 20px; }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 14px; }
.insight-card { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #091321; }
.insight-card span, .insight-card strong { display: block; }
.insight-card span { color: var(--muted); font-size: .7rem; }
.insight-card strong { margin-top: 4px; }
.insight-note { margin: 14px 0 0; color: var(--muted); font-size: .82rem; }
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.compare-table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--surface); }
.compare-table th, .compare-table td { padding: 13px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.compare-table th:first-child { width: 180px; text-align: left; color: var(--muted); }
.compare-table thead th { color: var(--accent); }
.compare-table tr:last-child > * { border-bottom: 0; }
.compare-table tr > *:last-child { border-right: 0; }
.compare-table td.best-value { background: rgba(91, 214, 153, .08); color: var(--success); font-weight: 950; }
.compare-column-stack { display: grid; gap: 13px; }
.compare-skill-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.compare-skill-head { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; }
.compare-skill-icon-wrap { position: relative; width: 58px; height: 58px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #091321; }
.compare-skill-icon { width: 100%; height: 100%; object-fit: cover; }
.compare-skill-number { display: grid; place-items: center; width: 100%; height: 100%; color: var(--accent); font-size: 1.15rem; font-weight: 950; }
.compare-skill-card h4 { margin: 0 0 5px; }
.compare-skill-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.effect-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.effect-item { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #091321; }
.effect-item span, .effect-item strong { display: block; }
.effect-item span { color: var(--muted); font-size: .65rem; }
.effect-item strong { margin-top: 3px; color: var(--accent); }
.compare-unavailable { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.gear-card { min-width: 0; padding: 18px; }
.gear-top { display: grid; grid-template-columns: 105px 1fr; gap: 14px; align-items: center; }
.gear-image-wrap { position: relative; display: grid; place-items: center; width: 105px; height: 105px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #091321; }
.gear-image { width: 100%; height: 100%; object-fit: contain; }
.gear-top h4 { margin: 0 0 4px; }
.gear-top p { margin: 0; color: var(--muted); font-size: .77rem; }
.gear-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 14px; }
.gear-stat { padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #091321; }
.gear-stat span, .gear-stat strong { display: block; }
.gear-stat span { color: var(--muted); font-size: .63rem; }
.gear-stat strong { margin-top: 2px; font-size: .79rem; }
.gear-skills { display: grid; gap: 10px; margin-top: 14px; }
.compare-data-note { margin-top: 22px; color: var(--muted); font-size: .74rem; text-align: right; }
@media (max-width: 980px) {
  .compare-hero-grid { grid-template-columns: 1fr; }
  .compare-select-grid { grid-template-columns: repeat(2, 1fr); }
  .compare-level-grid { grid-template-columns: 1fr 1fr; }
  .compare-control-actions { grid-column: 1 / -1; }
  .insight-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-select-grid, .compare-level-grid { grid-template-columns: 1fr; }
  .compare-control-actions { grid-column: auto; }
  .compare-section-heading { align-items: flex-start; flex-direction: column; }
  .compare-identity { grid-template-columns: 76px 1fr; }
  .compare-avatar-wrap { width: 76px; height: 76px; }
  .effect-list, .gear-stats { grid-template-columns: 1fr; }
}