body {
    font-family: 'Inter', sans-serif;
    background-color: #0D1117;
    color: #C9D1D9; 
}

/* --- Page layout --- */
.app-shell {
    max-width: 1440px;
    margin: 0 auto;
}
.app-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.app-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.class-selector {
    display: inline-flex;
    height: 2.5rem;
    padding: 0.2rem;
    gap: 0.2rem;
    background-color: #0D1117;
    border: 1px solid #30363D;
    border-radius: 0.5rem;
}
.class-selector button {
    padding: 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8B949E;
    border-radius: 0.35rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.class-selector button:hover {
    color: #E6EDF3;
}
.class-selector button.active {
    color: #FFFFFF;
    background-color: #30363D;
}
@media (max-width: 640px) {
    .class-selector {
        width: 100%;
    }
    .class-selector button {
        flex: 1;
    }
    .app-actions .header-btn {
        flex: 1 1 auto;
        padding: 0 0.6rem;
    }
}
.header-btn {
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.header-btn-primary {
    color: #FFFFFF;
    background-color: #1F6FEB;
    border: 1px solid #388BFD;
}
.header-btn-primary:hover {
    background-color: #388BFD;
}
.header-btn-outline {
    color: #E6EDF3;
    background-color: transparent;
    border: 1px solid #30363D;
}
.header-btn-outline:hover {
    border-color: #8B949E;
    background-color: #161B22;
}
.header-btn-quiet {
    padding: 0 0.6rem;
    color: #8B949E;
    font-weight: 600;
}
.header-btn-quiet:hover {
    color: #F85149;
}
.app-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.workspace {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}
.armor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .app-header {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}
@media (min-width: 1024px) {
    .app-layout {
        grid-template-columns: 300px minmax(0, 1fr);
    }
    .stats-sidebar {
        position: sticky;
        top: 1rem;
    }
    .stats-sidebar.is-tall {
        position: static;
    }
}

.stat-bar-bg { 
    background-color: #21262D; 
    position: relative;
}
.stat-bar-bg::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background-color: transparent;
    transform: translateX(-50%);
    z-index: 1;
}
.stat-bar-fill {
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.stat-card, .armor-card {
    background-color: #161B22;
    border: 1px solid #30363D;
}
.helper-text {
    color: #8B949E;
    font-style: italic;
    font-weight: 400;
}
/* --- Armor card --- */
.armor-card {
    padding: 0.75rem 1rem 1rem;
}
.armor-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.armor-card svg.h-12.w-12 {
    width: 3rem;
    height: 3rem;
}
.summary-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.armor-reset {
    margin-left: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.armor-slot-icon-wrapper {
    flex-shrink: 0;
}
.armor-piece-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.375rem;
    border: 1px solid #D29922;
    background-color: #21262D;
}
.armor-card-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}
.armor-set-tag {
    min-width: 0;
    padding: 0.05rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #E3B341;
    border: 1px solid rgba(227, 179, 65, 0.4);
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.armor-slot-icon {
    color: #8B949E;
}

/* Stat icon row */
.stat-pick-row {
    display: flex;
    justify-content: space-between;
    gap: 0.375rem;
    margin-top: 0.75rem;
}
.stat-pick-button,
.action-button,
.font-icon-button {
    background-color: #21262D;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.8rem;
    color: #C9D1D9;
    cursor: pointer;
}
.stat-pick-button {
    padding: 0.35rem;
}
.stat-pick-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert(1);
}
.stat-pick-button:not(:disabled):hover,
.action-button:hover,
.font-icon-button:hover {
    background-color: #30363D;
    border-color: #8B949E;
}
.stat-pick-button.is-primary {
    border: 2px solid #2563eb;
    background-color: #0d1117;
}
.stat-pick-button.is-secondary {
    border: 2px solid #3b82f6;
}
.stat-pick-button.is-tertiary {
    border: 2px dashed #60a5fa;
}
.stat-pick-button.is-masterwork {
    border: 2px dashed #F7B000;
}
.stat-pick-button.is-candidate {
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
    background-color: #1c2d44;
}
.stat-pick-button.is-dimmed {
  opacity: 0.3;
}
.stat-pick-button:disabled {
  cursor: default;
}
.stat-pick-button.is-mod {
    outline: 2px dashed #26A65A;
    outline-offset: -6px;
}
.stat-pick-button.is-tune-plus {
    box-shadow: inset 0 -3px 0 #FF6B6B;
}
.stat-pick-button.is-tune-minus {
    box-shadow: inset 0 -3px 0 rgba(255, 107, 107, 0.4);
}
.action-button.is-mod-active {
    color: #26A65A;
    border-color: #26A65A;
}
.action-button.is-tune-active {
    color: #FF6B6B;
    border-color: #FF6B6B;
}
.font-icon-button.active {
    color: #63B3ED;
    border-color: #63B3ED;
}
.action-button.disabled,
.font-icon-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #8B949E !important;
}
.action-button.disabled:hover,
.font-icon-button.disabled:hover {
    background-color: #21262D;
    border-color: transparent;
}
.font-button-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
}
.font-label {
    font-size: 0.7rem;
    line-height: 1;
}
.font-stat-icon svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* In-game style stat panel */
.armor-panel {
    margin-top: 0.75rem;
    background: linear-gradient(180deg, rgba(48, 54, 61, 0.55) 0%, rgba(22, 27, 34, 0.85) 100%);
    border: 1px solid #30363D;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem 0.625rem;
}
.panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid rgba(201, 209, 217, 0.15);
}
.panel-archetype-icon {
    width: 1.5rem;
    height: 1.5rem;
    filter: invert(1);
}
.panel-archetype-name {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #E6EDF3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1.5rem;
}

