/* Bootstrap 5 compatibility for inherited templates; upgrade removes the old
 * bundled Bootstrap runtime while retaining familiar spacing and basic panels. */
.form-group { margin-bottom: 1rem; }
.help-block, .invalid-feedback { color: #dc3545; }
.form-control { font-size: inherit; }
.btn-default { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.navbar-inverse { background: #222; }
.navbar-inverse .nav-link, .navbar-inverse .navbar-brand { color: #eee; }
.navbar-inverse .navbar-toggler { background-color: #eee; }
.navbar-right { margin-left: auto; }
.navbar-fixed-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; }
.navbar .logout { padding: .5rem; }
.control-label { font-weight: 600; }
.panel, .well { border: 1px solid #ddd; padding: 1rem; border-radius: .25rem; }
.panel-heading { font-weight: 600; margin-bottom: .5rem; }
.pull-right { float: right; }
.pull-left { float: left; }
.img-responsive { max-width: 100%; height: auto; }
.col-xs-12 { width: 100%; }
.col-lg-offset-1 { margin-left: 0; }
@media (min-width: 992px) {
    .col-lg-offset-1 { margin-left: 8.333333%; }
}
#slider-images { height: 220px; overflow: hidden; padding: 0; list-style: none; }
#slider-images > li:not(:first-child) { display: none; }

/* One responsive shell for the Bootstrap 5 widgets and inherited theme. */
:root { --ucp-sidebar: 250px; --ucp-header: 56px; --ucp-accent: #bb153b; }
html { font-size: 14px; }
body { font-size: 1rem; line-height: 1.5; overflow: auto; color: #292c33; }
a { color: var(--ucp-accent); }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid #e83e8c; outline-offset: 3px; }
.ucp-navbar {
    min-height: var(--ucp-header); height: auto; margin: 0;
    padding: 0; background: #17191f; border: 0;
}
.ucp-navbar > .container-fluid { min-height: var(--ucp-header); padding: 0 24px; }
.ucp-navbar a, .ucp-navbar form, .ucp-navbar button { margin-bottom: 0; }
.ucp-navbar .navbar-nav { align-items: center; gap: 4px; }
.ucp-navbar .navbar-nav .nav-link,
.ucp-navbar .navbar-nav > li > a,
.ucp-navbar .nav li > form > button.logout {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px; color: #e7e8ec; font-size: 1rem; line-height: 1.5;
    text-decoration: none; white-space: nowrap;
}
.ucp-navbar .navbar-nav .nav-link:hover,
.ucp-navbar .navbar-nav .nav-link.active,
.ucp-navbar .nav li > form > button.logout:hover { color: #f36aa5; }
.ucp-navbar .navbar-toggler { border-color: #646771; background: transparent; color: #fff; }
.header-logo {
    font-family: Tahoma, sans-serif; font-size: 16px !important;
    font-weight: 700; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
.header-logo .brand-accent { color: #f36aa5; }
.navbar-brand { margin-bottom: 0; }
.ucp-authenticated #wrapper { display: block !important; min-height: 100vh; }
#sidebar-wrapper {
    top: 0; left: 0; bottom: 0; z-index: 1040; width: var(--ucp-sidebar);
    min-height: 0; height: 100dvh; margin: 0; background: #17191f !important;
    display: flex; flex-direction: column; transition: transform .2s ease;
}
#sidebar-wrapper .sidebar-heading {
    position: static; min-width: 0; width: 100%; height: var(--ucp-header);
    flex: 0 0 var(--ucp-header); display: flex; align-items: center;
    padding: 0 16px; line-height: 1.3; border: 0;
}
#sidebar-wrapper .list-group {
    min-width: 0; min-height: 0; width: 100%; height: auto; flex: 1;
    margin: 0; overflow-y: auto; overflow-x: hidden; direction: ltr;
    padding-bottom: 16px; border-radius: 0;
}
#sidebar-wrapper .list-group-item {
    display: flex; align-items: center; min-height: 44px; gap: 10px;
    margin: 0; padding: 11px 16px; border: 0; border-left: 3px solid transparent;
    color: #e7e8ec; font-size: 1rem; text-decoration: none; text-shadow: none;
    transition: background-color .15s, color .15s;
}
#sidebar-wrapper .list-group-item:hover,
#sidebar-wrapper .list-group-item.active {
    background: #302936; color: #fff; font-weight: 500;
    border-right: 0 !important; border-left-color: #e83e8c;
}
#sidebar-wrapper .list-group-item.active { background: #44364b; }
#sidebar-wrapper .list-group-item ico {
    display: inline-flex; justify-content: center; flex: 0 0 24px;
    width: 24px; padding: 0; font-size: 1.15rem;
}
#sidebar-wrapper .list-group-item-header {
    margin: 0; padding: 12px 19px 8px; font-size: .85rem;
    color: #a9acb6; text-shadow: none; border: 0 !important;
}
.ucp-authenticated .ucp-navbar { left: var(--ucp-sidebar); right: 0; }
#page-content-wrapper {
    position: static; width: auto; min-width: 0; height: auto;
    margin: 0 0 0 var(--ucp-sidebar); padding-top: var(--ucp-header); overflow: visible;
}
.wrap { display: flex; flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
#page-content-wrapper > .wrap { min-height: calc(100vh - var(--ucp-header)); }
.wrap > .container {
    width: 100%; max-width: none; min-width: 0; min-height: 0;
    padding: 28px 32px 40px; flex: 1;
}
.breadcrumb {
    display: flex; flex-wrap: wrap; gap: 0; list-style: none;
    padding: 0; margin: 0 0 20px; color: #6c707a; font-size: .95rem;
}
.breadcrumb > li { display: inline-flex; align-items: center; }
.breadcrumb > li + li::before { content: "/"; padding: 0 10px; color: #9b9ea5; }
.breadcrumb a { margin: 0; font-size: inherit; text-decoration: none; }
.custom-heading { margin: 0 0 20px; font-size: 1.8rem; line-height: 1.4; }
.grid-view { max-width: 100%; overflow-x: auto; }
/* Community footer: shared public and authenticated layouts. */
.footer {
    position: static; flex-shrink: 0; width: auto; height: auto; min-height: 188px;
    padding: 28px 32px; border-top: 1px solid #34303a;
    background: #17191f; color: #b1b5c1; font-size: .95rem;
    line-height: 1.6; text-align: left;
}
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1.08fr; gap: 32px; max-width: 1200px; margin: 0 auto; }
.footer-section { min-width: 0; }
.footer-heading { margin: 0 0 13px; color: #9fa4b2; font-size: .75rem; font-weight: 700; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.footer .footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer a { position: static; margin: 0; color: #f36aa5; font-size: inherit; text-decoration: none; }
.footer a:hover { color: #fff; font-size: inherit; }
.footer-nav a { display: inline-flex; align-items: center; gap: 10px; line-height: 1.6; }
.footer-nav i { width: 17px; flex: 0 0 17px; text-align: center; font-size: .95em; }
.footer-server { display: flex; align-items: flex-start; gap: 10px; margin: 15px 0 0; }
.footer-server > i { width: 17px; flex: 0 0 17px; margin-top: 5px; color: #777d8d; text-align: center; }
.footer-server-label { display: block; color: #969cab; font-size: .8rem; }
.footer-server-address { display: block; margin-top: 2px; color: #e2e5ed; font-family: Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; }
.footer .footer-brand-link { display: inline-flex; align-items: center; gap: 12px; color: #f2f3f7; font-size: 1rem; font-weight: 700; letter-spacing: .035em; }
.footer-brand-link img { display: block; width: 40px; height: 40px; object-fit: contain; }
.footer-brand-subtitle { display: block; margin-top: 3px; color: #a0a6b5; font-size: .82rem; font-weight: 400; letter-spacing: 0; }
.footer-copyright { margin: 15px 0 2px; color: #bcc1cd; font-size: .85rem; }
.footer-creator { margin: 0; color: #969cab; font-size: .82rem; }
.footer-creator strong { color: #f36aa5; font-weight: 500; }
@media (max-width: 767.98px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-brand { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid #30333d; }
}
@media (max-width: 575.98px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .footer-brand { grid-column: auto; order: -1; padding-top: 0; border-top: 0; }
}
.ucp-mobile-brand, .ucp-sidebar-toggle { display: none; }
.ucp-sidebar-backdrop[hidden] { display: none; }
.ucp-public > .wrap { padding-top: var(--ucp-header); margin-top: 0 !important; }
.ucp-public .wrap > .container { max-width: 1200px; margin: 0 auto; }
.ucp-public .slider { flex: none; }
.ucp-public #slider-images { height: 300px !important; margin: 0; }
.ucp-public #slider-images img { display: block; width: 100%; height: 300px; object-fit: cover; }
.site-livefeed .livefeed-toolbar [role="status"] { color: #666b75; }
.body-content > .row { row-gap: 24px; }

@media (max-width: 991.98px) {
    #sidebar-wrapper { transform: translateX(-100%); top: var(--ucp-header); height: calc(100dvh - var(--ucp-header)); }
    #sidebar-wrapper .sidebar-heading { display: none; }
    .sidebar-open #sidebar-wrapper { transform: translateX(0); }
    .sidebar-open { overflow: hidden; }
    .ucp-authenticated .ucp-navbar { left: 0; }
    #page-content-wrapper { margin-left: 0; }
    .ucp-navbar > .container-fluid { padding: 8px 16px; gap: 10px; }
    .ucp-navbar .navbar-nav { align-items: stretch; padding: 8px 0; }
    .ucp-navbar .navbar-nav .nav-link,
    .ucp-navbar .nav li > form > button.logout { padding: 9px 0; }
    .ucp-navbar .navbar-collapse { flex-basis: 100%; }
    .ucp-mobile-brand { display: block; margin-right: auto; }
    .ucp-sidebar-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border: 1px solid #646771; border-radius: 4px;
        color: #fff; background: transparent; font-size: 18px;
    }
    .ucp-sidebar-backdrop {
        position: fixed; inset: var(--ucp-header) 0 0; z-index: 1035;
        background: rgb(0 0 0 / 45%); border: 0; width: 100%;
    }
    .wrap > .container { padding: 24px; }
    .footer { padding: 24px; }
}
@media (max-width: 575.98px) {
    .wrap > .container { padding: 20px 16px 28px; }
    .footer { padding: 24px 16px; }
    .ucp-navbar > .container-fluid { gap: 8px; padding-left: 12px; padding-right: 12px; }
    .ucp-navbar .header-logo { font-size: 14px !important; }
    .ucp-navbar .navbar-toggler { padding: 5px 8px; }
    .ucp-public #slider-images { height: 180px !important; }
    .ucp-public #slider-images img { height: 180px; }
    .custom-heading { font-size: 1.5rem; padding: 10px 12px; }
    .livefeed-toolbar { align-items: flex-start; gap: 12px; }
    .livefeed-toolbar .btn { min-width: 0; }
    .livefeed-toolbar label { flex-basis: 100%; }
    .body-content > div.row > div.col-lg-4, .front-page-block { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #sidebar-wrapper { transition: none; }
}

/* Dark presentation: use the same palette for legacy views and Bootstrap widgets. */
:root {
    color-scheme: dark;
    --ucp-background: #22262e;
    --ucp-surface: #20242c;
    --ucp-raised: #282e38;
    --ucp-border: #3b4350;
    --ucp-text: #cbd1db;
    --ucp-muted: #a5afbe;
    --ucp-accent: #ef8ab5;
    --bs-body-bg: var(--ucp-background);
    --bs-body-bg-rgb: 34, 38, 46;
    --bs-body-color: var(--ucp-text);
    --bs-body-color-rgb: 203, 209, 219;
    --bs-heading-color: #e0e5ed;
    --bs-emphasis-color: #e0e5ed;
    --bs-emphasis-color-rgb: 224, 229, 237;
    --bs-secondary-color: var(--ucp-muted);
    --bs-secondary-color-rgb: 165, 175, 190;
    --bs-secondary-bg: var(--ucp-raised);
    --bs-tertiary-color: #939eae;
    --bs-tertiary-bg: var(--ucp-surface);
    --bs-border-color: var(--ucp-border);
    --bs-border-color-translucent: rgb(165 175 190 / 20%);
    --bs-link-color: var(--ucp-accent);
    --bs-link-color-rgb: 239, 138, 181;
    --bs-link-hover-color: #f5b2cf;
    --bs-link-hover-color-rgb: 245, 178, 207;
    --bs-secondary-bg-rgb: 40, 46, 56;
    --bs-tertiary-bg-rgb: 32, 36, 44;
}
html, body { background-color: var(--ucp-background); }
body { color: var(--ucp-text); }
#page-content-wrapper, .wrap, .wrap > .container { background-color: var(--ucp-background); }
h1, h2, h3, h4, h5, h6 { color: var(--bs-heading-color); }
a { color: var(--ucp-accent); }
a:hover { color: #f5b2cf; }
.breadcrumb, .site-livefeed .livefeed-toolbar [role="status"],
.text-muted, .hint-block, .form-text { color: var(--ucp-muted) !important; }
.breadcrumb > li + li::before { color: #7e8a9b; }
.site-index h3 span[style] { color: var(--ucp-muted) !important; }
.custom-heading, .site-link-steam h1 {
    background: linear-gradient(90deg, #282530, #23252d, transparent);
    color: #e0e5ed; text-shadow: none;
}
.form-control, .form-select, .input-group-text,
input.recover, #group-invite-users, #new-comment {
    background-color: #15191f; color: var(--ucp-text); border-color: var(--ucp-border);
}
.form-control::placeholder, textarea::placeholder, input::placeholder { color: #8e9aac; opacity: 1; }
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath fill='none' stroke='%23a5afbe' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 3 6 6 6-6'/%3E%3C/svg%3E");
}
.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--ucp-text); caret-color: var(--ucp-text);
    box-shadow: 0 0 0 1000px #15191f inset;
}
.form-control:focus, .form-select:focus, input.recover:focus {
    background-color: #181c23; color: #e0e5ed; border-color: #c96494;
    box-shadow: 0 0 0 .2rem rgb(201 100 148 / 15%);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: #282d35; color: var(--ucp-muted); opacity: 1;
}
.form-check-input { background-color: #15191f; border-color: #687487; }
.form-check-input:checked { background-color: #ae3e72; border-color: #c96494; }
.help-block, .invalid-feedback { color: #f0a6b5; }
.panel, .well, .card, .modal-content, .dropdown-menu, .popover,
.comment, .search_autocomplete, .rptest-view > h3, .custom-heading2 {
    background-color: var(--ucp-surface); color: var(--ucp-text); border-color: var(--ucp-border);
}
.search_autocomplete { box-shadow: 0 6px 18px rgb(0 0 0 / 25%); }
.dropdown-item { color: var(--ucp-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--ucp-raised); color: #e0e5ed; }
.dropdown-item.active, .dropdown-item:active { background-color: #70304f; color: #f1e5eb; }
.nav-tabs { border-color: var(--ucp-border); }
.nav-tabs .nav-link.active { background-color: var(--ucp-surface); color: #e0e5ed; border-color: var(--ucp-border); }
.table {
    --bs-table-color: var(--ucp-text); --bs-table-bg: var(--ucp-surface);
    --bs-table-border-color: var(--ucp-border);
    --bs-table-striped-bg: #262c35; --bs-table-striped-color: var(--ucp-text);
    --bs-table-hover-bg: #30313d; --bs-table-hover-color: #e0e5ed;
    --bs-table-active-bg: #34303e; --bs-table-active-color: #e0e5ed;
    color: var(--ucp-text); border-color: var(--ucp-border);
}
.table thead { --bs-table-bg: #2a303b; }
.statistics-row td, .statistics-row td.header, .statistics-row td.subheader {
    background: var(--ucp-surface); color: var(--ucp-text); border-color: var(--ucp-border);
}
.statistics-row td.header, .statistics-row td.subheader { background: var(--ucp-raised); }
.pagination > li > a, .pagination > li > span, .page-link {
    color: var(--ucp-accent); background-color: var(--ucp-surface); border-color: var(--ucp-border);
}
.pagination > li > a:hover, .page-link:hover { background-color: var(--ucp-raised); color: #f5b2cf; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background-color: #84345b; color: #f1e5eb; border-color: #a84574;
}
.alert-success { background: #20352d; color: #b2d9c3; border-color: #3b6351; }
.alert-danger, .error-summary { background: #3b262e; color: #edb4c2; border-color: #724451; }
.alert-warning { background: #3b3325; color: #e2cca3; border-color: #6d5c3c; }
.alert-info, .alert-primary { background: #243442; color: #b4cfe5; border-color: #425f78; }
.btn-primary, .btn-success, .btn-default,
.btn-primary:focus, .btn-success:focus, .btn-default:focus {
    background-color: #bb153b; background-image: linear-gradient(to right, #e83e8c, #ab2e67);
    color: #fff; border-color: #bb153b; box-shadow: 0 2px 19px 1px rgb(232 62 140 / 30%);
}
.btn-primary:hover, .btn-success:hover, .btn-default:hover {
    background-image: linear-gradient(to right, #e83e8c, #e83e8c); color: #fff; border-color: #e83e8c;
}
.btn-decline:hover { background-color: #414956; border-color: #596576; color: #e0e5ed; }
.site-livefeed .livefeed-panel h2 { background-color: var(--ucp-raised); color: #d5dce7; }
.data-value, #comment-section h5, .search_autocomplete_item { color: var(--ucp-accent); }
.bg-light, .bg-white { background-color: var(--ucp-surface) !important; }
.text-dark, .text-body { color: var(--ucp-text) !important; }
.btn-close { filter: invert(1) grayscale(100%) brightness(150%); }
.ucp-public .slider img { filter: brightness(.65) saturate(.8); }
::selection { background: #703c59; color: #f2e9ee; }

/* Shared TCN site logo: original square artwork, consistent header size. */
.header-logo .tcn-site-logo{display:inline-block;width:32px;height:32px;vertical-align:middle;margin-right:6px;border-radius:3px}