#reputationSection { scroll-margin-top: 100px; }
.reputations-section { grid-column: 1 / -1; padding: 30px; }
.reputation-heading { align-items: center; }
.reputation-tabs[hidden], .reputation-panel[hidden] { display: none; }
.reputation-tabs button { white-space: nowrap; }
.reputation-content { position: relative; z-index: 1; }
.reputation-featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.reputation-faction { min-width: 0; padding: 24px 12px 22px; text-align: center; border: 1px solid rgba(var(--accent-2-rgb), .18); border-radius: 18px; background: radial-gradient(ellipse at 50% 25%, rgba(var(--accent-2-rgb), .085), transparent 72%), rgba(8, 7, 12, .34); }
.reputation-orbit { position: relative; width: min(144px, 100%); aspect-ratio: 1; margin: 0 auto 15px; }
.reputation-ring { display: block; width: 100%; height: 100%; overflow: visible; fill: none; }
.reputation-ring-track { stroke: rgba(var(--accent-2-rgb), .12); stroke-width: 6; }
.reputation-ring-fill { stroke-width: 6; stroke-linecap: round; }
.reputation-orbit-centre { position: absolute; inset: 18%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid rgba(var(--accent-3-rgb), .08); border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(var(--accent-2-rgb), .12), transparent 75%); }
.reputation-emblem { width: 46%; height: 46%; flex: 0 0 auto; color: var(--accent-3); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reputation-emblem-custom { display: block; background: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
.reputation-rank { color: var(--text); font-family: "Bungee", sans-serif; font-size: .8rem; line-height: 1; font-weight: 400; }
.reputation-faction h4 { min-height: 2.4em; margin: 0; font-size: .78rem; line-height: 1.2; font-weight: 600; text-wrap: balance; }
.reputation-standing { margin: 8px 0 5px; color: var(--accent-3); font-size: .64rem; }
.reputation-faction-detail { display: block; color: var(--muted); font-size: .5rem; line-height: 1.4; }
.reputation-expansions { max-height: min(420px, 55svh); overflow-x: hidden; overflow-y: auto; padding-right: 10px; border-top: 1px solid var(--line); scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-3-rgb), .45) transparent; }
.reputation-expansions:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; border-radius: 5px; }
.reputation-expansions::-webkit-scrollbar { width: 6px; }
.reputation-expansions::-webkit-scrollbar-track { background: transparent; }
.reputation-expansions::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(var(--accent-3-rgb), .45); }
.reputation-expansion { border-bottom: 1px solid var(--line); }
.reputation-expansion summary { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 3px; cursor: pointer; list-style: none; }
.reputation-expansion summary::-webkit-details-marker { display: none; }
.reputation-expansion summary:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; border-radius: 5px; }
.reputation-expansion-name { flex: 1; font-size: .73rem; font-weight: 500; }
.reputation-expansion-count { flex: 0 0 auto; color: var(--muted); font-size: .54rem; }
.reputation-chevron { width: 8px; height: 8px; flex: 0 0 auto; margin-right: 4px; border-right: 1.5px solid var(--accent-3); border-bottom: 1.5px solid var(--accent-3); transform: rotate(45deg); }
.reputation-expansion[open] .reputation-chevron { transform: rotate(225deg); }
.reputation-expansion-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; padding: 5px 3px 24px; }
.reputation-row { min-width: 0; }
.reputation-row-labels { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.reputation-row-name { font-size: .64rem; line-height: 1.3; }
.reputation-row-standing { flex: 0 0 auto; color: var(--accent-3); font-size: .54rem; }
.reputation-bar { height: 8px; margin: 10px 0 6px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .055); }
.reputation-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3)); }
.reputation-bar.is-unknown { opacity: .4; }
.reputation-row-detail { display: block; color: var(--muted); font-size: .5rem; }
.reputation-status { margin: 12px 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.reputation-retry { margin-top: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid rgba(var(--accent-2-rgb), .4); border-radius: 10px; background: rgba(var(--accent-1-rgb), .12); color: var(--text); font: inherit; font-size: .68rem; cursor: pointer; }
@media (max-width: 900px) {
    .reputations-section { padding: 22px; }
    .reputation-heading { display: grid; grid-template-columns: minmax(0, 1fr); }
    .reputation-tabs { width: 100%; }
    .reputation-tabs button { flex: 1; }
    .reputation-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .reputation-faction:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 10px) / 2); justify-self: center; }
    .reputation-faction { padding: 18px 8px; border-radius: 14px; }
    .reputation-orbit { width: min(132px, 100%); margin-bottom: 12px; }
    .reputation-faction h4 { font-size: .72rem; }
    .reputation-expansion-rows { grid-template-columns: 1fr; gap: 20px; }
    .reputation-expansions { max-height: min(360px, 48svh); padding-right: 8px; }
    .reputation-expansion summary { min-height: 58px; gap: 10px; }
    .reputation-expansion-name { font-size: .67rem; }
    .reputation-expansion-count { font-size: .49rem; }
}