/* FUTURUM — Dark Industrial Theme */

/* Main background and typography */
html, body {
    background: #17191c;
    color: #f0f1f2;
    font-family: Verdana, Roboto, sans-serif;
    font-size: 13px;
}

/* Main forum container */
#container {
    background: #17191c;
    color: #f0f1f2;
    border: 1px solid #41464c;
    max-width: 1200px;
    width: 94%;
    margin: 20px auto;
    padding: 15px;
}

/* Links */
a:link, a:visited {
    color: #c1ccd8;
    text-decoration: none;
}

a:hover, a:active {
    color: #ffffff;
    text-decoration: underline;
}

/* Forum category headers */
.thead {
    background: #343940;
    color: #f0f1f2;
    border: 1px solid #41464c;
    font-family: Roboto, Verdana, sans-serif;
    font-weight: bold;
}

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

/* Secondary headers */
.tcat {
    background: #25282c;
    color: #d5d9df;
}

/* Forum rows */
.trow1 {
    background: #202328;
    color: #f0f1f2;
}

.trow2 {
    background: #25282c;
    color: #f0f1f2;
}

/* Tables and borders */
.tborder {
    background: #41464c;
    border: 1px solid #41464c;
}

/* Navigation */
.menu {
    background: #25282c;
    color: #f0f1f2;
}

/* Input fields */
input, textarea, select {
    background: #25282c;
    color: #f0f1f2;
    border: 1px solid #41464c;
}

/* Buttons */
.button {
    background: #343940;
    color: #ffffff;
    border: 1px solid #555b63;
}

/* Footer */
#footer {
    background: #17191c;
    color: #a8b0ba;
}

/* FUTURUM — Dark Theme Corrections */

/* Remove remaining white backgrounds */
#content,
#header,
#header .wrapper,
#content .wrapper,
#panel,
#panel .upper,
#panel .lower,
#footer .upper,
#footer .lower {
    background: #17191c;
    color: #f0f1f2;
}

/* Header and navigation */
#header {
    border-bottom: 1px solid #41464c;
}

#logo {
    background: #17191c;
}

#header ul.menu,
#header ul.menu li {
    background: #25282c;
}

#header ul.menu a,
#panel a,
#footer a {
    color: #c1ccd8;
}

/* Breadcrumb navigation */
.navigation,
.navigation a {
    color: #c1ccd8;
}

/* Forum content */
#content {
    border: none;
}

.trow1, .trow2 {
    border-color: #41464c;
}

/* Secondary table headings */
.tcat a {
    color: #f0f1f2;
}

/* Form elements and buttons */
input.textbox,
textarea,
select,
button,
input.button {
    background: #25282c;
    color: #f0f1f2;
    border: 1px solid #555b63;
}

/* Footer */
#footer,
#footer .upper,
#footer .lower,
#footer .bottom {
    background: #17191c;
    color: #a8b0ba;
}

/* Forum legend and statistics */
.forum_legend,
#boardstats,
.smalltext {
    color: #a8b0ba;
}

/* Remove bright default borders */
.tborder,
.thead,
.tcat,
.trow1,
.trow2 {
    border-color: #41464c;
}

/* FUTURUM — Readability and Interface Refinements */

/* General text and links */
#container,
#content,
#header,
#footer {
    color: #e5e7eb;
}

.navigation,
.navigation a,
#panel a,
#footer a,
#footer .upper a,
#footer .lower a {
    color: #bfc7d1;
}

/* Make navigation links easier to see */
#panel .lower a,
#panel .upper a,
#header .menu a {
    color: #d5d9df;
}

/* Breadcrumbs */
.navigation .active {
    color: #f0f1f2;
    font-weight: bold;
}

/* Statistics footer and table footers */
.tfoot,
.tfoot a,
.tfoot strong {
    background: #292d32;
    color: #d5d9df;
}

/* Forum names and headings */
.trow1 a,
.trow2 a,
.thead a {
    color: #dce4ee;
}

/* Improve borders */
.tborder {
    border: 1px solid #41464c;
    border-radius: 3px;
    overflow: hidden;
}

/* Form controls */
input.button,
button,
.button {
    background: #343940;
    color: #f0f1f2;
    border: 1px solid #555b63;
    border-radius: 3px;
}

/* Remove default bright separators */
#panel,
#footer,
#content {
    border-color: #41464c;
}

/* Link hover */
a:hover {
    color: #ffffff;
}

/* FUTURUM — Logo Size Correction */

#logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
}

#logo {
    padding: 12px 0;
    margin: 0;
    min-height: 0;
}

#header {
    min-height: 0;
}

/* FUTURUM — Three-Column Layout */

.futurum-layout {
    display: grid;
    grid-template-columns: minmax(170px, 22fr) minmax(0, 56fr) minmax(190px, 22fr);
    gap: 14px;
    align-items: start;
    margin: 16px 0;
}

.futurum-layout > * {
    min-width: 0;
}

/* Sidebar panels */

.futurum-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.futurum-widget {
    background: #202328;
    border: 1px solid #41464c;
    color: #e5e7eb;
}

.futurum-widget h3 {
    background: #343940;
    color: #f0f1f2;
    font-family: Roboto, Verdana, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #41464c;
}

.futurum-widget-content {
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
}

.futurum-widget-content a {
    display: block;
    padding: 5px 0;
    color: #c8d0d9;
}

.futurum-widget-content a:hover {
    color: #ffffff;
}

.futurum-widget-content p {
    margin: 0 0 10px;
    color: #b6bec8;
}

/* Center discussion area */

.futurum-main .tborder {
    width: 100%;
}

/* Adapt to smaller screens */

@media (max-width: 1050px) {
    .futurum-layout {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .futurum-left {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .futurum-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .futurum-left {
        grid-column: auto;
    }
}

/* FUTURUM — Custom Header */

#header #logo {
    background: #17191c;
    padding: 14px 0 12px;
    margin: 0;
}

#header #logo .futurum-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

#header #logo .futurum-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.futurum-brand-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.futurum-brand-text strong {
    font-family: Roboto, Arial, sans-serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    color: #f0f1f2;
}

.futurum-brand-text small {
    font-family: Verdana, sans-serif;
    font-size: 9px;
    letter-spacing: 1.1px;
    color: #9ca5af;
}

/* Site-wide navigation */

#header .futurum-topnav {
    background: #292d32;
    border-top: 1px solid #41464c;
    border-bottom: 1px solid #41464c;
    margin-bottom: 12px;
}

