/* =========================================================
   RANKS & PROGRESSION PAGE
   ========================================================= */

.ranks-page-hero {
    min-height: 650px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(5, 7, 8, 0.92) 0%,
            rgba(5, 7, 8, 0.72) 42%,
            rgba(5, 7, 8, 0.25) 72%,
            rgba(5, 7, 8, 0.12) 100%
        ),
        url("../images/page-banners/ranks-banner.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ranks-page-intro {
    max-width: 780px;
    line-height: 1.7;
}

.ranks-section-intro {
    max-width: 780px;

    margin-bottom: 3rem;

    line-height: 1.7;
}


/* =========================================================
   COMMON RANK PROGRESSION
   ========================================================= */

.rank-common-track {
    max-width: 420px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.rank-card {
    width: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(24, 33, 37, 0.96),
            rgba(17, 24, 27, 0.96)
        );

    border: 1px solid var(--border);
    border-radius: 0.6rem;

    text-align: center;
}

.rank-card-common {
    border-top: 3px solid var(--cyan);
}

.rank-insignia {
    min-height: 155px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1.5rem;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 229, 229, 0.08),
            transparent 65%
        ),
        rgba(5, 7, 8, 0.28);

    border-bottom: 1px solid var(--border);
}

.rank-insignia img {
    display: block;

    width: auto;
    max-width: 180px;
    max-height: 120px;

    object-fit: contain;
}

.rank-card-content {
    padding: 1.2rem;
}

.rank-card-content h3 {
    margin: 0.35rem 0 0;

    font-size: 1.2rem;
}

.rank-abbreviation {
    color: var(--cyan);

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

.rank-progression-arrow {
    padding: 0.55rem 0;

    color: var(--cyan);

    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

.rank-trial-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.55rem 1.25rem;

    border: 1px solid var(--border);
    border-radius: 4px;

    color: var(--muted);
    background: rgba(255, 255, 255, 0.02);

    font-family: "Bank Gothic Light BT", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.rank-insignia:has(.rank-trial-marker) {
    min-height: 110px;
    padding: 1.5rem;
}

/* =========================================================
   PATHWAY BRANCH
   ========================================================= */

.rank-branch {
    max-width: 900px;

    margin: 2.5rem auto 0;

    position: relative;

    text-align: center;
}

.rank-branch-line {
    display: block;

    width: 100%;
    height: 1px;

    position: absolute;
    top: 50%;
    left: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 229, 229, 0.45) 15%,
            rgba(0, 229, 229, 0.45) 85%,
            transparent
        );
}

.rank-branch-label {
    display: inline-block;

    position: relative;
    z-index: 1;

    padding: 0.55rem 1rem;

    background: var(--bg);
    border: 1px solid rgba(0, 229, 229, 0.3);
    border-radius: 0.35rem;

    color: var(--cyan);

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}


/* =========================================================
   PATHWAY SUMMARY
   ========================================================= */

.rank-pathway-summary {
    padding: 1.5rem;

    background:
        linear-gradient(
            180deg,
            rgba(24, 33, 37, 0.94),
            rgba(17, 24, 27, 0.94)
        );

    border: 1px solid var(--border);
    border-top: 3px solid var(--cyan);
    border-radius: 0.55rem;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.rank-pathway-summary:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 229, 0.45);
    border-top-color: var(--cyan);
}

.rank-pathway-number {
    display: inline-block;

    margin-bottom: 0.65rem;

    color: var(--cyan);

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09rem;
    text-transform: uppercase;
}

.rank-pathway-summary h3 {
    margin-bottom: 0.75rem;
}


/* =========================================================
   FULL RANK MAP
   ========================================================= */

.ranks-map-intro {
    max-width: 820px;

    margin-bottom: 2rem;

    line-height: 1.7;
}

.rank-map-wrapper {
    width: 100%;

    overflow-x: auto;

    padding-bottom: 0.5rem;
}

.rank-map {
    min-width: 1040px;

    display: grid;
    grid-template-columns:
        70px
        repeat(3, minmax(280px, 1fr));

    background: rgba(5, 7, 8, 0.18);

    border: 1px solid var(--border);
    border-radius: 0.6rem;

    overflow: hidden;
}

.rank-map-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 70px;

    padding: 1rem;

    background: rgba(13, 18, 20, 0.96);

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    color: var(--cyan);

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.09rem;
    text-align: center;
    text-transform: uppercase;
}

.rank-map-heading:last-child {
    border-right: 0;
}

.rank-map-level-heading {
    color: var(--muted);

    font-size: 0.68rem;
}

.rank-level-number {
    min-height: 170px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    background: rgba(5, 7, 8, 0.36);

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    color: var(--muted);

    font-size: 0.8rem;
    font-weight: 900;
}

.rank-map-cell {
    min-height: 170px;

    display: flex;
    align-items: stretch;

    padding: 0.8rem;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.rank-map-cell:nth-child(4n) {
    border-right: 0;
}

.rank-map-card {
    width: 100%;

    display: grid;
    grid-template-columns: 115px 1fr;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(24, 33, 37, 0.94),
            rgba(17, 24, 27, 0.94)
        );

    border: 1px solid rgba(0, 229, 229, 0.16);
    border-radius: 0.45rem;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.rank-map-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 229, 0.45);
}

.rank-map-insignia {
    height: 100%;
    min-height: 135px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.8rem;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 229, 229, 0.07),
            transparent 70%
        ),
        rgba(5, 7, 8, 0.28);

    border-right: 1px solid var(--border);
}

.rank-map-insignia img {
    display: block;

    width: auto;
    max-width: 95px;
    max-height: 105px;

    object-fit: contain;
}

.rank-map-content {
    padding: 1rem;
}

