.container.account-container-wide {
    width: calc(100% - 40px);
    max-width: 1600px;
}

.account-workspace {
    padding-top: 22px;
    padding-bottom: 40px;
}

html:not([data-theme="dark"]) #save_dashboard.btn[disabled] {
    color: var(--account-color-text-muted);
    opacity: 1;
}

.account-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding: 9px;
    border: 1px solid var(--account-color-border);
    border-left: 3px solid var(--account-color-primary);
    border-radius: 4px;
    background: var(--account-color-surface);
}

.account-filter-toolbar-mark {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--account-color-divider);
    color: var(--account-color-primary);
    font-size: 14px;
}

.account-filter-controls {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    grid-template-columns: minmax(190px, 1.8fr) minmax(82px, .65fr) minmax(82px, .65fr) minmax(125px, 1.1fr) minmax(112px, .85fr) auto;
    gap: 7px;
}

.account-filter-controls-no-season {
    grid-template-columns: minmax(190px, 1.8fr) minmax(82px, .65fr) minmax(82px, .65fr) minmax(125px, 1.1fr) auto;
}

.account-filter-control,
.account-filter-action {
    min-width: 0;
}

.account-filter-toolbar .form-control,
.account-filter-toolbar .btn {
    height: 36px;
    border-radius: 3px;
    box-shadow: none;
    font-size: 12px;
}

.account-filter-toolbar .form-control {
    width: 100%;
    padding: 7px 30px 7px 10px;
    border-color: var(--account-color-control-border);
    color: var(--account-color-text);
    background-color: var(--account-color-surface);
}

.account-filter-toolbar .form-control:focus,
.account-filter-toolbar .btn-multiselect:focus {
    border-color: var(--account-color-focus);
    box-shadow: 0 0 0 2px var(--account-color-focus-ring);
}

.account-filter-toolbar .multiselect-native-select,
.account-filter-toolbar .btn-group,
.account-filter-toolbar .btn-multiselect {
    width: 100% !important;
}

.account-filter-toolbar .btn-multiselect {
    position: relative;
    overflow: hidden;
    padding: 7px 30px 7px 10px;
    border-color: var(--account-color-control-border);
    color: var(--account-color-text);
    background: var(--account-color-surface);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-filter-toolbar .btn-multiselect .caret {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -2px;
}

.account-filter-toolbar .multiselect-container {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    border-color: var(--account-color-border);
    background: var(--account-color-surface);
}

.account-filter-toolbar .multiselect-container > li > a {
    color: var(--account-color-text);
}

.account-filter-toolbar .multiselect-container > li > a:hover,
.account-filter-toolbar .multiselect-container > li > a:focus,
.account-filter-toolbar .multiselect-container > .active > a {
    color: var(--account-color-heading);
    background: var(--account-color-primary-soft);
}

.account-filter-action .btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-right: 15px;
    padding-left: 15px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .account-filter-toolbar-mark {
        display: none;
    }

    .account-filter-controls,
    .account-filter-controls-no-season {
        grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(105px, 1fr));
    }
}

@media (max-width: 767px) {
    .account-filter-controls,
    .account-filter-controls-no-season {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-filter-account,
    .account-filter-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 479px) {
    .account-filter-toolbar {
        padding: 8px;
    }

    .account-filter-controls,
    .account-filter-controls-no-season {
        grid-template-columns: 1fr;
    }

    .account-filter-account,
    .account-filter-action {
        grid-column: auto;
    }
}

.training-center-heading {
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 18px;
}

.training-center-heading-copy {
    min-width: 220px;
}

.training-center-heading h1 {
    margin: 0;
    color: var(--account-color-heading);
    font-weight: 700;
    line-height: 1.2;
}

.training-center-heading h1 {
    font-size: 22px;
}

.training-center-heading p {
    margin: 4px 0 0;
    color: var(--account-color-text-subtle);
    font-size: 12px;
    line-height: 1.4;
}

.training-center-filters {
    display: grid;
    width: min(760px, 100%);
    grid-template-columns: minmax(190px, 1.35fr) minmax(135px, .8fr) minmax(120px, .7fr) auto;
    gap: 7px;
}

.training-center-filters .form-control,
.training-center-filters .btn {
    height: 36px;
    border-radius: 3px;
    box-shadow: none;
    font-size: 12px;
}

.training-center-filters .form-control {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 7px 30px 7px 10px !important;
    border-color: var(--account-color-control-border);
    color: #2b4058;
    background: var(--account-color-surface);
    box-sizing: border-box;
    line-height: 20px !important;
}

.training-center-filters .form-control:focus {
    border-color: var(--account-color-focus);
    box-shadow: 0 0 0 2px var(--account-color-focus-ring);
}

.training-center-filters .btn {
    padding-right: 16px;
    padding-left: 16px;
    font-weight: 700;
}

.training-center-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.training-center-summary .panel-card {
    min-height: 132px;
}

.training-goal-card,
.training-games-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 17px;
}

.training-goal-icon {
    display: flex;
    width: 88px;
    height: 94px;
    flex: 0 0 88px;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e0e7ee;
}

.training-goal-icon img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(16, 42, 77, .28));
}

.training-summary-label {
    display: block;
    margin-bottom: 4px;
    color: #63768d;
    font-size: 12px;
    font-weight: 700;
}