#header .futurum-topnav-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

#header .futurum-topnav a,
#header .futurum-topnav span {
    display: inline-block;
    padding: 11px 15px;
    font-family: Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
}

#header .futurum-topnav a {
    color: #bac2cc;
}

#header .futurum-topnav a:hover {
    background: #343940;
    color: #ffffff;
}

#header .futurum-topnav .is-active {
    background: #343940;
    color: #ffffff;
    border-bottom: 2px solid #b3bdc8;
}

#header .futurum-topnav .is-pending {
    color: #858e98;
    cursor: default;
}

@media (max-width: 700px) {
    #header .futurum-topnav a,
    #header .futurum-topnav span {
        padding: 9px 10px;
        font-size: 11px;
    }
}

/* =========================================
   FUTURUM — WIDE DESKTOP LAYOUT
   ========================================= */

/* Expand the entire website */
#container {
    width: calc(100% - 40px);
    max-width: 1800px;
    min-width: 0;
    box-sizing: border-box;
    margin: 16px auto;
}

/* Stop MyBB's wrappers from restricting width */
#container .wrapper {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

/* Optimize the three-column layout */
@media (min-width: 1101px) {
    .futurum-layout {
        display: grid;
        grid-template-columns:
            clamp(210px, 17vw, 280px)
            minmax(0, 1fr)
            clamp(240px, 19vw, 320px);
        gap: 16px;
        align-items: start;
    }
}

/* Preserve comfortable spacing on smaller screens */
@media (max-width: 700px) {
    #container {
        width: calc(100% - 16px);
        margin: 8px auto;
        padding: 8px;
    }
}

/* FUTURUM — Sidebar Account Controls */

.futurum-account-tools {
    list-style: none;
    margin: 0;
    padding: 0;
}

.futurum-account-tools li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.futurum-account-tools a {
    display: block;
    padding: 5px 0;
    color: #c8d0d9;
    text-decoration: none;
}

.futurum-account-tools a:hover {
    color: #ffffff;
    background: transparent;
}

/* ========================================
   FUTURUM — REMOVE OLD MYBB ACCOUNT BARS
   ======================================== */

/* Hide original MyBB welcome/account panel */
#header #panel {
    display: none !important;
}

/* Remove any leftover panel spacing */
#header #panel + * {
    margin-top: 0;
}

/* Keep the custom navigation clean */
#header .futurum-topnav {
    margin-bottom: 0;
}

/* FUTURUM — ACCOUNT VISIBILITY */

.futurum-guest-only {
    display: none !important;
}

.futurum-sidebar-account[data-uid="0"] .futurum-member-only,
.futurum-session[data-uid="0"] .futurum-member-only {
    display: none !important;
}

.futurum-sidebar-account[data-uid="0"] .futurum-guest-only {
    display: block !important;
}

.futurum-session[data-uid="0"] .futurum-guest-only {
    display: flex !important;
}

/* Account sidebar */

.futurum-account-tools {
    list-style: none;
    margin: 0;
    padding: 0;
}

.futurum-account-tools li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.futurum-sidebar-account a {
    display: block;
    padding: 5px 0;
    color: #c8d0d9;
}

/* Account links in top navigation */

.futurum-topnav .futurum-session {
    margin-left: auto;
}

.futurum-topnav .futurum-session > div {
    display: flex;
}

.futurum-topnav .futurum-session a {
    font-size: 11px;
}

/* FUTURUM — MINIMAL FOOTER */

#footer.futurum-footer {
    margin-top: 50px;
    padding: 18px 0;
    background: #17191c;
    border-top: 1px solid #41464c;
}

.futurum-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.futurum-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.futurum-footer-links a,
.futurum-powered a {
    color: #bfc7d1;
    text-decoration: none;
}

.futurum-footer-links a:hover,
.futurum-powered a:hover {
    color: #ffffff;
}

.futurum-copyright,
.futurum-powered {
    color: #929ba5;
    font-size: 11px;
}

/* FUTURUM — DISCUSSION REFINEMENTS */

.futurum-main {
    min-width: 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.futurum-main .tborder {
    width: 100%;
    border: 1px solid #41464c;
    border-radius: 2px;
    overflow: hidden;
}

.futurum-main .thead {
    background: #343940;
    color: #f0f1f2;
    font-family: Roboto, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.futurum-main .tcat {
    background: #292d32;
    color: #bfc7d1;
    font-size: 11px;
}

.futurum-main .trow1,
.futurum-main .trow2 {
    background: #202328;
    color: #e5e7eb;
    border-color: #41464c;
    padding: 12px 10px;
}

.futurum-main .trow1:hover,
.futurum-main .trow2:hover {
    background: #292e34;
}

.futurum-main .trow1 a,
.futurum-main .trow2 a {
    color: #e1e7ed;
    font-weight: 500;
}

.futurum-main .smalltext {
    font-size: 11px;
    color: #aeb7c1;
}

.futurum-main .forum_status {
    opacity: 0.8;
}

/* Sharper sidebar spacing */

.futurum-widget h3 {
    padding: 9px 12px;
    font-size: 12px;
}

.futurum-widget-content {
    padding: 10px 12px;
}

.futurum-widget-content a {
    padding: 5px 0;
}

/* Responsive layout */

@media (max-width: 700px) {
    .futurum-layout {
        display: flex;
        flex-direction: column;
    }

    .futurum-main {
        order: 1;
        width: 100%;
    }

    .futurum-left {
        order: 2;
        width: 100%;
    }

    .futurum-right {
        order: 3;
        width: 100%;
    }

    .futurum-topnav .futurum-session {
        margin-left: 0;
    }

    .futurum-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* FUTURUM — COMPACT HOMEPAGE SPACING */

/* Reduce space beneath the navigation */
#content {
    padding-top: 8px;
}

/* Remove redundant breadcrumb spacing */
#content .navigation {
    display: none;
}

/* Tighten the three-column layout */
.futurum-layout {
    margin-top: 6px !important;
    padding-top: 0 !important;
}

/* Remove excess spacing from first widgets */
.futurum-left .futurum-widget:first-child,
.futurum-main > :first-child,
.futurum-right .futurum-widget:first-child {
    margin-top: 0 !important;
}

/* =========================================
   FUTURUM — PERSONAL SIDEBAR V1
   ========================================= */

.fu-left {
    gap: 14px;
}

/* Panels */

.fu-left .fu-panel {
    border: 1px solid #41464c;
    border-radius: 2px;
    overflow: hidden;
}

.fu-left .fu-panel h3 {
    margin: 0;
    padding: 11px 14px;
    background: #343940;
    color: #f0f1f2;
    font: 600 12px Roboto, Arial, sans-serif;
    letter-spacing: 0.5px;
}

.fu-left .futurum-widget-content {
    padding: 12px;
}

/* Profile */

.fu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 1px 10px;
}