/* Compact Mod / Tune / Font buttons in the panel header; same height as the archetype icon */
.panel-actions {
    display: flex;
    gap: 0.2rem;
    margin-left: auto;
    flex-shrink: 0;
}
.panel-actions.hidden {
    display: none;
}
.panel-actions .action-button,
.panel-actions .font-icon-button {
    width: auto;
    height: 1.5rem;
    min-width: 1.9rem;
    padding: 0 0.25rem;
    border-width: 1px;
    border-radius: 0.375rem;
    font-size: 0.7rem;
}
.panel-actions .font-button-content {
    flex-direction: row;
    gap: 0.2rem;
}
.panel-actions .font-icon-button {
    min-width: 1.5rem;
}
.panel-actions .font-icon-button:not(.active) .font-label {
    display: none;
}
.panel-actions .font-stat-icon svg {
    width: 0.8rem;
    height: 0.8rem;
}
/* Fixed label and value columns so the bar width never shifts as values change */
.panel-rows {
    display: grid;
    grid-template-columns: 5.75rem 1fr 2.25rem;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.2rem;
    font-size: 0.85rem;
}
.panel-row {
    display: contents;
}
.panel-label {
    text-align: right;
    color: #8B949E;
    white-space: nowrap;
}
.panel-label.is-rolled {
    color: #E6EDF3;
}
.panel-label.is-archetype {
    color: #FFFFFF;
    font-weight: 700;
}
.tune-marker {
    display: inline-block;
    visibility: hidden;
    margin-right: 0.2rem;
    color: #C9D1D9;
}
.tune-marker.visible {
    visibility: visible;
}
.panel-bar {
    display: flex;
    height: 0.8rem;
    background-color: rgba(201, 209, 217, 0.12);
    overflow: hidden;
}
.panel-seg {
    height: 100%;
    transition: width 0.3s ease;
}
.seg-rolled { background-color: #F0F3F6; }
.seg-masterwork { background-color: #F7B000; }
.seg-tune-gain { background-color: #FF6B6B; }
.seg-mod { background-color: #26A65A; }
.seg-font { background-color: #63B3ED; }
.panel-seg + .panel-seg {
    box-shadow: inset 1px 0 0 rgba(13, 17, 23, 0.6);
}
.seg-tune-loss {
    background: repeating-linear-gradient(45deg, rgba(255, 107, 107, 0.6) 0 3px, transparent 3px 6px);
}
.panel-value {
    font-weight: 600;
    color: #E6EDF3;
}
.panel-total .panel-label,
.panel-total-value {
    padding-top: 0.3rem;
}
.panel-total .panel-label {
    color: #C9D1D9;
}
.panel-total-value {
    grid-column: 2 / -1;
    font-weight: 700;
    color: #FFFFFF;
}

@media (max-width: 640px) {
    .stat-pick-button,
    .action-button,
    .font-icon-button {
        width: 2.4rem;
        height: 2.4rem;
    }
    .panel-rows {
        grid-template-columns: 5.25rem 1fr 2rem;
        column-gap: 0.375rem;
        font-size: 0.8rem;
    }
}

/* --- Total stats column --- */
.stat-bonuses-container {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: #0d1117;
    border-radius: 0.375rem;
    border: 1px solid #30363d;
}

.is-enhanced span {
    color: #F7B000;
    font-weight: 500;
}

.enhanced-stat-total {
    color: #F7B000;
    font-weight: 600;
}

#stats-container {
  row-gap: 0.75rem !important;
}

.summary-stat-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
}

/* Target markers on the Total Stats bars */
.stat-target-tick {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background-color: #E6EDF3;
    border-radius: 1px;
    transform: translateX(-50%);
    z-index: 2;
    cursor: pointer;
}
.stat-target-tick::before {
    content: '';
    position: absolute;
    inset: -6px -8px;
}
.stat-target-tick.is-unmet {
    background-color: #F0883E;
}
.stat-target-tick.hidden {
    display: none;
}
.below-target {
    color: #F0883E !important;
}
.target-need {
    font-size: 0.7rem;
    font-weight: 500;
    color: #F0883E;
    margin-right: 0.35rem;
}
.targets-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: #58A6FF;
    white-space: nowrap;
}
.targets-link:hover {
    color: #79C0FF;
}

/* --- Build from Stats sheet --- */
body.sheet-open {
    overflow: hidden;
}
.targets-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 641px) {
    .targets-overlay {
        align-items: flex-start;
        padding-top: 5vh;
    }
}
.targets-overlay.hidden {
    display: none;
}
.sheet-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(1, 4, 9, 0.72);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.targets-overlay.open .sheet-backdrop {
    opacity: 1;
}
.sheet-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 2rem));
    max-height: min(90vh, 860px);
    background-color: #161B22;
    border: 1px solid #30363D;
    border-radius: 0.75rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.targets-overlay.open .sheet-dialog {
    opacity: 1;
    transform: none;
}
.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.5rem;
}
.sheet-head h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #E6EDF3;
}
.sheet-close {
    font-size: 1.6rem;
    line-height: 1;
    color: #8B949E;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
}
.sheet-close:hover {
    color: #E6EDF3;
    background-color: #21262D;
}
.sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0 1.25rem 1rem;
}
.sheet-note {
    font-size: 0.8rem;
    color: #8B949E;
    margin-bottom: 0.75rem;
}
.target-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}
.target-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    background-color: #0D1117;
    border: 1px solid #21262D;
}
.target-row.is-set {
    border-color: #30363D;
}
.target-icon {
    width: 1.25rem;
    height: 1.25rem;
    filter: invert(1);
    opacity: 0.55;
}
.target-row.is-set .target-icon {
    opacity: 1;
}
.target-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: #8B949E;
}
.target-row.is-set .target-name {
    color: #E6EDF3;
}
.stepper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.stepper-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background-color: #21262D;
    border: 1px solid #30363D;
    color: #E6EDF3;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    touch-action: manipulation;
    user-select: none;
}
.stepper-btn:hover:not(:disabled) {
    border-color: #8B949E;
}
.stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.stepper-value {
    width: 2.75rem;
    height: 2rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #E6EDF3;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}
.stepper-value:focus {
    outline: none;
    border-color: #58A6FF;
}
.sheet-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #C9D1D9;
}
.sheet-options + .sheet-options {
    margin-top: 0.5rem;
}
.sheet-options + .target-results {
    margin-top: 1rem;
}
.sheet-clear {
    margin-left: auto;
    padding: 0.3rem 0.85rem;
    border-radius: 0.375rem;
    background-color: #21262D;
    border: 1px solid #30363D;
    color: #E6EDF3;
    font-weight: 600;
}
.sheet-clear:hover {
    border-color: #8B949E;
}
.sheet-toggle input[role="switch"] {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 2rem;
    height: 1.1rem;
    border-radius: 999px;
    background-color: #30363D;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.sheet-toggle input[role="switch"]::after {
    content: '';
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #E6EDF3;
    transition: transform 0.15s ease;
}
.sheet-toggle input[role="switch"]:checked {
    background-color: #1F6FEB;
}
.sheet-toggle input[role="switch"]:checked::after {
    transform: translateX(0.9rem);
}
.sheet-toggle input[role="switch"]:focus-visible {
    outline: 2px solid #58A6FF;
    outline-offset: 2px;
}
.sheet-toggle,
.sheet-select {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
.sheet-hint {
    color: #8B949E;
    font-style: italic;
}
.sheet-select select {
    background-color: #21262D;
    border: 1px solid #30363D;
    border-radius: 0.375rem;
    padding: 0.2rem 0.4rem;
    color: #E6EDF3;
}
.target-results {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: opacity 0.15s ease;
}
.target-results.is-busy {
    opacity: 0.55;
}
.results-message {
    font-size: 0.85rem;
    color: #8B949E;
    text-align: center;
    padding: 1rem 0;
}
.results-unreachable {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(240, 136, 62, 0.5);
    background-color: rgba(240, 136, 62, 0.08);
    font-size: 0.85rem;
}
.results-unreachable strong {
    color: #F0883E;
}
.results-hint {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 500;
    color: #F7B000;
    padding: 0.35rem 0.6rem;
    border-radius: 0.375rem;
    border: 1px dashed rgba(247, 176, 0, 0.5);
}
.results-hint:hover {
    background-color: rgba(247, 176, 0, 0.08);
}
.result-card {
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #30363D;
    background-color: #0D1117;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.result-card:hover {
    border-color: #8B949E;
}
.result-card.selected {
    border-color: #58A6FF;
    background-color: #111B2B;
    box-shadow: 0 0 0 1px #58A6FF;
}
.result-card:focus-visible {
    outline: 2px solid #58A6FF;
    outline-offset: 2px;
}
.result-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.result-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #E6EDF3;
}
.result-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.badge-mods { color: #3FB950; }
.badge-balanced { color: #63B3ED; }
.badge-lucky { color: #F7B000; }
.result-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.25rem;
}
.result-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.25rem 0;
    border-radius: 0.375rem;
    color: #8B949E;
}
.result-stat.is-targeted {
    background-color: #161B22;
    color: #E6EDF3;
}
.result-stat img {
    width: 1rem;
    height: 1rem;
    filter: invert(1);
    opacity: 0.6;
}
.result-stat.is-targeted img {
    opacity: 1;
}
.result-value {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.result-over {
    font-size: 0.65rem;
    color: #3FB950;
    line-height: 1;
}
.result-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}
.result-chip {
    font-size: 0.7rem;
    color: #C9D1D9;
    background-color: #21262D;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}
.result-details {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #C9D1D9;
}
.result-details summary {
    cursor: pointer;
    color: #8B949E;
    width: fit-content;
}
.result-details ul {
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.result-slot {
    display: inline-block;
    min-width: 4.5rem;
    color: #8B949E;
    font-weight: 600;
}
.sheet-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #30363D;
}
.sheet-apply {
    width: 100%;
    height: 2.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    color: #FFFFFF;
    background-color: #1F6FEB;
    border: 1px solid #388BFD;
    transition: background-color 0.15s ease;
}
.sheet-apply:hover:not(:disabled) {
    background-color: #388BFD;
}
.sheet-apply:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .targets-overlay {
        align-items: stretch;
    }
    .sheet-dialog {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border: none;
        border-radius: 0;
        opacity: 1;
        transform: translateY(100%);
        transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .sheet-head {
        padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.5rem;
        border-bottom: 1px solid #30363D;
        margin-bottom: 0.75rem;
    }
    .sheet-close {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 2rem;
        margin-right: -0.5rem;
    }
    .sheet-body {
        padding: 0 1rem 1rem;
    }
    .target-rows {
        grid-template-columns: 1fr;
    }
    .sheet-footer {
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    }
}

/* --- Subclass and fragments --- */
.subclass-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 1rem 1rem;
  background: #161B22;
  border: 1px solid #30363D;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* With 2+ grid columns the card takes the armor row's height instead of setting it */
@media (min-width: 768px) {
  .subclass-card {
    contain: size;
  }
}
.subclass-card {
  position: relative;
}
.class-stat-picker {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
  background-color: rgba(22, 27, 34, 0.97);
  border-radius: 0.5rem;
}
.class-stat-picker.hidden {
  display: none;
}
.class-stat-picker-title {
  font-weight: 700;
  color: #E6EDF3;
}
.class-stat-picker-note {
  font-size: 0.8rem;
  color: #8B949E;
}
.class-stat-picker-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}
.class-stat-picker-options button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.6rem 0.25rem;
  font-weight: 700;
  color: #E6EDF3;
  background-color: #21262D;
  border: 1px solid #30363D;
  border-radius: 0.5rem;
}
.class-stat-picker-options button:hover {
  border-color: #58A6FF;
}
.class-stat-picker-options span {
  font-size: 0.7rem;
  font-weight: 500;
  color: #8B949E;
}
.class-stat-picker-cancel {
  font-size: 0.8rem;
  color: #8B949E;
}
.class-stat-picker-cancel:hover {
  color: #E6EDF3;
}
.subclass-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.fragment-count {
  font-size: 0.75rem;
  color: #8B949E;
}
#subclass-selector {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.3rem;
}
.subclass-btn {
  background: #21262D;
  color: #C9D1D9;
  border: 1px solid #30363D;
  border-radius: 0.375rem;
  padding: 0.3rem 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.2s, border 0.2s, color 0.2s;
}
.subclass-btn.active {
  background: #3081F7;
  color: #fff;
  border-color: #3081F7;
}
.subclass-btn:hover:not(.active) {
  background: #23272e;
  color: #fff;
}
#fragment-selector {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.fragment-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
}
.fragment-checkbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.3rem 0.15rem;
  background: #21262D;
  border-radius: 0.375rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}
