/*
  Inference for MyBB 1.8.x
  Brand: Data Sculpting
  Target: MyBB 1.8.41 (theme baseline remains 1.8.40 because 1.8.41 has no theme revision)
*/

:root {
    --ds-black: #090b0a;
    --ds-black-2: #0f1311;
    --ds-charcoal: #151b18;
    --ds-charcoal-2: #1c2521;
    --ds-charcoal-3: #26312c;
    --ds-border: #33423b;
    --ds-border-soft: #27332e;
    --ds-text: #e7eee9;
    --ds-muted: #9fb0a7;
    --ds-green-1: #31ee8f;
    --ds-green-2: #2bd37f;
    --ds-green-3: #27ba71;
    --ds-green-4: #22a161;
    --ds-green-5: #1c8752;
    --ds-green-6: #176e42;
    --ds-orange: #e5a66f;
    --ds-orange-muted: #8d6747;
    --ds-yellow: #ffd879;
    --ds-danger: #ff7575;
    --ds-radius: 12px;
    --ds-radius-sm: 8px;
    --ds-shadow: 0 14px 40px rgba(0,0,0,.28);
    --ds-fast: 140ms ease;
}

html {
    background: var(--ds-black);
    color-scheme: dark;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 12% -10%, rgba(49,238,143,.08), transparent 32rem),
        radial-gradient(circle at 88% 5%, rgba(39,186,113,.05), transparent 28rem),
        linear-gradient(180deg, #0b0e0d 0%, #090b0a 100%);
    color: var(--ds-text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

#container {
    min-width: 0;
    color: var(--ds-text);
    background: transparent;
    font: inherit;
}

.wrapper {
    width: min(94%, 1420px);
    min-width: 0;
    max-width: 1420px;
    margin: 0 auto;
}

#content {
    background: transparent;
    padding: 24px 10px 44px;
    overflow: visible;
}

/* Brand header */
#logo {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-bottom: 1px solid rgba(49,238,143,.22);
    background:
        linear-gradient(110deg, rgba(49,238,143,.08), transparent 35%),
        linear-gradient(180deg, #1b2420 0%, #121714 100%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.02);
}

#logo:after {
    content: "";
    position: absolute;
    inset: auto -8% -90px auto;
    width: 420px;
    height: 190px;
    transform: rotate(-11deg);
    background: linear-gradient(90deg, transparent, rgba(49,238,143,.045), transparent);
    pointer-events: none;
}

.inference-brandbar {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.inference-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    min-width: 0;
}

.inference-mark {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.inference-brandcopy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inference-site {
    color: #f2f8f4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1.15;
}

.inference-board {
    color: var(--ds-green-1);
    font-size: clamp(25px, 2.5vw, 37px);
    font-weight: 760;
    letter-spacing: -.035em;
    line-height: 1;
    margin-top: 5px;
    text-shadow: 0 0 24px rgba(49,238,143,.08);
}

#logo ul.top_links {
    margin: 0 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    font-weight: 650;
    text-align: right;
}

#logo ul.top_links li {
    margin: 0 !important;
}

#header ul.menu li a,
#logo ul.top_links a {
    padding: 8px 11px !important;
    border: 1px solid rgba(229,166,111,.24);
    border-radius: 999px;
    background-image: none !important;
    background-color: rgba(229,166,111,.08);
    color: #e9c29c !important;
    line-height: 1.2;
    transition: color var(--ds-fast), background var(--ds-fast), border-color var(--ds-fast), transform var(--ds-fast);
}

#header ul.menu li a:hover,
#logo ul.top_links a:hover {
    color: var(--ds-yellow) !important;
    background: linear-gradient(180deg, rgba(229,166,111,.18), rgba(229,166,111,.10));
    border-color: rgba(255,216,121,.72);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255,216,121,.05), 0 6px 18px rgba(0,0,0,.18);
}

/* User/login panel */
#panel .upper {
    background: linear-gradient(180deg, #111714 0%, #0d110f 100%);
    border: 0;
    border-bottom: 1px solid var(--ds-border-soft);
    color: var(--ds-muted);
    padding: 9px 0;
}

#panel .lower {
    background: #141a17;
    border: 0;
    border-bottom: 1px solid var(--ds-border-soft);
    color: var(--ds-muted);
    padding: 7px 0;
}

#panel .upper a,
#panel .lower a {
    color: var(--ds-orange) !important;
    transition: color var(--ds-fast);
}

#panel .upper a:hover,
#panel .lower a:hover {
    color: var(--ds-yellow) !important;
    text-decoration: none;
}

#panel .upper a.login,
#panel .upper a.lost_password,
#panel .upper a.register,
#panel .upper a.logout,
#panel .lower ul.panel_links a {
    background-image: none !important;
    padding-left: 0;
    padding-right: 0;
}

/* Links */
a:link,
a:visited {
    color: var(--ds-orange);
    text-decoration: none;
}

a:hover,
a:active {
    color: var(--ds-yellow);
    text-decoration: none;
}

/* Breadcrumbs */
.navigation {
    color: var(--ds-muted);
    font-size: 12px;
    padding: 9px 12px;
    border: 1px solid var(--ds-border-soft);
    border-radius: var(--ds-radius-sm);
    background: rgba(21,27,24,.74);
}

.navigation .active {
    color: var(--ds-green-1);
}

/* Main forum tables */
.tborder {
    width: 100%;
    padding: 0;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-charcoal);
    box-shadow: var(--ds-shadow);
}