.rank-map-content span {
    display: block;

    margin-bottom: 0.35rem;

    color: var(--cyan);

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.rank-map-content strong {
    display: block;

    color: var(--text);

    font-size: 0.92rem;
    line-height: 1.35;
}

.rank-map-empty {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #435154;

    font-size: 1.2rem;
}


/* =========================================================
   RANK PROGRESSION NOTE
   ========================================================= */

.rank-progression-note {
    padding: 2rem;

    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 229, 0.07),
            rgba(0, 229, 229, 0.015)
        ),
        rgba(19, 26, 29, 0.88);

    border: 1px solid rgba(0, 229, 229, 0.22);
    border-radius: 0.6rem;
}


/* =========================================================
   PROMOTION REQUIREMENTS
   ========================================================= */

.rank-requirements-intro {
    max-width: 820px;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.rank-requirements-list {
    display: grid;
    gap: 1.25rem;
}

.rank-requirement-card {
    display: grid;
    grid-template-columns: 280px 1fr;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(24, 33, 37, 0.94),
            rgba(17, 24, 27, 0.94)
        );

    border: 1px solid var(--border);
    border-radius: 0.6rem;

    transition:
        border-color 0.18s ease,
        transform 0.18s ease;
}

.rank-requirement-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 229, 0.4);
}


/* =========================================================
   PROMOTION REQUIREMENT - RANK
   ========================================================= */

.rank-requirement-header {
    display: flex;
    align-items: center;

    gap: 1rem;

    padding: 1.25rem;

    background:
        radial-gradient(
            circle at left center,
            rgba(0, 229, 229, 0.08),
            transparent 70%
        ),
        rgba(5, 7, 8, 0.3);

    border-right: 1px solid var(--border);
}

.rank-requirement-insignia {
    width: 85px;
    min-width: 85px;
    height: 85px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-requirement-insignia img {
    display: block;

    width: auto;
    max-width: 80px;
    max-height: 80px;

    object-fit: contain;
}

.rank-requirement-title span {
    display: block;

    margin-bottom: 0.3rem;

    color: var(--cyan);

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.rank-requirement-title h3 {
    margin: 0;

    font-size: 1.05rem;
    line-height: 1.35;
}


/* =========================================================
   PROMOTION REQUIREMENT - REQUIREMENTS
   ========================================================= */

.rank-requirement-items {
    display: flex;
    flex-direction: column;
}

.rank-requirement-item {
    flex: 1 1 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;

    padding: 0.85rem 1.1rem;

    border-bottom: 1px solid rgba(36, 56, 58, 0.7);
}

.rank-requirement-item:last-child {
    border-bottom: 0;
}

.rank-requirement-item-content {
    min-width: 0;
}

.rank-requirement-item-content strong {
    display: block;

    color: #dce4e5;

    font-size: 0.85rem;
}

.rank-requirement-item-content small {
    display: block;

    margin-top: 0.2rem;

    color: var(--muted);

    font-size: 0.72rem;
    line-height: 1.45;
}

.rank-requirement-value {
    flex-shrink: 0;

    min-width: 120px;

    color: var(--cyan);

    font-size: 0.8rem;
    font-weight: 900;
    text-align: right;
}

.rank-common-requirements {
    margin-top: 1rem;
    padding-top: 0.9rem;

    border-top: 1px solid var(--border);
}

.rank-common-requirement {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 0.3rem 0;

    font-size: 0.76rem;
}

.rank-common-requirement span {
    color: var(--muted);
    text-align: left;
}

.rank-common-requirement strong {
    flex-shrink: 0;

    color: var(--cyan);

    font-size: 0.74rem;
    font-weight: 900;
}

/* =========================================================
   SPECIAL RANK CONDITIONS
   ========================================================= */

.rank-special-rules {
    grid-column: 1 / -1;

    padding: 1rem 1.25rem;

    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 229, 0.07),
            rgba(0, 229, 229, 0.015)
        );

    border-top: 1px solid rgba(0, 229, 229, 0.2);
}

