/* Forum identity: manually assigned ranks with a shared icon and colour system. */
.rank-custom-icon { display: inline-block; object-fit: contain; flex-shrink: 0; }
.member-name { display: inline-flex; align-items: center; gap: 5px; color: var(--rank-color); max-width: 100%; vertical-align: middle; }
.member-name > span:not(.sr-only) { min-width: 0; overflow-wrap: anywhere; }
.member-name > img { width: 15px; height: 15px; }
.member-name > svg { width: 15px; height: 15px; }
.forum-rank-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; padding: 7px 13px; border: 1px solid var(--rank-color); border-radius: 4px; color: var(--rank-color); background: linear-gradient(120deg, color-mix(in srgb, var(--rank-color) 12%, #111e24), #152027); box-shadow: inset 0 1px 0 #ffffff0a; font-size: 12px; font-weight: 600; line-height: 1.4; }
.forum-rank-badge > span { overflow-wrap: anywhere; min-width: 0; }
.forum-rank-badge img { width: 18px; height: 18px; }
.member-card { position: relative; border-top: 2px solid var(--rank-color); background: linear-gradient(165deg, color-mix(in srgb, var(--rank-color) 7%, #18262b), #142127); }
.member-card .topic-avatar { width: 62px; height: 62px; border-color: var(--rank-color); color: var(--rank-color); background: radial-gradient(ellipse at top, color-mix(in srgb, var(--rank-color) 17%, #23332f), #17252c); margin-bottom: 3px; }
.member-card > strong { width: 100%; }
.member-card > strong .member-name { justify-content: center; }
.member-card .forum-rank-badge { font-size: 10px; padding: 7px 9px; width: 100%; gap: 6px; }
.member-card .forum-rank-badge svg, .member-card .forum-rank-badge img { width: 15px; height: 15px; }
.member-post-count { display: flex; gap: 6px; align-items: center; font-size: 10px; color: #a6b9b6; margin-top: 4px; }
.topic-author-label { font-size: 9px; color: #a3b3b3; letter-spacing: .6px; }
.thread-layout .forum-post { grid-template-columns: 175px minmax(0, 1fr); }
.home-topic .member-name { display: inline-flex; }
.forum-rank-guide-link { display: flex; align-items: center; gap: 10px; margin: 0 15px; font-size: 12px; color: var(--gold-light); }
.forum-rank-guide-link > svg:last-child { margin-left: auto; }
.rank-page-heading { padding-block: 15px 35px; }
.rank-page-heading p { max-width: 630px; }
.public-rank-grid, .rank-admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 19px; padding-bottom: 35px; }
.rank-showcase, .rank-admin-card { position: relative; min-width: 0; border: 1px solid #3d4b43; border-top: 2px solid var(--rank-color); border-radius: 5px; padding: 27px 22px; background: radial-gradient(ellipse at 20% 0, color-mix(in srgb, var(--rank-color) 8%, #1a262b), #142027 70%); }
.rank-showcase { text-align: center; }
.rank-crest { width: 66px; height: 72px; display: grid; place-items: center; color: var(--rank-color); border: 1px solid color-mix(in srgb, var(--rank-color) 45%, transparent); border-radius: 10px 10px 25px 25px; background: color-mix(in srgb, var(--rank-color) 7%, #17242b); margin: 0 auto 23px; }
.rank-crest img { width: 32px; height: 32px; }
.rank-showcase p { margin-top: 20px; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.rank-permission { display: inline-flex; gap: 7px; align-items: center; color: #a3b6b1; font-size: 10px; }
.rank-explainer { display: flex; gap: 20px; align-items: center; margin: 0 0 60px; }
.rank-explainer > svg { color: var(--teal); }
.rank-explainer h2 { font-size: 19px; margin-bottom: 10px; }
.rank-explainer p { font-size: 13px; margin: 0; max-width: 800px; }
.rank-explainer > .text-link { margin-left: auto; flex-shrink: 0; }
.rank-admin-card { display: flex; flex-direction: column; align-items: start; padding: 23px; }
.rank-card-top { display: flex; justify-content: space-between; align-items: start; width: 100%; gap: 12px; margin-bottom: 18px; }
.rank-card-top .rank-crest { width: 46px; height: 50px; border-radius: 8px 8px 18px 18px; margin: 0; flex-shrink: 0; }
.rank-card-top .subtle-label { font-size: 8px; margin-top: 10px; letter-spacing: 1px; }
.rank-admin-card > p { font-size: 12px; line-height: 1.8; margin: 19px 0; overflow-wrap: anywhere; }
.rank-card-details { display: grid; gap: 9px; font-size: 10px; color: #a9bdb3; margin-top: auto; padding-bottom: 21px; }
.rank-card-details > span { display: flex; align-items: center; gap: 7px; }
.rank-admin-card > .world-link { width: 100%; }
.rank-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 30px; padding-bottom: 55px; align-items: start; }
.rank-editor > h2, .rank-permission-setting > h2 { font-size: 21px; }
.rank-color-control { display: flex; align-items: center; gap: 15px; }
.rank-editor .rank-color-control input { width: 68px; height: 46px; padding: 4px; cursor: pointer; }
.rank-icon-picker { border: 0; padding: 0; margin: 30px 0 0; min-width: 0; }
.rank-icon-picker legend { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.rank-icon-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.rank-icon-options label { position: relative; cursor: pointer; }
.rank-icon-options input { position: absolute; opacity: 0; width: 100%; height: 100%; min-height: 0; margin: 0; cursor: pointer; }
.rank-icon-options label > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 14px 5px; border: 1px solid #445249; border-radius: 4px; color: #a8b9b6; background: #122027; }
.rank-icon-options small { font-size: 9px; }
.rank-icon-options input:checked + span { border-color: var(--gold); color: var(--gold-light); background: #34372b; box-shadow: inset 0 0 0 1px #dcb76625; }
.rank-icon-options input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 3px; }
.rank-icon-picker > p { margin-top: 12px; }
.rank-editor input[type=file] { font-size: 12px; padding: 12px; }
.rank-editor input::file-selector-button { border: 1px solid #748068; border-radius: 3px; padding: 6px 9px; margin-right: 10px; background: #25382f; color: #e3d9ba; font: inherit; }
.rank-permission-setting { border-top: 1px solid #405045; padding-top: 25px; margin-top: 27px; }
.rank-permission-setting > p { font-size: 12px; margin-top: 15px; }
.rank-permission-setting .checkbox-field { margin-bottom: 15px; }
.rank-preview-sidebar { display: grid; gap: 23px; position: sticky; top: 25px; }
.rank-preview-panel { padding: 25px; border: 1px solid #766641; border-radius: 5px; background: #16232b; }
.rank-preview-panel > .eyebrow { font-size: 9px; }
.rank-preview-member { border: 1px solid #3c5146; border-top: 2px solid var(--rank-color); background: radial-gradient(ellipse at top, color-mix(in srgb, var(--rank-color) 8%, #1e2b2e), #142028); padding: 27px 15px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.preview-avatar { display: grid; place-items: center; width: 75px; height: 75px; color: var(--rank-color); border: 1px solid var(--rank-color); border-radius: 12px; background: #233631; font: 36px var(--heading); }
.preview-username { display: flex; gap: 6px; align-items: center; color: var(--rank-color); font-size: 12px; font-weight: 600; }
[data-preview-icon] { display: inline-flex; align-items: center; flex-shrink: 0; }
[data-preview-icon] img, [data-preview-icon] svg { width: 18px; height: 18px; }
.preview-username [data-preview-icon] img, .preview-username [data-preview-icon] svg { width: 15px; height: 15px; }
.rank-preview-member > .field-hint { font-size: 9px; }
.rank-preview-panel > p { font-size: 11px; margin: 17px 0 0; }
.rank-preview-sidebar .remove-control { margin-top: 0; }
.rank-assignment-note { margin: 20px 0; }
.rank-member-list { border: 1px solid #425247; border-radius: 4px; overflow: hidden; }
.rank-member-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 22px; background: #16242a; border-bottom: 1px solid #37473f; }
.rank-member-row:last-child { border-bottom: 0; }
.rank-member-info { display: grid; gap: 6px; min-width: 0; }
.rank-member-info > strong { font-size: 14px; }
.rank-member-info > span { font-size: 11px; color: #a1b5ae; overflow-wrap: anywhere; }
.rank-member-row > form { display: flex; align-items: center; gap: 12px; }
.rank-member-row select { min-width: 220px; max-width: 340px; }
.rank-system-note { font-size: 11px; color: var(--gold-light); display: flex; align-items: center; gap: 8px; }
.rank-assignment-footer { display: flex; align-items: center; gap: 10px; color: #a0b8ad; font-size: 12px; margin: 25px 0 60px; }
@media(max-width: 1100px) {
    .public-rank-grid, .rank-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rank-editor-layout { grid-template-columns: minmax(0, 1fr) 275px; gap: 23px; }
    .rank-icon-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rank-explainer { flex-wrap: wrap; }
    .rank-explainer > .text-link { margin-left: 45px; }
}
@media(max-width: 950px) {
    .forum-rank-guide-link { margin: 18px 5px 0; justify-content: start; }
    .forum-rank-guide-link > svg:last-child { margin-left: 5px; }
}
@media(max-width: 760px) {
    .rank-editor-layout { grid-template-columns: 1fr; }
    .rank-preview-sidebar { position: static; order: -1; }
    .rank-preview-panel { padding: 20px; }
    .rank-preview-member { gap: 13px; padding: 20px; }
    .rank-preview-member > .preview-avatar { width: 55px; height: 55px; font-size: 27px; }
    .rank-member-row { flex-direction: column; align-items: stretch; gap: 15px; }
    .rank-member-row select { min-width: 0; width: 100%; max-width: none; flex: 1; }
    .rank-member-row > form { width: 100%; }
}
@media(max-width: 700px) {
    .thread-layout .forum-post { grid-template-columns: 1fr; }
    .member-card .topic-avatar { width: 38px; height: 38px; margin: 0; }
    .member-card > strong { width: auto; }
    .member-card .forum-rank-badge { width: auto; padding: 5px 8px; }
    .member-card .member-post-count { margin: 0; font-size: 9px; }
    .member-card > strong .member-name { justify-content: start; }
    .public-rank-grid, .rank-admin-grid { gap: 14px; }
    .rank-showcase { padding: 23px 15px; }
    .rank-admin-card { padding: 20px; }
    .rank-card-top { flex-wrap: wrap; }
    .rank-explainer { align-items: start; padding: 23px; }
    .rank-explainer h2 { font-size: 18px; }
    .rank-explainer > .text-link { margin-left: 0; }
}
@media(max-width: 480px) {
    .rank-admin-grid { grid-template-columns: 1fr; }
    .public-rank-grid { grid-template-columns: 1fr; }
    .rank-icon-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rank-color-control { align-items: start; }
}