.fu-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: #424850;
    border: 1px solid #555d66;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e1e5ea;
}

.fu-avatar .fu-icon {
    width: 23px;
    height: 23px;
}

.fu-profile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fu-left .fu-username {
    color: #ffffff;
    font-weight: 600;
    overflow-wrap: anywhere;
    padding: 0;
}

.fu-role {
    font-size: 11px;
    color: #9ba5b0;
}

/* Icons */

.fu-icon {
    display: block;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #aab4be;
}

/* Links */

.fu-left a.fu-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 24px;
    padding: 8px 10px;
    color: #d7dee5;
    text-decoration: none;
    font-size: 12px;
    border-radius: 2px;
}

.fu-left a.fu-row:hover {
    background: #30363d;
    color: #ffffff;
    text-decoration: none;
}

.fu-left a.fu-row:hover .fu-icon {
    color: #ffffff;
}

/* Dividers */

.fu-separator {
    height: 1px;
    background: #41464c;
    margin: 8px 0;
}

/* Management links */

.fu-management-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
}

.fu-management-row ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fu-management-row li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fu-management-row a {
    color: #d7dee5;
    text-decoration: none;
    font-size: 12px;
    padding: 0;
}

.fu-management-row a:hover {
    color: #ffffff;
}

/* Hide absent permission-based links */

.fu-management-row:not(:has(a)) {
    display: none;
}

.fu-management-panel:not(:has(a)) {
    display: none;
}

/* Guests and registered members */

.fu-guest-only {
    display: none;
}

.fu-left[data-uid="0"] .fu-member-only {
    display: none;
}

.fu-left[data-uid="0"] .fu-guest-only {
    display: block;
}

/* FUTURUM — EXPANDING NAVIGATION */

#header .futurum-topnav-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    min-width: 0;
}

/* Search takes up remaining space */

#header .fu-site-search {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 130px;
    margin: 0 14px;
    height: 34px;
}

#header .fu-site-search input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 0 12px;
    background: #1d2024;
    border: 1px solid #515860;
    border-right: 0;
    color: #f0f1f2;
    font: 12px Verdana, sans-serif;
    outline: none;
}

#header .fu-site-search input:focus {
    border-color: #929da8;
}

#header .fu-site-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    background: #343940;
    border: 1px solid #515860;
    color: #d5dce3;
    cursor: pointer;
}

#header .fu-site-search button:hover {
    background: #454c54;
}

/* Keep account controls at the right */

#header .futurum-session {
    flex-shrink: 0;
    margin-left: 0;
}

#header .futurum-session a {
    padding: 10px 12px;
    white-space: nowrap;
}

/* Narrow-screen fallback */

@media (max-width: 900px) {
    #header .futurum-topnav-inner {
        flex-wrap: wrap;
    }

    #header .fu-site-search {
        order: 3;
        flex-basis: 100%;
        margin: 8px 0;
    }

    #header .futurum-session {
        margin-left: auto;
    }
}

<!-- FUTURUM — HOME DISCUSSION STREAM -->
<main class="futurum-main">

    <section class="fu-sstream">

        <div class="fu-sstream-header">
            <h2>THE SSTREAM</h2>
            <span>IN DEVELOPMENT</span>
        </div>

        <div class="fu-sstream-placeholder">
            <svg class="fu-icon" aria-hidden="true">
                <use href="#fu-post"></use>
            </svg>

            <strong>Community Discussion Stream</strong>
            <p>Recent discussions will appear here.</p>
        </div>

    </section>

</main>

/* ===================================
   FUTURUM — SSTREAM V1
   =================================== */

.fu-sstream {
    background: #202328;
    border: 1px solid #41464c;
    color: #e5e9ee;
}

/* Header */

.fu-sstream-header {
    background: #343940;
    padding: 14px 18px;
    border-bottom: 1px solid #41464c;
}

.fu-sstream-header h2 {
    margin: 0;
    color: #ffffff;
    font: 700 15px Roboto, Arial, sans-serif;
    letter-spacing: .5px;
}

/* Centered tabs */

.fu-sstream-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #25282c;
}

.fu-sstream-tab {
    text-align: center;
    padding: 15px 8px;
    color: #9ea9b5;
    font: 600 12px Roboto, Arial, sans-serif;
    border-bottom: 1px solid #41464c;
}

.fu-sstream-tab.is-active {
    color: #ffffff;
    background: #343a41;
    border-bottom: 2px solid #e0e5eb;
}

.fu-sstream-tab.is-pending {
    opacity: .65;
}

/* Cards */

.fu-stream-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc((100% - 12px) / 4);
    grid-template-rows: min-content 1fr min-content;
    column-gap: 18px;
    padding: 14px 20px 20px;
    background: #202328;
    border-bottom: 1px solid #41464c;
}

.fu-stream-card:hover {
    background: #23272c;
}

/* Author information */

.fu-stream-author {
    display: flex;
    grid-column: 1;
    align-items: center;
    gap: 13px;
    margin-bottom: 5px;
}

.fu-stream-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background: #414951;
    border: 1px solid #535d67;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fu-stream-avatar svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #dde3e9;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fu-stream-identity {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fu-stream-primary,
.fu-stream-secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.fu-stream-primary strong {
    font: 700 14px Roboto, Arial, sans-serif;
    color: #f0f2f4;
}

.fu-stream-time {
    color: #929da9;
    font-size: 11px;
}

.fu-stream-secondary {
    margin-top: 5px;
    color: #a4afba;
    font-size: 12px;
}

/* Discussion content */

.fu-stream-content {
    grid-column: 1;
    margin-bottom: 20px;
}

.fu-stream-title {
    display: block;
    margin-top: 7px;
    color: #eff1f4 !important;
    font: 600 20px/1.25 Roboto, Arial, sans-serif;
    text-decoration: none;
}

.fu-stream-title:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Four large footer actions */

.fu-stream-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    border-top: 1px solid #41464c;
    padding-top: 13px;
}