.rank-special-rules-heading {
    margin-bottom: 0.65rem;

    color: var(--cyan);

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

.rank-special-rule {
    position: relative;

    padding: 0.3rem 0 0.3rem 1rem;

    color: var(--muted);

    font-size: 0.78rem;
    line-height: 1.5;
}

.rank-special-rule::before {
    content: "";

    width: 5px;
    height: 5px;

    position: absolute;
    top: 0.78rem;
    left: 0;

    background: var(--cyan);
    border-radius: 50%;
}

/* =========================================================
   ACCOUNT - CLAN MEMBERSHIP
   ========================================================= */

.account-rank-display {
    display: flex;
    align-items: center;

    gap: 1.25rem;

    margin-top: 1.5rem;
    padding: 1.25rem;

    background:
        radial-gradient(
            circle at left center,
            rgba(0, 229, 229, 0.08),
            transparent 70%
        ),
        rgba(5, 7, 8, 0.3);

    border: 1px solid var(--border);
    border-radius: 0.55rem;
}

.account-rank-insignia {
    width: 110px;
    min-width: 110px;
    height: 110px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.account-rank-insignia img {
    display: block;

    width: auto;
    max-width: 100px;
    max-height: 100px;

    object-fit: contain;
}

.account-trial-rank {
    padding: 0.55rem 0.8rem;

    border: 1px solid var(--border);
    border-radius: 4px;

    color: var(--muted);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1rem;
    text-align: center;
    text-transform: uppercase;
}

.account-rank-abbreviation {
    display: block;

    margin-bottom: 0.25rem;

    color: var(--cyan);

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

.account-rank-details h3 {
    margin-bottom: 0.65rem;
}

.account-membership-details {
    margin-top: 1rem;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border: 1px solid var(--border);
    border-radius: 0.45rem;

    overflow: hidden;
}

.account-membership-details > div {
    padding: 0.9rem 1rem;
}

.account-membership-details > div + div {
    border-left: 1px solid var(--border);
}

.account-membership-details span {
    display: block;

    margin-bottom: 0.25rem;

    color: var(--muted);

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
}

.account-membership-details strong {
    color: var(--text);

    font-size: 0.85rem;
}


/* =========================================================
   ACCOUNT - MEMBER STATISTICS
   ========================================================= */

.account-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 0.75rem;

    margin-top: 1.5rem;
}

.account-stat {
    min-height: 105px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 1rem;

    background: rgba(5, 7, 8, 0.3);

    border: 1px solid var(--border);
    border-radius: 0.45rem;
}

.account-stat strong {
    display: block;

    margin-bottom: 0.3rem;

    color: var(--cyan);

    font-size: 1.6rem;
    line-height: 1;
}

.account-stat span {
    color: var(--muted);

    font-size: 0.72rem;
    line-height: 1.4;
}

.account-stat-disabled {
    opacity: 0.55;
}

.account-stat-note {
    margin-top: 1rem;
    margin-bottom: 0;

    font-size: 0.75rem;
    line-height: 1.5;
}

.account-page-section {
    padding-bottom: 5rem;
}

.account-page-section .row {
    position: relative;
}

.account-page-section .col-lg-5 {
    align-self: flex-start;
}


@media (max-width: 575.98px) {

    .account-rank-display {
        flex-direction: column;

        text-align: center;
    }

    .account-membership-details,
    .account-stat-grid {
        grid-template-columns: 1fr;
    }

    .account-membership-details > div + div {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

}

/* =========================================================
   ACCOUNT - NEXT PROMOTION
   ========================================================= */

.account-next-rank {
    display: flex;
    align-items: center;

    gap: 1rem;

    margin-top: 1.5rem;
    padding: 1rem;

    background:
        radial-gradient(
            circle at left center,
            rgba(0, 229, 229, 0.08),
            transparent 70%
        ),
        rgba(5, 7, 8, 0.3);

    border: 1px solid var(--border);
    border-radius: 0.45rem;
}

.account-next-rank-insignia {
    width: 85px;
    min-width: 85px;
    height: 85px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.account-next-rank-insignia img {
    display: block;

    width: auto;
    max-width: 80px;
    max-height: 80px;

    object-fit: contain;
}

.account-next-rank h3 {
    margin: 0;
    font-size: 1.05rem;
}

.account-promotion-requirements {
    margin-top: 1rem;

    border: 1px solid var(--border);
    border-radius: 0.45rem;

    overflow: hidden;
}

.account-promotion-requirement {
    padding: 0.9rem 1rem;

    border-bottom: 1px solid var(--border);
}

.account-promotion-requirement:last-child {
    border-bottom: 0;
}

.account-promotion-requirement-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;
}

.account-promotion-requirement-heading span {
    color: var(--text);

    font-size: 0.8rem;
    font-weight: 700;
}

.account-promotion-requirement-heading strong {
    flex-shrink: 0;

    color: var(--cyan);

    font-size: 0.75rem;
    font-weight: 900;
}

.account-promotion-requirement small {
    display: block;

    margin-top: 0.45rem;

    color: var(--muted);

    font-size: 0.7rem;
    line-height: 1.45;
}

.account-progress-track {
    width: 100%;
    height: 5px;

    margin-top: 0.65rem;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.06);

    border-radius: 999px;
}

.account-progress-bar {
    height: 100%;

    background: var(--cyan);

    border-radius: inherit;
}

/* =========================================================
   PROMOTION MANAGEMENT - MEMBER LIST
   ========================================================= */

.promotion-member-list {
    display: grid;
    gap: 0.75rem;

    margin-top: 1.5rem;
}

.promotion-member {
    display: grid;
    grid-template-columns: 320px 240px 1fr;

    min-height: 105px;

    background: rgba(5, 7, 8, 0.3);

    border: 1px solid var(--border);
    border-radius: 0.5rem;

    overflow: hidden;
}

.promotion-member-rank {
    display: flex;
    align-items: center;

    gap: 1rem;

    padding: 1rem;

    border-right: 1px solid var(--border);
}

.promotion-member-insignia {
    width: 75px;
    min-width: 75px;
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.promotion-member-insignia img {
    display: block;

    width: auto;
    max-width: 70px;
    max-height: 70px;

    object-fit: contain;
}

.promotion-trial-rank {
    padding: 0.45rem 0.65rem;

    color: var(--muted);

    border: 1px solid var(--border);
    border-radius: 4px;

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.promotion-member-abbreviation {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--cyan);

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.promotion-member-rank strong,
.promotion-member-identity strong {
    display: block;
}

.promotion-member-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 1rem 1.25rem;
}

.promotion-member-identity span {
    margin-bottom: 0.2rem;

    color: var(--muted);

    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.promotion-member-identity small {
    margin-top: 0.2rem;

    color: var(--muted);
}


@media (max-width: 767.98px) {

    .promotion-member {
        grid-template-columns: 1fr;
    }

    .promotion-member-rank {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

}

.promotion-member-progress {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 1rem 1.25rem;

    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-left: 0;
}


.promotion-member-progress-label {
    margin-bottom: 0.2rem;

    color: var(--muted);

    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.promotion-member-next-rank {
    margin-bottom: 0.65rem;
}

.promotion-member-requirements {
    display: grid;
    gap: 0.25rem;
}

.promotion-member-requirement {
    display: flex;
    justify-content: space-between;

    gap: 1rem;

    font-size: 0.7rem;
}

.promotion-member-requirement span {
    color: var(--muted);
}

.promotion-member-requirement strong {
    color: var(--cyan);
    white-space: nowrap;
}

/* =========================================================
   PROMOTION MANAGEMENT - ELIGIBILITY
   ========================================================= */

.promotion-action-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.promotion-member-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;

    margin-top: 0.8rem;
    padding-top: 0.7rem;

    border-top: 1px solid var(--border);
}

.promotion-status {
    display: inline-flex;
    align-items: center;

    padding: 0.35rem 0.6rem;

    border-radius: 4px;

    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
}

.promotion-status-ready {
    color: var(--cyan);

    background: rgba(0, 229, 229, 0.08);
    border: 1px solid rgba(0, 229, 229, 0.35);
}

.promotion-status-pending {
    color: #d7b86a;

    background: rgba(215, 184, 106, 0.07);
    border: 1px solid rgba(215, 184, 106, 0.25);
}

.promotion-status-restricted {
    color: var(--muted);

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
}

.promotion-member-requirement.is-complete strong {
    color: var(--cyan);
}

.promotion-member-requirement.is-incomplete strong {
    opacity: 0.75;
}

/* =========================================================
   PROMOTION REQUIREMENTS - RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .rank-requirement-card {
        grid-template-columns: 220px 1fr;
    }

    .rank-requirement-header {
        flex-direction: column;
        justify-content: center;

        text-align: center;
    }

}


@media (max-width: 767.98px) {

    .rank-requirement-card {
        grid-template-columns: 1fr;
    }

    .rank-requirement-header {
        flex-direction: row;
        justify-content: flex-start;

        border-right: 0;
        border-bottom: 1px solid var(--border);

        text-align: left;
    }

    .rank-requirement-item {
        align-items: flex-start;
    }

    .rank-requirement-value {
        min-width: 90px;
    }

}


@media (max-width: 575.98px) {

    .rank-requirement-item {
        flex-direction: column;

        gap: 0.45rem;
    }

    .rank-requirement-value {
        min-width: 0;

        text-align: left;
    }

}

/* =========================================================
   RANKS PAGE - RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .ranks-page-hero {
        min-height: 500px;
    }

}


@media (max-width: 767.98px) {

    .ranks-page-hero {
        min-height: 360px;
    }

    .ranks-section-intro {
        margin-bottom: 2rem;
    }

    .rank-common-track {
        max-width: 360px;
    }

    .rank-insignia {
        min-height: 135px;
    }

    .rank-insignia img {
        max-width: 150px;
        max-height: 105px;
    }

    .rank-progression-note {
        padding: 1.5rem;
    }

    .rank-progression-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    }

    .rank-progression-note {
        margin: 0;
    }
}

/* =========================================================
   FORUM POSTS
   ========================================================= */

.forum-post-card {
    overflow: hidden;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.forum-post-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
}

.forum-post-author {
    padding: 1.5rem;

    background: rgba(0, 229, 229, 0.025);
    border-right: 1px solid var(--border);
}

.forum-post-author-header {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-bottom: 1.25rem;
}

.forum-post-author-name {
    margin: 0;

    font-size: 1.25rem;
}

.forum-post-rank {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    margin-top: 1rem;
}

.forum-post-rank-image {
    width: 52px;
    height: 52px;

    object-fit: contain;
}

.forum-post-member-since {
    margin-top: 1rem;

    color: var(--muted);
    font-size: 0.9rem;
}

.forum-post-content {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 220px;

    padding: 1.5rem 1.75rem;
}

.forum-post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;

    padding-bottom: 1rem;
    margin-bottom: 1.5rem;

    border-bottom: 1px solid var(--border);
}

.forum-post-date {
    margin-top: 0.3rem;

    color: var(--muted);
    font-size: 0.85rem;
}

.forum-post-edit-link {
    flex-shrink: 0;

    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.forum-post-body {
    flex-grow: 1;

    color: var(--text);
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.forum-post-edited {
    margin-top: 2rem;
    padding-top: 0.8rem;

    border-top: 1px solid var(--border);

    color: var(--muted);
    font-size: 0.8rem;
    font-style: italic;
    text-align: right;
}

@media (max-width: 991.98px) {

    .forum-post-layout {
        grid-template-columns: 1fr;
    }

    .forum-post-author {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .forum-post-content {
        min-height: 0;
    }

}

@media (max-width: 575.98px) {

    .forum-post-author,
    .forum-post-content {
        padding: 1.25rem;
    }

    .forum-post-header {
        flex-direction: column;
        gap: 0.75rem;
    }

}

.forum-post-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.forum-post-actions form {
    margin: 0;
}

.forum-post-delete-link {
    padding: 0;

    background: transparent;
    border: 0;

    color: #dc6b6b;

    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-transform: uppercase;

    cursor: pointer;
}

.forum-post-delete-link:hover,
.forum-post-delete-link:focus {
    color: #ef8b8b;
}

.forum-topic-status {
    display: inline-flex;
    align-items: center;

    padding: 0.2rem 0.5rem;

    border: 1px solid var(--border);
    border-radius: 4px;

    color: var(--muted);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

/* =========================================================
   PUBLIC MEMBER PROFILE
   ========================================================= */

.member-profile-avatar {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 1.5rem;
}

.member-profile-avatar img,
.member-profile-avatar-placeholder {
    width: 140px;
    height: 140px;

    border: 1px solid var(--border);
    border-radius: 12px;
}

.member-profile-avatar img {
    object-fit: cover;
}

.member-profile-avatar-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0, 229, 229, 0.04);

    color: var(--cyan);
    font-size: 3rem;
    font-weight: 700;
}

.member-profile-rank {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-top: 1.75rem;
    padding-top: 1.5rem;

    border-top: 1px solid var(--border);
}

.member-profile-rank img {
    width: 70px;
    height: 70px;

    object-fit: contain;
}

.member-profile-details {
    display: grid;
    gap: 1rem;

    margin-top: 1.5rem;
    padding-top: 1.5rem;

    border-top: 1px solid var(--border);
}

.member-profile-details > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.member-profile-details span {
    color: var(--muted);
    font-size: 0.85rem;
}

.member-profile-details strong {
    text-align: right;
}

.member-profile-bio,
.member-profile-signature {
    margin-top: 1.25rem;

    color: var(--text);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.member-profile-signature {
    padding-top: 1.25rem;

    border-top: 1px solid var(--border);
}

.member-profile-column {
    align-self: start;
}

@media (max-width: 575.98px) {

    .member-profile-avatar img,
    .member-profile-avatar-placeholder {
        width: 110px;
        height: 110px;
    }

    .member-profile-details > div {
        display: block;
    }

    .member-profile-details strong {
        display: block;

        margin-top: 0.25rem;

        text-align: left;
    }

}

/* =========================================================
   ACCOUNT AVATAR SETTINGS
   ========================================================= */

.account-avatar-settings {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;

    margin-top: 1.25rem;
}

.account-avatar-preview {
    flex: 0 0 auto;
}

.account-avatar-preview img,
.account-avatar-placeholder {
    width: 120px;
    height: 120px;

    border: 1px solid var(--border);
    border-radius: 12px;
}

.account-avatar-preview img {
    object-fit: cover;
}

.account-avatar-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0, 229, 229, 0.04);

    color: var(--cyan);
    font-size: 2.5rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {

    .account-avatar-settings {
        display: block;
    }

    .account-avatar-preview {
        margin-bottom: 1.5rem;
    }

}

/* =========================================================
   FORUM AUTHOR PROFILE
   ========================================================= */

.forum-post-avatar-link {
    flex: 0 0 auto;

    text-decoration: none;
}

.forum-post-avatar,
.forum-post-avatar-placeholder {
    width: 64px;
    height: 64px;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.forum-post-avatar {
    display: block;

    object-fit: cover;
}

.forum-post-avatar-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0, 229, 229, 0.04);

    color: var(--cyan);
    font-size: 1.4rem;
    font-weight: 700;
}

.forum-post-author-name a {
    color: inherit;
    text-decoration: none;
}

.forum-post-author-name a:hover,
.forum-post-author-name a:focus {
    color: var(--cyan);
}

.forum-post-callsign {
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    margin-top: 1rem;
}

.forum-post-callsign span {
    color: var(--muted);
    font-size: 0.8rem;
}

.forum-post-callsign strong {
    font-size: 0.85rem;
}

.forum-post-author-statistics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;

    margin-top: 1.25rem;
    padding-top: 1.25rem;

    border-top: 1px solid var(--border);
}

.forum-post-author-statistics > div {
    text-align: center;
}

.forum-post-author-statistics strong {
    display: block;

    color: var(--cyan);
    font-size: 1.1rem;
}

.forum-post-author-statistics span {
    display: block;

    margin-top: 0.15rem;

    color: var(--muted);
    font-size: 0.75rem;
}

.forum-post-profile-link {
    display: inline-block;

    margin-top: 1.25rem;

    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* =========================================================
   FORUM POST SIGNATURE
   ========================================================= */

.forum-post-signature {
    max-width: 700px;

    margin-top: 2rem;
    padding-top: 1rem;

    border-top: 1px solid var(--border);

    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* =========================================================
   FORUM POST PERMALINKS
   ========================================================= */

.forum-post-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;

    flex-shrink: 0;
}

.forum-post-number {
    color: var(--muted);

    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.forum-post-number:hover,
.forum-post-number:focus {
    color: var(--cyan);
}

.forum-post-card:target {
    border-color: var(--cyan);
}

/* =========================================================
   PRIVATE MESSAGING
   ========================================================= */

.private-message-layout {
    display: grid;
    grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);

    width: 100%;
    min-width: 0;
    min-height: 650px;

    overflow: hidden;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.private-conversation-panel,
.private-message-panel,
.private-conversation-summary {
    min-width: 0;
}

.private-conversation-panel {
    border-right: 1px solid var(--border);
}

.private-conversation-heading,
.private-message-header,
.private-message-compose {
    padding: 1.5rem;
}

.private-conversation-heading,
.private-message-header {
    border-bottom: 1px solid var(--border);
}

.private-conversation-list {
    display: grid;
}

.private-conversation-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    padding: 1.25rem;

    border-bottom: 1px solid var(--border);

    color: inherit;
    text-decoration: none;
}

.private-conversation-item:hover,
.private-conversation-item:focus,
.private-conversation-item.is-active {
    background: rgba(0, 229, 229, 0.04);
}

.private-conversation-avatar {
    flex: 0 0 auto;
}

.private-conversation-avatar img,
.private-conversation-avatar-placeholder {
    width: 52px;
    height: 52px;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.private-conversation-avatar img {
    display: block;

    object-fit: cover;
}

.private-conversation-avatar-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--cyan);
    font-weight: 700;
}

.private-conversation-summary {
    min-width: 0;
    flex-grow: 1;
}

.private-conversation-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.private-message-unread {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 22px;
    height: 22px;

    padding: 0 0.4rem;

    border-radius: 999px;

    background: var(--cyan);
    color: #001414;

    font-size: 0.7rem;
    font-weight: 800;
}

.private-conversation-preview,
.private-conversation-date {
    margin-top: 0.4rem;

    color: var(--muted);
    font-size: 0.8rem;
}

.private-conversation-preview {
    max-width: 100%;

    overflow: hidden;

    line-height: 1.45;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.private-conversation-date {
    font-size: 0.75rem;
}

.private-conversation-date {
    font-size: 0.75rem;
}

.private-conversation-empty {
    padding: 1.5rem;

    color: var(--muted);
}

.private-message-panel {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.private-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.private-message-header h2 a {
    color: inherit;
    text-decoration: none;
}

.private-message-header h2 a:hover,
.private-message-header h2 a:focus {
    color: var(--cyan);
}

.private-message-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    flex-grow: 1;

    padding: 1.5rem;

    background: rgba(0, 0, 0, 0.08);
}

.private-message {
    max-width: 75%;

    padding: 1rem 1.25rem;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.private-message.is-own {
    align-self: flex-end;

    background: rgba(0, 229, 229, 0.035);
}

.private-message-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.75rem;

    font-size: 0.8rem;
}

.private-message-meta span,
.private-message-edited {
    color: var(--muted);
}

.private-message-body {
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.private-message-edited {
    margin-top: 0.75rem;

    font-size: 0.75rem;
    font-style: italic;
}

.private-message-compose {
    border-top: 1px solid var(--border);
}

.private-message-thread-empty,
.private-message-no-selection {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 350px;

    padding: 2rem;

    text-align: center;
}

.private-message-thread-empty > div,
.private-message-no-selection > div {
    width: 100%;
}

.private-message-disabled {
    padding: 1rem;

    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--muted);
}

.private-message-thread-empty > div,
.private-message-no-selection > div {
    width: 100%;
}

.private-message-thread-empty h3,
.private-message-no-selection h2 {
    margin-bottom: 0.75rem;
}

.private-message-thread-empty {
    text-align: center;
}

.private-message-thread-empty > div,
.private-message-no-selection > div {
    width: 100%;
}

@media (max-width: 991.98px) {

    .private-message-layout {
        grid-template-columns: 1fr;
    }

    .private-conversation-panel {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

}

@media (max-width: 575.98px) {

    .private-message {
        max-width: 100%;
    }

    .private-message-header {
        align-items: flex-start;
        flex-direction: column;
    }

}

.private-message-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

    margin-top: 0.75rem;
}

.private-message-footer .private-message-edited {
    margin-top: 0;
}

.private-message-edit-link {
    margin-left: auto;

    color: var(--muted);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.private-message-edit-link:hover,
.private-message-edit-link:focus {
    color: var(--cyan);
}

.private-message-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    margin-left: auto;
}

.private-message-actions form {
    margin: 0;
}

.private-message-actions .private-message-edit-link {
    margin-left: 0;
}

.private-message-delete-link {
    padding: 0;

    background: none;
    border: 0;

    color: var(--muted);

    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: inherit;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;
}

.private-message-delete-link:hover,
.private-message-delete-link:focus {
    color: #ff6b6b;
}

.private-message-deleted {
    padding: 0.25rem 0;

    color: var(--muted);
    font-style: italic;
}

.private-message-deleted strong,
.private-message-deleted span {
    display: block;
}

.private-message-deleted strong {
    font-size: 0.85rem;
    font-style: normal;
}

.private-message-deleted span {
    margin-top: 0.2rem;

    font-size: 0.8rem;
}

/* =========================================================
   FORUM FORMATTED CONTENT
   ========================================================= */

.forum-post-body h2,
.forum-post-body h3,
.forum-post-body h4 {
    margin: 1.25rem 0 0.75rem;

    color: var(--text);
}

.forum-post-body blockquote {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;

    background: rgba(0, 229, 229, 0.035);
    border-left: 3px solid var(--cyan);

    color: var(--muted);
}

.forum-post-body ul,
.forum-post-body ol {
    margin: 1rem 0;
    padding-left: 1.75rem;
}

.forum-post-body code {
    padding: 0.15rem 0.35rem;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 4px;

    color: var(--cyan);
}

.forum-post-body pre {
    overflow-x: auto;

    margin: 1.25rem 0;
    padding: 1rem 1.25rem;

    background: #080b0c;
    border: 1px solid var(--border);
    border-radius: 8px;

    color: #d9e3e5;
    white-space: pre-wrap;
}

.forum-post-body pre code {
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;

    color: inherit;
}

.forum-post-body a {
    color: var(--cyan);
}

.forum-post-body span[style*="background-color"] {
    padding: 0.05em 0.15em;
}

/* =========================================================
   FORUM EDITOR
   ========================================================= */

.forum-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 0;

    padding: 0.65rem;

    background: #080b0c;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.forum-editor-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;

    padding-right: 0.5rem;

    border-right: 1px solid var(--border);
}

.forum-editor-toolbar-group:last-child {
    padding-right: 0;

    border-right: 0;
}

.forum-editor-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 34px;
    height: 34px;

    padding: 0 0.55rem;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;

    color: var(--text);

    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1;

    cursor: pointer;
}

.forum-editor-button:hover,
.forum-editor-button:focus {
    background: rgba(0, 229, 229, 0.06);
    border-color: var(--border);

    color: var(--cyan);
}

.forum-editor-colour-group {
    gap: 0.75rem;
}

.forum-editor-colour {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    margin: 0;

    color: var(--muted);

    font-size: 0.75rem;
    cursor: pointer;
}

.forum-editor-colour input[type="color"] {
    width: 32px;
    height: 28px;

    padding: 2px;

    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;

    cursor: pointer;
}

.forum-editor-wysiwyg {
    min-height: 260px;

    padding: 1rem;

    background: #080b0c;
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;

    color: var(--text);
    font-size: 1rem;
    line-height: 1.65;

    outline: none;

    overflow-wrap: anywhere;
}

.forum-editor-wysiwyg:focus {
    border-color: var(--cyan);
}

.forum-editor-wysiwyg p {
    margin: 0 0 1rem;
}

.forum-editor-wysiwyg h2,
.forum-editor-wysiwyg h3,
.forum-editor-wysiwyg h4 {
    margin: 1.25rem 0 0.75rem;
}

.forum-editor-wysiwyg blockquote {
    margin: 1rem 0;
    padding: 1rem 1.25rem;

    background: rgba(0, 229, 229, 0.035);
    border-left: 3px solid var(--cyan);

    color: var(--muted);
}

.forum-editor-wysiwyg pre {
    overflow-x: auto;

    margin: 1rem 0;
    padding: 1rem;

    background: #080b0c;
    border: 1px solid var(--border);
    border-radius: 8px;

    white-space: pre-wrap;
}

.forum-editor-wysiwyg code {
    color: var(--cyan);
}

@media (max-width: 767.98px) {

    .forum-editor-toolbar-group {
        padding-right: 0.35rem;
    }

    .forum-editor-colour-group {
        width: 100%;

        padding-top: 0.25rem;

        border-right: 0;
    }

}

.forum-post-quote-link {
    padding: 0;

    background: none;
    border: 0;

    color: var(--cyan);

    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    text-decoration: underline;

    cursor: pointer;
}

.forum-post-quote-link:hover,
.forum-post-quote-link:focus {
    color: var(--text);
}

.forum-editor-wysiwyg[aria-invalid="true"] {
    border-color: #dc3545;
}

/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.notification-panel {
    overflow: hidden;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.notification-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

    padding: 1.5rem;

    border-bottom: 1px solid var(--border);
}

.notification-list {
    display: grid;
}

.notification-item {
    display: flex;
    gap: 1rem;

    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--border);
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item.is-unread {
    background: rgba(0, 229, 229, 0.035);
}

.notification-avatar {
    flex: 0 0 auto;
}

.notification-avatar img,
.notification-avatar-placeholder {
    width: 48px;
    height: 48px;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.notification-avatar img {
    display: block;

    object-fit: cover;
}

.notification-avatar-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--cyan);
    font-weight: 700;
}

.notification-content {
    min-width: 0;
    flex-grow: 1;
}

.notification-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    font-weight: 700;
}

.notification-unread-indicator {
    display: inline-flex;
    align-items: center;

    padding: 0.15rem 0.4rem;

    background: var(--cyan);
    border-radius: 999px;

    color: #001414;

    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.notification-message {
    margin-top: 0.4rem;

    color: var(--muted);
}

.notification-meta {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-top: 0.6rem;

    color: var(--muted);
    font-size: 0.75rem;
}

.notification-meta a {
    color: var(--cyan);
    font-weight: 700;
    text-decoration: none;
}

.notification-empty {
    padding: 4rem 2rem;

    text-align: center;
}

@media (max-width: 575.98px) {

    .notification-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   FORUM MEMBER MENTIONS
   ========================================================= */

.forum-editor {
    position: relative;
}

.forum-mention-dropdown {
    position: absolute;
    z-index: 50;

    top: 78px;
    left: 0;

    width: min(420px, 100%);
    max-height: 360px;

    overflow-y: auto;

    background: #080b0c;
    border: 1px solid var(--border);
    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.forum-mention-dropdown[hidden] {
    display: none;
}

.forum-mention-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    width: 100%;

    padding: 0.75rem;

    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);

    color: var(--text);
    text-align: left;

    cursor: pointer;
}

.forum-mention-option:last-child {
    border-bottom: 0;
}

.forum-mention-option:hover,
.forum-mention-option.is-selected {
    background: rgba(0, 229, 229, 0.08);
}

.event-member-dropdown {
    position: relative;
}


.event-member-results {
    position: absolute;
    z-index: 50;

    top: 100%;
    left: 0;

    width: min(420px, 100%);
    max-height: 360px;

    overflow-y: auto;

    background: #080b0c;
    border: 1px solid var(--border);
    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}


.event-member-results[hidden] {
    display: none;
}

.event-member-option:hover {
    background: rgba(0, 255, 255, 0.1);
}

.event-selected-member {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 0.75rem;

    background: rgba(0, 229, 229, 0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.forum-mention-avatar {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border: 1px solid var(--border);
    border-radius: 7px;

    object-fit: cover;
}

.forum-mention-avatar-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--cyan);
    font-weight: 700;
}

.forum-mention-details {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.forum-mention-details strong {
    color: var(--text);
}

.forum-mention-details span {
    margin-top: 0.1rem;

    color: var(--muted);
    font-size: 0.8rem;
}

.forum-post-reply-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;

    margin-top: 0.3rem;

    color: var(--muted);
    font-size: 0.75rem;
}

.forum-post-reply-context a {
    color: var(--cyan);
    font-weight: 700;
    text-decoration: none;
}

.forum-post-reply-context a:hover,
.forum-post-reply-context a:focus {
    text-decoration: underline;
}

.forum-mention-link {
    color: var(--cyan);

    font-weight: 700;
    text-decoration: none;
}

.forum-mention-link:hover,
.forum-mention-link:focus {
    text-decoration: underline;
}

.notification-header-actions,
.notification-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.notification-actions {
    margin-top: 0.7rem;
}

.notification-actions form,
.notification-header-actions form {
    margin: 0;
}

.notification-action-link {
    padding: 0;

    background: none;
    border: 0;

    color: var(--cyan);

    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;

    cursor: pointer;
}

.notification-action-link:hover,
.notification-action-link:focus {
    text-decoration: underline;
}

.notification-delete-link {
    color: #dc3545;
}

.account-watched-topic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.account-watched-topic-content {
    min-width: 0;
}

.account-watched-topic-title {
    display: block;

    color: var(--text);

    font-weight: 700;
    text-decoration: none;
}

.account-watched-topic-title:hover,
.account-watched-topic-title:focus {
    color: var(--cyan);
}

.account-watched-topic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;

    margin-top: 0.35rem;

    color: var(--muted);
    font-size: 0.75rem;
}

.account-watched-topic-meta a {
    color: var(--cyan);
    text-decoration: none;
}

.account-watched-topic-meta a:hover,
.account-watched-topic-meta a:focus {
    text-decoration: underline;
}

.account-watched-topic-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}