.thead {
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid rgba(49,238,143,.28);
    color: #effff6;
    background:
        linear-gradient(90deg, rgba(49,238,143,.14), transparent 44%),
        linear-gradient(180deg, #24342d 0%, #17231e 100%);
}

.thead a:link,
.thead a:visited {
    color: #effff6;
}

.thead a:hover,
.thead a:active {
    color: var(--ds-yellow);
    text-decoration: none;
}

.tcat {
    padding: 7px 11px;
    border: 0;
    border-bottom: 1px solid var(--ds-border-soft);
    background: linear-gradient(180deg, #121815 0%, #0e1311 100%);
    color: var(--ds-green-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.tcat a:link,
.tcat a:visited {
    color: var(--ds-green-3);
}

.tcat a:hover,
.tcat a:active {
    color: var(--ds-green-1);
}

.trow1,
.trow2 {
    color: var(--ds-text);
    border-color: transparent var(--ds-border-soft) var(--ds-border-soft) transparent;
    transition: background var(--ds-fast);
}

.trow1 {
    background: #171d1a;
}

.trow2 {
    background: #141916;
}

tr:hover > .trow1,
tr:hover > .trow2 {
    background: #1b2420;
}

.trow_sep {
    background: #202a25;
    color: var(--ds-green-2);
    border-bottom: 1px solid var(--ds-border);
}

.tfoot {
    background: #101512;
    color: var(--ds-muted);
    border-top: 1px solid var(--ds-border-soft);
}

.tfoot a:link,
.tfoot a:visited {
    color: var(--ds-orange);
}

.tfoot a:hover,
.tfoot a:active {
    color: var(--ds-yellow);
}

.smalltext,
.thread_start_datetime,
.post .post_head span.post_date,
.post .post_meta {
    color: var(--ds-muted);
}

/* Status icons: CSS-generated so the theme remains self-contained */
.forum_status {
    width: 30px;
    height: 30px;
    position: relative;
    border-radius: 9px;
    background-image: none !important;
    background-color: #1c2521;
    border: 1px solid #35453d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.forum_status:before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #4b5b53;
}

.forum_on {
    border-color: rgba(49,238,143,.55);
    background: linear-gradient(180deg, rgba(49,238,143,.14), rgba(49,238,143,.04));
}

.forum_on:before {
    background: var(--ds-green-1);
    box-shadow: 0 0 14px rgba(49,238,143,.5);
}

.forum_offclose:before {
    border-radius: 2px;
    background: var(--ds-orange-muted);
}

.forum_offlink:before {
    background: var(--ds-orange);
}

/* Inputs */
input.textbox,
textarea,
select {
    background: #0f1412;
    color: var(--ds-text);
    border: 1px solid #3a4a43;
    border-radius: 7px;
    padding: 7px 8px;
    outline: none;
    font: inherit;
    transition: border-color var(--ds-fast), box-shadow var(--ds-fast), background var(--ds-fast);
}

input.textbox:focus,
textarea:focus,
select:focus {
    border-color: var(--ds-green-3);
    background: #111814;
    box-shadow: 0 0 0 3px rgba(49,238,143,.08);
}

button,
input.button,
a.button {
    appearance: none;
    padding: 7px 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid #9f734c;
    color: #1e160e !important;
    background-image: none !important;
    background: linear-gradient(180deg, #edbd8f 0%, #d89a61 100%);
    box-shadow: 0 3px 12px rgba(0,0,0,.18);
    transition: transform var(--ds-fast), filter var(--ds-fast), background var(--ds-fast), border-color var(--ds-fast);
}

button:hover,
input.button:hover,
a.button:hover {
    border-color: #ffe18e;
    background: linear-gradient(180deg, #ffe9a7 0%, var(--ds-yellow) 100%);
    transform: translateY(-1px);
}

button:disabled,
input.button:disabled,
.button.disabled {
    cursor: not-allowed;
    color: #9f8b77 !important;
    border-color: #654d39;
    background: #584737;
    opacity: .62;
    box-shadow: none;
    transform: none;
}

/* Posts */
.post {
    overflow: hidden;
    background: var(--ds-charcoal);
}

.post .post_author {
    color: var(--ds-text);
    background: #111714;
    border-color: var(--ds-border);
}

.post.classic .post_author {
    border-color: var(--ds-border);
}

.post .post_author div.author_avatar img {
    padding: 4px;
    border-radius: 10px;
    border: 1px solid #3a4b42;
    background: #0f1412;
}

.post .post_author div.author_statistics {
    color: var(--ds-muted);
}

.post.classic .post_author div.author_statistics {
    border-top-color: var(--ds-border);
}

.post_content {
    background: #171d1a;
}

.post_body {
    color: #e5ede8;
    font-size: 14px;
    line-height: 1.62;
}

.post .post_head {
    border-bottom-color: #33423b;
}

.post_content .signature {
    border-top-color: #33423b;
    color: var(--ds-muted);
}

.post_controls {
    background: #101512;
    border-bottom: 1px solid var(--ds-border);
}

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
    padding: 5px 8px;
    border-radius: 7px;
    background-image: none;
    background: rgba(229,166,111,.08);
    border: 1px solid rgba(229,166,111,.25);
    color: var(--ds-orange);
    transition: all var(--ds-fast);
}

.postbit_buttons > a:hover {
    color: #181109;
    background: var(--ds-yellow);
    border-color: var(--ds-yellow);
}

.postbit_buttons a span {
    background-image: none !important;
    padding-left: 0;
    height: auto;
}

/* Quotes / code */
blockquote,
.codeblock {
    background: #0f1412;
    border: 1px solid #34443c;
    border-left: 3px solid var(--ds-green-4);
    border-radius: 8px;
    color: var(--ds-text);
}

blockquote cite,
.codeblock .title {
    border-bottom-color: #34443c;
    color: var(--ds-green-2);
}

.codeblock code {
    color: #d5e7dc;
}

/* Pagination */
.pagination a {
    background: #151c18;
    border: 1px solid var(--ds-border);
    border-radius: 6px;
    color: var(--ds-orange);
}

.pagination a:hover {
    background: var(--ds-yellow);
    color: #181109;
    border-color: var(--ds-yellow);
}

.pagination .pagination_current {
    color: var(--ds-green-1);
}

/* Popups / modals / editor */
.popup_menu {
    background: #101512;
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow);
}

.popup_menu .popup_item {
    background: #151c18;
    color: var(--ds-text);
}

.popup_menu .popup_item:hover {
    background: #24332b;
    color: var(--ds-yellow);
}

.editor,
.editor_control_bar {
    background: #111714;
    border-color: var(--ds-border);
}

.modal {
    color: var(--ds-text);
}

/* Notice states */
.pm_alert,
div.error {
    background: #2a2314;
    border-color: #8e7137;
    color: #ffe4a3;
}

.red_alert,
.post.unapproved_post,
.trow_shaded {
    background: #2b1717;
    border-color: #6e3333;
    color: #ffb3b3;
}

.trow_selected,
tr.trow_selected td,
.selectall {
    background: #2b2718;
    color: #fff0ae;
    border-color: #665e2c;
}

.highlight {
    background: #51451d;
    color: #fff1b5;
}

/* Footer */
#footer {
    margin-top: 22px;
    border-top: 1px solid rgba(49,238,143,.16);
}

#footer .upper {
    background: #111714;
    border: 0;
    border-bottom: 1px solid var(--ds-border-soft);
    color: var(--ds-muted);
    padding: 10px 0;
}

#footer .lower {
    background: #0b0f0d;
    color: #75877e;
    padding: 13px 0 20px;
}

#footer a:link,
#footer a:visited {
    color: var(--ds-orange);
}