.fu-stream-files {
    grid-column: 2;
    grid-row: 1 / 3;
    min-width: 0;
    min-height: 80px;
    max-height: 160px;
    overflow: auto;
    scrollbar-width: none;
    scrollbar-gutter: auto;
    align-self: start;
}

.fu-stream-file-list {
    display: grid;
    gap: 6px;
    justify-items: center;
}

.fu-stream-file {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 7px;
    border: 1px solid #414951;
    background: #272c32;
    border-radius: 2px;
    font: 11px/1.4 Verdana, Arial, sans-serif;
    overflow-wrap: anywhere;
}

.fu-stream-file img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.fu-stream-file-image {
    width: min(100%, 160px);
    padding: 3px;
}

.fu-stream-file svg {
    width: 18px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.fu-stream-file:focus-visible {
    outline: 2px solid #bac5cf;
    outline-offset: -2px;
}

@media (max-width: 600px) {
    .fu-stream-card {
        column-gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .fu-stream-primary { gap: 2px 5px; }
    .fu-stream-author { gap: 8px; }
}

.fu-stream-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    color: #bdc7d1 !important;
    font: 600 13px Roboto, Arial, sans-serif;
    text-decoration: none !important;
    border-radius: 3px;
}

.fu-stream-action svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a.fu-stream-action:hover {
    background: #343940;
    color: #ffffff !important;
}

.fu-action-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Empty feed */

.fu-sstream-empty {
    padding: 48px 20px;
    text-align: center;
    font-size: 12px;
    color: #929ba5;
}

.fu-sstream:has(.fu-sstream-list) .fu-sstream-empty {
    display: none;
}

/* FUTURUM — QUICK DISCUSSION COMPOSER */

.fu-compose-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 18px;
    background: #202328;
    border-bottom: 1px solid #41464c;
    text-decoration: none !important;
}

.fu-compose-trigger:hover {
    background: #292e34;
}

.fu-compose-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #414951;
    color: #ffffff;
    font-size: 23px;
    flex-shrink: 0;
}

.fu-compose-placeholder {
    flex: 1;
    color: #aab4be;
    font-size: 13px;
}

.fu-compose-action {
    padding: 10px 14px;
    background: #414951;
    border: 1px solid #59636e;
    color: #ffffff;
    font: 600 11px Roboto, Arial, sans-serif;
    white-space: nowrap;
}

/* ===================================
   FUTURUM — SSTREAM SCROLL LAYOUT
   =================================== */

/* Main SStream container */

.fu-sstream {
    display: flex;
    flex-direction: column;

    height: 710px;
    min-height: 0;

    background: #202328;
    border: 1px solid #41464c;
    overflow: hidden;
}

/* Keep header and tabs stationary */

.fu-sstream-header,
.fu-sstream-tabs {
    flex-shrink: 0;
}

/* Scrollable discussion area */

.fu-sstream-scroll {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: #515860 #202328;
    overscroll-behavior: contain;
}

/* Posting footer */

.fu-sstream > .fu-compose-trigger {
    flex-shrink: 0;

    margin: 0;
    padding: 14px 18px;

    background: #292d32;
    border-top: 1px solid #515860;
    border-bottom: 0;
}

.fu-sstream > .fu-compose-trigger:hover {
    background: #343940;
}

/* Keep footer contents aligned */

.fu-compose-placeholder {
    flex: 1;
    min-width: 0;
}

/* Make cards fill feed width */

.fu-sstream-scroll .fu-sstream-list {
    width: 100%;
}

/* Smaller screens */

@media (max-width: 900px) {
    .fu-sstream {
        height: 65vh;
        min-height: 480px;
    }
}

/* =====================================
   FUTURUM — PRECISE COLUMN ALIGNMENT
   ===================================== */

@media (min-width: 1101px) {

    /* Make both columns share the same height */
    .futurum-layout {
        align-items: stretch;
    }

    /* Allow the middle column to fill the grid */
    .futurum-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Match SStream height to the sidebar */
    .futurum-main > .fu-sstream {
        height: auto;
        min-height: 0;
        flex: 1 1 auto;
        box-sizing: border-box;
    }

    /* Keep the discussion area scrollable */
    .fu-sstream-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

}

/* FUTURUM — SSTREAM HEIGHT CORRECTION */

@media (min-width: 1101px) {

    .futurum-layout {
        align-items: start !important;
    }

    .futurum-main {
        display: block !important;
        min-height: 0;
    }

    .futurum-main > .fu-sstream {
        height: 850px !important;
        margin-bottom: -50px;
        min-height: 0 !important;
        flex: none !important;
        box-sizing: border-box;
    }

}

/* ====================================
   FUTURUM — DISCUSSION COMPOSER
   ==================================== */

/* Page container */

.fu-post-page {
    width: 100%;
    max-width: 1100px;
    margin: 24px auto 40px;
    color: #e5e9ee;
}

/* Heading */

.fu-post-heading {
    margin-bottom: 22px;
}

.fu-post-heading h1 {
    margin: 0 0 7px;
    color: #f1f3f5;
    font: 700 20px Roboto, Arial, sans-serif;
    letter-spacing: .6px;
}

.fu-post-heading p {
    margin: 0;
    color: #9ca6b1;
    font-size: 12px;
}

/* Main form */

.fu-compose-form {
    background: #202328;
    border: 1px solid #41464c;
    padding: 22px;
}

.fu-editor-table {
    width: 100%;
    border: none;
    background: transparent;
    border-spacing: 0;
}

.fu-editor-table td {
    padding: 0 0 22px;
    border: none;
    background: transparent;
}

.fu-field-label {
    display: block;
    margin-bottom: 10px;
    color: #bfc8d2;
    font: 600 12px Roboto, Arial, sans-serif;
    letter-spacing: .5px;
}

/* Title */

.fu-editor-table .fu-title-input {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    height: 46px;
    padding: 12px 14px;
    background: #25282c;
    border: 1px solid #4a5058;
    border-radius: 2px;
    color: #f0f1f2;
    font: 14px Verdana, sans-serif;
}

.fu-title-input:focus {
    outline: none;
    border-color: #8796a5;
}

/* Message editor */

.fu-editor-table #message {
    width: 100%;
    box-sizing: border-box;
    min-height: 270px;
    background: #202328;
    border: 1px solid #4a5058;
    color: #e5e9ee;
    padding: 14px;
    font: 14px/1.6 Verdana, sans-serif;
}

.fu-editor-table .sceditor-container {
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #4a5058;
    border-radius: 2px;
}

/* Advanced options */

