/*
 * TS-website 2026 UI Remake — integrated charcoal/crimson build
 * Theme values are merged into the existing selectors; no duplicate theme override block is appended.
 */
/*!
 * TS-website 2026 UI Remake v1.4.3
 * Single-file presentation layer for Wruczek/ts-website 2.0.
 *
 * IMPORTANT:
 * - This file reproduces the v1.3.2 frontend appearance.
 * - Upstream css/style.css, css/cookiealert.css and css/themes/dark.css
 *   are intentionally left unchanged on disk and are not loaded while
 *   this custom presentation layer is active.
 * - css/loader.css and the original flag stylesheet remain unchanged.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ==========================================================================
   v1.3.2 structural/component layer (formerly css/style.css)
   ========================================================================== */

/*!
 * TS-website 2026 UI Remake
 * Drop-in presentation layer for Wruczek/ts-website branch 2.0
 * Original project: https://github.com/Wruczek/ts-website
 * License: GPL-3.0 (same as upstream)
 */


html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body.modal-open {
    padding-right: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Fully lock the document while a Bootstrap modal is open.
   The modal itself remains scrollable, but wheel/touch overscroll cannot
   propagate to the page underneath it. */
html:has(body.modal-open) {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.modal {
    overscroll-behavior: contain;
}

.modal-dialog,
.modal-content,
.modal-body {
    overscroll-behavior: contain;
}


.ts-layout-row {
    margin-right: -10px;
    margin-left: -10px;
}

.ts-content-column,
.ts-sidebar-column {
    padding-right: 10px;
    padding-left: 10px;
}

.ts-sidebar-sticky {
    position: sticky;
    top: calc(var(--ts-navbar-height) + 18px);
}

.fa, .fas, .fab, .far, .fal {
    margin-right: .55em;
}

.connectionproblems {
    margin: 0 0 18px;
}

.bottom-error-alert {
    position: fixed;
    right: 14px;
    bottom: 14px;
    left: 14px;
    z-index: 1090;
    margin: 0;
    text-align: center;
}

/* Navigation */
.ts-navbar {
    min-height: var(--ts-navbar-height);
    padding: 0;
}


.ts-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}


.ts-main-nav,
.ts-account-nav {
    align-items: center;
}


.ts-main-nav .nav-link i,
.ts-account-nav .nav-link i {
    font-size: .9rem;
}

.ts-account-link {
    max-width: 210px;
}


.ts-nav-avatar i {
    margin: 0 !important;
    font-size: .72rem !important;
}


/* Page heading */


.ts-page-heading-copy {
    min-width: 0;
}


.ts-page-heading-meta,
.ts-page-heading-actions {
    margin-left: auto;
}

.ts-page-heading-actions {
    display: flex;
    gap: 7px;
}

/* Cards */


.card .card-header * {
    margin-bottom: 0;
}


.ts-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.ts-card-icon i {
    margin: 0;
    font-size: .75rem;
}


/* Status */


.ts-stat-list {
    margin: -3px 0;
}


.ts-stat-value {
    min-width: 0;
    overflow: hidden;
    font-size: .78rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.ts-status-error {
    padding: 48px 8px;
}

/* News */


.ts-news-title-wrap {
    display: flex;
    min-width: 0;
    align-items: center;
}


.ts-news-marker i {
    margin: 0;
    font-size: .72rem;
}


.ts-news-title a {
    display: inline-flex;
    align-items: center;
}

.ts-external-icon {
    margin: 0 0 0 7px !important;
    font-size: .63rem;
    opacity: .7;
}


.ts-news-date > i:first-child {
    margin-right: 5px;
}


.ts-news-body img,
.ts-reading-content img {
    max-width: 100%;
    height: auto;
}

.ts-news-body p:last-child,
.ts-reading-content p:last-child {
    margin-bottom: 0;
}

/* Tables */
.ts-table-wrap {
    width: 100%;
    overflow-x: auto;
}


.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child {
    align-items: center;
}

.dataTables_info {
    white-space: normal !important;
}

/* Responsive DataTables */
table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: .5em 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 90px;
    font-weight: 700;
}

/* Viewer */
.viewer-container {
    font-size: 14px;
}


.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-name,
.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-icons,
.viewer-container .client-name,
.viewer-container .client-icons {
    display: flex;
    align-items: center;
}


.viewer-container .client-icons {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.viewer-container .client-icons .icon,
.viewer-container .client-icons .icon-flag,
.viewer-container .channel-icons .icon {
    margin-left: .5em;
}

.viewer-container .channel-name .icon,
.viewer-container .client-name .icon {
    margin-right: .55em;
}

.viewer-container .icon {
    width: auto;
    max-width: 16px;
    height: 16px;
}

.viewer-container .channel-container.spacer-left > .channel {
    text-align: left;
}
.viewer-container .channel-container.spacer-center > .channel {
    text-align: center;
}
.viewer-container .channel-container.spacer-right > .channel {
    text-align: right;
}
.viewer-container .channel-container.spacer-repeat > .channel {
    overflow: hidden;
    white-space: nowrap;
}

/* Admin status */


.admin-status.admin-status-grouped div:first-child .group-name {
    margin-top: 0;
}

.admin-status.admin-status-grouped .empty-group {
    text-align: center;
    font-size: .8rem;
    font-style: italic;
}

.admin-status.admin-status-grouped .group-name img,
.admin-status.admin-status-list .nickname img {
    width: auto;
    max-width: 16px;
    height: 16px;
    margin-right: 6px;
}

.admin-status.admin-status-list .group-separator {
    margin: 1.1em 0;
}

.admin-status .status-container {
    display: flex;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}


/* Assigner */


.group-assigner .list-group-item > div {
    display: flex;
    min-width: 0;
    align-items: center;
}

.group-assigner .list-group-item:not(.assigner-header) {
    cursor: pointer;
}

.group-assigner .assigner-icon,
.group-assigner .assigner-icon-margin {
    width: 16px;
    max-height: 16px;
    margin-right: 8px;
}


.ts-assigner-category-icon i {
    margin: 0;
    font-size: .72rem;
}

.group-assigner .assigner-save {
    width: 220px;
    max-width: 100%;
}

.ts-assigner-save-wrap {
    padding-top: 4px;
}

.group-assigner .assigner-header .badge.badge-invalid {
    background-color: #ef4444 !important;
}

/* FAQ */
.ts-reading-content {
    line-height: 1.75;
}

.ts-reading-content + .ts-accordion {
    margin-top: 18px;
}


.accordion .card .card-header .btn-link {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 7px 8px;
    text-align: left;
    text-decoration: none;
    white-space: normal;
}


.accordion .btn-link[aria-expanded="true"] .ts-faq-chevron {
    transform: rotate(180deg);
}


/* Login */
.ts-login-modal .modal-dialog {
    max-width: 520px;
}

.ts-modal-title-wrap {
    display: flex;
    align-items: center;
}

.ts-modal-icon,
.ts-login-step-icon {
    display: inline-grid;
    place-items: center;
}


.ts-modal-icon i {
    margin: 0;
}


.ts-login-step-icon i {
    margin: 0;
    font-size: 1.15rem;
}


.ts-code-input {
    max-width: 390px;
    margin: 18px auto 0;
}

#loginModal .select-account .list-group .list-group-item {
    cursor: pointer;
}


#loginModal .loginDebugInfo {
    position: absolute;
    right: 8px;
    bottom: 5px;
    font-size: .65rem;
    opacity: .35;
}

/* Utility */
.badge.error-badge {
    padding: .55rem .7rem;
    white-space: normal;
    font-size: .78rem;
    font-weight: 650;
}


.ts-empty-icon i {
    margin: 0;
    font-size: 1.1rem;
}

.ban-alert.banned {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ban-alert.banned p {
    margin-bottom: 2px;
}


.ts-alert-icon i {
    margin: 0;
}


.ts-pagination-wrap {
    padding: 6px 0 12px;
}

/* Footer */


.ts-footer-dot {
    opacity: .45;
}

/* Accessibility */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.btn:focus,
.form-control:focus,
.custom-select:focus,
.page-link:focus {
    outline: none;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
}

@media (max-width: 1199.98px) {
    :root {
    --ts-navbar-height: 68px;
}

    body {
    padding-top: calc(var(--ts-navbar-height) + 20px);
}

    .ts-navbar-inner {
    min-height: var(--ts-navbar-height);
}

    .ts-navbar .navbar-collapse {
    max-height: calc(100vh - var(--ts-navbar-height) - 14px);
    margin: 10px -4px 0;
    padding: 9px;
    overflow-y: auto;
    border-radius: var(--ts-radius);
}

    .ts-main-nav,
    .ts-account-nav {
    align-items: stretch;
}

    .ts-main-nav .nav-item,
    .ts-account-nav .nav-item {
    margin: 2px 0;
}

    .ts-main-nav .nav-link,
    .ts-account-nav .nav-link {
    justify-content: flex-start;
    min-height: 44px;
}

    .ts-account-link {
    max-width: none;
}

    .ts-account-nav {
    margin-top: 7px;
    padding-top: 7px;
}

    .dropdown-menu {
    position: static !important;
    width: 100%;
    transform: none !important;
}

    .ts-sidebar-column {
    margin-top: 2px;
}

    .ts-sidebar-sticky {
    position: static;
}
}

@media (max-width: 767.98px) {
    body {
    padding-top: calc(var(--ts-navbar-height) + 14px);
    font-size: 14px;
}

    .ts-container {
    padding-inline: 14px;
}

    .site-main {
    padding-bottom: 22px;
}

    .ts-brand {
    min-width: 0;
}

    .ts-brand-copy strong {
    max-width: 170px;
}

    .ts-brand-copy small {
    display: none;
}

    .ts-page-heading {
    min-height: 72px;
    margin-bottom: 13px;
    padding: 12px;
}

    .ts-page-heading-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

    .ts-page-heading h1 {
    font-size: 1.15rem;
}

    .card {
    margin-bottom: 13px;
}

    .card .card-body {
    padding: 14px;
}

    .ts-news-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
}

    .ts-news-date {
    padding-left: 41px;
}

    .ts-stat-row {
    min-height: 40px;
}

    .viewer-container .channel-container:not(.is-server),
    .viewer-container .client-container {
    margin-left: .9em;
}

    .ts-footer-inner,
    .ts-footer-primary,
    .ts-footer-secondary {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
}

    .ts-footer-inner {
    min-height: 88px;
    justify-content: center;
    padding-block: 15px;
}

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
    text-align: left !important;
}

    .dataTables_wrapper .dataTables_filter input {
    width: calc(100% - 54px);
    margin-left: 8px;
}
}

@media (max-width: 420px) {
    .ts-brand-mark {
    width: 38px;
    height: 38px;
    margin-right: 8px;
}

    .ts-brand-mark img {
    width: 30px;
    height: 30px;
}

    .ts-brand-copy strong {
    max-width: 145px;
    font-size: .9rem;
}

    .ts-page-heading-meta {
    display: none;
}

    .ts-page-heading-actions .btn {
    width: 36px;
    height: 36px;
    padding: 0;
}

    .ts-stat-label {
    font-size: .73rem;
}

    .ts-stat-row .badge,
    .ts-stat-value {
    font-size: .69rem;
}
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
}
}

/* ==========================================================
 * v1.1 Professional refinement
 * Visual-only overrides. Keep existing application hooks intact.
 * ========================================================== */


.site-orb,
.site-grid {
    display: none;
}

.ts-container {
    width: 100%;
    max-width: var(--ts-container);
    margin-inline: auto;
    padding-inline: 22px;
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
    padding-bottom: 34px;
}

/* Navigation: compact, rectangular and predictable. */


.ts-main-nav .nav-item,
.ts-account-nav .nav-item {
    margin: 0 1px;
}


/* Page heading: no oversized dashboard tile. */


.ts-page-heading-icon i {
    margin: 0;
    font-size: .88rem;
}

.ts-page-heading h1 {
    margin: 1px 0 0;
    margin-top: 0;
    font-size: clamp(1.08rem, 1.6vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -.015em;
}


/* Cards */


.card-titleblock {
    margin-bottom: 14px !important;
}


.card .card-body {
    padding: 15px;
}

.ts-card-heading {
    display: flex;
    align-items: center;
    font-weight: 750;
    letter-spacing: .02em;
    font-size: .82rem;
}

.ts-card-icon {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-right: 8px;
    border-radius: 3px;
    background: rgba(125, 41, 53, .12);
    border-color: rgba(173, 60, 74, .17);
    color: #c66975;
}

.ts-card-actions {
    display: flex;
    gap: 5px;
}

/* Status */
.ts-status-body {
    min-height: 210px;
}


.ts-stat-label,
.ts-stat-value {
    font-size: .76rem;
}

/* News */
.ts-news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ts-news-marker {
    display: inline-grid;
    flex: 0 0 31px;
    place-items: center;
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    margin-right: 9px;
    border-radius: 3px;
    background: rgba(125, 41, 53, .12);
    border-color: rgba(173, 60, 74, .17);
    color: #c66975;
}

.ts-news-title {
    min-width: 0;
    margin: 0;
    letter-spacing: -.01em;
    font-size: .95rem;
    font-weight: 700;
}

.ts-news-body {
    font-size: .88rem;
    line-height: 1.62;
}

/* Viewer: square selection rows, slightly denser. */
.ts-viewer-container {
    padding: 1px 2px;
}


/* Assigner */
.group-assigner .assigner-category {
    overflow: hidden;
    margin-bottom: 14px;
    border-radius: 3px;
}

.group-assigner .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
}

.ts-assigner-category-icon {
    display: inline-grid;
    margin-right: 8px;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 3px;
    background: rgba(125, 41, 53, .12);
    border-color: rgba(173, 60, 74, .17);
    color: #c66975;
}

/* FAQ */
.accordion .card {
    overflow: hidden;
    margin-bottom: 6px;
}

.accordion .card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px !important;
    min-height: 50px;
}

.ts-faq-number {
    display: inline-grid;
    flex: 0 0 30px;
    margin-right: 10px;
    place-items: center;
    font-size: .72rem;
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 3px;
    background: rgba(125, 41, 53, .12);
    border-color: rgba(173, 60, 74, .17);
    color: #c66975;
}


/* Login/modal geometry */


.ts-login-step {
    padding: 10px 4px 5px;
}

.ts-login-step-icon {
    margin: 0 auto 14px;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 4px;
    background: rgba(125, 41, 53, .12);
    border-color: rgba(173, 60, 74, .17);
    color: #c66975;
}

.ts-login-step h3 {
    margin-bottom: 8px;
    font-weight: 750;
    font-size: 1.08rem;
}

/* Utility states */
.btn-group-xs > .btn,
.btn-xs {
    padding: .3rem .42rem;
    font-size: .75rem;
    line-height: 1;
    border-radius: 3px;
}


.ts-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: rgba(125, 41, 53, .12);
    border-color: rgba(173, 60, 74, .17);
    color: #c66975;
}


/* Footer */


@media (max-width: 1199.98px) {
    :root {
    --ts-navbar-height: 64px;
}

    body {
    padding-top: calc(var(--ts-navbar-height) + 16px);
}

    .ts-navbar .navbar-collapse {
    margin-top: 7px;
    padding: 6px;
    border-radius: 3px;
}
}

@media (max-width: 767.98px) {
    body {
    padding-top: calc(var(--ts-navbar-height) + 11px);
}

    .ts-container {
    padding-inline: 12px;
}

    .ts-page-heading {
    min-height: 54px;
    padding: 8px 10px;
}

    .card .card-body {
    padding: 13px;
}

    .ts-news-date {
    padding-left: 34px;
}
}

/* ==========================================================
 * v1.3 Compatibility hardening
 * Keeps the custom 2026 presentation while protecting the
 * original TS-website flex/JS assumptions.
 * ========================================================== */


/* The status JS adds .loaded after every request. Never leave the loader
 * above valid data once that state has been reached. */
.server-status.loaded .status-loader {
    display: none !important;
}

/* Language/account menus must remain usable regardless of how many
 * translations are installed. */
.ts-account-nav .dropdown-menu {
    max-width: min(360px, calc(100vw - 24px));
}


#navbarDropdownLanguageChooser + form .dropdown-item,
.ts-language-link + form .dropdown-item {
    width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Viewer safety layer --------------------------------------------------
 * ViewerRenderer outputs a recursive channel tree. Names and suffix icons
 * must be two independent flex regions: the name may ellipsize, but it may
 * never break one character per line, and TeamSpeak icons may never shrink.
 */
.viewer-container,
.ts-viewer-container {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.viewer-container .channel-container,
.viewer-container .client-container,
.viewer-container .channel,
.viewer-container .channel-name,
.viewer-container .channel-icons,
.viewer-container .client-name,
.viewer-container .client-icons {
    box-sizing: border-box;
}

.viewer-container .channel-container {
    min-width: 0;
    max-width: 100%;
}

.viewer-container .channel-container:not(.is-server),
.viewer-container .client-container {
    margin-left: 1rem;
}


.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-name,
.viewer-container .client-name {
    display: flex !important;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none;
}

.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-icons,
.viewer-container .client-icons {
    display: flex !important;
    min-width: 0;
    max-width: 46%;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    overflow: hidden;
    flex-wrap: wrap;
}

.viewer-container img.icon,
.viewer-container .icon:not(.icon-flag) {
    display: inline-block !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    object-fit: contain;
    vertical-align: middle;
}

.viewer-container .icon-flag {
    display: inline-block !important;
    min-width: 16px !important;
    max-width: 16px !important;
    flex: 0 0 16px !important;
    vertical-align: middle;
}

.viewer-container .channel-name > .icon,
.viewer-container .client-name > .icon {
    margin-right: 7px !important;
    margin-left: 0 !important;
}

.viewer-container .channel-icons > .icon,
.viewer-container .client-icons > .icon,
.viewer-container .client-icons > .icon-flag {
    margin: 0 !important;
}


/* Spacer channels intentionally behave differently from normal names. */


.viewer-container .channel-container.is-spacer > .channel > .channel-name {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.viewer-container .channel-container.spacer-repeat > .channel > .channel-name {
    white-space: nowrap !important;
}

/* FAQ: one predictable row. Question stays left; copy stays right. */


.ts-accordion .card .card-header .btn-link {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start !important;
    text-align: left !important;
}

.ts-accordion .card .card-header .btn-link > span:nth-child(2) {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

.ts-faq-chevron {
    padding-left: 10px;
    font-size: .7rem;
    transition: transform var(--ts-transition);
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
}


/* Login: custom shell, original state containers and selectors. */
#loginModal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
}

#loginModal .modal-body {
    min-width: 0;
}

#loginModal .not-connected,
#loginModal .select-account,
#loginModal .confirmation-code {
    width: 100%;
    min-width: 0;
}


#loginModal .select-account .list-group-item > span:first-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#loginModal-codeconfirm .input-group {
    flex-wrap: wrap;
}

#loginModal-codeconfirm .form-control {
    min-width: 0;
}

/* Keep geometry restrained across Bootstrap components. */
.card,
.modal-content,
.dropdown-menu,
.alert,
.list-group,
.list-group-item,
.form-control,
.custom-select,
.input-group-text,
.btn,
.page-link,
.popover,
.tooltip-inner,
.cookiealert,
.ts-page-heading,
.ts-navbar .navbar-collapse {
    border-radius: 2px !important;
}

.ts-brand-mark,
.ts-nav-avatar,
.ts-page-heading-icon,
.ts-card-icon,
.ts-news-marker,
.ts-assigner-category-icon,
.ts-faq-number,
.ts-modal-icon,
.ts-login-step-icon,
.ts-empty-icon,
.ts-alert-icon {
    border-radius: 2px !important;
}

@media (max-width: 1199.98px) {
    #navbarDropdownLanguageChooser + form .dropdown-menu,
    .ts-language-link + form .dropdown-menu {
    position: static !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: min(48vh, 360px);
    transform: none !important;
}
}

@media (max-width: 767.98px) {
    .viewer-container .channel-container:not(.is-server),
    .viewer-container .client-container {
    margin-left: .65rem;
}

    .viewer-container .channel-container:not(.is-spacer) > .channel,
    .viewer-container .client-container {
    gap: 6px;
}

    .viewer-container .channel-container:not(.is-spacer) > .channel > .channel-icons,
    .viewer-container .client-icons {
    max-width: 42%;
    gap: 3px;
}
}

/* v1.3 compact custom login */


#loginModal .ts-login-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 16px;
}

#loginModal .ts-login-step-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin: 0;
    place-items: center;
}

#loginModal .ts-login-step-icon i {
    margin: 0;
    font-size: .85rem;
}

#loginModal .ts-login-step-heading > div {
    min-width: 0;
}

#loginModal .ts-login-step h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
}

#loginModal .ts-login-step p {
    margin: 0;
    font-size: .84rem;
    line-height: 1.55;
}

#loginModal .ts-login-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#loginModal .ts-waiting-state {
    margin: 0;
    font-size: .78rem;
}

#loginModal .select-account .list-group {
    margin-top: 2px;
}

#loginModal .select-account .list-group-item {
    min-width: 0;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .8rem;
}

#loginModal-codeconfirm .invalid-feedback {
    margin-top: 7px;
    font-size: .82rem;
    flex-basis: 100%;
}

/* ==========================================================
 * v1.3.1 — restrained soft geometry
 * A small amount of rounding without returning to the earlier
 * pill/card-heavy look. Presentation-only; no functional hooks.
 * ========================================================== */


/* Main surfaces: only a slight softened edge. */
.card,
.ts-page-heading,
.cookiealert,
.popover {
    border-radius: 5px !important;
}


.dropdown-menu,
.ts-navbar .navbar-collapse {
    border-radius: 5px !important;
}

/* Controls stay tighter than the containing surfaces. */
.btn,
.form-control,
.custom-select,
.input-group-text,
.page-link,
.alert,
.badge,
.tooltip-inner,
.ts-copy-link,
.ts-main-nav .nav-link,
.ts-account-nav .nav-link {
    border-radius: 4px !important;
}

/* Small visual markers get a subtle radius, not a pill treatment. */
.ts-brand-mark,
.ts-page-heading-icon,
.ts-card-icon,
.ts-news-marker,
.ts-assigner-category-icon,
.ts-faq-number,
.ts-modal-icon,
.ts-login-step-icon,
.ts-empty-icon,
.ts-alert-icon {
    border-radius: 5px !important;
}

/* Keep avatars/status indicators naturally circular. */
.ts-nav-avatar,
.ts-status-pulse {
    border-radius: 50% !important;
}

/* Viewer rows remain compact and compatibility-safe, with only a hint of softness. */


/* Grouped lists should read as one component, rather than many rounded pills. */
.list-group {
    border-radius: 5px !important;
    overflow: hidden;
}

.list-group > .list-group-item {
    border-radius: 0 !important;
}

/* Accordion cards stay slightly softer while preserving the FAQ control row. */
.ts-accordion > .card,
.accordion > .card {
    border-radius: 4px !important;
}

/* ==========================================================
 * v1.3.2 — restrained 2026 modernization pass
 * Visual hierarchy and interaction polish only.
 * No application hooks, viewer structure or runtime behavior changed.
 * ========================================================== */

/* Typography and rhythm */


.ts-page-heading h1,
.ts-news-title,
.ts-card-heading,
.modal-title {
    text-wrap: balance;
}

.ts-stat-value,
.ts-stat-row .badge,
.table,
.dataTables_info {
    font-variant-numeric: tabular-nums;
}

/* Navigation stays compact but feels more current. */


/* Cleaner focus treatment without moving controls. */
.btn,
.form-control,
.custom-select,
.page-link,
.dropdown-item,
.ts-copy-link,
.viewer-container .channel-container:not(.is-spacer) > .channel,
.viewer-container .client-container {
    transition: background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease;
}

.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.ts-copy-link:focus-visible,
.viewer-container .channel-container:not(.is-spacer) > .channel:focus-visible,
.viewer-container .client-container:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(173, 60, 74, .16) !important;
}

/* More deliberate page/card hierarchy. */


.ts-news-card .card-body,
.ts-reading-content {
    line-height: 1.68;
}

/* Status reads more like a current service panel. */


/* Tables: compact modern admin presentation, no structural changes. */


.table tbody td {
    padding-top: .68rem;
    padding-bottom: .68rem;
}


/* Small modal polish without changing the login state layout. */
.modal-header,
.modal-footer {
    padding-right: 18px;
    padding-left: 18px;
}


/* Keep reduced-motion users completely static. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
}
}


/* ==========================================================================
   v1.3.2 cookie layer (formerly css/cookiealert.css)
   ========================================================================== */


.cookiealert.show {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cookiealert .acceptcookies {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .cookiealert {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    padding: 12px;
}

    .cookiealert.show {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
}

    .cookiealert .acceptcookies {
    width: 100%;
    margin-left: 0;
}
}


/* ==========================================================================
   v1.3.2 dark visual layer (formerly css/themes/dark.css)
   ========================================================================== */

/*!
 * TS-website 2026 UI Remake — Dark theme
 * Designed as a modern override for Bootstrap 4.6 without changing TS-website backend behavior.
 */


.site-orb-one {
    top: -240px;
    right: -180px;
    background: var(--site-red-muted);
}

.site-orb-two {
    bottom: -280px;
    left: -190px;
    background: var(--site-red-deep);
}


h1, h2, h3, h4, h5, h6 {
    color: var(--site-heading);
}

p, tbody {
    font-family: var(--font-family-sans-serif);
}

a {
    color: #dedcdc;
    transition: color .16s ease, opacity .16s ease;
}

a:hover {
    color: #e1a0a8;
    text-decoration: none;
}

::selection {
    background: rgba(173, 60, 74, .42);
    color: #ffffff;
}

/* Navbar */


.ts-brand-copy strong {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .94rem;
    font-weight: 700;
    color: #f3f3f3;
}


.ts-main-nav .nav-item.active > .nav-link i {
    color: #c9828b;
}


.ts-navbar-toggler span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    border-radius: 2px;
    transition: transform var(--ts-transition), opacity var(--ts-transition);
    background: #cdcaca;
}

#main-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(173, 60, 74, .16);
}


.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
    background: rgba(173, 60, 74, .12);
    color: #f0ecee;
}

.dropdown-divider {
    border-top-color: #332f2f;
}

/* Page heading */


.ts-eyebrow {
    display: block;
    font-weight: 750;
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: .62rem;
    letter-spacing: .095em;
    color: #857c7c;
}

/* Cards */


.card.card-accent > .card-header {
    position: relative;
}


.ts-news-date {
    flex: 0 0 auto;
    font-size: .73rem;
    white-space: nowrap;
    color: #857c7c;
}

.ts-news-body,
.ts-reading-content {
    color: #c8c4c4;
}

.ts-news-body strong,
.ts-reading-content strong {
    color: #e9e8e8;
}

/* Status */


.ts-stat-address .ts-stat-value a {
    color: #d5a0a6;
}


.badge-success {
    background: rgba(85, 185, 133, .13);
    color: #81d3aa;
}

.badge-danger {
    background: rgba(212, 95, 105, .13);
    color: #e9939b;
}

.badge-warning {
    background: rgba(213, 163, 76, .13);
    color: #e2bd78;
}

/* Buttons */


.btn-primary.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(173, 60, 74, .18);
}


.btn-link {
    color: #d9d7d7;
}

.btn-link:hover {
    color: #d98a94;
}

/* Inputs */


.form-control::placeholder {
    color: #726b6b;
}