#footer a:hover,
#footer a:active {
    color: var(--ds-yellow);
}

#footer .lower a:link,
#footer .lower a:visited {
    color: var(--ds-green-4);
}

/* Misc */
fieldset {
    border-color: var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

hr {
    background: var(--ds-border);
}

.bottommenu {
    background: #121815;
    border-color: var(--ds-border);
    color: var(--ds-text);
}

.online,
.reputation_positive {
    color: var(--ds-green-2);
}

.offline {
    color: #708078;
}

.reputation_neutral {
    color: var(--ds-muted);
}

.reputation_negative {
    color: var(--ds-danger);
}

/* Responsive pass over MyBB's table-oriented default layout */
@media (max-width: 900px) {
    .wrapper {
        width: calc(100% - 24px);
    }

    .inference-brandbar {
        min-height: 78px;
        gap: 10px;
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .inference-mark {
        width: 48px;
        height: 48px;
    }

    #logo ul.top_links {
        width: 100%;
        order: 2;
        justify-content: flex-start;
        padding-bottom: 3px;
    }

    #logo ul.top_links a {
        font-size: 11px;
        padding: 6px 8px !important;
    }

    #content {
        padding-left: 4px;
        padding-right: 4px;
    }

    .post.classic .post_author,
    .post.classic .post_content {
        float: none;
        width: auto;
        margin: 0;
        border-left: 0;
    }

    .post.classic .post_author {
        border-right: 0;
    }

    table.tborder {
        display: table;
        width: 100%;
    }
}

@media (max-width: 650px) {
    body {
        font-size: 13px;
    }

    .inference-site {
        letter-spacing: .14em;
    }

    .inference-board {
        font-size: 27px;
    }

    .thead {
        padding: 9px;
    }

    .tcat {
        padding: 6px 8px;
    }

    #panel .upper,
    #panel .lower {
        font-size: 11px;
    }

    #search {
        float: none;
        width: 100%;
        margin: 6px 0;
    }

    #search input.textbox {
        max-width: 58vw;
    }

    .post_body {
        font-size: 13px;
    }

    #footer .upper .language,
    #footer .upper .theme,
    #footer .lower #current_time {
        float: none;
        display: block;
        margin: 5px 0;
    }
}

/* -------------------------------------------------------------------------
   CASCADE SHIELD — MyBB 1.8 parent global.css can be emitted after a child
   stylesheet depending on inheritance/order. These rules intentionally use
   !important for core visual surfaces so the Inference design wins reliably.
   ------------------------------------------------------------------------- */

html,
body {
    background:
        radial-gradient(circle at 12% -8%, rgba(49,238,143,.09), transparent 34rem),
        radial-gradient(circle at 88% 0%, rgba(39,186,113,.05), transparent 30rem),
        linear-gradient(180deg, #0b0e0d 0%, #080a09 100%) !important;
    color: #e7eee9 !important;
}

#container {
    min-width: 0 !important;
    color: #e7eee9 !important;
    background: transparent !important;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 14px !important;
}

#content {
    background: transparent !important;
    padding: 28px 10px 46px !important;
}

#logo {
    background:
        radial-gradient(circle at 12% 35%, rgba(49,238,143,.08), transparent 23rem),
        linear-gradient(180deg, #171d1a 0%, #0f1412 100%) !important;
    border-bottom: 1px solid rgba(49,238,143,.19) !important;
    padding: 0 !important;
}

.inference-brandbar {
    min-height: 96px !important;
}

.inference-site {
    color: #9fb0a7 !important;
    opacity: .82 !important;
}

.inference-board {
    color: #31ee8f !important;
    font-weight: 760 !important;
    text-shadow: 0 0 24px rgba(49,238,143,.10) !important;
}

#panel .upper {
    background: linear-gradient(180deg, #121815 0%, #0d110f 100%) !important;
    border-top: 0 !important;
    border-bottom: 1px solid #26312c !important;
    color: #b0beb7 !important;
}

#panel .lower {
    background: #111714 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #26312c !important;
    color: #9fb0a7 !important;
}

table {
    color: #dfe8e2 !important;
}