.fragment-checkbox:hover {
  background: #2A3038;
  border-color: #3081F7;
}
.fragment-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
}
.fragment-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem;
  font-weight: 500;
  color: #C9D1D9;
}
.fragment-checkbox.selected {
    border-color: #F7B000;
}
#fragment-selector em {
    color: #8B949E;
    font-style: italic;
    display: block;
    text-align: center;
}

/* Subclass color coding */
.arc-btn.active { background: #4FD8EB; color: #fff; border-color: #4FD8EB; }
.arc-btn { border-color: #4FD8EB; }

.void-btn.active { background: #A259F7; color: #fff; border-color: #A259F7; }
.void-btn { border-color: #A259F7; }

.solar-btn.active { background: #F7B000; color: #fff; border-color: #F7B000; }
.solar-btn { border-color: #F7B000; }

.stasis-btn.active { background: #3081F7; color: #161B22; border-color: #3081F7; }
.stasis-btn { border-color: #3081F7; }

.strand-btn.active { background: #26A65A; color: #fff; border-color: #26A65A; }
.strand-btn { border-color: #26A65A; }

.prismatic-btn.active { background: #fff; color: #161B22; border-color: #fff; }
.prismatic-btn { border-color: #fff; }

#armor-sets-section {
  padding: 1rem 1.25rem 1.25rem;
}
.sets-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.sets-subtitle {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #8B949E;
}
.sets-search {
  width: min(320px, 100%);
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.85rem;
  color: #E6EDF3;
  background-color: #0D1117;
  border: 1px solid #30363D;
  border-radius: 0.5rem;
}
.sets-search:focus {
  outline: none;
  border-color: #58A6FF;
}
.sets-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.sets-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #C9D1D9;
  background-color: #21262D;
  border: 1px solid #30363D;
  border-radius: 999px;
}
.sets-chip span {
  font-size: 0.7rem;
  color: #8B949E;
}
.sets-chip:hover {
  border-color: #8B949E;
}
.sets-chip.active {
  color: #FFFFFF;
  background-color: #1F6FEB;
  border-color: #388BFD;
}
.sets-chip.active span {
  color: #CFE3FF;
}
.sets-chip-stat {
  margin-left: auto;
}
.sets-count {
  margin: 0.75rem 0 0.6rem;
  font-size: 0.75rem;
  color: #8B949E;
}
.sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 0.75rem;
}
.set-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: 0.7rem;
  padding: 0.85rem;
  background-color: #0D1117;
  border: 1px solid #21262D;
  border-radius: 0.5rem;
}
.set-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.set-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.375rem;
  border: 1px solid #30363D;
  background-color: #21262D;
}
.set-name {
  font-weight: 700;
  color: #E6EDF3;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-tags {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.set-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  align-items: baseline;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #21262D;
  font-size: 0.78rem;
}
.set-facts dt {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6E7681;
}
.set-facts dd {
  color: #C9D1D9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-category {
  padding: 0.05rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 0.25rem;
  background-color: #21262D;
  color: #C9D1D9;
}
.set-category-raid { background-color: rgba(163, 113, 247, 0.18); color: #D2A8FF; }
.set-category-dungeon { background-color: rgba(88, 166, 255, 0.16); color: #79C0FF; }
.set-category-crucible { background-color: rgba(248, 81, 73, 0.16); color: #FF7B72; }
.set-category-gambit { background-color: rgba(63, 185, 80, 0.16); color: #56D364; }
.set-category-vanguard-ops { background-color: rgba(240, 136, 62, 0.16); color: #FFA657; }
.set-category-destination { background-color: rgba(57, 197, 207, 0.16); color: #56D4DD; }
.set-stat-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  padding: 0.05rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #F7B000;
  border: 1px solid rgba(247, 176, 0, 0.4);
  border-radius: 999px;
}
.set-stat-tag svg {
  width: 0.75rem;
  height: 0.75rem;
}
.set-bonus {
  display: flex;
  gap: 0.6rem;
}
.set-bonus-count {
  flex-shrink: 0;
  width: 2.1rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #E6EDF3;
  background-color: #21262D;
  border: 1px solid #30363D;
  border-radius: 0.3rem;
}
.set-bonus-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #E6EDF3;
}
.set-bonus-text {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #C9D1D9;
}
.catalog-tabs {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #21262D;
}
.catalog-tab {
  margin-bottom: -1px;
  padding: 0.25rem 0 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #6E7681;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.catalog-tab:hover {
  color: #C9D1D9;
}
.catalog-tab.active {
  color: #E6EDF3;
  border-bottom-color: #E3B341;
}
.sets-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: auto;
}
.set-card.exotic-card {
  grid-row: span 4;
}
.exotic-icon {
  border-color: #CEAE33;
}
.set-category-exotic {
  background-color: rgba(206, 174, 51, 0.16);
  color: #E8C547;
}
.exotic-perk-badge {
  color: #E8C547;
  border-color: rgba(206, 174, 51, 0.5);
}
.set-actions.set-actions-single {
  grid-template-columns: 1fr;
}
.armor-slot-icon-wrapper.is-exotic .armor-piece-icon {
  border-color: #CEAE33;
  box-shadow: 0 0 10px rgba(206, 174, 51, 0.35);
}
.armor-set-tag.is-exotic {
  color: #161B22;
  background-color: #CEAE33;
  border-color: #CEAE33;
}
.set-card.is-selected {
  border-color: #D29922;
  box-shadow: 0 0 0 1px #D29922, 0 0 18px rgba(210, 153, 34, 0.15);
}
.set-selected-tag {
  flex-shrink: 0;
  padding: 0.05rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #161B22;
  background-color: #E3B341;
  border-radius: 0.25rem;
}
.set-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  align-self: end;
}
.set-actions-replace {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
}
.set-actions-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #E3B341;
}
.set-action {
  min-width: 0;
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #C9D1D9;
  background-color: #161B22;
  border: 1px solid #30363D;
  border-radius: 0.375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-action:hover {
  border-color: #E3B341;
  color: #FFFFFF;
}
.set-action.active {
  color: #161B22;
  background-color: #E3B341;
  border-color: #E3B341;
}
.set-action-cancel {
  color: #8B949E;
}
.sets-chip-selected.active {
  background-color: #9E6A03;
  border-color: #D29922;
}
.loadout-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 1rem 1rem;
  background: #161B22;
  border: 1px dashed #30363D;
  border-radius: 0.5rem;
}
.loadout-card.is-filled {
  border: 1px solid #D29922;
  box-shadow: 0 0 18px rgba(210, 153, 34, 0.12);
}
.loadout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.75rem;
}
.loadout-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8B949E;
}
.loadout-card.is-filled .loadout-label {
  color: #E3B341;
}
.loadout-remove {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.1rem;
  line-height: 1;
  color: #8B949E;
  border-radius: 0.375rem;
}
.loadout-remove:hover {
  color: #FFFFFF;
  background-color: #21262D;
}
.loadout-bonuses {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid #21262D;
}
.loadout-hint {
  font-size: 0.75rem;
  color: #8B949E;
  font-style: italic;
}
.loadout-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.5rem 0.5rem;
  text-align: center;
}
.loadout-empty-title {
  font-weight: 600;
  color: #C9D1D9;
}
.loadout-empty-text {
  max-width: 28ch;
  font-size: 0.78rem;
  color: #8B949E;
}
.loadout-pick {
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #E3B341;
  border: 1px solid rgba(227, 179, 65, 0.45);
  border-radius: 0.375rem;
}
.loadout-pick:hover {
  background-color: rgba(227, 179, 65, 0.1);
}
.stat-set-marker {
  padding: 0 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1rem;
  color: #161B22;
  background-color: #E3B341;
  border-radius: 0.25rem;
  cursor: help;
}
.tab-empty {
  padding: 2rem 0;
  text-align: center;
  color: #8B949E;
  font-style: italic;
}

.fragment-stats {
  max-width: 100%;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.fragment-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}
.fragment-stat svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Subclass stat text colors */
.fragment-stats-arc { color: #4FD8EB; }
.fragment-stats-void { color: #A259F7; }
.fragment-stats-solar { color: #F7B000; }
.fragment-stats-stasis { color: #3081F7; }
.fragment-stats-strand { color: #26A65A; }
.fragment-stats-prismatic { color: #C9D1D9; }