.fu-post-advanced {
    margin-top: 8px;
    border: 1px solid #41464c;
    background: #25282c;
}

.fu-post-advanced summary {
    padding: 14px 16px;
    color: #c8d0d9;
    font: 600 12px Roboto, Arial, sans-serif;
    cursor: pointer;
}

.fu-post-advanced summary:hover {
    color: #ffffff;
    background: #30363d;
}

.fu-post-advanced-content {
    padding: 14px;
    border-top: 1px solid #41464c;
}

.fu-advanced-table {
    width: 100%;
    background: #202328;
}

.fu-advanced-table td {
    padding: 10px;
    border-color: #41464c;
    color: #d7dee5;
}

/* Footer actions */

.fu-post-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid #41464c;
    margin-top: 22px;
    padding-top: 20px;
}

.fu-post-action-secondary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fu-post-actions .button {
    padding: 11px 16px;
    background: #343940;
    border: 1px solid #505860;
    color: #e7ebef;
    border-radius: 2px;
    font: 600 12px Roboto, Arial, sans-serif;
    cursor: pointer;
}

.fu-post-actions .fu-publish-button {
    background: #47515b;
    border-color: #697683;
    color: #ffffff;
}

.fu-post-actions .button:hover {
    background: #56616c;
}

/* FUTURUM — MINIMAL WRITING EDITOR */

.fu-editor-table #message {
    display: block;
    width: 100%;
    min-height: 240px;
    box-sizing: border-box;

    padding: 16px;

    background: #25282c;
    color: #e5e9ee;
    border: 1px solid #515a64;
    border-radius: 2px;

    font: 14px/1.7 Verdana, Arial, sans-serif;
    resize: vertical;
}

.fu-editor-table #message::placeholder {
    color: #929da9;
    opacity: 1;
}

.fu-editor-table #message:focus {
    border-color: #8796a5;
    outline: none;
}

/* ======================================
   FUTURUM — MINIMAL MESSAGE EDITOR V2
   ====================================== */

/* Full-width writing area */
#content .fu-post-page .fu-editor-table textarea#message {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 280px !important;
    min-height: 280px !important;

    box-sizing: border-box !important;
    padding: 16px !important;

    background: #25282c !important;
    color: #e5e9ee !important;

    border: 1px solid #515a64 !important;
    border-top: 0 !important;
    border-radius: 0 0 2px 2px;

    font: 14px/1.7 Verdana, Arial, sans-serif;
    resize: vertical;
}

#content .fu-editor-table textarea#message::placeholder {
    color: #929da9;
    opacity: 1;
}

/* Formatting toolbar */

.fu-mini-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    width: 100%;
    box-sizing: border-box;

    padding: 8px 10px;

    background: #30353b;
    border: 1px solid #515a64;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}

.fu-mini-toolbar button {
    width: auto;
    min-width: 34px;
    height: 32px;

    padding: 0 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;

    color: #cbd4de;
    font: 12px Roboto, Arial, sans-serif;
    cursor: pointer;
}

.fu-mini-toolbar button:hover {
    background: #454c54;
    border-color: #626d78;
    color: #ffffff;
}

.fu-mini-toolbar button:focus-visible {
    outline: 2px solid #9ba9b7;
}

.fu-toolbar-separator {
    width: 1px;
    height: 22px;
    margin: 0 5px;
    background: #58616b;
}


/* Member pictures share the dimensions of the existing avatar containers. */
.fu-avatar,
.fu-stream-avatar {
    overflow: hidden;
}

.fu-stream-avatar > a {
    display: block;
    width: 100%;
    height: 100%;
}