.tborder {
    background: #151b18 !important;
    border: 1px solid #34433c !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.32) !important;
}

.thead {
    background:
        linear-gradient(90deg, rgba(49,238,143,.15), transparent 52%),
        linear-gradient(180deg, #23332c 0%, #17231e 100%) !important;
    color: #f2fff7 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(49,238,143,.28) !important;
    padding: 11px 13px !important;
}

.thead a:link,
.thead a:visited {
    color: #f2fff7 !important;
}

.thead a:hover,
.thead a:active {
    color: #ffd879 !important;
    text-decoration: none !important;
}

.tcat {
    background: linear-gradient(180deg, #121815 0%, #0d120f 100%) !important;
    color: #8fbea4 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #26312c !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

.tcat a:link,
.tcat a:visited {
    color: #9ac9af !important;
}

.trow1,
.trow2 {
    color: #dfe8e2 !important;
    border-color: transparent #26312c #26312c transparent !important;
}

.trow1 {
    background: #171d1a !important;
}

.trow2 {
    background: #141916 !important;
}

tr:hover > .trow1,
tr:hover > .trow2 {
    background: #1c2521 !important;
}

.trow_sep {
    background: #1f2924 !important;
    color: #2bd37f !important;
    border-bottom: 1px solid #34433c !important;
}

.tfoot {
    background: #101512 !important;
    color: #9fb0a7 !important;
    border-top: 1px solid #26312c !important;
}

.navigation {
    background: linear-gradient(180deg, #171d1a 0%, #121714 100%) !important;
    color: #9fb0a7 !important;
    border: 1px solid #34433c !important;
    border-radius: 9px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}

.navigation .active {
    color: #31ee8f !important;
}

.smalltext,
.thread_start_datetime,
.post .post_head span.post_date,
.post .post_meta {
    color: #9fb0a7 !important;
}

input.textbox,
textarea,
select {
    background: #0e1311 !important;
    color: #e7eee9 !important;
    border-color: #3b4b43 !important;
}

#search input.button,
button,
input.button,
a.button {
    background-image: none !important;
    background: linear-gradient(180deg, #e7b783 0%, #d89a61 100%) !important;
    border: 1px solid #b17c4f !important;
    color: #1b130c !important;
    border-radius: 8px !important;
    font-weight: 750 !important;
}

#search input.button:hover,
button:hover,
input.button:hover,
a.button:hover {
    background: linear-gradient(180deg, #ffeaa7 0%, #ffd879 100%) !important;
    border-color: #ffe08a !important;
    color: #171108 !important;
}

#footer .upper {
    background: #111714 !important;
    border-top: 1px solid #26312c !important;
    border-bottom: 1px solid #26312c !important;
    color: #9fb0a7 !important;
}

#footer .lower {
    background: #0a0d0b !important;
    color: #718077 !important;
}

.post,
.post_content {
    background: #171d1a !important;
    color: #e7eee9 !important;
}

.post .post_author {
    background: #111714 !important;
    color: #e7eee9 !important;
    border-color: #34433c !important;
}

.post_controls {
    background: #101512 !important;
    border-color: #34433c !important;
}

blockquote,
.codeblock {
    background: #0e1311 !important;
    border-color: #34433c !important;
    border-left-color: #22a161 !important;
    color: #dfe8e2 !important;
}

.popup_menu,
.editor,
.editor_control_bar {
    background: #101512 !important;
    border-color: #34433c !important;
    color: #e7eee9 !important;
}

/* Remove the stock blue visual language even if legacy image sprites are loaded. */
.thead,
#search input.button,
button,
input.button {
    background-image: none !important;
}

/* Better separation between forum blocks and statistics panels. */
#content .tborder + br + .tborder,
#content .tborder + .tborder {
    margin-top: 18px !important;
}

/* -------------------------------------------------------------------------
   v0.3 responsive layer
   MyBB 1.8 is table-heavy, so this layer combines a true mobile viewport
   with selective column reduction and horizontal safety for legacy tables.
   ------------------------------------------------------------------------- */

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

.wrapper {
    width: min(94%, 1420px) !important;
    min-width: 0 !important;
    max-width: 1420px !important;
    box-sizing: border-box;
}

#container,
#header,
#content,
#footer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.tborder,
.tfixed {
    max-width: 100% !important;
}

.post_body,
.post_content,
.trow1,
.trow2 {
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 900px) {
    .wrapper {
        width: calc(100% - 22px) !important;
    }

    #content {
        padding: 18px 0 34px !important;
    }

    .inference-brandbar {
        min-height: 0 !important;
        padding: 15px 0 12px !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        gap: 10px 12px !important;
    }

    .inference-brand {
        grid-column: 1 / -1;
        min-width: 0;
    }

    #logo ul.top_links {
        grid-column: 1 / -1;
        width: auto !important;
        margin: 2px 0 0 0 !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 3px;
    }

    #logo ul.top_links::-webkit-scrollbar {
        display: none;
    }

    #logo ul.top_links li {
        flex: 0 0 auto;
    }

    #panel .upper .wrapper,
    #panel .lower .wrapper {
        display: block;
        overflow: hidden;
    }

    #search {
        float: none !important;
        display: flex !important;
        width: 100% !important;
        margin: 7px 0 3px !important;
        gap: 6px;
    }

    #search input.textbox {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    #search input.button {
        flex: 0 0 auto;
    }

    /* Classic postbit becomes a stacked card. */
    .post.classic {
        padding-top: 0 !important;
    }

    .post.classic .post_author,
    .post.classic .post_content {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .post.classic .post_author {
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
    }

    .post.classic .post_author div.author_information,
    .post.classic .post_author div.author_statistics {
        text-align: left !important;
    }

    /* Keep complex MyBB utility tables usable rather than crushing columns. */
    form .tborder,
    .modal .tborder,
    .editor,
    .codeblock {
        max-width: 100% !important;
    }

    textarea,
    input.textbox,
    select {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 700px) {
    body {
        font-size: 13px !important;
    }

    .wrapper {
        width: calc(100% - 16px) !important;
    }

    .inference-mark {
        width: 44px !important;
        height: 44px !important;
    }

    .inference-site {
        font-size: 9px !important;
        letter-spacing: .14em !important;
    }

    .inference-board {
        font-size: 25px !important;
    }

    #logo ul.top_links a {
        font-size: 11px !important;
        padding: 6px 9px !important;
    }

    .navigation {
        margin-bottom: 8px;
        white-space: normal;
    }

    .thead {
        padding: 9px 10px !important;
    }

    .tcat {
        padding: 6px 8px !important;
    }

    

    .forum_status {
        width: 27px !important;
        height: 27px !important;
    }

    .forum_status:before {
        inset: 7px !important;
    }

    .post .post_author div.author_avatar {
        float: left !important;
        margin: 0 10px 4px 0 !important;
    }

    .post.classic .post_author div.author_avatar {
        text-align: left !important;
    }

    .post .post_author div.author_avatar img {
        max-width: 56px !important;
        max-height: 56px !important;
    }

    .post_body {
        font-size: 13px !important;
        line-height: 1.58 !important;
        padding: 10px 0 !important;
    }

    .postbit_buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .postbit_buttons > a:link,
    .postbit_buttons > a:hover,
    .postbit_buttons > a:visited,
    .postbit_buttons > a:active {
        margin: 0 !important;
    }

    #footer .upper ul.bottom_links {
        float: none !important;
        line-height: 2;
    }

    #footer .upper .language,
    #footer .upper .theme,
    #footer .lower #current_time {
        float: none !important;
        display: block !important;
        margin: 6px 0 !important;
    }
}

