/* MyStudio Default: header, search overlay, page shell and sidebar. */

/* One corner radius for every theme button: MyBB's inherited Master Style css3.css loads after
   global.css and gives input buttons 6px, while link buttons (a.button) keep the theme's .5rem */
input.button { border-radius: .5rem; }

/* ── Centered Header ── */
.ms-header {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    /* Always above the page: the header's menus (user, search, alerts) open over the content. Without its own
       level, a header that gets a filter/backdrop-filter (child themes) becomes a stacking context at level 0 and
       glass panels below it paint over its dropdowns. */
    position: relative;
    z-index: 1020;
}
.ms-header-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    min-height: 40px;
}
.ms-header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
}
.ms-header-logo:hover {
    color: var(--tekbb-accent-text, #0d6efd);
    text-decoration: none;
}
.ms-header-logo img {
    max-height: 40px;
    width: auto;
}

/* ── Header Search ── */
.ms-header-search-btn {
    background: none;
    border: 1px solid var(--bs-border-color, rgba(255,255,255,0.08));
    color: var(--bs-secondary-color, #adb5bd);
    font-size: 0.85rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    flex-shrink: 0;
}
.ms-header-search-btn:hover {
    background: var(--tekbb-accent, #2dd4bf);
    border-color: var(--tekbb-accent, #2dd4bf);
    color: var(--tekbb-text-inv, #fff);
    box-shadow: 0 0 12px rgba(45,212,191,0.35);
}

/* ─ Search overlay (full header takeover) ─ */
.ms-header-search {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    gap: 0.75rem;
    z-index: 50;
    padding: 0 1rem;
    background: var(--glass-bg, rgba(15,23,42,0.92));
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: inherit;
    animation: msSearchFadeIn 0.2s ease;
}
@keyframes msSearchFadeIn {
    from { opacity: 0; transform: scaleX(0.92); }
    to   { opacity: 1; transform: scaleX(1); }
}
.ms-header.search-open .ms-header-search { display: flex; }
.ms-header.search-open:not(.search-inline) .ms-header-logo,
.ms-header.search-open:not(.search-inline) .ms-sidebar-toggle,
.ms-header.search-open .ms-header-search-btn { display: none !important; }

.ms-header-search-icon {
    color: var(--tekbb-accent-text, #2dd4bf);
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.8;
}
.ms-header-search-form {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.ms-header-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--bs-body-color, #e2e8f0);
    font-size: 1.05rem;
    font-weight: 500;
    padding: 0.4rem 0;
    letter-spacing: 0.01em;
    min-width: 0;
}
.ms-header-search-input::placeholder {
    color: var(--bs-secondary-color, #64748b);
    font-weight: 400;
    opacity: 0.7;
}
.ms-header-search-close {
    background: none;
    border: none;
    color: var(--bs-secondary-color, #94a3b8);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.3rem;
    flex-shrink: 0;
    transition: color 0.2s;
}
.ms-header-search-close:hover { color: #fff; }

.ms-page-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Sidebar blocks stack top to bottom at every width (Bootstrap's offcanvas-lg body is a
   flex row from 992px up) */
.ms-page-sidebar .offcanvas-body { flex-direction: column; gap: 0.5rem; }

.ms-page-sidebar {
    position: sticky;
    top: 0px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding-right: 0;
    border-right: none;
    overflow-y: auto;
    min-height: calc(100vh - 147px);
}
.ms-page-sidebar::after {
    content: '';
    position: absolute;
    top: 5%;
    right: 0;
    bottom: 5%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--glass-border, rgba(255,255,255,.08)) 20%, var(--glass-border, rgba(255,255,255,.08)) 80%, transparent);
    pointer-events: none;
}

.ms-page-content {
    min-width: 0;
}

/* Hide usercpnav/modcpnav sidebar column inside our shell — our sidebar replaces it */
.ms-page-content .sidebar-offcanvas { display: none; }
.ms-page-content .row-offcanvas [data-toggle="offcanvas"] { display: none; }
/* Phones: the page container has 10px side padding; Bootstrap rows pull out 12px, so match the gutter to it (no 2px sideways scroll) */
@media (max-width: 767.98px) { .ms-page-content .row-offcanvas { --bs-gutter-x: 20px; } }
.ms-page-content .row-offcanvas .col-md-9 { width: 100%; flex: 0 0 100%; max-width: 100%; }
/* No MyStudio sidebar (MyStudio Options: sidebar off, or no Menu block): User CP, Mod CP and PM pages get their own
   navigation column back, laid out like MyBB's default theme (col-md-3 nav + col-md-9 content,
   slide-out toggle on phones) */
.ms-sb-off .sidebar-offcanvas,
.ms-sb-nomenu .sidebar-offcanvas { display: block; }
.ms-sb-off .row-offcanvas [data-toggle="offcanvas"],
.ms-sb-nomenu .row-offcanvas [data-toggle="offcanvas"] { display: inline-block; }
.ms-sb-off .row-offcanvas,
.ms-sb-nomenu .row-offcanvas { left: 0 !important; }
@media (min-width: 768px) {
    .ms-sb-off .row-offcanvas .col-md-9,
.ms-sb-nomenu .row-offcanvas .col-md-9 { width: 75%; flex: 0 0 75%; max-width: 75%; }
}
/* Sections stack in one column (the theme's flex rules for these menus lay them side by side) */
.ms-sb-off .usercp_nav .smalltext,
.ms-sb-nomenu .usercp_nav .smalltext,
.ms-sb-off .usercp_nav .trow1,
.ms-sb-nomenu .usercp_nav .trow1,
.ms-sb-off .modcp_nav .trow1,
.ms-sb-nomenu .modcp_nav .trow1 { display: block; }
/* The "User CP Home" / "Mod CP Home" row is a div.trow1, not a list item: same inset as the list rows below it */
.ms-sb-off .usercp_nav .trow1.smalltext,
.ms-sb-nomenu .usercp_nav .trow1.smalltext,
.ms-sb-off .modcp_nav .trow1.smalltext,
.ms-sb-nomenu .modcp_nav .trow1.smalltext { padding: 0 0.25rem; }
.ms-sb-off .usercp_nav .tcat,
.ms-sb-nomenu .usercp_nav .tcat,
.ms-sb-off .modcp_nav .tcat,
.ms-sb-nomenu .modcp_nav .tcat {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.75rem 0.25rem; margin-top: 0.25rem;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6c757d); background: transparent; border: 0;
}
.ms-sb-off .usercp_nav ul.list_style,
.ms-sb-nomenu .usercp_nav ul.list_style,
.ms-sb-off .modcp_nav ul.list_style,
.ms-sb-nomenu .modcp_nav ul.list_style { list-style: none; margin: 0; padding: 0; }
.ms-sb-off .usercp_nav .cp_menu,
.ms-sb-nomenu .usercp_nav .cp_menu,
.ms-sb-off .modcp_nav .cp_menu,
.ms-sb-nomenu .modcp_nav .cp_menu { padding: 0 0.25rem; background: transparent; }
.ms-sb-off .usercp_nav .usercp_nav_item,
.ms-sb-nomenu .usercp_nav .usercp_nav_item,
.ms-sb-off .modcp_nav .modcp_nav_item,
.ms-sb-nomenu .modcp_nav .modcp_nav_item { display: flex; align-items: center; }
/* Phones: the column opens above the content with the page's menu button */
@media (max-width: 767.98px) {
    .ms-sb-off .sidebar-offcanvas,
.ms-sb-nomenu .sidebar-offcanvas {
        display: none; position: static; width: 100%; left: auto;
        box-shadow: none; padding-right: 0 !important; margin-bottom: 0.75rem;
    }
    .ms-sb-off .row-offcanvas.active .sidebar-offcanvas,
.ms-sb-nomenu .row-offcanvas.active .sidebar-offcanvas { display: block; }
}
.ms-sidebar-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.ms-sidebar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-body-color, #212529);
    line-height: 1.2;
    padding: 0.35rem 0.75rem 0.15rem;
}

.ms-sidebar-profile {
    padding: 0.75rem;
    background: rgba(0,0,0,0.02);
    border-radius: 12px;
}

.ms-sidebar-profile-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ms-sidebar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ms-sidebar-profile-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ms-sidebar-name {
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.2;
}

.ms-sidebar-handle {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-sidebar-groupimage {
    max-height: 18px;
    width: auto;
    margin-top: 2px;
}

.ms-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ms-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: var(--tekbb-link);
    text-decoration: none;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.ms-sidebar-link:hover {
    background: rgba(0,0,0,0.05);
    color: var(--bs-body-color, #212529);
    text-decoration: none;
}

.ms-sidebar-link.active {
    background: var(--tekbb-accent-subtle, rgba(13,110,253,0.08));
    color: var(--tekbb-accent-text, #0d6efd);
    font-weight: 700;
}

.ms-sidebar-link-primary,
.ms-sidebar-link-primary:link,
.ms-sidebar-link-primary:visited {
    background: var(--tekbb-heading-bg, #0d6efd);
    color: #fff;
}

.ms-sidebar-link-primary:hover {
    background: color-mix(in srgb, var(--tekbb-heading-bg, #0d6efd) 90%, #000);
    color: #fff;
}

.ms-sidebar-link-accent {
    background: var(--tekbb-accent-subtle, rgba(13,110,253,0.08));
}

.ms-sidebar-link i {
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
}

/* ── Sidebar submenus (details/summary) ── */
.ms-sidebar-details {
    border: 0;
}
.ms-sidebar-details > summary {
    list-style: none;
    cursor: pointer;
}
.ms-sidebar-details > summary::-webkit-details-marker { display: none; }
.ms-sidebar-details > summary::marker { display: none; content: ''; }

.ms-sidebar-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    opacity: 0.5;
}
.ms-sidebar-details[open] > summary .ms-sidebar-chevron {
    transform: rotate(180deg);
}

.ms-sidebar-sub {
    display: flex;
    flex-direction: column;
    padding: 0.15rem 0 0.25rem 2.15rem;
}

.ms-sidebar-sublink {
    display: block;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.84rem;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.ms-sidebar-sublink:hover {
    background: rgba(0,0,0,0.04);
    color: var(--bs-body-color, #212529);
    text-decoration: none;
}
.ms-sidebar-sublink.active {
    color: var(--tekbb-heading-bg, #0d6efd);
    font-weight: 600;
    background: color-mix(in srgb, var(--tekbb-accent, #0d6efd) 7%, transparent);
}

.usercp_nav .tborder,
.modcp_nav .tborder {
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    background: transparent;
}

.usercp_nav .thead,
.modcp_nav .thead {
    padding: 0.5rem 0.75rem 0.25rem;
    background: transparent;
    border-bottom: 0;
    font-weight: 800;
}

.usercp_nav .trow1,
.modcp_nav .trow1,
.usercp_nav .smalltext,
.modcp_nav .trow1 a,
.modcp_nav .usercp_nav_item,
.usercp_nav .usercp_nav_item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.usercp_nav .trow1,
.modcp_nav .trow1 {
    padding: 0.6rem 0.75rem;
}

.usercp_nav a,
.modcp_nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    margin: 0.15rem 0;
    border-radius: 999px;
    color: var(--tekbb-accent-text, #2dd4bf);
    text-decoration: none;
    background: transparent;
    border: 0;
}

.usercp_nav a:hover,
.modcp_nav a:hover {
    background: rgba(0,0,0,0.05);
    color: var(--tekbb-accent-hover, #5eead4);
    text-decoration: none;
}

@media (max-width: 991.98px) {
.ms-page-shell {
        grid-template-columns: 1fr;
    }

.ms-page-sidebar {
        position: fixed;
        height: 100%;
        border-right: 0;
    }

.ms-page-sidebar .offcanvas-body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}

.ms-sidebar-toggle {
    flex-shrink: 0;
    border: 0;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    line-height: 1;
}

/* Breadcrumb strip at the top of the content; it scrolls with the page */
.pex-main-header {
    padding: 0.85rem 0;
}
.pex-main-header .navigation {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--bs-secondary-color, #6c757d);
}
.pex-main-header .navigation h4 {
    display: inline;
    font-size: inherit;
    font-weight: 600;
    margin: 0;
}
.pex-main-header .navigation a {
    color: inherit;
    text-decoration: none;
}
.pex-main-header .navigation a:hover {
    text-decoration: underline;
}
.pex-main-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
}

/* ══════════════════════════════════════════════════════════════════════
   MyStudio Options: layout variants (body classes set by the ms-options module).
   Defaults — ms-logo-left, ms-links-none, ms-search-button, ms-user-sidebar, ms-ct-fixed, ms-sb-left,
   ms-ft-minimal — look exactly like the original layout.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Header regions ──
   Every option is independent, so the bar is laid out by flex order in three groups:
     start  toggle · user (left) · logo (left) · links (left)
     middle centred logo / centred links, between two flexible spacers
     end    ad · links (right) · search · user (right)
   and an own row below (links "below", or centred links under a centred logo).
   Nothing is absolutely positioned, so no combination can overlap. */
.ms-header-inner { flex-wrap: wrap; }
.ms-sidebar-toggle   { order: 0; }
.ms-header-user      { order: 10; display: none; align-items: center; }
.ms-header-logo      { order: 2; }
.ms-header-nav       { order: 3; display: none; align-items: center; gap: 0.15rem; }
.ms-header-spacer    { order: 4; flex: 1 1 0; min-width: 0; }
.ms-header-spacer-end { order: 6; }
/* The ad and the search box start at their minimum and grow into free space (a large
   grow factor wins over the spacers), so they shrink instead of pushing the bar onto a
   second line: a wrapping flex row decides line breaks from starting sizes. */
.ms-header-ad        { order: 7; display: flex; align-items: center; justify-content: flex-end; flex: 100 1 0; max-width: 728px; min-width: 0; overflow: hidden; }
.ms-header-ad:empty  { display: none !important; }
/* Definite widths down the chain (slot > ad wrapper > link > image), so the image's
   max-width never resolves against its own size; its width/height attributes keep the
   space before it loads (no layout jump) */
.ms-header-ad > *    { flex: 1 1 auto; min-width: 0; width: 100%; display: flex; justify-content: flex-end; }
.ms-header-ad a      { display: block; max-width: 100%; }
.ms-header-ad img    { display: block; max-width: 100%; height: auto; max-height: 90px; object-fit: contain; }
.ms-logo-center .ms-header-ad > * { justify-content: center; }
.ms-header-search-btn { order: 9; margin-left: 0; }
.ms-header-search    { order: 9; }
/* Phones: menu button, logo, search, alerts and account fit on one row (the gaps around the spacers count too) */
@media (max-width: 575.98px) {
    .ms-header-inner { column-gap: 0.35rem; }
    .ms-header-user .ms-dd-caret { display: none; }
}

.ms-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    color: var(--bs-secondary-color, #adb5bd);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.ms-header-link:hover,
.ms-header-link.active {
    color: var(--tekbb-accent-text, #2dd4bf);
    background: var(--tekbb-accent-subtle, rgba(45,212,191,.1));
    text-decoration: none;
}

/* Logo */
.ms-logo-center .ms-header-logo { order: 5; }

/* Menu links in the bar (desktop; phones use the ☰ menu) */
@media (min-width: 992px) {
    .ms-links-left .ms-header-nav,
    .ms-links-center .ms-header-nav,
    .ms-links-right .ms-header-nav { display: flex; }
}
.ms-links-left .ms-header-nav   { margin-left: 0.5rem; }
/* Narrow desktops: links in the bar show their icons; the label stays for screen readers */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ms-links-left .ms-header-nav .ms-header-link span,
    .ms-links-center:not(.ms-logo-center) .ms-header-nav .ms-header-link span,
    .ms-links-right .ms-header-nav .ms-header-link span {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .ms-links-left .ms-header-link,
    .ms-links-center:not(.ms-logo-center) .ms-header-link,
    .ms-links-right .ms-header-link { padding: 0.45rem 0.6rem; }
}
.ms-links-center .ms-header-nav { order: 5; }
.ms-links-right .ms-header-nav  { order: 8; }

/* Links on their own row (also centred links under a centred logo), at every width */
.ms-links-below .ms-header-nav,
.ms-logo-center.ms-links-center .ms-header-nav {
    display: flex;
    order: 20;
    flex: 0 0 100%;
    margin-left: 0;
    padding-top: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.ms-links-below .ms-header-nav::-webkit-scrollbar { display: none; }
.ms-logo-center .ms-header-nav { justify-content: center; }
@media (max-width: 575.98px) {
    .ms-logo-center .ms-header-nav { justify-content: flex-start; }
}

/* Search: none, the button + overlay (default), or an always-visible box (button on phones) */
.ms-search-none .ms-header-search,
.ms-search-none .ms-header-search-btn { display: none !important; }
@media (min-width: 768px) {
    .ms-search-box .ms-header-search {
        display: flex;
        position: relative;
        inset: auto;
        flex: 100 1 160px;
        max-width: 260px;
        min-width: 140px;
        height: 36px;
        padding: 0 0.85rem;
        gap: 0.5rem;
        border: 1px solid var(--bs-border-color, rgba(255,255,255,0.08));
        border-radius: 999px;
        background: var(--tekbb-accent-subtle, rgba(45,212,191,.06));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: none;
    }
    .ms-search-box .ms-header-search-btn,
    .ms-search-box .ms-header-search-close { display: none !important; }
    .ms-search-box .ms-header-search-icon { font-size: 0.85rem; }
    .ms-search-box .ms-header-search-input { font-size: 0.9rem; font-weight: 400; padding: 0; }
    .ms-search-box .ms-ac { left: auto; right: 0; width: max(100%, 360px); }
}

/* Search next to the menu links (ms-search-at-links). Same order value as the links:
   the search comes after them in the markup, so it lands right after the last link. */
.ms-header-break { display: none; order: 20; flex: 0 0 100%; height: 0; margin-top: -0.5rem; }
@media (min-width: 992px) {
    .ms-search-at-links.ms-links-left .ms-header-search-btn,
    .ms-search-at-links.ms-links-left .ms-header-search { order: 3; }
    .ms-search-at-links.ms-links-center:not(.ms-logo-center) .ms-header-search-btn,
    .ms-search-at-links.ms-links-center:not(.ms-logo-center) .ms-header-search { order: 5; }
}
/* Links on their own row (below, or centred under a centred logo): the search joins that
   row. The break element starts the row; links and search share it. */
.ms-search-at-links.ms-links-below .ms-header-break,
.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-break { display: block; }
.ms-search-at-links.ms-links-below .ms-header-nav,
.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-nav {
    order: 21; flex: 0 1 auto; min-width: 0;
    /* A wrapping row breaks lines on the links' full width: cap it so the search fits beside them */
    max-width: calc(100% - 34px - 0.5rem);
}
@media (min-width: 768px) {
    .ms-search-box.ms-search-at-links.ms-links-below .ms-header-nav,
    .ms-search-box.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-nav { max-width: calc(100% - 160px - 0.5rem); }
}
.ms-search-at-links.ms-links-below .ms-header-search-btn,
.ms-search-at-links.ms-links-below .ms-header-search,
.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-search-btn,
.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-search { order: 21; margin-top: 0.5rem; }
.ms-search-at-links.ms-logo-center.ms-links-below .ms-header-nav,
.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-nav { margin-left: auto; }
.ms-search-at-links.ms-logo-center.ms-links-below .ms-header-search-btn,
.ms-search-at-links.ms-logo-center.ms-links-below .ms-header-search,
.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-search-btn,
.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-search { margin-right: auto; }
/* The overlay search (button at the end of the bar) covers the whole bar */
.ms-header.search-open:not(.search-inline) .ms-header-search { margin: 0; }
/* Button next to visible links: the search opens in the links' place (main.js adds
   search-inline), and the logo, user menu and ad stay where they are */
.ms-header.search-open.search-inline .ms-header-search {
    display: flex;
    position: relative;
    inset: auto;
    flex: 1 1 280px;
    min-width: 200px;
    max-width: 560px;
    height: 38px;
    padding: 0 0.85rem;
    border: 1px solid var(--bs-border-color, rgba(255,255,255,0.08));
    border-radius: 999px;
}
.ms-header.search-open.search-inline .ms-header-search-input { font-size: 0.95rem; padding: 0; }
/* On the links' own row under a centred logo, the opened field stays centred too */
.ms-logo-center.ms-search-at-links.ms-links-below .ms-header.search-inline .ms-header-search,
.ms-logo-center.ms-search-at-links.ms-links-center .ms-header.search-inline .ms-header-search { margin-left: auto; margin-right: auto; }

/* Banner ad: its own row under the bar on phones and whenever something is centred in
   the bar (logo, or links from 992px up), since it would take the space that keeps it centred */
.ms-logo-center .ms-header-ad { order: 19; flex: 0 0 100%; max-width: none; justify-content: center; padding-top: 0.5rem; }
@media (min-width: 992px) {
    .ms-links-center .ms-header-ad { order: 19; flex: 0 0 100%; max-width: none; justify-content: center; padding-top: 0.5rem; }
    .ms-links-center .ms-header-ad > * { justify-content: center; }
}
@media (max-width: 767.98px) {
    .ms-header-ad { order: 19; flex: 0 0 100%; max-width: none; justify-content: center; padding-top: 0.5rem; }
    .ms-header-ad > * { justify-content: center; }
}

/* User menu next to the menu links (ms-user-links): same order value as the links, after
   them (and after a search that is next to them too) in the markup. Where the bar shows no
   links it stays at the right end. */
.ms-user-links .ms-header-user { display: flex; margin-left: 0.25rem; }
@media (min-width: 992px) {
    .ms-user-links.ms-links-left .ms-header-user { order: 3; }
    .ms-user-links.ms-links-center:not(.ms-logo-center) .ms-header-user { order: 5; }
    .ms-user-links.ms-links-right .ms-header-user { order: 8; }
    /* After a search that sits next to right-hand links (the search keeps order 9 there) */
    .ms-user-links.ms-search-at-links.ms-links-right .ms-header-user { order: 9; }
}
.ms-user-links.ms-links-below .ms-header-break,
.ms-user-links.ms-logo-center.ms-links-center .ms-header-break { display: block; }
.ms-user-links.ms-links-below .ms-header-nav,
.ms-user-links.ms-logo-center.ms-links-center .ms-header-nav { order: 21; flex: 0 1 auto; min-width: 0; }
.ms-user-links.ms-links-below .ms-header-user,
.ms-user-links.ms-logo-center.ms-links-center .ms-header-user { order: 21; margin-top: 0.5rem; }
.ms-user-links.ms-logo-center.ms-links-below .ms-header-nav,
.ms-user-links.ms-logo-center.ms-links-center .ms-header-nav { margin-left: auto; }
.ms-user-links.ms-logo-center.ms-links-below .ms-header-user,
.ms-user-links.ms-logo-center.ms-links-center .ms-header-user { margin-right: auto; }
/* The search's right margin only centres the row when it is the last item */
.ms-user-links.ms-search-at-links.ms-logo-center .ms-header-search-btn,
.ms-user-links.ms-search-at-links.ms-logo-center .ms-header-search { margin-right: 0; }
/* Links sharing their row: cap them so the row never wraps (they scroll instead) */
.ms-user-links.ms-links-below .ms-header-nav,
.ms-user-links.ms-logo-center.ms-links-center .ms-header-nav { max-width: calc(100% - 6rem); }
.ms-user-links.ms-search-at-links.ms-links-below .ms-header-nav,
.ms-user-links.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-nav { max-width: calc(100% - 9rem); }
@media (min-width: 768px) {
    .ms-user-links.ms-search-box.ms-search-at-links.ms-links-below .ms-header-nav,
    .ms-user-links.ms-search-box.ms-search-at-links.ms-logo-center.ms-links-center .ms-header-nav { max-width: calc(100% - 160px - 7rem); }
}

/* Welcome bar (ms-user-bar): a full-width strip in the header, below the logo bar
   (order 15) or below the links' own row (order 25) */
.ms-welcome-bar {
    order: 15;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.15rem;
    padding: 0.4rem 0 0;
    border-top: 1px solid var(--bs-border-color, rgba(255,255,255,0.08));
    font-size: 0.85rem;
    min-width: 0;
}
.ms-ubar-below-links .ms-welcome-bar { order: 25; }
.ms-wb-me { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--bs-secondary-color, #adb5bd); text-decoration: none; }
.ms-wb-me:hover { text-decoration: none; }
.ms-wb-greet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-wb-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ms-wb-links { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }
.ms-wb-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.6rem; border-radius: 999px;
    color: var(--bs-secondary-color, #adb5bd); text-decoration: none; white-space: nowrap;
}
.ms-wb-link:hover { color: var(--tekbb-accent-text, #2dd4bf); background: var(--tekbb-accent-subtle, rgba(45,212,191,.1)); text-decoration: none; }
.ms-wb-badge { font-size: 0.65rem; }
/* The header's dropdown user menu isn't shown with the welcome bar (its pop-ups stay usable) */
.ms-user-bar .ms-header-user { display: none !important; }
.ms-header.search-open:not(.search-inline) .ms-welcome-bar { visibility: hidden; }
/* Narrow screens: links show their icons; labels stay for screen readers */
@media (max-width: 767.98px) {
    .ms-wb-link span:not(.badge) {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .ms-wb-link { padding: 0.35rem 0.5rem; }
}

/* User menu in the bar (left or right). "In the sidebar" with no sidebar shows it on the right */
.ms-user-left .ms-header-user  { order: 1; display: flex; margin-right: 0.25rem; }
.ms-user-right .ms-header-user,
.ms-sb-off.ms-user-sidebar .ms-header-user { display: flex; margin-left: 0.25rem; }
.ms-header.search-open .ms-header-nav,
.ms-header.search-open:not(.search-inline) .ms-header-ad,
.ms-header.search-open:not(.search-inline) .ms-header-user { display: none !important; }

/* ── Page width ── */
.ms-ct-boxed #container,
.ms-ct-boxed > .ms-header,
.ms-ct-boxed > main,
.ms-ct-boxed > #footer { max-width: 1320px; margin-left: auto; margin-right: auto; }
.ms-ct-boxed {
    background: var(--tekbb-boxed-bg, color-mix(in srgb, var(--bs-body-bg, #0f172a) 82%, #000));
}
.ms-ct-boxed > .ms-header,
.ms-ct-boxed > main {
    background: var(--bs-body-bg, #0f172a);
    border-left: 1px solid var(--glass-border, rgba(255,255,255,.08));
    border-right: 1px solid var(--glass-border, rgba(255,255,255,.08));
}
.ms-ct-boxed > main { padding-bottom: 1rem; }
.ms-ct-boxed > .ms-header { margin-top: 1rem; border-top: 1px solid var(--glass-border, rgba(255,255,255,.08)); border-radius: var(--ms-radius, .75rem) var(--ms-radius, .75rem) 0 0; }
.ms-ct-boxed > #footer { border-radius: 0 0 var(--ms-radius, .75rem) var(--ms-radius, .75rem); margin-bottom: 1rem; }

/* ── Sidebar right / off ── */
@media (min-width: 992px) {
    .ms-sb-right .ms-page-shell { grid-template-columns: minmax(0, 1fr) 280px; }
    .ms-sb-right .ms-page-sidebar { order: 2; }
    .ms-sb-right .ms-page-sidebar::after { right: auto; left: 0; }
    /* Breathing room between the menu and the separator line, on whichever side it is */
    .ms-page-sidebar { padding-right: .85rem; }
    .ms-sb-right .ms-page-sidebar { padding-right: 0; padding-left: .85rem; }
    .ms-sb-off .ms-page-shell { grid-template-columns: minmax(0, 1fr); }
}
/* No sidebar: the menu is an off-canvas panel at every width, so it must not take a grid row
   (.ms-page-sidebar is sticky in the normal layout; mobile already switches it to fixed) */
.ms-sb-off .ms-page-sidebar {
    position: fixed;
    top: 0;
    height: 100%;
    min-height: 0;
}

/* ── Footer layouts ── */
.ms-footer-columns { display: none; }
.ms-ft-columns .ms-footer-columns { display: block; border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.08)); }
.ms-ft-columns .ms-footer-bar-social { display: none; }
.ms-footer-bar-social:empty { display: none; }
.ms-footer-brand { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ms-footer-brand img { max-height: 36px; width: auto; }
.ms-footer-about { margin: 0; font-size: .875rem; opacity: .85; }
.ms-footer-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-bottom: .5rem; }
.ms-footer-col-links .ms-header-nav { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.ms-footer-col-links .ms-header-link { padding: .25rem 0; background: none !important; }
.ms-footer-credit { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.ms-ft-centered .ms-footer-bar { flex-direction: column; justify-content: center; text-align: center; }
.ms-ft-centered .ms-footer-credit { justify-content: center; }
.ms-ft-no-theme .ms-footer-theme,
.ms-ft-no-lang .ms-footer-lang,
.ms-ft-no-time #current_time { display: none; }
.ms-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.ms-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--glass-border, rgba(255,255,255,.12));
    font-size: 1rem; text-decoration: none;
}
.ms-social-link:hover { border-color: var(--tekbb-accent, #2dd4bf); text-decoration: none; }

/* "Wide": Bootstrap's container-xxl tops out at 1320px like .container, so widen it */
@media (min-width: 1400px) {
    .ms-ct-wide .container-xxl { max-width: min(1680px, calc(100vw - 3rem)); }
}

/* The copyright bar sticks to the screen bottom in the one-line footers; a tall
   columns footer must scroll normally or the bar covers the columns */
.ms-ft-columns #copyright { position: static; }

/* ── Sticky / shrinking header (ms-sticky, ms-shrink, ms-header-shrunk) ── */
.ms-sticky .ms-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--bs-body-bg, #0f172a);
}
@media (min-width: 992px) {
    .ms-sticky .ms-page-sidebar { top: var(--ms-header-h, 65px); }
    .ms-sticky .ms-page-sidebar { max-height: calc(100vh - var(--ms-header-h, 65px)); min-height: 0; }
}
.ms-header { transition: padding .35s ease; }
.ms-header-logo { transition: font-size .35s ease; }
.ms-header-logo img { transition: max-height .35s ease; }
.ms-header-shrunk .ms-header { padding: .35rem 0; }
.ms-header-shrunk .ms-header-logo { font-size: 1.15rem; }
.ms-header-shrunk .ms-header-logo img { max-height: 30px; }
@media (prefers-reduced-motion: reduce) {
    .ms-header, .ms-header-logo, .ms-header-logo img { transition: none; }
}

/* ── Corners (ms-rad-rounded is the original look) ── */
.ms-rad-sharp { --ms-pb-radius: 0; --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-pill: 0; }
.ms-rad-sharp .card, .ms-rad-sharp .modal-content, .ms-rad-sharp .dropdown-menu, .ms-rad-sharp .btn,
.ms-rad-sharp .form-control, .ms-rad-sharp .form-select, .ms-rad-sharp input.textbox, .ms-rad-sharp select,
.ms-rad-sharp .ms-sidebar-link, .ms-rad-sharp .ms-sidebar-sublink, .ms-rad-sharp .ms-header-link,
.ms-rad-sharp .ms-header-search-btn, .ms-rad-sharp .badge, .ms-rad-sharp .alert, .ms-rad-sharp .ms-latest,
.ms-rad-sharp .page-link, .ms-rad-sharp .list-group, .ms-rad-sharp .tborder, .ms-rad-sharp .pex-main-header,
.ms-rad-sharp .ms-ac, .ms-rad-sharp .ms-user-menu,
.ms-rad-sharp .ms-sidebar-card, .ms-rad-sharp .forumbit-cat, .ms-rad-sharp .card-header, .ms-rad-sharp .thead,
.ms-rad-sharp .pagination, .ms-rad-sharp .pagination > a, .ms-rad-sharp .pagination > span, .ms-rad-sharp .button,
.ms-rad-sharp input.button, .ms-rad-sharp .pex-action-btn, .ms-rad-sharp .sceditor-container, .ms-rad-sharp .sceditor-toolbar,
.ms-rad-sharp .profile-section, .ms-rad-sharp .profile-hero, .ms-rad-sharp .profile-banner, .ms-rad-sharp .profile-avatar-overlay,
.ms-rad-sharp .usercp_currentavatar, .ms-rad-sharp textarea, .ms-rad-sharp .popup_menu, .ms-rad-sharp .post_controls,
.ms-rad-sharp .postbit_buttons > a, .ms-rad-sharp .pex-like-wrap, .ms-rad-sharp .tcat, .ms-rad-sharp .trow1:last-child,
.ms-rad-sharp .trow2:last-child, .ms-rad-sharp main .d-flex.rounded-2.border, .ms-rad-sharp [class*="rounded-"]:not(.rounded-circle):not(.rounded-pill),
.ms-rad-sharp div:has(> .thead) { border-radius: 0 !important; }

.ms-rad-pill { --bs-border-radius: .75rem; --bs-border-radius-lg: 1.25rem; }
.ms-rad-pill .card, .ms-rad-pill .modal-content, .ms-rad-pill .ms-latest, .ms-rad-pill .tborder { border-radius: 1.25rem !important; }
.ms-rad-pill .btn, .ms-rad-pill .form-control, .ms-rad-pill .form-select, .ms-rad-pill input.textbox,
.ms-rad-pill .badge, .ms-rad-pill .page-link { border-radius: 999px !important; }
.ms-rad-pill textarea.form-control, .ms-rad-pill textarea { border-radius: 1rem !important; }
.ms-rad-pill .dropdown-menu, .ms-rad-pill .ms-user-menu, .ms-rad-pill .alert { border-radius: 1rem !important; }

/* ── Spacing (ms-den-comfortable is the original look) ── */
.ms-den-compact .forumbit-row { padding-top: .3rem !important; padding-bottom: .3rem !important; }
.ms-den-compact .card-body { padding: .6rem .75rem; }
.ms-den-compact .ms-sidebar-link { padding-top: .4rem; padding-bottom: .4rem; }
.ms-den-compact .ms-page-shell { gap: .75rem; }
.ms-den-compact .card.mb-3 { margin-bottom: .6rem !important; }
.ms-den-spacious .forumbit-row { padding-top: .85rem !important; padding-bottom: .85rem !important; }
.ms-den-spacious .card-body { padding: 1.4rem 1.5rem; }
.ms-den-spacious .ms-sidebar-link { padding-top: .95rem; padding-bottom: .95rem; }
.ms-den-spacious .ms-page-shell { gap: 1.75rem; }
.ms-den-spacious .card.mb-3 { margin-bottom: 1.5rem !important; }

/* ── Compact thread lists ── */
.ms-tl-compact .inline_row { padding-top: .25rem !important; padding-bottom: .25rem !important; font-size: .9rem; }
.ms-tl-compact .inline_row .ms-thread-lp-avatar img { width: 22px; height: 22px; }

/* Guests on phones: Log in / Register in the bar show their icons; the label stays for screen readers */
@media (max-width: 575.98px) {
    .ms-header-user .ms-guest-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .ms-header-user .ms-guest-actions .btn .bi { margin-right: 0 !important; }
    .ms-header-user .ms-guest-actions { gap: 0.35rem !important; }
}


/* ── Header user controls: the alert bell, the account menu (avatar + chevron) and the search button as one set of
   matching 38px controls with a soft border, the same hover and an accent ring when open. Child themes restyle them by
   overriding these selectors (MyPlayer does). Selectors start at .ms-header so they beat the Alerts module's CSS. ── */
.ms-header .ms-header-user { display: inline-flex; align-items: center; gap: .5rem; }
.ms-header .ms-header-search-btn,
.ms-header .ms-alerts .ms-alerts-bell,
.ms-header .ms-user-dropdown > [data-bs-toggle="dropdown"] {
    height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--glass-border, var(--bs-border-color)); background: var(--glass-bg, transparent); color: inherit;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ms-header .ms-header-search-btn, .ms-header .ms-alerts .ms-alerts-bell { width: 38px; padding: 0; border-radius: 50%; font-size: 1rem; }
.ms-header .ms-user-dropdown > [data-bs-toggle="dropdown"] { gap: .35rem; padding: 2px 10px 2px 2px; border-radius: 999px; }
.ms-header .ms-user-dropdown .ms-nav-avatar { width: 32px !important; height: 32px !important; object-fit: cover; }
.ms-header .ms-user-dropdown .ms-dd-caret { font-size: .7rem; opacity: .7; transition: transform .2s ease; }
.ms-header .ms-user-dropdown > [aria-expanded="true"] .ms-dd-caret { transform: rotate(180deg); }
.ms-header .ms-header-search-btn:hover, .ms-header .ms-alerts .ms-alerts-bell:hover, .ms-header .ms-alerts .ms-alerts-bell[aria-expanded="true"],
.ms-header .ms-user-dropdown > [data-bs-toggle="dropdown"]:hover, .ms-header .ms-user-dropdown > [aria-expanded="true"] {
    border-color: var(--tekbb-accent); background: var(--tekbb-accent-subtle, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tekbb-accent) 18%, transparent);
}
.ms-header .ms-alerts .ms-alerts-badge { top: -4px; right: -4px; border: 2px solid var(--bs-body-bg, #fff); }
/* Sharp corners (MyStudio Options → Corners): squarer controls */
.ms-rad-sharp .ms-header .ms-header-search-btn, .ms-rad-sharp .ms-header .ms-alerts .ms-alerts-bell,
.ms-rad-sharp .ms-header .ms-user-dropdown > [data-bs-toggle="dropdown"] { border-radius: 4px; }