.training-goal-card strong,
.training-games-card strong {
    display: block;
    color: var(--account-color-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.training-goal-card small,
.training-games-card small {
    display: block;
    margin-top: 5px;
    color: var(--account-color-text-subtle);
    font-size: 12px;
    line-height: 1.35;
}

.training-games-chart {
    position: relative;
    display: flex;
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    align-items: center;
    justify-content: center;
}

.training-games-chart canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.training-games-chart span {
    position: relative;
    z-index: 1;
    color: var(--account-color-heading-secondary);
    font-size: 17px;
    font-weight: 700;
}

.training-insight-card {
    padding: 15px 17px;
}

.training-insight-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.training-insight-stats > div {
    padding-right: 10px;
    border-right: 1px solid #e0e7ee;
}

.training-insight-stats > div:last-child {
    border-right: 0;
}

.training-insight-stats strong,
.training-insight-stats span {
    display: block;
}

.training-insight-stats strong {
    color: var(--account-color-heading);
    font-size: 20px;
    line-height: 1.1;
}

.training-insight-stats span {
    margin-top: 3px;
    color: #60738a;
    font-size: 12px;
}

.training-insight-card p {
    margin: 10px 0 0;
    color: var(--account-color-text-subtle);
    font-size: 12px;
    line-height: 1.4;
}

.account-notice.training-elite-notice {
    align-items: center;
    margin-bottom: 16px;
}

.account-notice.training-elite-notice > .fa {
    margin-top: 0;
    font-size: 18px;
}

.training-elite-notice > div {
    min-width: 0;
    flex: 1 1 auto;
}

.training-elite-notice .btn {
    flex: 0 0 auto;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.training-center-workspace {
    min-height: 360px;
}

.training-primary-tabs,
.training-progress-tabs {
    display: flex;
    margin: 0;
    border-bottom: 1px solid var(--account-color-border);
    background: var(--account-color-surface-muted);
}

.training-primary-tabs > li,
.training-progress-tabs > li {
    margin: 0;
}

.training-primary-tabs > li > a,
.training-progress-tabs > li > a {
    margin: 0;
    border: 0 !important;
    border-right: 1px solid var(--account-color-border) !important;
    border-radius: 0;
    color: #5d7087;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
}

.training-primary-tabs > li > a {
    padding: 11px 16px;
}

.training-primary-tabs > li.active > a,
.training-primary-tabs > li.active > a:hover,
.training-primary-tabs > li.active > a:focus,
.training-progress-tabs > li.active > a,
.training-progress-tabs > li.active > a:hover,
.training-progress-tabs > li.active > a:focus {
    color: var(--account-color-heading-secondary);
    background: var(--account-color-surface);
    box-shadow: inset 0 3px 0 var(--account-color-primary);
}

.training-tab-count {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 10px;
    color: #476078;
    background: #dce6ef;
    font-size: 11px;
}

.training-primary-tabs > li.active .training-tab-count {
    color: #225783;
    background: #e5eef6;
}

.training-primary-content > .tab-pane {
    min-height: 310px;
}

.training-replay-table-scroll {
    overflow-x: auto;
}

.training-replay-table {
    min-width: 1040px;
    margin: 0;
    font-size: 12px;
}

.training-replay-table > thead > tr > th {
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--account-color-border);
    color: #53667e;
    background: var(--account-color-surface-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.training-replay-table > tbody > tr > td {
    padding: 8px 10px;
    border-top: 1px solid var(--account-color-border-soft);
    color: #354a62;
    vertical-align: middle;
}

.training-replay-table > tbody > tr:hover > td {
    background: var(--account-color-surface-subtle);
}

.training-replay-table td strong {
    color: #18324f;
}

.training-result-column,
.training-result-cell {
    width: 58px;
    text-align: center;
}

.training-replay-date {
    width: 118px;
    white-space: nowrap;
}

.training-replay-date strong,
.training-replay-date small {
    display: block;
}

.training-replay-date strong {
    color: #18324f;
    font-size: 12px;
    line-height: 1.2;
}

.training-replay-date small {
    margin-top: 2px;
    color: var(--account-color-text-subtle);
    font-size: 11px;
}

.training-replay-map {
    min-width: 205px;
}

.training-replay-map-content {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.training-replay-map-thumb,
.training-replay-map-placeholder {
    width: 48px;
    height: 32px;
    flex: 0 0 48px;
    border: 1px solid #ced8e2;
    border-radius: 3px;
}

.training-replay-map-thumb {
    object-fit: cover;
}

.training-replay-map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8292a5;
    background: #e8eef4;
    font-size: 15px;
}

.training-replay-map-content strong {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.training-opponent-cell {
    min-width: 220px;
}

.training-opponent {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
}

.training-opponent:before {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--player-color, #527bbb);
    content: "";
}

.training-opponent .races,
.training-opponent .leagues,
.training-league-placeholder {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    float: none;
    margin-bottom: 0;
}

.training-opponent-copy {
    display: block;
    min-width: 0;
}

.training-opponent-copy > a,
.training-opponent-copy > strong,
.training-opponent-copy > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-opponent-copy > a,
.training-opponent-copy > strong {
    color: #1e3654;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.training-opponent-copy > a:hover,
.training-opponent-copy > a:focus {
    color: var(--account-color-primary-hover);
    text-decoration: none;
}

.training-opponent-copy > small {
    margin-top: 2px;
    color: #7b899b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
}

.training-table-action {
    width: 72px;
    text-align: right;
}

.training-table-action .btn {
    border-color: #bdccda;
    border-radius: 3px;
    color: #245783;
    font-size: 12px;
    font-weight: 700;
}

.training-result {
    display: inline-flex;
    width: 34px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 3px;
    font-weight: 700;
}

.training-result.is-win {
    border-color: #b9ddc7;
    color: #23724a;
    background: #eaf6ef;
}

.training-result.is-loss {
    border-color: #efc2c8;
    color: #a73745;
    background: #fae9eb;
}

.training-suggestion-count {
    display: inline-flex;
    min-width: 27px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #245783;
    background: #e7f0f7;
    font-weight: 700;
}

.account-section-heading.training-tab-heading {
    padding: 14px 16px;
}

.account-section-heading.training-tab-heading h2 {
    font-size: 16px;
}

.training-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px 16px;
}

.training-focus-card {
    overflow: hidden;
    border: 1px solid var(--account-color-border);
    border-radius: 3px;
    background: var(--account-color-surface);
}

.training-focus-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--account-color-border);
    background: #edf3f8;
}

.training-focus-card > header span {
    color: var(--account-color-heading-secondary);
    font-size: 13px;
    font-weight: 700;
}

.training-focus-card > header strong {
    color: #6b7e94;
    font-size: 11px;
    font-weight: 600;
}

.training-focus-card ol {
    margin: 0;
    padding: 5px 11px 5px 38px;
}

.training-focus-card ol > li {
    padding: 8px 4px 8px 2px;
    border-bottom: 1px solid #e8edf2;
    color: #354a62;
    font-size: 12px;
}

.training-focus-card ol > li:last-of-type {
    border-bottom: 0;
}

.training-focus-card ol > li::marker {
    color: var(--account-color-primary);
    font-weight: 700;
}

.training-detail-link {
    display: block;
    margin: 3px 0 0;
    padding: 0;
    border: 0;
    color: var(--account-color-primary);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
}

.training-detail-link:hover,
.training-detail-link:focus {
    color: #1f5f98;
    text-decoration: underline;
}

.training-progress-tabs {
    overflow-x: auto;
}

.training-progress-tabs > li {
    flex: 1 0 auto;
    text-align: center;
}

.training-progress-tabs > li > a {
    min-height: 48px;
    padding: 8px 12px;
}

.training-progress-tabs > li > a > span {
    display: block;
    margin-top: 2px;
    color: #8190a2;
    font-size: 11px;
    font-weight: 500;
}

.training-progress-content {
    padding: 14px 16px 16px;
}

.training-progress-matchup {
    margin-bottom: 13px;
    border: 1px solid var(--account-color-border);
    border-radius: 3px;
}

.training-progress-matchup:last-child {
    margin-bottom: 0;
}

.training-progress-matchup > h3 {
    margin: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--account-color-border);
    color: var(--account-color-heading-secondary);
    background: #edf3f8;
    font-size: 13px;
    font-weight: 700;
}

.training-progress-matchup .table {
    margin-bottom: 0;
    font-size: 12px;
}

.training-progress-matchup .table > thead > tr > th {
    color: #53667e;
    background: var(--account-color-surface-hover);
    font-size: 12px;
}

.training-progress-matchup .table > tbody > tr > td,
.training-progress-matchup .table > thead > tr > th {
    padding: 7px 9px;
    border-color: var(--account-color-divider-soft);
    vertical-align: middle;
}

.account-empty-state.training-empty-state {
    min-height: 250px;
    gap: 5px;
    color: #8190a2;
}

.account-empty-state.training-empty-state .fa {
    margin-bottom: 3px;
    color: #91a1b2;
    font-size: 25px;
}

.account-empty-state.training-empty-state strong {
    margin-bottom: 0;
    color: #344a62;
    font-size: 13px;
}

.training-center-page .modal-title {
    color: var(--account-color-heading-secondary);
    font-size: 16px;
    font-weight: 700;
}

.training-center-page .modal-body {
    color: #354a62;
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .training-center-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .training-center-filters {
        width: 100%;
    }

    .training-center-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .training-insight-card {
        grid-column: 1 / -1;
        min-height: auto !important;
    }
}

@media (max-width: 767px) {
    .training-center-heading {
        padding-right: 14px;
        padding-left: 14px;
    }

    .training-center-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .training-center-summary,
    .training-focus-grid {
        grid-template-columns: 1fr;
    }

    .training-insight-card {
        grid-column: auto;
    }

    .account-notice.training-elite-notice {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .training-elite-notice .btn {
        margin-left: 29px;
    }

    .training-primary-tabs {
        overflow-x: auto;
    }

    .training-primary-tabs > li {
        min-width: 150px;
        flex: 0 0 auto;
    }

    .training-focus-grid,
    .training-progress-content {
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (max-width: 480px) {
    .training-center-filters {
        grid-template-columns: 1fr;
    }

    .training-goal-card,
    .training-games-card {
        align-items: flex-start;
    }

    .training-goal-icon {
        width: 72px;
        height: 82px;
        flex-basis: 72px;
    }

    .training-goal-icon img {
        width: 64px;
        height: 64px;
    }
}

.training-replay-heading {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
}

.training-replay-back {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--account-color-primary);
    font-size: 12px;
    font-weight: 700;
}

.training-replay-back:hover,
.training-replay-back:focus {
    color: #1f5f98;
    text-decoration: none;
}

.training-replay-back .fa {
    margin-right: 3px;
}

.training-replay-heading h1 {
    margin: 0;
    color: var(--account-color-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.training-replay-heading p {
    margin: 4px 0 0;
    color: var(--account-color-text-subtle);
    font-size: 12px;
    line-height: 1.4;
}

.training-view-replay {
    flex: 0 0 auto;
    border-color: #bdccda;
    border-radius: 3px;
    color: #245783;
    font-size: 12px;
    font-weight: 700;
}

.training-view-replay .fa {
    margin-right: 5px;
}

.training-replay-context {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(0, 2.28fr);
    gap: 12px;
}

.training-replay-goal {
    display: flex;
    min-height: 142px;
    align-items: center;
    gap: 15px;
    padding: 16px 17px;
}

.training-replay-goal img {
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(16, 42, 77, .28));
}

.training-replay-goal span,
.training-replay-goal strong,
.training-replay-goal small {
    display: block;
}

.training-replay-goal span {
    color: #63768d;
    font-size: 12px;
    font-weight: 700;
}

.training-replay-goal strong {
    margin-top: 3px;
    color: var(--account-color-heading);
    font-size: 19px;
    line-height: 1.2;
}

.training-replay-goal small {
    margin-top: 5px;
    color: var(--account-color-text-subtle);
    font-size: 12px;
    line-height: 1.35;
}

.training-replay-match {
    position: relative;
    display: grid;
    min-height: 142px;
    grid-template-columns: minmax(205px, .82fr) minmax(350px, 1.55fr);
    gap: 18px;
    align-items: center;
    padding: 15px 17px;
}

.training-replay-map-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.training-replay-map-card > img,
.training-replay-map-card > .glyphicon {
    width: 112px;
    height: 76px;
    flex: 0 0 112px;
    border: 1px solid #cbd6e0;
    border-radius: 3px;
}

.training-replay-map-card > img {
    object-fit: cover;
}

.training-replay-map-card > .glyphicon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8292a5;
    background: #e8eef4;
    font-size: 22px;
}

.training-replay-map-card strong,
.training-replay-map-card span {
    display: block;
}

.training-replay-map-card strong {
    color: #18324f;
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.training-replay-map-card span {
    margin-top: 4px;
    color: var(--account-color-text-subtle);
    font-size: 12px;
    line-height: 1.35;
}

.training-replay-versus {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.training-replay-team {
    min-width: 0;
}

.training-replay-team-1 {
    text-align: right;
}

.training-replay-team-label {
    display: block;
    margin-bottom: 5px;
    color: var(--account-color-text-subtle);
    font-size: 12px;
    font-weight: 700;
}

.training-replay-player {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid #edf1f5;
}

.training-replay-team-1 .training-replay-player {
    justify-content: flex-end;
}

.training-replay-player:last-child {
    border-bottom: 0;
}

.training-replay-player:before {
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 2px;
    background: var(--player-color, #7b899b);
    content: "";
}

.training-replay-team-1 .training-replay-player:before {
    right: 0;
}

.training-replay-team-2 .training-replay-player:before {
    left: 0;
}

.training-replay-player .races {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    float: none;
}

.training-replay-player a {
    min-width: 0;
    overflow: hidden;
    color: #1e3654;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-replay-player a:hover,
.training-replay-player a:focus {
    color: var(--account-color-primary-hover);
    text-decoration: none;
}

.training-replay-vs {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd6e0;
    border-radius: 3px;
    color: #53677f;
    background: var(--account-color-surface-neutral);
    font-size: 12px;
    font-weight: 800;
}

.training-replay-winner {
    position: absolute;
    right: 17px;
    bottom: 8px;
    color: #98720e;
    font-size: 12px;
    font-weight: 700;
}

.training-replay-winner .fa {
    margin-right: 3px;
}

.training-score-panel {
    display: grid;
    grid-template-columns: repeat(7, minmax(125px, 1fr));
}

.training-score-cell {
    min-width: 0;
    padding: 11px 12px;
    border-right: 1px solid var(--account-color-divider);
}

.training-score-cell:last-child {
    border-right: 0;
}

.training-score-cell > span,
.training-score-cell > strong,
.training-score-cell > small {
    display: block;
}

.training-score-cell > span {
    color: #60738a;
    font-size: 12px;
    font-weight: 700;
}

.training-score-cell > strong {
    margin-top: 3px;
    color: #24744c;
    font-size: 17px;
    line-height: 1.2;
}

.training-score-cell > strong.is-low {
    color: #b53b4a;
}

.training-score-cell > small {
    margin-top: 5px;
    color: #7c8c9f;
    font-size: 12px;
    white-space: nowrap;
}

.training-score-bar {
    height: 4px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 2px;
    background: #e0e7ee;
}

.training-score-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #3b8d61;
}

.training-score-bar i.is-low {
    background: #c64b5a;
}

.training-review-workspace {
    min-height: 390px;
}

.training-review-content > .tab-pane {
    min-height: 340px;
}

.training-replay-page .training-progress-tabs > li > a {
    font-size: 14px;
}

.training-replay-page .training-progress-tabs > li > a > span {
    font-size: 12px;
}

.training-guided-content {
    padding: 14px 16px 16px;
}

.training-guidance-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.training-guidance-item {
    display: flex;
    min-width: 0;
    gap: 11px;
    padding: 12px;
    border: 1px solid #e1c8cc;
    border-left: 3px solid #c64b5a;
    border-radius: 3px;
    background: #fffafb;
}

.training-guidance-icon {
    display: inline-flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--account-color-on-primary);
    background: #c64b5a;
    font-size: 12px;
}

.training-guidance-item h3 {
    margin: 0;
    color: #243b55;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.training-guidance-item p {
    margin: 4px 0 0;
    color: #63758a;
    font-size: 12px;
    line-height: 1.45;
}

.account-empty-state.training-locked-state,
.account-empty-state.training-clear-state {
    min-height: 210px;
    gap: 6px;
    padding: 28px;
    color: #7b8b9e;
}

.training-locked-state > .fa,
.training-clear-state > .fa {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    border-radius: 50%;
    font-size: 15px;
}

.training-locked-state > .fa {
    color: #6c7f95;
    background: #e6ecf2;
}

.training-clear-state > .fa {
    color: #26724a;
    background: #e6f4eb;
}

.account-empty-state.training-locked-state strong,
.account-empty-state.training-clear-state strong {
    margin-bottom: 0;
    color: #344a62;
    font-size: 13px;
}

.training-locked-state .btn {
    margin-top: 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.training-raw-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px 16px;
}

.training-raw-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--account-color-border);
    border-radius: 3px;
    background: var(--account-color-surface);
}

.training-raw-panel > header {
    padding: 10px 11px;
    border-bottom: 1px solid var(--account-color-border);
    background: var(--account-color-surface-subtle);
}

.training-raw-panel > header h3 {
    margin: 0;
    color: var(--account-color-heading-secondary);
    font-size: 13px;
    font-weight: 700;
}

.training-data-tabs {
    display: flex;
    margin: 0;
    border-bottom: 1px solid var(--account-color-border);
    background: var(--account-color-surface-muted);
}

.training-data-tabs > li {
    min-width: 0;
    flex: 1 1 0;
    margin: 0;
    text-align: center;
}

.training-data-tabs > li > a {
    min-height: 50px;
    margin: 0;
    padding: 8px 7px;
    border: 0 !important;
    border-right: 1px solid var(--account-color-border) !important;
    border-radius: 0;
    color: #5d7087;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
}

.training-data-tabs > li:last-child > a {
    border-right: 0 !important;
}

.training-data-tabs > li.active > a,
.training-data-tabs > li.active > a:hover,
.training-data-tabs > li.active > a:focus {
    color: var(--account-color-heading-secondary);
    background: var(--account-color-surface);
    box-shadow: inset 0 3px 0 var(--account-color-primary);
}

.training-data-tabs > li > a > span {
    display: block;
    margin-top: 2px;
    color: #8190a2;
    font-size: 12px;
    font-weight: 500;
}

.training-data-table-scroll {
    overflow-x: auto;
}

.training-data-table {
    min-width: 485px;
    margin: 0;
    font-size: 12px;
}

.training-data-table > thead > tr > th {
    padding: 8px 9px;
    border: 0;
    border-bottom: 1px solid var(--account-color-border);
    color: #53667e;
    background: #f5f8fa;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.training-data-table > tbody > tr > td {
    padding: 7px 9px;
    border-top: 1px solid var(--account-color-border-soft);
    color: #354a62;
    vertical-align: middle;
}

.training-data-table > tbody > tr.is-missed > td:first-child {
    color: #b53b4a;
    font-weight: 700;
}

.training-data-table > tbody > tr.is-missed > td:nth-child(2) {
    color: #b53b4a;
}

@media (max-width: 1180px) {
    .training-replay-context {
        grid-template-columns: 1fr;
    }

    .training-replay-goal {
        min-height: auto;
    }

    .training-score-panel {
        overflow-x: auto;
    }

    .training-score-cell {
        min-width: 145px;
    }
}

@media (max-width: 900px) {
    .training-replay-match {
        grid-template-columns: 1fr;
    }

    .training-replay-winner {
        position: static;
        grid-column: 1 / -1;
        text-align: right;
    }

    .training-guidance-list,
    .training-raw-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .training-replay-heading {
        align-items: flex-start;
        flex-direction: column;
        padding-right: 14px;
        padding-left: 14px;
    }

    .training-replay-map-card > img,
    .training-replay-map-card > .glyphicon {
        width: 84px;
        height: 58px;
        flex-basis: 84px;
    }

    .training-guided-content,
    .training-raw-grid {
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (max-width: 520px) {
    .training-replay-goal {
        align-items: flex-start;
    }

    .training-replay-goal img {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .training-replay-versus {
        grid-template-columns: 1fr;
    }

    .training-replay-team-1,
    .training-replay-team-2 {
        text-align: left;
    }

    .training-replay-team-1 .training-replay-player {
        justify-content: flex-start;
    }

    .training-replay-team-1 .training-replay-player:before {
        right: auto;
        left: 0;
    }

    .training-replay-vs {
        margin: 0 auto;
    }
}

.replay-search-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.account-feature-page.replay-search-page .panel-card {
    margin-bottom: 0;
}

.account-section-heading.replay-search-section-heading,
.account-section-heading.replay-search-results-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 17px;
    background: var(--account-color-surface);
}

.account-section-heading.replay-search-section-heading p,
.account-section-heading.replay-search-results-heading p {
    color: #76879c;
}

.account-form-body.replay-search-form {
    padding: 14px 16px 16px;
}

.replay-search-form .form-group {
    margin-bottom: 11px;
}

.replay-search-form label {
    display: block;
    margin-bottom: 4px;
    color: #50647d;
    font-size: 12px;
    font-weight: 700;
}

.account-form-body.replay-search-form .form-control {
    height: 34px;
    padding: 6px 9px;
    border-color: #c8d4e1;
    color: #243750;
    text-align: left;
}

.account-form-body.replay-search-form .form-control:focus {
    border-color: var(--account-color-focus);
    box-shadow: 0 0 0 2px var(--account-color-focus-ring);
}

.replay-search-filter-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.replay-search-advanced {
    margin: 4px -16px 13px;
    padding: 13px 16px 0;
    border-top: 1px solid #e0e6ed;
    background: var(--account-color-surface-subtle);
}

.replay-search-advanced h2 {
    margin: 0 0 10px;
    color: #30465f;
    font-size: 13px;
    font-weight: 700;
}

.replay-search-submit {
    width: 100%;
    height: 36px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.replay-search-submit .glyphicon {
    margin-right: 5px;
}

.account-section-heading.replay-search-results-heading {
    align-items: center;
}

.replay-search-pager {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
}

.replay-search-pager .btn {
    border-color: #c8d4e1;
    border-radius: 3px;
    color: #315474;
    font-size: 12px;
    font-weight: 700;
}

.replay-search-result-list {
    background: var(--account-color-surface-neutral);
}

.replay-search-column-headings {
    display: grid;
    grid-template-columns: minmax(205px, 1.05fr) minmax(185px, 1fr) minmax(185px, 1fr) 116px;
    gap: 14px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--account-color-border);
    color: #596d85;
    background: var(--account-color-surface-muted);
    font-size: 12px;
    font-weight: 700;
}

.replay-search-result {
    border-bottom: 1px solid var(--account-color-border);
    background: var(--account-color-surface);
}

.replay-search-result:last-child {
    border-bottom: 0;
}

.replay-search-result:hover {
    background: #fbfcfe;
}

.replay-search-match-row {
    display: grid;
    grid-template-columns: minmax(205px, 1.05fr) minmax(185px, 1fr) minmax(185px, 1fr) 116px;
    gap: 14px;
    align-items: center;
    min-height: 74px;
    padding: 9px 14px;
}

.replay-search-map {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.replay-search-map img {
    flex: 0 0 auto;
    width: 84px;
    height: 54px;
    border: 1px solid #c9d4df;
    border-radius: 3px;
    object-fit: cover;
}

.replay-search-map-copy {
    min-width: 0;
}

.replay-search-map-copy strong,
.replay-search-map-copy span {
    display: block;
}

.replay-search-map-copy strong {
    color: #132c4d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.replay-search-map-copy span {
    margin-top: 3px;
    color: #78889c;
    font-size: 12px;
    line-height: 1.25;
}

.replay-search-team {
    min-width: 0;
}

.replay-search-team-status {
    display: flex;
    min-height: 18px;
    align-items: center;
    justify-content: flex-end;
}

.replay-search-mobile-label {
    display: none;
}

.replay-search-team-winner {
    margin-bottom: 2px;
    color: #8a6518;
    font-size: 12px;
    font-weight: 700;
}

.replay-search-team-winner .fa {
    margin-right: 3px;
}

.replay-search-player {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 29px;
    align-items: center;
    gap: 5px;
    padding: 3px 4px 3px 7px;
    border-left: 3px solid var(--search-player-color, #7b899b);
}

.replay-search-player + .replay-search-player {
    margin-top: 2px;
    border-top: 1px solid #e5eaf0;
}

.replay-search-player .races,
.replay-search-player .leagues,
.replay-search-league-placeholder {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.replay-search-player-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.replay-search-player-copy strong,
.replay-search-player-copy small {
    display: block;
}

.replay-search-player-copy strong {
    color: #132c4d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.replay-search-player-copy small {
    margin-top: 1px;
    color: #78889c;
    font-size: 12px;
    line-height: 1.15;
}

.replay-search-match-actions {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
}

.replay-search-length {
    text-align: right;
}

.replay-search-length small,
.replay-search-length strong {
    display: block;
}

.replay-search-length small {
    color: #78889c;
    font-size: 12px;
}

.replay-search-length strong {
    color: #203751;
    font-size: 13px;
    font-weight: 700;
}

.replay-search-match-actions > div {
    display: flex;
    gap: 4px;
}

.replay-search-match-actions .btn {
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.replay-search-units {
    border-top: 1px solid var(--account-color-divider-soft);
    background: var(--account-color-surface-subtle);
}

.replay-search-units > summary {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    color: #596d85;
    background: var(--account-color-surface-subtle);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.replay-search-units > summary::-webkit-details-marker {
    display: none;
}

.replay-search-units > summary:hover {
    color: #245d91;
    background: #f2f6fa;
}

.replay-search-units > summary:focus {
    outline: 2px solid var(--account-color-focus);
    outline-offset: -2px;
}

.replay-search-units > summary .fa {
    width: 9px;
    margin-right: 3px;
    transition: transform .15s ease;
}

.replay-search-units[open] > summary .fa {
    transform: rotate(90deg);
}

.replay-search-units > summary small {
    color: #8795a7;
    font-size: 12px;
    font-weight: 400;
}

.replay-search-unit-list {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0;
    padding: 7px 14px 10px 27px;
    border-top: 1px solid var(--account-color-divider-soft);
}

.replay-search-unit-icon {
    position: relative;
    display: block;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0 2px 2px 0;
    border: 1px solid #cfd7e1;
    border-radius: 3px;
    background: #202733;
    overflow: hidden;
}

.replay-search-unit-icon > div {
    transform: translate(1px, 1px);
}

.replay-search-unit-icon .blizzard_icons_single_sprites h2 {
    display: none;
}

.replay-search-unit-icon > strong {
    position: absolute;
    right: 2px;
    bottom: 1px;
    z-index: 2;
    min-width: 17px;
    padding: 1px 3px;
    border-radius: 2px;
    background: rgba(18, 25, 35, .88);
    color: var(--account-color-on-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
}

.account-empty-state.replay-search-empty {
    gap: 5px;
    color: #76879c;
}

.account-empty-state.replay-search-empty .glyphicon {
    margin-bottom: 5px;
    color: #9babbd;
    font-size: 24px;
}

.account-empty-state.replay-search-empty strong {
    margin-bottom: 0;
    color: #30465f;
    font-size: 14px;
}

@media (max-width: 1199px) {
    .replay-search-layout {
        grid-template-columns: 235px minmax(0, 1fr);
    }

    .replay-search-column-headings,
    .replay-search-match-row {
        grid-template-columns: minmax(180px, .9fr) minmax(170px, 1fr) minmax(170px, 1fr) 105px;
        gap: 9px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .replay-search-map img {
        width: 66px;
        height: 48px;
    }
}

@media (max-width: 991px) {
    .replay-search-layout {
        grid-template-columns: 1fr;
    }

    .replay-search-form {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 10px;
    }

    .replay-search-advanced {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 10px;
    }

    .replay-search-advanced h2 {
        grid-column: 1 / -1;
    }

    .replay-search-submit {
        align-self: end;
        margin-bottom: 11px;
    }

    .replay-search-column-headings,
    .replay-search-match-row {
        grid-template-columns: minmax(180px, .9fr) minmax(170px, 1fr) minmax(170px, 1fr) 105px;
        overflow-x: auto;
    }
}

@media (max-width: 767px) {
    .replay-search-column-headings {
        display: none;
    }

    .account-section-heading.replay-search-section-heading,
    .account-section-heading.replay-search-results-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .replay-search-form,
    .replay-search-advanced {
        display: block;
    }

    .replay-search-filter-pair {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .replay-search-pager {
        width: 100%;
    }

    .replay-search-pager .btn {
        flex: 1 1 0;
    }

    .replay-search-match-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        overflow: visible;
        padding: 12px;
    }

    .replay-search-map {
        grid-column: 1 / -1;
    }

    .replay-search-team-status {
        justify-content: space-between;
        min-height: 19px;
        margin-bottom: 2px;
    }

    .replay-search-mobile-label {
        display: inline;
        color: #596d85;
        font-size: 12px;
        font-weight: 700;
    }

    .replay-search-map img {
        width: 86px;
        height: 55px;
    }

    .replay-search-match-actions {
        grid-column: 1 / -1;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        padding-top: 8px;
        border-top: 1px solid var(--account-color-divider-soft);
    }

    .replay-search-length {
        text-align: left;
    }

    .replay-search-unit-list {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (max-width: 479px) {
    .replay-search-match-row {
        grid-template-columns: 1fr;
    }

    .replay-search-map,
    .replay-search-match-actions {
        grid-column: 1;
    }
}

@media (min-width: 992px) {
    .container.account-container-wide > .row > .account-sidebar {
        width: 210px;
    }

    .container.account-container-wide > .row > .account-content {
        width: calc(100% - 210px);
    }
}

@media (max-width: 991px) {
    .container.account-container-wide {
        width: calc(100% - 24px);
    }
}

@media (max-width: 640px) {
    .container.account-container-wide {
        width: 100%;
    }
}

.account-stats-page {
    color: var(--account-color-text);
}

.account-stats-page .panel-card {
    background: var(--account-color-surface);
    border: 1px solid var(--account-color-border);
    border-radius: 4px;
    box-shadow: none;
}

.account-stats-overview {
    margin-bottom: 16px;
    border-top: 3px solid #23364f !important;
}

.account-stats-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 86px;
    padding: 16px 20px;
}

.account-stats-heading h1,
.division-race-heading h2,
.division-tier-heading h3 {
    margin: 0;
    color: var(--account-color-heading);
    font-weight: 700;
}

.account-stats-heading h1 {
    font-size: 24px;
}

.account-stats-heading p,
.division-race-heading p {
    margin: 4px 0 0;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.account-stats-record,
.division-race-record,
.division-tier-record {
    text-align: right;
}

.account-stats-record span,
.account-stats-record small,
.division-race-record span,
.division-tier-record span {
    display: block;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.account-stats-record strong {
    display: block;
    color: var(--account-color-heading);
    font-size: 22px;
    line-height: 1.15;
}

.division-race-panel {
    margin-bottom: 18px;
    overflow: hidden;
}

.division-race-panel.division-race-protoss {
    border-top: 3px solid var(--account-color-warning);
}

.division-race-panel.division-race-zerg {
    border-top: 3px solid #8b4e9f;
}

.division-race-panel.division-race-terran {
    border-top: 3px solid var(--account-color-primary-alt);
}

.division-race-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--account-color-divider);
}

.division-race-title {
    display: flex;
    align-items: center;
    min-width: 0;
}

.division-race-title > .races {
    flex: 0 0 auto;
    margin-right: 10px;
    filter: drop-shadow(0 1px 1px rgba(16, 42, 77, .25));
}

.division-race-heading h2 {
    font-size: 18px;
}

.division-race-record strong {
    display: block;
    color: var(--account-color-heading);
    font-size: 17px;
}

.division-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    background: var(--account-color-surface-neutral);
}

.division-tier-card {
    min-width: 0;
    overflow: hidden;
    background: var(--account-color-surface);
    border: 1px solid var(--account-color-border);
    border-radius: 3px;
}

.division-tier-heading {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 104px;
    padding: 8px 12px 8px 8px;
    border-bottom: 1px solid var(--account-color-divider);
}

.division-tier-art {
    position: relative;
    width: 96px;
    height: 88px;
    overflow: visible;
}

.division-tier-art .tier_division {
    position: absolute;
    top: 0;
    left: 50%;
    width: 230px;
    height: 216px;
    margin-left: -112px;
    transform: scale(.4);
    transform-origin: 50% 0;
}

.division-tier-copy {
    min-width: 0;
}

.division-tier-copy h3 {
    overflow: hidden;
    font-size: 15px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.division-tier-copy > span,
.division-tier-copy small {
    display: block;
    margin-top: 2px;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.division-tier-record {
    padding-left: 8px;
}

.division-tier-record strong {
    display: block;
    color: var(--account-color-heading);
    font-size: 15px;
}

.account-stat-table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
    font-size: 12px;
}

.account-stat-table > thead > tr > th {
    padding: 7px 10px;
    color: #50637e;
    background: var(--account-color-surface-muted);
    border-bottom: 1px solid var(--account-color-border);
    font-size: 12px;
}

.account-stat-table > tbody > tr > td,
.account-stat-table > tfoot > tr > th {
    padding: 7px 10px;
    border-top: 1px solid #e1e7ee;
    vertical-align: middle;
}

.account-stat-table > tbody > tr:first-child > td {
    border-top: 0;
}

.account-win-rate.is-below-fifty {
    color: #bd3344;
    font-weight: 700;
}

.account-stat-table > tfoot > tr > th {
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover);
}

.division-race-totals {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(420px, 2fr);
    align-items: stretch;
    border-top: 1px solid var(--account-color-border);
}

.division-race-totals-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px;
    background: var(--account-color-surface);
}

.division-race-totals-title strong {
    color: var(--account-color-heading);
    font-size: 14px;
}

.division-race-totals-title span {
    margin-top: 2px;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.division-total-table {
    border-left: 1px solid var(--account-color-border);
}

.account-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 30px;
    color: var(--account-color-text-muted);
    text-align: center;
}

.account-empty-state .glyphicon {
    margin-bottom: 10px;
    color: var(--account-color-primary-alt);
    font-size: 26px;
}

.account-empty-state strong {
    margin-bottom: 4px;
    color: var(--account-color-heading);
    font-size: 15px;
}

@media (max-width: 1199px) {
    .division-tier-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .account-stats-heading,
    .division-race-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .division-tier-grid {
        grid-template-columns: 1fr;
    }

    .division-race-totals {
        display: block;
    }

    .division-total-table {
        border-top: 1px solid var(--account-color-border);
        border-left: 0;
    }
}

@media (max-width: 520px) {
    .account-stats-heading {
        display: block;
        padding: 14px;
    }

    .account-stats-record {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--account-color-divider);
        text-align: left;
    }

    .account-stats-record small {
        grid-column: 1 / -1;
    }

    .division-race-heading {
        padding: 12px;
    }

    .division-tier-grid {
        gap: 8px;
        padding: 8px;
    }

    .division-tier-heading {
        grid-template-columns: 100px minmax(0, 1fr) auto;
        padding-right: 9px;
    }

    .division-race-totals-title {
        padding: 10px 12px;
    }
}

.maps-overall-summary {
    display: flex;
    align-items: stretch;
    text-align: right;
}

.maps-overall-summary > div {
    min-width: 104px;
    padding: 0 14px;
    border-left: 1px solid var(--account-color-divider);
}

.maps-overall-summary span,
.maps-overall-summary small {
    display: block;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.maps-overall-summary strong {
    color: var(--account-color-heading);
    font-size: 20px;
    line-height: 1.2;
}

.maps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.map-stat-card {
    min-width: 0;
    overflow: hidden;
}

.map-card-hero {
    position: relative;
    height: 150px;
    overflow: hidden;
    color: var(--account-color-on-primary);
    background: #1b293b;
}

.map-card-hero > img,
.map-card-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.map-card-hero > img {
    object-fit: cover;
}

.map-card-shade {
    background: linear-gradient(180deg, rgba(10, 20, 32, .1) 15%, rgba(10, 20, 32, .88) 100%);
}

.map-card-title,
.map-card-record {
    position: absolute;
    bottom: 13px;
    z-index: 1;
}

.map-card-title {
    right: 112px;
    left: 14px;
}

.map-card-title h2 {
    margin: 0;
    color: var(--account-color-on-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.map-card-title span,
.map-card-record span,
.map-card-record small {
    display: block;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
}

.map-card-record {
    right: 14px;
    width: 86px;
    text-align: right;
}

.map-card-record strong {
    display: block;
    color: var(--account-color-on-primary);
    font-size: 17px;
    line-height: 1.15;
}

.map-stat-card .account-stat-table > tbody > tr > td:first-child a {
    color: var(--account-color-primary-hover);
    font-weight: 700;
}

.maps-overall-summary .account-win-rate.is-below-fifty,
.map-card-hero .account-win-rate.is-below-fifty {
    color: #e05a68;
}

.map-no-data {
    color: #9aa8ba;
}

@media (max-width: 1199px) {
    .maps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .maps-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .maps-overall-summary {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--account-color-divider);
        text-align: left;
    }

    .maps-overall-summary > div {
        flex: 1 1 50%;
        padding: 0 10px 0 0;
        border-left: 0;
    }

    .map-card-hero {
        height: 138px;
    }
}

.game-length-race-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.game-length-race-heading h2,
.game-length-bucket-heading h3 {
    margin: 0;
    color: var(--account-color-heading);
    font-weight: 700;
}

.game-length-race-heading p {
    margin: 4px 0 0;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.game-length-race-record,
.game-length-bucket-record {
    text-align: right;
}

.game-length-race-record span,
.game-length-bucket-record span {
    display: block;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.game-length-race-panel {
    margin-bottom: 18px;
    overflow: hidden;
}

.game-length-race-panel.game-length-race-protoss {
    border-top: 3px solid var(--account-color-warning);
}

.game-length-race-panel.game-length-race-zerg {
    border-top: 3px solid #8b4e9f;
}

.game-length-race-panel.game-length-race-terran {
    border-top: 3px solid var(--account-color-primary-alt);
}

.game-length-race-heading {
    padding: 13px 16px;
    border-bottom: 1px solid var(--account-color-divider);
}

.game-length-race-title {
    display: flex;
    align-items: center;
    min-width: 0;
}

.game-length-race-title > .races {
    flex: 0 0 auto;
    margin-right: 10px;
    filter: drop-shadow(0 1px 1px rgba(16, 42, 77, .25));
}

.game-length-race-heading h2 {
    font-size: 18px;
}

.game-length-race-record strong {
    display: block;
    color: var(--account-color-heading);
    font-size: 17px;
}

.game-length-chart-section {
    padding: 12px 16px 4px;
    border-bottom: 1px solid var(--account-color-divider);
}

.game-length-chart-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.game-length-chart-heading strong {
    color: var(--account-color-heading);
    font-size: 14px;
}

.game-length-chart-heading span {
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.game-length-chart,
.game-length-chart > div {
    width: 100% !important;
}

.game-length-bucket-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    background: var(--account-color-surface-neutral);
}

.game-length-bucket-card {
    min-width: 0;
    overflow: hidden;
    background: var(--account-color-surface);
    border: 1px solid var(--account-color-border);
    border-radius: 3px;
}

.game-length-bucket-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--account-color-divider);
}

.game-length-bucket-heading h3 {
    font-size: 15px;
}

.game-length-bucket-heading > div:first-child > span {
    display: block;
    margin-top: 2px;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.game-length-bucket-record strong {
    display: block;
    color: var(--account-color-heading);
    font-size: 15px;
}

.game-length-no-data {
    color: #9aa8ba;
}

@media (max-width: 1199px) {
    .game-length-bucket-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .game-length-bucket-grid {
        grid-template-columns: 1fr;
    }

    .game-length-chart-heading {
        display: block;
    }

    .game-length-chart-heading span {
        display: block;
        margin-top: 2px;
    }
}

@media (max-width: 520px) {
    .game-length-race-heading {
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }

    .game-length-chart-section {
        padding-right: 10px;
        padding-left: 10px;
    }

    .game-length-bucket-grid {
        gap: 8px;
        padding: 8px;
    }
}

.abilities-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.abilities-table-heading h2 {
    margin: 0;
    color: var(--account-color-heading);
    font-weight: 700;
}

.abilities-table-heading p {
    margin: 4px 0 0;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.abilities-summary {
    display: flex;
    align-items: stretch;
    text-align: right;
}

.abilities-summary > div {
    min-width: 104px;
    padding: 0 14px;
    border-left: 1px solid var(--account-color-divider);
}

.abilities-summary span {
    display: block;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.abilities-summary strong {
    color: var(--account-color-heading);
    font-size: 20px;
    line-height: 1.2;
}

.abilities-table-panel {
    overflow: hidden;
}

.abilities-table-heading {
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--account-color-border);
}

.abilities-table-heading h2 {
    font-size: 18px;
}

.abilities-elite-callout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    color: var(--account-color-primary-hover);
    background: #eef6fb;
    border: 1px solid #c8dfef;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.abilities-elite-callout:hover,
.abilities-elite-callout:focus {
    color: #15577f;
    background: #e4f1f9;
    text-decoration: none;
}

.abilities-table-scroll {
    width: 100%;
    margin: 0;
    overflow-x: auto;
}

.ability-stat-table {
    min-width: 720px;
    table-layout: auto;
    white-space: nowrap;
}

.ability-stat-table > thead > tr > th {
    padding: 8px 10px;
    vertical-align: middle;
}

.ability-stat-table > tbody > tr > td,
.ability-stat-table > tfoot > tr > th {
    padding: 8px 10px;
}

.ability-stat-table > tbody > tr:hover > td {
    background: var(--account-color-surface-hover);
}

.ability-stat-table > tfoot > tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--account-color-border);
}

.ability-name-column,
.ability-name-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 240px;
    min-width: 240px;
    white-space: normal;
}

.ability-name-column {
    z-index: 2;
    background: var(--account-color-surface-muted) !important;
}

.ability-name-cell {
    color: var(--account-color-heading);
    background: var(--account-color-surface);
    box-shadow: 1px 0 0 var(--account-color-border);
}

.ability-stat-table > tbody > tr:hover > .ability-name-cell {
    background: var(--account-color-surface-hover);
}

.ability-use-count {
    color: #17689d;
    font-weight: 700;
}

.ability-matchup-column,
.ability-matchup-value {
    min-width: 90px;
}

.ability-no-data {
    color: #9aa8ba;
}

.ability-locked-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: var(--account-color-text-muted);
    font-size: 11px;
    font-weight: 400;
}

.ability-locked-value:hover,
.ability-locked-value:focus {
    color: var(--account-color-primary-hover);
    text-decoration: none;
}

@media (max-width: 767px) {
    .abilities-table-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .ability-name-column,
    .ability-name-cell {
        width: 190px;
        min-width: 190px;
    }
}

@media (max-width: 520px) {
    .abilities-table-heading {
        display: block;
        padding: 14px;
    }

    .abilities-summary {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--account-color-divider);
        text-align: left;
    }

    .abilities-summary > div {
        flex: 1 1 33.333%;
        min-width: 0;
        padding: 0 8px 0 0;
        border-left: 0;
    }

    .abilities-summary strong {
        font-size: 17px;
    }

    .abilities-elite-callout {
        margin-top: 10px;
    }

    .ability-name-column,
    .ability-name-cell {
        width: 160px;
        min-width: 160px;
    }
}

.account-units-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.account-units-table-heading h2,
.account-unit-detail-content h3 {
    margin: 0;
    color: var(--account-color-heading);
    font-weight: 700;
}

.account-units-table-heading p {
    margin: 4px 0 0;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.account-units-summary {
    display: flex;
    align-items: stretch;
    text-align: right;
}

.account-units-summary > div {
    min-width: 92px;
    padding: 0 12px;
    border-left: 1px solid var(--account-color-divider);
}

.account-units-summary span {
    display: block;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.account-units-summary strong {
    color: var(--account-color-heading);
    font-size: 20px;
    line-height: 1.2;
}

.account-units-table-panel {
    overflow: hidden;
}

.account-units-table-heading {
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--account-color-border);
}

.account-units-table-heading h2 {
    font-size: 18px;
}

.account-units-elite-callout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    color: var(--account-color-primary-hover);
    background: #eef6fb;
    border: 1px solid #c8dfef;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.account-units-elite-callout:hover,
.account-units-elite-callout:focus {
    color: #15577f;
    background: #e4f1f9;
    text-decoration: none;
}

.account-units-table-scroll {
    width: 100%;
    margin: 0;
    overflow-x: auto;
}

.account-unit-stat-table {
    min-width: 1220px;
    table-layout: auto;
    white-space: nowrap;
}

.account-unit-stat-table > thead > tr > th {
    padding: 8px 10px;
    vertical-align: middle;
}

.account-unit-summary-row {
    cursor: pointer;
}

.account-unit-summary-row:hover > td,
.account-unit-summary-row:focus > td,
.account-unit-summary-row.is-open > td {
    background: var(--account-color-surface-hover);
}

.account-unit-summary-row:focus {
    outline: 2px solid var(--account-color-primary-alt);
    outline-offset: -2px;
}

.account-unit-name-column,
.account-unit-name-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 250px;
    min-width: 250px;
}

.account-unit-name-column {
    z-index: 3;
    background: var(--account-color-surface-muted) !important;
}

.account-unit-name-cell {
    display: flex;
    align-items: center;
    color: var(--account-color-heading);
    background: var(--account-color-surface);
    box-shadow: 1px 0 0 var(--account-color-border);
}

.account-unit-expand-icon {
    flex: 0 0 auto;
    width: 14px;
    margin-right: 5px;
    color: #8090a5;
    font-size: 10px;
    transition: transform .16s ease;
}

.account-unit-summary-row.is-open .account-unit-expand-icon {
    transform: rotate(90deg);
}

.account-unit-icon {
    flex: 0 0 auto;
    margin-right: 9px;
    opacity: 1;
}

.account-unit-minerals {
    color: #2673c7 !important;
}

.account-unit-vespene {
    color: #17813f !important;
}

.account-unit-summary-trade.is-positive {
    color: #287047;
}

.account-unit-summary-trade.is-negative {
    color: #ad3442;
}

.account-unit-summary-trade.is-neutral {
    color: #506277;
}

.account-unit-trade-value {
    display: inline-block;
    min-width: 66px;
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: 700;
    text-align: right;
}

.account-unit-trade-value.is-positive {
    color: #287047;
    background: #e8f5ed;
}

.account-unit-trade-value.is-negative {
    color: #ad3442;
    background: #fae9eb;
}

.account-unit-trade-value.is-neutral {
    color: #506277;
    background: #edf1f5;
}

.account-unit-stat-table > tfoot > tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--account-color-border);
}

.account-unit-detail-row {
    display: none;
}

.account-unit-detail-row.is-open {
    display: table-row;
}

.account-unit-detail-row > td {
    padding: 0 !important;
    white-space: normal;
    background: var(--account-color-surface-neutral);
    border-top: 1px solid #cbd7e3 !important;
    border-bottom: 1px solid #cbd7e3;
}

.account-unit-detail-content {
    padding: 14px;
}

.account-unit-detail-content h3 {
    margin-bottom: 9px;
    font-size: 14px;
}

.account-unit-matchup-section {
    overflow: hidden;
    background: var(--account-color-surface);
    border: 1px solid var(--account-color-border);
    border-radius: 3px;
}

.account-unit-matchup-section {
    margin-bottom: 12px;
}

.account-unit-matchup-section > h3 {
    padding: 10px 12px;
    border-bottom: 1px solid var(--account-color-divider);
}

.account-unit-matchup-table {
    min-width: 960px;
    table-layout: auto;
    white-space: nowrap;
}

.account-unit-matchup-table > thead > tr > th {
    padding: 7px 9px;
}

.account-unit-matchup-table > tbody > tr > td {
    padding: 7px 9px;
    vertical-align: top;
}

.account-unit-kill-list {
    display: block;
}

.account-unit-kill-list:before,
.account-unit-kill-list:after {
    display: table;
    content: " ";
}

.account-unit-kill-list:after {
    clear: both;
}

.account-unit-kills-section {
    padding: 9px 10px 7px;
    border-top: 1px solid #dbe3eb;
}

.account-unit-kills-section > h3 {
    margin: 0 0 6px;
    color: #607187;
    font-size: 12px;
    font-weight: 700;
}

.account-unit-kill-item {
    position: relative;
    float: left;
    width: 44px;
    height: 44px;
    margin: 0 2px 2px 0;
    overflow: hidden;
    background: #202733;
    border: 1px solid #cfd7e1;
    border-radius: 3px;
}

.account-unit-kill-item > div {
    transform: translate(1px, 1px);
}

.account-unit-kill-count {
    position: absolute;
    right: 2px;
    bottom: 1px;
    z-index: 2;
    min-width: 17px;
    padding: 1px 3px;
    border-radius: 2px;
    background: rgba(18, 25, 35, .88);
    color: var(--account-color-on-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.account-unit-detail-empty {
    display: block;
    padding: 14px !important;
    color: var(--account-color-text-muted);
    text-align: center;
}

.account-unit-elite-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px;
    padding: 14px;
    color: #50637e;
    background: var(--account-color-surface);
    border: 1px solid #c8dfef;
    border-radius: 3px;
}

.account-unit-elite-panel > .glyphicon {
    color: var(--account-color-primary-alt);
    font-size: 22px;
}

.account-unit-elite-panel > div {
    flex: 1 1 auto;
}

.account-unit-elite-panel strong,
.account-unit-elite-panel span {
    display: block;
}

.account-unit-elite-panel strong {
    color: var(--account-color-heading);
    font-size: 13px;
}

.account-unit-elite-panel span {
    margin-top: 2px;
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .account-unit-expand-icon {
        transition: none;
    }
}

@media (max-width: 767px) {
    .account-units-table-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .account-unit-name-column,
    .account-unit-name-cell {
        width: 210px;
        min-width: 210px;
    }

    .account-unit-elite-panel {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .account-unit-elite-panel .btn {
        margin-left: 34px;
    }
}

@media (max-width: 520px) {
    .account-units-table-heading {
        display: block;
        padding: 14px;
    }

    .account-units-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--account-color-divider);
        text-align: left;
    }

    .account-units-summary > div {
        min-width: 0;
        padding: 0;
        border-left: 0;
    }

    .account-units-summary strong {
        font-size: 17px;
    }

    .account-units-elite-callout {
        margin-top: 10px;
    }

    .account-unit-name-column,
    .account-unit-name-cell {
        width: 180px;
        min-width: 180px;
    }

}

.opponents-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.opponents-table-heading h2 {
    margin: 0;
    color: var(--account-color-heading);
    font-weight: 700;
}

.opponents-table-heading p {
    margin: 4px 0 0;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.opponents-summary {
    display: flex;
    align-items: stretch;
    text-align: right;
}

.opponents-summary > div {
    min-width: 94px;
    padding: 0 12px;
    border-left: 1px solid var(--account-color-divider);
}

.opponents-summary span {
    display: block;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.opponents-summary strong {
    color: var(--account-color-heading);
    font-size: 20px;
    line-height: 1.2;
}

.opponents-table-panel {
    overflow: hidden;
}

.opponents-table-heading {
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--account-color-border);
}

.opponents-table-heading h2 {
    font-size: 18px;
}

.opponents-search {
    position: relative;
    width: 230px;
    margin: 0;
}

.opponents-search > .glyphicon {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 1;
    color: #8090a5;
    transform: translateY(-50%);
}

.opponents-search > .form-control {
    height: 32px;
    padding-left: 31px;
    color: var(--account-color-text);
    border-color: #c7d3df;
    box-shadow: none;
    font-size: 12px;
}

.opponents-search > .form-control:focus {
    border-color: var(--account-color-primary-alt);
    box-shadow: 0 0 0 2px rgba(59, 131, 197, .14);
}

.opponents-table-scroll {
    width: 100%;
    max-height: calc(100vh - 250px);
    margin: 0;
    overflow: auto;
}

.opponents-stat-table {
    min-width: 1120px;
    table-layout: auto;
    white-space: nowrap;
}

.opponents-stat-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 20px 8px 10px;
    vertical-align: middle;
    cursor: pointer;
}

.opponents-stat-table > thead > tr > th:after {
    position: absolute;
    top: 50%;
    right: 7px;
    color: #a1adbc;
    font-size: 8px;
    content: "\25B2\A\25BC";
    line-height: .75;
    white-space: pre;
    transform: translateY(-50%);
}

.opponents-stat-table > thead > tr > th.headerSortUp:after {
    color: #2f79b8;
    content: "\25B2";
}

.opponents-stat-table > thead > tr > th.headerSortDown:after {
    color: #2f79b8;
    content: "\25BC";
}

.opponents-stat-table > tbody > tr > td {
    padding: 8px 10px;
}

.opponents-stat-table > tbody > tr:hover > td {
    background: var(--account-color-surface-hover);
}

.opponent-name-column,
.opponent-name-cell {
    position: sticky !important;
    left: 0;
    z-index: 1;
    width: 240px;
    min-width: 240px;
}

.opponent-name-column {
    z-index: 4 !important;
    background: var(--account-color-surface-muted) !important;
}

.opponent-name-cell {
    background: var(--account-color-surface);
    box-shadow: 1px 0 0 var(--account-color-border);
}

.opponents-stat-table > tbody > tr:hover > .opponent-name-cell {
    background: var(--account-color-surface-hover);
}

.opponent-name-cell > a {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--account-color-heading);
}

.opponent-name-cell > a:hover,
.opponent-name-cell > a:focus {
    color: var(--account-color-primary-hover);
    text-decoration: none;
}

.opponent-race-icons {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    min-width: 20px;
    margin-right: 7px;
}

.opponent-race-icons > .races {
    display: inline-block;
}

.opponents-filter-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 30px;
    color: var(--account-color-text-muted);
    text-align: center;
}

.opponents-empty-state {
    min-height: 180px;
}

.opponents-filter-empty[hidden] {
    display: none;
}

.opponents-filter-empty .glyphicon {
    margin-bottom: 10px;
    color: var(--account-color-primary-alt);
    font-size: 26px;
}

.opponents-filter-empty strong {
    margin-bottom: 4px;
    color: var(--account-color-heading);
    font-size: 15px;
}

@media (max-width: 767px) {
    .opponents-table-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .opponent-name-column,
    .opponent-name-cell {
        width: 190px;
        min-width: 190px;
    }
}

@media (max-width: 520px) {
    .opponents-table-heading {
        display: block;
        padding: 14px;
    }

    .opponents-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--account-color-divider);
        text-align: left;
    }

    .opponents-summary > div {
        min-width: 0;
        padding: 0;
        border-left: 0;
    }

    .opponents-summary strong {
        font-size: 17px;
    }

    .opponents-search {
        width: 100%;
        margin-top: 10px;
    }

    .opponent-name-column,
    .opponent-name-cell {
        width: 160px;
        min-width: 160px;
    }

    .opponents-table-scroll {
        max-height: 65vh;
    }
}

.weeks-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.weeks-table-heading h2 {
    margin: 0;
    color: var(--account-color-heading);
    font-weight: 700;
}

.weeks-table-heading p {
    margin: 4px 0 0;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.weeks-summary {
    display: flex;
    align-items: stretch;
    text-align: right;
}

.weeks-summary > div {
    min-width: 88px;
    padding: 0 11px;
    border-left: 1px solid var(--account-color-divider);
}

.weeks-summary span {
    display: block;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.weeks-summary strong {
    color: var(--account-color-heading);
    font-size: 19px;
    line-height: 1.2;
}

.weeks-table-panel {
    overflow: hidden;
}

.weeks-table-heading {
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--account-color-border);
}

.weeks-table-heading h2 {
    font-size: 18px;
}

.weeks-trend-key {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--account-color-text-muted);
    font-size: 12px;
}

.weeks-trend-key i {
    margin-right: 3px;
}

.weeks-table-panel .is-positive {
    color: #287047;
}

.weeks-table-panel .is-negative {
    color: #bd3344;
}

.weeks-table-panel .is-neutral {
    color: #8090a5;
}

.weeks-table-scroll {
    width: 100%;
    max-height: calc(100vh - 250px);
    margin: 0;
    overflow: auto;
}

.weeks-stat-table {
    min-width: 1280px;
    table-layout: auto;
    white-space: nowrap;
}

.weeks-stat-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    vertical-align: middle;
}

.weeks-stat-table > tbody > tr > td {
    padding: 8px 10px;
}

.weeks-stat-table > tbody > tr:hover > td {
    background: var(--account-color-surface-hover);
}

.weeks-stat-table > tbody > tr.is-latest > td {
    background: #f3f8fc;
}

.weeks-stat-table > tbody > tr.is-latest:hover > td {
    background: var(--account-color-primary-soft);
}

.week-range-column,
.week-range-cell {
    position: sticky !important;
    left: 0;
    z-index: 1;
    width: 150px;
    min-width: 150px;
}

.week-range-column {
    z-index: 4 !important;
    background: var(--account-color-surface-muted) !important;
}

.week-range-cell {
    color: var(--account-color-heading);
    background: var(--account-color-surface);
    box-shadow: 1px 0 0 var(--account-color-border);
}

.weeks-stat-table > tbody > tr.is-latest > .week-range-cell {
    background: #f3f8fc;
}

.week-range-cell strong {
    display: block;
}

.week-metric-value > span {
    display: inline-block;
    min-width: 42px;
}

.week-trend {
    width: 12px;
    margin-left: 3px;
    text-align: center;
}

.account-sidebar {
    margin-bottom: 18px;
}

.account-sidebar-panel {
    position: sticky;
    top: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 28px);
    border: 1px solid var(--account-color-border);
    border-top: 3px solid #263b55;
    border-radius: 4px;
    background: var(--account-color-surface);
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.account-sidebar-heading {
    margin: 0;
    padding: 14px 15px 7px;
    color: #6b7d92;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.account-sidebar-heading-secondary {
    margin-top: 5px;
    padding-top: 11px;
    border-top: 1px solid var(--account-color-border-soft);
}

.account-sidebar .account-nav-list {
    margin: 0;
    padding: 0 7px 9px;
}

.account-sidebar .account-nav-list > li {
    margin: 2px 0;
    border: 0;
}

.account-sidebar .account-nav-list > li > a {
    position: relative;
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border: 0;
    border-radius: 3px;
    color: #42566e;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    transition: none;
}

.account-sidebar .account-nav-list > li > a:hover,
.account-sidebar .account-nav-list > li > a:focus {
    color: var(--account-color-heading-secondary);
    background: #f0f5f9;
    text-decoration: none;
}

.account-sidebar .account-nav-list > li > a:focus {
    outline: 2px solid rgba(52, 123, 187, .25);
    outline-offset: -2px;
}

.account-sidebar .account-nav-list > li > a > .fa {
    display: inline-flex;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #71849a;
    background: transparent;
    font-size: 13px;
}

.account-sidebar .account-nav-list > li.active > a {
    color: var(--account-color-heading-secondary);
    background: #eaf2f9;
    font-weight: 700;
}

.account-sidebar .account-nav-list > li.active > a:before {
    position: absolute;
    left: -7px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--account-color-primary);
    content: "";
}

.account-sidebar .account-nav-list > li.active > a > .fa {
    color: var(--account-color-primary);
}

.account-upgrade-card {
    margin: 3px 9px 12px;
    padding: 13px;
    border-radius: 3px;
    color: #dce8f3;
    background: #183650;
}

.account-upgrade-card strong,
.account-upgrade-card span {
    display: block;
}

.account-upgrade-card strong {
    margin-bottom: 4px;
    color: var(--account-color-on-primary);
    font-size: 13px;
}

.account-upgrade-card span {
    color: #bdcddd;
    font-size: 11px;
    line-height: 1.4;
}

.account-upgrade-card .btn {
    width: 100%;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
}

.account-feature-page {
    color: var(--account-color-text);
}

.account-feature-page .panel-card {
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid var(--account-color-border);
    border-radius: 4px;
    background: var(--account-color-surface);
}

.account-feature-page .account-panel-accent {
    border-top: 3px solid #263b55;
}

.account-feature-page .account-panel-accent-info {
    border-top: 3px solid var(--account-color-primary);
}

.elite-hero {
    display: grid;
    min-height: 285px;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
}

.elite-hero-copy {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 34px 38px;
}

.elite-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 8px;
    border: 1px solid #bfd2e4;
    border-radius: 3px;
    color: #285f91;
    background: var(--account-color-primary-soft);
    font-size: 12px;
    font-weight: 700;
}

.elite-hero h1 {
    max-width: 650px;
    margin: 0;
    color: var(--account-color-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

.elite-hero-copy > p {
    max-width: 640px;
    margin: 12px 0 20px;
    color: #64778e;
    font-size: 14px;
    line-height: 1.55;
}

.elite-hero-copy > .btn {
    min-width: 135px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.elite-hero-summary {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    padding: 28px;
    color: var(--account-color-inverse-text);
    background: var(--account-color-inverse-surface);
}

.elite-price-preview {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--account-color-inverse-divider);
}

.elite-price-preview strong {
    color: var(--account-color-on-primary);
    font-size: 38px;
    line-height: 1;
}

.elite-price-preview span {
    color: #b8cada;
    font-size: 12px;
}

.elite-hero-summary ul {
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.elite-hero-summary li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 9px 0;
    color: var(--account-color-inverse-text);
    font-size: 12px;
    line-height: 1.4;
}

.elite-hero-summary li .fa {
    margin-top: 2px;
    color: #74b77c;
}

.account-section-heading {
    padding: 17px 19px;
    border-bottom: 1px solid var(--account-color-divider);
}

.account-section-heading h1,
.account-section-heading h2 {
    margin: 0;
    color: var(--account-color-heading);
    font-weight: 700;
    line-height: 1.2;
}

.account-section-heading h1 {
    font-size: 20px;
}

.account-section-heading h2 {
    font-size: 18px;
}

.account-section-heading p {
    margin: 4px 0 0;
    color: var(--account-color-text-subtle);
    font-size: 12px;
    line-height: 1.4;
}

.account-section-heading-icon {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px 21px;
}

.account-heading-icon {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    color: var(--account-color-primary);
    background: var(--account-color-primary-soft);
    font-size: 17px;
}

.elite-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-benefit {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 17px 19px;
    border-bottom: 1px solid var(--account-color-border-soft);
}

.elite-feature-list > .account-benefit {
    padding: 18px 19px;
}

.elite-feature-list > .account-benefit:nth-child(odd) {
    border-right: 1px solid var(--account-color-border-soft);
}

.elite-feature-list > .account-benefit:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.account-benefit > .fa {
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: var(--account-color-primary);
    font-size: 17px;
}

.account-benefit h3 {
    margin: 0 0 4px;
    color: var(--account-color-heading-secondary);
    font-size: 14px;
    font-weight: 700;
}

.account-benefit p {
    margin: 0;
    color: #697b91;
    font-size: 12px;
    line-height: 1.5;
}

.elite-pricing-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.elite-pricing-heading > span {
    color: var(--account-color-text-subtle);
    font-size: 12px;
}

.elite-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.elite-plan {
    position: relative;
    display: flex;
    min-height: 245px;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--account-color-border);
    border-radius: 3px;
    background: var(--account-color-surface);
}

.elite-plan-featured {
    border-color: #79a6cc;
    box-shadow: inset 0 3px 0 var(--account-color-primary);
}

.elite-plan-label {
    position: absolute;
    right: 12px;
    top: 12px;
    padding: 3px 7px;
    border-radius: 3px;
    color: #285f91;
    background: #e9f2f9;
    font-size: 12px;
    font-weight: 700;
}

.elite-plan-name {
    padding-right: 65px;
    color: #50647c;
    font-size: 12px;
    font-weight: 700;
}

.elite-plan-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 12px 0;
}

.elite-plan-price strong {
    color: var(--account-color-heading);
    font-size: 32px;
    line-height: 1;
}

.elite-plan-price span {
    color: var(--account-color-text-subtle);
    font-size: 12px;
}

.elite-plan > p {
    min-height: 54px;
    margin: 0 0 16px;
    color: #697b91;
    font-size: 12px;
    line-height: 1.45;
}

.elite-plan form {
    margin-top: auto;
}

.elite-plan-action {
    width: 100%;
    min-height: 36px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.account-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.4;
}

.account-notice > .fa {
    margin-top: 2px;
    font-size: 16px;
}

.account-notice strong,
.account-notice span {
    display: block;
}

.account-notice strong {
    margin-bottom: 2px;
    font-size: 12px;
}

.account-notice-info {
    border: 1px solid #bfd4e7;
    border-left: 3px solid var(--account-color-primary);
    color: #415970;
    background: var(--account-color-primary-soft);
}

.account-notice-info > .fa {
    color: var(--account-color-primary);
}

.account-notice-info strong {
    color: var(--account-color-heading-secondary);
}

.account-notice-error {
    border: 1px solid var(--account-color-danger-border);
    border-left: 3px solid var(--account-color-danger);
    color: var(--account-color-danger-text);
    background: var(--account-color-danger-surface);
}

.account-notice-success {
    border: 1px solid var(--account-color-success-border);
    border-left: 3px solid var(--account-color-success);
    color: var(--account-color-success-text);
    background: var(--account-color-success-surface);
}

.account-notice-success > .fa {
    color: var(--account-color-success);
}

.account-notice-success strong {
    color: #285e37;
}

.elite-checkout-note {
    margin: 0 16px;
}

.elite-checkout-note span,
.elite-coupon-link {
    font-size: 12px;
    line-height: 1.45;
}

.elite-coupon-link {
    padding: 12px 16px 16px;
    color: #6f8197;
    text-align: center;
}

.elite-coupon-link a {
    font-weight: 700;
}

.elite-signin-state {
    display: flex;
    min-height: 150px;
    align-items: center;
    gap: 14px;
    padding: 24px;
}

.elite-signin-state > .fa {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    color: var(--account-color-primary);
    background: var(--account-color-primary-soft);
    font-size: 17px;
}

.elite-signin-state > div {
    min-width: 0;
    flex: 1 1 auto;
}

.elite-signin-state h3 {
    margin: 0 0 4px;
    color: var(--account-color-heading-secondary);
    font-size: 15px;
}

.elite-signin-state p {
    margin: 0;
    color: #71839a;
    font-size: 12px;
}

.elite-signin-state .btn {
    min-width: 100px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.elite-coupon-page {
    max-width: 760px;
}

.elite-coupon-body {
    padding: 22px;
}

.elite-coupon-body > .account-notice {
    margin-bottom: 16px;
}

.account-form-field > label {
    display: block;
    margin: 0 0 6px;
    color: #40556e;
    font-size: 12px;
    font-weight: 700;
}

.account-inline-control {
    display: flex;
    gap: 8px;
}

.account-inline-control .form-control,
.account-inline-control .btn {
    height: 40px;
    border-radius: 3px;
    font-size: 12px;
}

.account-inline-control .form-control {
    min-width: 0;
    flex: 1 1 auto;
    border-color: var(--account-color-control-border);
    color: #304860;
    box-shadow: none;
}

.account-inline-control .form-control:focus {
    border-color: #5c94c7;
    box-shadow: 0 0 0 2px var(--account-color-primary-ring);
}

.account-inline-control .btn {
    min-width: 125px;
    flex: 0 0 auto;
    font-weight: 700;
}

.account-form-help {
    display: block;
    margin-top: 6px;
    color: #7a8b9e;
    font-size: 12px;
}

.account-panel-footer {
    padding: 11px 21px;
    border-top: 1px solid var(--account-color-divider-soft);
    background: var(--account-color-surface-subtle);
    font-size: 12px;
}

.account-panel-footer a {
    color: var(--account-color-primary);
    font-weight: 700;
}

.account-panel-footer a:hover,
.account-panel-footer a:focus {
    color: var(--account-color-heading-secondary);
    text-decoration: none;
}

.account-panel-footer .fa {
    margin-right: 4px;
}

.account-status-page {
    width: 100%;
    max-width: 780px;
}

.account-feature-page .account-status-panel-error {
    border-top-color: var(--account-color-danger);
}

.account-status-panel-error > .account-section-heading {
    border-bottom-color: var(--account-color-danger-border);
    background: #fff7f8;
}

.account-status-panel-error > .account-section-heading h1 {
    color: #8f3040;
}

.account-status-panel-error > .account-section-heading p {
    color: #885d65;
}

.account-status-panel-error .account-heading-icon {
    color: #a73745;
    background: #fae9eb;
}

.account-status-body {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    padding: 28px;
}

.account-status-icon {
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 21px;
}

.account-status-success .account-status-icon {
    color: #28733d;
    background: #e7f4eb;
}

.account-status-error .account-status-icon {
    color: #a73745;
    background: #fae9eb;
}

.account-status-error .account-status-content h2 {
    color: #8f3040;
}

.account-status-content h2 {
    margin: 2px 0 6px;
    color: var(--account-color-heading-secondary);
    font-size: 18px;
    font-weight: 700;
}

.account-status-content > p {
    max-width: 620px;
    margin: 0;
    color: #687b91;
    font-size: 12px;
    line-height: 1.55;
}

.account-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}

.account-status-actions .btn {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 520px) {
    .account-section-heading-icon,
    .elite-coupon-body {
        padding: 16px;
    }

    .account-section-heading-icon {
        align-items: flex-start;
    }

    .account-section-heading-icon h1 {
        font-size: 18px;
    }

    .account-inline-control {
        display: block;
    }

    .account-inline-control .btn {
        width: 100%;
        margin-top: 8px;
    }

    .account-panel-footer {
        padding-right: 16px;
        padding-left: 16px;
    }

    .account-status-body {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 20px 16px;
    }

    .account-status-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .account-status-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-status-actions .btn {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .elite-hero {
        grid-template-columns: 1fr;
    }

    .elite-hero-summary {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 20px;
    }

    .elite-price-preview {
        padding: 0 20px 0 0;
        border-right: 1px solid var(--account-color-inverse-divider);
        border-bottom: 0;
    }

    .elite-hero-summary ul {
        margin: 0;
    }

    .elite-plan-grid {
        grid-template-columns: 1fr;
    }

    .elite-plan {
        min-height: 0;
    }

    .elite-plan > p {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .elite-hero-copy {
        padding: 25px 20px;
    }

    .elite-hero h1 {
        font-size: 24px;
    }

    .elite-hero-summary {
        display: block;
        padding: 20px;
    }

    .elite-price-preview {
        padding: 0 0 14px;
        border-right: 0;
        border-bottom: 1px solid var(--account-color-inverse-divider);
    }

    .elite-hero-summary ul {
        margin-top: 13px;
    }

    .elite-feature-list {
        grid-template-columns: 1fr;
    }

    .elite-feature-list > .account-benefit,
    .elite-feature-list > .account-benefit:nth-child(odd),
    .elite-feature-list > .account-benefit:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--account-color-border-soft);
    }

    .elite-feature-list > .account-benefit:last-child {
        border-bottom: 0;
    }

    .elite-pricing-heading,
    .elite-signin-state {
        align-items: flex-start;
        flex-direction: column;
    }

    .elite-signin-state .btn {
        width: 100%;
    }
}

.account-auth-page {
    width: calc(100% - 40px);
    margin: 30px auto;
}

.account-auth-page form {
    margin: 0;
}

.account-form-stack {
    display: grid;
    gap: 17px;
}

.signup-page {
    max-width: 1180px;
}

.signup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    gap: 18px;
    align-items: start;
}

