/* Compact legacy profile achievement table. Unique selectors isolate it from old profile skins. */
.xf-profile-achievements {
    color: #bfd0df;
    background: #020a14;
    border: 1px solid #31527e;
    font: 10px/13px Tahoma, Verdana, Arial, sans-serif;
}

.xf-profile-achievements-summarybar {
    display: flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    color: #91abc3;
    background: #071a32;
    border-bottom: 1px solid #31527e;
}

.xf-profile-achievements-summarybar strong { flex: 1; color: #fff; }
.xf-profile-achievements-summarybar strong span,
.xf-profile-achievements-summarybar b { color: #f2bc02; }
.xf-profile-achievements-summarybar > span { margin-left: 13px; white-space: nowrap; }

.xf-profile-achievements-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 56px;
    min-height: 17px;
    padding: 0 7px 0 37px;
    color: #7193b2;
    background: #030e1c;
    border-bottom: 1px solid #1d3c5c;
    font: bold 8px/17px Tahoma, Verdana, Arial, sans-serif;
    text-transform: uppercase;
}

.xf-profile-achievements-head span:nth-child(2),
.xf-profile-achievements-head span:last-child { text-align: center; }

.xf-profile-achievements-list { background: #06172b; }

.xf-profile-achievement-row {
    display: grid !important;
    grid-template-columns: 23px minmax(0, 1fr) 92px 56px !important;
    align-items: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 3px 7px !important;
    color: #bfd0df !important;
    text-align: left !important;
    text-decoration: none !important;
    background: #06172b !important;
    border-bottom: 1px solid #183755 !important;
}

.xf-profile-achievement-row:nth-child(even) { background: #091d35 !important; }
.xf-profile-achievement-row:hover,
.xf-profile-achievement-row:focus {
    color: #fff !important;
    background: #102c4c !important;
    outline: 1px solid #f2bc02;
    outline-offset: -1px;
}

.xf-profile-achievement-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.xf-profile-achievement-icon > .xf-achievement-badge,
.xf-profile-achievement-icon > .xf-achievement-badge--small {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

.xf-profile-achievement-copy {
    display: block !important;
    min-width: 0 !important;
}

.xf-profile-achievement-copy strong,
.xf-profile-achievement-copy small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.xf-profile-achievement-copy strong { color: #f2bc02 !important; font-size: 10px !important; }
.xf-profile-achievement-copy small { color: #829fba !important; font-size: 9px !important; }

.xf-profile-achievement-progress {
    display: grid;
    grid-template-columns: 1fr 25px;
    align-items: center;
    gap: 4px;
}

.xf-profile-achievement-progress > span,
.xf-profile-achievement-next-meter {
    display: block;
    height: 5px;
    overflow: hidden;
    background: #01070d;
    border: 1px solid #315170;
}

.xf-profile-achievement-progress i,
.xf-profile-achievement-next-meter span {
    display: block;
    height: 100%;
    background: #f2bc02;
}

.xf-profile-achievement-progress small { color: #7695b2; font-size: 8px; text-align: right; }

.xf-profile-achievement-tier {
    color: #d7e4ef;
    font: bold 8px/11px Tahoma, Verdana, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.xf-profile-achievement-row.is-complete .xf-profile-achievement-tier { color: #f2bc02; }

.xf-profile-achievement-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 8px;
    padding: 5px 8px;
    color: #7896b2;
    background: #030e1c;
}

.xf-profile-achievement-next strong { color: #f2bc02; }
.xf-profile-achievement-next > span { white-space: nowrap; }
.xf-profile-achievement-next-meter { grid-column: 1 / 3; }

/* Full achievement page and shared 20px tier artwork. */
.profile-achievements-summary {
    color: #c7d7e8;
    background: #030e1c;
    border: 1px solid #193b60;
    box-shadow: inset 0 1px #315474;
}

.profile-achievement-stats {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    min-height: 35px;
    padding: 0 10px;
    color: #8cabc9;
    background: linear-gradient(#102c4d, #07182e);
    border-bottom: 1px solid #1d4268;
    font: 10px/14px Tahoma, Verdana, Arial, sans-serif;
}

.profile-achievement-stats strong { color: #fff; font-size: 11px; }
.profile-achievement-stats strong span,
.profile-achievement-stats > span b { color: #f2bc02; }
.profile-achievement-stats > span { white-space: nowrap; }

.profile-achievement-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
    padding: 4px 9px;
    color: #7694b2;
    text-transform: uppercase;
    background: #020b16;
    border-bottom: 1px solid #244463;
    font: bold 8px/11px Tahoma, Verdana, Arial, sans-serif;
}

.profile-achievement-list-head span:last-child { text-align: center; }

.profile-achievement-badge-grid {
    display: block !important;
    padding: 0 !important;
    background: #07172a !important;
}

.profile-achievement-badge-item {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 72px !important;
    grid-template-rows: auto 7px !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 45px !important;
    padding: 5px 8px !important;
    color: #d6e4f1 !important;
    text-align: left !important;
    text-decoration: none !important;
    background: #071b31 !important;
    border-bottom: 1px solid #173a5b !important;
    box-shadow: inset 0 1px #0d2944 !important;
}

.profile-achievement-badge-item:nth-child(even) {
    background: #051529 !important;
}

.profile-achievement-badge-item:hover,
.profile-achievement-badge-item:focus {
    color: #fff !important;
    background: linear-gradient(#153b63, #0a2340) !important;
    outline: 1px solid #f2bc02;
    outline-offset: -1px;
}

.profile-achievement-badge-item > .xf-achievement-badge {
    grid-row: 1 / 3;
    justify-self: center;
}

.profile-achievement-badge-copy {
    display: block !important;
    min-width: 0 !important;
    line-height: 13px !important;
}

.profile-achievement-badge-copy strong,
.profile-achievement-badge-copy small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.profile-achievement-badge-copy strong { color: #f2bc02 !important; font-size: 11px !important; }
.profile-achievement-badge-copy small { margin-top: 1px; color: #86a8c8 !important; font-size: 9px !important; }

.profile-achievement-rank {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: stretch;
    min-width: 0;
    padding: 3px 4px;
    color: #f7d86b;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(#3b3108, #1b1704);
    border: 1px solid #79650b;
    font: bold 8px/11px Tahoma, Verdana, Arial, sans-serif;
}

.profile-achievement-badge-item.is-complete .profile-achievement-rank {
    color: #ffe069;
    border-color: #7c6505;
    background: #2a2203;
}

.profile-achievement-progress {
    grid-column: 2;
    height: 5px;
    overflow: hidden;
    background: #020a13;
    border: 1px solid #1d3f60;
    box-shadow: inset 1px 1px #000;
}

.profile-achievement-progress span,
.xf-achievement-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #be7800, #f2bc02 72%, #ffe66a);
    box-shadow: inset 0 1px #fff2a2;
}

.profile-achievement-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 9px;
    padding: 7px 10px;
    color: #9db7d0;
    background: #061426;
    border-top: 1px solid #22476d;
    font-size: 10px;
}

.profile-achievement-next strong { color: #f2bc02; }
.profile-achievement-next .xf-achievement-progress { grid-column: 1 / 3; margin: 0; }
.profile-achievement-next > span { color: #718eaa; white-space: nowrap; }

.xf-achievement-progress {
    height: 7px;
    overflow: hidden;
    background: #020a13;
    border: 1px solid #34577d;
    box-shadow: inset 1px 1px #000;
}

.xf-achievement-badge,
.xf-achievement-badge--small,
.xf-achievement-badge--large {
    position: relative !important;
    display: inline-block !important;
    flex: none !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
}

.xf-achievement-emblem {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.xf-achievement-emblem-icon {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
}

.xf-achievement-emblem-icon img { display: block; width: 20px; height: 20px; max-width: none; }
.xf-achievement-emblem-rank { display: none !important; }
.xf-achievement-badge.is-locked .xf-achievement-emblem { filter: grayscale(1) brightness(.46); opacity: .64; }

.xf-achievement-lock {
    position: absolute;
    right: -5px !important;
    bottom: -3px !important;
    box-sizing: border-box;
    width: 13px !important;
    height: 12px !important;
    color: transparent;
    background: linear-gradient(#748392, #344454);
    border: 1px solid #111;
    border-radius: 0;
    transform: scale(.72);
    transform-origin: bottom right;
    box-shadow: inset 0 1px #a5b0ba, 1px 1px #000;
}

.xf-achievement-lock::before {
    position: absolute;
    top: -6px;
    left: 2px;
    box-sizing: border-box;
    width: 7px;
    height: 8px;
    content: "";
    border: 2px solid #8794a0;
    border-bottom: 0;
}

.xf-achievement-lock::after {
    position: absolute;
    top: 3px;
    left: 5px;
    width: 2px;
    height: 5px;
    content: "";
    background: #111;
}

.xf-achievement-tooltip {
    position: absolute;
    z-index: 1000;
    bottom: calc(100% + 8px);
    left: 50%;
    visibility: hidden;
    width: 210px;
    margin-left: -105px;
    padding: 7px 9px;
    color: #dceafb;
    text-align: left;
    pointer-events: none;
    background: #061426;
    border: 1px solid #58789e;
    opacity: 0;
    box-shadow: 0 3px 9px #000;
    font: 11px/15px Tahoma, Verdana, Arial, sans-serif;
}

.xf-achievement-tooltip strong { color: #ffc800; }
.xf-achievement-tooltip em { color: #85bff5; font-style: normal; }
.xf-achievement-tooltip.is-portal {
    position: fixed !important;
    z-index: 2147483647 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    visibility: visible !important;
}
.xf-achievement-tooltip.is-portal.is-visible { opacity: 1 !important; }
.xf-achievement-badge > .xf-achievement-tooltip { display: none !important; }

.achievements-full-content { padding: 10px; background: #030e1c; }

.achievements-overview {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 10px;
    padding: 9px 11px;
    color: #9fb7cf;
    background: linear-gradient(#14375d, #081b33);
    border: 1px solid #31577d;
    box-shadow: inset 0 1px #4d6f91;
}

.achievements-overview strong { color: #f2bc02; font-size: 16px; }
.achievements-overview span { margin-left: auto; color: #ffe06a; font-weight: bold; }

.achievement-family {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 10px 14px;
    margin-bottom: 7px;
    padding: 10px;
    background: linear-gradient(90deg, #07182d, #0b2747);
    border: 1px solid #24486f;
    box-shadow: inset 0 1px #31577a;
}

.achievement-family-info h2 { margin: 0 0 3px; color: #f2bc02; text-align: left !important; font-size: 13px; }
.achievement-family-info p { margin: 0 0 6px; color: #9fb8d1; line-height: 14px; }
.achievement-family-info > strong { color: #fff; font-size: 10px; }

.achievement-family-tiers {
    display: grid;
    grid-template-columns: repeat(5, minmax(58px, 1fr));
    gap: 5px;
}

.achievement-tier {
    min-width: 0;
    padding: 7px 3px 5px;
    color: #f2bc02;
    text-align: center;
    background: #041222;
    border: 1px solid #193b5d;
    box-shadow: inset 0 1px #234667;
}

.achievement-tier > .xf-achievement-badge { display: block !important; margin: 0 auto 4px; }
.achievement-tier > span,
.achievement-tier > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achievement-tier > span { text-transform: uppercase; font-size: 9px; font-weight: bold; }
.achievement-tier > small { margin-top: 2px; color: #7899b8; font-size: 8px; }

.achievement-family-progress {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    color: #829fbb;
    font-size: 9px;
}

.achievement-family-progress .xf-achievement-progress { margin: 0; }

/* Keep role markers loaded after the shared layout bundle. */
.xf-role-badge--admin {
    color: #fff !important;
    background: linear-gradient(#d84a45, #8e1717) !important;
    border-color: #6f1111 !important;
}