@media (max-width: 480px) {
    .wrapper {
        width: calc(100% - 12px) !important;
    }

    #content {
        padding-top: 12px !important;
    }

    .inference-brandbar {
        padding-top: 11px !important;
    }

    .inference-mark {
        width: 40px !important;
        height: 40px !important;
    }

    .inference-board {
        font-size: 23px !important;
    }

    .tborder {
        border-radius: 9px !important;
        box-shadow: 0 9px 25px rgba(0,0,0,.26) !important;
    }

    .smalltext {
        font-size: 10px !important;
    }

    input.textbox,
    textarea,
    select,
    button,
    input.button {
        font-size: 16px !important; /* avoids iOS focus zoom */
    }
}

/* =========================================================================
   v0.4 refinements
   ========================================================================= */

/* Search and "Go" buttons: readable at rest, brighter yellow on hover. */
#search input.button,
#footer input.button,
#footer button,
input.button {
    color: #f1bd8d !important;
    background: linear-gradient(180deg, #2a211a 0%, #201913 100%) !important;
    border: 1px solid #9e704a !important;
    text-shadow: none !important;
}

#search input.button:hover,
#footer input.button:hover,
#footer button:hover,
input.button:hover {
    color: #ffd879 !important;
    background: linear-gradient(180deg, #332819 0%, #261f14 100%) !important;
    border-color: #ffd879 !important;
}

/* Search field deliberately light for contrast and familiarity. */
#search input.textbox {
    background: #f4f6f5 !important;
    color: #111714 !important;
    border: 1px solid #cfd7d2 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important;
}

#search input.textbox:focus {
    background: #ffffff !important;
    color: #0b0e0d !important;
    border-color: #31ee8f !important;
    box-shadow: 0 0 0 3px rgba(49,238,143,.12) !important;
}

/* Primary forum/topic links: green and visibly link-like. */
#content .tborder a:link,
#content .tborder a:visited,
.navigation a:link,
.navigation a:visited {
    color: #39d98a;
    text-decoration: underline;
    text-decoration-color: rgba(57,217,138,.58);
    text-underline-offset: 2px;
}

#content .tborder a:hover,
#content .tborder a:active,
.navigation a:hover,
.navigation a:active {
    color: #71f0ad;
    text-decoration-color: currentColor;
}

/* Post-body links use conventional blue on the light reading surface. */
.post_content,
.post_body {
    background: #f7f8f7 !important;
    color: #18201c !important;
}

.post_body a:link,
.post_body a:visited,
.post_content .signature a:link,
.post_content .signature a:visited {
    color: #166db5 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.post_body a:hover,
.post_body a:active,
.post_content .signature a:hover,
.post_content .signature a:active {
    color: #0b8bd8 !important;
}

.post .post_head {
    color: #64746b !important;
}

.post .post_head a {
    color: #2a8a5f !important;
}

.post_content .signature {
    color: #5e6b64 !important;
    border-top-color: #d8dfdb !important;
}

/* Index only: the breadcrumb repeats "Inference" directly below the brand. */
body.inference-index .navigation {
    display: none !important;
}

body.inference-index #content > .wrapper > br:first-of-type {
    display: none;
}

/* Visual anchor: subtle GPU / inference activity, integrated into the masthead. */
.inference-visual-anchor {
    margin-left: auto;
    width: min(44vw, 560px);
    height: 110px;
    position: relative;
    overflow: hidden;
    border-left: 1px solid rgba(49,238,143,.14);
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}

.inference-visual-anchor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .84;
    filter: saturate(.88) contrast(1.04) brightness(.82);
}

.inference-visual-anchor:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,20,18,.98) 0%, rgba(15,20,18,.24) 24%, transparent 52%),
        linear-gradient(180deg, rgba(49,238,143,.03), rgba(0,0,0,.18));
    pointer-events: none;
}

