:root {
    --c9-night: #080d15;
    --c9-panel: rgba(11, 17, 27, .88);
    --c9-line: rgba(203, 165, 96, .35);
    --c9-gold: #d8b477;
    --c9-ice: #91d7f1;
    --c9-text: #edf2f8;
    --c9-muted: #b8c1ce;
}

.c9-login-page {
    min-height: 100vh;
    margin: 0;
    color: var(--c9-text);
    background-color: #080d15;
    background-image:
        linear-gradient(90deg, rgba(5, 8, 14, .54), rgba(5, 9, 16, .74) 48%, rgba(5, 9, 16, .79)),
        linear-gradient(0deg, rgba(5, 8, 14, .55), transparent 46%, rgba(5, 8, 14, .26)),
        url("../image/c9-community-background.jpg");
    background-repeat: no-repeat;
    background-size: cover, cover, auto 100vh;
    background-position: center, center, center;
    background-attachment: fixed;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.c9-login-page *,
.c9-modern-site * {
    box-sizing: border-box;
}

.c9-login-shell {
    display: flex;
    width: min(100% - 52px, 1320px);
    min-height: 100vh;
    margin: 0 auto;
    flex-direction: column;
}

.c9-login-header,
.c9-login-header-actions,
.c9-login-brand,
.c9-download-link,
.c9-login-footer,
.c9-login-features,
.c9-create-account-prompt {
    display: flex;
    align-items: center;
}

.c9-login-header {
    min-height: 92px;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.c9-login-header-actions {
    flex-wrap: wrap;
    gap: 10px;
}

.c9-server-status {
    --c9-status-color: #d8b477;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid rgba(216, 180, 119, .38);
    border-radius: 999px;
    color: #e9dfce;
    background: rgba(12, 19, 29, .88);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1;
    white-space: nowrap;
}

.c9-server-status-dot {
    position: relative;
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #d8b477;
    box-shadow: 0 0 10px rgba(216, 180, 119, .42);
}

.c9-server-status[data-status="online"] .c9-server-status-dot {
    background: #49d17d;
    box-shadow: 0 0 10px rgba(73, 209, 125, .5);
}

.c9-server-status[data-status="offline"] .c9-server-status-dot {
    background: #f05b5b;
    box-shadow: 0 0 10px rgba(240, 91, 91, .48);
}

.c9-server-status[data-status="online"] .c9-server-status-dot {
    animation: c9-server-pulse 2s ease-out infinite;
}

@keyframes c9-server-pulse {
    0% { box-shadow: 0 0 0 0 rgba(73, 209, 125, .52); }
    70% { box-shadow: 0 0 0 7px rgba(73, 209, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(73, 209, 125, 0); }
}

.c9-login-brand {
    gap: 14px;
    color: #fff;
    text-decoration: none;
}

.c9-login-brand:hover,
.c9-login-brand:focus {
    color: #fff;
    text-decoration: none;
}

.c9-login-brand-mark,
.c9-card-emblem,
.c9-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #101722;
    background: linear-gradient(145deg, #f0d5a2, #bd9252);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 800;
    letter-spacing: -.08em;
}

.c9-login-brand-mark {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .56);
    border-radius: 14px 5px 14px 5px;
}

.c9-login-brand-mark svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #101722;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c9-login-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.c9-login-brand-copy strong {
    font-size: 13px;
    letter-spacing: .15em;
}

.c9-login-brand-copy small {
    color: var(--c9-gold);
    font-size: 10px;
    letter-spacing: .23em;
}

.c9-download-link {
    min-height: 44px;
    gap: 10px;
    padding: 0 17px;
    border: 1px solid rgba(216, 180, 119, .7);
    border-radius: 8px;
    color: #f8ead0;
    background: rgba(8, 13, 21, .5);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.c9-download-link:hover,
.c9-download-link:focus {
    border-color: var(--c9-gold);
    color: #fff;
    background: rgba(216, 180, 119, .16);
    text-decoration: none;
    transform: translateY(-1px);
}

.c9-download-icon,
.c9-nav-icon,
.c9-home-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c9-download-icon svg,
.c9-nav-icon svg,
.c9-home-action-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.c9-login-layout {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    align-items: center;
    gap: clamp(38px, 7vw, 110px);
    padding: 48px 0;
}

.c9-login-intro {
    max-width: 720px;
    padding: 14px 0;
}

.c9-login-kicker {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 22px;
    color: var(--c9-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
}

.c9-login-kicker span {
    width: 29px;
    height: 1px;
    background: var(--c9-gold);
}

.c9-login-intro h1 {
    max-width: 780px;
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 6.5vw, 88px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .98;
    text-shadow: 0 5px 28px rgba(0, 0, 0, .48);
}

.c9-login-intro h1 span {
    display: block;
    color: var(--c9-gold);
}

.c9-login-description {
    max-width: 520px;
    margin: 24px 0 28px;
    color: #e1e7ee;
    font-size: clamp(16px, 1.65vw, 20px);
    line-height: 1.65;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.c9-login-features {
    flex-wrap: wrap;
    gap: 12px 22px;
    color: #eef3f8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
}

.c9-login-features > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.c9-feature-mark {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    color: var(--c9-gold);
    font-size: 16px;
    font-style: normal;
}

.c9-feature-mark svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.c9-login-card {
    width: 100%;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-top: 2px solid var(--c9-gold);
    border-radius: 13px;
    background: rgba(9, 15, 24, .84);
    box-shadow: 0 28px 75px rgba(0, 0, 0, .42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.c9-card-topline {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
    color: var(--c9-gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

.c9-card-emblem {
    width: 34px;
    height: 34px;
    border-radius: 9px 3px 9px 3px;
    font-size: 17px;
}

.c9-login-card h2 {
    margin: 0 0 7px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.25;
}

.c9-login-card-copy {
    margin: 0 0 23px;
    color: var(--c9-muted);
    font-size: 14px;
}

.c9-login-field {
    margin-bottom: 17px;
}

.c9-field-label {
    display: block;
    margin-bottom: 8px;
    color: #e0e5eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
}

.c9-login-input.form-control {
    height: 46px;
    padding: 10px 13px;
    border: 1px solid rgba(214, 224, 236, .23);
    border-radius: 7px;
    color: #f7f9fc;
    background: rgba(255, 255, 255, .07);
    box-shadow: none;
    font-size: 15px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.c9-login-input.form-control:focus {
    border-color: var(--c9-ice);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(145, 215, 241, .12);
}

.c9-login-input.form-control:-webkit-autofill,
.c9-login-input.form-control:-webkit-autofill:hover,
.c9-login-input.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #f7f9fc;
    transition: background-color 9999s ease-out 0s;
}

.c9-captcha-wrap {
    display: flex;
    min-height: 84px;
    align-items: center;
    justify-content: center;
    margin: 2px 0 15px;
    overflow: hidden;
}

.c9-login-submit.btn,
.c9-modal-submit.btn {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid #b0e8fb;
    border-radius: 7px;
    color: #07131b;
    background: linear-gradient(110deg, #a6e8fa, #71c6e4);
    box-shadow: 0 8px 24px rgba(45, 140, 177, .2);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.c9-login-submit.btn:hover,
.c9-login-submit.btn:focus,
.c9-modal-submit.btn:hover,
.c9-modal-submit.btn:focus {
    color: #07131b;
    background: linear-gradient(110deg, #c0f1ff, #8bdaf2);
    box-shadow: 0 11px 30px rgba(45, 140, 177, .32);
    transform: translateY(-1px);
}

.c9-create-account-area {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.c9-create-account-prompt {
    justify-content: space-between;
    gap: 12px;
    color: var(--c9-muted);
    font-size: 12px;
}

.c9-create-account-prompt a {
    color: var(--c9-gold);
    font-weight: 700;
}

.c9-create-account-prompt a:hover,
.c9-create-account-prompt a:focus {
    color: #f4d6a0;
    text-decoration: none;
}

.c9-login-footnote {
    margin: 18px 0 0;
    color: #9ca8b6;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.c9-login-footer {
    min-height: 56px;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .13);
    color: rgba(235, 240, 246, .68);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.c9-account-modal {
    border: 1px solid var(--c9-line);
    border-radius: 12px;
    color: var(--c9-text);
    background: #101722;
    box-shadow: 0 22px 65px rgba(0, 0, 0, .6);
}

.c9-account-modal .modal-header,
.c9-account-modal .modal-footer {
    border-color: rgba(255, 255, 255, .12);
}

.c9-account-modal .modal-title {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
}

.c9-account-modal .modal-body .form-group {
    margin-bottom: 17px;
}

.c9-modal-submit.btn {
    display: inline-flex;
    width: auto;
    min-width: 155px;
    padding: 0 18px;
    vertical-align: middle;
}

.c9-modal-cancel.btn {
    min-height: 44px;
    margin-left: 8px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    color: #d5dde6;
    background: transparent;
}

.c9-modern-site {
    min-height: 100vh;
    margin: 0;
    color: #e8edf4;
    background:
        radial-gradient(ellipse at 52% -25%, rgba(45, 69, 91, .38), transparent 58%),
        linear-gradient(180deg, #0b1119 0%, #101822 42%, #0b1118 100%);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.c9-site-nav.navbar-inverse {
    min-height: 70px;
    margin: 0 0 24px;
    border: 1px solid rgba(216, 180, 119, .23);
    border-radius: 0 0 13px 13px;
    background: rgba(8, 13, 21, .96);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .23);
}

.c9-brand.navbar-brand {
    display: flex;
    height: 68px;
    align-items: center;
    gap: 11px;
    padding: 9px 18px;
    color: #fff;
}

.c9-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px 3px 11px 3px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
}

.c9-brand-caption {
    color: #c7d0da;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1.2;
}

.c9-site-nav.navbar-inverse .navbar-nav > li > a {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    color: #c7d0da;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .025em;
    transition: color .18s ease, background .18s ease;
}

.c9-site-nav.navbar-inverse .navbar-nav > li > a:hover,
.c9-site-nav.navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
    background: rgba(216, 180, 119, .1);
}

.c9-nav-icon {
    color: var(--c9-gold);
}

.c9-nav-icon svg {
    width: 18px;
    height: 18px;
}

.c9-costume-shop {
    color: #263548;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.c9-costume-shop p,
.c9-costume-shop b,
.c9-costume-shop strong,
.c9-costume-shop label,
.c9-costume-shop .table {
    color: #263548;
}

.c9-costume-shop .mGrid td {
    color: #4b5868;
}

.c9-costume-shop .mGrid .pgr td {
    color: #fff;
}

.c9-costume-shop .mGrid .pgr a {
    color: #f4e4c7;
}

.c9-costume-shop .mGrid .pgr a:hover {
    color: #fff;
}

.c9-costume-shop .c9-costume-intro {
    margin: 12px 0 16px;
    padding: 14px 17px;
    border: 1px solid #e1d1b2;
    border-left: 4px solid #b88b4c;
    border-radius: 7px;
    color: #263548;
    background: #f7f4ed;
    font-size: 15px;
    line-height: 1.6;
}

.c9-costume-shop .c9-costume-intro strong {
    color: #172638;
    font-weight: 750;
}

.c9-shop-page input[type="submit"],
.c9-shop-page .btn {
    border: 1px solid #a98249;
    border-radius: 7px;
    color: #111923;
    background: linear-gradient(135deg, #f0d9a7, #c69b5c);
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(9, 15, 23, .16);
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.c9-shop-page input[type="submit"]:hover,
.c9-shop-page input[type="submit"]:focus,
.c9-shop-page .btn:hover,
.c9-shop-page .btn:focus {
    border-color: #e1c184;
    color: #080d15;
    background: linear-gradient(135deg, #f8e6bd, #d8b477);
    box-shadow: 0 5px 14px rgba(9, 15, 23, .22);
    transform: translateY(-1px);
}

.c9-shop-page input[type="submit"]:disabled,
.c9-shop-page .btn:disabled {
    opacity: .58;
    cursor: not-allowed;
    box-shadow: none;
}

.c9-shop-page select,
.c9-shop-page input[type="text"] {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #9b7848;
    border-radius: 6px;
    color: #f4ead8;
    background: #111923;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22);
}

.c9-shop-page select:focus,
.c9-shop-page input[type="text"]:focus {
    border-color: #e0c184;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(216, 180, 119, .2);
}

.c9-shop-page select option {
    color: #f4ead8;
    background: #111923;
}

.c9-costume-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.c9-shop-page .mGrid tr:not(.pgr) td > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 29px;
    padding: 4px 10px;
    border: 1px solid #aa844e;
    border-radius: 5px;
    color: #f0d8a7;
    background: #141d28;
    font-weight: 700;
    text-decoration: none;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.c9-shop-page .mGrid tr:not(.pgr) td > a:hover,
.c9-shop-page .mGrid tr:not(.pgr) td > a:focus {
    border-color: #e1c184;
    color: #101722;
    background: #d8b477;
}

.c9-shop-page .mGrid .pgr a {
    color: #f0d8a7;
    background: transparent;
    box-shadow: none;
}

.c9-shop-page .mGrid .pgr a:hover,
.c9-shop-page .mGrid .pgr a:focus {
    color: #fff;
    background: rgba(216, 180, 119, .16);
    transform: none;
}

.c9-ajax-loading {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 11px;
    padding: 6px 11px;
    border: 1px solid rgba(184, 139, 76, .32);
    border-radius: 7px;
    color: #263548;
    background: #f7f4ed;
    font-weight: 600;
}

.c9-ajax-spinner {
    display: inline-block;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border: 3px solid rgba(184, 139, 76, .24);
    border-top-color: #a98249;
    border-right-color: #e0c184;
    border-radius: 50%;
    animation: c9-gold-spin .78s linear infinite;
}

@keyframes c9-gold-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .c9-shop-page input[type="submit"],
    .c9-shop-page .btn,
    .c9-shop-page .mGrid tr:not(.pgr) td > a {
        transition: none;
    }

    .c9-ajax-spinner {
        animation-duration: 1.8s;
    }
}

/* Item Shop content sits inside one shared white workspace panel. */
.c9-item-shop.container-fluid {
    width: min(calc(100% - 28px), 1740px);
    margin: 14px auto 34px;
    padding: 12px 16px 20px;
    border: 1px solid #d8c6a6;
    border-radius: 11px;
    color: #263548;
    background: #fff;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
}

.c9-item-shop .panel.panel-default {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.c9-item-shop .panel-heading {
    border: 0;
    border-bottom: 1px solid #e4dac9;
    color: #263548;
    background: #f7f4ed;
}

.c9-item-shop .panel-heading .panel-title,
.c9-item-shop .panel-heading h3 {
    color: #172638;
}

.c9-item-shop .panel-body,
.c9-item-shop p,
.c9-item-shop label,
.c9-item-shop b,
.c9-item-shop strong,
.c9-item-shop .table,
.c9-item-shop .table th,
.c9-item-shop .table td {
    color: #263548;
}

.c9-item-shop select,
.c9-item-shop input[type="text"] {
    border-color: #cbb995;
    color: #263548;
    background: #fff;
}

.c9-item-shop select option {
    color: #263548;
    background: #fff;
}

.c9-item-shop .mGrid tr:not(.pgr) td {
    color: #3f4f62;
    background: #fff;
}

.c9-item-shop .mGrid tr.alt:not(.pgr) td {
    color: #3f4f62;
    background: #f4f6f8;
}

.c9-item-shop .table > thead > tr > th,
.c9-item-shop .table > tbody > tr > td {
    border-color: #d9dde3;
}

/* Keep legacy GridView alternate rows opaque so the old white stripe cannot show through. */
.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid > tbody > tr:not(.pgr) {
    color: #e9eef5;
    background: #111923;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid > tbody > tr.alt:not(.pgr) {
    color: #e9eef5;
    background: #192535;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid > tbody > tr:not(.pgr) > td {
    color: #e9eef5;
    background: #111923;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid > tbody > tr.alt:not(.pgr) > td {
    color: #e9eef5;
    background: #192535;
}

.c9-ranking-filter-select {
    width: 275px;
    max-width: calc(100vw - 130px);
    color-scheme: dark;
}

@media (max-width: 767px) {
    .c9-item-shop.container-fluid {
        width: calc(100% - 20px);
        margin: 10px auto 24px;
        padding: 10px 8px 14px;
    }

    .c9-ranking-filter-select {
        width: 100%;
        max-width: none;
    }
}

/* PvP Set: one parchment-colored panel containing the full selection workflow. */
.c9-pvp-set {
    width: min(calc(100% - 36px), 1420px);
    margin: 22px auto 34px;
    padding: 18px 20px 22px;
    border: 1px solid #b88b4c;
    border-radius: 11px;
    color: #263548;
    background: #f7f4ed;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .25);
}

.c9-pvp-set > .row {
    margin-right: 0;
    margin-left: 0;
}

.c9-pvp-set > .row > .col-md-12 {
    padding-right: 0;
    padding-left: 0;
}

.c9-pvp-set,
.c9-pvp-set p,
.c9-pvp-set label,
.c9-pvp-set strong,
.c9-pvp-set .table {
    color: #263548;
}

.c9-pvp-set .panel.panel-default {
    margin-bottom: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.c9-pvp-set .panel-heading {
    padding: 9px 0 12px;
    border: 0;
    border-bottom: 1px solid #dfd4c2;
    background: transparent;
}

.c9-pvp-set .panel-heading .panel-title,
.c9-pvp-set .panel-heading h3 {
    margin: 0;
    color: #172638;
    font-size: 22px;
    font-weight: 700;
}

.c9-pvp-set .table {
    background: transparent;
}

.c9-pvp-set .table > tbody > tr.success > td,
.c9-pvp-set .table > tbody > tr.active > td {
    border: 0;
    background: transparent;
}

.c9-pvp-set .table > tbody > tr > td {
    border-top-color: #e4dac9;
}

@media (max-width: 767px) {
    .c9-pvp-set {
        width: calc(100% - 20px);
        margin: 12px auto 22px;
        padding: 12px;
    }
}

.c9-site-nav .navbar-toggle {
    margin-top: 17px;
    border-color: rgba(216, 180, 119, .45);
}

.c9-site-nav .navbar-toggle:hover,
.c9-site-nav .navbar-toggle:focus {
    background: rgba(216, 180, 119, .12);
}

.c9-site-nav.navbar-inverse .navbar-toggle .icon-bar {
    background: var(--c9-gold);
}

.c9-site-nav .c9-logout-link {
    color: #f0d5a2 !important;
}

.c9-site-nav .c9-logout-link:before {
    content: "↪";
    margin-right: 8px;
    color: var(--c9-gold);
    font-size: 17px;
}

.c9-site-nav .c9-server-status-nav {
    display: flex;
    min-height: 68px;
    align-items: center;
    padding: 0 8px;
}

.c9-site-nav .c9-server-status {
    min-height: 34px;
    padding: 0 11px;
    font-size: 11px;
}

.c9-home-shell {
    margin: 0 auto 28px;
    padding: 0 10px;
}

.c9-home-account {
    padding-left: 12px;
}

.c9-home-account .tabbable {
    min-height: 350px;
    padding: 17px;
    border: 1px solid var(--c9-line);
    border-radius: 12px;
    color: #e7edf4;
    background: rgba(10, 16, 25, .9);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

.c9-home-account .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.c9-home-account .nav-tabs > li > a {
    margin-right: 5px;
    border: 1px solid transparent;
    border-radius: 7px 7px 0 0;
    color: #c1cad4;
    font-size: 13px;
}

.c9-home-account .nav-tabs > li > a:hover,
.c9-home-account .nav-tabs > li > a:focus {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.c9-home-account .nav-tabs > li.active > a,
.c9-home-account .nav-tabs > li.active > a:hover,
.c9-home-account .nav-tabs > li.active > a:focus {
    border-color: rgba(216, 180, 119, .4);
    border-bottom-color: #101722;
    color: #fff;
    background: #101722;
}

.c9-home-account .tab-content {
    padding-top: 13px;
}

.c9-home-account .c9-welcome-message {
    min-height: 215px;
    padding: 19px 17px;
    border-left: 2px solid var(--c9-gold);
    color: #d9e1e9;
    background: linear-gradient(140deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
}

.c9-home-account .c9-welcome-message h3 {
    margin: 5px 0 12px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
}

.c9-home-account .c9-welcome-message p {
    color: #c1cad4;
    font-size: 14px;
    line-height: 1.7;
}

.c9-home-account #panel-542124 {
    color: #e7edf4;
}

.c9-home-account #panel-542124 > img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 7px;
}

.c9-home-account #panel-542124 .btn {
    border: 1px solid rgba(216, 180, 119, .46);
    border-radius: 6px;
    color: #f0d5a2;
    background: rgba(216, 180, 119, .08);
}

.c9-home-account #panel-542124 .btn:hover,
.c9-home-account #panel-542124 .btn:focus {
    color: #fff;
    background: rgba(216, 180, 119, .18);
}

.c9-home-shell > .row:last-child .panel {
    overflow: hidden;
    border: 1px solid rgba(216, 180, 119, .3);
    border-radius: 11px;
    background: rgba(250, 251, 252, .97);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.c9-home-shell > .row:last-child .panel-heading {
    border-bottom: 1px solid rgba(216, 180, 119, .28);
    color: #f6f2ea;
    background: linear-gradient(110deg, #152131, #202b38);
}

.c9-home-shell > .row:last-child .panel-title {
    font-weight: 700;
    letter-spacing: .025em;
}

.c9-home-shell > .row:last-child .panel-body {
    color: #34404d;
}

.c9-home-shell > .row:last-child .panel-footer {
    border-top: 1px solid #e6e9ed;
    color: #687484;
    background: #f4f6f8;
}

.c9-home-rankings {
    margin-top: 4px;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel {
    overflow: hidden;
    border: 1px solid rgba(216, 180, 119, .42);
    border-radius: 13px;
    color: #e9eef5;
    background: linear-gradient(145deg, rgba(17, 26, 38, .98), rgba(8, 13, 21, .98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel > .panel-heading {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 17px 21px;
    border: 0;
    border-bottom: 1px solid rgba(216, 180, 119, .28);
    color: #f5ead7;
    background: linear-gradient(105deg, rgba(216, 180, 119, .15), rgba(15, 24, 36, .94) 56%);
}

.c9-ranking-heading {
    min-width: 0;
}

.c9-ranking-kicker {
    margin: 0 0 5px;
    color: #e2c58f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .panel-title {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    letter-spacing: .01em;
}

.c9-ranking-filter-wrap {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.c9-ranking-filter-label {
    color: #e3e8ef;
    font-size: 13px;
    font-weight: 700;
}

.c9-ranking-filter-select {
    min-width: 190px;
    min-height: 39px;
    padding: 7px 32px 7px 11px;
    border: 1px solid #b28b50;
    border-radius: 7px;
    color: #f7edda;
    background: #101824;
    font: inherit;
    font-size: 13px;
}

.c9-ranking-filter-select:focus {
    border-color: #e5c98f;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(216, 180, 119, .2);
}

.c9-ranking-filter-select option {
    color: #f7edda;
    background: #101824;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel > .panel-body {
    padding: 16px 20px;
    color: #e1e7ef;
    background: transparent;
}

.c9-ranking-table-wrap {
    overflow-x: auto;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid {
    width: 100%;
    min-width: 570px;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0 3px;
    background: transparent;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid th {
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid rgba(216, 180, 119, .45);
    color: #edd9b1;
    background: #172332;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid td {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #dce4ed;
    background: rgba(255, 255, 255, .025);
    font-size: 14px;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .alt td {
    background: rgba(255, 255, 255, .055);
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid td:first-child {
    color: #e2c58f;
    font-weight: 800;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .pgr,
.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .pgr td {
    border: 0;
    background: transparent;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .pgr td {
    padding: 8px 4px 2px;
    color: #dce4ed;
    text-align: left;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .pgr table {
    width: auto;
    margin: 0;
    border-collapse: separate;
    border-spacing: 4px 0;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .pgr a,
.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .pgr span {
    display: inline-block;
    min-width: 30px;
    padding: 6px 8px;
    border: 1px solid rgba(216, 180, 119, .45);
    border-radius: 5px;
    color: #f0d8a7;
    background: #111923;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .pgr span {
    border-color: #d8b477;
    color: #111923;
    background: #d8b477;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .pgr a:hover,
.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel .mGrid .pgr a:focus {
    border-color: #f0d8a7;
    color: #101722;
    background: #f0d8a7;
}

.c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel > .panel-footer {
    padding: 12px 20px;
    border: 0;
    border-top: 1px solid rgba(216, 180, 119, .18);
    color: #c3ccd7;
    background: rgba(0, 0, 0, .12);
    font-size: 12px;
}

@media (max-width: 767px) {
    .c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel > .panel-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .c9-ranking-filter-wrap {
        width: 100%;
        justify-content: space-between;
    }

    .c9-ranking-filter-select {
        min-width: 0;
        flex: 1 1 auto;
    }

    .c9-home-shell .c9-home-rankings > .col-md-12 .c9-pvp-ranking-panel > .panel-body {
        padding: 10px;
    }
}

@media (max-width: 991px) {
    .c9-login-shell {
        width: min(100% - 34px, 760px);
    }

    .c9-login-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
        gap: 28px;
    }

    .c9-login-card {
        padding: 26px 23px;
    }

    .c9-home-shell {
        padding: 0;
    }

    .c9-home-account {
        margin-top: 18px;
        padding-left: 15px;
    }
}

@media (max-width: 767px) {
    .c9-login-page {
        background-size: cover, cover, auto 100%;
        background-position: center, center, center;
        background-attachment: scroll;
    }

    .c9-login-shell {
        width: min(100% - 28px, 560px);
    }

    .c9-login-header {
        min-height: 78px;
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 12px 0;
    }

    .c9-login-header-actions {
        width: 100%;
        justify-content: flex-end;
        gap: 8px;
    }

    .c9-login-header-actions .c9-server-status {
        min-height: 34px;
        padding: 0 10px;
        font-size: 10px;
    }

    .c9-login-brand-mark {
        width: 41px;
        height: 41px;
        font-size: 20px;
    }

    .c9-login-brand-copy strong {
        max-width: 185px;
        font-size: 9px;
        letter-spacing: .12em;
    }

    .c9-login-brand-copy small {
        font-size: 8px;
    }

    .c9-download-link {
        min-height: 40px;
        gap: 6px;
        padding: 0 10px;
        font-size: 10px;
    }

    .c9-login-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 27px;
        padding: 36px 0;
    }

    .c9-login-intro {
        padding: 5px 0;
    }

    .c9-login-kicker {
        margin-bottom: 14px;
        font-size: 9px;
    }

    .c9-login-intro h1 {
        font-size: clamp(42px, 12vw, 63px);
    }

    .c9-login-description {
        max-width: 410px;
        margin: 15px 0 18px;
        font-size: 15px;
    }

    .c9-login-features {
        gap: 8px 14px;
        font-size: 9px;
    }

    .c9-login-card {
        padding: 25px 20px;
    }

    .c9-login-card h2 {
        font-size: 22px;
    }

    .c9-login-footer {
        min-height: 46px;
        font-size: 8px;
    }

    .c9-site-nav.navbar-inverse {
        margin-bottom: 15px;
        border-radius: 0 0 10px 10px;
    }

    .c9-site-nav .navbar-collapse {
        border-color: rgba(216, 180, 119, .18);
    }

    .c9-site-nav .c9-server-status-nav {
        min-height: 44px;
        padding: 5px 15px;
    }

    .c9-site-nav.navbar-inverse .navbar-nav > li > a {
        min-height: 47px;
        padding: 0 15px;
    }

    .c9-brand.navbar-brand {
        height: 58px;
    }

    .c9-site-nav .navbar-toggle {
        margin-top: 12px;
    }

    .c9-home-account .tabbable {
        padding: 13px;
    }

    .c9-home-shell > .row:last-child > div {
        margin-bottom: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c9-download-link,
    .c9-login-input.form-control,
    .c9-login-submit.btn,
    .c9-home-action,
    .c9-site-nav.navbar-inverse .navbar-nav > li > a {
        transition: none;
    }
}