.form-control[disabled],
.input-text[disabled],
select[disabled],
.form-control[readonly],
.input-text[readonly],
select[readonly],
fieldset[disabled] .form-control,
fieldset[disabled] .input-text,
fieldset[disabled] select,
.custom-select[disabled] {
    background: #0e0d0d;
    border-color: #2d2929;
    color: #726a6a;
}

.form-control-plaintext {
    color: var(--site-text);
}


.custom-control-label::before,
.custom-control-input:disabled ~ .custom-control-label::before {
    background: #121111;
    border: 1px solid #454548;
    border-color: #3f3f42;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background: #963241;
    border-color: #a83a49;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(150, 50, 65, .15);
}

/* Lists / assigner */


/* Tables + DataTables */


.table tbody tr {
    transition: background .14s ease;
}


table.dataTable > tbody > tr.parent td,
table.dataTable > tbody > tr.child td.child {
    background: #1d1a1a;
}

.dataTables_wrapper {
    color: #a29b9b;
    font-size: .8rem;
}

.dataTables_wrapper label {
    color: #a29b9b;
}

.dataTables_wrapper .dataTables_length select {
    margin: 0 5px;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 8px;
}

/* Pagination */


.page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(173, 60, 74, .14);
}


.page-item.disabled .page-link {
    background: #110f0f;
    border-color: #2c2828;
    color: #5f5858;
}

/* Alerts */


.alert a,
.alert .alert-link {
    color: inherit;
    text-decoration: underline;
}

.alert-primary {
    background: rgba(150, 50, 65, .085);
    border-color: rgba(173, 60, 74, .20);
}

.alert-secondary {
    background: rgba(172, 166, 166, .06);
    border-color: rgba(172, 166, 166, .13);
}

.alert-success {
    background: rgba(54, 201, 143, .09);
    border-color: rgba(54, 201, 143, .18);
    color: #a7e9ce;
}

.alert-info {
    background: rgba(196, 106, 117, .085);
    border-color: rgba(196, 106, 117, .18);
    color: #ebc4ca;
}

.alert-warning {
    background: rgba(243, 185, 95, .09);
    border-color: rgba(243, 185, 95, .19);
    color: #f4d5a5;
}

.alert-danger {
    background: rgba(239, 106, 120, .09);
    border-color: rgba(239, 106, 120, .19);
    color: #f7bdc3;
}

.alert-light {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.075);
}

.alert-dark {
    background: #191616;
    border-color: #343436;
}

.alert .close {
    color: currentColor;
    opacity: .7;
    text-shadow: none;
}

.alert code {
    padding: .15em .3em;
    border-radius: 4px;
    background: #0c0b0b;
    color: #e7e6e6;
}


.ts-alert-icon {
    display: inline-grid;
    flex: 0 0 42px;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 3px;
    background: rgba(190, 68, 79, .12);
    color: #dc7b85;
}

.bans-highlight {
    font-family: var(--font-family-monospace);
    color: #dc7c87;
}

/* FAQ */
.ts-accordion .card {
    box-shadow: none;
}


.ts-accordion .btn-link {
    color: #d3d0d0;
}

.ts-accordion .btn-link:hover,
.ts-accordion .btn-link[aria-expanded="true"] {
    color: #f3f3f3;
}


/* Viewer */
.viewer-container .channel-container:not(.is-spacer) .channel,
.viewer-container .client-container {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    min-height: 31px;
    padding: 3px 6px;
    border-radius: 2px;
    color: #c4c0c0;
    transition: background .12s ease, color .12s ease;
}


.viewer-container .channel-container.is-server > .channel {
    color: #f2f2f2;
    font-weight: 700;
}

.viewer-container .channel-container.is-spacer > .channel {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    color: #746d6d;
}

/* Admin status */
.admin-status .status-container.status-online .nickname {
    color: #d7d4d4;
}

.admin-status .status-container.status-offline .nickname {
    color: #756d6d;
}

.admin-status.admin-status-grouped .group-name {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.1em 0 .2em;
    font-size: .92em;
    font-weight: 750;
    color: #9b9b9e;
}

.admin-status .badge-success,
.admin-status .badge-danger {
    min-width: 8px;
}

/* Modal */


.modal-body {
    padding: 20px;
}


.modal .close,
.ts-modal-close {
    color: #9b9b9e !important;
    opacity: .8;
    text-shadow: none;
}

.modal .close:hover,
.ts-modal-close:hover {
    color: #ffffff !important;
    opacity: 1;
}

.ts-muted-copy,
.ts-waiting-state {
    color: #857c7c;
}

/* Popovers / tooltips */


.popover-body {
    color: #c4c0c0;
}


/* Progress */


/* Loader */
.loader {
    color: #c9c5c5;
}

.loader:before {
    border-color: rgba(201, 197, 197, .12);
}

.loader:after {
    border-top-color: #b74351;
}

/* Footer */


.ts-footer a {
    color: #999292;
}

.ts-footer a:hover {
    color: #d3959d;
}

/* Cookie alert */


/* Scrollbar */
* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #61313a #0e0d0d;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0e0d0d;
}


::-webkit-scrollbar-thumb:hover {
    background: #743842;
}

@media (max-width: 1199.98px) {
    .ts-navbar .navbar-collapse {
    background: rgba(23, 21, 21, .98);
    border: 1px solid #343436;
    box-shadow: 0 22px 46px rgba(0,0,0,.33);
}

    .ts-account-nav {
    border-top: 1px solid #343436;
}
}

@media (max-width: 767.98px) {
    .site-grid {
    opacity: .12;
}

    .ts-page-heading,
    .card {
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
}

/* ==========================================================
 * v1.1 Professional dark refinement
 * Lower visual noise, flatter geometry, stronger hierarchy.
 * ========================================================== */


body,
.site-background {
    background: #100f0f;
}

/* Solid navbar instead of glass/glow styling. */


.ts-main-nav .nav-link:hover,
.ts-account-nav .nav-link:hover,
.ts-main-nav .nav-item.active > .nav-link,
.ts-account-nav .nav-item.show > .nav-link {
    background: #201d1d;
    color: #f3f2f2 !important;
}


.ts-nav-avatar {
    display: inline-grid;
    flex: 0 0 27px;
    margin-right: 8px;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,.08);
    background: #1f1c1c;
    border-color: #39393c;
    color: #cdcaca;
}


/* Page title becomes a restrained section header. */


.ts-page-heading-icon,
.ts-page-heading-icon-danger {
    background: transparent;
    border: 0;
    color: #c27882;
}

.ts-page-heading-icon-danger {
    color: #df7a84;
    background: rgba(190, 68, 79, .12);
    border-color: rgba(212, 95, 105, .20);
}

/* Cards: flatter, no floating/gradient accents. */


.ts-card-icon,
.ts-news-marker,
.ts-assigner-category-icon,
.ts-faq-number {
    border: 1px solid rgba(173, 60, 74, .12);
    background: #232020;
    border-color: #3a3737;
    color: #bd7781;
}

.ts-news-card {
    overflow: hidden;
    transition: border-color .14s ease, background .14s ease;
}


/* Status and badges */


.badge {
    font-weight: 650;
    letter-spacing: .005em;
    border-radius: 3px;
}

.badge-pill {
    border-radius: 3px;
}


.badge-primary {
    border: 1px solid rgba(173, 60, 74, .2);
    background: rgba(150, 50, 65, .16);
    border-color: rgba(173, 60, 74, .28);
    color: #e1a0a8;
}

/* Buttons: no lift animation. */
.btn {
    font-weight: 650;
    border-radius: 3px;
    font-size: .82rem;
    box-shadow: none;
    transition: background .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease;
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: none;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    background: #8a2d3a;
    border-color: #9a3543;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background: #a23847;
    border-color: #b34351;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.18);
}

.btn-secondary {
    background: #211e1e;
    border-color: #3f3b3b;
    color: #cdcdcf;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    background: #2b2727;
    border-color: #4e4848;
    color: #ffffff;
}

/* Inputs */


.input-group-text {
    border: 1px solid #353538;
    background: #1d1a1a;
    border-color: #353538;
    color: #9d9696;
}

/* Lists */
.list-group-item,
.list-group-item.disabled {
    background: #191616;
    border-color: #343436;
    color: #cdcdcf;
}

.list-group-item-action:focus,
.list-group-item-action:hover,
.list-group-item-action:active {
    background: #221f1f;
    color: #f2f2f2;
}

.group-assigner .assigner-header {
    font-weight: 700;
    background: #1e1b1b;
    color: #efeded;
}

.group-assigner .list-group-item:not(.assigner-header):has(.custom-control-input:checked) {
    background: linear-gradient(90deg, rgba(150, 50, 65, .13), rgba(150, 50, 65, .04));
}

/* Tables */


/* Pagination */


.page-link:hover,
.page-link.light-hover:hover {
    background: #221f1f;
    border-color: #45363c;
    color: #f2f2f2;
}


/* Alerts */
.alert {
    border: 1px solid transparent;
    color: #dddddf;
    font-size: .84rem;
    border-radius: 3px;
}

.ts-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    min-height: 150px;
    gap: 8px;
    border: 1px dashed #3e3e41;
    background: rgba(255,255,255,.01);
    border-color: #3e3e41;
    color: #a59f9f;
}

.ts-empty-icon,
.ts-login-step-icon {
    border: 1px solid rgba(173, 60, 74, .14);
    color: #cf8791;
    background: #262323;
    border-color: #414144;
}

/* FAQ / viewer */
.ts-accordion .card .card-header {
    display: flex !important;
    width: 100%;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px;
    background: #1b1818;
}


.ts-copy-link:hover {
    color: #d3959d;
    background: #262323;
}

.viewer-container .channel-container:not(.is-spacer) .channel:hover,
.viewer-container .client-container:hover,
.viewer-container .channel-container:not(.is-spacer) .channel:focus,
.viewer-container .client-container:focus {
    color: #f0f0f1;
    background: #262323;
}

/* Modal */


.ts-modal-icon {
    margin-right: 11px;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    border: 1px solid rgba(173, 60, 74, .15);
    background: rgba(125, 41, 53, .12);
    border-color: rgba(173, 60, 74, .17);
    color: #c66975;
}

/* Tooltip/popover */
.popover {
    border: 1px solid #3b3b3e;
    background: #1a1717;
    border-color: #3b3b3e;
    border-radius: 3px;
    box-shadow: var(--site-shadow);
}

.popover-header {
    border-bottom: 1px solid #3b3b3e;
    background: #201d1d;
    border-bottom-color: #3b3737;
    color: #f0f0f1;
}

.tooltip-inner {
    border: 1px solid rgba(255,255,255,.06);
    font-size: .72rem;
    background: #2a2626;
    border-radius: 2px;
    box-shadow: 0 5px 14px rgba(0,0,0,.24);
    border-color: #454141;
    color: #f0f0f1;
}

/* Progress */
.progress {
    border-radius: 2px;
    background: #1d1a1a;
}

.progress-bar {
    background: linear-gradient(90deg, #7d2935, #ad3c4a);
}

/* Footer and cookie panel */


::-webkit-scrollbar-thumb {
    border: 2px solid #131212;
    border-radius: 2px;
    background: #5a3038;
    border-color: #0e0d0d;
}

@media (max-width: 1199.98px) {
    .ts-navbar .navbar-collapse {
    background: #191717;
    border-color: #383333;
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
}

@media (max-width: 767.98px) {
    .ts-page-heading,
    .card {
    box-shadow: none;
}
}

/* ==========================================================
 * v1.3 Professional dark finish
 * ========================================================== */


.dropdown-menu,
.modal-content,
.popover {
    background: #1b1818;
    border-color: #3e3939;
}


.viewer-container .channel-container:not(.is-spacer) > .channel,
.viewer-container .client-container {
    display: flex !important;
    width: auto;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    overflow: hidden;
    border-radius: 3px !important;
    border: 1px solid transparent;
    border-color: transparent;
}


.viewer-container .channel-name,
.viewer-container .client-name {
    color: #d7d4d4;
}

.viewer-container .channel-container.is-server > .channel .channel-name {
    font-weight: 700;
    color: #f2f2f2;
}

.viewer-container .channel-icons,
.viewer-container .client-icons {
    opacity: .92;
}


.ts-copy-link {
    padding: 0;
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    flex: 0 0 32px;
    margin: 0 !important;
    background: transparent;
    border-color: transparent;
    color: #8b8b8e;
}


.modal-backdrop.show {
    opacity: .82;
}

#loginModal .modal-header {
    background: #1d1a1a;
}

#loginModal .ts-login-step {
    position: relative;
    padding: 4px 0 2px;
    text-align: left;
    background: transparent;
}


/* ==========================================================
 * v1.3.1 — subtle professional polish
 * ========================================================== */


.ts-news-card,
.ts-status-card,
.ts-viewer-card,
.ts-faq-card {
    transition: border-color .16s ease, box-shadow .16s ease;
}


.ts-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 35px;
    position: relative;
    padding-right: 2px;
    padding-left: 2px;
}


.btn-primary:hover,
.btn-primary:focus {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 10px rgba(0, 0, 0, .16);
}

@media (max-width: 767.98px) {
    .ts-page-heading,
    .card {
    box-shadow: 0 3px 12px rgba(0, 0, 0, .1);
}
}

/* ==========================================================
 * v1.3.2 — modern dark finish
 * ========================================================== */


.site-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(circle at 78% -12%, rgba(173, 60, 74, .06), transparent 34%),
        linear-gradient(180deg, #0f0e0e 0%, #131111 52%, #0f0e0e 100%);
    background-color: #0c0b0b;
    background-image: radial-gradient(circle at 82% 2%, rgba(150, 50, 65, .055), transparent 31%),
        radial-gradient(circle at 12% 84%, rgba(100, 33, 43, .035), transparent 34%),
        linear-gradient(180deg, rgba(12, 11, 11, .10) 0%, rgba(12, 11, 11, .36) 48%, rgba(12, 11, 11, .66) 100%),
        url("/img/bg.png");
    background-position: top center,
        bottom center,
        top center,
        top center;
    background-repeat: no-repeat,
        no-repeat,
        no-repeat,
        repeat-y;
    background-size: 100% 72%,
        100% 72%,
        100% 100%,
        100% auto;
}

.site-orb {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    opacity: .07;
    filter: blur(120px);
}

.site-grid {
    position: absolute;
    inset: 0;
    mask-image: linear-gradient(to bottom, #000000 0, transparent 62%);
    -webkit-mask-image: linear-gradient(to bottom, #000000 0, transparent 62%);
    background-size: 42px 42px;
    opacity: .12;
    background-image: linear-gradient(rgba(189, 78, 91, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(189, 78, 91, .018) 1px, transparent 1px);
}

#main-navbar {
    border-bottom: 1px solid #322d2d;
    background: rgba(16, 15, 15, .97) !important;
    border-bottom-color: #322d2d;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .30);
    backdrop-filter: blur(12px) saturate(110%);
    -webkit-backdrop-filter: blur(12px) saturate(110%);
}


.ts-main-nav .nav-link:hover,
.ts-account-nav .nav-link:hover,
.ts-account-nav .nav-item.show > .nav-link {
    background: #211e1e;
    color: #f0f0f1 !important;
}

.ts-main-nav .nav-item.active > .nav-link {
    background: linear-gradient(180deg, rgba(173, 60, 74, .13), rgba(173, 60, 74, .075));
    box-shadow: inset 0 0 0 1px rgba(190, 78, 91, .16);
    color: #e3e3e3 !important;
}

.ts-main-nav .nav-item.active > .nav-link::after {
    position: absolute;
    right: 10px;
    bottom: 3px;
    left: 10px;
    height: 2px;
    border-radius: 2px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, rgba(173, 60, 74, .35), #b95a67, rgba(173, 60, 74, .35));
}

.dropdown-menu {
    border: 1px solid #39393c;
    padding: 5px;
    border-radius: 4px;
    background: #171515;
    border-color: #343436;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .40);
    color: var(--site-text);
}

.dropdown-item {
    font-size: .82rem;
    font-weight: 550;
    padding: .5rem .65rem;
    border-radius: 4px;
    color: #c0bbbb;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: linear-gradient(90deg, rgba(150, 50, 65, .15), rgba(150, 50, 65, .055));
    color: #f4f4f4;
}

.ts-page-heading {
    display: flex;
    align-items: center;
    min-height: 58px;
    gap: 11px;
    margin-bottom: 14px;
    padding: 9px 12px;
    position: relative;
    overflow: hidden;
    border-radius: var(--ts-radius);
    border-left: 3px solid #963241;
    background: linear-gradient(180deg, rgba(26, 23, 23, .98), rgba(21, 19, 19, .98));
    border: 1px solid #3a3535;
    border-left-width: 1px;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.018);
    border-color: #343436;
}

.ts-page-heading::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, rgba(173, 60, 74, .72), rgba(125, 41, 53, .16) 34%, transparent 75%);
}

.ts-page-heading-icon {
    display: grid;
    flex: 0 0 48px;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 3px;
    border: 1px solid rgba(173, 60, 74, .2);
    background: linear-gradient(145deg, rgba(125, 41, 53, .16), rgba(74, 23, 31, .08));
    border-color: rgba(173, 60, 74, .20);
    color: #c96a76;
}

.card {
    margin-bottom: 14px;
    border-radius: 4px;
    border: 1px solid #342f2f;
    background: linear-gradient(180deg, rgba(25, 22, 22, .985), rgba(21, 19, 19, .985));
    border-color: #343436;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    color: var(--site-text);
}

.card .card-header {
    min-height: 46px;
    padding: 10px 13px;
    letter-spacing: .002em;
    border-bottom: 1px solid var(--site-border-soft);
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006));
    border-bottom-color: #363232;
    color: #f0f0f1;
}

.card.card-accent > .card-header::before {
    position: absolute;
    top: -1px;
    left: 15px;
    width: 44px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    content: "";
    display: none;
    background: linear-gradient(90deg, #64212b, #ad3c4a, #7d2935);
    opacity: .90;
}

.ts-news-card:hover {
    transform: none;
    background: linear-gradient(180deg, #1d1b1b, #171515);
    border-color: #46333a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .19);
}

.ts-card-icon,
.ts-news-marker,
.ts-assigner-category-icon,
.ts-faq-number,
.ts-modal-icon,
.ts-login-step-icon {
    background: rgba(173, 60, 74, .09);
    border-color: rgba(190, 78, 91, .16);
    color: #c67f89;
}

.ts-stat-row + .ts-stat-row {
    border-top: 1px solid rgba(190, 190, 193, .07);
    border-top-color: rgba(190, 190, 193, .085);
}

.ts-stat-label {
    display: flex;
    min-width: 0;
    align-items: center;
    font-size: .78rem;
    white-space: nowrap;
    color: #aba4a4;
}

.ts-stat-label i {
    width: 17px;
    margin-right: 8px;
    text-align: center;
    color: #827979;
}

.badge-secondary {
    border: 1px solid #39393c;
    background: #211e1e;
    border-color: #39393c;
    color: #c8c4c4;
}

.btn-primary {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    background: #963241;
    border-color: #a23847;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: #a23847;
    border-color: #b34351;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.18);
}

.btn-primary:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
.page-link:focus-visible,
.ts-copy-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(173, 60, 74, .16) !important;
}

.form-control,
.custom-select {
    height: calc(1.5em + .85rem + 2px);
    border: 1px solid #353538;
    border-radius: 3px;
    background: #121111;
    border-color: #353538;
    color: #e5e4e4;
}

.form-control:hover,
.custom-select:hover {
    border-color: #47474a;
}

.form-control:focus,
.custom-select:focus {
    background: #161414;
    border-color: #973544;
    color: #f4f4f4;
    box-shadow: 0 0 0 3px rgba(150, 50, 65, .13);
}

.table {
    margin-bottom: 0;
    font-size: .82rem;
    color: #cdcaca;
}

.table thead th {
    padding-top: .72rem;
    padding-bottom: .72rem;
    border-top: 0;
    border-bottom: 1px solid #3f3f42;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(255,255,255,.014);
    border-bottom-color: #3f3f42;
    color: #999292;
}

.table td,
.table th {
    vertical-align: middle;
    padding: .78rem .72rem;
    border-top: 1px solid rgba(190, 190, 193, .09);
    border-top-color: #322e2e;
}

.table tbody tr:hover {
    background: rgba(150, 50, 65, .045);
}

.page-link {
    min-width: 38px;
    border: 1px solid #353538;
    text-align: center;
    margin: 0 2px;
    border-radius: 3px !important;
    background: #171515;
    border-color: #393434;
    color: #a9a3a3;
}

.page-link:hover {
    background: #272424;
    border-color: #47474a;
    color: #f0f0f1;
}

.page-item.active .page-link {
    background: #8a2d3a;
    border-color: #9a3543;
    color: #ffffff;
}

/* Viewer layout rules from v1.3 remain intentionally untouched. */
.viewer-container .channel-container:not(.is-spacer) > .channel:hover,
.viewer-container .client-container:hover,
.viewer-container .channel-container:not(.is-spacer) > .channel:focus,
.viewer-container .client-container:focus {
    outline: none;
    background: linear-gradient(90deg, rgba(150, 50, 65, .10), rgba(255,255,255,.018));
    border-color: #49323a;
}

.ts-accordion .card .card-header:hover {
    background: linear-gradient(90deg, rgba(150, 50, 65, .095), #211e1e 34%, #211e1e);
}

.ts-copy-link:hover,
.ts-copy-link:focus {
    background: rgba(150, 50, 65, .10);
    border-color: rgba(173, 60, 74, .24);
    color: #dfb0b6;
}

.modal-content {
    border-radius: 6px !important;
    overflow: hidden;
    border: 1px solid #3b3b3e;
    background: linear-gradient(180deg, #1a1717, #151313);
    border-color: #3b3b3e;
    box-shadow: 0 22px 58px rgba(0,0,0,.46);
    color: var(--site-text);
}

.modal-header {
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #343436;
    background: rgba(255,255,255,.012);
    border-bottom-color: #343436;
}

.modal-footer {
    border-top-color: #343436;
}

#loginModal .list-group-item {
    background: #151313;
    border-color: #373232;
}

#loginModal .list-group-item:hover,
#loginModal .list-group-item:focus {
    background: linear-gradient(90deg, rgba(150, 50, 65, .105), #1f1c1c 46%);
}

.ts-footer {
    position: relative;
    flex: 0 0 auto;
    padding: 0;
    border-top: 1px solid rgba(190, 190, 193, .1);
    background: #0b0a0a;
    border-top-color: #2f2b2b;
    color: #766e6e;
}

.cookiealert {
    position: fixed;
    right: 18px;
    bottom: 18px;
    left: auto;
    z-index: 1080;
    display: none;
    width: min(520px, calc(100vw - 36px));
    margin: 0;
    padding: 14px 15px;
    border-radius: 5px;
    text-align: left;
    border: 1px solid #3f3f42 !important;
    color: #cdcdcf !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #1a1717 !important;
    border-color: #3b3b3e !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.40) !important;
}

/* ==========================================================
 * v1.3.6 — compact navbar, stable mobile menu, footer wrapping,
 * and content-sized status/admin badges.
 * Layout-only compatibility polish; no JS or runtime hooks changed.
 * ========================================================== */

/* The navigation items became more compact in earlier revisions, so the
   fixed navbar now follows the same scale instead of keeping excess height. */


.ts-navbar-inner {
    min-height: var(--ts-navbar-height);
    position: relative;
}


.ts-main-nav .nav-link,
.ts-account-nav .nav-link {
    display: flex;
    align-items: center;
    font-weight: 650;
    letter-spacing: .01em;
    padding: 0 11px !important;
    border-radius: 3px;
    font-size: .81rem;
    position: relative;
    isolation: isolate;
    background: transparent;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
    min-height: 36px;
    color: #a69f9f !important;
}


/* Badges should size to their text, not to an arbitrary minimum width. */
.ts-stat-row .badge,
.admin-status .status-container .status .badge {
    display: inline-flex;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: .32em .58em;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.ts-stat-row .badge {
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
    max-width: 56%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-status .status-container .status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: 8px;
}

.admin-status .status-container .status .badge {
    max-width: 100%;
}

.admin-status .status-container .nickname {
    min-width: 0;
    overflow: hidden;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

/* On collapsed navigation widths, take the menu out of navbar flow.
   Opening the menu therefore does not make the fixed bar itself taller. */
@media (max-width: 1199.98px) {
    :root {
    --ts-navbar-height: 58px;
}

    body {
    padding-top: calc(var(--ts-navbar-height) + 14px);
}

    .ts-navbar,
    .ts-navbar-inner {
    min-height: var(--ts-navbar-height);
    height: var(--ts-navbar-height);
}

    .ts-navbar .navbar-collapse,
    .ts-navbar .navbar-collapse.collapsing {
    position: absolute;
    top: calc(100% - 1px);
    right: 22px;
    left: 22px;
    width: auto;
    max-height: calc(100vh - var(--ts-navbar-height) - 18px);
    margin: 7px 0 0;
    padding: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1031;
}
}

@media (max-width: 767.98px) {
    body {
    padding-top: calc(var(--ts-navbar-height) + 10px);
}

    .ts-navbar .navbar-collapse,
    .ts-navbar .navbar-collapse.collapsing {
    right: 12px;
    left: 12px;
}

    /* Keep the two footer groups stacked, but allow the contents inside each
       group to flow naturally instead of putting every fragment on its own row. */
    .ts-footer-inner {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding-block: 14px;
}

    .ts-footer-primary,
    .ts-footer-secondary {
    width: 100%;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 3px 7px;
    line-height: 1.45;
}

    .ts-footer-dot {
    flex: 0 0 auto;
}
}

@media (max-width: 420px) {
    .ts-brand {
    min-width: 0;
    margin-right: 8px;
}

    .ts-brand-mark {
    width: 34px;
    height: 34px;
    margin-right: 8px;
}

    .ts-brand-mark img {
    width: 27px;
    height: 27px;
}
}

/* ==========================================================
 * v1.3.6 — FAQ control stability, live status indicator,
 * compact error state, and Rules heading consistency.
 * ========================================================== */

/* Keep the FAQ chevron anchored to one exact point. Rotating the icon must
   not change its horizontal or vertical position when the answer opens. */
.ts-accordion .card-header .btn-link {
    position: relative;
    padding-right: 34px;
}

.ts-accordion .ts-faq-chevron {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 14px;
    margin: 0 !important;
    padding: 0;
    text-align: center;
    transform: translateY(-50%);
    transform-origin: 50% 50%;
}

.ts-accordion .btn-link[aria-expanded="true"] .ts-faq-chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* Status indicator: neutral while checking, green while online, red when
   the existing status script exposes the error block. No status JS changes. */
.ts-status-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    background: #8b8b8e;
    box-shadow: 0 0 0 2px rgba(156, 156, 159, .10);
    color: #8b8b8e;
    animation: none;
}

.ts-status-card:has(.server-status.loaded .data:not([style*="display: none"])) .ts-status-pulse {
    background: #5dc18f;
    box-shadow: 0 0 0 2px rgba(93, 193, 143, .12);
    color: #5dc18f;
}

.ts-status-card:has(.server-status.loaded .error:not([style*="display: none"])) .ts-status-pulse {
    background: #e26767;
    box-shadow: 0 0 0 2px rgba(226, 103, 103, .12);
    color: #e26767;
}

.ts-status-pulse::after {
    position: absolute;
    inset: -4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
    opacity: .15;
    border-color: currentColor;
}

.ts-status-card:has(.server-status.loaded .data:not([style*="display: none"])) .ts-status-pulse::after,
.ts-status-card:has(.server-status.loaded .error:not([style*="display: none"])) .ts-status-pulse::after {
    animation: ts-status-ring 2.6s ease-in-out infinite;
}

@keyframes ts-status-ring {
    0%, 100% {
    opacity: .10;
    transform: scale(.9);
}
    50% {
    opacity: .28;
    transform: scale(1.18);
}
}

@media (prefers-reduced-motion: reduce) {
    .ts-status-pulse::after {
    animation: none !important;
}
}

/* A failed status request should take only the space its message needs. */
.ts-status-body:has(.ts-status-error:not([style*="display: none"])) {
    min-height: 0;
}

.ts-status-body:has(.ts-status-error:not([style*="display: none"])) .ts-status-error {
    padding: 4px 0;
}

/* Rules uses the same visual page-heading system as the other main pages. */
.ts-rules-page-heading .ts-page-heading-icon {
    flex: 0 0 auto;
}

/* ==========================================================
 * v1.3.7 — full-height desktop navigation and tighter footer.
 * Visual-only refinement; no runtime hooks or markup changed.
 * ========================================================== */

:root {
    --ts-transition: 160ms ease;
    --ts-container: 1440px;
    --ts-radius-sm: 4px;
    --ts-radius: 5px;
    --ts-radius-lg: 6px;
    --font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-family-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --ts-navbar-height: 52px;
    --site-background: #0c0b0b;
    --site-background-raised: #111010;
    --site-surface: #171515;
    --site-surface-2: #1d1b1b;
    --site-surface-3: #242121;
    --site-surface-hover: #292626;
    --site-border: #343436;
    --site-border-soft: rgba(193, 189, 189, .12);
    --site-border-accent: rgba(151, 48, 61, .34);
    --site-text: #dedcdc;
    --site-text-soft: #ada8a8;
    --site-text-muted: #817979;
    --site-heading: #f4f4f4;
    --site-red-deep: #4a171f;
    --site-red-wine: #64212b;
    --site-red-muted: #7d2935;
    --site-red: #963241;
    --site-red-mid: #ad3c4a;
    --site-red-bright: #c8515e;
    --site-primary: var(--site-red);
    --site-primary-hover: var(--site-red-mid);
    --site-primary-soft: rgba(150, 50, 65, .13);
    --site-secondary-color: #8b303c;
    --site-accent-color: #ad3c4a;
    --site-accent-2: #6f2630;
    --site-success: #55b985;
    --site-warning: #d5a34c;
    --site-danger: #d45f69;
    --site-info: #8e6268;
    --site-scrollbar-color: #70303a;
    --site-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    --site-shadow-lg: 0 20px 54px rgba(0, 0, 0, .38);
}

body {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow-x: hidden;
    font-size: 15px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    letter-spacing: -.002em;
    font-family: var(--font-family-main);
    padding-top: calc(var(--ts-navbar-height) + 16px);
    background: #0c0b0b;
    color: var(--site-text);
}

.ts-navbar,
.ts-navbar-inner {
    min-height: var(--ts-navbar-height);
    height: var(--ts-navbar-height);
}

.ts-brand {
    display: inline-flex;
    padding: 0;
    min-width: 200px;
    margin-right: 20px;
    height: 100%;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.ts-brand-mark {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    margin-right: 10px;
    border-radius: 3px;
    border: 1px solid #3b3636;
    width: 32px;
    height: 32px;
    background: linear-gradient(145deg, #1f1c1c, #171515);
    border-color: #39393c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.ts-brand-mark img {
    object-fit: contain;
    width: 25px;
    height: 25px;
}

.ts-brand-copy small {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
    font-size: .64rem;
    color: #857c7c;
}

.ts-navbar-toggler {
    outline: 0 !important;
    border-radius: 3px;
    border: 1px solid #393434;
    box-shadow: none;
    width: 34px;
    height: 34px;
    padding: 6px 7px;
    background: #1d1a1a;
    border-color: #39393c;
}

/* Desktop navigation: every item occupies the complete navbar height rather
   than appearing as a smaller rounded button inside the bar. */
@media (min-width: 1200px) {
    .ts-navbar .navbar-collapse,
    .ts-main-nav,
    .ts-account-nav,
    .ts-main-nav .nav-item,
    .ts-account-nav .nav-item {
    height: 100%;
}

    .ts-navbar .navbar-collapse {
    align-items: stretch;
}

    .ts-main-nav,
    .ts-account-nav {
    align-items: stretch;
}

    .ts-main-nav .nav-item,
    .ts-account-nav .nav-item {
    position: relative;
    display: flex;
    margin: 0;
    align-items: stretch;
}

    .ts-main-nav .nav-link,
    .ts-account-nav .nav-link {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: center;
    padding: 0 13px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

    .ts-main-nav .nav-link:hover,
    .ts-account-nav .nav-link:hover,
    .ts-main-nav .nav-item.active > .nav-link,
    .ts-account-nav .nav-item.show > .nav-link {
    background: linear-gradient(180deg, rgba(150, 50, 65, .075), rgba(150, 50, 65, .025)) !important;
    box-shadow: none !important;
}

    .ts-main-nav .nav-link::after,
    .ts-account-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: calc(100% - 22px);
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, #b74351, #c66975);
    opacity: .95;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .2s ease, opacity .2s ease;
    pointer-events: none;
}

    .ts-main-nav .nav-link:hover::after,
    .ts-account-nav .nav-link:hover::after,
    .ts-main-nav .nav-item.active > .nav-link::after,
    .ts-account-nav .nav-item.show > .nav-link::after {
    transform: translateX(-50%) scaleX(1);
}

    .ts-main-nav .nav-item.active > .nav-link {
    color: #f6e9eb !important;
}

    .ts-main-nav .nav-item.active > .nav-link i {
    color: #c96a76;
}
}

/* The collapsed menu stays detached from the fixed navbar, preserving the
   stable bar height introduced earlier. Inside the dropdown panel, links keep
   a compact menu-row shape rather than inheriting the desktop full-height UI. */
@media (max-width: 1199.98px) {
    body {
    padding-top: calc(var(--ts-navbar-height) + 12px);
}

    .ts-navbar,
    .ts-navbar-inner {
    min-height: var(--ts-navbar-height);
    height: var(--ts-navbar-height);
}

    .ts-navbar .navbar-collapse,
    .ts-navbar .navbar-collapse.collapsing {
    max-height: calc(100vh - var(--ts-navbar-height) - 16px);
    background: #171515;
    border-color: #343436;
    box-shadow: 0 15px 38px rgba(0,0,0,.42);
}

    .ts-main-nav .nav-link,
    .ts-account-nav .nav-link {
    min-height: 39px;
    border-radius: 4px;
}

.ts-main-nav .nav-link:hover,
    .ts-account-nav .nav-link:hover,
    .ts-main-nav .nav-item.active > .nav-link,
    .ts-account-nav .nav-item.show > .nav-link {
    background: linear-gradient(90deg, rgba(150, 50, 65, .13), rgba(150, 50, 65, .035)) !important;
}
}

/* Tighter footer: same content and wrapping behavior, less vertical weight. */
.ts-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    gap: 18px;
    font-size: .75rem;
}

.ts-footer-primary,
.ts-footer-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 767.98px) {
    body {
    padding-top: calc(var(--ts-navbar-height) + 9px);
}

    .ts-footer-inner {
    gap: 4px;
    padding-block: 9px;
}

    .ts-footer-primary,
    .ts-footer-secondary {
    gap: 2px 6px;
    line-height: 1.35;
}
}

@media (prefers-reduced-motion: reduce) {
    .ts-main-nav .nav-link::after,
    .ts-account-nav .nav-link::after {
    transition: none;
}
}

/* ==========================================================
 * v1.4.1 — navigation underline geometry correction.
 * Keep the underline centered on the complete nav item and fully inside the
 * navbar. The item pseudo-element also avoids fighting Bootstrap's dropdown
 * caret, which legitimately uses .dropdown-toggle::after.
 * ========================================================== */
@media (min-width: 1200px) {
    /* Remove the older link-level underline. Main-nav links are never
       Bootstrap dropdown toggles, so their ::after can be safely cleared. */
    .ts-main-nav .nav-link::after,
    .ts-account-nav .nav-link:not(.dropdown-toggle)::after {
    content: none !important;
    display: none !important;
}

    /* Also suppress the legacy nav-item underline copied from the upstream
       theme. We use ::before below so active/hover share one exact geometry. */
    #main-navbar .ts-main-nav .nav-item::after,
    #main-navbar .ts-account-nav .nav-item::after {
    content: none !important;
    display: none !important;
}

    #main-navbar .ts-main-nav .nav-item::before,
    #main-navbar .ts-account-nav .nav-item::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 50%;
    right: auto;
    bottom: 0;
    width: calc(100% - 22px);
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, #b74351, #c66975);
    opacity: .96;
    transform: translateX(-50%) scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .2s ease, opacity .2s ease;
    pointer-events: none;
}

    #main-navbar .ts-main-nav .nav-item:hover::before,
    #main-navbar .ts-main-nav .nav-item.active::before,
    #main-navbar .ts-account-nav .nav-item:hover::before,
    #main-navbar .ts-account-nav .nav-item.show::before {
    transform: translateX(-50%) scaleX(1);
}
}