/* Override earlier brand layout so the visual anchor and nav coexist cleanly. */
.inference-brandbar {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

#logo ul.top_links {
    position: relative;
    z-index: 3;
}

/* INDEX MOBILE: preserve Threads and Posts; hide only Last Post. */
@media (max-width: 700px) {
    body.inference-index table.tborder {
        table-layout: fixed !important;
    }

    body.inference-index table.tborder tr > td:nth-child(5),
    body.inference-index table.tborder tr > th:nth-child(5) {
        display: none !important;
    }

    body.inference-index table.tborder tr > td:nth-child(1),
    body.inference-index table.tborder tr > th:nth-child(1) {
        width: 42px !important;
    }

    body.inference-index table.tborder tr > td:nth-child(3),
    body.inference-index table.tborder tr > th:nth-child(3),
    body.inference-index table.tborder tr > td:nth-child(4),
    body.inference-index table.tborder tr > th:nth-child(4) {
        display: table-cell !important;
        width: 54px !important;
        text-align: center !important;
        font-size: 11px !important;
    }

    body.inference-index table.tborder tr > td:nth-child(2),
    body.inference-index table.tborder tr > th:nth-child(2) {
        width: auto !important;
    }

    .inference-visual-anchor {
        grid-column: 1 / -1;
        width: 100% !important;
        height: 94px !important;
        margin: 4px 0 0 !important;
        border-left: 0;
        border-top: 1px solid rgba(49,238,143,.12);
        mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
    }

    .inference-brandbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .inference-brand {
        grid-column: 1 !important;
    }

    #logo ul.top_links {
        grid-column: 1 !important;
    }
}

@media (max-width: 480px) {
    body.inference-index table.tborder tr > td:nth-child(3),
    body.inference-index table.tborder tr > th:nth-child(3),
    body.inference-index table.tborder tr > td:nth-child(4),
    body.inference-index table.tborder tr > th:nth-child(4) {
        width: 46px !important;
        font-size: 10px !important;
    }

    .inference-visual-anchor {
        height: 82px !important;
    }
}

/* =========================================================================
   v0.5 — fixed responsive masthead matching the design mockup
   ========================================================================= */

/*
  Structure:
    [ brand................. GPU anchor ]
    [ primary nav........................]
    [ welcome............... quick search]
*/

#logo {
    background:
        linear-gradient(90deg, rgba(49,238,143,.055), transparent 34%),
        linear-gradient(180deg, #121815 0%, #0d1210 100%) !important;
}

.inference-brandbar {
    display: grid !important;
    grid-template-columns: minmax(290px, 0.9fr) minmax(420px, 1.35fr) !important;
    grid-template-areas:
        "brand anchor"
        "nav nav" !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.inference-brand {
    grid-area: brand !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 122px !important;
    padding: 18px 20px 18px 2px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
    background:
        linear-gradient(90deg, rgba(15,20,18,.98) 0%, rgba(15,20,18,.96) 76%, rgba(15,20,18,.82) 92%, transparent 100%) !important;
}

.inference-mark {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}

.inference-brandcopy {
    position: relative !important;
    z-index: 2 !important;
}

.inference-site {
    font-size: 11px !important;
    letter-spacing: .22em !important;
    color: #8ca197 !important;
    opacity: 1 !important;
}

.inference-board {
    margin-top: 7px !important;
    font-size: clamp(31px, 3vw, 42px) !important;
    line-height: .95 !important;
    color: #31ee8f !important;
}

.inference-visual-anchor {
    grid-area: anchor !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: auto !important;
    min-width: 0 !important;
    height: 122px !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    border: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    background: #0d1210 !important;
}

.inference-visual-anchor img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center 53% !important;
    opacity: .86 !important;
    filter: saturate(.82) contrast(1.04) brightness(.72) !important;
}

.inference-visual-anchor:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        linear-gradient(90deg, #0d1210 0%, rgba(13,18,16,.86) 8%, rgba(13,18,16,.35) 24%, transparent 42%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.16)) !important;
    pointer-events: none !important;
}

.inference-visual-anchor:after {
    display: none !important;
}

#logo ul.top_links {
    grid-area: nav !important;
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 11px !important;
    border-top: 1px solid rgba(49,238,143,.17) !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background: rgba(7,10,8,.22) !important;
}

#logo ul.top_links li {
    flex: 0 0 auto !important;
}

#logo ul.top_links a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
}

/* Search/welcome row directly below navigation. */
#panel .upper {
    padding: 0 !important;
}

#panel .upper > .wrapper {
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 7px 0 !important;
    box-sizing: border-box !important;
}

#panel .upper .welcome {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#panel .upper form {
    order: 2 !important;
    margin-left: auto !important;
    flex: 0 1 410px !important;
}

#search {
    float: none !important;
    display: grid !important;
    grid-template-columns: minmax(140px, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
}

#search input {
    margin: 0 !important;
}

#search input.textbox {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    box-sizing: border-box !important;
}

#search input.button {
    min-height: 36px !important;
    padding: 7px 14px !important;
}

/* Desktop/tablet breakpoints */
@media (max-width: 1100px) {
    .inference-brandbar {
        grid-template-columns: minmax(260px, .82fr) minmax(360px, 1.18fr) !important;
    }

    .inference-brand,
    .inference-visual-anchor {
        height: 112px !important;
        min-height: 112px !important;
    }

    .inference-board {
        font-size: 34px !important;
    }

    #logo ul.top_links a {
        padding: 7px 12px !important;
    }
}