.account-watched-topic-actions form {
    margin: 0;
}

@media (max-width: 575.98px) {

    .account-watched-topic {
        align-items: stretch;
        flex-direction: column;
    }

    .account-watched-topic-actions {
        justify-content: flex-start;
    }

}

.forum-search-result h3 a {
    color: var(--text);
}

.forum-search-result h3 a:hover,
.forum-search-result h3 a:focus {
    color: var(--cyan);
}

.forum-search-result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;

    color: var(--muted);
    font-size: 0.8rem;
}

.forum-search-result-meta a {
    color: var(--cyan);
    text-decoration: none;
}

.forum-search-result-meta a:hover,
.forum-search-result-meta a:focus {
    text-decoration: underline;
}

.forum-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.forum-moderation-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;

    color: var(--muted);
    font-size: 0.8rem;
}

.forum-report-preview {
    padding: 1rem;

    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--text);
    line-height: 1.6;
}

.forum-report-review-reason,
.forum-report-review-details {
    color: var(--text);
    line-height: 1.6;
}

.forum-member-action-history > .forum-report-review-details {
    padding: 1.25rem;

    background: rgba(255, 255, 255, 0.018);

    border: 1px solid var(--border);
    border-radius: 0.6rem;
}

.forum-member-action-history > .forum-report-review-details:hover {
    border-color: rgba(0, 229, 229, 0.28);
}