.account-form-notice {
    margin: 18px 20px 0;
}

.account-form-notice ul {
    margin: 5px 0 0;
    padding-left: 18px;
}

.account-form-notice li + li {
    margin-top: 3px;
}

.signup-form-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 14px;
}

.account-form-body {
    padding: 20px;
}

.signup-field-wide,
.signup-consent {
    grid-column: 1 / -1;
}

.account-form-body .form-control,
.settings-page .form-control {
    width: 100%;
    height: 40px;
    padding: 8px 10px;
    border-color: var(--account-color-control-border);
    border-radius: 3px;
    color: #304860;
    background: var(--account-color-surface);
    box-shadow: none;
    font-size: 12px;
}

.account-form-body .form-control:focus,
.settings-page .form-control:focus {
    border-color: #5c94c7;
    box-shadow: 0 0 0 2px var(--account-color-primary-ring);
}

.signup-form-grid {
    display: contents;
}

.signup-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 1px 0 0;
    padding: 12px 13px;
    border: 1px solid #d8e2eb;
    border-radius: 3px;
    color: #536980;
    background: var(--account-color-surface-subtle);
    cursor: pointer;
}

.signup-consent input {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    flex: 0 0 16px;
}

.signup-consent strong,
.signup-consent small {
    display: block;
}