.fu-avatar img,
.fu-stream-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Classic signatures: responsive artwork above optional text. */
.fu-signature-banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: var(--fu-banner-height, 200px);
    object-fit: cover;
    object-position: center;
    margin: 0 0 8px;
}
.signature {overflow-wrap:anywhere}
/* Compact thread attachments. Native table ancestry is retained for MyBB AJAX. */
.fu-thread-uploads {margin-top:18px;padding:16px;border:1px solid #414951;border-radius:3px;background:#202429;color:#dce3e9}
.fu-thread-uploads header {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.fu-thread-uploads h2 {margin:0;font:600 14px/1.5 Verdana,Arial,sans-serif}
.fu-thread-uploads output,.fu-upload-hint,.fu-upload-size {color:#b5c1cb;font-size:12px}
.fu-thread-uploads .fu-upload-hint {margin:0 0 12px}
.fu-upload-choices {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.fu-upload-choices[hidden] {display:none}
.fu-upload-choices .button {padding:7px 16px;cursor:pointer}
.fu-upload-choices .button:disabled {opacity:.45;cursor:default}
.fu-upload-table {width:100%;border-collapse:collapse;table-layout:fixed;border:0;background:transparent}
.fu-upload-table tr[hidden] {display:none!important}
.fu-upload-table td {padding:9px 0;border:0;overflow-wrap:anywhere;vertical-align:middle}
.fu-upload-table td:last-child {width:40%}
.fu-uploaded-file td {border-top:1px solid #3c444c}
.fu-upload-row-actions {text-align:right;white-space:normal}
.fu-upload-row-actions .button {margin:2px 0 2px 6px;cursor:pointer}
.fu-thread-uploads .attachment_filename {white-space:normal;color:#dce3e9}
.fu-upload-size {display:inline-block;margin-left:8px}
.fu-upload-fallback label {display:block;margin-bottom:6px}
.fu-upload-fallback input[type="file"] {max-width:100%;margin-bottom:8px}
.fu-upload-progress {height:3px;width:0;background:#90a2b1}
.fu-upload-dropzone {padding:20px 12px;border:1px dashed #5d6975;border-radius:3px;text-align:center;cursor:pointer;color:#c7d2dc;font:12px/1.6 Verdana,Arial,sans-serif}
.fu-upload-dropzone:hover,.fu-upload-dropzone.activated {background:#2b333b;border-color:#adbdca}
.fu-upload-dropzone[aria-disabled="true"] {pointer-events:none;opacity:.5}
.fu-upload-dropzone:focus-visible {outline:2px solid #bdcbd7;outline-offset:2px}
.fu-thread-uploads .fu-upload-status {margin:8px 0 0;min-height:0}
.fu-upload-status:empty {display:none}
.fu-reply-page .fu-post-heading h1 {text-transform:none}
.fu-reply-page .fu-editor-table {table-layout:fixed;width:100%}
.fu-reply-page #message {min-height:260px}
.fu-reply-review {margin-top:24px;border:1px solid #414951;background:#202429;border-radius:3px}
.fu-reply-review>summary {padding:12px 16px;cursor:pointer;color:#cbd5de;font:600 12px Verdana,Arial,sans-serif}
.fu-reply-review[open]>summary {border-bottom:1px solid #414951}
.fu-reply-review .tborder {border:0;margin:0}
.fu-quick-reply {width:100%;border:1px solid #414951;border-radius:3px;background:#202429;border-spacing:0}
.fu-quick-reply .thead {padding:12px 16px;background:#343940;font:600 14px Verdana,Arial,sans-serif}
.fu-quick-reply .fu-reply-fields {padding:16px;background:#202429}
.fu-quick-reply .fu-field-label {display:block;margin-bottom:8px;font:600 11px Verdana,Arial,sans-serif;color:#bbc7d1}
.fu-quick-reply #message {display:block;width:100%;max-width:100%;min-height:140px;box-sizing:border-box;resize:vertical;margin:0;padding:12px;background:#24292f;border:1px solid #515a64;border-radius:0 0 3px 3px;color:#e5ebef;font:13px/1.6 Verdana,Arial,sans-serif}
.fu-quick-reply #message:focus {outline:2px solid #8b9ba9;outline-offset:1px}
.fu-quick-reply .fu-mini-toolbar {box-sizing:border-box;width:100%;flex-wrap:wrap;margin:0}
.fu-quick-reply .fu-quick-actions {padding:12px 16px;text-align:right;border-top:1px solid #414951;background:#292e34}
.fu-quick-reply .fu-quick-actions .button {margin:3px 0 3px 6px;padding:9px 14px;border:1px solid #596570;border-radius:3px;background:#343940;color:#e7edf2;font:600 12px Verdana,Arial,sans-serif;cursor:pointer}
.fu-quick-reply #quick_reply_submit {background:#414e59}
.fu-quick-reply #quickreply_multiquote {box-sizing:border-box;width:100%!important;margin-top:12px!important;padding:10px!important;background:#292f35;border:1px solid #414951}
@media(max-width:600px){.fu-thread-uploads{padding:12px}.fu-upload-table td:last-child{width:45%}.fu-upload-row-actions .button{padding:5px 8px}.fu-upload-size{display:block;margin:3px 0 0}}

.fu-edit-page .fu-editor-table tr[hidden] {display:none}
.fu-edit-delete form {padding:12px 0 0}
.fu-edit-delete input[type="submit"] {margin:12px 0 0 12px}
.fu-edit-page .fu-post-actions a.button {text-decoration:none}
/* Post actions */
#posts .fu-post-actions-bar {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;min-height:0;padding:10px 16px}
.fu-post-actions-bar .fu-post-primary {display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0;float:none;clear:none}
.fu-post-actions-bar .fu-post-primary form {margin:0!important}
.fu-post-actions-bar .fu-post-subscribe:empty,.fu-post-actions-bar .fu-post-admin:empty {display:none}
.fu-post-actions-bar .fu-post-admin {margin-left:auto}
.fu-post-actions-bar .fu-post-admin form {margin:0}
#posts .fu-post-actions-bar .fu-post-primary > a,
#posts .fu-post-actions-bar button,
#posts .fu-post-actions-bar input[type="submit"] {display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:32px;height:auto;margin:0;padding:6px 10px;background:#343c45;color:#edf1f5;border:1px solid #53606d;border-radius:3px;font:12px/1.4 Verdana,Arial,sans-serif;text-decoration:none;cursor:pointer;width:auto}
#posts .fu-post-actions-bar .fu-save-button svg {width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
#posts .fu-post-actions-bar .fu-save-button[aria-pressed="true"] svg {fill:currentColor;fill-opacity:.25}
#posts .fu-post-actions-bar button:hover,#posts .fu-post-actions-bar .fu-post-primary > a:hover {background:#44515e}
#posts .fu-post-actions-bar .postbit_multiquote_on {background:#485f76;border-color:#a8c5e1}
#posts .fu-post-actions-bar :focus-visible {outline:2px solid #9fc5ed;outline-offset:2px}

/* Home sidebar: only the member list scrolls. */
.futurum-right > .fu-rail-slot {
    box-sizing: border-box;
    flex: none;
}

@media (min-width: 701px) {
    .futurum-right > .fu-rail-slot {
        min-height: clamp(6rem, 14vh, 9rem);
    }
}

.fu-online-console h3 { text-transform: uppercase; }

.fu-online-console .fu-online-members {
    max-height: clamp(14rem, 42vh, 26rem);
    overflow-y: auto;
    scrollbar-width: none;
    margin: 0;
    padding: 0 12px;
    list-style: none;
    font: 12px/1.5 Verdana, Arial, sans-serif;
}

.fu-online-members > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
}

.fu-online-members > li + li {
    border-top: 1px solid #363c43;
}

.fu-online-members .fu-member-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fu-online-members .fu-member-status {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    color: #abb3bc;
    font-size: 11px;
}

.fu-online-members .fu-member-status::before {
    content: "";
    width: 6px;
    height: 6px;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.fu-online-members .is-online .fu-member-status { color: #a7c9b4; }
.fu-online-members .is-online .fu-member-status::before { background: currentColor; }
.fu-online-console :focus-visible { outline: 2px solid #a4b8cc; outline-offset: -2px; }

.fu-stream-files::-webkit-scrollbar,
.fu-online-console .fu-online-members::-webkit-scrollbar {
    display: none;
}

/* Each feed tab anchors its own sort dropdown. */
.fu-sstream-tabs { position: relative; z-index: 2; }
.fu-stream-feed { position: relative; min-width: 0; }
.fu-stream-feed > .fu-sstream-tab { box-sizing: border-box; height: 100%; }
.fu-stream-sort {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    min-height: 34px;
    padding: 3px 4px;
    border: 1px solid #41464c;
    border-top: 0;
    background: #282d33;
    box-shadow: 0 3px 5px #0003;
    font: 12px/1.5 Verdana, Arial, sans-serif;
}
.fu-stream-feed.is-current:hover > .fu-stream-sort,
.fu-stream-feed.is-current:focus-within > .fu-stream-sort { display: flex; }
.fu-stream-sort a {
    flex: 1;
    min-width: 0;
    padding: 3px 4px;
    text-align: center;
    color: #b6bec8;
    text-decoration: none;
}
.fu-stream-sort a:hover,
.fu-stream-sort a[aria-current] { color: #fff; background: #3a4149; }
.fu-stream-sort a:focus-visible { outline: 2px solid #bac5cf; outline-offset: -2px; }
@media (hover: none) {
    .fu-sstream-tabs { padding-bottom: 34px; }
    .fu-stream-sort { top: 100%; bottom: auto; }
    .fu-stream-feed.is-current > .fu-stream-sort { display: flex; }
    .fu-stream-feed.is-current:hover > .fu-stream-sort,
    .fu-stream-feed.is-current:focus-within > .fu-stream-sort { z-index: 1; }
}
@media (max-width: 600px) {
    .fu-stream-sort { font-size: 11px; }
}

.fu-stream-reactions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
}
.fu-stream-like button[data-reaction] { color: #b7c2ce !important; }
.fu-stream-like button[data-reaction] svg { fill: none; }
.fu-stream-like button[data-reaction="like"][aria-pressed="true"] { color: #d8b7c5 !important; }
.fu-stream-like button[data-reaction="dislike"][aria-pressed="true"] { color: #b7c2ce !important; }
.fu-stream-like button[data-reaction="like"][aria-pressed="true"] svg { fill: #f0d6e1; fill-opacity: .85; }
.fu-stream-like button[data-reaction="dislike"][aria-pressed="true"] svg { fill: currentColor; fill-opacity: .3; }
.fu-stream-reactions .fu-like-label {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.fu-stream-reactions .fu-like-status { grid-column: 1 / -1; }
.fu-stream-reactions .fu-like-status:empty { display: none; }

.fu-sstream .fu-deleted-post { display: block; padding: 20px; color: #b7c2ce; }
.fu-deleted-post td { padding: 14px; color: #b7c2ce; }

.fu-channel-picker { margin: 0 0 14px; }
.fu-channel-picker select { box-sizing: border-box; width: 100%; padding: 9px 10px; color: #e5ebef; background: #252a30; border: 1px solid #515a64; border-radius: 3px; font: 12px/1.5 Verdana, Arial, sans-serif; }
.fu-channel-picker > select { max-width: 420px; }
.fu-channel-picker fieldset { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.fu-channel-picker legend { padding: 0; color: #d7dee5; font: 600 12px/1.5 Verdana, Arial, sans-serif; }
.fu-channel-picker p { margin: 5px 0 9px; color: #abb7c3; font-size: 12px; }
.fu-sub-channels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.fu-channel-picker select:focus-visible { outline: 2px solid #a4b8cc; outline-offset: 2px; }
.fu-cross-listed { color: #aebbc7; font-size: 11px; font-weight: normal; }
@media (max-width: 600px) { .fu-sub-channels { grid-template-columns: minmax(0,1fr); } }

.fu-settings-native .fu-interests-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; border: 0; margin: 18px 0; padding: 0; min-width: 0; }
.fu-interests-grid label { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 42px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #414951; background: #252a30; cursor: pointer; }
.fu-interests-grid label span { overflow-wrap: anywhere; }
.fu-interests-grid input { flex: none; margin: 0; accent-color: #aebfcc; }
.fu-interests-grid label:has(:checked) { background: #303840; border-color: #758593; }
.fu-interests-grid label:has(:disabled) { opacity: .5; cursor: default; }
.fu-interests-grid label:focus-within { outline: 2px solid #a4b8cc; outline-offset: 2px; }
.fu-interests-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fu-interests-actions output { color: #b7c2ce; margin-right: auto; }
.fu-interests-actions .button { padding: 8px 14px; font: 600 12px/1.5 Verdana,Arial,sans-serif; cursor: pointer; }
.fu-interests-error { color: #e2afb5; }
.fu-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* Moderator workspace: scoped to Mod CP, with native forms and permission checks. */
.fu-modcp-page .fu-modcp-layout { display: block; width: 100%; border: 0; margin: 18px 0 0; border-spacing: 0; font: 12px/1.6 Verdana,Arial,sans-serif; color: #e2e8ed; }
.fu-modcp-layout > tbody { display: block; }
.fu-modcp-layout > tbody > tr { display: grid; grid-template-columns: 240px minmax(0,1fr); align-items: start; gap: 18px; }
.fu-modcp-layout > tbody > tr > td { display: block; min-width: 0; padding: 0; border: 0; }
.fu-modcp-nav { background: #202429; border: 1px solid #41474e; padding: 0 12px 12px; }
.fu-modcp-nav h2 { margin: 0 -12px 10px; padding: 11px 14px; background: #343940; border-bottom: 1px solid #41474e; font: 700 13px/1.5 Verdana,Arial,sans-serif; }
.fu-modcp-nav a { display: flex; align-items: center; gap: 12px; padding: 11px; color: #dbe3ea; text-decoration: none; }
.fu-modcp-nav a:hover { background: #2b3036; color: #fff; }
.fu-modcp-nav a[aria-current="page"] { background: #343b43; color: #fff; }
.fu-modcp-nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fu-modcp-layout a:focus-visible, .fu-modcp-layout summary:focus-visible, .fu-modcp-layout button:focus-visible { outline: 2px solid #a4b8cc; outline-offset: 2px; }
.fu-modcp-title { margin: 0 0 16px; }
.fu-modcp-title h1 { margin: 0 0 3px; font: 700 20px/1.4 Verdana,Arial,sans-serif; }
.fu-modcp-title p { margin: 0; color: #aebbc7; }
.fu-modcp-panel { margin: 0 0 16px; border: 1px solid #41474e; background: #202429; }
.fu-modcp-panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 11px 14px; background: #343940; border-bottom: 1px solid #41474e; }
.fu-modcp-panel h2 { margin: 0; font: 700 13px/1.5 Verdana,Arial,sans-serif; }
.fu-modcp-panel-heading a { font-size: 11px; }
.fu-modcp-work { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: #41474e; }
.fu-modcp-work-item { display: flex; align-items: center; gap: 14px; padding: 16px; background: #202429; color: #dfe7ee; text-decoration: none; }
.fu-modcp-work-item:hover { background: #292f35; color: #fff; }
.fu-modcp-work-item strong { font-size: 22px; line-height: 1; min-width: 1.5em; }
.fu-modcp-work-item > :last-child { margin-left: auto; color: #aebbc7; }
.fu-modcp-hint { margin: 0; padding: 12px 14px; color: #aebbc7; }
.fu-modcp-empty { grid-column: 1/-1; margin: 0; padding: 16px; background: #202429; color: #aebbc7; }
.fu-modcp-member { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 12px 14px; border-top: 1px solid #383f46; }
.fu-modcp-member small { display: block; margin-top: 3px; color: #aebbc7; font-size: 11px; }
.fu-modcp-layout .button { box-sizing: border-box; padding: 7px 12px; border: 1px solid #58636d; border-radius: 2px; background: #343c45; color: #f0f3f6; font: 600 11px/1.5 Verdana,Arial,sans-serif; text-decoration: none; cursor: pointer; }
.fu-modcp-notes summary { padding: 11px 14px; background: #343940; cursor: pointer; font-weight: bold; }
.fu-modcp-notes form { padding: 14px; border-top: 1px solid #41474e; }
.fu-modcp-notes label { display: block; color: #aebbc7; }
.fu-modcp-notes textarea { display: block; box-sizing: border-box; width: 100%; min-height: 130px; resize: vertical; margin: 10px 0; padding: 10px; }
.fu-modcp-table-scroll { overflow-x: auto; }
.fu-modcp-layout .tborder { width: 100%; border: 1px solid #41474e; border-radius: 0; border-collapse: collapse; border-spacing: 0; }
.fu-modcp-layout .tborder td, .fu-modcp-layout .tborder th { padding: 10px 12px; border: 0; border-bottom: 1px solid #383f46; color: #dce5ed; font: 12px/1.6 Verdana,Arial,sans-serif; overflow-wrap: anywhere; }
.fu-modcp-layout .tborder .thead { background: #343940; text-align: left; font-weight: bold; }
.fu-modcp-layout .tborder .tcat { background: #272d33; font-size: 11px; text-align: left; }
.fu-modcp-layout .smalltext { font: 11px/1.5 Verdana,Arial,sans-serif; }
.fu-modcp-panel .fu-modcp-action-table { border: 0; min-width: 500px; }
.fu-modcp-layout .trow1, .fu-modcp-layout .trow2 { background: #202429; }
.fu-modcp-layout input.textbox, .fu-modcp-layout select, .fu-modcp-layout textarea { box-sizing: border-box; max-width: 100%; background: #242a30; color: #e1e8ef; border: 1px solid #525e68; border-radius: 2px; padding: 7px 9px; font: 12px/1.5 Verdana,Arial,sans-serif; }
@media (max-width: 900px) {
  .fu-modcp-layout > tbody > tr { grid-template-columns: 190px minmax(0,1fr); gap: 14px; }
}
@media (max-width: 700px) {
  .fu-modcp-layout > tbody > tr { grid-template-columns: minmax(0,1fr); }
  .fu-modcp-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; }
  .fu-modcp-nav h2 { grid-column: 1/-1; }
  .fu-modcp-nav a { padding: 10px 6px; gap: 8px; }
  .fu-modcp-work-item { padding: 12px; gap: 8px; }
  .fu-modcp-work-item strong { font-size: 20px; }
  .fu-modcp-layout .tborder td, .fu-modcp-layout .tborder th { padding: 8px 6px; font-size: 11px; }
  .fu-modcp-page #content { min-width: 0; }
}

.fu-modcp-layout a.button:link, .fu-modcp-layout a.button:visited, .fu-modcp-layout a.button:hover, .fu-modcp-layout button.button, .fu-modcp-layout input.button { display: inline-block; padding: 7px 12px; border: 1px solid #58636d; border-radius: 2px; background: #343c45; color: #f0f3f6; font: 600 11px/1.5 Verdana,Arial,sans-serif; text-shadow: none; text-decoration: none; box-shadow: none; }
.fu-modcp-layout a.button:hover, .fu-modcp-layout button.button:hover, .fu-modcp-layout input.button:hover { background: #424d58; border-color: #7a8997; }
.fu-modcp-action-table th { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 480px) { .fu-modcp-work { grid-template-columns: minmax(0,1fr); } }

/* Moderation member roles and approval status. */
.fu-modcp-panel .fu-modcp-members-heading { margin: 0; font: 700 14px/1.5 Verdana,Arial,sans-serif; }
.fu-modcp-member-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px; border-top: 1px solid #383f46; }
.fu-modcp-member-search label { display: block; min-width: 0; color: #b7c2ce; font-size: 11px; }
.fu-modcp-member-search label:first-of-type { flex: 1 1 180px; }
.fu-modcp-member-search input, .fu-modcp-member-search select { display: block; box-sizing: border-box; width: 100%; margin-top: 5px; background: #242a30; color: #e1e8ef; border: 1px solid #525e68; padding: 7px 9px; font: 12px/1.5 Verdana,Arial,sans-serif; }
.fu-modcp-layout .fu-modcp-members-table { border-width: 1px 0 0; }
.fu-modcp-members-table td:first-child { font-weight: bold; }
.fu-modcp-pending-flag { display: block; width: fit-content; padding: 2px 7px; margin-top: 5px; color: #e2d3ac; background: #36342d; border: 1px solid #5b5545; font: 11px/1.5 Verdana,Arial,sans-serif; }
.fu-modcp-role-form { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0; }
.fu-modcp-role-form select { flex: 1 1 130px; min-width: 0; }
.fu-modcp-role-form .button { flex: none; white-space: nowrap; margin: 0; }
.fu-modcp-role-readonly { color: #aebbc7; font-size: 11px; }
.fu-modcp-feedback { margin: 0; padding: 12px 14px; color: #c9dfca; background: #28342b; border-block: 1px solid #475a4a; }
.fu-modcp-layout .fu-modcp-members-table th { white-space: nowrap; }
@media (max-width: 1050px) {
  .fu-modcp-members-table, .fu-modcp-members-table > tbody { display: block; }
  .fu-modcp-members-table .fu-modcp-member-columns { display: none; }
  .fu-modcp-members-table .fu-modcp-member-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 10px; border-bottom: 1px solid #41474e; }
  .fu-modcp-layout .fu-modcp-member-row > td { display: block; border: 0; min-width: 0; padding: 7px; }
  .fu-modcp-member-row > td:first-child, .fu-modcp-member-row > td:last-child { grid-column: 1/-1; }
  .fu-modcp-member-row > td:not(:first-child)::before { display: block; content: attr(data-label); color: #98a6b3; font-size: 10px; font-weight: normal; margin-bottom: 4px; }
}
@media (max-width: 1050px) { .fu-modcp-members-table .fu-modcp-member-row { background: #202429; } }