@media (prefers-reduced-motion: reduce) {
    #main-navbar .ts-main-nav .nav-item::before,
    #main-navbar .ts-account-nav .nav-item::before {
    transition: none;
}
}

/* ==========================================================
 * v1.4.1 — full-width nav underline.
 * The accent now spans the complete nav item while still animating
 * outwards from the center and staying inside the navbar.
 * ========================================================== */
@media (min-width: 1200px) {
    #main-navbar .ts-main-nav .nav-item::before,
    #main-navbar .ts-account-nav .nav-item::before {
    left: 0;
    right: 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: center center;
    background: linear-gradient(90deg, #64212b, #ad3c4a 50%, #7d2935);
    box-shadow: 0 -1px 8px rgba(173, 60, 74, .18);
}

    #main-navbar .ts-main-nav .nav-item:hover::before,
    #main-navbar .ts-main-nav .nav-item.active::before,
    #main-navbar .ts-account-nav .nav-item:hover::before,
    #main-navbar .ts-account-nav .nav-item.show::before {
    transform: scaleX(1);
}
}

/* ==========================================================
 * v1.4.3 — Channel Creator module integration.
 * Presentation only: the module's form names and TeamSpeak workflow remain
 * unchanged. Geometry follows the rest of the v1.4.x interface.
 * ========================================================== */
.ts-channel-creator-card > .card-body {
    padding: 22px;
}

.ts-channel-creator-form {
    width: 100%;
    max-width: 860px;
    margin: 22px auto 4px;
}

.ts-channel-creator-grid {
    margin-right: -8px;
    margin-left: -8px;
}

.ts-channel-creator-grid > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

.ts-channel-creator-grid .form-group {
    margin-bottom: 16px;
}

.ts-form-label {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    color: #c0bbbb;
    font-size: .79rem;
    font-weight: 700;
    letter-spacing: .015em;
}

.ts-form-label i {
    color: #9b5962;
}

.ts-channel-creator-card .form-control,
.ts-channel-creator-card .custom-select {
    min-height: 42px;
}

.ts-channel-creator-card textarea.form-control.ts-channel-creator-description {
    min-height: 112px;
    resize: vertical;
}

.ts-channel-creator-intro,
.ts-channel-creator-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ts-channel-creator-intro .ts-alert-icon,
.ts-channel-creator-alert .ts-alert-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
}


.ts-channel-creator-actions .btn {
    min-width: 176px;
}

.ts-channel-creator-success,
.ts-channel-creator-existing {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .ts-channel-creator-card > .card-body {
    padding: 16px;
}

    .ts-channel-creator-form {
    margin-top: 17px;
}

    .ts-channel-creator-actions {
    justify-content: stretch;
}

    .ts-channel-creator-actions .btn {
    width: 100%;
}
}


/* v1.4.4 — Channel Creator topic/description fields and five-subchannel support. */

/* ==========================================================
 * v1.4.6 — language dropdown/caret cleanup and Viewer client
 * popover readability. Presentation only.
 * ========================================================== */

/* The desktop nav underline now lives on the nav item. Bootstrap's dropdown
   caret also uses ::after, so explicitly restore the caret geometry on
   dropdown triggers and prevent the old link-level underline from surviving
   on Language/User dropdown links. */
@media (min-width: 1200px) {
    #main-navbar .ts-account-nav .dropdown-toggle::after {
    position: static !important;
    display: inline-block !important;
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 0 0 .34rem !important;
    padding: 0 !important;
    vertical-align: .16em;
    background: none !important;
    border-top: .28em solid currentColor !important;
    border-right: .28em solid transparent !important;
    border-bottom: 0 !important;
    border-left: .28em solid transparent !important;
    border-radius: 0 !important;
    opacity: .72;
    transform: none !important;
    transform-origin: center !important;
    transition: opacity .16s ease !important;
    pointer-events: none;
}

    #main-navbar .ts-account-nav .dropdown-toggle:hover::after,
    #main-navbar .ts-account-nav .nav-item.show > .dropdown-toggle::after {
    opacity: 1;
}
}

/* Do not reserve a permanent scrollbar gutter. With only a few languages it
   looked like unexplained empty padding on the menu's right edge. */
#navbarDropdownLanguageChooser + form .dropdown-menu,
.ts-language-link + form .dropdown-menu {
    right: 0;
    left: auto;
    width: max-content;
    min-width: 210px;
    max-width: min(360px, calc(100vw - 24px));
    max-height: min(62vh, 430px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
}

/* Client details can contain translated labels plus human-readable times.
   Give the Viewer popover enough room to keep each label/value pair on one
   line. On very narrow screens it remains viewport-safe and can scroll
   horizontally rather than breaking words into awkward rows. */
.ts-viewer-client-popover {
    width: max-content;
    min-width: 320px;
    max-width: min(430px, calc(100vw - 24px)) !important;
}

.ts-viewer-client-popover .popover-body {
    overflow-x: auto;
}

.ts-viewer-client-popover table {
    width: 100%;
    margin: 0;
    white-space: nowrap;
}

.ts-viewer-client-popover td {
    white-space: nowrap;
    vertical-align: top;
}

.ts-viewer-client-popover td:first-child {
    padding-right: 12px;
}

@media (max-width: 420px) {
    .ts-viewer-client-popover {
    min-width: min(320px, calc(100vw - 24px));
}
}


/* ==========================================================
 * v1.4.7 — Bans fit, centered Channel Creator action, and
 * cleaner page headings without repeated site-name eyebrow.
 * Presentation only.
 * ========================================================== */

/* Bans: let DataTables Responsive decide which columns collapse instead of
   putting the table inside its own horizontal scrolling viewport. */
.ts-table-card .ts-table-wrap {
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
}

.ts-table-card .dataTables_wrapper,
.ts-table-card .dataTables_wrapper > .row,
.ts-table-card #banlist_wrapper,
.ts-table-card #banlist {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

/* The reason/name columns may wrap naturally to keep the five-column desktop
   table within the card. Date/expiry remain compact, and Responsive still
   collapses lower-priority columns on narrower screens. */
#banlist.dataTable th,
#banlist.dataTable td {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}


#banlist.dataTable th:nth-child(1),
#banlist.dataTable td:nth-child(1) {
    width: 20%;
}

#banlist.dataTable th:nth-child(2),
#banlist.dataTable td:nth-child(2) {
    width: 30%;
}

#banlist.dataTable th:nth-child(3),
#banlist.dataTable td:nth-child(3) {
    width: 16%;
}

#banlist.dataTable th:nth-child(4),
#banlist.dataTable td:nth-child(4),
#banlist.dataTable th:nth-child(5),
#banlist.dataTable td:nth-child(5) {
    white-space: nowrap !important;
    width: 17%;
}

/* Match Assigner: primary form action is visually centered. */
.ts-channel-creator-actions {
    display: flex;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(190, 190, 193, .09);
    justify-content: center;
    border-top-color: rgba(190, 190, 193, .09);
}

@media (max-width: 767.98px) {
    .ts-channel-creator-actions {
    justify-content: center;
}

    .ts-channel-creator-actions .btn {
    width: auto;
}
}

/* ==========================================================
 * v1.4.8 — TeamSpeak Rules integrated theme
 * Rules presentation now lives in custom.css and inherits the
 * site's charcoal/crimson design tokens. Remove the inline
 * <style> block from Rules SQL/HTML content and keep only markup.
 * ========================================================== */

.ts-rules {
    --rules-accent: var(--site-accent-color);
    --rules-accent-soft: var(--site-primary-soft);
    --rules-border: var(--site-border);
    --rules-border-soft: var(--site-border-soft);
    --rules-muted: var(--site-text-soft);
    --rules-warning: var(--site-warning);
    width: 100%; margin: 0; padding: 0;
    font-family: inherit; font-size: inherit; line-height: 1.65; color: inherit;
}
.ts-rules *, .ts-rules *::before, .ts-rules *::after { box-sizing: border-box; }
.ts-rules .rules-header { margin: 0 0 24px; padding: 0 0 22px; background: none; border: 0; border-bottom: 1px solid var(--rules-border); border-radius: 0; }
.ts-rules .rules-header h1 { margin: 0 0 8px; color: var(--site-heading); font-size: clamp(26px, 4vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.ts-rules .rules-header p { max-width: 900px; margin: 0; color: var(--rules-muted); font-size: 15px; line-height: 1.7; }
.ts-rules .rules-header-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ts-rules .rules-header-meta span { display: inline-flex; align-items: center; min-height: 29px; padding: 4px 10px; color: var(--site-text); background: var(--site-surface-2); border: 1px solid var(--rules-border); border-radius: var(--ts-radius-sm); font-size: 12px; font-weight: 600; }
.ts-rules .rules-section { scroll-margin-top: calc(var(--ts-navbar-height) + 16px); margin:0 0 28px; padding:0; background:none; border:0; border-radius:0; overflow:visible; }
.ts-rules .rules-section-title { display:flex; align-items:center; gap:11px; margin:0; padding:11px 0 12px; color:var(--site-heading); background:none; border:0; border-bottom:2px solid var(--rules-border); font-size:18px; font-weight:700; line-height:1.35; }
.ts-rules .rules-section-title::after { content:""; display:block; flex:1; }
.ts-rules .section-number { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:35px; height:30px; padding:0 7px; color:var(--rules-accent); background:var(--rules-accent-soft); border:1px solid var(--site-border-accent); border-radius:var(--ts-radius-sm); font-size:12px; font-weight:800; }
.ts-rules .rules-section-body { padding:0; }
.ts-rules .rule { position:relative; margin:0; padding:16px 0 16px 50px; border-bottom:1px solid var(--rules-border-soft); }
.ts-rules .rule:last-child { border-bottom:0; }
.ts-rules .rule-number { position:absolute; top:16px; left:0; display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:26px; padding:0 6px; color:var(--rules-accent); background:var(--rules-accent-soft); border:1px solid var(--site-border-accent); border-radius:var(--ts-radius-sm); font-size:11px; font-weight:800; }
.ts-rules .rule h3 { margin:0 0 4px; color:var(--site-heading); font-size:15px; font-weight:650; line-height:1.4; }
.ts-rules .rule p { margin:0; color:var(--rules-muted); font-size:14px; line-height:1.7; }
.ts-rules ul, .ts-rules ol { margin:10px 0 0; padding-left:21px; }
.ts-rules li { margin:5px 0; color:var(--rules-muted); }
.ts-rules li::marker { color:var(--rules-accent); }
.ts-rules .rules-notice { margin-top:28px; padding:13px 0 13px 17px; color:var(--site-text); background:none; border:0; border-left:3px solid var(--rules-warning); border-radius:0; }
.ts-rules .rules-notice strong { display:block; margin-bottom:3px; color:var(--rules-warning); }
.ts-rules .rules-footer { margin-top:28px; padding-top:18px; color:var(--rules-muted); border-top:1px solid var(--rules-border); font-size:12px; text-align:center; }
@media (max-width:760px){.ts-rules .rules-header h1{font-size:27px}.ts-rules .rules-section-title{font-size:16px}.ts-rules .rule{padding-left:47px}}
@media (max-width:480px){.ts-rules .rules-header{margin-bottom:20px;padding-bottom:18px}.ts-rules .rules-header h1{font-size:24px}.ts-rules .rules-header-meta{gap:6px}.ts-rules .rules-header-meta span{font-size:11px}.ts-rules .rules-section{margin-bottom:23px}.ts-rules .rule{padding:15px 0 15px 45px}.ts-rules .rule-number{top:15px;min-width:35px}}

/* ==========================================================
 * v1.5.2 — Rules uses the exact FAQ accordion component
 * rules.js converts database HTML into the same .ts-accordion / .card /
 * .card-header / .btn-link / .ts-faq-number / .ts-faq-chevron /
 * .ts-copy-link structure used by faq.latte. Keep only Rules-specific
 * content layout here; visual accordion behavior comes from FAQ CSS.
 * ========================================================== */

.ts-rules.ts-rules-enhanced .rules-accordion {
    margin-top: 0;
}

.ts-rules.ts-rules-enhanced .rules-accordion > .card {
    scroll-margin-top: calc(var(--ts-navbar-height) + 12px);
}

.ts-rules.ts-rules-enhanced .rules-accordion .card-body.ts-reading-content {
    padding: 14px;
}

.ts-rules.ts-rules-enhanced .rule {
    scroll-margin-top: calc(var(--ts-navbar-height) + 18px);
}

.ts-rules.ts-rules-enhanced .rules-rule-title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.ts-rules.ts-rules-enhanced .rules-rule-title-row > h3 {
    min-width: 0;
    flex: 1 1 auto;
    margin-bottom: 4px;
}

.ts-rules.ts-rules-enhanced .rules-rule-title-row > .ts-copy-link {
    flex: 0 0 32px;
}

@media (max-width: 480px) {
    .ts-rules.ts-rules-enhanced .rules-accordion .card-body.ts-reading-content {
        padding: 12px;
    }
}

/* ==========================================================
 * v1.5.3 — authenticated TS Options navigation dropdown.
 * Assigner, Channel Creator and Bans now share one parent item.
 * The parent remains active while any child page is active.
 * ========================================================== */

/* Treat an open main-nav dropdown like an active/hovered navigation item. */
.ts-main-nav .nav-item.show > .nav-link {
    color: #f3f2f2 !important;
}

.ts-options-menu {
    min-width: 220px;
}

.ts-options-menu .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 38px;
    gap: 2px;
}

.ts-options-menu .dropdown-item i {
    flex: 0 0 18px;
}

@media (min-width: 1200px) {
    /* Main-nav dropdowns need Bootstrap's caret too. Older navbar cleanup
       intentionally removed link ::after so the underline could live on the
       nav item; restore only the actual dropdown caret here. */
    #main-navbar .ts-main-nav .dropdown-toggle::after {
        position: static !important;
        display: inline-block !important;
        content: "" !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 0 0 .34rem !important;
        padding: 0 !important;
        vertical-align: .16em;
        background: none !important;
        border-top: .28em solid currentColor !important;
        border-right: .28em solid transparent !important;
        border-bottom: 0 !important;
        border-left: .28em solid transparent !important;
        border-radius: 0 !important;
        opacity: .72;
        transform: none !important;
        transform-origin: center !important;
        transition: opacity .16s ease !important;
        pointer-events: none;
    }

    #main-navbar .ts-main-nav .dropdown-toggle:hover::after,
    #main-navbar .ts-main-nav .nav-item.show > .dropdown-toggle::after,
    #main-navbar .ts-main-nav .nav-item.active > .dropdown-toggle::after {
        opacity: 1;
    }

    #main-navbar .ts-main-nav .nav-item.show::before {
        transform: scaleX(1);
    }

    .ts-main-nav .nav-item.show > .nav-link {
        background: linear-gradient(180deg, rgba(150, 50, 65, .075), rgba(150, 50, 65, .025)) !important;
    }

    .ts-options-menu {
        margin-top: 0;
    }
}

@media (max-width: 1199.98px) {
    .ts-main-nav .nav-item.show > .nav-link {
        background: linear-gradient(90deg, rgba(150, 50, 65, .13), rgba(150, 50, 65, .035)) !important;
    }

    .ts-options-menu {
        width: 100%;
        min-width: 0;
        margin: 2px 0 5px;
    }

    .ts-options-menu .dropdown-item {
        padding-left: 1rem;
    }
}


/* ==========================================================
 * v1.5.4 — status icon spacing.
 * Server version/platform and Admin Away append an icon after text;
 * give those suffix icons explicit left spacing without changing
 * the normal icon-before-label spacing used elsewhere.
 * ========================================================== */

.server-status .ts-stat-row .badge > i:last-child,
.admin-status .status-container .status .badge > i:last-child {
    margin-left: .42em !important;
    margin-right: 0 !important;
}

/* ==========================================================
 * v1.5.5 — FAQ / Rules cleaner controls.
 * Remove expand/collapse chevrons and reveal copy-link controls
 * only for the row currently hovered or keyboard-focused.
 * ========================================================== */

/* No arrow is needed: the whole FAQ/Rules heading already toggles collapse. */
.ts-accordion .ts-faq-chevron {
    display: none !important;
}

/* Reclaim the space that was reserved for the old absolutely-positioned arrow. */
.ts-accordion .card-header .btn-link {
    padding-right: 8px;
}

/* Keep the copy control's 32px slot reserved so headings do not shift on hover,
   but do not visually expose the control until its own row is interacted with. */