.signup-consent strong {
    color: #29445f;
    font-size: 12px;
}

.signup-consent small {
    margin-top: 2px;
    color: #71839a;
    font-size: 12px;
    font-weight: 400;
}

.account-form-actions {
    display: flex;
    min-height: 65px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 20px;
    border-top: 1px solid var(--account-color-divider-soft);
    background: var(--account-color-surface-subtle);
}

.account-form-actions span {
    color: #6f8197;
    font-size: 12px;
}

.account-form-actions a {
    font-weight: 700;
}

.account-form-actions .btn {
    min-width: 165px;
    min-height: 40px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.signup-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.signup-benefit-list {
    padding: 3px 0;
}

.signup-benefit-list > .account-benefit:last-child {
    border-bottom: 0;
}

@media (max-width: 900px) {
    .signup-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .account-auth-page {
        width: calc(100% - 24px);
        margin: 18px auto;
    }

    .account-form-body {
        padding: 16px;
    }

    .signup-form-body {
        grid-template-columns: 1fr;
    }

    .signup-form-grid {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .account-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 10px;
        padding: 14px 16px;
    }

    .account-form-actions .btn {
        width: 100%;
    }
}

.reset-password-actions .btn {
    min-width: 150px;
}

.reset-password-invalid .account-status-body {
    min-height: 190px;
}

.signin-page {
    max-width: 1040px;
}

.signin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: 18px;
    align-items: start;
}

.signin-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 2px;
}

.signin-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #536980;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.signin-remember input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.signin-submit {
    min-width: 125px;
    min-height: 40px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.signin-recovery-intro {
    margin: 0;
    color: #687b91;
    font-size: 12px;
    line-height: 1.55;
}

.signin-recovery-form .account-inline-control .btn {
    min-width: 105px;
}

@media (max-width: 820px) {
    .signin-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .signin-options {
        align-items: stretch;
        flex-direction: column;
    }

    .signin-submit {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .account-sidebar-panel {
        position: static;
        overflow: visible;
        max-height: none;
    }

    .account-sidebar .account-nav-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
    }

    .account-sidebar .account-nav-list > li {
        min-width: 0;
        margin: 0;
    }

    .account-sidebar .account-nav-list > li > a {
        height: 100%;
    }

    .account-sidebar .account-nav-list > li.active > a:before {
        left: 0;
        top: 8px;
        bottom: 8px;
    }

    .account-upgrade-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 10px;
        align-items: center;
    }

    .account-upgrade-card strong,
    .account-upgrade-card span {
        grid-column: 1;
    }

    .account-upgrade-card .btn {
        width: auto;
        min-width: 110px;
        grid-column: 2;
        grid-row: 1 / 3;
        margin: 0;
    }
}

@media (max-width: 600px) {
    .account-sidebar .account-nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-upgrade-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-upgrade-card .btn {
        width: 100%;
        grid-column: 1 / -1;
        grid-row: auto;
        margin-top: 9px;
    }
}

@media (max-width: 991px) {
    .weeks-page-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .weeks-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(80px, 1fr));
        gap: 7px 0;
    }
}

@media (max-width: 767px) {
    .weeks-table-heading {
        align-items: flex-start;
        gap: 10px;
    }

    .weeks-trend-key {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px 10px;
    }
}

@media (max-width: 520px) {
    .weeks-table-heading {
        display: block;
        padding: 14px;
    }

    .weeks-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--account-color-divider);
        text-align: left;
    }

    .weeks-summary > div {
        min-width: 0;
        padding: 0;
        border-left: 0;
    }

    .weeks-summary strong {
        font-size: 17px;
    }

    .weeks-trend-key {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .weeks-table-scroll {
        max-height: 65vh;
    }

    .week-range-column,
    .week-range-cell {
        width: 130px;
        min-width: 130px;
    }
}

/* Replay upload -------------------------------------------------- */
.replay-upload-page,
.app-download-page,
.settings-page {
    width: calc(100% - 40px);
    margin: 30px auto;
}

.replay-upload-page,
.app-download-page {
    max-width: 1100px;
}

.replay-upload-panel {
    margin: 0 !important;
}

.replay-upload-body {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
}

.replay-upload-picker {
    padding: 36px 28px 32px;
    text-align: center;
}

.replay-upload-picker-icon {
    position: relative;
    display: inline-flex;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--account-color-primary);
    background: var(--account-color-primary-soft);
    font-size: 27px;
}

.replay-upload-picker-icon .fa-arrow-up {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 20px;
    height: 20px;
    padding-top: 4px;
    border: 2px solid var(--account-color-surface);
    border-radius: 50%;
    color: var(--account-color-on-primary);
    background: var(--account-color-primary);
    font-size: 12px;
}

.replay-upload-picker h2,
.replay-upload-automatic h2 {
    margin: 0;
    color: var(--account-color-heading-secondary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.replay-upload-picker > p {
    margin: 6px 0 18px;
    color: #6f8197;
    font-size: 13px;
    line-height: 1.5;
}

.replay-upload-form {
    display: flex;
    justify-content: center;
    margin: 0;
}

.replay-upload-form #file_upload-button,
.replay-upload-form .uploadifive-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2 !important;
    text-transform: none;
}

.replay-upload-help {
    margin: 10px 0 0 !important;
    color: #7b899b !important;
    font-size: 12px !important;
}

.replay-upload-automatic {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-content: center;
    gap: 13px;
    padding: 28px 24px;
    border-left: 1px solid var(--account-color-divider);
    background: var(--account-color-surface-subtle);
}

.replay-upload-automatic .account-heading-icon {
    background: #e8f1f8;
}

.replay-upload-automatic p {
    margin: 7px 0 0;
    color: #6d7f94;
    font-size: 12px;
    line-height: 1.5;
}

.replay-upload-automatic .btn {
    width: min(220px, 100%);
    min-height: 36px;
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 1px;
    padding: 7px 11px;
    border-color: #b9cad9;
    color: #285f91;
    background: var(--account-color-surface);
    font-size: 12px;
    font-weight: 700;
}

.replay-upload-automatic .btn:hover,
.replay-upload-automatic .btn:focus {
    border-color: #7ca7cc;
    color: var(--account-color-heading-secondary);
    background: var(--account-color-primary-soft);
}

.replay-upload-automatic .btn .fa,
.app-download-actions .btn .fa {
    margin-right: 5px;
}

.replay-upload-queue {
    max-height: 320px;
    overflow-y: auto;
    padding: 0 24px 20px;
    border-top: 1px solid var(--account-color-divider-soft);
    scrollbar-gutter: stable;
}

.replay-upload-queue:empty {
    display: none;
}

.replay-upload-page .uploadifive-queue-item {
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid #d8e1ea;
    border-radius: 3px;
    color: #38516c;
    background: var(--account-color-surface-subtle);
    font: 12px/1.4 "Segoe UI", Tahoma, Arial, sans-serif;
}

.replay-upload-page .uploadifive-queue-item .close {
    display: block;
    width: 16px;
    height: 16px;
    float: right;
    background: url('/assets/images/uploadifive-cancel.png') 0 0 no-repeat;
    opacity: .7;
    text-indent: -9999px;
}

.replay-upload-page .uploadifive-queue-item .close:hover,
.replay-upload-page .uploadifive-queue-item .close:focus {
    opacity: 1;
}

.replay-upload-page .uploadifive-queue-item .progress {
    width: 100%;
    height: 5px;
    margin: 8px 0 0;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background: #dfe7ef;
    box-shadow: none;
}

.replay-upload-page .uploadifive-queue-item .progress-bar {
    height: 5px;
    background: var(--account-color-primary);
    box-shadow: none;
}

@media (max-width: 760px) {
    .replay-upload-page {
        width: calc(100% - 24px);
        margin: 18px auto;
    }

    .replay-upload-body {
        grid-template-columns: 1fr;
    }

    .replay-upload-picker {
        padding: 28px 18px 25px;
    }

    .replay-upload-automatic {
        border-top: 1px solid var(--account-color-divider);
        border-left: 0;
    }

    .replay-upload-queue {
        max-height: 45vh;
        padding-right: 16px;
        padding-left: 16px;
    }

}

/* Automatic uploader download ----------------------------------- */
.app-download-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 310px;
}

.app-download-platform {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid var(--account-color-divider);
    color: var(--account-color-on-primary);
    background: var(--account-color-inverse-surface);
}

.app-download-platform .fa {
    font-size: 58px;
}

.app-download-platform span {
    color: var(--account-color-inverse-text);
    font-size: 14px;
    font-weight: 700;
}

.app-download-copy {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 31px 36px;
}

.app-download-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-download-title-row h2 {
    margin: 0;
    color: var(--account-color-heading-secondary);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.app-download-free,
.settings-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid #b7d8c3;
    border-radius: 3px;
    color: #267044;
    background: #e6f4eb;
    font-size: 12px;
    font-weight: 700;
}

.app-download-free {
    min-height: 23px;
}

.app-download-copy > p {
    max-width: 720px;
    margin: 10px 0 19px;
    color: #65788f;
    font-size: 13px;
    line-height: 1.55;
}

.app-download-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-download-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #435b74;
    font-size: 12px;
    line-height: 1.4;
}

.app-download-features .fa {
    margin-top: 2px;
    color: #3b8752;
}

.app-download-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 23px;
}

.app-download-actions .btn,
.download-hashkey-actions .btn {
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.app-download-actions .btn {
    min-height: 40px;
    padding: 9px 15px;
}

.app-download-actions > span {
    color: #72849a;
    font-size: 12px;
    line-height: 1.4;
}

.app-download-actions > span .fa {
    margin-right: 5px;
    color: #3b8752;
}

.download-hashkey-panel {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-left: 3px solid var(--account-color-primary) !important;
}

.download-hashkey-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 18px;
}

.download-hashkey-copy h2 {
    margin: 0 0 4px;
    color: var(--account-color-heading-secondary);
    font-size: 17px;
    font-weight: 700;
}

.download-hashkey-copy p {
    max-width: 700px;
    margin: 0;
    color: #697c92;
    font-size: 12px;
    line-height: 1.5;
}

.download-hashkey-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-hashkey-actions .btn {
    min-height: 36px;
    padding: 7px 12px;
    white-space: nowrap;
}