@media (max-width: 820px) {
    .inference-brandbar {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "anchor"
            "nav" !important;
    }

    .inference-brand {
        min-height: 94px !important;
        height: auto !important;
        padding: 15px 10px 13px 0 !important;
        background: transparent !important;
    }

    .inference-mark {
        width: 54px !important;
        height: 54px !important;
    }

    .inference-board {
        font-size: 30px !important;
    }

    .inference-visual-anchor {
        height: clamp(112px, 26vw, 180px) !important;
        min-height: 0 !important;
        border-top: 1px solid rgba(49,238,143,.12) !important;
        border-bottom: 1px solid rgba(49,238,143,.12) !important;
    }

    .inference-visual-anchor:before {
        background:
            linear-gradient(180deg, rgba(13,18,16,.20) 0%, transparent 24%, rgba(13,18,16,.15) 100%) !important;
    }

    .inference-visual-anchor img {
        object-position: center 57% !important;
    }

    #logo ul.top_links {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 9px 0 10px !important;
    }

    #logo ul.top_links::-webkit-scrollbar {
        display: none !important;
    }

    #panel .upper > .wrapper {
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px 0 !important;
    }

    #panel .upper .welcome {
        order: 2 !important;
    }

    #panel .upper form {
        order: 1 !important;
        width: 100% !important;
        margin: 0 !important;
        flex: none !important;
    }

    #search {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}

@media (max-width: 540px) {
    .wrapper {
        width: calc(100% - 20px) !important;
    }

    .inference-brand {
        min-height: 82px !important;
        gap: 11px !important;
    }

    .inference-mark {
        width: 48px !important;
        height: 48px !important;
    }

    .inference-site {
        font-size: 9px !important;
        letter-spacing: .15em !important;
    }

    .inference-board {
        font-size: 27px !important;
        margin-top: 5px !important;
    }

    .inference-visual-anchor {
        height: 128px !important;
    }

    #logo ul.top_links a {
        min-height: 34px !important;
        padding: 6px 11px !important;
        font-size: 12px !important;
    }

    #search input.textbox,
    #search input.button {
        height: 40px !important;
        min-height: 40px !important;
    }
}

/* =========================================================================
   v0.6 — premium masthead rebuild
   GPU is now a non-flowing background anchor, never a layout column.
   ========================================================================= */

/* Prevent the double-scrollbar condition caused by root/body overflow stacking. */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100% !important;
}

body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    min-height: 100vh !important;
}

/* Full-bleed masthead base. */
#logo {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #111714 0%, #0c110e 100%) !important;
    border-bottom: 1px solid rgba(49,238,143,.20) !important;
}

/* The GPU is an anchored background layer, not a flex/grid participant. */
#logo:before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    right: 0 !important;
    width: min(76vw, 1380px) !important;
    height: 142px !important;
    background-image: url(../../../images/inference/inference-gpu-anchor-clean.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: right center !important;
    opacity: .92 !important;
    pointer-events: none !important;
}

/* Clean fade where the anchor meets the brand area; no hard rectangle edges. */
#logo:after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 142px !important;
    background:
        linear-gradient(90deg,
            #0d1210 0%,
            #0d1210 20%,
            rgba(13,18,16,.96) 29%,
            rgba(13,18,16,.70) 39%,
            rgba(13,18,16,.18) 55%,
            rgba(13,18,16,0) 72%),
        linear-gradient(180deg, rgba(49,238,143,.025), rgba(0,0,0,.12)) !important;
    pointer-events: none !important;
}

/* Undo the older v0.5 two-column masthead. */
.inference-brandbar {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.inference-brand {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-width: 0 !important;
    min-height: 142px !important;
    height: 142px !important;
    padding: 17px 24px 14px 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

.inference-mark {
    width: 66px !important;
    height: 66px !important;
    flex: 0 0 auto !important;
}

.inference-brandcopy {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.inference-site {
    font-size: 11px !important;
    letter-spacing: .23em !important;
    color: #94a69c !important;
    opacity: 1 !important;
}

.inference-board {
    margin-top: 7px !important;
    font-size: clamp(34px, 3vw, 44px) !important;
    line-height: .95 !important;
    color: #31ee8f !important;
}

.inference-subline {
    margin-top: 11px !important;
    color: #8eb9a1 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .17em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.inference-subline .dot {
    color: #d8a16f !important;
    padding: 0 .35em !important;
}

/* The old element is gone from v0.6, but keep it suppressed if cached template survives. */
.inference-visual-anchor {
    display: none !important;
}

/* Navigation is a separate full-width band under the masthead image. */
#logo ul.top_links {
    position: relative !important;
    z-index: 4 !important;
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 11px 0 12px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    border-top: 1px solid rgba(49,238,143,.18) !important;
    background:
        linear-gradient(180deg, rgba(13,18,16,.94), rgba(10,14,12,.98)) !important;
    box-shadow:
        0 -14px 26px rgba(7,10,8,.20),
        inset 0 1px 0 rgba(255,255,255,.012) !important;
}

/* Extend nav band visually to the viewport edges while keeping link alignment in wrapper. */
#logo ul.top_links:before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(180deg, rgba(13,18,16,.94), rgba(10,14,12,.98)) !important;
    border-top: 1px solid rgba(49,238,143,.12) !important;
}

/* Search/login band gets the same seamless full-bleed treatment. */
#panel .upper {
    position: relative !important;
    background: #0b100d !important;
    border-bottom: 1px solid #26312c !important;
}

#panel .upper > .wrapper {
    min-height: 58px !important;
}

/* Forum index: always preserve all four meaningful data columns. */
body.inference-index table.tborder {
    width: 100% !important;
    table-layout: fixed !important;
}

body.inference-index table.tborder tr > td:nth-child(3),
body.inference-index table.tborder tr > th:nth-child(3),
body.inference-index table.tborder tr > td:nth-child(4),
body.inference-index table.tborder tr > th:nth-child(4),
body.inference-index table.tborder tr > td:nth-child(5),
body.inference-index table.tborder tr > th:nth-child(5) {
    display: table-cell !important;
}