.ts-accordion .card-header > .ts-copy-link,
.ts-rules.ts-rules-enhanced .rules-rule-title-row > .ts-copy-link {
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease,
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.ts-accordion .card-header:hover > .ts-copy-link,
.ts-accordion .card-header:focus-within > .ts-copy-link,
.ts-accordion .card-header > .ts-copy-link:focus-visible,
.ts-rules.ts-rules-enhanced .rules-rule-title-row:hover > .ts-copy-link,
.ts-rules.ts-rules-enhanced .rules-rule-title-row:focus-within > .ts-copy-link,
.ts-rules.ts-rules-enhanced .rules-rule-title-row > .ts-copy-link:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================
 * v1.5.7 — Rules numbering/subsection hierarchy + focused tips.
 * Categories use 1, 2, 3... and individual rule headers reuse
 * the same visual language as FAQ/Rules category headers.
 * Informational alerts use a cool-blue treatment so tips stand
 * apart from the site's charcoal/crimson application chrome.
 * ========================================================== */

/* Informational/tip alerts should be unmistakable without looking like errors. */
.alert-info {
    background: rgba(74, 137, 201, .13);
    border-color: rgba(104, 166, 229, .34);
    border-left: 3px solid #68a6e5;
    color: #c9e4ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 4px 14px rgba(0, 0, 0, .12);
}

.alert-info > i:first-child {
    color: #82bcf5;
}

.alert-info a,
.alert-info .alert-link {
    color: #eef7ff;
}

.alert-info a:hover,
.alert-info .alert-link:hover {
    color: #ffffff;
}

/* Enhanced Rules: each 1.1 / 1.2 / ... subsection reads like a smaller
   version of the category header instead of a plain indented text block. */
.ts-rules.ts-rules-enhanced .rule {
    margin: 0 0 8px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    background: var(--site-surface);
}

.ts-rules.ts-rules-enhanced .rule:last-child {
    margin-bottom: 0;
    border-bottom: 1px solid var(--site-border);
}

.ts-rules.ts-rules-enhanced .rules-rule-title-row {
    display: flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    gap: 0;
    padding: 5px 8px !important;
}

.ts-rules.ts-rules-enhanced .rules-rule-title-row > .rules-rule-number {
    position: static;
    top: auto;
    left: auto;
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 26px;
    margin: 0 10px 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ts-rules.ts-rules-enhanced .rules-rule-title-row > .rules-rule-heading {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    color: #d3d0d0;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
}

.ts-rules.ts-rules-enhanced .rules-rule-title-row:hover > .rules-rule-heading,
.ts-rules.ts-rules-enhanced .rules-rule-title-row:focus-within > .rules-rule-heading {
    color: #f3f3f3;
}

.ts-rules.ts-rules-enhanced .rules-rule-title-row > .ts-copy-link {
    flex: 0 0 32px;
    margin-left: 8px;
}

.ts-rules.ts-rules-enhanced .rules-rule-body {
    padding: 12px 14px 13px;
    color: var(--rules-muted);
    border-top: 1px solid var(--site-border-soft);
}

.ts-rules.ts-rules-enhanced .rules-rule-body > :first-child {
    margin-top: 0;
}

.ts-rules.ts-rules-enhanced .rules-rule-body > :last-child {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .ts-rules.ts-rules-enhanced .rules-rule-title-row {
        min-height: 46px;
        padding: 5px 7px !important;
    }

    .ts-rules.ts-rules-enhanced .rules-rule-title-row > .rules-rule-number {
        margin-right: 8px;
    }

    .ts-rules.ts-rules-enhanced .rules-rule-body {
        padding: 11px 12px 12px;
    }
}

/* ==========================================================
 * v1.6.0 — authenticated user profile.
 * Uses the existing charcoal/crimson theme variables and keeps the
 * information dense without recreating the old page's oversized layout.
 * ========================================================== */

/* Authenticated navbar avatar: keep the FA user as a true fallback and only
   reveal the downloaded TeamSpeak avatar after the image has loaded. */
.ts-avatar-shell {
    position: relative;
    overflow: hidden;
}

.ts-avatar-shell .ts-avatar-fallback,
.ts-avatar-shell .ts-avatar-image {
    transition: opacity 140ms ease;
}

.ts-avatar-shell .ts-avatar-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.ts-avatar-shell.has-avatar .ts-avatar-image {
    opacity: 1;
}

.ts-avatar-shell.has-avatar .ts-avatar-fallback {
    opacity: 0;
}

/* Keep the account dropdown visually active while Profile is open, matching
   the active parent behavior already used by TS Options. */
#main-navbar .ts-account-nav .nav-item.active > .nav-link {
    background: #201d1d;
    color: #f3f2f2 !important;
}

@media (min-width: 1200px) {
    #main-navbar .ts-account-nav .nav-item.active::before {
        transform: scaleX(1);
    }
}

.ts-profile-login-state,
.ts-protected-state {
    max-width: 620px;
    margin: 28px auto;
    padding: 18px 12px 24px;
}

.ts-profile-login-state .ts-empty-icon,
.ts-protected-state .ts-empty-icon {
    margin-bottom: 14px;
}

.ts-profile-login-state h4,
.ts-protected-state h4 {
    margin: 0 0 7px;
    font-size: 1.08rem;
}

.ts-profile-login-state p {
    margin: 0 auto 18px;
    line-height: 1.6;
}

.ts-profile-hero {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
    padding: 2px 2px 18px;
    border-bottom: 1px solid var(--site-border-soft);
}

.ts-profile-avatar {
    display: grid;
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    place-items: center;
    border: 1px solid var(--site-border);
    border-radius: 50%;
    background: var(--site-surface-2);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

.ts-profile-avatar .ts-avatar-fallback {
    margin: 0;
    color: var(--site-text-muted);
    font-size: 1.8rem;
}

.ts-profile-avatar .ts-avatar-image {
    border-radius: inherit;
}

.ts-profile-hero-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.ts-profile-hero-copy h2 {
    margin: 0 0 5px;
    overflow-wrap: anywhere;
    font-size: clamp(1.15rem, 2.3vw, 1.45rem);
    font-weight: 750;
    letter-spacing: -.015em;
}

.ts-profile-uid,
.ts-profile-code {
    font-family: var(--font-family-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    overflow-wrap: anywhere;
}

.ts-profile-uid {
    color: var(--site-text-muted);
    font-size: .77rem;
}

.ts-profile-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

.ts-profile-status-row .badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: .32rem .48rem;
}

.ts-profile-status-row .badge > i,
.ts-profile-meta-badge > i {
    margin-right: .42em !important;
}

.badge-dark.ts-profile-meta-badge {
    border: 1px solid var(--site-border);
    background: var(--site-surface-2);
    color: var(--site-text-soft);
}

.ts-profile-alert {
    margin: 14px 0 0;
}

.ts-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 5px;
}

.ts-profile-grid-secondary {
    margin-top: 0;
}

.ts-profile-section {
    min-width: 0;
    padding-top: 18px;
}

.ts-profile-section-wide {
    margin-top: 2px;
    border-top: 1px solid var(--site-border-soft);
}

.ts-profile-section h3 {
    display: flex;
    align-items: center;
    margin: 0 0 9px;
    color: var(--site-heading);
    font-size: .82rem;
    font-weight: 750;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.ts-profile-section h3 > i {
    margin-right: .55em;
    color: #bd7781;
}

.ts-profile-data-list {
    margin: 0;
}

.ts-profile-data-row {
    display: grid;
    grid-template-columns: minmax(125px, .78fr) minmax(0, 1.22fr);
    gap: 12px;
    min-height: 41px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--site-border-soft);
}

.ts-profile-data-row:last-child {
    border-bottom: 0;
}

.ts-profile-data-row dt,
.ts-profile-data-row dd {
    min-width: 0;
    margin: 0;
}

.ts-profile-data-row dt,
.ts-profile-description-label {
    color: var(--site-text-soft);
    font-size: .77rem;
    font-weight: 650;
}

.ts-profile-data-row dd {
    color: var(--site-text);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.ts-profile-data-row dd > i {
    margin-right: .45em;
}

.ts-profile-description-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--site-border-soft);
}

.ts-profile-description-label {
    display: block;
    margin-bottom: 6px;
}

.ts-profile-description {
    color: var(--site-text);
    font-size: .82rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ts-profile-state-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--site-border-soft);
}

.ts-profile-state-grid > div {
    display: flex;
    min-width: 0;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ts-profile-state-grid > div > span {
    min-width: 0;
    color: var(--site-text-soft);
    font-size: .75rem;
}

.ts-profile-state-grid .badge {
    flex: 0 0 auto;
}

.ts-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ts-profile-group-tag {
    display: inline-flex;
    min-width: 0;
    min-height: 31px;
    align-items: center;
    padding: 5px 8px;
    color: var(--site-text);
    background: var(--site-surface-2);
    border: 1px solid var(--site-border);
    border-radius: 4px;
    font-size: .78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ts-profile-group-tag img,
.ts-profile-group-tag > i {
    width: 16px;
    max-width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0 7px 0 0 !important;
    object-fit: contain;
}

.ts-profile-group-tag > i {
    display: inline-grid;
    place-items: center;
    color: var(--site-text-muted);
    font-size: .7rem;
}

.ts-profile-badges .ts-profile-group-tag.ts-profile-code {
    max-width: 100%;
    font-size: .7rem;
}

.ts-profile-inline-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: var(--site-text-muted);
    font-size: .8rem;
}

.ts-profile-inline-empty > i {
    margin: 0;
}

@media (max-width: 767.98px) {
    .ts-profile-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ts-profile-grid-secondary {
        margin-top: 0;
    }

    .ts-profile-section-wide {
        margin-top: 16px;
    }
}

@media (max-width: 575.98px) {
    .ts-profile-hero {
        align-items: flex-start;
        gap: 12px;
    }

    .ts-profile-avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .ts-profile-avatar .ts-avatar-fallback {
        font-size: 1.35rem;
    }

    .ts-profile-data-row {
        grid-template-columns: 1fr;
        gap: 3px;
        min-height: 0;
        padding: 9px 0;
    }

    .ts-profile-state-grid {
        grid-template-columns: 1fr;
    }

    .ts-profile-group-tag {
        max-width: 100%;
    }
}


/* ==========================================================
 * v1.6.1 — Profile page shell alignment.
 * Profile now uses the same separate page-heading + content-card pattern
 * as Rules and FAQ. Card-body spacing intentionally falls back to the
 * global card rules so all top-level pages share the same rhythm.
 * ========================================================== */

.ts-page-heading + .ts-profile-card {
    margin-top: 0;
}

/* ==========================================================
 * v1.6.2 — slightly tighter global heading typography.
 * Keep the Rules / FAQ / Profile page-heading hierarchy, but
 * reduce oversized heading/card-header text without touching body copy.
 * ========================================================== */

.ts-page-heading h1 {
    font-size: clamp(1rem, 1.25vw, 1.12rem);
}

.card > .card-header,
.card.card-accent > .card-header {
    font-size: .9rem;
}

@media (max-width: 575.98px) {
    .ts-page-heading h1 {
        font-size: 1rem;
    }

    .card > .card-header,
    .card.card-accent > .card-header {
        font-size: .86rem;
    }
}

/* ==========================================================
 * v1.6.3 — navbar simplification and responsive dropdown cleanup.
 * Brand is icon-only, desktop language switcher is icon-only,
 * mobile dropdowns expand flat, and dropdown parents share the
 * same active underline geometry as normal navigation items.
 * ========================================================== */

/* Brand: the mark is strong enough on its own. Remove the decorative shell
   and all title/subtitle geometry so the navbar gets more breathing room. */
#main-navbar .ts-brand {
    min-width: 0;
    width: auto;
    margin-right: 14px;
}

#main-navbar .ts-brand-mark {
    width: 36px;
    height: 36px;
    margin: 0;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#main-navbar .ts-brand-mark img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Language selector: desktop keeps only the language icon. The native
   language name returns in the collapsed/mobile navigation. */
#main-navbar .ts-language-label {
    display: none;
}

@media (min-width: 1200px) {
    #main-navbar .ts-language-link > i {
        margin-right: 0 !important;
    }

    /* Keep dropdown triggers on the exact same nav-item underline system as
       ordinary links. ::after belongs exclusively to Bootstrap's caret. */
    #main-navbar .ts-main-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after,
    #main-navbar .ts-account-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after {
        content: none !important;
        display: none !important;
    }

    #main-navbar .ts-main-nav > .nav-item > .dropdown-toggle::after,
    #main-navbar .ts-account-nav > .nav-item > .dropdown-toggle::after {
        position: static !important;
        display: inline-block !important;
        content: "" !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 0 0 .34rem !important;
        padding: 0 !important;
        vertical-align: .16em;
        background: none !important;
        border-top: .28em solid currentColor !important;
        border-right: .28em solid transparent !important;
        border-bottom: 0 !important;
        border-left: .28em solid transparent !important;
        border-radius: 0 !important;
        opacity: .72;
        transform: none !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    #main-navbar .ts-main-nav > .nav-item:hover::before,
    #main-navbar .ts-main-nav > .nav-item.active::before,
    #main-navbar .ts-main-nav > .nav-item.show::before,
    #main-navbar .ts-account-nav > .nav-item:hover::before,
    #main-navbar .ts-account-nav > .nav-item.active::before,
    #main-navbar .ts-account-nav > .nav-item.show::before {
        transform: scaleX(1);
    }
}

@media (max-width: 1199.98px) {
    /* Give the two controls in the fixed bar a deliberate inset from the
       viewport rather than letting them visually stick to the edges. */
    #main-navbar .ts-navbar-inner {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    #main-navbar .ts-brand {
        margin-right: 0;
    }

    #main-navbar .ts-brand-mark {
        width: 36px;
        height: 36px;
    }

    #main-navbar .ts-brand-mark img {
        width: 32px;
        height: 32px;
    }

    #main-navbar .ts-navbar-toggler {
        margin-right: 0;
        margin-left: auto;
    }

    #main-navbar .ts-language-label {
        display: inline;
    }

    #main-navbar .ts-language-link > i {
        margin-right: .55em !important;
    }

    /* Flatten nested dropdowns inside the already-contained mobile navbar.
       The outer collapse remains the single menu surface; child menus are
       simply indented rows instead of cards inside cards. */
    #main-navbar .navbar-collapse .dropdown-menu {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none;
        margin: 0 !important;
        padding: .12rem 0 .35rem 1.45rem !important;
        overflow: visible;
        transform: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #main-navbar .navbar-collapse .dropdown-item {
        min-height: 36px;
        padding: .42rem .6rem;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #main-navbar .navbar-collapse .dropdown-item:hover,
    #main-navbar .navbar-collapse .dropdown-item:focus,
    #main-navbar .navbar-collapse .dropdown-item.active,
    #main-navbar .navbar-collapse .dropdown-item:active {
        background: transparent !important;
        color: #f4f4f4 !important;
    }

    #main-navbar .navbar-collapse .dropdown-item.active {
        font-weight: 700;
    }

    #main-navbar .navbar-collapse .dropdown-item.active i,
    #main-navbar .navbar-collapse .dropdown-item:hover i,
    #main-navbar .navbar-collapse .dropdown-item:focus i {
        color: #c9828b;
    }

    #main-navbar .navbar-collapse .dropdown-divider {
        margin: .25rem .6rem;
        border-top-color: var(--site-border-soft);
    }

    /* Mobile underline: use ::before for the accent so ::after remains free
       for the dropdown caret. This fixes the long/white TS Options line and
       gives normal links and dropdown parents one identical active state. */
    #main-navbar .ts-main-nav > .nav-item > .nav-link,
    #main-navbar .ts-account-nav > .nav-item > .nav-link {
        position: relative;
    }

    #main-navbar .ts-main-nav > .nav-item > .nav-link::before,
    #main-navbar .ts-account-nav > .nav-item > .nav-link::before {
        content: "";
        position: absolute;
        right: 10px;
        bottom: 3px;
        left: 10px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(173, 60, 74, .35), #b95a67, rgba(173, 60, 74, .35));
        opacity: 0;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .18s ease, opacity .18s ease;
        pointer-events: none;
    }

    #main-navbar .ts-main-nav > .nav-item:hover > .nav-link::before,
    #main-navbar .ts-main-nav > .nav-item.active > .nav-link::before,
    #main-navbar .ts-main-nav > .nav-item.show > .nav-link::before,
    #main-navbar .ts-account-nav > .nav-item:hover > .nav-link::before,
    #main-navbar .ts-account-nav > .nav-item.active > .nav-link::before,
    #main-navbar .ts-account-nav > .nav-item.show > .nav-link::before {
        opacity: 1;
        transform: scaleX(1);
    }

    /* Retire the legacy active-link ::after underline. */
    #main-navbar .ts-main-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after,
    #main-navbar .ts-account-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after {
        content: none !important;
        display: none !important;
    }

    /* Dropdown ::after is now only a caret in collapsed navigation. */
    #main-navbar .ts-main-nav > .nav-item > .dropdown-toggle::after,
    #main-navbar .ts-account-nav > .nav-item > .dropdown-toggle::after {
        position: static !important;
        display: inline-block !important;
        content: "" !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 0 0 .34rem !important;
        padding: 0 !important;
        vertical-align: .16em;
        background: none !important;
        border-top: .26em solid currentColor !important;
        border-right: .26em solid transparent !important;
        border-bottom: 0 !important;
        border-left: .26em solid transparent !important;
        border-radius: 0 !important;
        opacity: .72;
        transform: none !important;
        box-shadow: none !important;
        pointer-events: none;
    }
}

@media (max-width: 420px) {
    #main-navbar .ts-navbar-inner {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    #main-navbar .ts-brand-mark {
        width: 34px;
        height: 34px;
        margin: 0;
    }

    #main-navbar .ts-brand-mark img {
        width: 30px;
        height: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #main-navbar .ts-main-nav > .nav-item > .nav-link::before,
    #main-navbar .ts-account-nav > .nav-item > .nav-link::before {
        transition: none;
    }
}


/* ==========================================================
 * v1.6.4 — mobile brand restoration and unified protected pages.
 * Desktop remains icon-only; mobile restores the configured brand/title.
 * Logged-out page gates share one consistent profile-style presentation.
 * ========================================================== */

/* Desktop: icon only. The markup keeps the brand copy available so the
   collapsed/mobile navbar can restore it without duplicating the brand. */
@media (min-width: 1200px) {
    #main-navbar .ts-brand-copy {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    #main-navbar .ts-brand {
        max-width: calc(100% - 54px);
        gap: 9px;
    }

    #main-navbar .ts-brand-copy {
        display: flex !important;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        line-height: 1.1;
    }

    #main-navbar .ts-brand-copy strong {
        display: block;
        max-width: min(230px, calc(100vw - 130px));
        overflow: hidden;
        color: #f3f3f3;
        font-size: .88rem;
        font-weight: 700;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #main-navbar .ts-brand-copy small {
        display: block !important;
        margin-top: 2px;
        color: var(--site-text-muted);
        font-size: .58rem;
        font-weight: 650;
        line-height: 1;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
}

@media (max-width: 420px) {
    #main-navbar .ts-brand-copy strong {
        max-width: calc(100vw - 128px);
        font-size: .84rem;
    }

    #main-navbar .ts-brand-copy small {
        font-size: .55rem;
    }
}

/* Logged-out navbar account action uses the same plain FA geometry as the
   rest of the navigation. The authenticated avatar keeps its existing round
   24px shell and fallback/image behavior untouched. */
#main-navbar .ts-account-nav .nav-link[data-openLoginModal] > i {
    margin-right: .55em !important;
}

/* One shared protection state for Profile, Assigner, Channel Creator and
   Bans. The page heading remains visible so direct links still have context. */
.ts-protected-state {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ts-protected-state .btn {
    min-width: 170px;
}

@media (max-width: 575.98px) {
    .ts-protected-state {
        min-height: 165px;
        margin: 16px auto;
        padding: 16px 8px 20px;
    }

    .ts-protected-state h4 {
        max-width: 420px;
        font-size: 1rem;
        line-height: 1.45;
    }

    .ts-protected-state .btn {
        width: auto;
        min-width: 156px;
    }
}

/* ==========================================================
 * v1.6.6 — User Profile information hierarchy.
 * Stable database-backed information is grouped first; live-only
 * TeamSpeak session information appears in a clearly separated zone
 * only while the authenticated client is connected.
 * ========================================================== */

.ts-profile-zone {
    margin-top: 22px;
}

.ts-profile-zone + .ts-profile-zone {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--site-border);
}

.ts-profile-zone-heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 5px;
}

.ts-profile-zone-heading-icon {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    color: var(--site-red-bright);
    background: var(--site-primary-soft);
    border: 1px solid var(--site-border-accent);
    border-radius: var(--ts-radius-sm);
    font-size: .78rem;
}

.ts-profile-zone-heading-copy {
    min-width: 0;
}

.ts-profile-zone-heading-copy h2 {
    margin: 0;
    color: var(--site-heading);
    font-size: .94rem;
    font-weight: 760;
    line-height: 1.35;
    letter-spacing: .005em;
}

.ts-profile-zone-heading-copy p {
    max-width: 820px;
    margin: 3px 0 0;
    color: var(--site-text-muted);
    font-size: .76rem;
    line-height: 1.55;
}

.ts-profile-zone .ts-profile-grid {
    margin-top: 0;
}

.ts-profile-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.ts-profile-category {
    position: relative;
}

.ts-profile-category + .ts-profile-category.ts-profile-section-wide,
.ts-profile-grid + .ts-profile-category.ts-profile-section-wide {
    margin-top: 14px;
}

.ts-profile-zone-live .ts-profile-category {
    padding-top: 17px;
}

.ts-profile-zone-live .ts-profile-section-wide {
    border-top-color: var(--site-border-soft);
}

@media (max-width: 767.98px) {
    .ts-profile-zone + .ts-profile-zone {
        margin-top: 24px;
        padding-top: 20px;
    }

    .ts-profile-zone-heading {
        margin-bottom: 2px;
    }

    .ts-profile-grid-single {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ts-profile-zone {
        margin-top: 18px;
    }

    .ts-profile-zone-heading-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .ts-profile-zone-heading-copy h2 {
        font-size: .9rem;
    }

    .ts-profile-zone-heading-copy p {
        font-size: .73rem;
    }
}

/* =========================================================
 * v1.6.7 — Profile icon alignment
 * Keep all profile heading icons geometrically centered.
 * ========================================================= */

.ts-profile-zone-heading-icon > i {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    text-align: center;
}

.ts-profile-section h3 > i {
    display: inline-flex;
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 1.25em;
    align-items: center;
    justify-content: center;
    margin-right: .55em;
    line-height: 1;
    text-align: center;
}


/* ==========================================================
 * v1.6.10 — cleaner myTeamSpeak badges & integrations.
 * Keep the profile compact: badge UUIDs are functional data,
 * while known integration ID 1 is presented as Twitch.
 * ========================================================== */

.ts-profile-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
}

.ts-profile-badge-item {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border);
    border-radius: 4px;
}

.ts-profile-badge-icon {
    display: inline-grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    color: var(--site-accent-color);
    background: var(--site-primary-soft);
    border: 1px solid var(--site-border-accent);
    border-radius: 3px;
}

.ts-profile-badge-icon > i {
    margin: 0 !important;
    font-size: .7rem;
}

.ts-profile-badge-item code {
    min-width: 0;
    padding: 0;
    color: var(--site-text);
    background: transparent;
    font-size: .68rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ts-profile-badge-overwolf {
    grid-column: 1 / -1;
    color: var(--site-text);
    font-size: .78rem;
}

.ts-profile-integrations {
    display: grid;
    gap: 8px;
}

.ts-profile-integration-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border);
    border-radius: 5px;
}

.ts-profile-integration-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--site-text-soft);
    background: var(--site-surface-3);
    border: 1px solid var(--site-border);
    border-radius: 4px;
}

.ts-profile-integration-icon > i {
    margin: 0 !important;
    font-size: 1rem;
}

.ts-profile-integration-twitch .ts-profile-integration-icon {
    color: #b69cff;
    background: rgba(145, 70, 255, .10);
    border-color: rgba(145, 70, 255, .34);
}

.ts-profile-integration-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ts-profile-integration-copy strong {
    color: var(--site-heading);
    font-size: .86rem;
    line-height: 1.25;
}

.ts-profile-integration-copy span {
    color: var(--site-text-muted);
    font-size: .72rem;
    line-height: 1.3;
}

.ts-profile-integration-meta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

.ts-profile-integration-id {
    color: var(--site-text-muted);
    font-family: var(--font-family-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: .67rem;
}

.ts-profile-integration-details {
    margin-top: 12px;
}

@media (max-width: 767.98px) {
    .ts-profile-badge-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ts-profile-integration-card {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
    }

    .ts-profile-integration-icon {
        width: 34px;
        height: 34px;
    }

    .ts-profile-integration-meta {
        grid-column: 2;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* =========================================================
   v1.7.1 - Backend administration dashboard (single body.latte)
   ========================================================= */

.ts-admin-body .site-main {
    /* The shared body already uses a flex column with a flexible main area.
       Do not force an additional viewport height here: navbar spacing + footer
       would otherwise create a scrollbar on short admin pages. */
    min-height: 0;
}

.ts-admin-content-column {
    flex: 0 0 100%;
    max-width: 100%;
}

.ts-admin-body .ts-page-heading {
    margin-bottom: 14px;
}

.ts-admin-page-heading p {
    max-width: 820px;
}

.ts-admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ts-admin-summary-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 14px;
    color: var(--site-text);
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: 5px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.ts-admin-summary-card:hover {
    color: var(--site-text);
    background: var(--site-surface-2);
    border-color: var(--site-border-accent);
    text-decoration: none;
    transform: translateY(-1px);
}

.ts-admin-summary-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--site-accent-color);
    background: var(--site-primary-soft);
    border: 1px solid var(--site-border-accent);
    border-radius: 4px;
}

.ts-admin-summary-icon > i {
    margin: 0 !important;
}

.ts-admin-summary-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ts-admin-summary-copy strong {
    color: var(--site-heading);
    font-size: .94rem;
}

.ts-admin-summary-copy small {
    color: var(--site-text-muted);
    font-size: .74rem;
}

.ts-admin-summary-counts {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px;
}

.ts-admin-summary-counts span {
    min-width: 52px;
    padding: 5px 7px;
    color: var(--site-text-muted);
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
    font-size: .68rem;
    text-align: center;
}

.ts-admin-summary-counts b {
    display: block;
    color: var(--site-heading);
    font-size: .86rem;
    line-height: 1.15;
}

.ts-admin-permissions-card,
.ts-admin-content-card {
    overflow: visible;
}

.ts-admin-permission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.ts-admin-permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 10px 11px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
}

.ts-admin-permission-name {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: var(--site-heading);
    font-weight: 650;
    font-size: .82rem;
}

.ts-admin-permission-name > i {
    display: inline-grid;
    width: 18px;
    margin: 0 !important;
    place-items: center;
    color: var(--site-accent-color);
}

.ts-admin-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 52px;
}

.ts-admin-list-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ts-admin-search {
    position: relative;
    width: min(360px, 100%);
}

.ts-admin-search > i {
    position: absolute;
    top: 50%;
    left: 11px;
    z-index: 2;
    margin: 0 !important;
    color: var(--site-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.ts-admin-search .form-control {
    padding-left: 34px;
}

.ts-admin-readonly {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--site-text-muted);
    font-size: .75rem;
}

.ts-admin-readonly > i {
    margin: 0 !important;
}

.ts-admin-content-list {
    display: grid;
    gap: 7px;
}

.ts-admin-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 11px 12px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
}

.ts-admin-content-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
}

.ts-admin-content-id {
    min-width: 36px;
    padding-top: 2px;
    color: var(--site-text-muted);
    font-family: var(--font-family-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: .68rem;
}

.ts-admin-content-row h3,
.ts-admin-rules-summary h3 {
    margin: 0 0 4px;
    color: var(--site-heading);
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ts-admin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--site-text-muted);
    font-size: .69rem;
}

.ts-admin-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ts-admin-meta i {
    margin: 0 !important;
}

.ts-admin-row-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.ts-admin-empty {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 24px;
    color: var(--site-text-muted);
    text-align: center;
}

.ts-admin-empty > i {
    margin: 0 !important;
    color: var(--site-accent-color);
    font-size: 1.55rem;
}

.ts-admin-empty strong {
    color: var(--site-heading);
    font-size: .9rem;
}

.ts-admin-empty span {
    max-width: 560px;
    font-size: .75rem;
}

.ts-admin-modal .modal-dialog {
    max-height: calc(100vh - 32px);
}

.ts-admin-modal .modal-content {
    max-height: calc(100vh - 32px);
}

.ts-admin-modal .modal-body {
    overflow-y: auto;
}

.ts-admin-modal .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ts-admin-modal .modal-title > i {
    margin: 0 !important;
    color: var(--site-accent-color);
}

.ts-admin-html-editor {
    min-height: 220px;
    resize: vertical;
    font-family: var(--font-family-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: .78rem;
    line-height: 1.55;
}

.ts-admin-rules-editor {
    min-height: 52vh;
}

.ts-admin-rules-document {
    display: grid;
    gap: 12px;
}

.ts-admin-rules-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
}