.forum-moderation-meta a {
    color: var(--cyan);
    text-decoration: none;
}

.forum-moderation-meta a:hover,
.forum-moderation-meta a:focus {
    text-decoration: underline;
}

.forum-report-status {
    display: inline-flex;
    align-items: center;

    padding: 0.3rem 0.55rem;

    border: 1px solid var(--border);
    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.forum-report-status.is-resolved {
    color: var(--cyan);
}

.forum-report-status.is-dismissed {
    color: var(--muted);
}

.forum-moderation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    padding-bottom: 0.75rem;

    border-bottom: 1px solid var(--border);
}

.forum-moderation-tab {
    display: inline-flex;
    align-items: center;

    padding: 0.65rem 0.9rem;

    border: 1px solid var(--border);
    border-radius: 6px;

    color: var(--muted);

    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.forum-moderation-tab:hover,
.forum-moderation-tab:focus {
    border-color: var(--cyan);

    color: var(--cyan);
}

.forum-moderation-tab.is-active {
    border-color: var(--cyan);

    color: var(--cyan);

    background: rgba(0, 255, 255, 0.05);
}

.forum-moderation-overview-card {
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 190px;

    padding: 1.25rem;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.025);

    color: inherit;
    text-decoration: none;
}

.forum-moderation-overview-card:hover,
.forum-moderation-overview-card:focus {
    border-color: var(--cyan);

    color: inherit;
}