body.inference-index table.tborder tr > td:nth-child(3),
body.inference-index table.tborder tr > th:nth-child(3),
body.inference-index table.tborder tr > td:nth-child(4),
body.inference-index table.tborder tr > th:nth-child(4) {
    width: 76px !important;
    text-align: center !important;
}

body.inference-index table.tborder tr > td:nth-child(5),
body.inference-index table.tborder tr > th:nth-child(5) {
    width: 200px !important;
    white-space: normal !important;
}

body.inference-index table.tborder tr > td:nth-child(5) .smalltext,
body.inference-index table.tborder tr > td:nth-child(5) div {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Responsive behavior keeps GPU behind the brand; it never stacks into document flow. */
@media (max-width: 900px) {
    #logo:before {
        width: 100% !important;
        height: 128px !important;
        background-position: 66% center !important;
        opacity: .76 !important;
    }

    #logo:after {
        height: 128px !important;
        background:
            linear-gradient(90deg,
                #0d1210 0%,
                #0d1210 30%,
                rgba(13,18,16,.93) 45%,
                rgba(13,18,16,.48) 65%,
                rgba(13,18,16,.12) 100%) !important;
    }

    .inference-brand {
        min-height: 128px !important;
        height: 128px !important;
        padding-right: 10px !important;
    }

    .inference-mark {
        width: 56px !important;
        height: 56px !important;
    }

    .inference-board {
        font-size: 31px !important;
    }

    .inference-subline {
        margin-top: 8px !important;
        font-size: 9px !important;
        letter-spacing: .12em !important;
    }

    #logo ul.top_links {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    #logo ul.top_links::-webkit-scrollbar {
        display: none !important;
    }

    #panel .upper > .wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px 0 !important;
    }

    #panel .upper form {
        width: 100% !important;
        margin: 0 !important;
        order: 1 !important;
    }

    #panel .upper .welcome {
        order: 2 !important;
    }
}

@media (max-width: 700px) {
    /* Keep Last Post visible; compress instead of hiding it. */
    body.inference-index table.tborder tr > td:nth-child(1) {
        width: 38px !important;
    }

    body.inference-index table.tborder tr > td:nth-child(3),
    body.inference-index table.tborder tr > th:nth-child(3),
    body.inference-index table.tborder tr > td:nth-child(4),
    body.inference-index table.tborder tr > th:nth-child(4) {
        width: 47px !important;
        font-size: 10px !important;
    }

    body.inference-index table.tborder tr > td:nth-child(5),
    body.inference-index table.tborder tr > th:nth-child(5) {
        display: table-cell !important;
        width: 108px !important;
        font-size: 10px !important;
        white-space: normal !important;
    }

    body.inference-index table.tborder tr > td:nth-child(5) .smalltext {
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    body.inference-index table.tborder tr > td:nth-child(5) a {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 520px) {
    .wrapper {
        width: calc(100% - 20px) !important;
    }

    #logo:before,
    #logo:after {
        height: 116px !important;
    }

    #logo:before {
        background-position: 72% center !important;
        opacity: .68 !important;
    }

    #logo:after {
        background:
            linear-gradient(90deg,
                #0d1210 0%,
                #0d1210 38%,
                rgba(13,18,16,.90) 60%,
                rgba(13,18,16,.28) 100%) !important;
    }

    .inference-brand {
        height: 116px !important;
        min-height: 116px !important;
    }

    .inference-mark {
        width: 49px !important;
        height: 49px !important;
    }

    .inference-site {
        font-size: 9px !important;
        letter-spacing: .15em !important;
    }

    .inference-board {
        font-size: 27px !important;
    }

    .inference-subline {
        font-size: 8px !important;
        letter-spacing: .08em !important;
        white-space: normal !important;
        max-width: 290px !important;
    }

    body.inference-index table.tborder tr > td:nth-child(3),
    body.inference-index table.tborder tr > th:nth-child(3),
    body.inference-index table.tborder tr > td:nth-child(4),
    body.inference-index table.tborder tr > th:nth-child(4) {
        width: 40px !important;
    }

    body.inference-index table.tborder tr > td:nth-child(5),
    body.inference-index table.tborder tr > th:nth-child(5) {
        width: 90px !important;
    }
}

@media (max-width: 400px) {
    body.inference-index table.tborder tr > td:nth-child(3),
    body.inference-index table.tborder tr > th:nth-child(3),
    body.inference-index table.tborder tr > td:nth-child(4),
    body.inference-index table.tborder tr > th:nth-child(4) {
        width: 36px !important;
        font-size: 9px !important;
    }

    body.inference-index table.tborder tr > td:nth-child(5),
    body.inference-index table.tborder tr > th:nth-child(5) {
        width: 78px !important;
        font-size: 9px !important;
    }

    body.inference-index table.tborder tr > td:nth-child(5) .smalltext {
        font-size: 8px !important;
    }
}

/* =========================================================================
   v0.6.1 — forum status-column alignment fix
   The fixed table layout caused MyBB's colspan header to redistribute the
   first two forum columns, making the status icon sit in an oversized cell.
   ========================================================================= */

body.inference-index table.tborder {
    table-layout: auto !important;
}

/* Keep the forum-status cell narrow and deterministic. */
body.inference-index table.tborder tbody tr > td:first-child[width="1"] {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 6px !important;
    text-align: center !important;
}

/* Allow the forum-title column to consume the remaining flexible width. */
body.inference-index table.tborder tbody tr > td:nth-child(2) {
    width: auto !important;
}

/* Preserve the compact icon column on smaller screens. */
@media (max-width: 700px) {
    body.inference-index table.tborder tbody tr > td:first-child[width="1"] {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding-left: 7px !important;
        padding-right: 5px !important;
    }
}