.ts-admin-code-preview {
    max-height: 300px;
    overflow: auto;
    padding: 12px;
    color: var(--site-text-soft);
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
    font-family: var(--font-family-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: .72rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ts-admin-flash {
    margin-bottom: 12px;
}

@media (max-width: 991.98px) {
    .ts-admin-dashboard-grid,
    .ts-admin-permission-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .ts-admin-card-toolbar,
    .ts-admin-list-tools {
        align-items: stretch;
        flex-direction: column;
    }


    .ts-admin-search {
        width: 100%;
    }

    .ts-admin-content-row {
        align-items: stretch;
        flex-direction: column;
    }

    .ts-admin-row-actions {
        justify-content: flex-end;
    }

    .ts-admin-rules-summary {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .ts-admin-rules-summary .ts-admin-row-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 479.98px) {
    .ts-admin-summary-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .ts-admin-summary-icon {
        width: 38px;
        height: 38px;
    }

    .ts-admin-summary-counts {
        grid-column: 2;
        justify-content: start;
    }

}

/* --------------------------------------------------------------------------
   v1.7.4 - Admin permissions + content-language controls
   -------------------------------------------------------------------------- */
.ts-admin-language-filter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.ts-admin-language-filter label {
    margin: 0;
    color: var(--site-text-muted);
    font-size: .73rem;
    font-weight: 600;
    white-space: nowrap;
}

.ts-admin-language-filter .form-control {
    width: auto;
    min-width: 180px;
}

.ts-admin-list-tools .ts-admin-search {
    margin-left: auto;
}

.ts-admin-content-title-line {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 4px;
}

.ts-admin-content-title-line h3,
.ts-admin-rules-summary .ts-admin-content-title-line h3 {
    margin: 0;
}

.ts-admin-language-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    color: var(--site-text-soft);
    background: var(--site-surface);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
    font-size: .66rem;
    font-weight: 600;
    line-height: 1;
}

.ts-admin-icon-action {
    display: inline-flex;
    width: 32px;
    height: 31px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ts-admin-icon-action > i {
    margin: 0 !important;
}

.ts-admin-rules-list {
    display: grid;
    gap: 12px;
}

@media (max-width: 767.98px) {
    .ts-admin-language-filter {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 5px;
    }

    .ts-admin-language-filter .form-control,
    .ts-admin-list-tools .ts-admin-search {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   v1.7.5 - Permission-derived admin entry + navbar shortcut
   -------------------------------------------------------------------------- */
#main-navbar .ts-admin-shortcut-label {
    display: none;
}

@media (min-width: 1200px) {
    #main-navbar .ts-admin-shortcut-link > i {
        margin-right: 0 !important;
    }
}

@media (max-width: 1199.98px) {
    #main-navbar .ts-admin-shortcut-label {
        display: inline;
    }

    #main-navbar .ts-admin-shortcut-link > i {
        margin-right: .55em !important;
    }
}


/* --------------------------------------------------------------------------
   v1.7.8 - Compact admin content toolbars + FAQ-style SQL identifiers
   -------------------------------------------------------------------------- */
.ts-admin-content-card > .card-body {
    padding-top: 14px;
}

.ts-admin-list-tools {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 12px;
}

.ts-admin-language-filter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    flex-direction: row;
    gap: 7px;
    width: auto;
    margin: 0;
}

.ts-admin-language-filter .ts-admin-language-filter-icon {
    display: inline-grid;
    flex: 0 0 24px;
    width: 24px;
    height: 30px;
    margin: 0;
    place-items: center;
    color: var(--site-text-soft);
    cursor: default;
}

.ts-admin-language-filter .ts-admin-language-filter-icon > i {
    margin: 0 !important;
    font-size: .9rem;
}

.ts-admin-language-filter .form-control {
    width: auto;
    min-width: 170px;
    margin: 0;
}

.ts-admin-list-tools-right {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
}

.ts-admin-list-tools-right .ts-admin-search {
    width: min(340px, 34vw);
    min-width: 190px;
    margin-left: 0;
}

.ts-admin-readonly {
    display: inline-grid;
    flex: 0 0 32px;
    width: 32px;
    height: 31px;
    padding: 0;
    place-items: center;
    color: var(--site-text-muted);
    border: 1px solid var(--site-border-soft);
    border-radius: 2px;
    background: var(--site-surface-2);
    font-size: .76rem;
    cursor: help;
}

.ts-admin-readonly > i {
    margin: 0 !important;
}

.ts-admin-add-action {
    flex: 0 0 32px;
}

/* Match the compact numbered markers used by the frontend FAQ. */
.ts-admin-content-id {
    display: inline-grid;
    width: auto;
    height: 26px;
    min-width: 26px;
    max-width: 100%;
    padding: 0 6px;
    place-items: center;
    align-self: start;
    justify-self: start;
    box-sizing: border-box;
    white-space: nowrap;
    color: #c66975;
    background: rgba(125, 41, 53, .12);
    border: 1px solid rgba(173, 60, 74, .17);
    border-radius: 2px;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.ts-admin-rules-summary {
    grid-template-columns: 26px minmax(0, 1fr) auto;
}

@media (max-width: 767.98px) {
    .ts-admin-list-tools {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ts-admin-language-filter {
        width: auto;
        flex: 0 1 auto;
        align-items: center;
        flex-direction: row;
        gap: 6px;
    }

    .ts-admin-language-filter .form-control {
        width: auto;
        min-width: 145px;
        max-width: 190px;
    }

    .ts-admin-list-tools-right {
        flex: 1 1 240px;
        margin-left: auto;
    }

    .ts-admin-list-tools-right .ts-admin-search {
        flex: 1 1 180px;
        width: auto;
        min-width: 150px;
    }

    .ts-admin-rules-summary {
        grid-template-columns: 26px minmax(0, 1fr);
    }
}

@media (max-width: 479.98px) {
    .ts-admin-language-filter {
        flex: 1 1 auto;
    }

    .ts-admin-language-filter .form-control {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }

    .ts-admin-list-tools-right {
        flex-basis: 100%;
        width: 100%;
    }
}

/* ==========================================================
 * v1.8.1 — mobile News header + Bans pagination containment
 * Mobile-only presentation fixes; desktop layout is unchanged.
 * ========================================================== */
@media (max-width: 767.98px) {
    /* News: keep the title clearly left-aligned and place the date on a
       compact second row aligned with the title text rather than centered. */
    .ts-news-card .ts-news-header {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 5px;
    }

    .ts-news-card .ts-news-title-wrap {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .ts-news-card .ts-news-title,
    .ts-news-card .ts-news-title a {
        min-width: 0;
        text-align: left;
    }

    .ts-news-card .ts-news-date {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding-left: 34px;
        line-height: 1.25;
        text-align: left;
        white-space: normal;
    }

    /* Bans: DataTables' translated Previous/Next labels make the pager wider
       than the mobile card. Keep the whole footer/pager inside the card and
       switch only those two controls to compact arrows on small screens. */
    .ts-table-card #banlist_wrapper > .row:last-child {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .ts-table-card #banlist_wrapper > .row:last-child > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .ts-table-card #banlist_wrapper .dataTables_info {
        width: 100%;
        margin-bottom: 8px;
        text-align: center !important;
    }

    .ts-table-card #banlist_wrapper .dataTables_paginate {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        overflow: hidden;
    }

    .ts-table-card #banlist_wrapper .dataTables_paginate .pagination {
        display: flex;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: center !important;
        margin: 0;
        padding: 0;
    }

    .ts-table-card #banlist_wrapper .dataTables_paginate .page-link {
        display: inline-flex;
        min-width: 31px;
        min-height: 34px;
        align-items: center;
        justify-content: center;
        padding: .38rem .42rem;
        font-size: .74rem;
        line-height: 1;
        text-align: center;
    }

    .ts-table-card #banlist_wrapper .page-item.previous .page-link,
    .ts-table-card #banlist_wrapper .page-item.next .page-link {
        width: 31px;
        min-width: 31px;
        padding-right: 0;
        padding-left: 0;
        font-size: 0;
    }

    .ts-table-card #banlist_wrapper .page-item.previous .page-link::before,
    .ts-table-card #banlist_wrapper .page-item.next .page-link::before {
        font-size: 1rem;
        line-height: 1;
    }

    .ts-table-card #banlist_wrapper .page-item.previous .page-link::before {
        content: "‹";
    }

    .ts-table-card #banlist_wrapper .page-item.next .page-link::before {
        content: "›";
    }
}

@media (max-width: 380px) {
    .ts-table-card #banlist_wrapper .dataTables_paginate .page-link {
        min-width: 29px;
        min-height: 32px;
        padding-right: .34rem;
        padding-left: .34rem;
        font-size: .71rem;
    }

    .ts-table-card #banlist_wrapper .page-item.previous .page-link,
    .ts-table-card #banlist_wrapper .page-item.next .page-link {
        width: 29px;
        min-width: 29px;
    }
}

/* ==========================================================
 * v1.8.2 — user verification
 * ========================================================== */
.verification-card .card-body {
    padding: 22px;
}

.verification-message {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}

.verification-message > i {
    margin: 0 !important;
}

.verification-state,
.verification-ready {
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
}

.verification-state-icon {
    display: inline-grid;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    place-items: center;
    border: 1px solid rgba(173, 60, 74, .22);
    border-radius: 5px;
    background: rgba(173, 60, 74, .09);
    color: #c9828b;
}

.verification-state-icon i {
    margin: 0 !important;
    font-size: 1.15rem;
}

.verification-state-success .verification-state-icon {
    border-color: rgba(85, 185, 133, .24);
    background: rgba(85, 185, 133, .09);
    color: #81d3aa;
}

.verification-state h3,
.verification-ready h3 {
    margin: 0;
    font-size: 1.05rem;
}

.verification-ready p {
    max-width: 620px;
    margin: 9px auto 20px;
    color: var(--site-text-soft);
}

.verification-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.verification-recaptcha {
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 16px;
}

.verification-submit i {
    margin-right: .55em;
}

@media (max-width: 575.98px) {
    .verification-card .card-body {
        padding: 16px;
    }

    .verification-state,
    .verification-ready {
        min-height: 215px;
        padding: 20px 6px;
    }

    .verification-ready p {
        margin-bottom: 16px;
        font-size: .82rem;
    }
}

@media (max-width: 350px) {
    .verification-recaptcha {
        width: 274px;
        height: 70px;
    }

    .verification-recaptcha .g-recaptcha {
        transform: scale(.90);
        transform-origin: 0 0;
    }
}

/* ==========================================================
 * v1.8.5 — dynamic error handler
 * ========================================================== */
.ts-error-body {
    min-height: 100vh;
    padding-top: 0;
}

.ts-error-page {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 34px 0;
}

.ts-error-container {
    width: 100%;
}

.ts-error-card {
    width: min(720px, 100%);
    margin: 0 auto;
}

.ts-error-card .card-body.ts-error-card-body {
    padding: 34px;
    text-align: center;
}

.ts-error-icon {
    display: inline-grid;
    width: 54px;
    height: 54px;
    margin-bottom: 15px;
    place-items: center;
    border: 1px solid rgba(173, 60, 74, .22);
    border-radius: 5px;
    background: rgba(173, 60, 74, .09);
    color: #c9828b;
}

.ts-error-icon i {
    margin: 0 !important;
    font-size: 1.15rem;
}

.ts-error-eyebrow {
    margin-bottom: 2px;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--site-text-muted);
}