@media (max-width: 800px) {
    .app-download-body {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .app-download-copy {
        padding: 26px 24px;
    }

    .app-download-features {
        grid-template-columns: 1fr;
    }

    .app-download-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .download-hashkey-panel {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .download-hashkey-actions {
        grid-column: 1 / -1;
        padding-left: 64px;
    }
}

@media (max-width: 560px) {
    .app-download-page {
        width: calc(100% - 24px);
        margin: 18px auto;
    }

    .app-download-body {
        grid-template-columns: 1fr;
    }

    .app-download-platform {
        min-height: 120px;
        border-right: 0;
        border-bottom: 1px solid var(--account-color-divider);
    }

    .app-download-platform .fa {
        font-size: 42px;
    }

    .app-download-copy {
        padding: 23px 18px;
    }

    .app-download-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .app-download-title-row h2 {
        font-size: 20px;
    }

    .app-download-actions .btn {
        width: 100%;
    }

    .download-hashkey-panel {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .download-hashkey-actions {
        display: grid;
        grid-column: auto;
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .download-hashkey-actions .btn {
        width: 100%;
    }
}

/* Account settings ---------------------------------------------- */
.settings-page {
    max-width: 1400px;
}

.settings-shell {
    margin: 0 !important;
}

.settings-notice {
    margin: 16px 18px 0;
}

.settings-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    min-height: 600px;
}

.settings-navigation {
    padding: 12px 9px;
    border-right: 1px solid var(--account-color-divider);
    background: #f5f8fb;
}

.settings-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-nav > li {
    margin: 0 0 3px;
}

.settings-nav > li > a {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 0;
    border-radius: 3px;
    color: #526980;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.settings-nav > li > a:hover,
.settings-nav > li > a:focus {
    color: #214e78;
    background: #e8f0f7;
    text-decoration: none;
}

.settings-nav > li.active > a,
.settings-nav > li.active > a:hover,
.settings-nav > li.active > a:focus {
    color: var(--account-color-heading-secondary);
    background: #dfeaf4;
    box-shadow: inset 3px 0 0 var(--account-color-primary);
}

.settings-nav .fa {
    width: 18px;
    flex: 0 0 18px;
    color: #71869b;
    font-size: 14px;
    text-align: center;
}

.settings-nav > li.active .fa {
    color: var(--account-color-primary);
}

.settings-content,
.settings-content > .tab-pane {
    min-width: 0;
}

.settings-section-heading {
    padding: 20px 22px 16px;
}

.settings-section-heading h2 {
    color: var(--account-color-heading-secondary);
    font-size: 20px;
    line-height: 1.25;
}

.settings-section-heading p {
    margin: 5px 0 0;
    color: #718399;
    line-height: 1.5;
}

.settings-section-intro {
    margin: 5px 0 0;
    color: #718399;
    font-size: 12px;
    line-height: 1.5;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-form-section {
    padding: 22px;
}

.settings-form-section + .settings-form-section {
    border-left: 1px solid var(--account-color-divider-soft);
}

.settings-form-section h3,
.settings-table-section h3,
.settings-metric-heading h3,
.settings-twitch-help h3,
.settings-reference-block h3,
.settings-help-panel h3,
.settings-api-layout h3 {
    margin: 0 0 13px;
    color: #29445f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.settings-form-section > .account-form-field + .account-form-field,
.settings-basic-fields .account-form-field + .account-form-field {
    margin-top: 16px;
}

.settings-page .form-control[readonly] {
    color: #62748a;
    background: var(--account-color-surface-neutral);
}

.settings-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.settings-form-actions {
    padding-right: 22px;
    padding-left: 22px;
}

.settings-inline-notice {
    margin: 18px 22px 0;
}

.settings-manual-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin: 14px 22px 20px;
    padding: 16px;
    border: 1px solid var(--account-color-divider);
    border-radius: 3px;
    background: var(--account-color-surface-subtle);
}

.settings-manual-account .btn {
    min-height: 40px;
    font-size: 12px;
    font-weight: 700;
}

.settings-table-section {
    padding: 20px 22px 0;
}

.settings-table-section + .settings-table-section {
    margin-top: 20px;
    padding-bottom: 22px;
    border-top: 1px solid var(--account-color-divider-soft);
}

.settings-table-section .settings-section-intro {
    margin: -8px 0 11px;
}

.settings-table-scroll {
    margin: 0;
    border: 1px solid #d8e1ea;
    border-radius: 3px;
}

.settings-table {
    min-width: 680px;
    margin: 0;
}

.settings-table > thead > tr > th {
    padding: 8px 10px;
    border-bottom: 1px solid #d8e1ea;
    color: #60738a;
    background: #eef3f7;
    font-size: 12px;
    font-weight: 700;
}

.settings-table > tbody > tr > td {
    padding: 9px 10px;
    border-top: 1px solid #e4eaf0;
    color: #52667d;
    font-size: 12px;
    vertical-align: middle;
}

.settings-table .btn {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.settings-status-badge {
    min-height: 25px;
}

.settings-remove-link {
    display: inline-flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5dee7;
    border-radius: 3px;
    color: #8b5260;
}

.settings-remove-link:hover,
.settings-remove-link:focus {
    border-color: #d7a8b0;
    color: #a53646;
    background: #fff4f5;
    text-decoration: none;
}

.settings-empty-cell {
    padding: 24px !important;
    color: #7a8a9d !important;
    text-align: center;
}

.settings-twitch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.settings-twitch-layout > div {
    padding: 22px;
}

.settings-basic-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 21px;
    border-bottom: 1px solid var(--account-color-divider-soft);
}

.settings-basic-fields .account-form-field + .account-form-field {
    margin-top: 0;
}

.settings-metric-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 0 10px;
}

.settings-metric-heading h3 {
    margin-bottom: 2px;
}

.settings-metric-heading p {
    margin: 0;
    color: #75869a;
    font-size: 12px;
}

#twitch_metric_count {
    color: #526b85;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.settings-metric-group {
    border: 1px solid #d8e1ea;
    border-radius: 3px;
    background: var(--account-color-surface);
}

.settings-metric-group + .settings-metric-group {
    margin-top: 8px;
}

.settings-metric-group > summary {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 11px;
    color: #36516d;
    background: #f2f6f9;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}

.settings-metric-group > summary::-webkit-details-marker {
    display: none;
}

.settings-metric-group[open] > summary .fa {
    transform: rotate(180deg);
}

.settings-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-checkbox-option {
    display: flex;
    min-height: 37px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 7px 10px;
    border-top: 1px solid #e7ecf1;
    color: #52677e;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.settings-checkbox-option:nth-child(odd) {
    border-right: 1px solid #e7ecf1;
}

.settings-checkbox-option input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
}

.settings-twitch-help,
.settings-help-panel {
    padding: 22px;
    border-left: 1px solid var(--account-color-divider);
    color: #62758b;
    background: var(--account-color-surface-subtle);
}

.settings-twitch-help p,
.settings-twitch-help li,
.settings-help-panel p,
.settings-help-panel li {
    font-size: 12px;
    line-height: 1.5;
}

.settings-twitch-help ul,
.settings-help-panel ul,
.settings-help-panel ol {
    margin: 8px 0 20px;
    padding-left: 19px;
}

.settings-twitch-preview {
    min-height: 96px;
    margin-bottom: 23px;
    padding: 12px;
    border: 1px solid #cdd9e4;
    border-radius: 3px;
    color: #29465f;
    background: var(--account-color-surface);
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.settings-overlay-layout,
.settings-api-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
}

.settings-overlay-layout > div,
.settings-api-layout > div {
    padding: 22px;
}

.settings-url-field + .settings-url-field {
    margin-top: 16px;
}

.settings-url-field > label {
    display: block;
    margin-bottom: 6px;
    color: #40556e;
    font-size: 12px;
    font-weight: 700;
}

.settings-url-field > div {
    display: flex;
    gap: 8px;
}

.settings-url-field .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.settings-url-field .btn,
.settings-test-overlay,
.settings-api-layout .btn {
    min-height: 40px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.settings-test-overlay {
    margin-top: 18px;
}

.settings-reference-block {
    margin-top: 22px;
    padding: 15px;
    border: 1px solid var(--account-color-divider);
    border-radius: 3px;
    background: var(--account-color-surface-subtle);
}

.settings-reference-block h3 {
    margin-bottom: 8px;
}

.settings-reference-block ul {
    margin: 0;
    padding-left: 18px;
}

.settings-reference-block li,
.settings-reference-block code {
    font-size: 12px;
    line-height: 1.55;
}

.settings-locked-feature {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    max-width: 700px;
    margin: 36px auto;
    padding: 24px;
    border: 1px solid var(--account-color-divider);
    border-radius: 3px;
    background: var(--account-color-surface-subtle);
}

.settings-locked-feature > .fa {
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    color: var(--account-color-primary);
    background: #e7f0f8;
    font-size: 20px;
}

.settings-locked-feature h3 {
    margin: 0 0 5px;
    color: var(--account-color-heading-secondary);
    font-size: 17px;
}

.settings-locked-feature p {
    margin: 0 0 13px;
    color: #697c92;
    font-size: 12px;
    line-height: 1.5;
}

.settings-locked-feature .btn {
    min-height: 36px;
    font-size: 12px;
    font-weight: 700;
}

.settings-api-key {
    min-height: 47px;
    margin-bottom: 9px;
    padding: 12px;
    overflow-x: auto;
    border: 1px solid #cdd9e4;
    border-radius: 3px;
    background: var(--account-color-surface-neutral);
}

.settings-api-key code {
    color: #29465f;
    background: transparent;
    font-size: 12px;
    white-space: nowrap;
}

.settings-api-layout > div > p {
    margin: 0 0 15px;
    color: #72849a;
    font-size: 12px;
}

@media (max-width: 980px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-navigation {
        padding: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--account-color-divider);
    }

    .settings-nav {
        display: flex;
        overflow-x: auto;
        gap: 4px;
    }

    .settings-nav > li {
        flex: 0 0 auto;
        margin: 0;
    }

    .settings-nav > li.active > a,
    .settings-nav > li.active > a:hover,
    .settings-nav > li.active > a:focus {
        box-shadow: inset 0 -3px 0 var(--account-color-primary);
    }

    .settings-twitch-layout,
    .settings-overlay-layout,
    .settings-api-layout {
        grid-template-columns: 1fr;
    }

    .settings-twitch-help,
    .settings-help-panel {
        border-top: 1px solid var(--account-color-divider);
        border-left: 0;
    }
}

@media (max-width: 700px) {
    .settings-page {
        width: calc(100% - 24px);
        margin: 18px auto;
    }

    .settings-form-grid {
        grid-template-columns: 1fr;
    }

    .settings-form-section + .settings-form-section {
        border-top: 1px solid var(--account-color-divider-soft);
        border-left: 0;
    }

    .settings-basic-fields {
        grid-template-columns: 1fr;
    }

    .settings-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .settings-checkbox-option:nth-child(odd) {
        border-right: 0;
    }

    .settings-manual-account,
    .settings-password-grid {
        grid-template-columns: 1fr;
    }

    .settings-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .settings-form-actions .btn {
        width: 100%;
    }
}

body { background: var(--account-color-page); color: var(--account-color-text); font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.page-wrap { max-width: 1440px; margin: 0 auto; padding: 22px 24px 50px; }
.account-content > .page-wrap { max-width: none; padding-right: 0; padding-left: 0; }
.panel-card { background: var(--account-color-surface); border: 1px solid var(--account-color-border-contrast); border-radius: 4px; box-shadow: none; }
.replay-tabs {
    margin: 0;
    padding: 0 22px;
    background: var(--account-color-surface-raised);
    border: 1px solid var(--account-color-border-contrast);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.replay-tabs > li > a {
    margin-right: 20px;
    padding: 13px 2px 11px;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    color: var(--account-color-text-navigation);
    font-size: 13px;
    font-weight: 700;
}
.replay-tabs > li.active > a, .replay-tabs > li.active > a:hover, .replay-tabs > li.active > a:focus { background: var(--account-color-surface) !important; border-bottom-color: #e24c55 !important; color: #243044 !important; }
.replay-tabs > li > a:focus, .metric-switch .btn:focus, .inventory-toolbar .btn:focus { outline: 2px solid var(--account-color-primary); outline-offset: 2px; }
.section { margin-top: 18px; }
.archived-replay-notice { overflow: hidden; border-top: 3px solid #b88a2d; }
.archived-replay-notice .archived-replay-head { justify-content: flex-start; }
.archived-replay-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--account-color-surface);
    color: #586579;
    font-size: 12px;
    line-height: 1.45;
}
.archived-replay-icon { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; background: #f5ecd9; border: 1px solid #e1d0aa; border-radius: 3px; color: #8e6921; font-size: 17px; }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--account-color-surface-raised);
    border-bottom: 1px solid var(--account-color-divider-contrast);
}
.section-title {
    margin: 0;
    color: #1f2b3a;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.2;
}
.section-sub { margin-left: 8px; color: #8b97a8; font-size: 12px; font-weight: 500; }
.metric-switch { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.metric-switch .btn,
.inventory-toolbar .btn {
    float: none;
    padding: 5px 10px;
    background: var(--account-color-surface);
    border-color: #d9e0e8;
    border-radius: 2px;
    color: #6e7b8e;
    font-size: 12px;
    font-weight: 700;
}
.metric-switch .btn.active,
.metric-switch .btn.active:hover,
.metric-switch .btn.active:focus,
.inventory-toolbar .btn.active,
.inventory-toolbar .btn.active:hover,
.inventory-toolbar .btn.active:focus {
    background: #27364a !important;
    border-color: #27364a !important;
    color: var(--account-color-on-primary) !important;
    box-shadow: none;
}
.timeline-section {
    display: block;
    width: 100%;
    max-width: none;
    clear: both;
    border-top: 3px solid var(--account-color-contrast);
    box-shadow: 0 8px 22px rgba(24,39,58,.13);
}
.timeline-section:not(.timeline-fixed) { box-shadow: 0 3px 10px rgba(24,39,58,.08); }
.timeline-sticky-placeholder { width: 100%; height: 0; }
.timeline-section.timeline-fixed { position: fixed; top: 10px; z-index: 100; margin-top: 0; }
.timeline-head { flex-wrap: wrap; gap: 10px; }
.metric-switch .chart-fixed-toggle { margin-left: 8px; border-radius: 3px !important; }
.chart-fixed-toggle .glyphicon { margin-right: 4px; font-size: 10px; }
.player-name {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: var(--account-color-text);
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
}
.player-name > span { min-width: 0; }
.player-name-text {
    display: block;
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-name .races {
    display: inline-block;
    flex: 0 0 auto;
    float: none;
    margin-right: 7px;
    vertical-align: middle;
}
.player-meta {
    display: block;
    color: var(--account-color-text-faint);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}
.match-kicker {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.match-title {
    margin: 4px 0 3px;
    color: var(--account-color-on-primary);
    font-size: 26px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.match-meta { color: rgba(255, 255, 255, .82); font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.versus { display: flex; align-items: center; justify-content: center; min-height: 70px; }
.team-name {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
    font-size: 18px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.team-name.red { justify-content: flex-end; }
.team-name.blue { justify-content: flex-start; }
.header-player { display: inline-flex; min-width: 0; align-items: center; gap: 6px; }
.versus-one-v-one .team-name { flex-wrap: nowrap; }
.versus-one-v-one .header-player { flex: 0 1 auto; }
.header-player .races, .header-player .leagues { display: inline-block; flex: 0 0 auto; float: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)) drop-shadow(0 0 4px rgba(0, 0, 0, .55)); }
.header-division-placeholder { display: inline-block; width: 32px; height: 32px; flex: 0 0 32px; }
.header-player-name { flex: 0 0 auto; color: var(--player-color, var(--account-color-on-primary)); white-space: nowrap; }
.inventory-player-name, .hero-player-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-chip {
    margin: 0 14px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 3px;
    color: var(--account-color-on-primary);
    font-size: 12px;
    font-weight: 800;
}
.head-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; text-align: right; white-space: nowrap; }
.btn-download {
    padding: 10px 13px;
    background: rgba(15, 23, 34, .36);
    border-color: rgba(255, 255, 255, .65);
    color: var(--account-color-on-primary);
    font-weight: 700;
}
.btn-download:hover, .btn-download:focus { background: var(--account-color-surface); border-color: var(--account-color-on-primary); color: var(--account-color-contrast); }
.btn-result {
    padding: 10px 13px;
    background: rgba(15, 23, 34, .36);
    border-color: rgba(255, 255, 255, .42);
    color: var(--account-color-on-primary);
    font-weight: 700;
}
.btn-result:hover, .btn-result:focus { background: rgba(255,255,255,.16); border-color: var(--account-color-on-primary); color: var(--account-color-on-primary); }
.btn-result.is-revealed { background: #e8f4ec; border-color: #b8dbc4; color: #236b3c; }
.btn-result[disabled] { background: rgba(15,23,34,.25); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.66); opacity: 1; }
.header-result-badge {
    display: none;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(204,238,214,.72);
    border-radius: 50%;
    background: rgba(35,107,60,.88);
    color: var(--account-color-on-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    text-shadow: none;
}
.team-name.match-winner .header-result-badge { display: inline-block; }
.team-name.match-winner { filter: drop-shadow(0 0 7px rgba(91,196,126,.38)); }
.team-name.match-defeated { opacity: .58; }
.btn-viewer {
    padding: 10px 16px;
    background: var(--account-color-surface);
    border-color: var(--account-color-on-primary);
    color: #27364a;
    font-weight: 700;
}
.btn-viewer:hover, .btn-viewer:focus { background: var(--account-color-surface-table); border-color: var(--account-color-surface-table); color: #182435; }
@media (max-width: 991px) {
    .page-wrap { padding: 15px; }
    .versus { flex-wrap: wrap; justify-content: flex-start; min-height: 44px; }
    .team-name { flex: 0 1 auto; }
    .team-name.red { justify-content: flex-start; }
    .head-actions { justify-content: flex-start; padding-top: 8px; text-align: left; }
}
@media (max-width: 640px) {
    .page-wrap { padding: 12px 8px 30px; }
    .section-head { display: block; }
    .metric-switch { justify-content: flex-start; margin-top: 9px; }
    .replay-tabs { overflow-x: auto; white-space: nowrap; }
    .replay-tabs > li { display: inline-block; float: none; }
    .head-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.overview-page .chart-wrap { position: relative; width: 100%; padding: 12px 0 2px; overflow: hidden; }
.timeline { display: block; width: 100% !important; max-width: none; height: 205px; }
.glance-grid { padding: 14px; }
.team-card, .inventory-card, .team-economy { overflow: hidden; border: 1px solid var(--account-color-border-contrast); border-radius: 3px; }
.team-card.team-red, .team-economy.red { border-top: 3px solid var(--team-1-color, var(--account-color-danger-emphasis)); }
.team-card.team-blue, .team-economy.blue { border-top: 3px solid var(--team-2-color, var(--account-color-primary)); }
.inventory-card { border-top: 3px solid var(--player-color, var(--account-color-text-help)); }
.totals {
    display: grid;
    grid-template-columns: minmax(120px, 1.45fr) .95fr .72fr .78fr .78fr 1.08fr 1.08fr;
    column-gap: 6px;
    padding: 6px 10px;
    background: var(--account-color-surface-table);
    border-bottom: 1px solid #e4e9ef;
    color: var(--account-color-text-navigation);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
}
.totals span:not(:first-child), .stat, .unit-stats-table th:not(:first-child), .unit-stats-table td:not(:first-child), .team-economy-head span:not(:first-child), .player-stat { text-align: right; }
.player-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.45fr) .95fr .72fr .78fr .78fr 1.08fr 1.08fr;
    column-gap: 6px;
    align-items: center;
    min-height: 58px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--account-color-surface-selected);
    border-left: 3px solid var(--player-color, transparent);
}
.player-row:last-child, .inventory-section:last-child, .hero-unit-card:last-of-type, .economy-player:last-child, .build-row:last-child { border-bottom: 0; }
.player, .build-action-copy { min-width: 0; }
.player-sub {
    display: block;
    color: var(--account-color-text-faint);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
}
.stat strong { display: block; color: var(--account-color-text); font-size: 14px; font-variant-numeric: tabular-nums; }
.resource-values {
    display: flex !important;
    justify-content: flex-end;
    gap: 0;
    font-size: 12px !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mineral-value { color: var(--account-color-primary); }
.vespene-value { color: #267f46; }
.resource-values > * + *:before { margin: 0 5px; color: #98a2b1; font-weight: 400; content: "/"; }
.supply-bar {
    width: 58px;
    height: 4px;
    margin: 4px 0 0 auto;
    background: #e6eaf0;
    border-radius: 2px;
    overflow: hidden;
}
.player-row .supply-bar i, .inventory-card .inventory-supply .supply-bar i { display: block; height: 100%; background: var(--player-color, var(--account-color-text-help)); }
.inventory-toolbar { padding: 12px 16px; background: var(--account-color-surface-table); border-bottom: 1px solid #e5eaf0; }
.inventory-grid, .build-comparison-body { padding: 10px; }
.inventory-column, .hero-team-card { margin-bottom: 10px; }
.inventory-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 10px;
    background: var(--account-color-surface-subtle);
    border-bottom: 1px solid #e2e7ed;
    font-size: 15px;
    font-weight: 800;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    letter-spacing: .01em;
}
.inventory-title .race {
    flex: 0 0 auto;
    margin-left: 8px;
    color: #8894a4;
    font-size: 12px;
    font-weight: 600;
}
.inventory-title-main { display: flex; align-items: baseline; min-width: 0; }
.inventory-supply { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; }
.inventory-supply-value {
    min-width: 58px;
    color: var(--account-color-text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.inventory-supply .supply-bar { width: 64px; height: 5px; margin: 0; }
.inventory-section { padding: 0 10px 0; border-bottom: 1px solid var(--account-color-surface-selected); }
.inventory-label {
    margin-bottom: 5px;
    color: #657489;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
}
.icon-list { min-height: 42px; }
.icon-list:before, .icon-list:after, .hero-kill-icons:before, .hero-kill-icons:after, .economy-page .chart-wrap:before, .economy-page .chart-wrap:after { display: table; content: " "; }
.icon-list:after, .hero-kill-icons:after, .economy-page .chart-wrap:after { clear: both; }
.inventory-empty { display: inline-block; padding: 12px 2px; color: #929dad; font-size: 12px; }
.inventory-empty-page { display: block; padding: 24px; text-align: center; }
.icon-slot,
.hero-kill-item {
    position: relative;
    float: left;
    width: 44px;
    height: 44px;
    margin: 0 2px 2px 0;
    background: #202733;
    overflow: hidden;
}
.icon-slot { border: 1px solid #bfc9d5; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.icon-slot > div { transform: translate(1px, 1px); }
.overview-section-toolbar,
.chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--account-color-divider-contrast);
}
.overview-section-toolbar { padding: 12px 16px; }
.overview-section-toolbar .section-title { flex: 1 1 auto; }
.unit-stats-scroll, .table-wrap { overflow-x: auto; }
.unit-stats-table { width: 100%; min-width: 840px; margin: 0; table-layout: fixed; }
.unit-stats-table > thead > tr > th {
    padding: 8px 10px;
    background: var(--account-color-surface-table);
    border-bottom: 1px solid var(--account-color-border-contrast);
    color: #637188;
    font-size: 12px;
    font-weight: 800;
    vertical-align: middle;
}
.unit-stats-table > tbody > tr > td {
    padding: 8px 10px;
    border-top: 1px solid #e8edf2;
    color: var(--account-color-text-emphasis);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.unit-stats-table .unit-player-column { width: 24%; }
.unit-stats-table .player-name, .overall-resource-table>tbody>tr>td:first-child, .chat-table .player-name { text-align: left; }
.unit-stats-name-line, .build-action-player, .build-action-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-stats-name-line .player-name-text { display: inline; }
.unit-stats-team-label { color: #7d8ba0; font-size: 12px; font-weight: 500; }
.unit-stat-value { white-space: nowrap; }
.hero-team-grid { padding: 12px 8px 4px; }
.hero-team-column { padding-right: 7px; padding-left: 7px; }
.hero-team-card { background: var(--account-color-surface-table); overflow: hidden; }
.hero-team-heading {
    margin: 0;
    padding: 8px 10px;
    background: var(--account-color-surface-subtle);
    border-bottom: 1px solid #e2e7ed;
    color: var(--account-color-text-emphasis);
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
}
.hero-unit-card {
    display: block;
    min-height: 106px;
    margin: 0;
    border: 1px solid #d7e0e9;
    border-left-width: 3px;
    border-radius: 3px;
    background: var(--account-color-surface);
    overflow: hidden;
}
.hero-player-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px; }
.hero-unit-card { border-left-color: var(--player-color, var(--account-color-text-help)); }
.hero-unit-main {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 10px;
    background: var(--account-color-surface-hover);
    border-bottom: 1px solid #e2e7ed;
}
.hero-unit-portrait {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: 10px;
    border: 1px solid #cfd7e1;
    border-radius: 3px;
    background: #202733;
    overflow: hidden;
}
.hero-no-unit {
    display: block;
    color: var(--account-color-text-faint);
    font-size: 22px;
    line-height: 42px;
    text-align: center;
}
.hero-unit-copy { flex: 1 1 auto; min-width: 0; }
.hero-player-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--account-color-text-navigation);
    font-size: 12px;
    font-weight: 800;
}
.hero-unit-name {
    margin: 0 0 6px;
    color: #1f2b3a;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
    word-wrap: break-word;
}
.hero-unit-card .hero-unit-name { color: var(--player-color, #1f2b3a); }
.snapshot-cell strong.team-red { color: var(--team-1-color, #c93647); }
.snapshot-cell strong.team-blue { color: var(--team-2-color, #2d73b9); }
.hero-kill-total { margin-top: 4px; color: var(--account-color-text-emphasis); font-size: 12px; }
.hero-kill-total strong { font-size: 14px; }
.hero-kill-breakdown { width: 100%; min-width: 0; padding: 9px 10px 7px; }
.hero-kill-label { margin-bottom: 5px; color: #69778b; font-size: 12px; font-weight: 800; }
.hero-kill-item { border: 1px solid #cfd7e1; border-radius: 3px; }
.hero-kill-count {
    position: absolute;
    right: 2px;
    bottom: 1px;
    z-index: 2;
    min-width: 17px;
    padding: 1px 3px;
    border-radius: 2px;
    background: rgba(18, 25, 35, .88);
    color: var(--account-color-on-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}
.hero-empty { padding: 18px; color: var(--account-color-text-faint); font-size: 12px; text-align: center; }
@media (min-width: 992px) {
    .inventory-column[data-team="2"] { float: right; }
    .hero-team-column.col-md-12 .hero-player-list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
@media (max-width: 991px) {
    .team-column + .team-column, .inventory-column + .inventory-column { margin-top: 14px; }
    .hero-team-column + .hero-team-column { margin-top: 8px; }
    .timeline { height: 170px; }
}
@media (max-width: 640px) {
    .overview-section-toolbar { display: block; }
    .overview-section-toolbar .metric-switch { margin-top: 9px; }
    .totals, .player-row { grid-template-columns: 1.4fr repeat(2, 1fr); }
    .totals span:nth-child(n+4), .player-row > .stat:nth-child(n+4) { display: none; }
}
.economy-page .chart-wrap { padding: 10px 16px 2px; }
.economy-page .chart-wrap .active_army_div { float: none!important; width: 100%!important; padding-left: 0; padding-right: 0; }
.snapshot-bar {
    display: flex;
    clear: both;
    float: none;
    width: 100%;
    border-top: 1px solid var(--account-color-divider-contrast);
    background: var(--account-color-surface);
}
.snapshot-cell {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 12px;
    border-right: 1px solid #e4e9ef;
    text-align: right;
}
.snapshot-cell:first-child { flex-grow: 1.2; text-align: left; }
.snapshot-cell:last-child { border-right: 0; }
.snapshot-cell small, .build-snapshot-cell small { display: block; color: #718096; font-size: 12px; }
.snapshot-cell small { text-transform: none; letter-spacing: .01em; }
.snapshot-cell strong, .build-snapshot-cell strong { display: block; margin-top: 2px; color: #172843; font-variant-numeric: tabular-nums; }
.snapshot-cell strong { font-size: 15px; }
.mineral { color: var(--account-color-primary)!important; }
.vespene { color: #267f46!important; }
.summary-grid { padding: 12px; }
.team-economy-head {
    display: grid;
    grid-template-columns: 1.2fr repeat(3,1fr);
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #dfe5ec;
    background: var(--account-color-surface-table);
    color: var(--account-color-text-navigation);
    font-size: 12px;
    font-weight: 800;
    font-family: "Arial Narrow","Segoe UI",Arial,sans-serif;
    letter-spacing: .01em;
}
.economy-player {
    display: grid;
    grid-template-columns: 1.2fr repeat(3,1fr);
    align-items: center;
    min-height: 58px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--account-color-surface-selected);
    border-left: 3px solid var(--player-color, transparent);
}
.player-stat strong { display: block; font-size: 13px; }
.economy-table { min-width: 1080px; margin: 0; }
.economy-table>thead>tr>th {
    padding: 8px 10px;
    border-bottom: 1px solid #dfe5ec;
    background: var(--account-color-surface-table);
    color: var(--account-color-text-navigation);
    font-size: 12px;
    letter-spacing: .01em;
    text-transform: none;
}
.economy-table>tbody>tr>td {
    padding: 9px 10px;
    border-top: 1px solid var(--account-color-surface-selected);
    vertical-align: middle;
    font-size: 13px;
    border-top-color: #e6ebf0;
}
.economy-table > tbody > tr > td:first-child { box-shadow: inset 3px 0 0 var(--player-color, transparent); }
.economy-table .num { text-align: right; white-space: nowrap; }
.resource-pair {
    display: inline-flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0;
    min-width: 116px;
}
.resource-pair>span { display: inline-block; font-weight: 700; }
.resource-pair>span+span:before { margin: 0 7px; color: #98a2b1; font-weight: 400; content: "/"; }
.economy-help {
    display: inline-block;
    margin-left: 5px;
    color: #8491a3;
    font-size: 12px;
    cursor: help;
    vertical-align: middle;
}
.economy-help:hover { color: var(--account-color-primary); outline: 0; }
.economy-help:focus { color: var(--account-color-primary); outline: 2px solid var(--account-color-primary); outline-offset: 2px; }
.economy-help-popup {
    position: absolute;
    z-index: 10050;
    display: none;
    width: 290px;
    padding: 9px 11px;
    border: 1px solid var(--account-color-text-dark);
    border-radius: 4px;
    background: var(--account-color-contrast);
    box-shadow: 0 4px 12px rgba(24,39,58,.24);
    color: var(--account-color-on-primary);
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    white-space: normal;
    pointer-events: none;
}
.economy-help-popup:after {
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--account-color-contrast);
    border-right: 1px solid var(--account-color-text-dark);
    border-bottom: 1px solid var(--account-color-text-dark);
    content: "";
    transform: rotate(45deg);
}
.economy-help-popup.is-below:after {
    top: -6px;
    bottom: auto;
    border: 0;
    border-top: 1px solid var(--account-color-text-dark);
    border-left: 1px solid var(--account-color-text-dark);
}
.progress.slim {
    width: 94px;
    height: 5px;
    margin: 4px 0 0 auto;
    background: #e8ecf1;
    box-shadow: none;
    border-radius: 0;
}
.progress.slim .progress-bar { background: var(--account-color-primary); box-shadow: none; }
.efficiency-good { color: #318450; font-weight: 800; }
.efficiency-warn { color: #c17a23; font-weight: 800; }
.economy-live-sq {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    min-width: 94px;
}
.economy-sq-score { color: #52647c; font-size: 16px; font-weight: 800; }
.economy-sq-label { color: #7d899a; font-size: 12px; white-space: nowrap; }
.economy-sq-score.sq-good { color: #318450; }
.economy-sq-score.sq-warn { color: #b36f19; }
.economy-sq-score.sq-poor { color: #c14b54; }
@media(max-width:991px) {
    .summary-grid .col-md-6+.col-md-6 { margin-top: 12px; }
    .team-economy-head, .economy-player { grid-template-columns: 1.3fr repeat(2,1fr); }
    .team-economy-head span:nth-child(n+4), .economy-player .player-stat:nth-child(n+4) { display: none; }
}
@media(max-width:640px) {
    .snapshot-bar { flex-wrap: wrap; }
    .snapshot-cell { flex: 0 0 33.333%; }
    .snapshot-cell:first-child { flex-grow: 0; }
    .snapshot-cell:nth-child(n+4) { display: none; }
}
.economy-table strong { font-family: "Arial Narrow","Segoe UI",Arial,sans-serif; letter-spacing: .01em; }
.economy-table>tbody>tr:hover>td, .overall-resource-table>tbody>tr:hover>td { background: var(--account-color-surface-subtle); }
.overall-resource-table { min-width: 780px; margin: 0; }
.overall-resource-table>thead>tr>th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--account-color-border-contrast);
    background: var(--account-color-surface-table);
    color: var(--account-color-text-navigation);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}
.overall-resource-table>thead>tr>th:first-child { width: 250px; text-align: left; }
.overall-resource-table>tbody>tr>td {
    padding: 8px 10px;
    border-top: 1px solid var(--account-color-surface-selected);
    background: var(--account-color-surface);
    color: #34445a;
    font-size: 13px;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}
.overall-resource-table > tbody > tr > td:first-child { border-left: 3px solid var(--player-color, transparent); }
.chat-row.team-1 > td:first-child { border-left: 3px solid var(--team-1-color, var(--account-color-danger-emphasis)); }
.chat-row.team-2 > td:first-child { border-left: 3px solid var(--team-2-color, var(--account-color-primary)); }
.overall-best { margin-left: 5px; color: #c58b20; font-size: 12px; }
.overall-sq { color: #52647c; font-weight: 700; }
.overall-sq strong { color: #172843; }
.overall-color-swatch {
    display: inline-block;
    width: 54px;
    height: 12px;
    border: 1px solid rgba(23,40,67,.16);
    border-radius: 2px;
    vertical-align: middle;
}
.build-orders-page .build-timeline-body { padding: 16px 18px 10px; }
.build-filter .btn { min-width: 88px; }
.build-rail-wrap { position: relative; padding: 26px 4px 38px; }
.build-rail { position: relative; height: 36px; background: linear-gradient(to bottom, transparent 16px, #b8c7d6 16px, #b8c7d6 20px, transparent 20px); cursor: crosshair; }
.build-rail:focus { outline: 2px solid var(--account-color-primary); outline-offset: 8px; }
.build-tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 36px;
    background: #a9b9ca;
    opacity: .58;
}
.build-tick-label {
    position: absolute;
    top: 42px;
    color: var(--account-color-text-secondary);
    font-size: 12px;
    white-space: nowrap;
    transform: translateX(-50%);
}
.build-tick-label.first { transform: none; }
.build-tick-label.last { transform: translateX(-100%); }
.build-marker {
    position: absolute;
    z-index: 2;
    top: 3px;
    width: 9px;
    height: 9px;
    margin-left: -4px;
    border: 1px solid rgba(255,255,255,.9);
    background: var(--team-1-color, var(--account-color-danger-emphasis));
    box-shadow: 0 1px 2px rgba(29,44,61,.18);
}
.build-marker.team-2 { top: 24px; background: var(--team-2-color, var(--account-color-primary)); }
.build-marker.buildings { border-radius: 1px; }
.build-marker.expansion {
    width: 11px;
    height: 10px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.build-marker.is-cluster {
    width: 18px;
    height: 14px;
    margin-left: -9px;
    border-radius: 8px;
    clip-path: none;
    transform: none;
}
.build-marker.is-cluster:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: var(--account-color-on-primary);
    content: attr(data-count);
    font-size: 12px;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
}
.build-playhead {
    position: absolute;
    z-index: 4;
    top: -28px;
    bottom: -5px;
    width: 1px;
    background: #24364c;
    pointer-events: none;
    transition: left .18s ease-out;
}
.build-playhead:after {
    position: absolute;
    top: 13px;
    left: -5px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--account-color-on-primary);
    border-radius: 50%;
    background: #24364c;
    box-shadow: 0 1px 2px rgba(15,31,48,.25);
    content: '';
}
.build-playhead-label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    padding: 3px 7px;
    border-radius: 3px;
    background: #24364c;
    color: var(--account-color-on-primary);
    font-size: 12px;
    font-weight: 700;
    transform: translateX(-50%);
    white-space: nowrap;
}
.build-snapshot { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--account-color-divider-soft); }
.build-snapshot-cell { padding: 8px 12px 2px; border-right: 1px solid var(--account-color-divider-soft); text-align: center; }
.build-snapshot-cell:last-child { border-right: 0; }
.build-snapshot-cell strong { font-size: 16px; }
.build-snapshot-cell.team-1 strong { color: var(--team-1-color, var(--account-color-danger-emphasis)); }
.build-snapshot-cell.team-2 strong { color: var(--team-2-color, var(--account-color-primary)); }
.build-view-controls, .chat-page .chat-controls { display: flex; align-items: center; gap: 7px; }
.build-player-select,
.chat-player-select {
    width: 210px;
    height: 34px;
    padding: 6px 28px 6px 10px;
    border: 1px solid #cfd9e4;
    border-radius: 3px;
    background-color: var(--account-color-surface);
    color: #52647c;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}
.build-player-select:hover, .chat-player-select:hover { border-color: #9eb1c4; }
.build-player-select:focus, .chat-player-select:focus { border-color: var(--account-color-primary); outline: 2px solid rgba(52,123,187,.2); outline-offset: 1px; }
.build-player-select.is-active, .chat-player-select.is-active { border-color: var(--account-color-primary); color: #17345e; }
.build-team-grid { display: flex; margin: 0 -5px; }
.build-team-column { width: 50%; padding: 0 5px; }
.build-team-shell {
    overflow: hidden;
    border: 1px solid var(--account-color-border-contrast);
    border-top: 4px solid var(--team-1-color, var(--account-color-danger-emphasis));
    border-radius: 4px;
    background: var(--account-color-surface-raised);
}
.build-team-shell.team-2 { border-top-color: var(--team-2-color, var(--account-color-primary)); }
.build-team-title {
    margin: 0;
    padding: 6px 11px 7px;
    color: var(--team-1-color, #bd2e3a);
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
}
.build-team-shell.team-2 .build-team-title { color: var(--team-2-color, #246aa8); }
.build-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 5px; padding: 0 5px 5px; }
.build-roster-player {
    display: flex;
    min-width: 0;
    min-height: 57px;
    align-items: center;
    padding: 7px 8px;
    border: 1px solid var(--account-color-border-contrast);
    border-radius: 3px;
    background: var(--account-color-surface);
}
.build-marker.is-filtered, .build-marker.is-collapsed, .build-roster-player.is-filtered, .build-row.is-filtered, .build-team-column.is-filtered, .chat-row.is-filtered, .chat-empty.is-filtered { display: none; }
.build-roster-player .player-name { flex: 1 1 auto; }
.build-player-supply { width: 76px; margin-left: 7px; text-align: right; }
.build-player-supply strong { color: #172843; font-size: 13px; }
.build-player-supply .progress { height: 7px; margin: 4px 0 0; background: #dce5ed; box-shadow: none; }
.build-player-supply .progress-bar { background: var(--team-1-color, var(--account-color-danger-emphasis)); box-shadow: none; transition: width .18s ease; }
.team-2 .build-player-supply .progress-bar { background: var(--team-2-color, var(--account-color-primary)); }
.build-team-feed {
    margin: 0 5px 5px;
    overflow: hidden;
    border: 1px solid var(--account-color-border-contrast);
    border-radius: 3px;
    background: var(--account-color-surface);
}
.build-column-head, .build-row { display: grid; grid-template-columns: 70px 82px 70px minmax(190px, 1fr); align-items: center; }
.build-column-head {
    min-height: 30px;
    border-bottom: 1px solid var(--account-color-divider-contrast);
    background: var(--account-color-page);
    color: var(--account-color-text-secondary);
    font-size: 12px;
    font-weight: 700;
}
.build-column-head span, .build-row > div { padding: 5px 7px; }
.build-column-head span:not(:last-child), .build-row > div:not(:last-child) { border-right: 1px solid #e6ebf0; }
.build-list {
    position: relative;
    max-height: 560px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #a8b8c8 #edf2f6;
    scrollbar-width: thin;
}
.build-list:focus { outline: 2px solid var(--account-color-primary); outline-offset: -2px; }
.build-list::-webkit-scrollbar { width: 10px; }
.build-list::-webkit-scrollbar-track { background: #edf2f6; }
.build-list::-webkit-scrollbar-thumb { border: 2px solid #edf2f6; border-radius: 6px; background: #a8b8c8; }
.build-list:before {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 10px;
    width: 1px;
    background: #ccd8e4;
    content: '';
}
.build-row {
    position: relative;
    min-height: 46px;
    border-bottom: 1px solid var(--account-color-surface-inset);
    color: #263b5c;
    cursor: pointer;
    font-size: 13px;
    transition: background-color .16s ease, opacity .16s ease;
}
.build-row:hover { background: #f2f7fb; }
.build-row:focus { z-index: 3; outline: 2px solid var(--account-color-primary); outline-offset: -2px; }
.build-row:before {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 6px;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border: 2px solid var(--account-color-on-primary);
    border-radius: 50%;
    background: #c7d5e2;
    content: '';
}
.build-row.is-current { background: #e6f2fc; }
.build-row.is-current:before { background: #234f7d; }
.build-time { padding-left: 20px !important; font-weight: 700; }
.build-action { display: flex; min-width: 0; align-items: center; gap: 7px; }
.build-action-icon { width: 40px; height: 40px; flex: 0 0 40px; overflow: hidden; }
.build-action-icon > div { margin: 0 !important; }
.build-action-player { color: #718096; font-size: 12px; line-height: 1.15; }
.build-action-name { color: #17345e; line-height: 1.25; }
.build-empty { padding: 28px 16px; color: #7c8999; text-align: center; }
.build-team-grid.single-team .build-team-column { width: 100%; }
.build-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 12px 0 0;
    padding: 10px 8px 2px;
    border-top: 1px solid var(--account-color-divider-contrast);
    color: #66758a;
    font-size: 12px;
}
.build-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-shape { display: inline-block; width: 9px; height: 9px; background: #7b8ca2; }
.legend-shape.unit, .build-marker.units { border-radius: 50%; }
.legend-shape.upgrade, .build-marker.upgrades { transform: rotate(45deg); }
.build-caption { margin-left: auto; }
@media (max-width: 900px) {
    .build-team-grid { display: block; }
    .build-team-column { width: 100%; }
    .build-team-column + .build-team-column { margin-top: 10px; }
    .build-snapshot { grid-template-columns: repeat(2, 1fr); }
    .build-snapshot-cell:nth-child(2) { border-right: 0; }
    .build-snapshot-cell:nth-child(-n+2) { border-bottom: 1px solid var(--account-color-divider-soft); }
}
@media (max-width: 620px) {
    .build-orders-page .section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .build-filter, .build-team-filter { display: flex; width: 100%; }
    .build-filter .btn { min-width: 0; flex: 1 1 auto; padding-left: 6px; padding-right: 6px; }
    .build-view-controls { width: 100%; align-items: stretch; flex-direction: column; }
    .build-team-filter .btn { flex: 1 1 auto; }
    .build-player-select { width: 100%; }
    .build-column-head, .build-row { grid-template-columns: 57px 66px 58px minmax(112px, 1fr); }
    .build-roster { grid-template-columns: 1fr; }
    .build-caption { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .build-playhead { transition: none; }
}
.chat-toolbar { padding: 10px 12px; background: var(--account-color-surface); }
.chat-search { position: relative; width: 420px; max-width: 100%; }
.chat-search .glyphicon {
    position: absolute;
    top: 10px;
    left: 11px;
    color: #8b97a8;
    pointer-events: none;
}
.chat-search-input {
    height: 34px;
    padding-left: 33px;
    border-color: #cfd9e4;
    border-radius: 3px;
    color: var(--account-color-text);
    font-size: 12px;
    box-shadow: none;
}
.chat-search-input:focus { border-color: var(--account-color-primary); box-shadow: 0 0 0 2px rgba(52,123,187,.15); }
.chat-result-count { color: #718096; font-size: 12px; white-space: nowrap; }
.chat-scroll { max-height: 720px; overflow: auto; }
.chat-table { margin: 0; table-layout: fixed; }
.chat-table > thead > tr > th {
    position: sticky;
    z-index: 5;
    top: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--account-color-border-contrast);
    background: var(--account-color-surface-table);
    color: var(--account-color-text-secondary);
    font-size: 12px;
    font-weight: 800;
}
.chat-table .chat-player-column { width: 270px; }
.chat-table .chat-time-column { width: 110px; }
.chat-table > tbody > tr > td {
    padding: 8px 10px;
    border-top: 1px solid var(--account-color-surface-inset);
    background: var(--account-color-surface);
    color: var(--account-color-text);
    font-size: 13px;
    vertical-align: middle;
}
.chat-table > tbody > tr:first-child > td { border-top: 0; }
.chat-row:hover > td { background: #f7fafc; }
.chat-time {
    position: relative;
    padding-left: 28px !important;
    color: #425873 !important;
    font-weight: 800;
    white-space: nowrap;
}
.chat-time:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 1px;
    background: #cfdae5;
    content: '';
}
.chat-time:after {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border: 2px solid var(--account-color-on-primary);
    border-radius: 50%;
    background: #8fa3b8;
    box-shadow: 0 0 0 1px #cfdae5;
    content: '';
}
.team-1 .chat-time:after { background: var(--team-1-color, var(--account-color-danger-emphasis)); }
.team-2 .chat-time:after { background: var(--team-2-color, var(--account-color-primary)); }
.chat-message { line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-empty { padding: 44px 18px; color: var(--account-color-text-help); text-align: center; }
.chat-empty strong { display: block; margin-bottom: 4px; color: var(--account-color-text); font-size: 14px; }
@media (max-width: 800px) {
    .chat-page .section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .chat-controls { width: 100%; align-items: stretch !important; flex-direction: column; }
    .chat-team-filter { display: flex; width: 100%; }
    .chat-team-filter .btn { flex: 1 1 auto; }
    .chat-player-select { width: 100%; }
    .chat-toolbar { align-items: stretch; flex-direction: column; gap: 7px; }
    .chat-search { width: 100%; }
    .chat-result-count { text-align: right; }
    .chat-table .chat-player-column { width: 210px; }
}
@media (max-width: 560px) {
    .chat-table .chat-player-column { width: 68px; }
    .chat-table .chat-time-column { width: 84px; }
    .chat-table .player-name > span { display: none; }
    .chat-time { padding-left: 24px !important; }
    .chat-time:before { left: 12px; }
    .chat-time:after { left: 8px; }
}
.units-player-control { display: flex; align-items: center; gap: 8px; }
.units-player-control label { margin: 0; color: #657489; font-size: 12px; }
.units-player-control .form-control { width: 220px; height: 31px; border-color: #cfd8e2; border-radius: 3px; color: #34475e; font-size: 12px; }
.units-team-grid { padding: 12px 6px 2px; }
.units-team-column { padding-right: 6px; padding-left: 6px; }
.units-team-card { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--account-color-border-contrast); border-radius: 3px; background: var(--account-color-surface-table); }
.units-team-card.team-1 { border-top: 3px solid var(--team-1-color, var(--account-color-danger-emphasis)); }
.units-team-card.team-2 { border-top: 3px solid var(--team-2-color, var(--account-color-primary)); }
.units-team-heading { margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--account-color-border-contrast); background: var(--account-color-surface-subtle); color: var(--account-color-contrast); font-size: 13px; font-weight: 800; }
.unit-team-player-list { padding: 8px; }
.unit-player-panel { margin-bottom: 8px; overflow: hidden; border: 1px solid var(--account-color-border-contrast); border-left: 3px solid var(--player-color, var(--account-color-text-help)); border-radius: 3px; background: var(--account-color-surface); }
.unit-player-panel:last-child { margin-bottom: 0; }
.unit-player-heading { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 10px; border-bottom: 1px solid #e0e6ed; background: var(--account-color-surface); }
.unit-player-identity { display: flex; min-width: 0; align-items: center; gap: 8px; }
.unit-player-identity .races { flex: 0 0 auto; }
.unit-player-identity > span { min-width: 0; }
.unit-player-identity strong, .unit-player-identity small { display: block; }
.unit-player-identity strong { color: #182b45; font-size: 14px; font-weight: 800; }
.unit-player-identity small { margin-top: 2px; color: #78889c; font-size: 12px; }
.unit-hero-summary { display: flex; min-width: 0; max-width: 245px; align-items: center; }
.unit-hero-icon { margin-right: 8px; }
.unit-hero-copy { min-width: 0; text-align: right; }
.unit-hero-copy small, .unit-hero-copy strong, .unit-hero-copy > span { display: block; }
.unit-hero-copy small { color: var(--account-color-text-help); font-size: 12px; }
.unit-hero-copy strong { margin-top: 1px; color: #2b4664; font-size: 14px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.unit-hero-copy > span { margin-top: 2px; color: #65778d; font-size: 12px; }
.unit-top-killer { min-width: 0; text-align: right; }
.unit-top-killer small, .unit-top-killer strong { display: block; white-space: nowrap; }
.unit-top-killer small { color: var(--account-color-text-help); font-size: 12px; }
.unit-top-killer strong { margin-top: 2px; overflow: hidden; color: #2b4664; font-size: 12px; font-weight: 800; text-overflow: ellipsis; }
.unit-player-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--account-color-divider-contrast); background: var(--account-color-surface-subtle); }
.unit-player-summary-heading { display: flex; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 9px; border-bottom: 1px solid var(--account-color-border-contrast); background: var(--account-color-surface-table); }
.unit-player-summary-heading strong { color: #30465f; font-size: 12px; font-weight: 800; }
.unit-player-summary-heading span { color: var(--account-color-text-help); font-size: 12px; text-align: right; }
.unit-player-summary > span { padding: 7px 9px; border-left: 1px solid var(--account-color-divider-contrast); text-align: right; }
.unit-player-summary > span:first-of-type { border-left: 0; }
.unit-player-summary > span small, .unit-player-summary > span strong { display: block; white-space: nowrap; }
.unit-player-summary > span small { color: var(--account-color-text-help); font-size: 12px; }
.unit-player-summary > span strong { margin-top: 2px; color: #203751; font-size: 14px; font-weight: 800; }
.unit-player-summary .unit-summary-trade.is-positive { color: #287047; }
.unit-player-summary .unit-summary-trade.is-negative { color: #ad3442; }
.unit-player-summary .unit-summary-trade.is-neutral { color: #506277; }
.unit-detail-scroll { overflow-x: auto; }
.unit-detail-table { width: 100%; min-width: 660px; margin: 0; table-layout: fixed; }
.unit-detail-table > thead > tr > th { padding: 7px 7px; border-bottom: 1px solid var(--account-color-border-contrast); background: var(--account-color-surface-table); color: var(--account-color-text-secondary); font-size: 12px; font-weight: 800; text-align: right; vertical-align: middle; }
.unit-detail-table > thead > tr > th:first-child { text-align: left; }
.unit-detail-table > tbody > tr > td { padding: 5px 7px; border-top: 1px solid #e8edf2; color: var(--account-color-text-emphasis); font-size: 12px; text-align: right; vertical-align: middle; }
.unit-detail-table > tbody > tr:first-child > td { border-top: 0; }
.unit-detail-table > tbody > tr:hover > td { background: var(--account-color-surface-subtle); }
.unit-detail-row.has-kill-breakdown { cursor: pointer; }
.unit-detail-row.has-kill-breakdown:hover > td, .unit-detail-row.has-kill-breakdown:focus > td { background: var(--account-color-primary-soft); }
.unit-detail-row.has-kill-breakdown:focus { outline: 0; }
.unit-detail-row.has-kill-breakdown:focus > td { box-shadow: inset 0 1px 0 rgba(52,123,187,.45), inset 0 -1px 0 rgba(52,123,187,.45); }
.unit-detail-table > tbody > tr > td:first-child { text-align: left; }
.unit-detail-table .unit-detail-name-column { width: 152px; }
.unit-detail-table th:nth-child(8), .unit-detail-table td:nth-child(8) { width: 104px; }
.unit-detail-name { display: flex; min-width: 0; align-items: center; gap: 7px; }
.unit-detail-name > strong { color: #1d3450; font-weight: 700; line-height: 1.2; }
.unit-detail-icon { display: inline-block; width: 44px; height: 44px; flex: 0 0 44px; float: none; margin: 0; overflow: hidden; }
.unit-detail-icon > div { margin: 0 !important; }
.unit-kill-value { display: inline-flex; min-width: 44px; align-items: center; justify-content: flex-end; gap: 5px; color: #274d73; font-weight: 800; }
.unit-row-expand-icon { font-size: 9px; }
.unit-kill-detail > td { padding: 0 !important; background: #f5f8fb; text-align: left !important; }
.unit-kill-breakdown { padding: 9px 10px 7px; border-top: 1px solid #dbe3eb; }
.unit-kill-caption { display: block; margin-bottom: 6px; color: #607187; font-size: 12px; }
.unit-kill-icons:before, .unit-kill-icons:after { display: table; content: " "; }
.unit-kill-icons:after { clear: both; }
.unit-kill-item { background: #202733; }
.unit-kill-item > div { transform: translate(1px, 1px); }
.unit-trade-value { display: inline-block; min-width: 66px; padding: 3px 6px; border-radius: 3px; font-weight: 800; text-align: right; white-space: nowrap; }
.unit-trade-value.is-positive { background: #e8f5ed; color: #287047; }
.unit-trade-value.is-negative { background: var(--account-color-danger-soft); color: #ad3442; }
.unit-trade-value.is-neutral { background: var(--account-color-surface-inset); color: #506277; }
.unit-life-range { white-space: nowrap; }
.unit-life-range i { margin: 0 3px; color: #9aa7b6; font-style: normal; }
.units-empty { padding: 42px 18px; border: 1px solid var(--account-color-border-contrast); background: var(--account-color-surface); color: #79889b; text-align: center; }
.units-empty .glyphicon { display: block; margin-bottom: 8px; color: #7f91a6; font-size: 22px; }
.units-empty strong { color: #34475e; font-size: 13px; }
@media (min-width: 992px) {
    .units-team-column[data-team="2"] { float: right; }
    .units-team-column.is-expanded .unit-team-player-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 8px; }
    .units-team-column.is-expanded .unit-player-panel { margin-bottom: 0; }
}
@media (max-width: 991px) {
    .units-team-column + .units-team-column { margin-top: 8px; }
}
@media (max-width: 640px) {
    .units-section-head { display: block; }
    .units-team-filter { display: flex; width: 100%; margin-top: 9px; }
    .units-team-filter .btn { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .units-player-control { align-items: stretch; flex-direction: column; margin-top: 9px; }
    .units-player-control .form-control { width: 100%; }
    .units-team-grid { padding: 8px 4px 0; }
    .unit-player-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
    .unit-hero-summary { width: 100%; max-width: none; justify-content: flex-start; }
    .unit-hero-copy { text-align: left; }
    .unit-top-killer { width: 100%; text-align: left; }
    .unit-player-summary { grid-template-columns: repeat(2, 1fr); }
    .unit-player-summary-heading { align-items: flex-start; flex-direction: column; gap: 1px; }
    .unit-player-summary-heading span { text-align: left; }
    .unit-player-summary > span:nth-of-type(odd) { border-left: 0; }
    .unit-player-summary > span:nth-of-type(n+3) { border-top: 1px solid var(--account-color-divider-contrast); }
}

.replay-list-page { width: 100%; max-width: none; padding: 22px 0 40px; }
.replay-list-filters-card { width: 100%; margin-bottom: 16px; overflow: hidden; }
.replay-list-panel { width: 100%; overflow: hidden; }
.replay-list-filter-grid { display: grid; grid-template-columns: 150px minmax(120px, .85fr) minmax(140px, 1fr) minmax(140px, 1fr) auto; min-width: 0; min-height: 62px; align-items: end; gap: 12px; padding: 8px 14px 10px; border: 0; }
.replay-list-filter-grid.without-result-filter { grid-template-columns: minmax(120px, .85fr) minmax(140px, 1fr) minmax(140px, 1fr) auto; }
.replay-result-filter { display: block; min-width: 0; }
.replay-filter-label, .replay-select-filter > span { display: block; margin-bottom: 4px; color: #657892; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.replay-result-filter .btn-group { display: flex; width: 100%; }
.replay-result-filter .btn { min-width: 0; height: 30px; flex: 1 1 0; padding: 4px 7px; border-color: #cad6e2; color: #45617f; font-size: 12px; font-weight: 700; }
.replay-result-filter .btn.active, .replay-result-filter .btn.active:hover, .replay-result-filter .btn.active:focus { background: var(--account-color-primary) !important; border-color: var(--account-color-primary) !important; box-shadow: none; color: var(--account-color-on-primary) !important; }
.replay-select-filter { display: block; min-width: 0; margin: 0; }
.replay-select-filter .form-control { height: 32px; padding: 5px 28px 5px 10px; border-color: #cad6e2; border-radius: 3px; background: var(--account-color-surface); color: #344b67; font-size: 12px; line-height: 20px; }
.replay-filter-reset { align-self: end; margin: 0 0 2px; padding: 6px 0; color: var(--account-color-primary); font-size: 12px; font-weight: 700; white-space: nowrap; }
.replay-list-panel > .replay-list-scroll.table-responsive { width: 100%; margin: 0; padding: 0; border: 0; }
.replay-list-table { width: 100%; min-width: 760px; margin: 0; table-layout: fixed; }
.replay-list-table > thead { background: var(--account-color-surface-table); }
.replay-list-table > thead > tr > th { padding: 7px 8px; border-bottom: 1px solid var(--account-color-border-contrast); background: var(--account-color-surface-table); color: #5f7087; font-size: 12px; font-weight: 800; vertical-align: middle; }
.replay-list-table > tbody > tr > td { height: 55px; padding: 5px 8px; border-top: 1px solid var(--account-color-border-faint); color: #34475e; font-size: 12px; vertical-align: middle; }
.replay-list-table > tbody > tr:first-child > td { border-top: 0; }
.replay-list-table > tbody > tr:hover > td { background: var(--account-color-surface-subtle); }
.replay-result-column { width: 58px; text-align: center; }
.replay-date-column { width: 126px; }
.replay-map-column { width: 185px; }
.replay-length-column { width: 66px; }
.replay-list-table.has-owner-actions .replay-actions-column { width: 136px; }
.replay-list-table.has-public-actions .replay-actions-column { width: 45px; }
.replay-actions-column { text-align: left; }
.replay-result-cell { text-align: center; }
.replay-result-badge { display: inline-flex; width: 34px; height: 26px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 3px; font-size: 12px; font-weight: 800; }
.replay-result-badge.is-win { background: #e6f4eb; border-color: #b7d8c3; color: #267044; }
.replay-result-badge.is-loss { background: var(--account-color-danger-soft); border-color: #e6bcc2; color: #ae3543; }
.replay-result-badge.is-unknown { background: var(--account-color-surface-inset); border-color: #d6dee7; color: var(--account-color-text-help); }
.replay-date { color: #536985 !important; }
.replay-date strong, .replay-date small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-date strong { color: #385575; font-size: 12px; font-weight: 700; line-height: 1.2; }
.replay-date small { margin-top: 2px; color: var(--account-color-text-help); font-size: 12px; font-weight: 500; line-height: 1.1; }
.replay-map { min-width: 0; }
.replay-map-content { display: flex; min-width: 0; align-items: center; gap: 9px; }
.replay-map strong { color: #243b59; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.replay-map-thumb, .replay-map-placeholder { width: 48px; height: 32px; flex: 0 0 48px; border: 1px solid #ced8e2; border-radius: 3px; object-fit: cover; }
.replay-map-placeholder { display: inline-flex; align-items: center; justify-content: center; background: #e7edf3; color: #8291a3; font-size: 16px; }
.replay-length { color: #536985 !important; font-weight: 700; white-space: nowrap; }
.replay-team-cell { padding-top: 4px !important; padding-bottom: 4px !important; }
.replay-list-player { position: relative; display: flex; min-width: 0; min-height: 42px; align-items: center; gap: 6px; padding-left: 7px; }
.replay-list-player + .replay-list-player { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--account-color-surface-inset); }
.replay-list-player:before { position: absolute; top: 7px; bottom: 7px; left: 0; width: 3px; border-radius: 2px; background: var(--player-color, var(--account-color-text-help)); content: ""; }
.replay-list-player .races { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; float: none; }
.replay-list-player .leagues, .replay-league-placeholder { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; float: none; margin-bottom: 0; }
.replay-player-copy { display: block; min-width: 0; }
.replay-player-name-line { display: flex; min-width: 0; align-items: center; gap: 6px; }
.replay-player-copy a { display: block; min-width: 0; overflow: hidden; color: #1e3654; font-size: 12px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.replay-player-winner { display: inline-flex; min-height: 18px; flex: 0 0 auto; align-items: center; padding: 1px 6px; border: 1px solid #d8bd75; border-radius: 3px; background: #fff8df; color: #806015; font-size: 12px; font-weight: 700; line-height: 1.2; }
.replay-player-copy small { display: block; margin-top: 2px; overflow: hidden; color: var(--account-color-text-help); font-size: 12px; font-weight: 500; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.replay-actions { padding-right: 8px !important; padding-left: 6px !important; text-align: right; white-space: nowrap; }
.replay-action-list { box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; gap: 3px; width: 100%; padding-right: 10px; }
.replay-actions .btn { box-sizing: border-box; width: 27px; height: 28px; flex: 0 0 27px; margin: 0; padding: 4px 2px; border-color: #cdd8e3; border-radius: 3px; color: #355675; line-height: 18px; }
.replay-actions .btn:hover, .replay-actions .btn:focus { background: var(--account-color-primary-soft); border-color: #91b8d8; color: #245f91; }
.replay-actions .replay-training-action { color: #9a6c18; }
.replay-actions .replay-delete-action { color: #7c8999; }
.replay-list-empty { padding: 38px 18px; color: var(--account-color-text-help); text-align: center; }
.replay-list-empty[hidden] { display: none; }
.replay-list-empty .glyphicon { display: block; margin-bottom: 7px; font-size: 20px; }
.replay-list-empty strong, .replay-list-empty > span:last-child { display: block; }
.replay-list-empty strong { color: #34475e; font-size: 13px; }
.replay-list-empty > span:last-child { margin-top: 3px; font-size: 12px; }
@media (max-width: 1199px) {
    .replay-list-filter-grid { width: 100%; }
}

@media (max-width: 991px) {
    .replay-list-page { padding-bottom: 30px; }
    .replay-list-filter-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
    .replay-result-filter { flex: 1 1 160px; }
    .replay-select-filter { flex: 1 1 190px; }
    .replay-filter-reset { margin-left: 0; }
}
@media (max-width: 640px) {
    .replay-list-filter-grid { align-items: stretch; padding: 12px; }
    .replay-result-filter { width: 100%; flex-basis: 100%; }
    .replay-result-filter .btn-group { display: flex; flex: 1 1 auto; }
    .replay-result-filter .btn { flex: 1 1 auto; }
    .replay-select-filter { width: 100%; flex-basis: 100%; }
    .replay-filter-reset { align-self: flex-start; }
}

@media (max-width: 767px) {
    .replay-list-panel { overflow: visible; border: 0 !important; background: transparent; box-shadow: none; }
    .replay-list-filter-grid { border: 0; border-radius: 0; background: var(--account-color-surface); }
    .replay-list-panel > .replay-list-scroll.table-responsive { overflow: visible; border-top: 0; }
    .replay-list-table { display: block; min-width: 0; background: transparent; table-layout: auto; }
    .replay-list-table > thead { display: none; }
    .replay-list-table > tbody { display: block; padding: 9px 0 0; }
    .replay-list-table > tbody > tr { display: grid; overflow: hidden; grid-template-columns: 52px minmax(0, 1fr) 74px; grid-template-areas: "result date length" "map map map" "team-one team-one team-one" "team-two team-two team-two" "actions actions actions"; margin: 0 8px 9px; border: 1px solid var(--account-color-border-contrast); border-radius: 3px; background: var(--account-color-surface); }
    .replay-list-table.without-result-column > tbody > tr { grid-template-columns: minmax(0, 1fr) 74px; grid-template-areas: "date length" "map map" "team-one team-one" "team-two team-two" "actions actions"; }
    .replay-list-table > tbody > tr > td { display: block; height: auto; min-width: 0; border-top: 0; }
    .replay-list-table > tbody > tr:first-child > td { border-top: 0; }
    .replay-list-table > tbody > tr:hover > td { background: inherit; }
    .replay-result-cell { display: flex !important; grid-area: result; align-items: center; justify-content: center; padding: 8px 4px !important; background: var(--account-color-surface-hover); }
    .replay-date { grid-area: date; padding: 8px 7px !important; background: var(--account-color-surface-hover); }
    .replay-date strong, .replay-date small { overflow: visible; text-overflow: clip; white-space: normal; }
    .replay-length { grid-area: length; padding: 7px 8px !important; background: var(--account-color-surface-hover); text-align: right; }
    .replay-length:before { display: block; margin-bottom: 1px; color: #8291a3; content: "Length"; font-size: 12px; font-weight: 600; line-height: 1; }
    .replay-map { grid-area: map; padding: 8px 10px !important; border-top: 1px solid var(--account-color-border-faint) !important; }
    .replay-team-cell { position: relative; padding: 25px 10px 7px !important; border-top: 1px solid var(--account-color-border-faint) !important; }
    .replay-team-cell:before { position: absolute; top: 7px; left: 10px; color: #74849a; font-size: 12px; font-weight: 800; line-height: 1; }
    .replay-team-1 { grid-area: team-one; }
    .replay-team-1:before { content: "Team 1"; }
    .replay-team-2 { grid-area: team-two; }
    .replay-team-2:before { content: "Team 2"; }
    .replay-list-player { min-height: 36px; }
    .replay-list-player:before { top: 5px; bottom: 5px; }
    .replay-player-copy a, .replay-player-copy small { overflow: visible; text-overflow: clip; white-space: normal; }
    .replay-actions { grid-area: actions; padding: 7px 8px !important; border-top: 1px solid var(--account-color-border-faint) !important; background: var(--account-color-surface-hover); }
    .replay-action-list { justify-content: flex-end; padding-right: 0; }
}

.public-player-page { padding-top: 22px; }
.public-player-page > .panel-card { margin-bottom: 16px; }
.public-player-hero { display: flex; min-height: 152px; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 28px; border-top: 3px solid #263b55; }
.public-player-heading { min-width: 0; }
.public-player-home-link { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; color: var(--account-color-primary); font-size: 12px; font-weight: 700; }
.public-player-home-link:hover, .public-player-home-link:focus { color: var(--account-color-heading-secondary); text-decoration: none; }
.public-player-label, .public-player-search-label { display: block; margin-bottom: 4px; color: #71839a; font-size: 12px; font-weight: 700; }
.public-player-heading h1 { margin: 0; color: var(--account-color-heading); font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif; font-size: 30px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.public-player-heading > p { margin: 7px 0 0; color: #6c7f95; font-size: 13px; line-height: 1.45; }
.public-player-count { min-width: 165px; padding: 17px 20px; border-left: 3px solid var(--account-color-primary); background: var(--account-color-primary-soft); text-align: right; }
.public-player-count strong, .public-player-count span { display: block; }
.public-player-count strong { color: var(--account-color-heading-secondary); font-size: 30px; line-height: 1; }
.public-player-count span { margin-top: 5px; color: #60758d; font-size: 12px; font-weight: 700; }
.public-player-identities { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: hidden; }
.public-player-identity { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 70px; padding: 13px 16px; border-right: 1px solid var(--account-color-divider-soft); border-bottom: 1px solid var(--account-color-divider-soft); }
.public-player-identity-icon { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--account-color-primary); background: var(--account-color-primary-soft); font-size: 16px; }
.public-player-identity h2 { margin: 0; color: var(--account-color-heading-secondary); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.public-player-identity p { margin: 3px 0 0; color: #71839a; font-size: 12px; line-height: 1.35; }
.public-player-identity.is-private { background: var(--account-color-surface-subtle); }
.public-player-identity.is-private .public-player-identity-icon { color: var(--account-color-text-help); background: #e8edf2; }
.public-player-notice { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 16px; padding: 11px 13px; border: 1px solid var(--account-color-border); border-left: 3px solid #7e8fa2; border-radius: 3px; color: #536980; background: var(--account-color-surface-subtle); font-size: 12px; line-height: 1.45; }
.public-player-notice .fa { margin-top: 2px; color: #6c7f95; }
.public-player-private { display: flex; min-height: 180px; align-items: center; gap: 16px; padding: 28px; }
.public-player-private > .fa { display: flex; width: 52px; height: 52px; flex: 0 0 52px; align-items: center; justify-content: center; border-radius: 50%; color: #71839a; background: var(--account-color-surface-inset); font-size: 20px; }
.public-player-private h2 { margin: 0 0 5px; color: var(--account-color-heading-secondary); font-size: 18px; font-weight: 700; }
.public-player-private p { margin: 0; color: #687b91; font-size: 12px; line-height: 1.5; }
.public-player-search-callout { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 17px 19px; border-left: 3px solid var(--account-color-primary); background: #f8fbfd; }
.public-player-search-icon { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--account-color-primary); background: #e7f1f8; font-size: 18px; }
.public-player-search-copy h2 { margin: 0; color: var(--account-color-heading-secondary); font-size: 17px; font-weight: 700; line-height: 1.3; }
.public-player-search-copy p { max-width: 820px; margin: 4px 0 0; color: #687b91; font-size: 12px; line-height: 1.5; }
.public-player-search-actions { display: flex; min-width: 155px; align-items: center; flex-direction: column; gap: 7px; }
.public-player-search-actions .btn { width: 100%; min-height: 36px; border-radius: 3px; font-size: 12px; font-weight: 700; }
.public-player-elite-link { color: var(--account-color-primary); font-size: 12px; font-weight: 700; }
.public-player-elite-link:hover, .public-player-elite-link:focus { color: var(--account-color-heading-secondary); text-decoration: none; }
.public-player-replays > .replay-list-page { padding-top: 0; }

@media (max-width: 760px) {
    .public-player-hero { align-items: flex-start; flex-direction: column; padding: 20px; }
    .public-player-count { width: 100%; min-width: 0; text-align: left; }
    .public-player-search-callout { grid-template-columns: 40px minmax(0, 1fr); }
    .public-player-search-icon { width: 40px; height: 40px; }
    .public-player-search-actions { grid-column: 1 / -1; width: 100%; align-items: stretch; }
}

@media (max-width: 520px) {
    .public-player-page { padding-top: 12px; }
    .public-player-hero { padding: 17px; }
    .public-player-heading h1 { font-size: 25px; }
    .public-player-identities { grid-template-columns: 1fr; }
    .public-player-identity { border-right: 0; }
    .public-player-search-callout { grid-template-columns: 1fr; padding: 16px; }
    .public-player-search-actions { grid-column: auto; }
    .public-player-private { align-items: flex-start; padding: 21px 17px; }
}

/* Dark theme compatibility -------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .account-filter-toolbar .form-control,
html[data-theme="dark"] .page-wrap .form-control {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-control[disabled] {
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-muted);
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--account-color-text-faint);
}

html[data-theme="dark"] select.form-control option {
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

/* Sign in and sign up: dark theme ------------------------------- */
html[data-theme="dark"] .account-auth-page .panel-card {
    border-color: var(--account-color-border-contrast);
}

html[data-theme="dark"] .account-auth-page .account-panel-accent {
    border-top-color: var(--account-color-primary);
}

html[data-theme="dark"] .account-auth-page .account-section-heading,
html[data-theme="dark"] .account-auth-page .account-form-actions,
html[data-theme="dark"] .account-auth-page .account-panel-footer {
    border-color: var(--account-color-divider);
}

html[data-theme="dark"] .account-auth-page .account-form-field > label,
html[data-theme="dark"] .account-auth-page .signup-consent strong,
html[data-theme="dark"] .account-auth-page .account-benefit h3 {
    color: var(--account-color-heading-secondary);
}

html[data-theme="dark"] .account-auth-page .account-form-help,
html[data-theme="dark"] .account-auth-page .signup-consent,
html[data-theme="dark"] .account-auth-page .signup-consent small,
html[data-theme="dark"] .account-auth-page .account-form-actions span,
html[data-theme="dark"] .account-auth-page .signin-remember,
html[data-theme="dark"] .account-auth-page .signin-recovery-intro,
html[data-theme="dark"] .account-auth-page .account-benefit p,
html[data-theme="dark"] .account-auth-page .account-panel-footer {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .account-auth-page .account-form-body .form-control,
html[data-theme="dark"] .account-auth-page .account-inline-control .form-control {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .account-auth-page .account-form-body .form-control:focus,
html[data-theme="dark"] .account-auth-page .account-inline-control .form-control:focus {
    border-color: var(--account-color-focus);
    box-shadow: 0 0 0 2px var(--account-color-focus-ring);
}

html[data-theme="dark"] .account-auth-page .signup-consent {
    border-color: var(--account-color-border);
    background: var(--account-color-surface-subtle);
}

html[data-theme="dark"] .account-auth-page .signup-consent:hover {
    border-color: var(--account-color-border-contrast);
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .account-auth-page .signup-consent:focus-within {
    border-color: var(--account-color-focus);
    box-shadow: 0 0 0 2px var(--account-color-focus-ring);
}

html[data-theme="dark"] .account-auth-page .signup-consent input,
html[data-theme="dark"] .account-auth-page .signin-remember input {
    accent-color: var(--account-color-primary);
}

html[data-theme="dark"] .account-auth-page .account-panel-footer a,
html[data-theme="dark"] .account-auth-page .account-form-actions a {
    color: var(--account-color-primary-alt);
}

html[data-theme="dark"] .account-auth-page .account-panel-footer a:hover,
html[data-theme="dark"] .account-auth-page .account-panel-footer a:focus,
html[data-theme="dark"] .account-auth-page .account-form-actions a:hover,
html[data-theme="dark"] .account-auth-page .account-form-actions a:focus {
    color: var(--account-color-primary-hover);
}

html[data-theme="dark"] .account-auth-page .account-notice-success strong {
    color: var(--account-color-success-text);
}

html[data-theme="dark"] .btn-default {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text);
    background: var(--account-color-surface-muted);
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus {
    border-color: var(--account-color-focus);
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle .filter-option,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle .filter-option-inner,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    color: inherit !important;
    background: transparent !important;
}

html[data-theme="dark"] .bootstrap-select > .btn:hover,
html[data-theme="dark"] .bootstrap-select > .btn:focus,
html[data-theme="dark"] .bootstrap-select > .btn:active,
html[data-theme="dark"] .bootstrap-select > .btn.active,
html[data-theme="dark"] .bootstrap-select.open > .btn.dropdown-toggle {
    color: var(--account-color-heading) !important;
}

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-transparent {
    color: var(--account-color-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-default {
    color: var(--account-color-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-primary,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-primary:hover,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-primary:focus,
html[data-theme="dark"] .bootstrap-select.open > .dropdown-toggle.btn-primary {
    color: var(--account-color-on-primary) !important;
}

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-transparent:hover,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-transparent:focus,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-default:hover,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-default:focus,
html[data-theme="dark"] .bootstrap-select.open > .dropdown-toggle.btn-transparent,
html[data-theme="dark"] .bootstrap-select.open > .dropdown-toggle.btn-default {
    color: var(--account-color-heading) !important;
    background: var(--account-color-surface-hover) !important;
}

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-transparent:hover .filter-option,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-transparent:focus .filter-option,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-default:hover .filter-option,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-default:focus .filter-option,
html[data-theme="dark"] .bootstrap-select.open > .dropdown-toggle.btn-transparent .filter-option,
html[data-theme="dark"] .bootstrap-select.open > .dropdown-toggle.btn-default .filter-option {
    color: var(--account-color-heading) !important;
}

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-primary:hover .filter-option,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-primary:focus .filter-option,
html[data-theme="dark"] .bootstrap-select.open > .dropdown-toggle.btn-primary .filter-option {
    color: var(--account-color-on-primary) !important;
}

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle .caret {
    border-top-color: var(--account-color-text-muted);
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu,
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner {
    border-color: var(--account-color-border);
    color: var(--account-color-text);
    background: var(--account-color-surface-raised);
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a {
    color: var(--account-color-text) !important;
    background: transparent !important;
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a > span.text {
    color: inherit !important;
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a:hover,
html[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a:focus,
html[data-theme="dark"] .bootstrap-select .dropdown-menu > li.active > a {
    color: var(--account-color-heading) !important;
    background: var(--account-color-surface-hover) !important;
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu > li.disabled > a,
html[data-theme="dark"] .bootstrap-select .dropdown-menu > li.disabled > a:hover {
    color: var(--account-color-text-faint) !important;
    background: transparent !important;
}

html[data-theme="dark"] .account-filter-toolbar .btn-multiselect,
html[data-theme="dark"] .account-filter-toolbar .btn-multiselect.btn-default,
html[data-theme="dark"] .account-filter-toolbar .btn-group.open > .btn-multiselect.dropdown-toggle {
    border-color: var(--account-color-control-border) !important;
    color: var(--account-color-text) !important;
    background: var(--account-color-surface-inset) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .account-filter-toolbar .btn-multiselect:hover,
html[data-theme="dark"] .account-filter-toolbar .btn-multiselect:focus,
html[data-theme="dark"] .account-filter-toolbar .btn-group.open > .btn-multiselect.dropdown-toggle {
    border-color: var(--account-color-focus) !important;
    color: var(--account-color-heading) !important;
}

html[data-theme="dark"] .account-filter-toolbar .btn-multiselect .caret {
    border-top-color: var(--account-color-text-muted);
}

html[data-theme="dark"] .account-filter-toolbar .multiselect-container > li > a,
html[data-theme="dark"] .account-filter-toolbar .multiselect-container > li > a > label {
    color: var(--account-color-text);
}

html[data-theme="dark"] .table {
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .table > thead > tr > th {
    border-color: var(--account-color-border);
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-table);
}

html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td {
    border-color: var(--account-color-divider);
    color: var(--account-color-text);
    background-color: transparent;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: var(--account-color-surface-subtle);
}

html[data-theme="dark"] .opponents-stat-table > tbody > tr:hover > td,
html[data-theme="dark"] .opponents-stat-table > tbody > tr:hover > .opponent-name-cell {
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover) !important;
}

html[data-theme="dark"] .account-sidebar-panel,
html[data-theme="dark"] .account-stats-overview {
    border-top-color: #55718d !important;
}

html[data-theme="dark"] .account-sidebar-heading {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .account-sidebar .account-nav-list > li > a {
    color: var(--account-color-text-navigation);
}

html[data-theme="dark"] .account-sidebar .account-nav-list > li > a > .fa {
    color: var(--account-color-text-subtle);
}

html[data-theme="dark"] .account-sidebar .account-nav-list > li.active > a > .fa {
    color: var(--account-color-primary);
}

html[data-theme="dark"] .account-stat-table > thead > tr > th {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .account-stat-table > tbody > tr > td,
html[data-theme="dark"] .account-stat-table > tfoot > tr > th {
    border-color: var(--account-color-divider);
}

html[data-theme="dark"] .replay-map strong,
html[data-theme="dark"] .replay-player-copy a,
html[data-theme="dark"] .replay-list-empty strong {
    color: var(--account-color-heading);
}

html[data-theme="dark"] .replay-filter-label,
html[data-theme="dark"] .replay-select-filter > span,
html[data-theme="dark"] .replay-date,
html[data-theme="dark"] .replay-date strong,
html[data-theme="dark"] .replay-length {
    color: var(--account-color-text-muted) !important;
}

html[data-theme="dark"] .replay-list-count strong {
    color: var(--account-color-primary-alt);
}

html[data-theme="dark"] .replay-date small,
html[data-theme="dark"] .replay-player-copy small {
    color: var(--account-color-text-subtle);
}

html[data-theme="dark"] .replay-list-filter-grid {
    border-color: var(--account-color-divider);
}

html[data-theme="dark"] .replay-result-filter .btn {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .replay-result-filter .btn:hover,
html[data-theme="dark"] .replay-result-filter .btn:focus {
    border-color: var(--account-color-focus);
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .replay-list-table > thead > tr > th {
    border-color: var(--account-color-border-contrast);
    color: var(--account-color-text);
    background: var(--account-color-surface-table);
}

html[data-theme="dark"] .replay-list-table > tbody > tr > td {
    border-color: var(--account-color-divider);
    color: var(--account-color-text);
}

html[data-theme="dark"] .replay-list-table > tbody > tr:hover > td {
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .training-replay-table {
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .training-replay-table > thead > tr > th {
    border-color: var(--account-color-border-contrast);
    color: var(--account-color-text);
    background: var(--account-color-surface-table);
}

html[data-theme="dark"] .training-replay-table > tbody > tr > td {
    border-color: var(--account-color-divider);
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .training-replay-table > tbody > tr:hover > td {
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .training-replay-table td strong,
html[data-theme="dark"] .training-replay-date strong,
html[data-theme="dark"] .training-replay-map-content strong,
html[data-theme="dark"] .training-opponent-copy > a,
html[data-theme="dark"] .training-opponent-copy > strong {
    color: var(--account-color-heading);
}

html[data-theme="dark"] .training-replay-date small,
html[data-theme="dark"] .training-opponent-copy > small {
    color: var(--account-color-text-subtle);
}

html[data-theme="dark"] .training-replay-map-thumb,
html[data-theme="dark"] .training-replay-map-placeholder {
    border-color: var(--account-color-control-border);
}

html[data-theme="dark"] .training-replay-map-placeholder {
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-muted);
}

html[data-theme="dark"] .training-suggestion-count {
    color: var(--account-color-primary-alt);
    background: var(--account-color-primary-soft);
}

html[data-theme="dark"] .training-table-action .btn {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .training-table-action .btn:hover,
html[data-theme="dark"] .training-table-action .btn:focus {
    border-color: var(--account-color-focus);
    color: var(--account-color-heading);
    background: var(--account-color-primary-soft);
}

html[data-theme="dark"] .training-primary-tabs,
html[data-theme="dark"] .training-progress-tabs {
    border-color: var(--account-color-border-contrast);
    background: var(--account-color-surface-table);
}

html[data-theme="dark"] .training-primary-tabs > li > a,
html[data-theme="dark"] .training-progress-tabs > li > a {
    border-color: var(--account-color-border-contrast) !important;
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .training-primary-tabs > li > a:hover,
html[data-theme="dark"] .training-primary-tabs > li > a:focus,
html[data-theme="dark"] .training-progress-tabs > li > a:hover,
html[data-theme="dark"] .training-progress-tabs > li > a:focus {
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .training-primary-tabs > li.active > a,
html[data-theme="dark"] .training-primary-tabs > li.active > a:hover,
html[data-theme="dark"] .training-primary-tabs > li.active > a:focus,
html[data-theme="dark"] .training-progress-tabs > li.active > a,
html[data-theme="dark"] .training-progress-tabs > li.active > a:hover,
html[data-theme="dark"] .training-progress-tabs > li.active > a:focus {
    color: var(--account-color-heading);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .training-tab-count,
html[data-theme="dark"] .training-primary-tabs > li.active .training-tab-count {
    color: var(--account-color-primary-alt);
    background: var(--account-color-primary-soft);
}

html[data-theme="dark"] .training-focus-card {
    border-color: var(--account-color-border-contrast);
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .training-focus-card > header,
html[data-theme="dark"] .training-progress-matchup > h3 {
    border-color: var(--account-color-border-contrast);
    background: var(--account-color-surface-table);
}

html[data-theme="dark"] .training-focus-card > header span,
html[data-theme="dark"] .training-progress-matchup > h3 {
    color: var(--account-color-heading);
}

html[data-theme="dark"] .training-focus-card > header strong,
html[data-theme="dark"] .training-progress-tabs > li > a > span {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .training-focus-card ol > li {
    border-color: var(--account-color-divider);
    color: var(--account-color-text);
}

html[data-theme="dark"] .training-detail-link {
    color: var(--account-color-primary-alt);
}

html[data-theme="dark"] .training-detail-link:hover,
html[data-theme="dark"] .training-detail-link:focus {
    color: var(--account-color-primary-hover);
}

html[data-theme="dark"] .training-progress-content {
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .training-progress-matchup {
    border-color: var(--account-color-border-contrast);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .training-progress-matchup .table > thead > tr > th {
    border-color: var(--account-color-border-contrast);
    color: var(--account-color-text);
    background: var(--account-color-surface-table);
}

html[data-theme="dark"] .training-progress-matchup .table > tbody > tr > td {
    border-color: var(--account-color-divider);
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .training-progress-matchup .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: var(--account-color-surface-subtle);
}

html[data-theme="dark"] .training-progress-matchup .text-danger {
    color: var(--account-color-danger-text) !important;
}

html[data-theme="dark"] .training-progress-content .alert-info {
    border-color: var(--account-color-border-contrast);
    color: var(--account-color-text);
    background: var(--account-color-primary-soft);
}

html[data-theme="dark"] .training-empty-state,
html[data-theme="dark"] .account-empty-state.training-empty-state,
html[data-theme="dark"] .account-empty-state.training-empty-state .fa {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .account-empty-state.training-empty-state strong {
    color: var(--account-color-heading);
}

html[data-theme="dark"] .training-center-page .modal-title {
    color: var(--account-color-heading);
}

html[data-theme="dark"] .training-center-page .modal-body {
    color: var(--account-color-text);
}

html[data-theme="dark"] .replay-map-thumb,
html[data-theme="dark"] .replay-map-placeholder {
    border-color: var(--account-color-control-border);
}

html[data-theme="dark"] .replay-map-placeholder {
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-muted);
}

html[data-theme="dark"] .replay-list-player + .replay-list-player {
    border-color: var(--account-color-divider-soft);
}

html[data-theme="dark"] .replay-player-winner {
    border-color: #826e3b;
    color: #f2d57b;
    background: #3a321f;
}

html[data-theme="dark"] .replay-actions .btn {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .replay-actions .btn:hover,
html[data-theme="dark"] .replay-actions .btn:focus {
    border-color: var(--account-color-focus);
    color: var(--account-color-heading);
    background: var(--account-color-primary-soft);
}

html[data-theme="dark"] .replay-actions .replay-training-action {
    color: var(--account-color-warning);
}

html[data-theme="dark"] .replay-actions .replay-delete-action {
    color: var(--account-color-danger-text);
}

html[data-theme="dark"] .account-sidebar .account-nav-list > li > a:hover,
html[data-theme="dark"] .account-sidebar .account-nav-list > li > a:focus,
html[data-theme="dark"] .settings-navigation,
html[data-theme="dark"] .settings-metric-group > summary,
html[data-theme="dark"] .settings-reference-block,
html[data-theme="dark"] .settings-locked-feature,
html[data-theme="dark"] .public-player-search-callout,
html[data-theme="dark"] .unit-kill-detail > td {
    border-color: var(--account-color-divider);
    color: var(--account-color-text);
    background: var(--account-color-surface-subtle);
}

html[data-theme="dark"] .account-sidebar .account-nav-list > li.active > a,
html[data-theme="dark"] .settings-nav > li > a:hover,
html[data-theme="dark"] .settings-nav > li > a:focus,
html[data-theme="dark"] .settings-nav > li.active > a,
html[data-theme="dark"] .settings-nav > li.active > a:hover,
html[data-theme="dark"] .settings-nav > li.active > a:focus {
    color: var(--account-color-heading-secondary);
    background: var(--account-color-primary-soft);
}

html[data-theme="dark"] .training-result.is-win,
html[data-theme="dark"] .account-unit-trade-value.is-positive,
html[data-theme="dark"] .unit-trade-value.is-positive,
html[data-theme="dark"] .replay-result-badge.is-win,
html[data-theme="dark"] .btn-result.is-revealed {
    border-color: var(--account-color-success-border);
    color: var(--account-color-success-text);
    background: var(--account-color-success-surface);
}

html[data-theme="dark"] .training-result.is-loss,
html[data-theme="dark"] .account-unit-trade-value.is-negative,
html[data-theme="dark"] .unit-trade-value.is-negative,
html[data-theme="dark"] .replay-result-badge.is-loss,
html[data-theme="dark"] .account-status-panel-error > .account-section-heading {
    border-color: var(--account-color-danger-border);
    color: var(--account-color-danger-text);
    background: var(--account-color-danger-surface);
}

html[data-theme="dark"] .account-unit-trade-value.is-neutral {
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-muted);
}

html[data-theme="dark"] .build-row:hover,
html[data-theme="dark"] .chat-row:hover > td,
html[data-theme="dark"] .replay-search-result:hover {
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .build-row.is-current,
html[data-theme="dark"] .weeks-stat-table > tbody > tr.is-latest > td,
html[data-theme="dark"] .weeks-stat-table > tbody > tr.is-latest > .week-range-cell {
    background: var(--account-color-primary-soft);
}

html[data-theme="dark"] .highcharts-background {
    fill: var(--account-color-surface) !important;
}

html[data-theme="dark"] .highcharts-grid-line,
html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick {
    stroke: var(--account-color-border) !important;
}

html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-axis-title,
html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-subtitle {
    fill: var(--account-color-text-muted) !important;
    color: var(--account-color-text-muted) !important;
}

/* Replay search: dark theme ------------------------------------ */
html[data-theme="dark"] .replay-search-page {
    color: var(--account-color-text);
}

html[data-theme="dark"] .account-feature-page.replay-search-page .panel-card {
    border-color: var(--account-color-border-contrast);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .account-section-heading.replay-search-section-heading,
html[data-theme="dark"] .account-section-heading.replay-search-results-heading {
    border-color: var(--account-color-divider);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .account-section-heading.replay-search-section-heading h1,
html[data-theme="dark"] .account-section-heading.replay-search-results-heading h2,
html[data-theme="dark"] .replay-search-advanced h2 {
    color: var(--account-color-heading);
}

html[data-theme="dark"] .account-section-heading.replay-search-section-heading p,
html[data-theme="dark"] .account-section-heading.replay-search-results-heading p,
html[data-theme="dark"] .replay-search-form label {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .account-form-body.replay-search-form {
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .account-form-body.replay-search-form .form-control {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .account-form-body.replay-search-form .form-control:hover {
    border-color: var(--account-color-border-contrast);
}

html[data-theme="dark"] .account-form-body.replay-search-form .form-control:focus {
    border-color: var(--account-color-focus);
    box-shadow: 0 0 0 2px var(--account-color-focus-ring);
}

html[data-theme="dark"] .account-form-body.replay-search-form .form-control::placeholder {
    color: var(--account-color-text-faint);
}

html[data-theme="dark"] .account-form-body.replay-search-form select.form-control option {
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .replay-search-advanced {
    border-color: var(--account-color-divider);
    background: var(--account-color-surface-subtle);
}

html[data-theme="dark"] .replay-search-pager .btn {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text);
    background: var(--account-color-surface-muted);
}

html[data-theme="dark"] .replay-search-pager .btn:hover,
html[data-theme="dark"] .replay-search-pager .btn:focus {
    border-color: var(--account-color-focus);
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .replay-search-column-headings {
    border-color: var(--account-color-border);
    color: var(--account-color-heading-secondary);
    background: var(--account-color-surface-table);
}

html[data-theme="dark"] .replay-search-result-list {
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .replay-search-result {
    border-color: var(--account-color-divider);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .replay-search-result:hover {
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .replay-search-map img {
    border-color: var(--account-color-border-contrast);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .replay-search-map-copy strong,
html[data-theme="dark"] .replay-search-player-copy strong,
html[data-theme="dark"] .replay-search-length strong {
    color: var(--account-color-heading);
}

html[data-theme="dark"] .replay-search-map-copy span,
html[data-theme="dark"] .replay-search-player-copy small,
html[data-theme="dark"] .replay-search-length small,
html[data-theme="dark"] .replay-search-mobile-label {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .replay-search-team-winner {
    color: var(--account-color-warning);
}

html[data-theme="dark"] .replay-search-player + .replay-search-player {
    border-color: var(--account-color-divider-soft);
}

html[data-theme="dark"] .replay-search-match-actions {
    border-color: var(--account-color-divider-soft);
}

html[data-theme="dark"] .replay-search-units,
html[data-theme="dark"] .replay-search-units > summary {
    border-color: var(--account-color-divider-soft);
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .replay-search-units > summary:hover {
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .replay-search-units > summary small {
    color: var(--account-color-text-faint);
}

html[data-theme="dark"] .replay-search-unit-list {
    border-color: var(--account-color-divider-soft);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .replay-search-unit-icon {
    border-color: var(--account-color-control-border);
    background: var(--account-color-contrast);
}

html[data-theme="dark"] .account-empty-state.replay-search-empty {
    color: var(--account-color-text-muted);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .account-empty-state.replay-search-empty .glyphicon {
    color: var(--account-color-text-faint);
}

html[data-theme="dark"] .account-empty-state.replay-search-empty strong {
    color: var(--account-color-heading-secondary);
}

html[data-theme="dark"] .ui-autocomplete {
    border-color: var(--account-color-border);
    color: var(--account-color-text);
    background: var(--account-color-surface-raised);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .ui-autocomplete .ui-menu-item > a.ui-corner-all {
    color: var(--account-color-text);
    background: transparent;
}

html[data-theme="dark"] .ui-autocomplete .ui-menu-item > a.ui-state-hover,
html[data-theme="dark"] .ui-autocomplete .ui-menu-item > a.ui-state-active,
html[data-theme="dark"] .ui-autocomplete .ui-menu-item > a:hover,
html[data-theme="dark"] .ui-autocomplete .ui-menu-item > a:focus {
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover);
}

/* Replay review pages: dark theme ------------------------------- */
html[data-theme="dark"] .overview-page,
html[data-theme="dark"] .economy-page,
html[data-theme="dark"] .units-page,
html[data-theme="dark"] .build-orders-page,
html[data-theme="dark"] .chat-page {
    color: var(--account-color-text);
}

html[data-theme="dark"] .page-wrap .panel-card:not(.match-head),
html[data-theme="dark"] .page-wrap .team-card,
html[data-theme="dark"] .page-wrap .inventory-card,
html[data-theme="dark"] .page-wrap .team-economy,
html[data-theme="dark"] .page-wrap .hero-team-card,
html[data-theme="dark"] .page-wrap .hero-unit-card,
html[data-theme="dark"] .page-wrap .units-team-card,
html[data-theme="dark"] .page-wrap .unit-player-panel,
html[data-theme="dark"] .page-wrap .build-team-shell,
html[data-theme="dark"] .page-wrap .build-roster-player,
html[data-theme="dark"] .page-wrap .build-team-feed {
    border-color: var(--account-color-border-contrast);
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .page-wrap .match-head {
    border-color: var(--account-color-border-contrast);
    color: var(--account-color-on-primary);
}

.match-head .header-player-name {
    color: var(--account-color-on-primary);
    text-shadow:
        -1px -1px 0 var(--player-color, var(--account-color-primary)),
         1px -1px 0 var(--player-color, var(--account-color-primary)),
        -1px  1px 0 var(--player-color, var(--account-color-primary)),
         1px  1px 0 var(--player-color, var(--account-color-primary)),
         0 0 6px var(--player-color, var(--account-color-primary));
}

html[data-theme="dark"] .page-wrap .team-card.team-red,
html[data-theme="dark"] .page-wrap .team-economy.red {
    border-top-color: var(--team-1-color, var(--account-color-danger-emphasis));
}

html[data-theme="dark"] .page-wrap .team-card.team-blue,
html[data-theme="dark"] .page-wrap .team-economy.blue {
    border-top-color: var(--team-2-color, var(--account-color-primary));
}

html[data-theme="dark"] .page-wrap .inventory-card {
    border-top-color: var(--player-color, var(--account-color-text-help));
}

html[data-theme="dark"] .page-wrap .hero-unit-card,
html[data-theme="dark"] .page-wrap .unit-player-panel {
    border-left-color: var(--player-color, var(--account-color-text-help));
}

html[data-theme="dark"] .page-wrap .units-team-card.team-1,
html[data-theme="dark"] .page-wrap .build-team-shell:not(.team-2) {
    border-top-color: var(--team-1-color, var(--account-color-danger-emphasis));
}

html[data-theme="dark"] .page-wrap .units-team-card.team-2,
html[data-theme="dark"] .page-wrap .build-team-shell.team-2 {
    border-top-color: var(--team-2-color, var(--account-color-primary));
}

html[data-theme="dark"] .page-wrap .section-head,
html[data-theme="dark"] .page-wrap .overview-section-toolbar,
html[data-theme="dark"] .page-wrap .inventory-toolbar,
html[data-theme="dark"] .page-wrap .hero-team-heading,
html[data-theme="dark"] .page-wrap .units-team-heading,
html[data-theme="dark"] .page-wrap .unit-player-summary-heading,
html[data-theme="dark"] .page-wrap .build-column-head {
    border-color: var(--account-color-divider-contrast);
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-table);
}

html[data-theme="dark"] .page-wrap .section-title,
html[data-theme="dark"] .page-wrap .inventory-player-name,
html[data-theme="dark"] .page-wrap .hero-team-heading,
html[data-theme="dark"] .page-wrap .unit-player-identity strong,
html[data-theme="dark"] .page-wrap .unit-player-summary-heading strong,
html[data-theme="dark"] .page-wrap .build-player-supply strong,
html[data-theme="dark"] .page-wrap .build-action-name,
html[data-theme="dark"] .page-wrap .chat-empty strong,
html[data-theme="dark"] .page-wrap .units-empty strong {
    color: var(--account-color-heading);
}

html[data-theme="dark"] .page-wrap .section-sub,
html[data-theme="dark"] .page-wrap .player-sub,
html[data-theme="dark"] .page-wrap .player-meta,
html[data-theme="dark"] .page-wrap .inventory-title .race,
html[data-theme="dark"] .page-wrap .inventory-label,
html[data-theme="dark"] .page-wrap .inventory-empty,
html[data-theme="dark"] .page-wrap .unit-stats-team-label,
html[data-theme="dark"] .page-wrap .hero-kill-label,
html[data-theme="dark"] .page-wrap .hero-empty,
html[data-theme="dark"] .page-wrap .snapshot-cell small,
html[data-theme="dark"] .page-wrap .build-snapshot-cell small,
html[data-theme="dark"] .page-wrap .economy-sq-label,
html[data-theme="dark"] .page-wrap .unit-player-identity small,
html[data-theme="dark"] .page-wrap .unit-hero-copy small,
html[data-theme="dark"] .page-wrap .unit-hero-copy > span,
html[data-theme="dark"] .page-wrap .unit-top-killer small,
html[data-theme="dark"] .page-wrap .unit-player-summary-heading span,
html[data-theme="dark"] .page-wrap .unit-player-summary > span small,
html[data-theme="dark"] .page-wrap .unit-kill-caption,
html[data-theme="dark"] .page-wrap .units-empty,
html[data-theme="dark"] .page-wrap .build-action-player,
html[data-theme="dark"] .page-wrap .build-empty,
html[data-theme="dark"] .page-wrap .build-legend,
html[data-theme="dark"] .page-wrap .chat-result-count,
html[data-theme="dark"] .page-wrap .chat-empty {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .replay-tabs {
    border-color: var(--account-color-border-contrast);
    background: var(--account-color-surface-raised);
}

html[data-theme="dark"] .replay-tabs > li > a {
    color: var(--account-color-text-muted);
    background: transparent !important;
}

html[data-theme="dark"] .replay-tabs > li > a:hover,
html[data-theme="dark"] .replay-tabs > li > a:focus {
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover) !important;
}

html[data-theme="dark"] .replay-tabs > li.active > a,
html[data-theme="dark"] .replay-tabs > li.active > a:hover,
html[data-theme="dark"] .replay-tabs > li.active > a:focus {
    border-bottom-color: var(--account-color-danger-emphasis) !important;
    color: var(--account-color-heading) !important;
    background: var(--account-color-surface) !important;
}

html[data-theme="dark"] .match-head .btn-download:hover,
html[data-theme="dark"] .match-head .btn-download:focus,
html[data-theme="dark"] .match-head .btn-viewer:hover,
html[data-theme="dark"] .match-head .btn-viewer:focus {
    border-color: var(--account-color-primary-alt);
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .metric-switch .btn,
html[data-theme="dark"] .inventory-toolbar .btn {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .metric-switch .btn:hover,
html[data-theme="dark"] .metric-switch .btn:focus,
html[data-theme="dark"] .inventory-toolbar .btn:hover,
html[data-theme="dark"] .inventory-toolbar .btn:focus {
    border-color: var(--account-color-focus);
    color: var(--account-color-heading);
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .metric-switch .btn.active,
html[data-theme="dark"] .metric-switch .btn.active:hover,
html[data-theme="dark"] .metric-switch .btn.active:focus,
html[data-theme="dark"] .inventory-toolbar .btn.active,
html[data-theme="dark"] .inventory-toolbar .btn.active:hover,
html[data-theme="dark"] .inventory-toolbar .btn.active:focus {
    border-color: var(--account-color-primary) !important;
    color: var(--account-color-on-primary) !important;
    background: var(--account-color-primary) !important;
}

html[data-theme="dark"] .timeline-section {
    border-top-color: var(--account-color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] .snapshot-bar,
html[data-theme="dark"] .snapshot-cell,
html[data-theme="dark"] .build-snapshot,
html[data-theme="dark"] .build-snapshot-cell {
    border-color: var(--account-color-divider);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .snapshot-cell strong,
html[data-theme="dark"] .build-snapshot-cell strong,
html[data-theme="dark"] .stat strong,
html[data-theme="dark"] .inventory-supply-value,
html[data-theme="dark"] .hero-kill-total,
html[data-theme="dark"] .overall-sq,
html[data-theme="dark"] .overall-sq strong,
html[data-theme="dark"] .unit-player-summary > span strong,
html[data-theme="dark"] .unit-hero-copy strong,
html[data-theme="dark"] .unit-top-killer strong {
    color: var(--account-color-text-emphasis);
}

html[data-theme="dark"] .archived-replay-body {
    color: var(--account-color-text-muted);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .archived-replay-icon {
    border-color: #725c32;
    color: var(--account-color-warning);
    background: #322a1c;
}

html[data-theme="dark"] .totals,
html[data-theme="dark"] .team-economy-head,
html[data-theme="dark"] .unit-stats-table > thead > tr > th,
html[data-theme="dark"] .economy-table > thead > tr > th,
html[data-theme="dark"] .overall-resource-table > thead > tr > th,
html[data-theme="dark"] .unit-detail-table > thead > tr > th,
html[data-theme="dark"] .chat-table > thead > tr > th {
    border-color: var(--account-color-border-contrast);
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-table);
}

html[data-theme="dark"] .player-row,
html[data-theme="dark"] .inventory-section,
html[data-theme="dark"] .unit-stats-table > tbody > tr > td,
html[data-theme="dark"] .economy-table > tbody > tr > td,
html[data-theme="dark"] .overall-resource-table > tbody > tr > td,
html[data-theme="dark"] .unit-detail-table > tbody > tr > td,
html[data-theme="dark"] .chat-table > tbody > tr > td {
    border-color: var(--account-color-divider);
    color: var(--account-color-text);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .economy-table > tbody > tr:hover > td,
html[data-theme="dark"] .overall-resource-table > tbody > tr:hover > td,
html[data-theme="dark"] .unit-detail-table > tbody > tr:hover > td,
html[data-theme="dark"] .chat-row:hover > td {
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .supply-bar,
html[data-theme="dark"] .build-player-supply .progress,
html[data-theme="dark"] .progress.slim {
    background: var(--account-color-surface-muted);
}

html[data-theme="dark"] .resource-values > * + *:before,
html[data-theme="dark"] .resource-pair > span + span:before,
html[data-theme="dark"] .unit-life-range i {
    color: var(--account-color-text-faint);
}

html[data-theme="dark"] .vespene,
html[data-theme="dark"] .vespene-value {
    color: var(--account-color-success-text) !important;
}

html[data-theme="dark"] .inventory-toolbar,
html[data-theme="dark"] .inventory-title,
html[data-theme="dark"] .hero-team-card,
html[data-theme="dark"] .hero-unit-main,
html[data-theme="dark"] .units-team-card,
html[data-theme="dark"] .unit-player-summary,
html[data-theme="dark"] .chat-toolbar {
    border-color: var(--account-color-divider);
    background: var(--account-color-surface-subtle);
}

html[data-theme="dark"] .icon-slot,
html[data-theme="dark"] .hero-unit-portrait,
html[data-theme="dark"] .hero-kill-item,
html[data-theme="dark"] .unit-detail-icon,
html[data-theme="dark"] .unit-kill-item {
    border-color: var(--account-color-control-border);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .hero-unit-card,
html[data-theme="dark"] .hero-unit-main,
html[data-theme="dark"] .unit-player-heading {
    border-color: var(--account-color-divider);
}

html[data-theme="dark"] .economy-help {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text-muted);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .economy-help-popup {
    border-color: var(--account-color-border-contrast);
    color: var(--account-color-text);
    background: var(--account-color-surface-raised);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .economy-help-popup:after {
    border-top-color: var(--account-color-surface-raised);
}

html[data-theme="dark"] .economy-help-popup.is-below:after {
    border-top-color: transparent;
    border-bottom-color: var(--account-color-surface-raised);
}

html[data-theme="dark"] .economy-sq-score,
html[data-theme="dark"] .unit-player-summary .unit-summary-trade.is-neutral,
html[data-theme="dark"] .unit-trade-value.is-neutral {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .efficiency-good,
html[data-theme="dark"] .economy-sq-score.sq-good,
html[data-theme="dark"] .unit-player-summary .unit-summary-trade.is-positive {
    color: var(--account-color-success-text);
}

html[data-theme="dark"] .efficiency-warn,
html[data-theme="dark"] .economy-sq-score.sq-warn,
html[data-theme="dark"] .overall-best {
    color: var(--account-color-warning);
}

html[data-theme="dark"] .economy-sq-score.sq-poor {
    color: var(--account-color-danger-text);
}

html[data-theme="dark"] .unit-player-summary .unit-summary-trade.is-negative {
    color: var(--account-color-danger-text);
}

html[data-theme="dark"] .build-rail {
    background: linear-gradient(to bottom, transparent 16px, var(--account-color-control-border) 16px, var(--account-color-control-border) 20px, transparent 20px);
}

html[data-theme="dark"] .build-tick,
html[data-theme="dark"] .build-list:before,
html[data-theme="dark"] .chat-time:before {
    background: var(--account-color-control-border);
}

html[data-theme="dark"] .build-tick-label,
html[data-theme="dark"] .build-row,
html[data-theme="dark"] .chat-time {
    color: var(--account-color-text-muted) !important;
}

html[data-theme="dark"] .build-column-head span:not(:last-child),
html[data-theme="dark"] .build-row > div:not(:last-child),
html[data-theme="dark"] .build-row {
    border-color: var(--account-color-divider);
}

html[data-theme="dark"] .build-row:hover {
    color: var(--account-color-text);
    background: var(--account-color-surface-hover);
}

html[data-theme="dark"] .build-row.is-current {
    color: var(--account-color-heading);
    background: var(--account-color-primary-soft);
}

html[data-theme="dark"] .build-list {
    scrollbar-color: var(--account-color-control-border) var(--account-color-surface-inset);
}

html[data-theme="dark"] .build-list::-webkit-scrollbar-track {
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .build-list::-webkit-scrollbar-thumb {
    border-color: var(--account-color-surface-inset);
    background: var(--account-color-control-border);
}

html[data-theme="dark"] .build-row:before,
html[data-theme="dark"] .chat-time:after {
    border-color: var(--account-color-surface);
    box-shadow: 0 0 0 1px var(--account-color-control-border);
}

html[data-theme="dark"] .build-row:before {
    background: var(--account-color-text-subtle);
}

html[data-theme="dark"] .build-row.is-current:before {
    background: var(--account-color-primary);
}

html[data-theme="dark"] .build-player-select,
html[data-theme="dark"] .chat-player-select,
html[data-theme="dark"] .units-player-control .form-control,
html[data-theme="dark"] .chat-search-input {
    border-color: var(--account-color-control-border);
    color: var(--account-color-text);
    background-color: var(--account-color-surface-inset);
}

html[data-theme="dark"] .build-player-select.is-active,
html[data-theme="dark"] .chat-player-select.is-active {
    border-color: var(--account-color-primary);
    color: var(--account-color-heading);
}

html[data-theme="dark"] .chat-search .glyphicon,
html[data-theme="dark"] .units-player-control label {
    color: var(--account-color-text-muted);
}

html[data-theme="dark"] .unit-detail-row.has-kill-breakdown:hover > td,
html[data-theme="dark"] .unit-detail-row.has-kill-breakdown:focus > td {
    background: var(--account-color-primary-soft);
}

html[data-theme="dark"] .unit-detail-name > strong,
html[data-theme="dark"] .unit-kill-value {
    color: var(--account-color-heading-secondary);
}

html[data-theme="dark"] .unit-kill-detail > td,
html[data-theme="dark"] .unit-kill-breakdown {
    border-color: var(--account-color-divider);
    color: var(--account-color-text);
    background: var(--account-color-surface-inset);
}

html[data-theme="dark"] .unit-trade-value.is-neutral {
    background: var(--account-color-surface-muted);
}

html[data-theme="dark"] .units-empty {
    border-color: var(--account-color-border-contrast);
    background: var(--account-color-surface);
}

html[data-theme="dark"] .apexcharts-canvas text,
html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-legend-text,
html[data-theme="dark"] .apexcharts-xaxis-label,
html[data-theme="dark"] .apexcharts-yaxis-label {
    fill: var(--account-color-text-muted) !important;
    color: var(--account-color-text-muted) !important;
}

html[data-theme="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-xaxis line,
html[data-theme="dark"] .apexcharts-yaxis line {
    stroke: var(--account-color-divider) !important;
}

html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-tooltip-title,
html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-yaxistooltip {
    border-color: var(--account-color-border-contrast) !important;
    color: var(--account-color-text) !important;
    background: var(--account-color-surface-raised) !important;
}

html[data-theme="dark"] .apexcharts-tooltip-title {
    border-bottom-color: var(--account-color-divider) !important;
}

html[data-theme="dark"] .highcharts-tooltip-box {
    fill: var(--account-color-surface-raised) !important;
    stroke: var(--account-color-border-contrast) !important;
}

html[data-theme="dark"] .highcharts-tooltip text,
html[data-theme="dark"] .highcharts-tooltip span {
    color: var(--account-color-heading) !important;
    fill: var(--account-color-heading) !important;
}