.forum-moderation-overview-label {
    color: var(--muted);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.forum-moderation-overview-count {
    margin-top: 0.75rem;

    color: var(--cyan);

    font-size: 2.5rem;
    line-height: 1;
}

.forum-moderation-overview-link {
    margin-top: auto;
    padding-top: 1.25rem;

    color: var(--cyan);

    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.forum-moderation-overview-summary {
    margin-top: 0.75rem;

    color: var(--muted);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.forum-moderation-log-overview-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;

    padding: 1.25rem;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.025);

    color: inherit;
    text-decoration: none;
}

.forum-moderation-log-overview-card:hover,
.forum-moderation-log-overview-card:focus {
    border-color: var(--cyan);

    color: inherit;
}

.forum-moderation-log-overview-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem;

    margin-top: 0.5rem;
}

.forum-moderation-log-overview-card
.forum-moderation-overview-summary {
    margin-top: 0;
}

.forum-moderation-latest-activity {
    flex: 1 1 320px;

    padding-left: 1.5rem;

    border-left: 1px solid var(--border);
}

@media (max-width: 767.98px) {

    .forum-moderation-latest-activity {
        flex-basis: 100%;

        padding-top: 1rem;
        padding-left: 0;

        border-top: 1px solid var(--border);
        border-left: 0;
    }

}

/* ============================================================
   FORUM ADMINISTRATION — SUBFORUM DROP ZONES
   ============================================================ */

[data-subforum-sortable] {
    min-height: 150px;
    padding: 12px;
    border: 2px dashed rgba(34, 184, 207, 0.45);
    border-radius: 10px;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

[data-subforum-sortable]:hover {
    border-color: #22b8cf;
    background: rgba(34, 184, 207, 0.04);
}

.forum-subforum-drop-placeholder {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: #8fa4ad;
    pointer-events: none;
}

.forum-subforum-drop-icon {
    font-size: 1.8rem;
    color: #22b8cf;
}

.forum-subforum-drop-placeholder strong {
    color: #c7d8de;
    font-size: 0.9rem;
}

.forum-subforum-drop-placeholder span {
    font-size: 0.8rem;
}

[data-subforum-sortable].sortable-ghost,
[data-subforum-sortable].forum-admin-drag-over {
    border-color: #22b8cf;
    background: rgba(34, 184, 207, 0.1);
}