.ts-error-code {
    margin: 0;
    font-size: clamp(3.4rem, 11vw, 5.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
    color: #d68b95;
}

.ts-error-title {
    margin: 8px 0 0;
    font-size: clamp(1.15rem, 3vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.015em;
}

.ts-error-description {
    max-width: 600px;
    margin: 11px auto 0;
    color: var(--site-text-soft);
}

.ts-error-reference {
    max-width: 620px;
    margin: 24px auto 0;
    overflow: hidden;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    background: rgba(0, 0, 0, .14);
    text-align: left;
}

.ts-error-reference-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 12px;
}

.ts-error-reference-row + .ts-error-reference-row {
    border-top: 1px solid var(--site-border-soft);
}

.ts-error-reference-row > span {
    flex: 0 0 auto;
    font-size: .76rem;
    font-weight: 650;
    color: var(--site-text-soft);
}

.ts-error-reference-row > span i {
    width: 17px;
    margin-right: 7px;
    text-align: center;
    color: #827979;
}

.ts-error-reference-row code {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    background: transparent;
    color: #d6b0b5;
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-error-support {
    max-width: 600px;
    margin: 13px auto 0;
    font-size: .76rem;
    color: var(--site-text-muted);
}

.ts-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.ts-error-actions .btn {
    min-width: 132px;
}

.ts-error-actions .btn-outline-secondary {
    border-color: #3d3939;
    color: #c2bcbc;
}

.ts-error-actions .btn-outline-secondary:hover,
.ts-error-actions .btn-outline-secondary:focus {
    border-color: #514248;
    background: #221f1f;
    color: #f2f2f2;
}

@media (max-width: 575.98px) {
    .ts-error-page {
        padding: 18px 0;
    }

    .ts-error-card .card-body.ts-error-card-body {
        padding: 24px 16px;
    }

    .ts-error-reference-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .ts-error-reference-row code {
        width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .ts-error-actions {
        flex-direction: column;
    }

    .ts-error-actions .btn {
        width: 100%;
    }
}
/* ==========================================================
 * v2.8.8 — TeamSpeak badges catalogue.
 * One-column horizontal cards, full-width page, responsive filters.
 * ========================================================== */

.ts-badges-page {
    width: 100%;
}

.ts-badges-page .ts-page-heading {
    margin-bottom: 14px;
}

.ts-badges-page .ts-page-heading p {
    margin: 3px 0 0;
    color: var(--site-text-muted);
    font-size: .82rem;
    line-height: 1.55;
}

.ts-badges-toolbar {
    margin-bottom: 14px;
}

.ts-badges-toolbar .card-body {
    padding: 14px;
}

.ts-badges-filters {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(165px, .8fr) minmax(165px, .8fr) auto;
    gap: 12px;
    align-items: end;
}

.ts-badges-filters .form-group {
    min-width: 0;
    margin: 0;
}

.ts-badges-filters label {
    margin: 0 0 6px;
    color: var(--site-text-soft);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.ts-badges-search .input-group-text {
    color: var(--site-text-muted);
    background: var(--site-surface-2);
    border-color: var(--site-border);
}

.ts-badges-search .input-group-text i {
    margin: 0;
}

.ts-badges-clear-wrap {
    display: flex;
}

.ts-badges-clear-wrap .btn {
    min-height: 38px;
    white-space: nowrap;
}

.ts-badge-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.ts-badge-entry {
    margin: 0;
    overflow: hidden;
}

.ts-badge-entry[hidden] {
    display: none !important;
}

.ts-badge-entry > .card-body {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
}

.ts-badge-visual {
    display: flex;
    min-height: 104px;
    align-items: center;
    justify-content: center;
    align-self: start;
    padding: 10px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 5px;
}

.ts-badge-visual a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.ts-badge-visual img {
    display: block;
    width: 80px;
    height: 80px;
    max-width: 100%;
    object-fit: contain;
}

.ts-badge-image-missing {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    color: var(--site-text-muted);
    background: var(--site-surface-3);
    border: 1px solid var(--site-border);
    border-radius: 5px;
}

.ts-badge-image-missing i {
    margin: 0;
    font-size: 1.25rem;
}

.ts-badge-content {
    min-width: 0;
}

.ts-badge-title-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
}

.ts-badge-title-copy {
    min-width: 0;
}

.ts-badge-kicker {
    display: flex;
    min-height: 20px;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    color: var(--site-text-muted);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.ts-badge-kicker .badge {
    font-size: .61rem;
}

.ts-badge-title-row h2 {
    margin: 0;
    color: var(--site-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.ts-badge-state {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.ts-badge-state .badge {
    padding: .33rem .48rem;
    font-size: .67rem;
}

.ts-badge-description {
    margin: 7px 0 9px;
    color: var(--site-text-soft);
    font-size: .82rem;
    line-height: 1.55;
}

.ts-badge-uuid {
    display: flex;
    min-width: 0;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 12px;
    color: var(--site-text-muted);
    font-size: .7rem;
}

.ts-badge-uuid > span {
    flex: 0 0 auto;
    font-weight: 700;
}

.ts-badge-uuid code {
    min-width: 0;
    padding: 0;
    overflow-wrap: anywhere;
    color: var(--site-red-bright);
    background: transparent;
    font-size: .72rem;
}

.ts-badge-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--site-border-soft);
    border-left: 1px solid var(--site-border-soft);
}

.ts-badge-meta-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border-right: 1px solid var(--site-border-soft);
    border-bottom: 1px solid var(--site-border-soft);
}

.ts-badge-meta-grid dt {
    margin: 0 0 3px;
    color: var(--site-text-muted);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.ts-badge-meta-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--site-text);
    font-size: .75rem;
    line-height: 1.45;
}

.ts-badge-meta-grid a {
    color: var(--site-red-bright);
}

.ts-badge-meta-grid a:hover {
    color: var(--site-heading);
    text-decoration: none;
}

.ts-badge-meta-grid a i {
    font-size: .67rem;
}

.ts-badges-empty {
    margin-top: 10px;
}

.ts-badges-empty[hidden] {
    display: none !important;
}

.ts-badges-empty .card-body {
    display: flex;
    min-height: 110px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--site-text-muted);
    text-align: center;
}

.ts-badges-empty i {
    margin: 0;
}

@media (max-width: 991.98px) {
    .ts-badges-filters {
        grid-template-columns: minmax(220px, 1fr) minmax(150px, .6fr) minmax(150px, .6fr);
    }

    .ts-badges-clear-wrap {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .ts-badge-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ts-badges-page .ts-page-heading {
        align-items: flex-start;
    }

    .ts-badges-page .ts-page-heading-meta {
        width: 100%;
        margin: 8px 0 0;
    }

    .ts-badges-filters {
        grid-template-columns: 1fr 1fr;
    }

    .ts-badges-search {
        grid-column: 1 / -1;
    }

    .ts-badge-entry > .card-body {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        padding: 13px;
    }

    .ts-badge-visual {
        min-height: 82px;
        padding: 7px;
    }

    .ts-badge-visual img {
        width: 64px;
        height: 64px;
    }

    .ts-badge-title-row {
        flex-direction: column;
        gap: 7px;
    }

    .ts-badge-state {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .ts-badges-toolbar .card-body {
        padding: 12px;
    }

    .ts-badges-filters {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ts-badges-search,
    .ts-badges-clear-wrap {
        grid-column: auto;
    }

    .ts-badges-clear-wrap {
        justify-content: stretch;
    }

    .ts-badges-clear-wrap .btn {
        width: 100%;
    }

    .ts-badge-entry > .card-body {
        grid-template-columns: 1fr;
    }

    .ts-badge-visual {
        width: 82px;
        min-height: 82px;
        margin: 0 auto;
    }

    .ts-badge-title-row,
    .ts-badge-title-copy {
        text-align: center;
    }

    .ts-badge-kicker,
    .ts-badge-state {
        justify-content: center;
    }

    .ts-badge-description {
        text-align: center;
    }

    .ts-badge-uuid {
        flex-direction: column;
        gap: 3px;
        align-items: center;
        text-align: center;
    }

    .ts-badge-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
 * v2.8.14 — Backend TeamSpeak badge management
 * ========================================================== */

.ts-admin-badges-tools {
    align-items: center;
}

.ts-admin-badges-filters {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 7px;
}

.ts-admin-badges-filters .form-control {
    width: auto;
    min-width: 155px;
}

.ts-admin-badges-actions {
    flex: 1 1 auto;
}

.ts-admin-badges-sync-action {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ts-admin-badges-sync-action > i {
    margin: 0 !important;
}

.ts-admin-badges-count {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    color: var(--site-text-muted);
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 2px;
    font-size: .7rem;
    white-space: nowrap;
}

.ts-admin-badges-count b {
    color: var(--site-heading);
    font-size: .78rem;
}

.ts-admin-badges-sync-note {
    margin-bottom: 12px;
    font-size: .75rem;
}

.ts-admin-badge-row {
    align-items: center;
}

.ts-admin-badge-main {
    display: grid;
    grid-template-columns: 26px 64px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.ts-admin-badge-thumb {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    overflow: hidden;
    background: var(--site-surface);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
}

.ts-admin-badge-thumb img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.ts-admin-badge-copy {
    min-width: 0;
}

.ts-admin-badge-title-line .badge,
.ts-admin-badge-title-line .ts-admin-language-badge {
    font-size: .63rem;
}

.ts-admin-badge-title-line .ts-admin-language-badge > i {
    margin: 0 4px 0 0 !important;
    color: var(--site-accent-color);
}

.ts-admin-badge-uuid {
    margin: 2px 0 5px;
}

.ts-admin-badge-uuid code {
    padding: 0;
    color: var(--site-red-bright);
    background: transparent;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

.ts-admin-badge-description {
    max-width: 980px;
    margin-bottom: 6px;
    color: var(--site-text-soft);
    font-size: .74rem;
    line-height: 1.45;
}

.ts-admin-badge-meta {
    gap: 5px 13px;
}

.ts-admin-badge-readonly-identity {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 11px 12px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
}

.ts-admin-badge-readonly-identity strong {
    color: var(--site-heading);
    font-size: .9rem;
}

.ts-admin-badge-readonly-identity code,
.ts-admin-badge-readonly-identity small {
    overflow-wrap: anywhere;
}

.ts-admin-badge-readonly-identity code {
    color: var(--site-red-bright);
    font-size: .72rem;
}

.ts-admin-badge-readonly-identity small {
    color: var(--site-text-muted);
    font-size: .69rem;
}

.ts-admin-badge-manual-heading {
    margin-bottom: 10px;
    color: var(--site-heading);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
}

@media (max-width: 991.98px) {
    .ts-admin-badges-tools {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .ts-admin-badges-filters {
        flex: 1 1 100%;
    }

    .ts-admin-badges-filters .form-control {
        flex: 1 1 160px;
        width: auto;
    }

    .ts-admin-badges-actions {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .ts-admin-badge-row {
        align-items: stretch;
    }

    .ts-admin-badge-main {
        width: 100%;
        grid-template-columns: 26px 56px minmax(0, 1fr);
        align-items: start;
    }

    .ts-admin-badge-thumb {
        width: 56px;
        height: 56px;
    }

    .ts-admin-badge-thumb img {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 575.98px) {
    .ts-admin-badges-filters {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .ts-admin-badges-filters .form-control {
        width: 100%;
        min-width: 0;
    }

    .ts-admin-badges-actions {
        flex-wrap: wrap;
    }

    .ts-admin-badges-actions .ts-admin-search {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .ts-admin-badges-sync-action span {
        display: none;
    }

    .ts-admin-badges-sync-action {
        width: 32px;
        padding: 0;
        justify-content: center;
    }

    .ts-admin-badge-main {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .ts-admin-badge-thumb {
        grid-column: 2;
        margin-bottom: 5px;
    }

    .ts-admin-badge-copy {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1200px) {
    .ts-admin-dashboard-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* ==========================================================
 * v2.8.15 — Badge sync history + hourly automation
 * ========================================================== */

.ts-admin-badges-sync-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 8px;
    border-top: 1px solid var(--site-border-soft);
    border-left: 1px solid var(--site-border-soft);
}

.ts-admin-badges-sync-overview-item {
    min-width: 0;
    padding: 9px 10px;
    background: var(--site-surface-2);
    border-right: 1px solid var(--site-border-soft);
    border-bottom: 1px solid var(--site-border-soft);
}

.ts-admin-badges-sync-overview-item > span {
    display: block;
    margin-bottom: 3px;
    color: var(--site-text-muted);
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.ts-admin-badges-sync-overview-item > strong {
    display: block;
    color: var(--site-heading);
    font-size: .75rem;
    line-height: 1.4;
}

.ts-admin-badges-latest-run {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 7px;
}

.ts-admin-badges-latest-run .badge {
    font-size: .63rem;
}

.ts-admin-badges-latest-run small {
    color: var(--site-text-soft);
    font-size: .68rem;
}

.ts-admin-badges-sync-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 10px;
    color: var(--site-text-muted);
    font-size: .69rem;
}

.ts-admin-badges-sync-stats span {
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
}

.ts-admin-badges-sync-stats b {
    color: var(--site-heading);
    font-size: .74rem;
}

.ts-admin-badges-sync-error {
    margin-bottom: 10px;
    overflow-wrap: anywhere;
    font-size: .73rem;
}

.ts-badges-catalogue-updated {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 10px;
    color: var(--site-text-muted);
    font-size: .69rem;
}

.ts-badges-catalogue-updated i {
    margin: 0 2px 0 0;
}

.ts-badges-catalogue-updated strong {
    color: var(--site-text-soft);
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .ts-admin-badges-sync-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ts-admin-badges-sync-overview {
        grid-template-columns: 1fr;
    }

    .ts-badges-catalogue-updated {
        justify-content: center;
        text-align: center;
    }
}


/* ==========================================================
 * v2.8.17 — Compact badges catalogue + profile badge artwork
 * ========================================================== */

/* Frontend badge catalogue: less vertical space, only useful public metadata. */
.ts-badges-page .ts-page-heading {
    margin-bottom: 10px;
}

.ts-badges-toolbar {
    margin-bottom: 10px;
}

.ts-badges-toolbar .card-body {
    padding: 10px 11px;
}

.ts-badges-filters {
    gap: 8px;
}

.ts-badges-filters label {
    margin-bottom: 4px;
    font-size: .68rem;
}

.ts-badges-clear-wrap .btn {
    min-height: 36px;
}

.ts-badge-list {
    gap: 7px;
}

.ts-badge-entry > .card-body {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 12px;
}

.ts-badge-visual {
    min-height: 72px;
    padding: 5px;
    border-radius: 4px;
}

.ts-badge-visual-empty {
    min-height: 72px;
}

.ts-badge-visual img {
    width: 62px;
    height: 62px;
}

.ts-badge-title-row {
    gap: 10px;
}

.ts-badge-kicker {
    min-height: 17px;
    margin-bottom: 1px;
    font-size: .62rem;
}

.ts-badge-title-row h2 {
    font-size: .94rem;
    line-height: 1.28;
}

.ts-badge-state {
    gap: 4px;
}

.ts-badge-state .badge {
    padding: .28rem .42rem;
    font-size: .62rem;
}

.ts-badge-description {
    margin: 4px 0 7px;
    font-size: .76rem;
    line-height: 1.42;
}

.ts-badge-facts {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 5px 16px;
    padding-top: 7px;
    border-top: 1px solid var(--site-border-soft);
}

.ts-badge-fact {
    display: flex;
    min-width: 150px;
    max-width: 100%;
    flex: 0 1 auto;
    align-items: baseline;
    gap: 6px;
    color: var(--site-text);
    font-size: .72rem;
    line-height: 1.4;
}

.ts-badge-fact-wide {
    flex: 1 1 340px;
}

.ts-badge-fact > span {
    flex: 0 0 auto;
    color: var(--site-text-muted);
    font-size: .61rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.ts-badge-fact > strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--site-text);
    font-weight: 500;
}

.ts-badge-fact a {
    color: var(--site-red-bright);
}

.ts-badge-fact a:hover {
    color: var(--site-heading);
    text-decoration: none;
}

.ts-badge-fact a i {
    margin-right: 4px;
    font-size: .62rem;
}

.ts-badge-uuid {
    margin: 6px 0 0;
    font-size: .64rem;
}

.ts-badge-uuid code {
    font-size: .66rem;
}

/* Backend: the update overview now contains exactly three useful cells. */
.ts-admin-badges-sync-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ts-admin-badges-sync-action {
    width: 32px;
    min-width: 32px;
    padding: 0;
    justify-content: center;
    gap: 0;
}

.ts-admin-badge-meta a {
    color: var(--site-red-bright);
}

.ts-admin-badge-meta a:hover {
    color: var(--site-heading);
    text-decoration: none;
}

/* Profile: show the actual TeamSpeak badge artwork and friendly names. */
.ts-profile-badge-icon.ts-profile-badge-image {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    padding: 1px;
    overflow: hidden;
    background: transparent;
    border-color: var(--site-border-soft);
}

.ts-profile-badge-image img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ts-profile-badge-name {
    min-width: 0;
    color: var(--site-text);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .ts-admin-badges-sync-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ts-badge-entry > .card-body {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .ts-badge-visual,
    .ts-badge-visual-empty {
        min-height: 62px;
    }

    .ts-badge-visual img {
        width: 54px;
        height: 54px;
    }

    .ts-admin-badges-sync-overview {
        grid-template-columns: 1fr 1fr;
    }

    .ts-admin-badges-sync-overview-item:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .ts-badge-entry > .card-body {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .ts-badge-visual,
    .ts-badge-visual-empty {
        width: 56px;
        min-height: 56px;
        margin: 0;
    }

    .ts-badge-visual img {
        width: 48px;
        height: 48px;
    }

    .ts-badge-title-row,
    .ts-badge-title-copy,
    .ts-badge-description {
        text-align: left;
    }

    .ts-badge-title-row {
        gap: 5px;
    }

    .ts-badge-kicker,
    .ts-badge-state {
        justify-content: flex-start;
    }

    .ts-badge-uuid {
        align-items: flex-start;
        text-align: left;
    }

    .ts-badge-facts {
        gap: 5px 10px;
    }

    .ts-badge-fact,
    .ts-badge-fact-wide {
        min-width: 0;
        flex: 1 1 100%;
    }

    .ts-admin-badges-sync-overview {
        grid-template-columns: 1fr;
    }

    .ts-admin-badges-sync-overview-item:last-child {
        grid-column: auto;
    }
}


/* GPC v2.8.20 - make badge assignment/code immediately noticeable. */
.ts-badge-code-fact {
    padding: 5px 8px;
    background: var(--site-primary-soft);
    border: 1px solid var(--site-border-accent);
    border-radius: var(--ts-radius-sm);
}

.ts-badge-code-fact > span {
    color: var(--site-red-bright);
}

.ts-badge-code-value {
    color: var(--site-heading) !important;
    font-weight: 700 !important;
}

.ts-badge-code-value > i {
    margin-right: 5px;
    color: var(--site-red-bright);
    font-size: .68rem;
}

/* ==========================================================
 * GPC v2.8.27 — 3-column badge metadata table + mobile layout
 * ========================================================== */

.ts-badge-code-fact {
    display: none !important;
}

/* Top card area remains compact. Artwork spans the title/status row and
   metadata row without forcing artificial vertical whitespace. */
.ts-badge-entry > .card-body {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
}

.ts-badge-entry > .card-body > .ts-badge-visual,
.ts-badge-entry > .card-body > .ts-badge-visual-empty {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.ts-badge-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.ts-badge-title-row {
    display: block;
}

.ts-badge-side {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    max-width: 230px;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 0;
    border: 0;
}

.ts-badge-side .ts-badge-state {
    min-height: 0;
    justify-content: flex-end;
}

.ts-badge-redeem-line {
    display: flex;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.ts-badge-redeem-label {
    flex: 0 0 auto;
    color: var(--site-text-muted);
    font-size: .61rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.ts-badge-redeem-value {
    display: block;
    min-width: 0;
    max-width: 165px;
    overflow: hidden;
    color: var(--site-red-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-badge-redeem-value-custom {
    color: var(--site-red-bright);
}

.ts-badge-copy-code {
    display: inline-grid;
    width: 22px;
    min-width: 22px;
    height: 22px;
    place-items: center;
    padding: 0;
    color: var(--site-text-muted);
    background: transparent;
    border: 0;
    border-radius: 3px;
    box-shadow: none;
}

.ts-badge-copy-code:hover,
.ts-badge-copy-code:focus {
    color: var(--site-red-bright);
    background: var(--site-primary-soft);
    box-shadow: none;
}

.ts-badge-copy-code.is-copied {
    color: var(--site-success);
}

.ts-badge-copy-code i {
    margin: 0;
    font-size: .66rem;
}

/* One continuous divider followed by a borderless 3-column x 2-row metadata
   table. Each column owns two logical rows:
     1: Acquisition / GUID
     2: First Seen / Last Seen
     3: Available Until / Source */
.ts-badge-lower {
    grid-column: 2 / -1;
    grid-row: 2;
    min-width: 0;
    margin-top: 5px;
    padding-top: 7px;
    border-top: 1px solid var(--site-border-soft);
}

.ts-badge-meta-table {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 28px;
}

.ts-badge-meta-column {
    display: grid;
    min-width: 0;
    grid-template-rows: repeat(2, minmax(20px, auto));
    align-content: start;
    gap: 4px;
}

.ts-badge-meta-row {
    display: grid;
    min-width: 0;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 7px;
}

.ts-badge-meta-row > span {
    color: var(--site-text-muted);
    font-size: .61rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .025em;
    white-space: nowrap;
}

.ts-badge-meta-row > strong,
.ts-badge-meta-row > code {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    color: var(--site-heading);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ts-badge-meta-row > code {
    color: var(--site-red-bright);
    background: transparent;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.ts-badge-meta-row a {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 4px;
    color: var(--site-red-bright);
}

.ts-badge-meta-row a:hover,
.ts-badge-meta-row a:focus {
    color: var(--site-heading);
}

/* Tablet: two columns, with the final Availability/Source group spanning the
   full width underneath. This avoids cramped three-column text. */
@media (max-width: 991.98px) {
    .ts-badge-meta-table {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 24px;
    }

    .ts-badge-meta-column:last-child {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 0 24px;
    }
}

/* Mobile: artwork + title/status stay compact; metadata becomes one clean
   full-width column, preserving the requested field grouping/order. */
@media (max-width: 767.98px) {
    .ts-badge-entry > .card-body {
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 4px;
        padding: 10px;
    }

    .ts-badge-entry > .card-body > .ts-badge-visual,
    .ts-badge-entry > .card-body > .ts-badge-visual-empty {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 58px;
        min-height: 58px;
        margin: 0;
        padding: 4px;
    }

    .ts-badge-visual img {
        width: 50px;
        height: 50px;
    }

    .ts-badge-content {
        grid-column: 2;
        grid-row: 1;
    }

    .ts-badge-side {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        max-width: none;
        align-items: flex-start;
        gap: 4px;
    }

    .ts-badge-side .ts-badge-state,
    .ts-badge-redeem-line {
        justify-content: flex-start;
    }

    .ts-badge-redeem-value {
        max-width: min(280px, 58vw);
        text-align: left;
    }

    .ts-badge-lower {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 2px;
        padding-top: 7px;
    }

    .ts-badge-meta-table,
    .ts-badge-meta-column,
    .ts-badge-meta-column:last-child {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: 4px;
    }

    .ts-badge-meta-column:last-child {
        grid-column: auto;
    }

    .ts-badge-meta-column + .ts-badge-meta-column {
        margin-top: 3px;
    }

    .ts-badge-meta-row {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 7px;
    }
}

@media (max-width: 575.98px) {
    .ts-badges-toolbar .card-body {
        padding: 9px;
    }

    .ts-badges-filters {
        gap: 8px;
    }

    .ts-badge-entry > .card-body {
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 9px;
        row-gap: 4px;
        padding: 9px;
    }

    .ts-badge-entry > .card-body > .ts-badge-visual,
    .ts-badge-entry > .card-body > .ts-badge-visual-empty {
        width: 50px;
        min-height: 50px;
    }

    .ts-badge-visual img {
        width: 42px;
        height: 42px;
    }

    .ts-badge-title-row,
    .ts-badge-title-copy,
    .ts-badge-description {
        text-align: left;
    }

    .ts-badge-title-row h2 {
        font-size: .9rem;
        line-height: 1.2;
    }

    .ts-badge-description {
        margin: 4px 0 4px;
        font-size: .73rem;
        line-height: 1.38;
    }

    .ts-badge-side .ts-badge-state .badge {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }

    .ts-badge-redeem-label {
        font-size: .56rem;
    }

    .ts-badge-redeem-value {
        max-width: min(230px, 54vw);
        font-size: .66rem;
    }

    .ts-badge-copy-code {
        width: 21px;
        min-width: 21px;
        height: 21px;
    }

    .ts-badge-meta-row {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 6px;
    }

    .ts-badge-meta-row > span {
        font-size: .57rem;
    }

    .ts-badge-meta-row > strong,
    .ts-badge-meta-row > code {
        font-size: .67rem;
    }

    .ts-badges-catalogue-updated {
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 6px;
    }
}

@media (max-width: 390px) {
    .ts-badge-entry > .card-body {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 8px;
        padding: 8px;
    }

    .ts-badge-entry > .card-body > .ts-badge-visual,
    .ts-badge-entry > .card-body > .ts-badge-visual-empty {
        width: 44px;
        min-height: 44px;
    }

    .ts-badge-visual img {
        width: 36px;
        height: 36px;
    }

    .ts-badge-redeem-line {
        gap: 4px;
    }

    .ts-badge-redeem-value {
        max-width: 50vw;
    }

    .ts-badge-meta-row {
        grid-template-columns: 86px minmax(0, 1fr);
    }
}


/* ==========================================================
 * GPC v2.8.28 — dismissible admin flashes + modal UX
 * ========================================================== */

.ts-admin-flash {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin-bottom: 12px;
    padding-right: 44px;
}

.ts-admin-flash > i {
    flex: 0 0 auto;
    margin: 0 !important;
}

.ts-admin-flash-message {
    min-width: 0;
    flex: 1 1 auto;
}

.ts-admin-flash.alert-dismissible .close {
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 5px 8px;
    transform: translateY(-50%);
    line-height: 1;
}

.ts-admin-flash.alert-dismissible .close:focus {
    outline: 0;
}

@media (max-width: 575.98px) {
    .ts-admin-flash {
        gap: 7px;
        padding: 9px 40px 9px 10px;
        font-size: .75rem;
    }

    .ts-admin-flash.alert-dismissible .close {
        right: 7px;
    }
}


/* ==========================================================
 * GPC v2.8.29 — silent static modals + balanced viewport spacing
 * ========================================================== */

/* Bootstrap normally adds .modal-static and animates the dialog when a
   static backdrop is clicked. The admin UI intentionally has no shake/flash. */
.modal.modal-static .modal-dialog,
.modal.modal-static .modal-dialog-centered {
    transform: none !important;
}

/* All backend dialogs are vertically centered. These margins are symmetrical,
   so short dialogs have equal free space above and below while tall dialogs
   keep a safe viewport gutter. */
.ts-admin-page .modal-dialog-centered,
body.ts-admin-page .modal-dialog-centered {
    min-height: calc(100% - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Prevent unusually tall modal content from touching the viewport edges.
   The modal body becomes the scrollable area instead of shifting the dialog
   off-center. */
.ts-admin-page .modal-dialog-centered .modal-content,
body.ts-admin-page .modal-dialog-centered .modal-content {
    max-height: calc(100vh - 2rem);
}

.ts-admin-page .modal-dialog-centered .modal-body,
body.ts-admin-page .modal-dialog-centered .modal-body {
    overflow-y: auto;
}

@media (max-width: 575.98px) {
    .ts-admin-page .modal-dialog-centered,
    body.ts-admin-page .modal-dialog-centered {
        min-height: calc(100% - 1rem);
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    .ts-admin-page .modal-dialog-centered .modal-content,
    body.ts-admin-page .modal-dialog-centered .modal-content {
        max-height: calc(100vh - 1rem);
    }
}


/* ==========================================================
 * GPC v2.8.30 — New badge card highlight + corner ribbon
 * ========================================================== */

.ts-badge-entry {
    position: relative;
}

/* New badges receive a restrained accent rather than a loud background.
   The glow stays inside the dark/red site language and does not affect layout. */
.ts-badge-entry-new {
    border-color: var(--site-border-accent);
    box-shadow:
        0 0 0 1px rgba(214, 57, 72, .14),
        0 0 18px rgba(179, 32, 47, .08);
}

.ts-badge-entry-new:hover {
    border-color: var(--site-red-bright);
    box-shadow:
        0 0 0 1px rgba(214, 57, 72, .22),
        0 0 22px rgba(179, 32, 47, .12);
}

/* Diagonal top-left NEW ribbon. The card already clips overflow, so the
   ribbon remains perfectly contained inside the rounded card edge. */
.ts-badge-new-ribbon {
    position: absolute;
    z-index: 4;
    top: 12px;
    left: -31px;
    display: block;
    width: 104px;
    padding: 4px 0;
    transform: rotate(-45deg);
    color: #fff;
    background: linear-gradient(
        90deg,
        rgba(130, 20, 31, .96),
        rgba(205, 48, 64, .98),
        rgba(130, 20, 31, .96)
    );
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(0, 0, 0, .28);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    font-size: .58rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .095em;
    pointer-events: none;
}

/* The ribbon crosses the artwork corner by design. Keep the artwork visible
   and avoid shifting any badge content just to make room for decoration. */
.ts-badge-entry-new .ts-badge-visual {
    border-color: rgba(214, 57, 72, .34);
}

@media (max-width: 767.98px) {
    .ts-badge-new-ribbon {
        top: 10px;
        left: -30px;
        width: 96px;
        padding: 3px 0;
        font-size: .54rem;
    }

    .ts-badge-entry-new {
        box-shadow:
            0 0 0 1px rgba(214, 57, 72, .12),
            0 0 14px rgba(179, 32, 47, .07);
    }
}

@media (max-width: 575.98px) {
    .ts-badge-new-ribbon {
        top: 9px;
        left: -29px;
        width: 90px;
        font-size: .51rem;
        letter-spacing: .075em;
    }
}

@media (max-width: 390px) {
    .ts-badge-new-ribbon {
        top: 8px;
        left: -28px;
        width: 86px;
        font-size: .49rem;
    }
}


/* ==========================================================
 * GPC v2.8.31 — stable NEW highlight + centered badge artwork
 * ========================================================== */

/* Use the former hover treatment as the normal highlighted state. */
.ts-badge-entry-new,
.ts-badge-entry-new:hover {
    border-color: var(--site-red-bright);
    box-shadow:
        0 0 0 1px rgba(214, 57, 72, .22),
        0 0 22px rgba(179, 32, 47, .12);
}

/* Do not animate/change the NEW card treatment on hover. */
.ts-badge-entry-new {
    transition:
        background-color .18s ease,
        color .18s ease;
}

.ts-badge-entry-new:hover {
    transform: none;
}

/* Desktop: the artwork spans the complete card grid area in the current
   layout. Center it vertically so the diagonal NEW ribbon only crosses the
   upper corner instead of sitting directly over the artwork. */
.ts-badge-entry-new > .card-body > .ts-badge-visual,
.ts-badge-entry-new > .card-body > .ts-badge-visual-empty {
    align-self: center;
}

/* Keep the artwork itself centered inside its frame as well. */
.ts-badge-entry-new .ts-badge-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tablet/mobile: the artwork already spans only the pre-divider rows
   (title/details + status/code). Center it inside exactly that area. */
@media (max-width: 767.98px) {
    .ts-badge-entry-new > .card-body > .ts-badge-visual,
    .ts-badge-entry-new > .card-body > .ts-badge-visual-empty {
        align-self: center;
        justify-self: center;
    }

    /* Keep the permanent highlight just as strong as desktop. */
    .ts-badge-entry-new,
    .ts-badge-entry-new:hover {
        border-color: var(--site-red-bright);
        box-shadow:
            0 0 0 1px rgba(214, 57, 72, .22),
            0 0 18px rgba(179, 32, 47, .11);
    }
}

@media (max-width: 575.98px) {
    .ts-badge-entry-new > .card-body > .ts-badge-visual,
    .ts-badge-entry-new > .card-body > .ts-badge-visual-empty {
        align-self: center;
    }
}


/* ==========================================================
 * GPC v2.8.32 — vertically center artwork on every badge card
 * ========================================================== */

/* Desktop: center every badge artwork within the complete pre-divider area,
   not just cards currently marked as New. */
.ts-badge-entry > .card-body > .ts-badge-visual,
.ts-badge-entry > .card-body > .ts-badge-visual-empty {
    align-self: center;
}

.ts-badge-entry .ts-badge-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tablet/mobile: artwork spans the rows above the metadata divider, so
   center it within that exact area for every badge. */
@media (max-width: 767.98px) {
    .ts-badge-entry > .card-body > .ts-badge-visual,
    .ts-badge-entry > .card-body > .ts-badge-visual-empty {
        align-self: center;
        justify-self: center;
    }
}

@media (max-width: 575.98px) {
    .ts-badge-entry > .card-body > .ts-badge-visual,
    .ts-badge-entry > .card-body > .ts-badge-visual-empty {
        align-self: center;
    }
}


/* ==========================================================
 * GPC v2.8.33 — final Badges frontend/backend polish
 * ========================================================== */

/* Frontend heading no longer reserves space for a badge count. */
.ts-badges-page .ts-page-heading-copy {
    min-width: 0;
    flex: 1 1 auto;
}

/* Compact toolbar: Availability + Status + clear icon + Search on the right. */
.ts-badges-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}

.ts-badges-filters .form-group {
    flex: 0 0 auto;
}

.ts-badges-filter-select {
    width: 168px;
}

.ts-badges-search {
    width: min(360px, 34vw);
    min-width: 260px;
}

.ts-badges-clear-wrap {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
}

.ts-badges-clear-wrap .btn {
    display: inline-grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    padding: 0;
}

.ts-badges-clear-wrap .btn[hidden] {
    display: none !important;
}

.ts-badges-clear-wrap .btn i {
    margin: 0;
}

/* Backend: the sync action should not visually read as another Edit button. */
.ts-admin-badges-sync-action > i {
    color: var(--site-warning) !important;
}

.ts-admin-badges-sync-action:hover > i,
.ts-admin-badges-sync-action:focus > i {
    color: var(--site-warning) !important;
}

/* Treat update/check history as a real card and keep all latest-run stats
   inside it instead of leaving a loose text strip underneath. */
.ts-admin-badges-sync-card {
    margin: 10px 0 12px;
    background: var(--site-surface-1);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
    box-shadow: none;
}

.ts-admin-badges-sync-card > .card-body {
    padding: 11px;
}

.ts-admin-badges-sync-card .ts-admin-badges-sync-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    border: 0;
}

.ts-admin-badges-sync-card .ts-admin-badges-sync-overview-item {
    min-width: 0;
    padding: 9px 10px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 3px;
}

.ts-admin-badges-sync-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--site-border-soft);
}

.ts-admin-badges-sync-stat {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    padding: 7px 8px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 3px;
}

.ts-admin-badges-sync-stat strong {
    flex: 0 0 auto;
    color: var(--site-heading);
    font-size: .82rem;
    line-height: 1;
}

.ts-admin-badges-sync-stat span {
    min-width: 0;
    color: var(--site-text-muted);
    font-size: .65rem;
    line-height: 1.25;
}

.ts-admin-badges-sync-card .ts-admin-badges-sync-error {
    margin: 8px 0 0;
}

@media (max-width: 991.98px) {
    .ts-badges-search {
        width: min(320px, 40vw);
    }

    .ts-admin-badges-sync-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ts-badges-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        gap: 7px;
    }

    .ts-badges-search {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }

    .ts-badges-availability {
        grid-column: 1;
        grid-row: 2;
        width: auto;
    }

    .ts-badges-status {
        grid-column: 2;
        grid-row: 2;
        width: auto;
    }

    .ts-badges-clear-wrap {
        grid-column: 3;
        grid-row: 2;
        align-self: end;
    }

    .ts-admin-badges-sync-card .ts-admin-badges-sync-overview {
        grid-template-columns: 1fr;
    }

    .ts-admin-badges-sync-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ts-badges-toolbar .card-body {
        padding: 9px;
    }

    .ts-badges-filters {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ts-badges-clear-wrap {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }

    .ts-admin-badges-sync-stats {
        grid-template-columns: 1fr 1fr;
    }

    .ts-admin-badges-sync-stat:last-child {
        grid-column: 1 / -1;
    }
}


/* ==========================================================
 * GPC v2.8.34 — admin action buttons + badge filter polish
 * ========================================================== */

/* Shared backend Add action: same compact outlined language as Edit/Delete,
   with a light-green accent instead of the old filled primary button. */
.ts-admin-add-action.btn-primary,
.ts-admin-add-action.btn-primary:hover,
.ts-admin-add-action.btn-primary:focus,
.ts-admin-add-action.btn-primary:not(:disabled):not(.disabled):active {
    color: #81d3aa;
    background: transparent;
    border-color: rgba(129, 211, 170, .42);
    box-shadow: none;
}

.ts-admin-add-action.btn-primary:hover,
.ts-admin-add-action.btn-primary:focus,
.ts-admin-add-action.btn-primary:not(:disabled):not(.disabled):active {
    color: #a6e7c6;
    background: rgba(85, 185, 133, .10);
    border-color: rgba(129, 211, 170, .68);
}

.ts-admin-add-action.btn-primary > i {
    color: inherit !important;
}

/* Shared Update action. Light orange keeps it distinct from both Edit and Add
   without the previous yellow warning appearance. */
.ts-admin-update-action,
.ts-admin-badges-sync-action {
    color: #e5a66f !important;
    background: transparent !important;
    border-color: rgba(229, 166, 111, .42) !important;
    box-shadow: none !important;
}

.ts-admin-update-action:hover,
.ts-admin-update-action:focus,
.ts-admin-update-action:active,
.ts-admin-badges-sync-action:hover,
.ts-admin-badges-sync-action:focus,
.ts-admin-badges-sync-action:active {
    color: #f0bd8f !important;
    background: rgba(229, 166, 111, .10) !important;
    border-color: rgba(229, 166, 111, .68) !important;
    box-shadow: none !important;
}

.ts-admin-update-action > i,
.ts-admin-update-action:hover > i,
.ts-admin-update-action:focus > i,
.ts-admin-badges-sync-action > i,
.ts-admin-badges-sync-action:hover > i,
.ts-admin-badges-sync-action:focus > i {
    color: inherit !important;
}

/* Badge filters now use the same compact icon-before-control language as the
   language selector used by News / FAQ / Rules. */
.ts-admin-badges-filter-icon {
    display: inline-grid;
    flex: 0 0 24px;
    width: 24px;
    height: 30px;
    margin: 0;
    place-items: center;
    color: var(--site-text-soft);
    cursor: default;
}

.ts-admin-badges-filter-icon > i {
    margin: 0 !important;
    font-size: .82rem;
}

/* Frontend order is Availability, Status, Search, then Clear at the far right. */
.ts-badges-clear-wrap {
    order: 4;
}

.ts-badges-search {
    order: 3;
}

.ts-badges-availability {
    order: 1;
}

.ts-badges-status {
    order: 2;
}

@media (max-width: 767.98px) {
    .ts-badges-search {
        order: initial;
    }

    .ts-badges-availability,
    .ts-badges-status,
    .ts-badges-clear-wrap {
        order: initial;
    }

    .ts-admin-badges-filter-icon {
        align-self: center;
    }
}

@media (max-width: 575.98px) {
    .ts-admin-badges-filters {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .ts-admin-badges-filter-icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .ts-admin-badges-filters #adminBadgeAvailability,
    .ts-admin-badges-filters #adminBadgeStatus {
        grid-column: 2;
        width: 100%;
    }
}


/* ==========================================================
 * GPC v2.8.35 — action hover parity + backend modal viewport fix
 * ========================================================== */

/* Add/Update keep their own accent while hovering like Edit/Delete:
   outlined at rest, filled on hover/focus/active. */
.ts-admin-add-action.btn-primary:hover,
.ts-admin-add-action.btn-primary:focus,
.ts-admin-add-action.btn-primary:not(:disabled):not(.disabled):active {
    color: #102019 !important;
    background: #81d3aa !important;
    border-color: #81d3aa !important;
    box-shadow: none !important;
}

.ts-admin-update-action:hover,
.ts-admin-update-action:focus,
.ts-admin-update-action:active,
.ts-admin-badges-sync-action:hover,
.ts-admin-badges-sync-action:focus,
.ts-admin-badges-sync-action:active {
    color: #24170d !important;
    background: #e5a66f !important;
    border-color: #e5a66f !important;
    box-shadow: none !important;
}

.ts-admin-add-action.btn-primary:hover > i,
.ts-admin-add-action.btn-primary:focus > i,
.ts-admin-add-action.btn-primary:active > i,
.ts-admin-update-action:hover > i,
.ts-admin-update-action:focus > i,
.ts-admin-update-action:active > i,
.ts-admin-badges-sync-action:hover > i,
.ts-admin-badges-sync-action:focus > i,
.ts-admin-badges-sync-action:active > i {
    color: inherit !important;
}

/* Correct the earlier selector: the actual backend body class is
   .ts-admin-body, not .ts-admin-page. This restores balanced viewport
   spacing and keeps scrolling inside modal bodies. */
.ts-admin-body .modal-dialog-centered {
    min-height: calc(100% - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.ts-admin-body .modal-dialog-centered .modal-content {
    display: flex;
    max-height: calc(100vh - 2rem);
    flex-direction: column;
    overflow: hidden;
}

.ts-admin-body .modal-dialog-centered .modal-header,
.ts-admin-body .modal-dialog-centered .modal-footer {
    flex: 0 0 auto;
}

.ts-admin-body .modal-dialog-centered .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Add Badge is one of the tallest admin dialogs. Prevent Bootstrap's outer
   .modal container from becoming the scrolling element; only .modal-body
   gets a scrollbar when the form is taller than the available viewport. */
.ts-admin-body #adminAddBadge {
    overflow-x: hidden;
    overflow-y: hidden;
}

.ts-admin-body #adminAddBadge .modal-dialog {
    width: auto;
    max-height: calc(100vh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.ts-admin-body #adminAddBadge .modal-content {
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

.ts-admin-body #adminAddBadge .modal-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* Mobile keeps the same equal top/bottom breathing room with a smaller
   viewport gutter. */
@media (max-width: 575.98px) {
    .ts-admin-body .modal-dialog-centered {
        min-height: calc(100% - 1rem);
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    .ts-admin-body .modal-dialog-centered .modal-content,
    .ts-admin-body #adminAddBadge .modal-content {
        max-height: calc(100vh - 1rem);
    }

    .ts-admin-body #adminAddBadge .modal-dialog {
        max-height: calc(100vh - 1rem);
        margin-top: .5rem;
        margin-bottom: .5rem;
    }
}


/* ==========================================================
 * GPC v2.8.36 — Add/Update hover foreground parity
 * ========================================================== */

/* Match Edit/Delete interaction exactly: colored fill + white icon/text. */
.ts-admin-add-action.btn-primary:hover,
.ts-admin-add-action.btn-primary:focus,
.ts-admin-add-action.btn-primary:not(:disabled):not(.disabled):active {
    color: #fff !important;
}

.ts-admin-update-action:hover,
.ts-admin-update-action:focus,
.ts-admin-update-action:active,
.ts-admin-badges-sync-action:hover,
.ts-admin-badges-sync-action:focus,
.ts-admin-badges-sync-action:active {
    color: #fff !important;
}

.ts-admin-add-action.btn-primary:hover > i,
.ts-admin-add-action.btn-primary:focus > i,
.ts-admin-add-action.btn-primary:not(:disabled):not(.disabled):active > i,
.ts-admin-update-action:hover > i,
.ts-admin-update-action:focus > i,
.ts-admin-update-action:active > i,
.ts-admin-badges-sync-action:hover > i,
.ts-admin-badges-sync-action:focus > i,
.ts-admin-badges-sync-action:active > i {
    color: #fff !important;
}

/* ==========================================================
 * GPC v2.9.0 — admin localization + server-side pagination
 * ========================================================== */

/* Server-filter toolbars stay visually compatible with the existing compact
   backend controls while allowing search, language/filter and page size to
   submit as one GET request. */
.ts-admin-server-filter {
    width: 100%;
}

.ts-admin-page-size-control {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.ts-admin-page-size-control > label {
    display: inline-grid;
    width: 22px;
    height: 30px;
    margin: 0;
    place-items: center;
    color: var(--site-text-soft);
    cursor: default;
}

.ts-admin-page-size-control > label > i {
    margin: 0 !important;
    font-size: .78rem;
}

.ts-admin-page-size-control > .form-control {
    width: 74px;
    min-width: 74px;
    margin: 0;
}

/* Pagination ---------------------------------------------------------- */
.ts-admin-pagination-bar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--site-border-soft);
}

.ts-admin-pagination-summary {
    color: var(--site-text-muted);
    font-size: .7rem;
    line-height: 1.3;
    white-space: nowrap;
}

.ts-admin-pagination-summary strong {
    color: var(--site-heading);
    font-weight: 700;
}

.ts-admin-pagination-nav {
    min-width: 0;
}

.ts-admin-pagination-nav .pagination {
    flex-wrap: nowrap;
}

.ts-admin-pagination-nav .page-link {
    display: inline-grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    padding: 0 7px;
    color: var(--site-text-soft);
    background: var(--site-surface-2);
    border-color: var(--site-border-soft);
    font-size: .68rem;
    box-shadow: none;
}

.ts-admin-pagination-nav .page-item.active .page-link {
    color: #fff;
    background: var(--site-primary);
    border-color: var(--site-border-accent);
}

.ts-admin-pagination-nav .page-item:not(.active):not(.disabled) .page-link:hover,
.ts-admin-pagination-nav .page-item:not(.active):not(.disabled) .page-link:focus {
    color: #fff;
    background: var(--site-primary-soft);
    border-color: var(--site-border-accent);
}

.ts-admin-pagination-nav .page-item.disabled .page-link {
    color: var(--site-text-muted);
    background: var(--site-surface);
    opacity: .55;
}

/* Localization navbar dropdown --------------------------------------- */
.ts-admin-localization-menu {
    min-width: 220px;
}

.ts-admin-localization-menu .dropdown-item > i {
    margin-right: .55rem !important;
}

/* Language management ------------------------------------------------ */
.ts-admin-language-list,
.ts-admin-translation-list {
    gap: 7px;
}

.ts-admin-language-row,
.ts-admin-translation-row {
    min-width: 0;
}

.ts-admin-language-copy,
.ts-admin-translation-copy {
    min-width: 0;
}

.ts-admin-language-row .ts-admin-content-main,
.ts-admin-translation-row .ts-admin-content-main {
    min-width: 0;
    flex: 1 1 auto;
}

.ts-admin-language-row .ts-admin-meta {
    flex-wrap: wrap;
    gap: 4px 14px;
}

/* Translation values can contain HTML, long messages and URLs. Keep list
   rows compact without altering the actual text inside Edit. */
.ts-admin-translation-row {
    align-items: flex-start;
}

.ts-admin-translation-copy .ts-admin-content-title-line h3 {
    min-width: 0;
    max-width: 100%;
}

.ts-admin-translation-copy .ts-admin-content-title-line code {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--site-red-bright);
    background: transparent;
    padding: 0;
    font-size: .73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-admin-translation-value {
    display: -webkit-box;
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: var(--site-text-soft);
    font-size: .72rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ts-admin-translation-comment {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 5px;
    margin-top: 5px;
    color: var(--site-text-muted);
    font-size: .65rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ts-admin-translation-comment > i {
    flex: 0 0 auto;
    margin-top: 2px !important;
}

.ts-admin-translation-editor {
    min-height: 150px;
    resize: vertical;
    font-family: var(--font-family-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);
    font-size: .75rem;
    line-height: 1.5;
}

/* Backend badges now use the same server-side pagination/search flow. */
.ts-admin-badges-tools.ts-admin-server-filter {
    margin-bottom: 12px;
}

/* Tablets ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ts-admin-server-filter {
        flex-wrap: wrap;
    }

    .ts-admin-server-filter .ts-admin-list-tools-right {
        flex: 1 1 360px;
    }

    .ts-admin-pagination-bar {
        align-items: flex-start;
    }
}

/* Mobile -------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ts-admin-server-filter {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ts-admin-server-filter .ts-admin-language-filter {
        flex: 0 1 auto;
        width: auto;
        align-items: center;
        flex-direction: row;
    }

    .ts-admin-server-filter .ts-admin-language-filter .form-control {
        width: auto;
        min-width: 140px;
        max-width: 190px;
    }

    .ts-admin-server-filter .ts-admin-list-tools-right {
        display: flex;
        flex: 1 1 100%;
        width: 100%;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        margin-left: 0;
    }

    .ts-admin-server-filter .ts-admin-list-tools-right .ts-admin-search {
        flex: 1 1 190px;
        width: auto;
        min-width: 150px;
    }

    .ts-admin-page-size-control {
        flex: 0 0 auto;
    }

    .ts-admin-pagination-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .ts-admin-pagination-summary {
        white-space: normal;
    }

    .ts-admin-pagination-nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    .ts-admin-pagination-nav .pagination {
        width: max-content;
        min-width: 100%;
        justify-content: flex-end;
    }

    .ts-admin-translation-row .ts-admin-content-main,
    .ts-admin-language-row .ts-admin-content-main {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .ts-admin-server-filter .ts-admin-language-filter {
        flex: 1 1 100%;
        width: 100%;
    }

    .ts-admin-server-filter .ts-admin-language-filter .form-control {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }

    .ts-admin-server-filter .ts-admin-list-tools-right {
        justify-content: flex-start;
    }

    .ts-admin-server-filter .ts-admin-list-tools-right .ts-admin-search {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
    }

    .ts-admin-page-size-control {
        margin-right: auto;
    }

    .ts-admin-pagination-nav .pagination {
        justify-content: flex-start;
    }

    .ts-admin-language-row,
    .ts-admin-translation-row {
        gap: 9px;
    }

    .ts-admin-translation-value {
        -webkit-line-clamp: 3;
    }

    .ts-admin-localization-card > .card-body {
        padding: 10px;
    }
}


/* ==========================================================
 * GPC v2.9.2 — desktop homepage brand heading
 * ========================================================== */

/* Desktop navbar is intentionally icon-only, so the homepage heading carries
   the complete configured brand identity there. */
.ts-home-brand-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ts-home-brand-heading .ts-page-heading-copy {
    width: 100%;
    text-align: center;
}

.ts-home-brand-heading h1 {
    margin-bottom: 4px;
}

.ts-home-brand-subtitle {
    margin: 0;
    color: var(--site-text-muted);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .11em;
    text-transform: uppercase;
}

/* Below the desktop breakpoint the navbar already restores the complete
   title + TeamSpeak subtitle, so do not repeat the brand in page content. */
@media (max-width: 1199.98px) {
    .ts-home-brand-heading {
        display: none !important;
    }
}


/* ==========================================================
 * GPC v2.10.0 — SQL socials + responsive Twitch embed
 * ========================================================== */

/* Public sidebar socials */
.ts-social-card-body {
    padding: 10px !important;
}

.ts-social-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.ts-social-link {
    display: grid;
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 7px;
    padding: 8px;
    color: var(--site-text-soft);
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ts-social-link:hover,
.ts-social-link:focus {
    color: #fff;
    background: var(--site-surface-hover);
    border-color: var(--site-border-accent);
    text-decoration: none;
}

.ts-social-link-icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--site-accent-color);
    background: var(--site-primary-soft);
    border: 1px solid var(--site-border-accent);
    border-radius: 4px;
}

.ts-social-link-icon > i,
.ts-social-link-action {
    margin: 0 !important;
}

.ts-social-link-name {
    min-width: 0;
    overflow: hidden;
    font-size: .72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-social-link-action {
    color: var(--site-text-muted);
    font-size: .55rem;
}

.ts-social-link:hover .ts-social-link-action,
.ts-social-link:focus .ts-social-link-action {
    color: #fff;
}

/* Full-width Twitch page */
.ts-twitch-card > .card-body {
    padding: 12px;
}

.ts-twitch-frame-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #050505;
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
}

.ts-twitch-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Backend social catalogue */
.ts-admin-social-row .ts-admin-content-main {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.ts-admin-social-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--site-accent-color);
    background: var(--site-primary-soft);
    border: 1px solid var(--site-border-accent);
    border-radius: 4px;
    font-size: 1rem;
}

.ts-admin-social-icon > i {
    margin: 0 !important;
}

.ts-admin-social-copy,
.ts-admin-social-url {
    min-width: 0;
}

.ts-admin-social-url {
    max-width: 620px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-admin-social-disabled {
    opacity: .68;
}

.ts-admin-social-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-top: 4px;
}

@media (max-width: 1199.98px) {
    /* Once the sidebar drops below content, use the available horizontal room. */
    .ts-social-links {
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ts-twitch-card > .card-body {
        padding: 8px;
    }

    .ts-admin-social-row .ts-admin-content-main {
        width: 100%;
    }

    .ts-admin-social-url {
        max-width: min(72vw, 520px);
    }
}

@media (max-width: 575.98px) {
    .ts-social-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .ts-social-link {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .ts-social-link-action {
        display: none;
    }

    .ts-admin-social-row .ts-admin-content-main {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .ts-admin-social-icon {
        width: 36px;
        height: 36px;
    }

    .ts-admin-social-url {
        max-width: 68vw;
    }

    .ts-twitch-heading .ts-page-heading-actions {
        width: 100%;
        margin-top: 8px;
    }

    .ts-twitch-heading .ts-page-heading-actions .btn {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .ts-social-links {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
 * GPC v2.10.1 — sidebar restoration + branded socials + Twitch chat
 * ========================================================== */

/* Socials are deliberately icon-only in the narrow sidebar. The accessible
   name remains available through the Bootstrap tooltip and aria-label, while
   the compact buttons can never truncate a long platform/community name. */
.ts-social-card-body {
    padding: 10px !important;
}

.ts-social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ts-social-link {
    --ts-social-brand: var(--site-accent-color);
    display: inline-grid;
    width: 46px;
    height: 46px;
    min-width: 46px;
    flex: 0 0 46px;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
    padding: 0;
    color: var(--site-text-soft);
    background: var(--site-surface-2);
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ts-social-link:hover,
.ts-social-link:focus {
    color: #fff;
    background: var(--site-surface-hover);
    border-color: var(--site-border-accent);
    text-decoration: none;
}

.ts-social-link-icon {
    display: inline-grid;
    width: auto;
    height: auto;
    place-items: center;
    color: var(--ts-social-brand);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.22rem;
    line-height: 1;
}

.ts-social-link-icon > i {
    margin: 0 !important;
    transition: filter .15s ease;
}

.ts-social-link:hover .ts-social-link-icon > i,
.ts-social-link:focus .ts-social-link-icon > i {
    filter: brightness(1.14);
}

/* Common platform brand colours. Unknown/custom platforms keep the site's
   normal accent colour, so Socials Management still supports arbitrary rows. */
.ts-social-platform-discord { --ts-social-brand: #5865f2; }
.ts-social-platform-youtube { --ts-social-brand: #ff0000; }
.ts-social-platform-twitch { --ts-social-brand: #9146ff; }
.ts-social-platform-facebook { --ts-social-brand: #1877f2; }
.ts-social-platform-twitter { --ts-social-brand: #1da1f2; }
.ts-social-platform-x { --ts-social-brand: #f2f2f2; }
.ts-social-platform-tiktok { --ts-social-brand: #25f4ee; }
.ts-social-platform-github { --ts-social-brand: #f0f6fc; }
.ts-social-platform-steam { --ts-social-brand: #66c0f4; }
.ts-social-platform-reddit { --ts-social-brand: #ff4500; }
.ts-social-platform-linkedin { --ts-social-brand: #0a66c2; }
.ts-social-platform-telegram { --ts-social-brand: #229ed9; }
.ts-social-platform-whatsapp { --ts-social-brand: #25d366; }
.ts-social-platform-spotify { --ts-social-brand: #1db954; }
.ts-social-platform-soundcloud { --ts-social-brand: #ff5500; }
.ts-social-platform-patreon { --ts-social-brand: #ff424d; }
.ts-social-platform-kick { --ts-social-brand: #53fc18; }
.ts-social-platform-threads { --ts-social-brand: #f2f2f2; }
.ts-social-platform-bluesky { --ts-social-brand: #1185fe; }

/* Instagram's official identity is a gradient rather than one flat colour. */
.ts-social-platform-instagram .ts-social-link-icon > i {
    background: radial-gradient(circle at 30% 107%, #fdf497 0 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Restore the custom contact card as the final sidebar block. */
.ts-sidebar-contact-card .ts-stat-value,
.ts-sidebar-contact-card .ts-stat-value a {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Twitch: player + channel chat on desktop, stacked cleanly on smaller screens. */
.ts-twitch-embed-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.ts-twitch-chat-wrap {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #050505;
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
}

.ts-twitch-chat-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 1199.98px) {
    .ts-twitch-embed-grid {
        grid-template-columns: minmax(0, 1fr) minmax(290px, 330px);
    }
}

@media (max-width: 991.98px) {
    .ts-twitch-embed-grid {
        grid-template-columns: 1fr;
    }

    .ts-twitch-chat-wrap {
        height: 520px;
    }
}

@media (max-width: 575.98px) {
    .ts-social-links {
        gap: 7px;
    }

    .ts-social-link {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-basis: 44px;
    }

    .ts-twitch-chat-wrap {
        height: 460px;
    }
}

@media (max-width: 360px) {
    .ts-social-link {
        width: 42px;
        height: 42px;
        min-width: 42px;
        flex-basis: 42px;
    }

    .ts-twitch-chat-wrap {
        height: 420px;
    }
}

/* Mirror the same brand colour on the Socials Management preview icon. */
.ts-admin-social-icon[class*="ts-social-platform-"] {
    color: var(--ts-social-brand, var(--site-accent-color));
}

.ts-admin-social-icon.ts-social-platform-instagram > i {
    background: radial-gradient(circle at 30% 107%, #fdf497 0 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================
 * GPC v2.10.5 — scalable admin navbar categories
 * Dashboard | Content | Community | Localization
 * ========================================================== */

.ts-admin-nav-menu {
    min-width: 220px;
    padding: .35rem;
}

.ts-admin-nav-menu .dropdown-item {
    display: flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    gap: .55rem;
    padding: .48rem .65rem;
    border-left: 2px solid transparent;
}

.ts-admin-nav-menu .dropdown-item > i {
    width: 18px;
    flex: 0 0 18px;
    margin: 0 !important;
    text-align: center;
    color: var(--site-text-muted);
}

.ts-admin-nav-menu .dropdown-item > span {
    min-width: 0;
    flex: 1 1 auto;
}

.ts-admin-nav-menu .dropdown-item:hover > i,
.ts-admin-nav-menu .dropdown-item:focus > i,
.ts-admin-nav-menu .dropdown-item.active > i {
    color: #c9828b;
}

.ts-admin-nav-menu .dropdown-item.active {
    border-left-color: #b95a67;
}

@media (max-width: 1199.98px) {
    #main-navbar .ts-admin-nav-category > .nav-link {
        width: 100%;
    }

    #main-navbar .ts-admin-nav-menu {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: .15rem 0 .35rem 1.45rem !important;
    }

    #main-navbar .ts-admin-nav-menu .dropdown-item {
        min-height: 40px;
        padding: .5rem .7rem;
        border-left: 2px solid transparent !important;
    }

    #main-navbar .ts-admin-nav-menu .dropdown-item.active {
        border-left-color: #b95a67 !important;
    }
}

@media (max-width: 420px) {
    #main-navbar .ts-admin-nav-menu {
        padding-left: 1rem !important;
    }

    #main-navbar .ts-admin-nav-menu .dropdown-item {
        gap: .45rem;
        padding-right: .45rem;
        padding-left: .55rem;
    }
}

/* ==========================================================
 * GPC v2.10.7 — unified themed select/dropdown fields
 * Shared by frontend and backend.
 * ========================================================== */

/*
 * Bootstrap uses both .form-control and .custom-select throughout the site.
 * Normalize actual SELECT elements so every form dropdown uses the same dark
 * theme, border, focus state and chevron in public pages and the admin area.
 */
select.form-control,
select.custom-select {
    color-scheme: dark;
    border: 1px solid #353538 !important;
    border-radius: 4px !important;
    background-color: #121111 !important;
    color: #e5e4e4 !important;
    box-shadow: none;
}

select.form-control:not([multiple]):not([size]),
select.custom-select:not([multiple]):not([size]) {
    padding-right: 2rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23a96872' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .7rem center !important;
    background-size: 12px 8px !important;
}

select.form-control:hover,
select.custom-select:hover {
    border-color: #47474a !important;
    background-color: #151313 !important;
}

select.form-control:focus,
select.custom-select:focus {
    border-color: #973544 !important;
    background-color: #161414 !important;
    color: #f4f4f4 !important;
    box-shadow: 0 0 0 3px rgba(150, 50, 65, .13) !important;
}

select.form-control:disabled,
select.custom-select:disabled {
    border-color: #2f2f31 !important;
    background-color: #171616 !important;
    color: #777579 !important;
    opacity: 1;
}

select.form-control option,
select.form-control optgroup,
select.custom-select option,
select.custom-select optgroup {
    background: #171515;
    color: #e5e4e4;
}

select.form-control optgroup,
select.custom-select optgroup {
    color: #c9828b;
    font-weight: 700;
}

select.form-control option:disabled,
select.custom-select option:disabled {
    color: #777579;
}

select.form-control-sm,
select.custom-select-sm {
    min-height: 32px;
    height: 32px;
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .78rem;
}

/* ==========================================================
 * GPC v2.10.7 — frontend Badges toolbar
 * Uses the exact same form-control selects as backend filters.
 * ========================================================== */

.ts-badges-toolbar > .card-body {
    padding: 10px 12px;
}

.ts-badges-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.ts-badges-filter-leading {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    order: 0;
}

.ts-badges-filter-icon {
    display: inline-grid;
    width: 32px;
    height: 32px;
    margin: 0;
    place-items: center;
    color: var(--site-text-soft);
    cursor: default;
}

.ts-badges-filter-icon > i {
    margin: 0 !important;
    font-size: .82rem;
}

.ts-badges-filters .form-group {
    min-width: 0;
    margin: 0;
}

.ts-badges-filter-select {
    width: auto;
    min-width: 0;
}

.ts-badges-filter-select .form-control {
    width: auto;
    min-width: 155px;
    min-height: 32px;
    height: 32px;
    margin: 0;
}

.ts-badges-search {
    position: relative;
    width: min(360px, 34vw);
    min-width: 260px;
}

.ts-badges-search-icon {
    position: absolute;
    top: 50%;
    left: 11px;
    z-index: 2;
    margin: 0 !important;
    color: var(--site-text-muted);
    font-size: .78rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.ts-badges-search .form-control {
    min-height: 32px;
    height: 32px;
    padding-left: 34px;
    font-size: .78rem;
}

.ts-badges-clear-wrap {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    order: 4;
}

.ts-badges-clear-wrap .btn {
    display: inline-grid;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    place-items: center;
}

.ts-badges-clear-wrap .btn[hidden] {
    display: none !important;
}

.ts-badges-clear-wrap .btn i {
    margin: 0 !important;
}

/* Desktop order stays:
   Filters -> Availability -> Status -> Search -> Clear. */
.ts-badges-availability {
    order: 1;
}

.ts-badges-status {
    order: 2;
}

.ts-badges-search {
    order: 3;
}

@media (max-width: 991.98px) {
    .ts-badges-filters {
        flex-wrap: wrap;
    }

    .ts-badges-search {
        flex: 1 1 260px;
        width: auto;
        min-width: 220px;
    }
}

@media (max-width: 767.98px) {
    .ts-badges-filters {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) 32px;
        align-items: center;
        gap: 7px;
    }

    .ts-badges-filter-leading {
        grid-column: 1;
        grid-row: 2;
        order: initial;
    }

    .ts-badges-search {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        order: initial;
    }

    .ts-badges-availability {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        order: initial;
    }

    .ts-badges-status {
        grid-column: 3;
        grid-row: 2;
        width: 100%;
        order: initial;
    }

    .ts-badges-filter-select .form-control {
        width: 100%;
        min-width: 0;
    }

    .ts-badges-clear-wrap {
        grid-column: 4;
        grid-row: 2;
        align-self: center;
        justify-self: end;
        order: initial;
    }
}

@media (max-width: 575.98px) {
    .ts-badges-toolbar > .card-body {
        padding: 9px;
    }

    .ts-badges-filters {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
    }

    .ts-badges-filter-leading {
        grid-column: 1;
        grid-row: 2 / span 2;
        align-self: center;
    }

    .ts-badges-availability {
        grid-column: 2;
        grid-row: 2;
    }

    .ts-badges-status {
        grid-column: 2;
        grid-row: 3;
    }

    .ts-badges-clear-wrap {
        grid-column: 3;
        grid-row: 2 / span 2;
        align-self: center;
    }
}

/* GPC v2.10.8 — all themed SELECT fields keep the same subtle 4px
   corner radius as the rest of the interface. Native option popups may
   still use browser/OS geometry. */

/* GPC v2.10.9 — public Badges filter SELECTs now follow the backend sizing
   model: auto width with a 155px minimum on desktop, full-width in the
   responsive grid. This lets long translated option labels fit naturally. */

/* GPC v2.11.3 — backend numeric content IDs keep the compact 26px height,
   but expand horizontally for larger database IDs instead of overflowing. */

/* ==========================================================
 * GPC v2.12.1 — inline restriction state + profile status correction
 * ========================================================== */

.ts-restricted-inline {
    min-height: 190px;
    margin: 0;
}

.ts-restricted-inline .ts-empty-icon {
    color: #d47783;
}

.ts-restricted-inline-message {
    max-width: 620px;
    margin: 0 auto;
    color: var(--site-text);
    font-size: .9rem;
    line-height: 1.6;
}

.ts-restricted-inline-help {
    max-width: 620px;
    margin: 7px auto 0;
    color: var(--site-text-muted);
    font-size: .8rem;
    line-height: 1.5;
}

/* Account-state chips live beside Online / Offline / Away. */
.ts-profile-status-row .ts-profile-account-badge {
    gap: 4px;
    max-width: 100%;
    white-space: normal;
}

.ts-profile-status-row .ts-profile-account-badge strong {
    font-weight: 750;
}

/* Staff: Yes=green, No=red, Ghosted=neutral. Do not add a badge outline
   that the other hero-state badges do not use. */
.ts-profile-status-row .ts-profile-staff-badge {
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 575.98px) {
    .ts-restricted-inline {
        min-height: 165px;
        padding-inline: 4px;
    }

    .ts-restricted-inline-message {
        font-size: .86rem;
    }

    .ts-profile-status-row {
        width: 100%;
    }

    .ts-profile-status-row .badge {
        min-height: 27px;
        font-size: .72rem;
    }
}

/* ==========================================================
 * GPC v2.12.2 — restricted-card centering
 * The inline restriction state is the only child of these card bodies, so
 * make it occupy the body area and center its contents on both axes.
 * ========================================================== */
.card-body > .ts-restricted-inline {
    width: 100%;
    max-width: none;
    min-height: 260px;
    margin: 0;
    padding: 24px 12px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 575.98px) {
    .card-body > .ts-restricted-inline {
        min-height: 210px;
        padding: 20px 6px;
    }
}

/* ==========================================================
 * GPC v2.12.6 — unified restricted card-body geometry
 * Restricted states should occupy the same card geometry on every module.
 * This only affects card bodies whose direct child is the restriction state;
 * the normal Assigner layout is unchanged.
 * ========================================================== */
.card-body:has(> .ts-restricted-inline) {
    padding: 22px;
}

@media (max-width: 575.98px) {
    .card-body:has(> .ts-restricted-inline) {
        padding: 16px;
    }
}


/* ==========================================================
 * GPC v2.14.11 — natural frontend content height
 * Do not stretch short page cards to the sidebar height. Main content and
 * sidebar now size independently; pages only grow when their own content
 * requires it.
 * ========================================================== */

/* ========================================================================== 
   v2.13.0 - Built-in service monitoring / public status
   ========================================================================== */
.ts-monitor-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: rgba(148, 163, 184, .7);
    box-shadow: 0 0 0 5px rgba(148, 163, 184, .10);
}

.ts-monitor-status-dot.is-up,
.ts-status-service-state.is-up .ts-monitor-status-dot,
.ts-status-overall.is-up .ts-monitor-status-dot {
    background: #55d86a;
    box-shadow: 0 0 0 5px rgba(85, 216, 106, .13);
}

.ts-monitor-status-dot.is-degraded,
.ts-status-service-state.is-degraded .ts-monitor-status-dot,
.ts-status-overall.is-degraded .ts-monitor-status-dot {
    background: #f0b84b;
    box-shadow: 0 0 0 5px rgba(240, 184, 75, .13);
}

.ts-monitor-status-dot.is-down,
.ts-status-service-state.is-down .ts-monitor-status-dot,
.ts-status-overall.is-down .ts-monitor-status-dot {
    background: #e35a61;
    box-shadow: 0 0 0 5px rgba(227, 90, 97, .13);
}

.ts-status-page-heading {
    align-items: center;
}

.ts-status-overall {
    display: inline-flex;
    margin-left: auto;
    padding: 8px 12px;
    gap: 9px;
    align-items: center;
    border: 1px solid var(--ts-border-color, rgba(255,255,255,.08));
    border-radius: 4px;
    background: rgba(255,255,255,.025);
    font-size: .82rem;
    font-weight: 650;
}

.ts-status-overall.is-up,
.ts-status-service-state.is-up {
    color: #65e476;
}

.ts-status-overall.is-degraded,
.ts-status-service-state.is-degraded {
    color: #f2c05e;
}

.ts-status-overall.is-down,
.ts-status-service-state.is-down {
    color: #ef6b72;
}

.ts-status-overall.is-unknown,
.ts-status-service-state.is-unknown {
    color: rgba(221, 226, 239, .62);
}

.ts-status-refresh-note {
    display: flex;
    margin: -4px 0 14px;
    gap: 7px;
    align-items: center;
    justify-content: flex-end;
    color: rgba(221, 226, 239, .52);
    font-size: .74rem;
}

.ts-status-refresh-note i {
    margin: 0;
}

.ts-status-service-list,
.ts-monitor-admin-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ts-status-group-title {
    margin: 10px 0 -2px;
    font-size: 1rem;
    font-weight: 700;
}

.ts-status-service-card,
.ts-monitor-admin-card {
    margin-bottom: 0;
}

.ts-status-service-card .card-body {
    padding: 22px 28px;
}

.ts-status-service-head,
.ts-monitor-admin-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
}

.ts-status-service-title-line,
.ts-monitor-admin-title-line {
    display: flex;
    min-width: 0;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
}

.ts-status-service-title-line h3,
.ts-monitor-admin-title-line h3 {
    margin: 0;
    color: var(--ts-heading-color, #fff);
    font-size: .95rem;
    font-weight: 700;
}

.ts-status-uptime {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: #65e476;
    font-size: .78rem;
    font-weight: 650;
}

.ts-status-uptime i {
    margin: 0;
    color: rgba(221, 226, 239, .42);
    font-size: .68rem;
}

.ts-status-service-description,
.ts-monitor-admin-description {
    margin: 6px 0 0;
    color: rgba(221, 226, 239, .56);
    font-size: .78rem;
}

.ts-status-service-state {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 9px;
    align-items: center;
    font-size: .8rem;
    font-weight: 650;
    white-space: nowrap;
}

.ts-monitor-history {
    display: grid;
    grid-template-columns: repeat(90, minmax(2px, 1fr));
    width: 100%;
    margin-top: 18px;
    gap: 3px;
}

.ts-monitor-history-bar {
    height: 28px;
    border-radius: 2px;
    background: rgba(148, 163, 184, .18);
}

.ts-monitor-history-bar.is-up {
    background: #58d96a;
}

.ts-monitor-history-bar.is-degraded {
    background: #efb84e;
}

.ts-monitor-history-bar.is-down {
    background: #dc565e;
}

.ts-monitor-history-bar.is-unknown {
    background: rgba(148, 163, 184, .16);
}

.ts-status-service-foot {
    display: flex;
    margin-top: 12px;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    color: rgba(221, 226, 239, .46);
    font-size: .7rem;
}

.ts-status-service-foot span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.ts-status-service-foot i {
    margin: 0;
}

/* Admin monitoring */
.ts-monitor-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 14px;
    gap: 10px;
}

.ts-monitor-summary-card {
    display: flex;
    min-height: 70px;
    padding: 14px 16px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--ts-border-color, rgba(255,255,255,.08));
    border-radius: 4px;
    background: rgba(255,255,255,.025);
}

.ts-monitor-summary-card span {
    color: rgba(221, 226, 239, .52);
    font-size: .7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.ts-monitor-summary-card strong {
    margin-top: 2px;
    color: #fff;
    font-size: 1.35rem;
}

.ts-monitor-summary-card.is-up strong { color: #65e476; }
.ts-monitor-summary-card.is-degraded strong { color: #f2c05e; }
.ts-monitor-summary-card.is-down strong { color: #ef6b72; }
.ts-monitor-summary-card.is-unknown strong { color: rgba(221, 226, 239, .62); }

.ts-monitor-admin-note {
    margin-bottom: 14px;
}

.ts-monitor-admin-card .card-body {
    padding: 18px 20px;
}

.ts-monitor-admin-primary {
    min-width: 0;
    flex: 1 1 auto;
}

.ts-monitor-admin-meta,
.ts-monitor-admin-result {
    display: flex;
    margin-top: 8px;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    color: rgba(221, 226, 239, .52);
    font-size: .72rem;
}

.ts-monitor-admin-meta span,
.ts-monitor-admin-result span {
    display: inline-flex;
    min-width: 0;
    gap: 5px;
    align-items: center;
}

.ts-monitor-admin-meta i {
    margin: 0;
}

.ts-monitor-admin-meta code {
    max-width: 520px;
    overflow: hidden;
    color: rgba(236, 239, 248, .72);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-monitor-admin-result strong {
    color: rgba(236, 239, 248, .86);
}

.ts-monitor-admin-actions {
    flex: 0 0 auto;
}

.ts-monitor-history-admin {
    margin-top: 14px;
}

.ts-monitor-history-admin .ts-monitor-history-bar {
    height: 10px;
}

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

.ts-monitor-form-wide {
    grid-column: 1 / -1;
}

.ts-monitor-checkbox-group {
    display: flex;
    min-height: 62px;
    padding-top: 29px;
    flex-direction: column;
    justify-content: flex-start;
}

.ts-monitor-checkbox-group .custom-control {
    min-height: 1.5rem;
}

@media (max-width: 991.98px) {
    .ts-status-page-heading {
        align-items: flex-start;
    }

    .ts-status-overall {
        width: 100%;
        margin: 10px 0 0;
        justify-content: center;
    }

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

    .ts-status-service-head,
    .ts-monitor-admin-row {
        flex-direction: column;
    }

    .ts-monitor-admin-actions {
        width: 100%;
    }

    .ts-monitor-history {
        gap: 2px;
    }

    .ts-status-service-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 575.98px) {
    .ts-status-service-card .card-body,
    .ts-monitor-admin-card .card-body {
        padding: 16px;
    }

    .ts-monitor-summary-grid,
    .ts-monitor-form-grid {
        grid-template-columns: 1fr;
    }

    .ts-monitor-form-wide {
        grid-column: auto;
    }

    .ts-monitor-checkbox-group {
        min-height: 0;
        padding-top: 0;
    }

    .ts-monitor-history {
        gap: 1px;
    }

    .ts-monitor-history-bar {
        height: 22px;
        border-radius: 1px;
    }
}

.ts-status-section-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ========================================================================== 
   v2.14.0 - Monitoring UX, protocol tooltips and automatic ordering
   ========================================================================== */
.ts-status-refresh-note {
    gap: 16px;
    flex-wrap: wrap;
}

.ts-status-refresh-note > span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.ts-status-refresh-note strong {
    color: rgba(236, 239, 248, .76);
    font-weight: 650;
}

.ts-monitor-history-bar {
    position: relative;
    cursor: help;
    outline: none;
}

.ts-monitor-history-bar::before,
.ts-monitor-history-bar::after {
    position: absolute;
    left: 50%;
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.ts-monitor-history-bar::before {
    content: "";
    bottom: calc(100% + 5px);
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid rgba(12, 14, 19, .98);
    transform: translate(-50%, 3px);
}

.ts-monitor-history-bar::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    max-width: 260px;
    padding: 7px 9px;
    transform: translate(-50%, 3px);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 4px;
    background: rgba(12, 14, 19, .98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    color: rgba(246, 247, 251, .94);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
}

.ts-monitor-history-bar:hover::before,
.ts-monitor-history-bar:hover::after,
.ts-monitor-history-bar:focus::before,
.ts-monitor-history-bar:focus::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ts-admin-monitor-content-card > .card-body {
    padding: 18px 20px 20px;
}

.ts-monitor-admin-toolbar {
    margin-bottom: 14px;
}

.ts-admin-monitor-content-card .ts-monitor-summary-grid {
    margin-bottom: 16px;
}

.ts-monitor-empty-state {
    min-height: 150px;
}

.ts-monitor-empty-state span {
    display: block;
    margin-top: 4px;
    color: rgba(221, 226, 239, .52);
    font-size: .78rem;
}

@media (max-width: 575.98px) {
    .ts-status-refresh-note {
        align-items: flex-end;
        flex-direction: column;
        gap: 4px;
    }

    .ts-monitor-history-bar::after {
        max-width: 210px;
        font-size: .66rem;
    }
}

/* ========================================================================== 
   GPC v2.14.1 - frontend Badges/Status content cards + monitor mobile fix
   ========================================================================== */
.ts-badges-content-card,
.ts-status-page-card {
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
}

.ts-badges-content-card > .card-body,
.ts-status-page-card > .card-body {
    min-width: 0;
    padding: 18px 20px 20px;
}

/* Badges now use one page-level content card, matching the rest of the site. */
.ts-badges-content-card .ts-badges-toolbar {
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--site-border-soft);
}

.ts-badges-content-card .ts-badge-list {
    min-width: 0;
}

.ts-badges-content-card .ts-badges-empty {
    display: flex;
    min-height: 110px;
    margin-top: 10px;
    gap: 9px;
    align-items: center;
    justify-content: center;
    color: var(--site-text-muted);
    text-align: center;
}

.ts-badges-content-card .ts-badges-empty[hidden] {
    display: none !important;
}

.ts-badges-content-card .ts-badges-empty i {
    margin: 0;
}

/* Status metadata and service cards live inside one page-level content card. */
.ts-status-page-card .ts-status-refresh-note {
    margin: 0 0 14px;
}

.ts-status-page-card #statusServices,
.ts-status-page-card .ts-status-service-list,
.ts-status-page-card .ts-status-service-card,
.ts-status-page-card .ts-status-service-card > .card-body,
.ts-status-page-card .ts-status-service-head,
.ts-status-page-card .ts-status-service-head > *,
.ts-status-page-card .ts-status-service-title-line,
.ts-status-page-card .ts-monitor-history {
    min-width: 0;
    max-width: 100%;
}

.ts-status-page-card .ts-status-empty-state {
    min-height: 140px;
}

/* Do not let the 90 history cells or their hover tooltip widen the viewport. */
.ts-status-page-card .ts-monitor-history {
    grid-template-columns: repeat(90, minmax(0, 1fr));
}

.ts-status-page-card .ts-monitor-history-bar {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .ts-badges-content-card > .card-body,
    .ts-status-page-card > .card-body {
        padding: 14px;
    }

    .ts-badges-content-card .ts-badges-toolbar {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .ts-status-page,
    .ts-status-page-card,
    .ts-status-page-card > .card-body,
    .ts-status-page-card #statusServices,
    .ts-status-page-card .ts-status-service-list {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .ts-status-page-card .ts-status-refresh-note {
        width: 100%;
        align-items: flex-start;
    }

    .ts-status-page-card .ts-status-service-card > .card-body {
        padding: 14px;
    }

    .ts-status-page-card .ts-monitor-history {
        width: 100%;
        gap: 1px;
        overflow: hidden;
    }

    .ts-status-page-card .ts-monitor-history-bar::before,
    .ts-status-page-card .ts-monitor-history-bar::after {
        max-width: min(210px, calc(100vw - 42px));
    }
}

/* ========================================================================== 
   GPC v2.14.10 - compact Status shortcut + backend navigation cleanup
   ========================================================================== */
/* Status is a frontend utility next to the language selector, not a primary
   navigation destination. Desktop mirrors the compact Admin shortcut pattern;
   collapsed/mobile navigation restores the translated label. */
#main-navbar .ts-status-shortcut-label {
    display: none;
}

@media (min-width: 1200px) {
    #main-navbar .ts-status-shortcut-link > i {
        margin-right: 0 !important;
    }
}

@media (max-width: 1199.98px) {
    #main-navbar .ts-status-shortcut-label {
        display: inline;
    }

    #main-navbar .ts-status-shortcut-link > i {
        margin-right: .55em !important;
    }
}


/* ==========================================================
 * GPC v2.14.13 — natural-height content + long-page bottom alignment
 * Keep cards at their natural height. The row/columns may stretch, but no
 * card is allowed to flex-grow. On long pages the sticky sidebar is then
 * constrained by the taller content column and both visible columns finish
 * on the same baseline. On short pages the main content remains naturally
 * shorter than the sidebar with no artificial empty card-body space.
 * ========================================================== */
@media (min-width: 1200px) {
    .ts-layout-row:has(> .ts-sidebar-column) {
        align-items: stretch;
    }

    .ts-layout-row:has(> .ts-sidebar-column) > .ts-content-column,
    .ts-layout-row:has(> .ts-sidebar-column) > .ts-sidebar-column {
        min-height: 0;
        align-self: stretch;
    }

    /* Remove only the trailing layout gap. Never stretch the card itself. */
    .ts-layout-row:has(> .ts-sidebar-column) > .ts-content-column > .card:last-child,
    .ts-sidebar-sticky > .card:last-child {
        margin-bottom: 0;
    }
}


/* ==========================================================================
   GPC v2.16.0 - Donations (clean rebuild)
   ========================================================================== */
.ts-donations-card > .card-body { padding: 20px; }
.ts-donations-hero { text-align: center; padding: 2px 12px 18px; }
.ts-donations-heart,
.ts-donations-result-icon {
    display: inline-grid; place-items: center; width: 58px; height: 58px;
    margin-bottom: 14px; border: 1px solid rgba(173,60,74,.28);
    border-radius: 4px; background: rgba(125,41,53,.16); color: #d47784;
    font-size: 1.35rem;
}
.ts-donations-hero h2 { margin-bottom: 8px; font-size: 1.25rem; }
.ts-donations-hero p { max-width: 760px; margin: 0 auto; color: var(--site-text-muted); }
.ts-donations-panel {
    margin-top: 16px; padding: 18px; border: 1px solid var(--site-border-soft);
    border-radius: 4px; background: var(--site-surface-2);
}
.ts-donations-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.ts-donations-reference { margin-bottom:8px; color:var(--site-text-muted); font-size:.88rem; }
.ts-donations-progress {
    display:block; width:100%; height:10px; margin:0 0 9px; border:0; border-radius:4px;
    appearance:none; -webkit-appearance:none; overflow:hidden; background:#111010;
}
.ts-donations-progress::-webkit-progress-bar { background:#111010; border-radius:4px; }
.ts-donations-progress::-webkit-progress-value { background:linear-gradient(90deg,#92313e,#c44958); border-radius:4px; }
.ts-donations-progress::-moz-progress-bar { background:linear-gradient(90deg,#92313e,#c44958); border-radius:4px; }
.ts-paypal-donate-container { min-height:48px; display:flex; justify-content:center; align-items:center; padding:10px 0; }
.ts-donations-security { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--site-border-soft); color:var(--site-text-muted); font-size:.88rem; }
.ts-donations-security i { color:#68b77c; }
.ts-donations-purpose-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.ts-donations-purpose-grid span { display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 12px; border:1px solid var(--site-border-soft); border-radius:4px; background:rgba(255,255,255,.015); }
.ts-donations-purpose-grid i { width:18px; color:#c66975; text-align:center; }
.ts-donations-policy { display:flex; gap:8px; align-items:flex-start; margin-top:16px; }
.ts-donations-result-card .card-body { padding:32px 20px; }
.ts-donations-result-success { color:#72c58a; background:rgba(65,130,82,.14); border-color:rgba(91,163,108,.25); }
.ts-donations-result-cancel { color:#d47784; }
.ts-donations-result-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:20px; }

@media (max-width: 767.98px) {
    .ts-donations-purpose-grid { grid-template-columns:1fr; }
    .ts-donations-panel-head { align-items:flex-start; flex-direction:column; gap:4px; }
}


/* ==========================================================================
   GPC v2.16.1 - PayPal Donate popup trigger + unified result routes
   ========================================================================== */
.ts-paypal-donate-container {
    min-height: 74px;
    padding: 8px 0 4px;
}

.ts-paypal-donate-container #donate-button,
.ts-paypal-donate-container #donate-button > div {
    max-width: 100%;
}

.ts-paypal-donate-container img {
    display: block;
    width: min(420px, 100%);
    height: auto;
    margin: 0 auto;
    border: 0;
    border-radius: 7px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.ts-paypal-donate-container img:hover,
.ts-paypal-donate-container img:focus {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 13px 32px rgba(0, 0, 0, .28);
}

.ts-paypal-donate-container img:active {
    transform: translateY(0);
}

.ts-donations-result {
    padding: 16px 6px 8px;
}

.ts-donations-result > h2 {
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.ts-donations-result > p {
    max-width: 700px;
    margin: 0 auto 16px;
    color: var(--site-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .ts-paypal-donate-container img {
        transition: none;
    }
}


/* ==========================================================================
   GPC v2.16.3 - Donations alignment + backend UX
   ========================================================================== */

/* Keep Font Awesome glyphs optically centered inside the donation icon boxes. */
.ts-donations-heart,
.ts-donations-result-icon {
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ts-donations-heart > i,
.ts-donations-result-icon > i {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* The support-purpose title is a section label, not another page heading. */
.ts-donations-panel > h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
}

/* Give the informational tip icon a real centered box too. */
.ts-donations-policy {
    align-items: center;
}

.ts-donations-policy > i {
    display: flex;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(103, 139, 224, .28);
    border-radius: 4px;
    background: rgba(91, 121, 201, .12);
    line-height: 1;
}

/* Backend Donations: clear sections instead of one long undifferentiated form. */
.ts-admin-donations-form {
    display: grid;
    gap: 14px;
}

.ts-admin-donations-section {
    padding: 16px;
    border: 1px solid var(--site-border-soft);
    border-radius: 4px;
    background: var(--site-surface-2);
}

.ts-admin-donations-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--site-border-soft);
}

.ts-admin-donations-section-title {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 10px;
}

.ts-admin-donations-section-icon {
    display: flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(173, 60, 74, .22);
    border-radius: 4px;
    background: rgba(125, 41, 53, .12);
    color: #c66975;
    line-height: 1;
}

.ts-admin-donations-section-copy h2 {
    margin: 0 0 3px;
    font-size: 1rem;
    font-weight: 750;
}

.ts-admin-donations-section-copy p {
    margin: 0;
    color: var(--site-text-muted);
    font-size: .84rem;
    line-height: 1.45;
}

.ts-admin-donations-status {
    flex: 0 0 auto;
}

.ts-admin-donations-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ts-admin-donations-return-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ts-admin-donations-section .form-group:last-child {
    margin-bottom: 0;
}

.ts-admin-donations-actions {
    display: flex;
    justify-content: center;
    padding-top: 2px;
}

.ts-admin-donations-actions .btn {
    min-width: 130px;
}

@media (max-width: 991.98px) {
    .ts-admin-donations-settings-grid,
    .ts-admin-donations-return-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ts-admin-donations-section {
        padding: 13px;
    }

    .ts-admin-donations-section-heading {
        flex-direction: column;
    }
}


/* ==========================================================================
   GPC v2.16.8 - Backend Donations icon alignment
   ========================================================================== */

/* Font Awesome uses its own inline/baseline metrics. Center the glyph itself,
   not only its parent box, so every Donations section icon sits exactly in
   the middle horizontally and vertically. */
.ts-admin-donations-section-icon {
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    text-align: center;
}

.ts-admin-donations-section-icon > i {
    display: grid !important;
    width: 1em;
    height: 1em;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center;
    line-height: 1 !important;
    text-align: center;
    vertical-align: middle;
}

.ts-admin-donations-section-icon > i::before {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   v2.17.0 - SQL-managed custom admin menus
   -------------------------------------------------------------------------- */
#main-navbar .ts-custom-menu-label {
    display: none;
}

#main-navbar .ts-custom-menu-link::after {
    display: none;
}

#main-navbar .ts-custom-menu-dropdown {
    min-width: 220px;
}

#main-navbar .ts-custom-menu-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
}

#main-navbar .ts-custom-menu-dropdown .dropdown-item > i {
    flex: 0 0 1.15rem;
    margin: 0 !important;
    text-align: center;
}

@media (min-width: 1200px) {
    #main-navbar .ts-custom-menu-link > i {
        margin-right: 0 !important;
    }
}

@media (max-width: 1199.98px) {
    #main-navbar .ts-custom-menu-label {
        display: inline;
    }

    #main-navbar .ts-custom-menu-link > i {
        margin-right: .55em !important;
    }
}

.ts-admin-menu-row .ts-admin-content-main {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.ts-admin-menu-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--site-accent-color);
    background: var(--site-primary-soft);
    border: 1px solid var(--site-border-accent);
    border-radius: 4px;
    font-size: 1rem;
}

.ts-admin-menu-icon > i {
    margin: 0 !important;
}

.ts-admin-menu-copy,
.ts-admin-menu-url {
    min-width: 0;
}

.ts-admin-menu-translation-key {
    max-width: 330px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-admin-menu-url {
    display: inline-block;
    max-width: 650px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.ts-admin-menu-disabled {
    opacity: .68;
}

.ts-admin-menu-translations {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin-top: 6px;
}

.ts-admin-menu-translation-chip {
    max-width: 320px;
    padding: 2px 7px;
    overflow: hidden;
    color: var(--site-text-muted);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--site-border-soft);
    border-radius: 3px;
    font-size: .75rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-admin-menu-translation-chip b {
    color: var(--site-text-color);
}

.ts-admin-menu-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-top: 4px;
}

.ts-admin-menu-form-section {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .15rem 0 .65rem;
    color: var(--site-text-color);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .ts-admin-menu-row .ts-admin-content-main {
        width: 100%;
    }

    .ts-admin-menu-url {
        max-width: min(72vw, 520px);
    }
}

@media (max-width: 575.98px) {
    .ts-admin-menu-row .ts-admin-content-main {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .ts-admin-menu-icon {
        width: 36px;
        height: 36px;
    }

    .ts-admin-menu-url,
    .ts-admin-menu-translation-key,
    .ts-admin-menu-translation-chip {
        max-width: 68vw;
    }
}

/* ==========================================================
 * GPC v2.17.6 — Twitch status/action order and spacing.
 * ========================================================== */
.ts-twitch-heading-actions {
    align-items: center;
    gap: 12px;
}

.ts-twitch-open-icon {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
}

.ts-twitch-open-icon > i {
    margin: 0 !important;
}

.ts-twitch-status-pulse {
    flex: 0 0 8px;
    cursor: help;
}

.ts-twitch-status-pulse.is-live {
    background: #5dc18f;
    box-shadow: 0 0 0 2px rgba(93, 193, 143, .12);
    color: #5dc18f;
}

.ts-twitch-status-pulse.is-offline {
    background: #e26767;
    box-shadow: 0 0 0 2px rgba(226, 103, 103, .12);
    color: #e26767;
}

.ts-twitch-status-pulse.is-live::after,
.ts-twitch-status-pulse.is-offline::after {
    animation: ts-status-ring 2.6s ease-in-out infinite;
}

.ts-twitch-offline-card > .card-body {
    padding: 28px;
}

.ts-twitch-offline-state {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 26px 18px;
    text-align: center;
}

.ts-twitch-offline-icon {
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    margin-bottom: 14px;
    color: #a970ff;
    background: rgba(145, 70, 255, .10);
    border: 1px solid rgba(169, 112, 255, .24);
    border-radius: 5px;
    font-size: 1.35rem;
}

.ts-twitch-offline-icon i {
    margin: 0 !important;
}

.ts-twitch-offline-state h2 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 750;
}

.ts-admin-twitch-api-card {
    margin-bottom: 14px;
}

.ts-admin-twitch-api-card > .card-body {
    padding: 16px;
}

.ts-admin-twitch-api-heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.ts-admin-twitch-api-heading h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
}

.ts-admin-twitch-api-heading h2 i {
    margin-right: 8px;
    color: #a970ff;
}

.ts-admin-twitch-api-heading p {
    max-width: 760px;
    margin: 5px 0 0;
    color: var(--site-text-muted);
    font-size: .78rem;
    line-height: 1.5;
}

.ts-admin-twitch-api-status {
    flex: 0 0 auto;
}

.ts-admin-twitch-api-status .badge {
    padding: .42rem .55rem;
    font-size: .68rem;
}

.ts-admin-twitch-api-status .badge i {
    margin-right: 5px !important;
}

.ts-admin-twitch-api-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--site-border-soft);
}

.ts-admin-twitch-api-toggle {
    margin-bottom: 14px;
}

.ts-admin-twitch-api-form .form-group {
    margin-bottom: 12px;
}

.ts-admin-twitch-api-form label {
    font-size: .76rem;
    font-weight: 700;
}

.ts-admin-twitch-api-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-top: 2px;
}

.ts-admin-twitch-api-footer > div {
    min-width: 0;
}

.ts-admin-twitch-api-readonly {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--site-border-soft);
    color: var(--site-text-muted);
    font-size: .76rem;
}

@media (max-width: 767.98px) {
    .ts-admin-twitch-api-heading,
    .ts-admin-twitch-api-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .ts-admin-twitch-api-status .badge,
    .ts-admin-twitch-api-footer .btn {
        width: 100%;
    }

    .ts-admin-twitch-api-status .badge {
        text-align: left;
    }

    .ts-twitch-offline-card > .card-body {
        padding: 12px;
    }

    .ts-twitch-offline-state {
        min-height: 240px;
        padding: 24px 12px;
    }

}

@media (max-width: 575.98px) {
    .ts-twitch-heading .ts-page-heading-actions {
        width: auto;
        margin-top: 0;
        margin-left: auto;
    }

    .ts-twitch-heading .ts-page-heading-actions .ts-twitch-open-icon {
        width: 32px;
        height: 32px;
    }

    .ts-twitch-offline-card > .card-body {
        padding: 12px;
    }

    .ts-twitch-offline-state {
        min-height: 190px;
        padding: 22px 12px;
    }
}

/* ==========================================================
 * v2.18.6 — restore large error-page background warning icon
 * ========================================================== */
.ts-error-background-icon {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: flex;
    width: 46vw;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
}

.ts-error-background-icon i {
    position: absolute;
    left: -12vw;
    margin: 0 !important;
    font-size: min(66vw, 72vh);
    line-height: 1;
    color: var(--site-red);
    opacity: .045;
}

@media (max-width: 575.98px) {
    .ts-error-background-icon {
        width: 70vw;
    }

    .ts-error-background-icon i {
        left: -23vw;
        font-size: min(94vw, 62vh);
        opacity: .032;
    }
}

/* ==========================================================
 * GPC v2.18.10 — Badges spacing + full-width protected states.
 * Keep Badges on the same page-heading/content rhythm as the rest
 * of the frontend and let login-required copy use the full card body.
 * ========================================================== */

/* Badges had a historical compact override of 10px while the shared
   page-heading spacing is 14px. Restore the normal site rhythm. */
.ts-badges-page .ts-page-heading {
    margin-bottom: 14px;
}

/* Older profile/protected styling capped these states at 620px. That made
   longer translated login messages wrap even when the card body had space. */
.ts-protected-state,
.ts-profile-login-state {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
}

.ts-protected-state h4,
.ts-profile-login-state h4,
.ts-profile-login-state p {
    width: 100%;
    max-width: none;
}

@media (max-width: 575.98px) {
    .ts-protected-state,
    .ts-profile-login-state {
        margin-right: 0;
        margin-left: 0;
    }

    .ts-protected-state h4,
    .ts-profile-login-state h4,
    .ts-profile-login-state p {
        max-width: none;
    }
}


/* ==========================================================
 * GPC v2.18.12 — full-width restriction state + Channel Creator fix.
 * Restriction copy now follows the same full card-body width model as
 * login-required states. The shared component also covers admin backend.
 * ========================================================== */
.ts-restricted-inline,
.ts-restricted-inline h4,
.ts-restricted-inline-message,
.ts-restricted-inline-help {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.ts-restricted-inline-message,
.ts-restricted-inline-help {
    margin-right: 0;
    margin-left: 0;
}

/* The admin restriction card uses the same shared restricted-state partial.
   Keep its only state child available across the complete card body. */
.ts-admin-restricted-card .card-body > .ts-restricted-inline {
    width: 100%;
    max-width: none;
}

@media (max-width: 575.98px) {
    .ts-restricted-inline h4,
    .ts-restricted-inline-message,
    .ts-restricted-inline-help {
        max-width: none;
    }
}