/* ════════════════════════════════════════════
   TSSFL Forum — Custom Design
   Header Format = Sitename and Description Only
   Logo Position  = Left
   ════════════════════════════════════════════ */

/* ── Navbar background ── */
.navbar {
    background-color: #0d1117 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── Top-level nav links — font, colour, position ── */
#nav-main.linklist > li:not(.rightside) > a,
#nav-main.linklist > li:not(.rightside) > div > a {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: rgba(255,255,255,0.82) !important;
    position: relative !important;
    padding-bottom: 3px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
#nav-main.linklist > li:not(.rightside) > a:hover,
#nav-main.linklist > li:not(.rightside) > div > a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* ── Tricolor underline — slides in from left on hover ── */
#nav-main.linklist > li:not(.rightside) > a::after,
#nav-main.linklist > li:not(.rightside) > div > a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #096EFF, #f59e0b, #10B981) !important;
    border-radius: 1px !important;
    transition: width 0.28s ease !important;
}
#nav-main.linklist > li:not(.rightside) > a:hover::after,
#nav-main.linklist > li:not(.rightside) > div > a:hover::after {
    width: 100% !important;
}

/* ── Nav icons — tricolor tint on hover ── */
#nav-main.linklist > li:not(.rightside) > a:hover i.icon,
#nav-main.linklist > li:not(.rightside) > div > a:hover i.icon {
    background: linear-gradient(135deg, #096EFF 20%, #f59e0b 60%, #10B981 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── ACP / MCP — amber icon tint on hover ── */
#nav-main.linklist > li > a[href*="adm"]:hover i.icon,
#nav-main.linklist > li > a[href*="mcp"]:hover i.icon {
    background: none !important;
    -webkit-text-fill-color: #f59e0b !important;
    color: #f59e0b !important;
}

/* ── Pages ext — kill white background-image squares ── */
li.icon-pages,
li.icon-page-site-map,
li.icon-page-About-Us {
    background-image: none !important;
    background: none !important;
}

/* ── All Forums — 3×2 block grid icon ── */
li.icon-page-site-map > a {
    display: flex !important;
    align-items: center !important;
}
li.icon-page-site-map > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 11px !important;
    margin-right: 7px !important;
    flex-shrink: 0 !important;
    background:
        linear-gradient(#096EFF,#096EFF)  0px 0    / 4px 4px no-repeat,
        linear-gradient(#f59e0b,#f59e0b)  5px 0    / 4px 4px no-repeat,
        linear-gradient(#10B981,#10B981) 10px 0    / 4px 4px no-repeat,
        linear-gradient(#096EFF,#096EFF)  0px 7px  / 4px 4px no-repeat,
        linear-gradient(#f59e0b,#f59e0b)  5px 7px  / 4px 4px no-repeat,
        linear-gradient(#10B981,#10B981) 10px 7px  / 4px 4px no-repeat !important;
    border-radius: 1px !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s ease !important;
}
li.icon-page-site-map > a:hover::before { opacity: 1 !important; }

/* ── About Us — info icon ── */
li.icon-page-About-Us > a {
    display: flex !important;
    align-items: center !important;
}
li.icon-page-About-Us > a::before {
    font-family: FontAwesome !important;
    content: "\f05a" !important;
    margin-right: 6px !important;
    font-size: 0.85em !important;
    color: #096EFF !important;
    -webkit-text-fill-color: #096EFF !important;
    transition: color 0.2s ease, -webkit-text-fill-color 0.2s ease !important;
}
li.icon-page-About-Us > a:hover::before {
    color: #10B981 !important;
    -webkit-text-fill-color: #10B981 !important;
}

/* ── Dropdown outer wrapper ── */
#nav-main li.dropdown-container .dropdown,
#quick-links .dropdown {
    border-radius: 12px !important;
    min-width: 210px !important;
}

/* ── Dropdown inner card — milk/light background ── */
#nav-main .dropdown .dropdown-contents {
    background: #f7f8fa !important;
    border-color: rgba(0,0,0,0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* ── Footer responsive dropdown — same card as Quick Links ── */
#nav-footer li.responsive-menu .dropdown {
    border-radius: 12px !important;
    min-width: 210px !important;
}
#nav-footer li.responsive-menu .dropdown-contents {
    background: #f7f8fa !important;
    border-color: rgba(0,0,0,0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 -10px 32px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08) !important;
    padding: 6px !important;
    overflow: hidden !important;
}
/* Timezone — muted label row */
#nav-footer li.responsive-menu .dropdown-contents > li:first-child {
    padding: 8px 14px 6px !important;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: #9ca3af !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    margin-bottom: 4px !important;
}
/* Links */
#nav-footer li.responsive-menu .dropdown-contents li a {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #1a202c !important;
    padding: 9px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 7px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    text-decoration: none !important;
}
#nav-footer li.responsive-menu .dropdown-contents li a:hover {
    background: rgba(9,110,255,0.07) !important;
    color: #096EFF !important;
    text-decoration: none !important;
}
/* Icons base */
#nav-footer li.responsive-menu .dropdown-contents li a i.icon {
    font-size: 0.95em !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease !important;
}
/* Delete cookies — amber trash */
#nav-footer li.responsive-menu .dropdown-contents li a .fa-trash {
    color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important;
}
/* Privacy — blue lock */
#nav-footer li.responsive-menu .dropdown-contents li a .fa-lock {
    color: #096EFF !important; -webkit-text-fill-color: #096EFF !important;
}
/* Terms — green check */
#nav-footer li.responsive-menu .dropdown-contents li a .fa-check {
    color: #10B981 !important; -webkit-text-fill-color: #10B981 !important;
}
/* Members — amber group */
#nav-footer li.responsive-menu .dropdown-contents li a .fa-group {
    color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important;
}
/* Team — blue shield */
#nav-footer li.responsive-menu .dropdown-contents li a .fa-shield {
    color: #096EFF !important; -webkit-text-fill-color: #096EFF !important;
}
/* Contact — green envelope */
#nav-footer li.responsive-menu .dropdown-contents li a .fa-envelope {
    color: #10B981 !important; -webkit-text-fill-color: #10B981 !important;
}
/* Watch forum — blue square */
#nav-footer li.responsive-menu .dropdown-contents li a .fa-check-square-o,
#nav-footer li.responsive-menu .dropdown-contents li a .fa-square-o {
    color: #096EFF !important; -webkit-text-fill-color: #096EFF !important;
}

/* ── Pointer triangle ── */
#nav-main .dropdown .pointer { border-color: rgba(0,0,0,0.12) transparent !important; }
#nav-main .dropdown .pointer-inner { border-color: #f7f8fa transparent !important; }

/* ── Dropdown items ── */
#quick-links .dropdown-contents li a {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #1a202c !important;
    padding: 9px 18px 9px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 7px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    text-decoration: none !important;
}
#quick-links .dropdown-contents li a:hover {
    background: rgba(9,110,255,0.07) !important;
    color: #096EFF !important;
    text-decoration: none !important;
}

/* ── Dropdown item icons — base ── */
#quick-links .dropdown-contents li a i.icon {
    font-size: 0.95em !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    -webkit-text-fill-color: currentColor !important;
    transition: color 0.15s ease !important;
}

/* ── Unique icon + color per item ── */

/* Your posts — user, blue */
#quick-links .dropdown i.fa-map-marker::before {
    content: "\f007" !important; font-family: FontAwesome !important;
}
#quick-links .dropdown-contents li:nth-child(2) i.icon {
    color: #096EFF !important; -webkit-text-fill-color: #096EFF !important;
}

/* New posts — plus-circle, green */
#quick-links .dropdown i.fa-file-o:first-of-type::before,
#quick-links .dropdown-contents li:nth-child(3) i.icon::before {
    content: "\f055" !important; font-family: FontAwesome !important;
}
#quick-links .dropdown-contents li:nth-child(3) i.icon {
    color: #10B981 !important; -webkit-text-fill-color: #10B981 !important;
}

/* Unread posts — envelope-o, amber */
#quick-links .dropdown-contents li:nth-child(4) i.icon::before {
    content: "\f003" !important; font-family: FontAwesome !important;
}
#quick-links .dropdown-contents li:nth-child(4) i.icon {
    color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important;
}

/* Unanswered topics — question-circle, amber */
#quick-links .dropdown-contents li:nth-child(5) i.icon::before {
    content: "\f059" !important; font-family: FontAwesome !important;
}
#quick-links .dropdown-contents li:nth-child(5) i.icon {
    color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important;
}

/* Active topics — fire, blue */
#quick-links .dropdown-contents li:nth-child(6) i.icon::before {
    content: "\f06d" !important; font-family: FontAwesome !important;
}
#quick-links .dropdown-contents li:nth-child(6) i.icon {
    color: #096EFF !important; -webkit-text-fill-color: #096EFF !important;
}

/* Search — keep fa-search, blue */
#quick-links .dropdown i.fa-search {
    color: #096EFF !important; -webkit-text-fill-color: #096EFF !important;
}

/* Members — fa-group, green */
#quick-links .dropdown i.fa-group {
    color: #10B981 !important; -webkit-text-fill-color: #10B981 !important;
}

/* The team — fa-shield, amber */
#quick-links .dropdown i.fa-shield {
    color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important;
}

/* Dropdown separator */
#nav-main .dropdown-contents li.separator {
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    margin: 4px 0 !important;
}

/* Rightside trigger links (bell, PM, avatar button) — stay white on dark navbar */
#nav-main li.rightside > a,
#nav-main li.rightside > div > a.dropdown-trigger {
    color: rgba(255,255,255,0.82) !important;
    text-decoration: none !important;
}

/* ── Register / Login — tricolor underline inside pill (hover only) ── */
#nav-main li.rightside > a.outline_button {
    position: relative !important;
}
#nav-main li.rightside > a.outline_button::after {
    content: "" !important;
    position: absolute !important;
    bottom: 3px !important;
    left: 10px !important;
    right: 10px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #096EFF 0%, #f59e0b 50%, #10B981 100%) !important;
    border-radius: 1px !important;
    opacity: 0 !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: opacity 0.22s ease, transform 0.25s ease !important;
}
#nav-main li.rightside > a.outline_button:hover::after {
    opacity: 0.9 !important;
    transform: scaleX(1) !important;
}

/* ── Navbar header-avatar — flex row for letter avatar + username ── */
a.header-avatar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
a.header-avatar .tssfl-av-letter,
a.header-avatar .tssfl-av-wordmark {
    flex-shrink: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

/* ── User profile dropdown — light card, dark text ── */
#username_logged_in .dropdown-contents li a {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #1a202c !important;
    padding: 9px 18px 9px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 7px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    text-decoration: none !important;
}
#username_logged_in .dropdown-contents li a:hover {
    background: rgba(9,110,255,0.07) !important;
    color: #096EFF !important;
    text-decoration: none !important;
}

/* Profile item icons */
#username_logged_in .dropdown-contents li a i.icon {
    font-size: 0.95em !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease !important;
}

/* fa-sliders → Profile settings — blue */
#username_logged_in .dropdown i.fa-sliders {
    color: #096EFF !important; -webkit-text-fill-color: #096EFF !important;
}
/* fa-user → View profile — green */
#username_logged_in .dropdown i.fa-user {
    color: #10B981 !important; -webkit-text-fill-color: #10B981 !important;
}
/* fa-power-off → Logout — amber */
#username_logged_in .dropdown i.fa-power-off {
    color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important;
}
/* fa-refresh → Restore permissions — muted */
#username_logged_in .dropdown i.fa-refresh {
    color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important;
}

/* ── Dark header background ── */
.headerbar { background: #0d1117 !important; }
.forum_header {
    background: #0d1117 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    height: 120px !important;
}

/* ── particles_container: reset merlin.css hacks ── */
.particles_container {
    overflow: visible !important;
    font-size: 1rem !important;
    text-align: left !important;
}

/* ── #site-description margins drive the dark strip height ──
   top=14px, bottom=80px → headerbar grows to fit content + margins.
   Navbar height ≈ 44px; bottom > top + 44 keeps text visually centred
   across the combined dark area.                                      ── */
body.navbar_o_header .site-description,
body.navbar_o_header .site-description.logo_left,
body.navbar_i_header .site-description,
body.navbar_i_header .site-description.logo_left,
#site-description {
    margin: 0 !important;
    float: none !important;
    position: static !important;
}

/* ── #site-description: flex row — wordmark then tagline, same line ── */
#site-description.site-description {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2.5rem !important;
    width: 100% !important;
    margin-bottom: 80px !important;
    box-sizing: border-box !important;
}

/* ── h1: tricolor gradient wordmark ── */
#site-description h1 {
    position: relative !important;
    padding: 0 0 0 76px !important;
    margin: 0 !important;
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    background-image: linear-gradient(90deg, #096EFF, #f59e0b, #10B981, #096EFF) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: tssfl-grad 6s ease-in-out infinite alternate !important;
}

/* Three colour bars left of wordmark ── */
#site-description h1::before {
    content: "" !important;
    position: absolute !important;
    left: 48px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 0.72em !important;
    border-radius: 2px !important;
    background:
        linear-gradient(#096EFF, #096EFF)   0px 0 / 4px 100% no-repeat,
        linear-gradient(#f59e0b, #f59e0b)   8px 0 / 4px 100% no-repeat,
        linear-gradient(#10B981, #10B981)  16px 0 / 4px 100% no-repeat !important;
}

/* ── p: tagline — same line, right of wordmark ── */
#site-description p {
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.07em !important;
    background-image: linear-gradient(90deg, #096EFF, #f59e0b, #10B981, #096EFF) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: tssfl-tag 6s ease-in-out infinite alternate !important;
}

/* ── Suppress duplicate .tssfl-tagline ── */
.tssfl-tagline { display: none !important; }

/* ── Hide custom logo img ── */
img.custom_logo { display: none !important; }

/* ── Header logo: mobile responsive ── */
@media (max-width: 640px) {
    #site-description.site-description {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin-bottom: 60px !important;
    }
    #site-description h1 {
        font-size: 1.3rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        padding-left: 32px !important;
        flex-shrink: 1 !important;
    }
    #site-description h1::before {
        left: 6px !important;
    }
    #site-description p {
        font-size: 0.78rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        padding-left: 0 !important;
    }
}

/* ── Gradient keyframes ── */
@keyframes tssfl-grad {
    0%   { background-position: 0%   center; }
    100% { background-position: 300% center; }
}
@keyframes tssfl-tag {
    0%   { background-position: 0%   center; }
    100% { background-position: 300% center; }
}

/* ── Navbar right-side icons: PM envelope + bell + spacing ── */

/* Size the inline SVG envelope to match FA icon height */
.tssfl-pm-icon {
    height: 1.1em !important;
    width: auto !important;
    vertical-align: middle !important;
}

/* Bell — brand blue with soft glow, baseline aligned with envelope */
#notification_list_button .icon.fa-bell {
    color: #096EFF !important;
    filter: drop-shadow(0 0 5px rgba(9,110,255,0.60)) !important;
    font-size: 1.1em !important;
    vertical-align: -0.18em !important;
}

/* Equal icon→badge gap: flex the anchor, collapse the   */
li.tssfl-pm-li > a,
#notification_list_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
/* Envelope gets 3px extra breathing room before its badge */
li.tssfl-pm-li > a {
    gap: 9px !important;
}
li.tssfl-pm-li > a > span,
#notification_list_button > span {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Badge: pill expands with content (1 → 1000+), white text, px size so it
   survives the parent font-size:0 on its wrapping span */
#nav-main li.rightside .badge,
#nav-main .dropdown-container.rightside .badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    line-height: 1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-left: 0 !important;
}

/* Icon group layout: separator before Profile */
li.tssfl-pm-li {
    padding-right: 18px !important;
    margin-right: 24px !important;
    border-right: 1px solid rgba(255,255,255,0.18) !important;
}

/* Gap between bell group and envelope group */
#nav-main .dropdown-container.rightside[data-skip-responsive] {
    margin-right: 22px !important;
}

/* ── Post avatar: breathing room between circle and username below ── */
dl.postprofile dt div.avatar-container {
    margin-bottom: 10px !important;
}

/* ── Global font ── */
body, .topictitle, .forumtitle, h2, h3 {
    font-family: "Space Grotesk", "Inter", sans-serif;
}

/* ── Post body text and textarea: Inter 16.5px ── */
.postbody .content,
textarea#message {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 18px !important;
}

/* ── Forum grid icon: dark circle + tricolor bars ──
   :not([style]) targets tiles with no custom forum image (no inline background).
   SVG draws rounded bars (7×26px, rx=3) centred in 48px circle.
   padding-left override removes merlin.css 84px push; gap handles spacing.  ── */
.forumlist_grid_icons .tile_row_1.tile_has_icon:not([style]) {
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-left: 0 !important;
    min-height: 48px !important;
}
.forumlist_grid_icons .tile_row_1.tile_has_icon:not([style])::before {
    content: "" !important;
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background-color: #0d1117 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='9' y='11' width='7' height='26' rx='3' fill='%23096EFF'/%3E%3Crect x='20' y='11' width='7' height='26' rx='3' fill='%23f59e0b'/%3E%3Crect x='31' y='11' width='7' height='26' rx='3' fill='%2310B981'/%3E%3C/svg%3E") !important;
    background-size: 48px 48px !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
}

/* ── Flush content to bottom of dark strip — remove inner-wrap top gap ── */
#inner-wrap { padding-top: 0 !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; }
ul#nav-breadcrumbs { margin-top: 0 !important; }

/* ── Mild panel depth refinement — Light base, targeted depth ──
   Page bg darkens slightly so white cards have visible contrast.
   Cards get shadow elevation instead of flat border.            ── */

html { background-color: #e0e6ee !important; }

/* Forum grid cards — shadow-elevated, rounded, no flat border */
.grid_image_container {
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.07),
        0 4px 14px rgba(0,0,0,0.06) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.grid_image_container:hover {
    transform: scale(1.03) !important;
    box-shadow:
        0 4px 8px rgba(0,0,0,0.09),
        0 8px 24px rgba(0,0,0,0.10) !important;
}

/* Panels (info blocks, post content, UCP) — barely-blue off-white */
.panel { background-color: #f7f9fb !important; }

/* ── Dark footer — mirrors header ── */
.navbar_footer {
    background-color: #0d1117 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}
#nav-footer.linklist > li > a,
.navbar_footer a {
    color: rgba(255,255,255,0.75) !important;
    transition: color 0.18s ease !important;
}
#nav-footer.linklist > li > a:hover,
.navbar_footer a:hover {
    color: #f59e0b !important;
}
/* ── Footer desktop icons — per-item brand colors ── */
#nav-footer .fa-envelope  { color: #10B981 !important; -webkit-text-fill-color: #10B981 !important; }
#nav-footer .fa-shield    { color: #096EFF !important; -webkit-text-fill-color: #096EFF !important; }
#nav-footer .fa-check     { color: #10B981 !important; -webkit-text-fill-color: #10B981 !important; }
#nav-footer .fa-lock      { color: #096EFF !important; -webkit-text-fill-color: #096EFF !important; }
#nav-footer .fa-group     { color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important; }
#nav-footer .fa-trash     { color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important; }
#nav-footer .fa-home      { color: #096EFF !important; -webkit-text-fill-color: #096EFF !important; }
/* All icons glow amber on hover */
#nav-footer a:hover i.icon {
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
}
.copyright_bar {
    background-color: #0d1117 !important;
    color: rgba(255,255,255,0.4) !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}
.copyright_bar a {
    color: rgba(255,255,255,0.6) !important;
}
.copyright_bar a:hover {
    color: #096EFF !important;
}
.copyright_bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    padding: 8px 16px !important;
}
/* Logo: pulled out of flow and pinned to true centre of the bar */
.copyright_bar > a:first-child {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Footer logo SVG — responsive scaling */
.copyright_bar > a:first-child {
    max-width: 100% !important;
}
.copyright_bar > a:first-child svg {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
}

/* Mobile: stack logo above social icons, no overlap */
@media (max-width: 640px) {
    .copyright_bar {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        padding: 18px 16px 20px !important;
    }
    .copyright_bar > a:first-child {
        position: static !important;
        transform: none !important;
        width: 100% !important;
    }
}


/* ── Topic/Sticky/Announce/Global post icons: tricolor gradient disc ── */
.topic_read { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.topic_read_hot { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.topic_read_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.topic_read_hot_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.topic_read_locked { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.topic_read_locked_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
.topic_unread { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.topic_unread_hot { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.topic_unread_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.topic_unread_hot_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.topic_unread_locked { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.topic_unread_locked_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
.sticky_read { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.sticky_read_hot { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.sticky_read_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.sticky_read_hot_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.sticky_read_locked { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.sticky_read_locked_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
.sticky_unread { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.sticky_unread_hot { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.sticky_unread_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.sticky_unread_hot_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.sticky_unread_locked { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.sticky_unread_locked_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
.announce_read { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.announce_read_hot { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.announce_read_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.announce_read_hot_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.announce_read_locked { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.announce_read_locked_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
.announce_unread { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.announce_unread_hot { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.announce_unread_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.announce_unread_hot_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.announce_unread_locked { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.announce_unread_locked_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
.global_read { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.global_read_hot { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.global_read_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.global_read_hot_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.global_read_locked { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.global_read_locked_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
.global_unread { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.global_unread_hot { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
.global_unread_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.global_unread_hot_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.global_unread_locked { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
.global_unread_locked_mine { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
.topic_moved { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iNyIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC4zNSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }

/* ── Topic list icon: li.row::before, aligned to the TITLE line (see below) ── */
ul.topiclist .row-item:before  { display: none !important; }
ul.topiclist .row-item:after   { display: none !important; }
ul.topiclist dl.row-item       { background-image: none !important; }
ul.topiclist li.row            { position: relative !important; background-image: none !important; }
/* ── li.row::after is two different things depending on the row:
   - on ordinary rows it is prosilver's clearfix (content:" "; display:table;
     position:static, 0x0) and the offsets below are inert;
   - on *_mine rows (icons_forums_topics.css:262) it is the "you posted here" dot —
     position:absolute, 6x6 + 2px white border — and the offsets below DO apply.
   It must track the icon. The icon is now pinned at top:11px (see below) instead of
   being centred, so calc(50% - 18px) would leave the dot drifting down with row
   height, detached from the icon. Back to a fixed offset: 3px above the icon's top
   edge and 3px left of its right edge (icon now spans 12-42px), straddling its
   top-right corner. ── */
ul.topiclist li.row::after     { top: 8px !important; left: 39px !important; }
/* ── Gutter before the topic text. MIND THE ARITHMETIC: this padding is measured
   from the dl, which itself starts at li.row's padding-left (12px), so text really
   begins at 12 + 42 = 54px from the row's left edge — not 42px. An earlier version
   of this comment missed that 12px and claimed a 9px icon->text gap.
   Gutter is 54px, icon is 30px, so left = (54-30)/2 = 12px: symmetric (12px each
   side) AND flush with li.row's own 12px padding edge. If you change this padding,
   re-derive the icon left and move its dot and hit area with it. ── */
ul.topiclist dl.row-item dt .list-inner { padding-left: 42px !important; }
/* Icon vertical alignment — fixed offset, NOT top:50%.
   Rows are no longer a predictable height: 1 line (Watched Forums), 2 lines
   (title + byline), or 3 (title + byline + pagination). top:50% centred the icon
   on the whole stack, so it drifted downward as rows grew — measured row centres
   of 40.0 / 41.3 / 44.9 / 45.1px across pages.
   The TITLE line, by contrast, sits at a constant height on every list, so anchor
   to that instead — specifically to its CAP-HEIGHT band, not its glyph ink.
   That distinction matters. Glyph ink is content-dependent: on viewforum the
   baseline is a constant 32.0px and cap-height a constant 12.0px, but the ink
   centre lands at 26.0px for "Hello World" and 28.0px for "Lectures on Linear
   Algebra" — a 2px swing depending purely on whether a title happens to contain a
   descender (g/p/y/q). Chasing ink can therefore never be stable. The cap band is:
   centre = baseline - capHeight/2 = 32 - 6 = 26.0px, identical for every title and
   for the uppercase UCP lists too.
   Icon is 30px tall and its containing block is li.row (position:relative), whose
   padding-box top == border-box top, so top = 26 - 15 = 11px.
   A 2px lift (top:9px) was tried and reverted: it was calibrated on the UCP lists,
   whose titles are uppercase and so never have descenders, and it read ~4px too
   high on any mixed-case viewforum title that did. Do not re-introduce it.
   Keep this global — a per-list offset would put the Watched Forums icons out of
   step with the Watched Topics icons stacked directly below them on the same page. */
ul.topiclist li.row::before    {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 12px !important;
    top: 11px !important;
    transform: none !important;
    width: 30px !important;
    height: 30px !important;
    background-size: 30px 30px !important;
    background-repeat: no-repeat !important;
}
/* Keep the unread "jump to newest post" click target on top of the icon.
   a.row-item-link is a 34x34 hit area over the icon (content.css:185), and its
   containing block is dl.row-item — NOT li.row — because ul.topiclist dl is
   position:relative. dl starts at li.row's padding-top (15px), so content.css's
   top:22px/margin-top:-15px pinned its centre at a fixed 15+7+17 = 39px from the
   row top, independent of row height. That only coincided with the old top:50%
   icon on ~80px rows; on a 90px row they were already 6px apart.
   Positioning stays on the existing element, so the containing block is unchanged
   — this is deliberately NOT a position:relative on dt, which is what previously
   detached this overlay and produced phantom squares.
   li.row is a single global rule (content.css:112, padding:15px 12px), so the dl's
   inset is a constant 15px top / 12px left on every topiclist site-wide and these
   fixed offsets are safe.
   Vertical:   icon centre 26px from row top = 11px from dl top, less half of 34px.
   Horizontal: icon spans 12-42px from row left, centre 27px; dl starts at 12px,
               so left = 27 - 17 - 12 = -2px. (content.css's margin-left:11px put the
               target at 23-57px — covering only part of the icon and overlapping
               the title text to its right.)
   KNOWN LIMIT — 5px dead zone at the top of the icon. dl.row-item is BOTH the
   containing block AND overflow:hidden, so the overlay is clipped to the dl. The dl
   starts at li.row's padding-top — 15px declared, but it measures 16px on the UCP
   lists — while the icon spans 11-41px. Probing pixel-by-pixel down the icon's
   centre line on Manage subscriptions, the first clickable row is y=16, so the
   icon's top 5px (17% of it) has no click response; it is 4px where the dl lands
   at 15px. The centre and remaining 83% work, and the adjacent title
   link covers the same intent, so this is ACCEPTED, DOCUMENTED, DEFERRED behaviour.
   Two "obvious" fixes are dead ends — do not spend time on them again:
   1. overflow-x:hidden + overflow-y:visible does NOT work. Per CSS, when one axis is
      not visible the other's `visible` computes to `auto`, which still clips.
      Measured live on this page: computed x/y came back hidden/auto and the first
      clickable pixel stayed at 16. Only visible/visible releases it (drops to 11),
      i.e. removing the clipping altogether.
   2. No offset within the dl can reach above the dl's own top edge. The title's cap
      centre is at 26px, so a 30px icon centred on it MUST span 11-41 and necessarily
      pokes 5px above the dl. Moving the icon into the dl hits the identical clip.
   The only working fix is markup: hoist a.row-item-link out of the <dl> to be a
   direct child of <li class="row">, changing its containing block to li.row. That
   means editing viewforum_body.html, ucp_main_subscribed.html, search_results.html
   et al and diverging from stock phpBB row structure — judged not worth it for 5px.
   And do NOT "fix" it by removing that overflow or by positioning dt: the latter
   detaches this overlay and produces a phantom square on every row site-wide. */
ul.topiclist li.row dl.row-item a.row-item-link {
    top: 11px !important;
    margin-top: -17px !important;
    left: 0 !important;
    margin-left: -2px !important;
}
ul.topiclist li.row.topic_read::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_read_hot::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_read_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_read_hot_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_read_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_read_locked_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_unread::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_unread_hot::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_unread_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_unread_hot_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_unread_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_unread_locked_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_read::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_read_hot::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_read_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_read_hot_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_read_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_read_locked_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_unread::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_unread_hot::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_unread_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_unread_hot_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_unread_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.sticky_unread_locked_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_read::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_read_hot::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_read_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_read_hot_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_read_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_read_locked_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_unread::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_unread_hot::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_unread_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_unread_hot_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_unread_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.announce_unread_locked_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_read::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_read_hot::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_read_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_read_hot_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_read_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_read_locked_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_unread::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_unread_hot::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_unread_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_unread_hot_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAuNSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_unread_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.global_unread_locked_mine::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjExLjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjM1KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjE5IiB5Mj0iMTkiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjc1KSIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxOSIgeTE9IjExIiB4Mj0iMTEiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.topic_moved::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iNyIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC4zNSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }

/* ── Forum-row icons (Watched Forums in UCP subscriptions): reuse the topic tricolor
   discs — this list is the only remaining place using the classic forum_read/forum_unread
   icon classes, since the board index was redesigned to its own card layout instead. ── */
ul.topiclist li.row.forum_read::before,
ul.topiclist li.row.forum_read_subforum::before,
ul.topiclist li.row.forum_link::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC41OCIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.forum_unread::before,
ul.topiclist li.row.forum_unread_subforum::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjwvc3ZnPg==") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.forum_read_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIgb3BhY2l0eT0iMC40NSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }
ul.topiclist li.row.forum_unread_locked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDk2RUZGIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmNTllMGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNC41IiBmaWxsPSIjMGQxMTE3Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iOSIgZmlsbD0idXJsKCNnKSIvPjxsaW5lIHgxPSIxMSIgeTE9IjExIiB4Mj0iMTkiIHkyPSIxOSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE5IiB5MT0iMTEiIHgyPSIxMSIgeTI9IjE5IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC43NSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=") !important; background-size: 30px 30px !important; }

/* ── Mobile: dt min-height:43px and unconditional <br> after title both shift icon below short titles ── */
@media (max-width: 700px) {
    ul.topiclist dl.row-item dt { min-height: 0 !important; }
    ul.topiclist dl.row-item dt .list-inner br { display: none !important; }
    ul.topiclist dl.row-item dt .list-inner span.responsive-show { float: none !important; clear: both !important; }

    /* ── Special-topic rows (sticky / announce / global / locked / poll): keep the
       status disc on the TITLE's line, not the badge's ──
       links.css:73 sets `a.topictitle { display: inline-block !important }`. An
       inline-block is an ATOMIC box — it cannot be split across lines. `span.topic_type`
       (the pin / bullhorn / lock badge) is merlin.css `float: right` and sits first in
       .list-inner, so it reserves space on line 1. On desktop the row is wide enough
       that the whole title box still fits beside it and stays on line 1, which is why
       the disc — li.row::before at a fixed top:11px — lined up correctly there. On a
       phone the remaining width is narrower than the title box, so instead of wrapping
       word-by-word the ENTIRE title jumps to line 2, leaving line 1 holding only the
       badge; the disc then reads as aligned with the badge. Ordinary rows have no badge,
       nothing displaces line 1, and they looked fine — which is exactly the pattern
       reported.
       Making the title inline on phones lets it wrap word-by-word and share line 1 with
       the badge, so the first text line is back at the top and the existing fixed offset
       is correct again. The badge keeps its original right-floated position — no icon
       offsets, and nothing touched on desktop. */
    ul.topiclist li.row dl.row-item dt .list-inner > a.topictitle {
        display: inline !important;
    }

    /* ── Navbar: hide username text, show only avatar (photo or letter) ── */
    span.nav-username { display: none !important; }
}

/* ── Fix: ensure page body is always white (dark mode makes html background #101216) ── */
html { background-color: #ffffff !important; }

/* ════════════════════════════════════════════
   LOGIN SCREENS — shared dark theme
   Applies to both .phpbb_alert (popup) and
   .login_container (full-page ucp login)
   ════════════════════════════════════════════ */

/* ── Shared: all links inside either login screen ── */
.phpbb_alert a,
.login_container a {
    color: #10B981 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.phpbb_alert a:hover,
.login_container a:hover { color: #f59e0b !important; }

/* ── Shared: input fields ── */
.phpbb_alert input[type="text"],
.phpbb_alert input[type="password"],
.phpbb_alert input.inputbox,
.login_container input[type="text"],
.login_container input[type="password"],
.login_container input.inputbox {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    padding: 7px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.phpbb_alert input[type="text"]:focus,
.phpbb_alert input[type="password"]:focus,
.phpbb_alert input.inputbox:focus,
.login_container input[type="text"]:focus,
.login_container input[type="password"]:focus,
.login_container input.inputbox:focus {
    border-color: #10B981 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.25) !important;
}

/* ── Shared: Login / Register buttons ── */
.phpbb_alert input[type="submit"],
.phpbb_alert a.button1, .phpbb_alert a.button2,
.phpbb_alert input.button1, .phpbb_alert input.button2,
.login_container input[type="submit"],
.login_container a.button1, .login_container a.button2,
.login_container input.button1, .login_container input.button2,
.login_container a.specialbutton, .login_container input.specialbutton {
    background: linear-gradient(135deg, #10B981 0%, #096EFF 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-align: center !important;
    transition: opacity 0.2s ease !important;
}
.phpbb_alert input[type="submit"]:hover,
.login_container a.specialbutton:hover,
.login_container input[type="submit"]:hover { opacity: 0.85 !important; }

/* ── Shared: checkboxes ── */
.phpbb_alert input[type="checkbox"],
.login_container input[type="checkbox"] {
    accent-color: #10B981 !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
}
.phpbb_alert label,
.login_container label {
    color: rgba(255,255,255,0.88) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* ── Small popup (.phpbb_alert) ── */
.phpbb_alert {
    background: #0d1117 !important;
    border: 1px solid rgba(16,185,129,0.28) !important;
    border-top: 3px solid #10B981 !important;
    border-radius: 12px !important;
    box-shadow:
        0 28px 72px rgba(0,0,0,0.6),
        0 4px 20px rgba(16,185,129,0.15) !important;
}
.phpbb_alert h2, .phpbb_alert h3 {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.03em !important;
}
.phpbb_alert p, .phpbb_alert span {
    color: rgba(255,255,255,0.82) !important;
}
.phpbb_alert .alert_close i {
    color: rgba(255,255,255,0.55) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
}
.phpbb_alert .alert_close i:hover {
    color: #10B981 !important;
    -webkit-text-fill-color: #10B981 !important;
}

/* ── Full-page login (.login_container) ── */
.login_container {
    background: transparent !important;
}
.login_container_left_section_content,
.login_container_right_section_content,
.fancy_panel {
    background: #111827 !important;
    border: 1px solid rgba(16,185,129,0.2) !important;
    border-top: 3px solid #10B981 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 4px 16px rgba(16,185,129,0.1) !important;
}
.login_container h2.login-title,
.login_container h3 {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.03em !important;
}
.login_container p,
.login_container_info {
    color: rgba(255,255,255,0.78) !important;
}
.login_form_forgot_link {
    color: rgba(255,255,255,0.7) !important;
}
.login_form_forgot_link a {
    color: #10B981 !important;
    font-weight: 600 !important;
}
.login_form_forgot_link i { color: rgba(255,255,255,0.5) !important; }

/* Register button — constrain inside right card */
.login_container_right a.button2,
.login_container_right a.specialbutton,
.login_container_right input.button2 {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}


/* Darken overlay */
.darken {
    background-color: #0d1117 !important;
    opacity: 0.7 !important;
}

/* ── Create New Topic dropdown (dmzx/newtopic ext) ── */
li.right.rightside.responsive-hide select {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    color: #1a202c !important;
    border: 1px solid rgba(9,110,255,0.3) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    background: #f7f8fa !important;
    cursor: pointer !important;
}
li.right.rightside.responsive-hide select option {
    font-weight: 600 !important;
    color: #1a202c !important;
    background: #ffffff !important;
}

/* ── Registration / Terms / Privacy pages — full-width layout ── */
/* UCP pages have no sidebars; clear the sidebar margin reservations */
body.section-ucp #contentcolumn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* ── Registration / Terms / Privacy pages ── */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* Page title */
h2.sitename-title {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #096EFF !important;
    border-bottom: 3px solid #10B981 !important;
    padding-bottom: 10px !important;
    margin-bottom: 24px !important;
    letter-spacing: 0.02em !important;
}

/* Agreement container */
.panel .content .agreement,
.panel .content div.agreement {
    font-family: "EB Garamond", "Georgia", serif !important;
    font-size: 1.08rem !important;
    line-height: 1.85 !important;
    color: #1a202c !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Section headings inside agreement */
.agreement h3.tssfl-legal-h3 {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #096EFF !important;
    margin-top: 28px !important;
    margin-bottom: 8px !important;
    padding-left: 10px !important;
    border-left: 3px solid #10B981 !important;
    letter-spacing: 0.01em !important;
}

/* Effective date / meta line */
.agreement .tssfl-legal-meta {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    color: #6b7280 !important;
    font-style: normal !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Paragraphs */
.agreement p {
    margin-bottom: 14px !important;
    color: #1a202c !important;
}

/* Lists */
.agreement ul.tssfl-legal-list {
    margin: 8px 0 14px 24px !important;
    padding: 0 !important;
    list-style: none !important;
}
.agreement ul.tssfl-legal-list li {
    position: relative !important;
    padding-left: 18px !important;
    margin-bottom: 6px !important;
    color: #1a202c !important;
}
.agreement ul.tssfl-legal-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 11px !important;
    width: 7px !important;
    height: 7px !important;
    background: linear-gradient(135deg, #10B981, #096EFF) !important;
    border-radius: 50% !important;
}

/* Links inside agreement */
.agreement a {
    color: #096EFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(9,110,255,0.3) !important;
}
.agreement a:hover {
    color: #10B981 !important;
    border-bottom-color: #10B981 !important;
}

/* Agree / Disagree buttons */
#agreement .submit-buttons {
    margin-top: 28px !important;
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}
#agreement input.button1 {
    background: linear-gradient(135deg, #10B981 0%, #096EFF 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.04em !important;
    padding: 11px 32px !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}
#agreement input.button1:hover { opacity: 0.85 !important; }
#agreement input.button2 {
    background: transparent !important;
    border: 2px solid rgba(9,110,255,0.4) !important;
    border-radius: 8px !important;
    color: #096EFF !important;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 9px 28px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
#agreement input.button2:hover {
    border-color: #096EFF !important;
    background: rgba(9,110,255,0.06) !important;
}

/* ── Quick Login extension popup (#quick-login-panel) ── */
#quick-login-panel {
    background: #111827 !important;
    border: 1px solid rgba(16,185,129,0.25) !important;
    border-top: 3px solid #10B981 !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 4px 18px rgba(16,185,129,0.12) !important;
    padding: 22px 26px 18px !important;
}
#quick-login-panel .inner,
#quick-login-panel .content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
/* Title: Login • Register */
#quick-login-panel h3 {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.03em !important;
}
#quick-login-panel h3 a {
    color: #10B981 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
#quick-login-panel h3 a:hover { color: #f59e0b !important; }
/* Field labels (Username:, Password:) */
#quick-login-panel dt label {
    color: rgba(255,255,255,0.75) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}
/* Text/password inputs */
#quick-login-panel .inputbox {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#quick-login-panel .inputbox:focus {
    border-color: #10B981 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.22) !important;
}
/* Forgot password link */
#quick-login-panel .input-link a,
#quick-login-panel fieldset a {
    color: #10B981 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}
#quick-login-panel .input-link a:hover,
#quick-login-panel fieldset a:hover { color: #f59e0b !important; }
/* hr divider */
#quick-login-panel hr {
    border-color: rgba(255,255,255,0.1) !important;
    margin: 10px 0 !important;
}
/* Checkbox rows — spacing between box and label text */
#quick-login-panel fieldset.ql-options label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.875rem !important;
    margin-bottom: 5px !important;
    cursor: pointer !important;
}
#quick-login-panel fieldset.ql-options label span {
    color: rgba(255,255,255,0.85) !important;
}
#quick-login-panel fieldset.ql-options input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.07) !important;
    cursor: pointer !important;
    position: relative !important;
    transition: background 0.18s ease, border-color 0.18s ease !important;
}
#quick-login-panel fieldset.ql-options input[type="checkbox"]:hover {
    border-color: #10B981 !important;
}
#quick-login-panel fieldset.ql-options input[type="checkbox"]:checked {
    background: #10B981 !important;
    border-color: #10B981 !important;
}
#quick-login-panel fieldset.ql-options input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 5px !important;
    height: 9px !important;
    border: 2px solid #ffffff !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
}
/* Login submit button */
#quick-login-panel input.button1 {
    background: linear-gradient(135deg, #10B981 0%, #096EFF 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
    padding: 9px 28px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: opacity 0.2s ease !important;
}
#quick-login-panel input.button1:hover { opacity: 0.85 !important; }
/* Close button — brighter so it's visible on dark bg */
#quick-login-panel .close {
    opacity: 0.6 !important;
    filter: invert(1) !important;
}
#quick-login-panel .close:hover { opacity: 1 !important; }

/* ══════════════════════════════════════════
   Information / Statistics Section
   ══════════════════════════════════════════ */

/* ── Section container ── */
.forumbg.alt_block {
    background: transparent !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-top: 28px !important;
    box-shadow: 0 4px 32px rgba(9,110,255,0.07) !important;
}
.forumbg.alt_block > .inner {
    background: transparent !important;
    padding: 0 !important;
}

/* ── "Information" header bar ── */
.forumbg.alt_block > .inner > ul.topiclist > li.header {
    background: linear-gradient(135deg, #0d1117 0%, #111827 100%) !important;
    border-left: 4px solid #10B981 !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 0 !important;
}
.forumbg.alt_block > .inner > ul.topiclist > li.header dl.row-item {
    background: transparent !important;
    border: none !important;
    padding: 14px 22px !important;
    margin: 0 !important;
}
.forumbg.alt_block > .inner > ul.topiclist > li.header dt {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.forumbg.alt_block > .inner > ul.topiclist > li.header dt i.fa {
    color: #10B981 !important;
    margin-right: 4px !important;
}

/* ── Stat rows — side-by-side grid ── */
.forumbg.alt_block > .inner > ul.topiclist.forums {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    background: #f0f4ff !important;
    padding: 20px !important;
    gap: 16px !important;
    border-radius: 0 0 16px 16px !important;
}
.forumbg.alt_block > .inner > ul.topiclist.forums > li.row {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(9,110,255,0.07) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ── Stat block cards ── */
.forumbg.alt_block .stat-block {
    padding: 22px 26px !important;
    background: transparent !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* ── Stat block section headings ── */
.forumbg.alt_block .stat-block h3 {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: #096EFF !important;
    margin: 0 0 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid rgba(9,110,255,0.12) !important;
}
.forumbg.alt_block .stat-block h3 a {
    color: inherit !important;
    text-decoration: none !important;
}
.forumbg.alt_block .stat-block h3 a:hover {
    color: #10B981 !important;
}

/* ── Online list content ── */
.forumbg.alt_block .stat-block.online-list p {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    color: #374151 !important;
    line-height: 1.85 !important;
    margin: 0 !important;
}
.forumbg.alt_block .stat-block.online-list p strong {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #10B981 !important;
    vertical-align: middle !important;
}

/* ── Statistics 4-column grid (auto-wraps on narrow screens) ── */
.tssfl-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 1px !important;
    background: rgba(9,110,255,0.1) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.tssfl-stat {
    background: #f8faff !important;
    padding: 20px 12px !important;
    text-align: center !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
    transition: background 0.2s !important;
}
.tssfl-stat:hover {
    background: #eef2ff !important;
}
.tssfl-stat strong {
    display: block !important;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 2.3rem !important;
    font-weight: 800 !important;
    color: #096EFF !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.02em !important;
}
/* Alternate colors for the four stats */
.tssfl-stat:nth-child(1) strong { color: #096EFF !important; }
.tssfl-stat:nth-child(2) strong { color: #10B981 !important; }
.tssfl-stat:nth-child(3) strong { color: #f59e0b !important; }
.tssfl-stat-newest {
    grid-column: span 1 !important;
}
.tssfl-stat-newest strong {
    font-size: 0.85rem !important;
    color: #096EFF !important;
    font-weight: 700 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    margin-bottom: 2px !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

/* ── Birthday block ── */
.forumbg.alt_block .stat-block.birthday-list p {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    color: #374151 !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}

/* ── Login block (shown to guests) — span full width ── */
.forumbg.alt_block > .inner > ul.topiclist.forums > li.row:has(form.headerspace) {
    grid-column: 1 / -1 !important;
}

/* ── Statistics block — full width when alone ── */
.forumbg.alt_block .stat-block.statistics {
    padding: 22px 26px 24px !important;
}
.forumbg.alt_block .stat-block.statistics h3 {
    margin-bottom: 18px !important;
}

/* ── Information section — responsive breakpoints ── */

/* Tablet/narrow: stack "Who is online" above "Statistics"; 2×2 stats grid */
@media (max-width: 700px) {
    .forumbg.alt_block > .inner > ul.topiclist.forums {
        grid-template-columns: 1fr !important;
    }
    .tssfl-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Small phones: tighten padding and slightly smaller numbers */
@media (max-width: 480px) {
    .tssfl-stat {
        padding: 14px 8px !important;
    }
    .tssfl-stat strong {
        font-size: 1.55rem !important;
    }
    .forumbg.alt_block > .inner > ul.topiclist.forums {
        padding: 12px !important;
        gap: 12px !important;
    }
}

/* ── Current time + Mark forums read bar ── */
.post_forumlist_links {
    text-align: center !important;
    margin: 4px auto 24px !important;
    padding: 18px 24px 16px !important;
    position: relative !important;
}
.current_time {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    letter-spacing: 0 !important;
    display: inline-block !important;
    position: relative !important;
    padding-bottom: 7px !important;
    white-space: nowrap !important;
}
.current_time::before {
    font-family: FontAwesome !important;
    content: "\f017" !important;
    font-size: 1em !important;
    color: #096EFF !important;
    -webkit-text-fill-color: #096EFF !important;
    margin-right: 7px !important;
}
.current_time::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #096EFF, #f59e0b, #10B981) !important;
    border-radius: 2px !important;
}
.post_forumlist_links a.mark-read {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 10px !important;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #096EFF !important;
    text-decoration: none !important;
    padding: 5px 14px !important;
    border: 1px solid rgba(9,110,255,0.28) !important;
    border-radius: 20px !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}
.post_forumlist_links a.mark-read::before {
    font-family: FontAwesome !important;
    content: "\f00c" !important;
    font-size: 0.85em !important;
    color: #10B981 !important;
    -webkit-text-fill-color: #10B981 !important;
}
.post_forumlist_links a.mark-read:hover {
    background: rgba(9,110,255,0.06) !important;
    border-color: rgba(9,110,255,0.55) !important;
    text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════════
   Page heading — h2.solo (Members, The Team, FAQs …)
   ════════════════════════════════════════════════════════════ */
h2.solo {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    color: #0d1117 !important;
    letter-spacing: -0.025em !important;
    display: inline-block !important;
    position: relative !important;
    padding-bottom: 12px !important;
    margin: 28px 0 24px !important;
}
h2.solo::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #096EFF, #f59e0b, #10B981) !important;
    border-radius: 2px !important;
}

/* ════════════════════════════════════════════════════════════
   Members & Team pages — shared table container
   ════════════════════════════════════════════════════════════ */
div.forumbg-table:has(table#memberlist),
div.forumbg-table:has(table#team) {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    margin-bottom: 22px !important;
}
div.forumbg-table:has(table#memberlist) > .inner,
div.forumbg-table:has(table#team) > .inner {
    padding: 0 !important;
}

/* Table header rows */
table#memberlist thead th,
table#team thead th {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    padding: 13px 18px !important;
    background: linear-gradient(135deg, #0d1117, #111827) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    white-space: nowrap !important;
}
table#memberlist thead th:first-child,
table#team thead th:first-child {
    border-left: 3px solid #096EFF !important;
    color: #e2e8f0 !important;
    padding-left: 16px !important;
    font-size: 0.72rem !important;
}
table#memberlist thead th a,
table#team thead th a {
    color: inherit !important;
    text-decoration: none !important;
}
table#memberlist thead th a:hover,
table#team thead th a:hover {
    color: #096EFF !important;
}

/* Body rows */
table#memberlist tbody tr,
table#team tbody tr {
    transition: background 0.12s ease !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}
table#memberlist tbody tr.bg1,
table#team tbody tr.bg1 { background: #ffffff !important; }
table#memberlist tbody tr.bg2,
table#team tbody tr.bg2 { background: #f9fafb !important; }
table#memberlist tbody tr:hover,
table#team tbody tr:hover { background: rgba(9,110,255,0.04) !important; }

/* Body cells */
table#memberlist tbody td,
table#team tbody td {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    color: #374151 !important;
    padding: 11px 18px !important;
    vertical-align: middle !important;
    border: none !important;
}

/* First column — username */
table#memberlist tbody td:first-child,
table#team tbody td:first-child {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.93rem !important;
    border-left: 3px solid transparent !important;
    transition: border-left-color 0.14s ease !important;
    padding-left: 16px !important;
}
table#memberlist tbody tr:hover td:first-child,
table#team tbody tr:hover td:first-child {
    border-left-color: #096EFF !important;
}

/* Rank label — memberlist */
table#memberlist .rank-img {
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    font-family: "Inter", system-ui, sans-serif !important;
    margin-right: 5px !important;
}

/* Rank label — team page (badge style) */
table#team .rank-img {
    display: inline-block !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    color: #096EFF !important;
    background: rgba(9,110,255,0.08) !important;
    border: 1px solid rgba(9,110,255,0.22) !important;
    border-radius: 20px !important;
    padding: 2px 9px !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
}

/* Posts count */
table#memberlist td.posts {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-weight: 600 !important;
    color: #096EFF !important;
    text-align: center !important;
}
table#memberlist td.posts a { color: inherit !important; text-decoration: none !important; }
table#memberlist td.posts a:hover { color: #10B981 !important; }

/* Website / info column */
table#memberlist td.info a {
    color: #10B981 !important;
    text-decoration: none !important;
    font-size: 0.82rem !important;
    word-break: break-all !important;
}
table#memberlist td.info a:hover {
    color: #096EFF !important;
    text-decoration: underline !important;
}

/* Joined / Last active */
table#memberlist td.joined,
table#memberlist td.active {
    color: #9ca3af !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
}

/* Team page — primary group link */
table#team td.info {
    font-size: 0.88rem !important;
}
table#team td.info a {
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Team page — moderator forum column */
table#team td.info:last-of-type {
    color: #6b7280 !important;
    font-size: 0.82rem !important;
}

/* ════════════════════════════════════════════════════════════
   Members page — A-Z filter bar
   ════════════════════════════════════════════════════════════ */
.member-search {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    color: #6b7280 !important;
}
.member-search strong a {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #374151 !important;
    text-decoration: none !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    display: inline-block !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    margin: 1px 0 !important;
}
.member-search strong a:hover {
    background: #096EFF !important;
    color: #ffffff !important;
}
.member-search a#member_search {
    color: #096EFF !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.member-search a#member_search:hover { text-decoration: underline !important; }

/* ════════════════════════════════════════════════════════════
   Mobile post layout — clean profile + XenForo-style buttons
   Only applies ≤700px. Desktop (≥701px) is completely unchanged.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

    /* ── 1. Postprofile: full width, unset float so postbody flows below ── */
    .post .postprofile {
        width: 100% !important;
        float: none !important;
        overflow: visible !important;
        min-height: 0 !important;
        padding: 10px 0 12px !important;
        margin: 0 0 0 0 !important;
        border-width: 0 0 1px 0 !important;
        border-color: rgba(0,0,0,0.08) !important;
        box-sizing: border-box !important;
    }

    /* ── 1b. Postbody: full width block below profile ── */
    .post .postbody {
        width: 100% !important;
        overflow: visible !important;
        margin-left: 0 !important;
        padding-top: 10px !important;
    }

    /* ── 2. dt: flex row — avatar on left, username on right ── */
    /* Scoped to .post to avoid affecting viewforum last-poster dl.postprofile */
    .post .postprofile dt {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* ── 3. Avatar container: no float, flex item ── */
    .post .postprofile .avatar-container,
    .post .postprofile .has-avatar .avatar-container {
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    .post .postprofile .avatar-container::after {
        content: none !important;
        display: none !important;
    }
    .post .postprofile .avatar {
        float: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    /* ── 4. Image avatars: compact circle ── */
    .post .postprofile .avatar img {
        max-height: 38px !important;
        max-width: 38px !important;
        width: auto !important;
        height: auto !important;
        border-radius: 50% !important;
    }

    /* ── 5. JS letter / wordmark avatars ── */
    .post .postprofile .tssfl-av-letter,
    .post .postprofile .tssfl-av-wordmark {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
    }

    /* ── 6. No-avatar: hide the empty container ── */
    .post .postprofile dt.no-avatar .avatar-container {
        display: none !important;
    }

    /* ── 7. Username: Space Grotesk, bold ── */
    .post .postprofile dt > a,
    .post .postprofile dt > strong,
    .post .postprofile dt .username,
    .post .postprofile dt .username-coloured {
        font-family: "Space Grotesk", "Inter", sans-serif !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    /* ── 8. Rank dd: show below, indented to align with username ── */
    .post .postprofile dd.profile-rank {
        display: block !important;
        margin: 4px 0 0 48px !important;  /* 38px avatar + 10px gap */
        font-size: 0.74rem !important;
        color: #6b7280 !important;
        font-family: "Inter", system-ui, sans-serif !important;
        line-height: 1.65 !important;
        padding: 0 !important;
    }
    /* No avatar: remove indent */
    .post .postprofile dt.no-avatar ~ dd.profile-rank {
        margin-left: 0 !important;
    }

    /* ── 8b. Reactions + Posts: compact inline row below rank ── */
    .post .postprofile dd.profile-joined:not(.clutter) {
        display: inline-block !important;
        margin: 3px 0 0 48px !important;
        padding: 0 !important;
        font-size: 0.71rem !important;
        color: #6b7280 !important;
        font-family: "Inter", system-ui, sans-serif !important;
        line-height: 1.5 !important;
    }
    .post .postprofile dd.profile-posts {
        display: inline-block !important;
        margin: 3px 0 0 10px !important;
        padding: 0 !important;
        font-size: 0.71rem !important;
        color: #6b7280 !important;
        font-family: "Inter", system-ui, sans-serif !important;
        line-height: 1.5 !important;
    }
    /* Label: normal weight gray; number: bold blue */
    .post .postprofile dd.profile-joined:not(.clutter) strong,
    .post .postprofile dd.profile-posts strong {
        color: #6b7280 !important;
        font-weight: 400 !important;
    }
    .post .postprofile dd.profile-joined:not(.clutter) a,
    .post .postprofile dd.profile-posts a {
        color: #096EFF !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    /* Hide noisy fields on mobile */
    .post .postprofile dd.profile-joined.clutter,
    .post .postprofile dd.profile-warnings,
    .post .postprofile dd.profile-custom-field,
    .post .postprofile dd.profile-contact {
        display: none !important;
    }
    /* No avatar: reset indent on first inline dd */
    .post .postprofile dt.no-avatar ~ dd.profile-joined:not(.clutter) {
        margin-left: 0 !important;
    }

    /* ── 9. Post content: CSS Grid ── */
    /* Row layout: # | date → content → attach → sig → reactions → reactors → buttons */
    div[id^="post_content"] {
        display: grid !important;
        grid-template-areas:
            "postnum   postdate"
            "content   content"
            "attach    attach"
            "sig       sig"
            "reactions reactions"
            "reactors  reactors"
            "buttons   buttons";
        grid-template-columns: auto 1fr !important;
        column-gap: 10px !important;
        border-top: 3px solid !important;
        border-image: linear-gradient(90deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) 1 !important;
        padding-top: 4px !important;
    }

    /* Grid area assignments */
    div[id^="post_content"] > p.author.post-number       { grid-area: postnum   !important; }
    div[id^="post_content"] > p.author:not(.post-number) { grid-area: postdate  !important; }
    div[id^="post_content"] > h3                         { display: none        !important; }
    div[id^="post_content"] > div.content                { grid-area: content   !important; }
    div[id^="post_content"] > dl.attachbox               { grid-area: attach    !important; }
    div[id^="post_content"] > div.signature              { grid-area: sig       !important; }
    div[id^="post_content"] > div.reactions              { grid-area: reactions !important; }
    div[id^="post_content"] > div.reaction-reactors      { grid-area: reactors  !important; }
    div[id^="post_content"] > ul.post-buttons            { grid-area: buttons   !important; }
    div[id^="post_content"] > div.clear                  { display: none        !important; }

    /* ── 9a. Reactions row: flex, wraps to multiple lines if many emojis ── */
    div[id^="post_content"] > div.reactions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 0 4px !important;
        margin: 0 !important;
        border-top: 1px solid rgba(0,0,0,0.06) !important;
    }

    /* ── 9a2. Reactor names: below emojis, wraps for long lists ── */
    div[id^="post_content"] > div.reaction-reactors {
        display: block !important;
        padding: 0 0 6px !important;
        margin: 0 !important;
        font-family: "Inter", system-ui, sans-serif !important;
        font-size: 0.72rem !important;
        color: #6b7280 !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.5 !important;
    }
    div[id^="post_content"] > div.reaction-reactors a.reaction-reactors-link {
        color: #096EFF !important;
        text-decoration: none !important;
    }
    div[id^="post_content"] > div.reaction-reactors a.reaction-reactors-link:hover {
        text-decoration: underline !important;
    }

    /* ── 9b. Post number (#N): # amber, digit blue ── */
    div[id^="post_content"] > p.author.post-number {
        margin: 0 !important;
        padding: 5px 12px 3px 0 !important;
        align-self: center !important;
        line-height: 1 !important;
        font-size: 0 !important;
        border: none !important;
        clear: none !important;
        white-space: nowrap !important;
    }
    div[id^="post_content"] > p.author.post-number a {
        display: inline-block !important;
        font-family: "Space Grotesk", system-ui, sans-serif !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        color: #096EFF !important;
        text-decoration: none !important;
        letter-spacing: 0.01em !important;
    }
    div[id^="post_content"] > p.author.post-number a::first-letter {
        color: #f59e0b !important;
    }

    /* ── 9c. Date: Inter, gray, right-aligned ── */
    div[id^="post_content"] > p.author:not(.post-number) {
        margin: 0 !important;
        padding: 5px 0 3px !important;
        align-self: center !important;
        text-align: right !important;
        font-family: "Inter", system-ui, sans-serif !important;
        font-size: 0.72rem !important;
        color: #6b7280 !important;
        border: none !important;
        clear: none !important;
        line-height: 1.2 !important;
    }
    div[id^="post_content"] > p.author:not(.post-number) a {
        color: #6b7280 !important;
        text-decoration: none !important;
    }

    /* ── 9d. Content: gap below # / date row ── */
    div[id^="post_content"] > div.content {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }

    /* ── 10. Action buttons: right-aligned from hamburger position ── */
    .has-profile .post-buttons {
        position: static !important;
        float: none !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 0 2px !important;
        margin: 8px 0 0 0 !important;
        border-top: 1px solid rgba(0,0,0,0.1) !important;
        top: auto !important;
        right: auto !important;
    }
    .hasjs .postbody .post-buttons {
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Hide the JS-injected responsive-menu hamburger — it's redundant here */
    .post-buttons > li.responsive-menu {
        display: none !important;
    }
    .post-buttons > li {
        float: none !important;
        margin: 0 !important;
        flex: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .post-buttons .button {
        width: auto !important;
        padding: 6px 10px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* ── Desktop only: post action buttons — flex row with breathing room ── */
@media (min-width: 701px) {
    .has-profile .post-buttons {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .has-profile .post-buttons > li {
        float: none !important;
        margin: 0 !important;
    }
    .has-profile .post-buttons .button {
        padding: 6px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .hasjs .postbody .post-buttons {
        max-width: none !important;
    }
}
/* ── Reactions count badge: override common.css position:absolute so it
   stays inside the reactions row instead of floating to postbody top-right ── */
.reactions .badge.icon-tpr.tpr-font {
    position: static !important;
}

/* ── Post number: gap between #N and clock icon (kasimi 3.3.x has no margin-right) ── */
p.author.post-number {
    margin-right: 10px !important;
}
@media (min-width: 701px) {
    p.author.post-number {
        margin-right: 20px !important;
    }
}

/* ── Post number tricolor cycling: 1st=amber, 2nd=blue, 3rd=green, repeat ── */
.viewtopic_wrapper > div:nth-of-type(3n+1) p.author.post-number a,
.viewtopic_wrapper > div:nth-of-type(3n+1) p.author.post-number a::first-letter {
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
}
.viewtopic_wrapper > div:nth-of-type(3n+2) p.author.post-number a,
.viewtopic_wrapper > div:nth-of-type(3n+2) p.author.post-number a::first-letter {
    color: #096EFF !important;
    -webkit-text-fill-color: #096EFF !important;
}
.viewtopic_wrapper > div:nth-of-type(3n) p.author.post-number a,
.viewtopic_wrapper > div:nth-of-type(3n) p.author.post-number a::first-letter {
    color: #10B981 !important;
    -webkit-text-fill-color: #10B981 !important;
}

/* ══════════════════════════════════════════════════════════════
   POSTING AREA BEAUTIFICATION — v121
   ══════════════════════════════════════════════════════════════ */

/* ── Hide BBCode ON/OFF status (redundant info) ── */
.bbcode-status { display: none !important; }

/* ── Toolbar container ── */
#format-postingbuttons {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px 10px 10px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: 3px solid !important;
    border-image: linear-gradient(90deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) 1 !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
}

/* ── Formatting buttons (B, I, U, quote, code, lists, image, link, color) ── */
input.postingbuttons {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #e8edf4 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 15px 15px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)) !important;
    transition: background-color 120ms, border-color 120ms, box-shadow 120ms, filter 120ms !important;
}
input.postingbuttons:hover {
    background-color: #d6e4ff !important;
    border-color: #096EFF !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.12) !important;
    filter: drop-shadow(0 1px 2px rgba(9,110,255,0.25)) !important;
}
input.postingbuttons:active {
    background-color: #bfdbfe !important;
    transform: scale(0.93) !important;
}

/* ── Font-size and BBCodes select dropdowns ── */
select.bbcode-size,
select[name="addbbcode_custom"],
select[name="addbbcode_codeboxplus"] {
    height: 30px !important;
    padding: 0 26px 0 9px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    transition: border-color 120ms, box-shadow 120ms !important;
}
select.bbcode-size:hover,
select[name="addbbcode_custom"]:hover,
select[name="addbbcode_codeboxplus"]:hover { border-color: #096EFF !important; }
select.bbcode-size:focus,
select[name="addbbcode_custom"]:focus,
select[name="addbbcode_codeboxplus"]:focus {
    border-color: #096EFF !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.1) !important;
}
select[name="addbbcode_custom"] { min-width: 150px !important; }

/* ── Textarea: connects visually to toolbar above ── */
div#message-box textarea.inputbox {
    box-sizing: border-box !important;
    width: 100% !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 12px 14px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: #1e293b !important;
    background: #ffffff !important;
    resize: vertical !important;
    transition: box-shadow 120ms !important;
}
div#message-box textarea.inputbox:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.08) !important;
}

/* ── Action buttons container ── */
fieldset.submit-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px 4px !important;
    border: none !important;
    background: none !important;
    margin: 0 !important;
}
/* Save / Load draft */
fieldset.submit-buttons input.button2 {
    padding: 8px 16px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    color: #4b5563 !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    transition: background 120ms, border-color 120ms !important;
}
fieldset.submit-buttons input.button2:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #1f2937 !important;
}
/* Preview */
fieldset.submit-buttons input[name="preview"] {
    padding: 8px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(245,158,11,0.35) !important;
    transition: background 120ms, box-shadow 120ms, transform 120ms !important;
}
fieldset.submit-buttons input[name="preview"]:hover {
    background: #d97706 !important;
    box-shadow: 0 4px 10px rgba(245,158,11,0.45) !important;
    transform: translateY(-1px) !important;
}
/* Submit */
fieldset.submit-buttons input[name="post"] {
    padding: 8px 26px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #096EFF !important;
    color: #ffffff !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(9,110,255,0.35) !important;
    transition: background 120ms, box-shadow 120ms, transform 120ms !important;
}
fieldset.submit-buttons input[name="post"]:hover {
    background: #0558d4 !important;
    box-shadow: 0 4px 10px rgba(9,110,255,0.45) !important;
    transform: translateY(-1px) !important;
}

/* ── Options / Attachments / Reactions tabs ── */
#tabs.tabs.sub-panels > ul {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    list-style: none !important;
}
#tabs .tab a {
    display: block !important;
    padding: 9px 18px !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    white-space: nowrap !important;
    transition: color 120ms, border-color 120ms !important;
}
#tabs .tab a:hover {
    color: #096EFF !important;
    border-bottom-color: rgba(9,110,255,0.4) !important;
}
#tabs .tab.activetab a {
    color: #0d1117 !important;
    font-weight: 700 !important;
    border-bottom-color: #096EFF !important;
}

/* ── Options panel ── */
div#options-panel {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-top: 6px !important;
}
div#options-panel .inner { padding: 14px 18px !important; }
div#options-panel label {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    color: #374151 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 0 !important;
}
div#options-panel input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: #096EFF !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════
   v122 — Posting area: attachments, review, reactions, dropdowns
   ═══════════════════════════════════════════════ */

/* ── Action buttons: slightly larger font ── */
fieldset.submit-buttons input.button2,
fieldset.submit-buttons input[name="preview"],
fieldset.submit-buttons input[name="post"] {
    font-size: 0.92rem !important;
}

/* ── Attachment panel ── */
#attach-panel {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-top: 6px !important;
    background: #f9fafb !important;
}
#attach-panel .inner { padding: 14px 18px !important; }
#attach-panel p {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: #4b5563 !important;
    margin: 0 0 8px !important;
}
#attach-panel p:last-of-type { margin-bottom: 12px !important; }

/* "Add files" blue button */
#add_files {
    display: inline-block !important;
    padding: 8px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #096EFF !important;
    color: #ffffff !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(9,110,255,0.3) !important;
    transition: background 120ms, box-shadow 120ms !important;
}
#add_files:hover {
    background: #0558d4 !important;
    box-shadow: 0 4px 10px rgba(9,110,255,0.4) !important;
}

/* ── Auto-draft notification ── */
#pcgf-autodrafts-notifications {
    border: none !important;
    background: transparent !important;
    padding: 4px 0 !important;
    margin: 0 !important;
}
#pcgf-autodrafts-notifications span {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: #10B981 !important;
    letter-spacing: 0.01em !important;
}

/* ── Responsive overflow tab dropdown (≡ menu) ── */
#tabs .dropdown-trigger { display: flex !important; align-items: center !important; }
#tabs .dropdown-container .dropdown {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
    padding: 4px 0 !important;
    min-width: 180px !important;
}
#tabs .dropdown-container .dropdown li {
    text-align: left !important;
    border: none !important;
    background: none !important;
}
#tabs .dropdown-container .dropdown li a {
    display: block !important;
    padding: 9px 16px !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background 100ms, color 100ms !important;
}
#tabs .dropdown-container .dropdown li a:hover {
    background: #eff6ff !important;
    color: #096EFF !important;
}
#tabs .dropdown-container .dropdown li.activetab a {
    color: #096EFF !important;
    font-weight: 700 !important;
    background: #f0f9ff !important;
    border-left: 3px solid #096EFF !important;
}

/* ── Topic review bar ── */
/* .right-box is first in DOM; row-reverse places it visually on the right */
h3.review {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    padding: 12px 4px !important;
    margin-top: 8px !important;
    border-top: 1px solid #e5e7eb !important;
}
h3.review .right-box {
    float: none !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: 12px !important;
}
h3.review .right-box a {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #096EFF !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color 120ms !important;
}
h3.review .right-box a:hover { border-bottom-color: #096EFF !important; }

/* Topic review content area */
div#topicreview {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* ── Topic/Post Reactions panel ── */
#post-reaction {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-top: 6px !important;
    background: #f9fafb !important;
}
#post-reaction .inner { padding: 14px 18px !important; }
#post-reaction > .inner > fieldset.fields1 { border: none !important; padding: 0 !important; }
#post-reaction p {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
    margin: 0 0 10px !important;
}
#post-reaction label {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    color: #374151 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 0 !important;
}
#post-reaction input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: #096EFF !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
#post-reaction .panel.reaction_inner {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    margin-top: 8px !important;
}
#post-reaction .panel.reaction_inner .inner { padding: 10px !important; }
#post-reaction .reaction_enabled,
#post-reaction .reaction_disabled {
    padding: 4px !important;
    border-radius: 4px !important;
    transition: background 100ms !important;
}
#post-reaction .reaction_enabled:hover { background: #eff6ff !important; }
#post-reaction .reaction_disabled { opacity: 0.45 !important; }

/* ═══════════════════════════════════════════════
   v123 — Topic list: replies, views, lastpost, pagination
   ═══════════════════════════════════════════════ */

/* ── Row hover ── */
ul.topiclist.topics li.row,
ul.topiclist.forums li.row {
    transition: background 140ms, box-shadow 140ms !important;
}
ul.topiclist.topics li.row:hover,
ul.topiclist.forums li.row:hover {
    background: #f0f7ff !important;
    box-shadow: inset 3px 0 0 #096EFF !important;
}

/* ── Replies column (dd.posts) ── */
ul.topiclist.topics li.row dd.posts {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #10B981 !important;
    text-align: center !important;
    line-height: 1 !important;
    padding-top: 18px !important;
    position: relative !important;
}
ul.topiclist.topics li.row dd.posts::before {
    content: "\f086" !important;
    font-family: FontAwesome !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: #10B981 !important;
    -webkit-text-fill-color: #10B981 !important;
    display: block !important;
    margin-bottom: 4px !important;
    line-height: 1 !important;
}
ul.topiclist.topics li.row dd.posts dfn { display: none !important; }

/* ── Views column (dd.views) ── */
ul.topiclist.topics li.row dd.views {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #096EFF !important;
    text-align: center !important;
    line-height: 1 !important;
    padding-top: 18px !important;
    position: relative !important;
}
ul.topiclist.topics li.row dd.views::before {
    content: "\f06e" !important;
    font-family: FontAwesome !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: #096EFF !important;
    -webkit-text-fill-color: #096EFF !important;
    display: block !important;
    margin-bottom: 4px !important;
    line-height: 1 !important;
}
ul.topiclist.topics li.row dd.views dfn { display: none !important; }

/* ── Last post cell ── */
ul.topiclist li.row dd.lastpost > span {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    padding-left: 8px !important;
    padding-top: 6px !important;
    display: block !important;
}
ul.topiclist li.row dd.lastpost dfn {
    font-style: normal !important;
    color: #9ca3af !important;
    font-size: 0.75rem !important;
}
ul.topiclist li.row dd.lastpost time {
    display: block !important;
    font-size: 0.78rem !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
}
ul.topiclist li.row dd.lastpost a {
    font-weight: 600 !important;
    color: #096EFF !important;
}

/* ── "735 posts" + pagination on viewtopic ── */
div.pagination {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
div.pagination > a.mark {
    color: #096EFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-right: 4px !important;
}


/* ═══════════════════════════════════════════════
   v124 — Board index: category headers, forum cards, stats
   ═══════════════════════════════════════════════ */

/* ── Category heading ── */
.grid_cat_title {
    margin: 0 0 18px 0 !important;
    padding-left: 16px !important;
    border-left: 4px solid transparent !important;
    border-image: linear-gradient(180deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) 1 !important;
    display: block !important;
}
a.cat_title {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #0d1117 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
}
a.cat_title:hover { color: #096EFF !important; }

/* ── Card hover: lift + blue glow ── */
.forumlist_grid .grid_image_container {
    transition: transform 160ms ease, box-shadow 160ms ease !important;
}
.forumlist_grid li.row:hover .grid_image_container {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(9,110,255,0.13), 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* ── Forum name inside card ── */
.forumlist_grid .tile_forum_name {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #0d1117 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}
.forumlist_grid a.tile_inner { color: #0d1117 !important; text-decoration: none !important; }
.forumlist_grid a.tile_inner:hover .tile_forum_name { color: #096EFF !important; }

/* ── Description ── */
.forumlist_grid .forum_description {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    color: #6b7280 !important;
    line-height: 1.45 !important;
    height: auto !important;
    margin-top: 6px !important;
}

/* ── Tricolor separator (replaces single blue 60px line) ── */
.forumlist_grid .tile_row_2::before {
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) !important;
    margin-bottom: 14px !important;
}

/* ── Stats numbers ── */
.mini_number, .mini_date {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-weight: 700 !important;
    padding-top: 6px !important;
}

/* Topics column → green */
.tile_row_2 > div:nth-child(2) .mini_number {
    font-size: 1.25rem !important;
    color: #10B981 !important;
}
.tile_row_2 > div:nth-child(2) .mini_number::before {
    content: "\f086" !important;
    font-family: FontAwesome !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    display: block !important;
    color: #10B981 !important;
    -webkit-text-fill-color: #10B981 !important;
    margin-bottom: 3px !important;
}

/* Posts column → blue */
.tile_row_2 > div:nth-child(3) .mini_number {
    font-size: 1.25rem !important;
    color: #096EFF !important;
}
.tile_row_2 > div:nth-child(3) .mini_number::before {
    content: "\f15c" !important;
    font-family: FontAwesome !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    display: block !important;
    color: #096EFF !important;
    -webkit-text-fill-color: #096EFF !important;
    margin-bottom: 3px !important;
}

/* Last post date → amber */
.tile_row_50 .mini_date {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #f59e0b !important;
    padding-top: 6px !important;
}
.tile_row_50 .mini_date::before {
    content: "\f017" !important;
    font-family: FontAwesome !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    display: block !important;
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    margin-bottom: 3px !important;
}

/* ── Stat labels ── */
.mini_label {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #9ca3af !important;
    display: block !important;
    margin-top: 3px !important;
}

/* ── "New posts" unread badge ── */
.forumlist_grid .grid_unread {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    background: #096EFF !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    margin-right: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    vertical-align: middle !important;
    display: inline-block !important;
}


/* ═══════════════════════════════════════════════
   v124-fix — forumlist_grid_icons corrections
   ═══════════════════════════════════════════════ */

/* ── Card hover (icons template) ── */
.forumlist_grid_icons .grid_image_container {
    transition: transform 160ms ease, box-shadow 160ms ease !important;
}
.forumlist_grid_icons li.row:hover .grid_image_container {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(9,110,255,0.13), 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* ── Forum name in tile_row_1 (icons template) ── */
.forumlist_grid_icons .tile_row_1 .tile_title {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #0d1117 !important;
    line-height: 1.3 !important;
}
.forumlist_grid_icons a.tile_inner { color: #0d1117 !important; text-decoration: none !important; }
.forumlist_grid_icons a.tile_inner:hover .tile_title { color: #096EFF !important; }

/* ── Description (icons template) ── */
.forumlist_grid_icons .forum_description {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    color: #6b7280 !important;
    line-height: 1.45 !important;
    display: block !important;
    margin-top: 4px !important;
}

/* ── Tricolor separator — both templates ── */
.forumlist_grid_icons .tile_row_2::before,
.forumlist_grid .tile_row_2::before {
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) !important;
    margin-bottom: 12px !important;
}

/* ── Fix nth-child: in icons template tile_row_2 has no tile_title child ──
   Topics = child 1, Posts = child 2, Last post = child 3 */

/* Topics → green (override the wrong nth-child(2) rule above) */
.tile_row_2 > div:nth-child(1) .mini_number {
    font-size: 1.25rem !important;
    color: #10B981 !important;
}
.tile_row_2 > div:nth-child(1) .mini_number::before {
    content: "\f086" !important;
    font-family: FontAwesome !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    display: block !important;
    color: #10B981 !important;
    -webkit-text-fill-color: #10B981 !important;
    margin-bottom: 3px !important;
}

/* Posts → blue (child 2, was wrongly getting Topics/green styling) */
.tile_row_2 > div:nth-child(2) .mini_number {
    font-size: 1.25rem !important;
    color: #096EFF !important;
}
.tile_row_2 > div:nth-child(2) .mini_number::before {
    content: "\f15c" !important;
    font-family: FontAwesome !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    display: block !important;
    color: #096EFF !important;
    -webkit-text-fill-color: #096EFF !important;
    margin-bottom: 3px !important;
}

/* Clear the old wrong nth-child(3) blue rule that was intended for Posts */
.tile_row_2 > div:nth-child(3) .mini_number {
    color: inherit !important;
    font-size: inherit !important;
}
.tile_row_2 > div:nth-child(3) .mini_number::before {
    content: none !important;
}


/* ═══════════════════════════════════════════════
   v126 — User Profile beautification
   ═══════════════════════════════════════════════ */

/* ── Page heading ── */
h2.memberlist-title {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #0d1117 !important;
    padding: 0 0 0 16px !important;
    border-left: 4px solid transparent !important;
    border-image: linear-gradient(180deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) 1 !important;
    margin-bottom: 20px !important;
}

/* ── Avatar: gradient ring via dt.profile-avatar acting as ring holder ── */
#viewprofile dt.profile-avatar {
    display: inline-block !important;
    padding: 3px !important;
    background: linear-gradient(135deg, #096EFF 0%, #f59e0b 50%, #10B981 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 18px rgba(9,110,255,0.18) !important;
    line-height: 0 !important;
}
#viewprofile dt.profile-avatar img {
    display: block !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
}

/* ── Rank badge ── */
#viewprofile dl.left-box:not(.profile-details) dd {
    display: inline-block !important;
    background: linear-gradient(90deg, rgba(9,110,255,0.08), rgba(16,185,129,0.08)) !important;
    border: 1px solid rgba(9,110,255,0.18) !important;
    border-radius: 20px !important;
    padding: 3px 14px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #374151 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin-top: 10px !important;
}

/* ── Profile details: labels ── */
#viewprofile dl.profile-details dt {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding-top: 5px !important;
    text-align: right !important;
}

/* ── Profile details: values ── */
#viewprofile dl.profile-details dd {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    color: #374151 !important;
    padding-top: 3px !important;
}
#viewprofile dl.profile-details dd a {
    color: #096EFF !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
#viewprofile dl.profile-details dd a:hover { text-decoration: underline !important; }

/* ── Username — first dd in profile-details ── */
#viewprofile dl.profile-details > dd:first-of-type > span:first-child {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    display: block !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
}

/* ── Groups select + Go button ── */
#viewprofile select[name="g"] {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    color: #374151 !important;
    background: #f9fafb !important;
}
#viewprofile input.button2[name="submit"] {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    background: #096EFF !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    cursor: pointer !important;
}

/* ── Contact + Stats panel ── */
#viewprofile .panel.bg2 {
    border-radius: 12px !important;
    margin-top: 16px !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

/* Section h3 headings */
#viewprofile .column1 h3,
#viewprofile .column2 h3 {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
}

/* ── Contact section: grid layout ── */
#viewprofile .column1 dl.details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    float: none !important;
    overflow: visible !important;
}
#viewprofile .column1 dl.details dt {
    float: none !important;
    width: auto !important;
    text-align: left !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #b0bac5 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-top: 10px !important;
}
#viewprofile .column1 dl.details dd {
    float: none !important;
    width: auto !important;
    margin: 3px 0 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
#viewprofile .column1 dl.details dd a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    padding: 7px 12px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    /* `max-width`, never `width: 100%`. These are buttons, and a button should be as wide
       as its label — stretched edge to edge they read as list rows or input fields, and
       the click target claims space it has no use for. The element is already
       inline-flex, so with width:auto it shrinks to its content on its own; max-width
       only stops an unusually long label from overflowing a narrow column. */
    max-width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 150ms, background 150ms, color 150ms !important;
}
#viewprofile .column1 dl.details dd a:hover {
    background: #eff6ff !important;
    border-color: #096EFF !important;
    color: #096EFF !important;
}
/* Contact icons (Email=amber, PM=blue, Website=green) */
#viewprofile .column1 dl.details dd:nth-of-type(1) a::before {
    content: "\f003" !important;
    font-family: FontAwesome !important;
    font-size: 0.95rem !important;
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    flex-shrink: 0 !important;
}
#viewprofile .column1 dl.details dd:nth-of-type(2) a::before {
    content: "\f075" !important;
    font-family: FontAwesome !important;
    font-size: 0.95rem !important;
    color: #096EFF !important;
    -webkit-text-fill-color: #096EFF !important;
    flex-shrink: 0 !important;
}
#viewprofile .column1 dl.details dd:nth-of-type(3) a::before {
    content: "\f0ac" !important;
    font-family: FontAwesome !important;
    font-size: 0.95rem !important;
    color: #10B981 !important;
    -webkit-text-fill-color: #10B981 !important;
    flex-shrink: 0 !important;
}

/* ── User statistics: grid layout ── */
#viewprofile .column2 dl.details {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 6px 16px !important;
    align-items: baseline !important;
    float: none !important;
    overflow: visible !important;
}
#viewprofile .column2 dl.details dt {
    float: none !important;
    width: auto !important;
    text-align: right !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
}
#viewprofile .column2 dl.details dd {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}
#viewprofile .column2 dl.details dd a {
    color: #096EFF !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
#viewprofile .column2 dl.details dd a:hover { text-decoration: underline !important; }

/* Joined → blue, Last active → green, Warnings → amber, Total posts → blue */
#viewprofile .column2 dl.details dt:nth-of-type(1)::before {
    content: "\f073  " !important;
    font-family: FontAwesome !important;
    color: #096EFF !important;
}
#viewprofile .column2 dl.details dt:nth-of-type(2)::before {
    content: "\f017  " !important;
    font-family: FontAwesome !important;
    color: #10B981 !important;
}
#viewprofile .column2 dl.details dt:nth-of-type(3)::before {
    content: "\f15c  " !important;
    font-family: FontAwesome !important;
    color: #f59e0b !important;
}
#viewprofile .column2 dl.details dt:nth-of-type(4)::before {
    content: "\f15c  " !important;
    font-family: FontAwesome !important;
    color: #096EFF !important;
}

/* ── Signature panel ── */
#viewprofile .panel.bg1 + .panel.bg1 {
    margin-top: 16px !important;
    border-radius: 12px !important;
}
#viewprofile .panel.bg1 + .panel.bg1 h3 {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
}


/* ═══════════════════════════════════════════════
   v127 — Profile Online/Offline corner ribbon
   ═══════════════════════════════════════════════ */

/* Kill the GIF */
#viewprofile .panel.bg1.online {
    background-image: none !important;
}

/* Avatar panel: clipping context for ribbon */
#viewprofile > div.panel.bg1:first-child {
    position: relative !important;
    overflow: hidden !important;
}

/* ONLINE — tricolor diagonal ribbon */
#viewprofile > div.panel.bg1.online::after {
    content: "ONLINE" !important;
    position: absolute !important;
    top: 22px !important;
    right: -30px !important;
    width: 114px !important;
    padding: 5px 0 !important;
    text-align: center !important;
    transform: rotate(45deg) !important;
    background: linear-gradient(90deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) !important;
    color: #ffffff !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
    z-index: 10 !important;
}

/* OFFLINE — slate ribbon */
#viewprofile > div.panel.bg1:first-child:not(.online)::after {
    content: "OFFLINE" !important;
    position: absolute !important;
    top: 22px !important;
    right: -30px !important;
    width: 114px !important;
    padding: 5px 0 !important;
    text-align: center !important;
    transform: rotate(45deg) !important;
    background: linear-gradient(90deg, #64748b, #94a3b8) !important;
    color: #ffffff !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    z-index: 10 !important;
}


/* ═══════════════════════════════════════════════
   v128 — PM Chat UI (Phase A)
   ═══════════════════════════════════════════════ */

/* ── PM Folder list: WhatsApp-style conversation rows ── */

/* Hide old table-style header row */
.topiclist.pmlist > li.header { display: none !important; }

/* Container: no bullet, flush edges */
.topiclist.pmlist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

/* Each conversation row */
.topiclist.pmlist li.row {
    padding: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    transition: background 120ms !important;
}
.topiclist.pmlist li.row:last-child { border-bottom: none !important; }
.topiclist.pmlist li.row:hover { background: #f8fafc !important; }

/* The dl inside each row: flex row */
.topiclist.pmlist li.row dl.row-item {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* dt: avatar area + message info */
.topiclist.pmlist li.row dl.row-item dt {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 16px !important;
    float: none !important;
}

/* Avatar circle (CSS pseudo-element, tricolor gradient) */
.topiclist.pmlist li.row dl.row-item dt::before {
    content: "\f007" !important;
    font-family: FontAwesome !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #096EFF 0%, #f59e0b 50%, #10B981 100%) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

/* list-inner: subject + sender/time info */
.topiclist.pmlist li.row dl.row-item dt .list-inner {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* Subject line */
.topiclist.pmlist li.row a.topictitle {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #0d1117 !important;
    text-decoration: none !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.topiclist.pmlist li.row a.topictitle:hover { color: #096EFF !important; }

/* Sender + time line */
.topiclist.pmlist li.row dl.row-item dt .list-inner > *:not(a):not(br) {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.73rem !important;
    color: #9ca3af !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Hide info dd and mark dd — keep ui clean */
.topiclist.pmlist li.row dl.row-item dd.info { display: none !important; }

/* Mark checkbox — small, right-aligned */
.topiclist.pmlist li.row dl.row-item dd.mark {
    float: none !important;
    padding: 0 16px 0 0 !important;
    flex-shrink: 0 !important;
}
.topiclist.pmlist li.row dl.row-item dd.mark input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: #096EFF !important;
}

/* Unread message indicator: blue dot left of avatar */
.topiclist.pmlist li.row.pm-new a.topictitle { font-weight: 700 !important; color: #0d1117 !important; }
.topiclist.pmlist li.row.pm-new dl.row-item dt::before {
    background: linear-gradient(135deg, #096EFF 0%, #10B981 100%) !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.18) !important;
}

/* Action bar above the list */
#viewfolder .action-bar.bar-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 12px 0 !important;
}
#viewfolder .action-bar a.specialbutton,
#viewfolder .action-bar a.button {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    background: #096EFF !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 7px 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
#viewfolder .action-bar a.specialbutton:hover { background: #0558d4 !important; }

/* Bottom controls */
#viewfolder .display-actions {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
}
#viewfolder .display-actions select,
#viewfolder .display-actions input.button2 {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
}


/* ── PM Message View: chat bubble ── */

/* Contain bubbles as flex column */
.post.pm > .inner {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
    gap: 0 !important;
    background: transparent !important;
}

/* Hide the heavy post-profile sidebar entirely */
.post.pm .postprofile { display: none !important; }

/* Postbody: the bubble itself */
.post.pm .postbody {
    max-width: 75% !important;
    border-radius: 18px !important;
    padding: 13px 17px !important;
    position: relative !important;
    margin: 0 !important;
}

/* Received bubble: left, gray */
.post.pm.pm-received .postbody {
    align-self: flex-start !important;
    background: #f1f5f9 !important;
    border-bottom-left-radius: 4px !important;
    color: #0d1117 !important;
}
/* Sent bubble: right, blue */
.post.pm.pm-sent .postbody {
    align-self: flex-end !important;
    background: #096EFF !important;
    color: #ffffff !important;
    border-bottom-right-radius: 4px !important;
}

/* Subject heading: hide in chat view (clutters the bubble) */
.post.pm .postbody h3.first { display: none !important; }

/* Sender/date info: compact, above the content */
.post.pm .postbody > p.author {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    border: none !important;
}
.post.pm.pm-received .postbody > p.author { color: #6b7280 !important; }
.post.pm.pm-sent .postbody > p.author { color: rgba(255,255,255,0.75) !important; }

/* Post action buttons (edit, delete, quote) — small, top-right corner of bubble */
.post.pm .postbody ul.post-buttons {
    float: right !important;
    margin: 0 0 6px 8px !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    gap: 4px !important;
}
.post.pm .postbody ul.post-buttons li { margin: 0 !important; }
.post.pm .postbody ul.post-buttons a.button {
    padding: 2px 5px !important;
    border-radius: 6px !important;
    opacity: 0.55 !important;
}
.post.pm .postbody ul.post-buttons a.button:hover { opacity: 1 !important; }
.post.pm.pm-sent .postbody ul.post-buttons a.button {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
}

/* Message content */
.post.pm .postbody .content {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}
.post.pm.pm-sent .postbody .content { color: #ffffff !important; }
.post.pm.pm-sent .postbody .content a { color: rgba(255,255,255,0.9) !important; text-decoration: underline !important; }

/* Signature: hide in bubble view */
.post.pm .postbody .signature { display: none !important; }

/* Back-to-top: hide */
.post.pm > .inner > .back2top { display: none !important; }

/* Move-to-folder / mark options bar: clean it up */
.post.pm ~ fieldset.display-options {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-top: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
}
.post.pm ~ fieldset.display-options select {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-size: 0.8rem !important;
}
.post.pm ~ fieldset.display-options input.button2 {
    background: #096EFF !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
}


/* ── PM Chat History (ucp_pm_history.html) ── */

/* Section heading */
h3.pm-history-toggle {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 8px !important;
    margin: 20px 0 0 0 !important;
}
h3.pm-history-toggle .right-box a {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    color: #096EFF !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* History container: vertical chat stack */
.pm-chat-history {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Each bubble in history */
.pm-bubble {
    display: flex !important;
    flex-direction: column !important;
    max-width: 75% !important;
    align-self: flex-start !important; /* default: received/left */
}

/* Current message being read: highlight right side */
.pm-bubble.pm-bubble-current {
    align-self: flex-end !important;
}

/* Alternating sides for past messages based on position */
.pm-bubble:nth-child(odd) { align-self: flex-start !important; }
.pm-bubble:nth-child(even) { align-self: flex-end !important; }
/* Current always overrides to right */
.pm-bubble.pm-bubble-current { align-self: flex-end !important; }

/* Meta: author + timestamp */
.pm-bubble-meta {
    display: flex !important;
    gap: 8px !important;
    align-items: baseline !important;
    margin-bottom: 3px !important;
    padding: 0 4px !important;
}
.pm-bubble-author {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #374151 !important;
}
.pm-bubble-author a { color: #096EFF !important; text-decoration: none !important; }
.pm-bubble-time {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    color: #9ca3af !important;
}

/* Bubble body */
.pm-bubble-body {
    border-radius: 16px !important;
    padding: 10px 14px !important;
    position: relative !important;
}
.pm-bubble:nth-child(odd) .pm-bubble-body {
    background: #f1f5f9 !important;
    border-bottom-left-radius: 4px !important;
    color: #0d1117 !important;
}
.pm-bubble:nth-child(even) .pm-bubble-body {
    background: #096EFF !important;
    border-bottom-right-radius: 4px !important;
    color: #ffffff !important;
}
/* Current message bubble: green tint to distinguish */
.pm-bubble.pm-bubble-current .pm-bubble-body {
    background: #10B981 !important;
    border-bottom-right-radius: 4px !important;
    color: #ffffff !important;
}

.pm-bubble-body .content {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
}

/* Quote button inside bubble */
a.pm-quote-btn {
    display: inline-block !important;
    margin-top: 6px !important;
    font-size: 0.7rem !important;
    opacity: 0.5 !important;
    color: inherit !important;
    text-decoration: none !important;
}
a.pm-quote-btn:hover { opacity: 1 !important; }

/* View link at bottom of history current marker */
a.pm-bubble-view-link { display: none !important; }


/* ═══════════════════════════════════════════════
   v129 — PM folder list fixes + compose cleanup
   ═══════════════════════════════════════════════ */

/* ── Hide the "Message | Mark" column header bar ── */
#viewfolder ul.topiclist.two-columns { display: none !important; }

/* ── Fix div.list-inner: was flex-column which broke text nodes into separate lines ── */
.topiclist.pmlist li.row dl.row-item dt .list-inner {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Subject link: block so it sits on its own line */
.topiclist.pmlist li.row dl.row-item dt .list-inner a.topictitle {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #0d1117 !important;
    text-decoration: none !important;
    margin-bottom: 3px !important;
}
.topiclist.pmlist li.row dl.row-item dt .list-inner a.topictitle:hover { color: #096EFF !important; }

/* Author + time: single compact line below subject */
.topiclist.pmlist li.row span.pm-meta {
    display: block !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    color: #9ca3af !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
}
.topiclist.pmlist li.row span.pm-meta a {
    color: #6b7280 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.topiclist.pmlist li.row span.pm-meta strong { font-weight: inherit !important; }

/* ── Compose message: cleanup ── */

/* Hide the PM icon selector row (clutter) */
.postbody dl dt label[for*="icon"],
dl dt:has(label[for="icon_msg"]),
dl dd:has(input[name="icon"]),
dl.message-rules-text dt,
dl.message-rules-text dd { /* fallback */ }

/* Target PM icon fieldset more reliably via the radio inputs */
#message-box .pm_icon_row,
form[action*="ucp"] fieldset:has(input[name="icon"]),
#compose-pm dt:has(label[for*="icon"]),
form[action*="mcp"] fieldset:has(input[name="icon"]) { display: none !important; }

/* PM compose: recipient textarea → clean input style */
#compose-pm textarea#username_list,
form[action*="pm"] textarea[name="username_list"],
#username_list {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    resize: vertical !important;
    min-height: 60px !important;
    max-height: 80px !important;
    line-height: 1.5 !important;
}

/* Add / Add [BCC] / Find a member buttons
   `:not([name="login"])` keeps this off the login page. The login form posts to
   ucp.php?mode=login, so it matches form[action*="ucp"], and its submit is an
   input.button2 named "login" — which none of the three :not() guards excluded.
   The board's primary sign-in action was therefore being painted as the small
   grey secondary chip meant for "Add" and "Find a member", ending up paler and
   13px shorter than the Register button beside it. See the login section at the
   end of this sheet. */
form[action*="ucp"] input[name="add_to"],
form[action*="ucp"] input[name="add_bcc"],
form[action*="ucp"] input.button2:not([name="submit"]):not([name="submit_mark"]):not([name="move_pm"]):not([name="login"]),
form[action*="mcp"] input[name="add_to"],
form[action*="mcp"] input[name="add_bcc"],
form[action*="mcp"] input.button2:not([name="submit"]):not([name="submit_mark"]):not([name="move_pm"]):not([name="login"]) {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    color: #374151 !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    cursor: pointer !important;
}
form[action*="ucp"] input[name="add_to"]:hover,
form[action*="ucp"] input[name="add_bcc"]:hover,
form[action*="mcp"] input[name="add_to"]:hover,
form[action*="mcp"] input[name="add_bcc"]:hover {
    background: #e2e8f0 !important;
    border-color: #096EFF !important;
}

/* "Find a member" link */
form[action*="ucp"] a[href*="memberlist"],
form[action*="mcp"] a[href*="memberlist"] {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    color: #096EFF !important;
    font-weight: 500 !important;
}

/* Compose heading */
#cp-main h2:first-of-type {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #0d1117 !important;
    padding-left: 14px !important;
    border-left: 4px solid transparent !important;
    border-image: linear-gradient(180deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) 1 !important;
}

/* Subject input */
#subject {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
}
#subject:focus {
    border-color: #096EFF !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.1) !important;
}


/* v129-fix: restore message list — the pmlist ul also has two-columns class in inbox mode */
#viewfolder ul.topiclist.two-columns { display: block !important; }   /* undo the blanket hide */
#viewfolder ul.topiclist.two-columns:not(.pmlist) { display: none !important; }  /* only hide the header ul */


/* ═══════════════════════════════════════════════
   v129-b — PM inbox polish
   ═══════════════════════════════════════════════ */

/* Tighter row padding (was 13px, WhatsApp-style 10px) */
.topiclist.pmlist li.row dl.row-item dt {
    padding: 10px 14px !important;
}

/* Left blue accent on hover */
.topiclist.pmlist li.row {
    border-left: 3px solid transparent !important;
    transition: background 120ms, border-color 120ms !important;
}
.topiclist.pmlist li.row:hover {
    border-left-color: #096EFF !important;
    background: #f8fafc !important;
}

/* Unread row: bold subject + glowing circle + amber left accent */
.topiclist.pmlist li.row.pm-new {
    border-left-color: #f59e0b !important;
}
.topiclist.pmlist li.row.pm-new a.topictitle {
    color: #096EFF !important;
    font-weight: 700 !important;
}

/* Bottom export/mark bar: subtle, de-emphasised */
#viewfolder fieldset.display-actions {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    background: transparent !important;
    padding: 8px 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.76rem !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
#viewfolder fieldset.display-actions select {
    font-size: 0.75rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 5px !important;
    padding: 2px 6px !important;
    color: #6b7280 !important;
}
#viewfolder fieldset.display-actions input.button2 {
    font-size: 0.75rem !important;
    background: #f1f5f9 !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 5px !important;
    padding: 2px 10px !important;
    cursor: pointer !important;
}
#viewfolder fieldset.display-actions .left-box { display: none !important; } /* hide export CSV */
#viewfolder fieldset.display-actions > div:last-child { margin-left: auto !important; } /* push mark all right */

/* Bottom sort/display bar */
#viewfolder .action-bar.bottom {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 10px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* UCP PM sidebar: subtle styling */
#cp-left a[href*="i=pm"] {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}
#cp-left a[href*="i=pm"]:hover { color: #096EFF !important; }
#cp-left a[href*="i=pm"][class*="active"],
#cp-left .nav-active a[href*="i=pm"] {
    color: #096EFF !important;
    font-weight: 700 !important;
}


/* ── Fix: restore posting editor fieldset hidden by over-broad :has rule ── */
form[action*="ucp"] fieldset,
form[action*="mcp"] fieldset { display: block !important; }
#postingbox fieldset { display: block !important; }

/* Hide ONLY the PM icon selection row (dl containing icon radios) */
#postingbox dl:has(input[type="radio"][name="icon"]) { display: none !important; }


/* ── BBCode toolbar: darken faint icons to match B/I/U visibility ── */
input.postingbuttons {
    background-color: #e8edf4 !important;
    filter: brightness(0.35) drop-shadow(0 1px 1px rgba(0,0,0,0.15)) !important;
}
input.postingbuttons:hover {
    background-color: #d6e4ff !important;
    border-color: #096EFF !important;
    filter: brightness(0.25) drop-shadow(0 1px 2px rgba(9,110,255,0.3)) !important;
}


/* ── BBCode toolbar: white background like Normal/Custom BBCodes dropdowns ── */
input.postingbuttons {
    background-color: #ffffff !important;
    filter: brightness(0.35) !important;
    border-color: transparent !important;
}
input.postingbuttons:hover {
    background-color: #eff6ff !important;
    border-color: #096EFF !important;
    filter: brightness(0.25) !important;
}


/* ── BBCode toolbar: white background, no filter, clean natural icons ── */
input.postingbuttons {
    background-color: #ffffff !important;
    filter: none !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    padding: 2px !important;
}
input.postingbuttons:hover {
    background-color: #eff6ff !important;
    border-color: #096EFF !important;
    filter: none !important;
}


/* ── PM Name Suggestions autocomplete dropdown ── */
#pcgf_pmnamesuggestionlist {
    background: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(9,110,255,0.13), 0 2px 8px rgba(0,0,0,0.07) !important;
    overflow: hidden !important;
    min-width: 240px !important;
    padding: 4px 0 !important;
    z-index: 9999 !important;
}
#pcgf_pmnamesuggestionlist > ul {
    margin: 0 !important;
    padding: 4px 0 !important;
}
#pcgf_pmnamesuggestionlist > ul > li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    border-left: 3px solid transparent !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: background 100ms, border-color 100ms !important;
    white-space: nowrap !important;
}
#pcgf_pmnamesuggestionlist > ul > li:last-child {
    border-bottom: none !important;
}
/* Tricolor avatar circle */
#pcgf_pmnamesuggestionlist > ul > li::before {
    content: "\f007";
    font-family: FontAwesome;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #096EFF 0%, #f59e0b 50%, #10B981 100%);
    color: #ffffff;
    font-size: 0.72rem;
    flex-shrink: 0;
}
/* Selected / hover state */
#pcgf_pmnamesuggestionlist > ul > li.selected {
    background: #eff6ff !important;
    border-left-color: #096EFF !important;
    color: #096EFF !important;
    font-weight: 600 !important;
}
#pcgf_pmnamesuggestionlist > ul > li.selected::before {
    background: linear-gradient(135deg, #0553cc, #096EFF) !important;
    box-shadow: 0 2px 8px rgba(9,110,255,0.35) !important;
}
/* If an avatar image is present, hide it — ::before circle is consistent */
#pcgf_pmnamesuggestionlist > ul > li > img {
    display: none !important;
}


/* ── PM view: stack bubbles vertically, contain width ── */
.post.pm > .inner { overflow: hidden !important; }
.post.pm .postbody {
    max-width: 100% !important;
    align-self: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.post.pm.pm-received .postbody { align-self: stretch !important; border-bottom-left-radius: 18px !important; }
.post.pm.pm-sent .postbody { align-self: stretch !important; border-bottom-right-radius: 18px !important; }

/* History: stack all bubbles vertically, full-width contained */
.pm-chat-history { overflow: hidden !important; }
.pm-bubble,
.pm-bubble:nth-child(odd),
.pm-bubble:nth-child(even),
.pm-bubble.pm-bubble-current {
    align-self: stretch !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.pm-bubble-body {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
}
/* Keep color differentiation: odd=gray, even=blue, current=green */
.pm-bubble:nth-child(odd) .pm-bubble-body { background: #f1f5f9 !important; color: #1e293b !important; border-bottom-left-radius: 4px !important; }
.pm-bubble:nth-child(even) .pm-bubble-body { background: #e0edff !important; color: #1e3a5f !important; border-bottom-right-radius: 4px !important; }
.pm-bubble.pm-bubble-current .pm-bubble-body { background: #d1fae5 !important; color: #064e3b !important; }

/* ── Quick Reply box at bottom of message view ── */
.pm-quick-reply-wrap {
    margin: 20px 0 12px 0;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(9,110,255,0.07);
}
.pm-quick-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) 1;
}
.pm-qr-forward-link {
    font-weight: 500;
    color: #6b7280 !important;
    font-size: 0.78rem;
    text-decoration: none !important;
}
.pm-qr-forward-link:hover { color: #096EFF !important; }
.pm-quick-reply-wrap textarea {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 12px 16px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.9rem;
    color: #1e293b;
    border: none;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    background: #ffffff;
    line-height: 1.55;
}
.pm-quick-reply-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}
.pm-qr-full-link {
    font-size: 0.78rem;
    color: #6b7280 !important;
    text-decoration: none !important;
}
.pm-qr-full-link:hover { color: #096EFF !important; }
.pm-qr-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: #096EFF;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms;
}
.pm-qr-send-btn:hover { background: #0553cc !important; }


/* ════════════════════════════════════════════════════════
   UCP — Global Layout & Left Sidebar Navigation
   ════════════════════════════════════════════════════════ */

/* Sidebar panel */
#cp-menu {
    background: #ffffff !important;
    border-right: 1px solid #f1f5f9 !important;
    border-radius: 12px 0 0 12px !important;
    /* THE 1px THAT DROPPED #cp-main BELOW THE SIDEBAR (diagnosed 2026-08-02).
       cp.css floats `.cp-menu` at width:19% and `.cp-main` at width:81% — they fill the
       row exactly, with zero slack. Unlike the topiclists, these two are `content-box`,
       so the `border-right` above was added OUTSIDE the 19%: 331.55 + 1 = 333, plus
       1413 = 1746 against a 1745px parent. One pixel over, and the second float wraps.

       That is the whole story behind the "accidental redesign" of the UCP into a
       stacked layout — no rule ever asked for stacking. The giveaway was in this very
       block: `border-radius: 12px 0 0 12px` here and `0 12px 12px 0` on #cp-main.cp-main
       are the left and right halves of ONE rounded card. Stacked, this panel had a
       rounded left edge and a divider border leading nowhere.

       border-box pulls the border inside the 19% and the row fits again. Do not remove
       the border to fix this — the divider is the seam between the two halves. */
    box-sizing: border-box !important;
}

/* Nav list reset */
#cp-menu #navigation ul {
    list-style: none !important;
    padding: 6px 0 !important;
    margin: 0 !important;
}

/* Every nav link */
#cp-menu #navigation ul li a,
#cp-menu #navigation ul li a span {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 9px 16px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
    transition: background 120ms, color 120ms, border-color 120ms !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Chevron icon on every nav item */
#cp-menu #navigation ul li a::before {
    content: "\f054";
    font-family: FontAwesome;
    font-size: 0.65rem;
    color: #cbd5e1;
    min-width: 12px;
    flex-shrink: 0;
    transition: color 120ms;
}

/* Hover */
#cp-menu #navigation ul li a:hover,
#cp-menu #navigation ul li a:hover span {
    background: #eff6ff !important;
    color: #096EFF !important;
    border-left-color: rgba(9,110,255,0.35) !important;
}
#cp-menu #navigation ul li a:hover::before { color: #096EFF !important; }

/* Active / selected item */
#cp-menu #navigation ul li#active-subsection > a,
#cp-menu #navigation ul li.active-subsection > a,
#cp-menu #navigation ul li#active-subsection > a span,
#cp-menu #navigation ul li.active-subsection > a span {
    background: linear-gradient(90deg, rgba(9,110,255,0.1), rgba(9,110,255,0.03)) !important;
    color: #096EFF !important;
    font-weight: 700 !important;
    border-left-color: #096EFF !important;
}
#cp-menu #navigation ul li#active-subsection > a::before,
#cp-menu #navigation ul li.active-subsection > a::before {
    content: "\f192" !important; /* fa-dot-circle */
    color: #096EFF !important;
}

/* Section separator */
#cp-menu #navigation hr {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    margin: 6px 12px !important;
}

/* PM folder items in sidebar */
#cp-menu #navigation ul li a strong {
    color: #096EFF !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════
   UCP — Main Content Area
   ════════════════════════════════════════════════════════ */

/* Main panel container */
#cp-main.cp-main {
    background: #ffffff !important;
    border-radius: 0 12px 12px 0 !important;
}

/* Section headings inside cp-main */
#cp-main h2 {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 0 0 12px 16px !important;
    margin: 0 0 20px 0 !important;
    border-left: 4px solid transparent !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-image: linear-gradient(180deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%) 1 !important;
}

#cp-main h3 {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 16px 0 6px 0 !important;
    margin: 0 0 12px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Welcome intro text */
#cp-main .panel > .inner > p:first-of-type {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    color: #64748b !important;
    line-height: 1.65 !important;
    padding: 12px 16px !important;
    background: #f8fafc !important;
    /* Crescent, on purpose. border-radius on all four corners curves the 4px
       border-left into a "moon" that tapers top and bottom — this is the intended
       TSSFL motif, not an artefact. Keep the radius on all corners. */
    border-radius: 10px !important;
    border-left: 4px solid #096EFF !important;
    margin-bottom: 20px !important;
}

/* Activity stats dl — 2-column grid */
#cp-main dl.details {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px 20px !important;
    align-items: baseline !important;
    float: none !important;
}

#cp-main dl.details dt {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#cp-main dl.details dd {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* FA icons on stat dt labels */
#cp-main dl.details dt:nth-of-type(1)::before {
    content: "\f073"; font-family: FontAwesome;
    color: #096EFF; font-size: 0.85rem;
}
#cp-main dl.details dt:nth-of-type(2)::before {
    content: "\f017"; font-family: FontAwesome;
    color: #10B981; font-size: 0.85rem;
}
#cp-main dl.details dt:nth-of-type(3)::before {
    content: "\f0e5"; font-family: FontAwesome;
    color: #f59e0b; font-size: 0.85rem;
}
#cp-main dl.details dt:nth-of-type(4)::before {
    content: "\f1b2"; font-family: FontAwesome;
    color: #096EFF; font-size: 0.85rem;
}
#cp-main dl.details dt:nth-of-type(5)::before {
    content: "\f0e8"; font-family: FontAwesome;
    color: #10B981; font-size: 0.85rem;
}

/* Link styling inside stats */
#cp-main dl.details dd a {
    color: #096EFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#cp-main dl.details dd a:hover { text-decoration: underline !important; }

/* Warning dd */
#cp-main dl.details dd.error {
    background: rgba(239,68,68,0.06) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    color: #dc2626 !important;
}


/* ════════════════════════════════════════════════════════
   UCP Overview — Sidebar gap + list/table improvements
   ════════════════════════════════════════════════════════ */

/* Remove blank top gap in sidebar */
#cp-menu .navigation { padding-top: 0 !important; }
.panel.bg3 > .inner { padding-top: 12px !important; padding-bottom: 12px !important; }
#cp-menu .cp-mini { margin-top: 8px !important; }

/* ── List/table header rows ──
   Flat #096EFF, NOT a gradient. The old
   `linear-gradient(90deg, #064fc8 0%, #096EFF 60%, #0582e8 100%)` started dark at the
   left edge, which read as a second darker crescent sitting between the real accent
   crescent and the column label — the bar is meant to be: crescent, gap, label, and
   then one even colour all the way across. The dark stop was also invisible to
   getComputedStyle on li.header itself, since it lived on the inner dl, which made it
   easy to mistake for a rendering artefact. Keep this flat. */
#cp-main .topiclist li.header dl,
#cp-main .cplist li.header dl {
    background: #096EFF !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
}
#cp-main .topiclist li.header dl dt,
#cp-main .topiclist li.header dl dd,
#cp-main .cplist li.header dl dt,
#cp-main .cplist li.header dl dd {
    color: #ffffff !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    background: transparent !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ── List rows ── */
#cp-main .topiclist li.row,
#cp-main .cplist li.row {
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    transition: background 100ms !important;
}
#cp-main .topiclist li.row:hover,
#cp-main .cplist li.row:hover { background: #f8fafc !important; }

/* Topic/draft title link */
#cp-main .topiclist li.row dl dt a.topictitle,
#cp-main .topiclist li.row dl dt a {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
}
#cp-main .topiclist li.row dl dt a.topictitle:hover,
#cp-main .topiclist li.row dl dt a:hover { color: #096EFF !important; }

/* Sub-info: "by Author » time", "Forum: X", file size — must stay one line (title
   line + this line = 2 lines total per row, not 3), so force nowrap with a graceful
   ellipsis fallback rather than letting it wrap onto its own extra line. */
#cp-main .topiclist li.row dl dt .responsive-hide,
#cp-main .topiclist li.row dl dt span.small,
#cp-main .topiclist li.row dl dt p {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Forum / Topic label links in drafts.
   Excludes .forumtitle: this rule was also catching the Watched Forums row title,
   rendering it blue at 0.8rem/500 while Watched Topics titles were #1e293b at
   0.9rem/600. Besides looking inconsistent, the smaller line-height put the forum
   title's centre 1.1px higher than a topic title's, so the shared icon rule
   (centred at 26px) was 1.2px out on Watched Forums but 0.1px on Watched Topics.
   Letting .forumtitle fall through to the base title rule fixes both. */
#cp-main .topiclist li.row dl dt a:not(.topictitle):not(.forumtitle) {
    color: #096EFF !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
}
/* Watched Forums titles: brand blue, but COLOUR ONLY.
   Deliberately does NOT set font-size, font-weight or line-height — those must stay
   identical to a.topictitle (0.9rem/600). The rule above used to colour these blue
   by also shrinking them to 0.8rem/500, which moved the title's line centre 1.1px up
   and put the shared icon offset 1.2px out on this list. Restoring the colour is
   safe; restoring the metrics is not. If you add a declaration here, make sure it
   cannot affect the line box. Specificity (0,1,3,4) beats the base title rule
   (0,1,2,4), so this wins on colour without touching anything else. */
#cp-main .topiclist li.row dl dt a.forumtitle {
    color: #096EFF !important;
}

/* Last post / saved-at column */
#cp-main .topiclist li.row dl dd.lastpost span,
#cp-main .topiclist li.row dl dd {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    color: #64748b !important;
}

/* Load draft - View/Edit action links */
#cp-main .topiclist li.row dl dd a {
    display: inline-block !important;
    color: #096EFF !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-decoration: none !important;
}
#cp-main .topiclist li.row dl dd a:hover { text-decoration: underline !important; }

/* Checkbox column */
#cp-main .topiclist li.row dl dd.mark,
#cp-main .topiclist li.row dl dd.check {
    text-align: center !important;
}

/* Attachment file info */
#cp-main .topiclist li.row dl dt span {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    display: block !important;
}

/* Pagination row inside list — right-aligned so it sits flush beside the
   Last post column instead of floating under the title on its own. */
#cp-main .topiclist li.row dl dt div.pagination {
    margin-top: 4px !important;
    font-size: 0.75rem !important;
    text-align: right !important;
}
/* MOBILE: give the per-topic pager its own line.
   common.css:839 sets `.pagination { float: right }`. On a wide desktop row that is what
   parks the page pills neatly beside the Last post column. On a phone the byline that
   follows it wraps AROUND the float instead, so "LAST POST BY ELI « 2 weeks ago" came
   out fragmented as "LA / ST / POST BY ELI …" with the pills wedged into the gap.
   Dropping the float and clearing makes it a normal block line between the title and the
   byline, so the byline stays intact. */
@media (max-width: 700px) {
    #cp-main .topiclist li.row dl dt div.pagination {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin: 7px 0 3px !important;
    }
}

/* ════════════════════════════════════════════════════════
   UCP lists (Subscriptions / Drafts / Attachments) — flex rows +
   bold, elegant counts/pagination to match the forum topic list
   ════════════════════════════════════════════════════════ */

/* DESKTOP ONLY (>=701px). Everything in this block is a multi-column layout that
   assumes a wide row. Below 701px phpBB's responsive.css deliberately collapses these
   lists to a single column — it hides every dd, absolutely positions dd.mark top-right,
   and swaps the .responsive-hide byline for the .responsive-show one inside dt.
   These rules used to be unscoped, which broke that completely: `display:flex !important`
   on dd.lastpost/dd.extra re-showed columns responsive.css had hidden, and the fixed
   widths (170 + 70 + 50 + 48px margin) consumed the whole ~380px phone viewport, leaving
   dt (which has min-width:0, so flex may shrink it to nothing) a few pixels wide. Result
   was one character per line. Keep this media query — do not add layout rules for these
   lists outside it. */
@media (min-width: 701px) {

/* Force a single-row flex layout so header/row dl's with 3-4 dd's
   (extra/time/mark, lastpost/mark) never wrap into the generic
   profile-field 2-col grid from `form#ucp dl`. Same fix as the
   notification list. */
#cp-main .topiclist li.header dl,
#cp-main .topiclist li.row dl,
#cp-main .cplist li.header dl,
#cp-main .cplist li.row dl {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 10px !important;
}
/* margin:0 as well as padding:0 — content.css:120 sets `li.header dt, li.header dd
   { margin: 14px 0 }`. Flex centring accounts for margins, so that 14px pushed the
   dt DOWN inside the bar: the left column label's text centre sat at 21.5px against
   a header centre of 17.4px, while the right-hand dd (whose margin was already
   overridden elsewhere) sat at 16.8px. That is why every left column title looked
   low next to the right-hand ones. Zeroing the margin lets align-items:center put
   both on the same line. */
#cp-main .topiclist li.header dl dt,
#cp-main .topiclist li.row dl dt,
#cp-main .cplist li.header dl dt,
#cp-main .cplist li.row dl dt {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#cp-main .topiclist li.header dl dd,
#cp-main .topiclist li.row dl dd,
#cp-main .cplist li.header dl dd,
#cp-main .cplist li.row dl dd {
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Fixed (not min-) widths, applied identically to header AND row dd's, so column
   edges line up exactly regardless of how long any one row's content happens to be. */
#cp-main .topiclist li.header dl dd.mark,
#cp-main .topiclist li.row dl dd.mark,
#cp-main .cplist li.header dl dd.mark,
#cp-main .cplist li.row dl dd.mark {
    width: 50px !important;
    text-align: center !important;
    margin-left: 48px !important;
}
#cp-main .topiclist li.row dl dd.mark,
#cp-main .cplist li.row dl dd.mark {
    padding-left: 16px !important;
    border-left: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
}

} /* end @media (min-width: 701px) — desktop row layout */

/* Modern, clearly-clickable checkbox: rounded corners, brand accent, hover feedback —
   default browser checkboxes render as flat, hard-edged squares that read as inert.
   Intentionally OUTSIDE the desktop media query: on mobile responsive.css keeps dd.mark
   visible (absolutely positioned top-right), so the checkbox is styled there too. */
#cp-main .topiclist li.row dl dd.mark input[type="checkbox"],
#cp-main .cplist li.row dl dd.mark input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    accent-color: #096EFF !important;
    transition: border-color 120ms, background 120ms !important;
    flex-shrink: 0 !important;
}
#cp-main .topiclist li.row dl dd.mark input[type="checkbox"]:hover,
#cp-main .cplist li.row dl dd.mark input[type="checkbox"]:hover {
    border-color: #096EFF !important;
}
#cp-main .topiclist li.row dl dd.mark input[type="checkbox"]:checked,
#cp-main .cplist li.row dl dd.mark input[type="checkbox"]:checked {
    background: #096EFF !important;
    border-color: #096EFF !important;
}
#cp-main .topiclist li.row dl dd.mark input[type="checkbox"]:checked::after,
#cp-main .cplist li.row dl dd.mark input[type="checkbox"]:checked::after {
    content: '' !important;
    display: block !important;
    width: 5px !important;
    height: 9px !important;
    margin: 1px auto 0 !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
/* DESKTOP ONLY — see the note on the media query above. The `display:flex` rules here
   are the ones that re-showed columns responsive.css hides on phones. */
@media (min-width: 701px) {

#cp-main .topiclist li.header dl dd.lastpost,
#cp-main .topiclist li.row dl dd.lastpost,
#cp-main .cplist li.header dl dd.lastpost,
#cp-main .cplist li.row dl dd.lastpost,
#cp-main .cplist li.header dl dd.time,
#cp-main .cplist li.row dl dd.time {
    width: 170px !important;
    text-align: right !important;
}
#cp-main .topiclist li.row dl dd.lastpost,
#cp-main .cplist li.row dl dd.lastpost,
#cp-main .cplist li.row dl dd.time {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    align-self: stretch !important;
}
#cp-main .cplist li.header dl dd.extra,
#cp-main .cplist li.row dl dd.extra {
    width: 70px !important;
    text-align: center !important;
}
#cp-main .cplist li.row dl dd.extra {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
}

} /* end @media (min-width: 701px) — desktop lastpost/time/extra columns */

/* ── Downloads count (Attachments) — bold, colored, iconed, like the forum Views column ── */
#cp-main .cplist li.row dl dd.extra {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #096EFF !important;
    line-height: 1 !important;
}
#cp-main .cplist li.row dl dd.extra::before {
    content: "\f019" !important;
    font-family: FontAwesome !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: #096EFF !important;
    display: block !important;
    margin-bottom: 3px !important;
    line-height: 1 !important;
}

/* ── Last post / Post time column — tighter, more legible ── */
#cp-main .topiclist li.row dl dd.lastpost span,
#cp-main .cplist li.row dl dd.lastpost span,
#cp-main .cplist li.row dl dd.time span {
    line-height: 1.4 !important;
}
#cp-main .topiclist li.row dl dd.lastpost dfn,
#cp-main .cplist li.row dl dd.lastpost dfn {
    font-style: normal !important;
    color: #9ca3af !important;
}

/* ── Pagination — inline per-topic pager (Watched Topics, multi-page topics)
     and the list-level pager (Attachments, Drafts) — small elegant number pills ── */
#cp-main div.pagination ul {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#cp-main div.pagination ul li { display: inline-flex !important; }
#cp-main div.pagination ul li a,
#cp-main div.pagination ul li.active span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    border-radius: 5px !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-decoration: none !important;
}
#cp-main div.pagination ul li a {
    background: #eff6ff !important;
    color: #096EFF !important;
}
#cp-main div.pagination ul li a:hover {
    background: #096EFF !important;
    color: #ffffff !important;
}
#cp-main div.pagination ul li.active span {
    background: #096EFF !important;
    color: #ffffff !important;
}
#cp-main div.pagination ul li.ellipsis span {
    background: transparent !important;
    color: #94a3b8 !important;
    min-width: auto !important;
}

/* ── Manage Notifications (compact, elegant) ── */

/* Reset the generic UCP dl-grid for notification rows — they don't use the label/value
   layout. DESKTOP ONLY: below 701px responsive.css pulls dd.mark out of flow
   (position:absolute, top-right), so a flex row here would let the checkbox overlap the
   notification text — ucp_notifications.html uses a plain .list-inner, not
   .list-inner.with-mark, so nothing reserves space for it. Mobile is handled below. */
@media (min-width: 701px) {
.notification_list ul.topiclist.cplist li.row dl {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 12px !important;
    border-bottom: none !important;
}
.notification_list ul.topiclist.cplist li.row dl dt {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
}
.notification_list ul.topiclist.cplist li.row dl dd.mark {
    flex: 0 0 auto !important;
    padding: 0 !important;
}
} /* end @media (min-width: 701px) — desktop notification row layout */

/* MOBILE (<=700px): a notification is a stacked card — avatar pinned to the first text
   line, then title / forum / reason / time each on their own wrapped rows, with the
   right edge kept clear of the checkbox responsive.css pins at right:5px. */
@media (max-width: 700px) {
.notification_list ul.topiclist.cplist li.row dl {
    display: block !important;
    grid-template-columns: none !important;
    padding: 11px 12px !important;
    position: relative !important;
}
.notification_list ul.topiclist.cplist li.row dl dt {
    padding: 0 !important;
    margin: 0 !important;
}
/* flex-start (not the desktop `center`): with a multi-line title, centring the avatar
   against the whole block leaves it floating beside the middle line. 34px right padding
   clears the checkbox. `#cp-main` prefix is deliberate — the shared avatar rule below
   is declared later in the file at otherwise-equal specificity, so without it that rule
   would win and re-centre the avatar. */
#cp-main .notification_list ul.topiclist.cplist li.row .list-inner {
    align-items: flex-start !important;
    gap: 10px !important;
    padding-right: 34px !important;
}
#cp-main .notification_list ul.topiclist.cplist li.row .list-inner > img,
#cp-main .notification_list ul.topiclist.cplist li.row .list-inner > a > img,
#cp-main .notification_list ul.topiclist.cplist li.row .list-inner > span.avatar,
#cp-main .notification_list ul.topiclist.cplist li.row .list-inner > .tssfl-av-letter,
#cp-main .notification_list ul.topiclist.cplist li.row .list-inner > .tssfl-av-wordmark {
    width: 38px !important;
    height: 38px !important;
    margin-top: 1px !important;
}
/* These four beat `#cp-main .topiclist li.row dl dt p` (1,2,4 + !important), which sets
   white-space:nowrap + overflow:hidden for the subscriptions byline and was clipping
   every notification title to a single truncated line. Do not lower this specificity. */
#cp-main .notification_list .topiclist li.row dl dt p.notifications_title,
#cp-main .notification_list .topiclist li.row dl dt p.notifications_forum,
#cp-main .notification_list .topiclist li.row dl dt p.notifications_reason,
#cp-main .notification_list .topiclist li.row dl dt p.notifications_time {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
}
#cp-main .notification_list .topiclist li.row dl dt p.notifications_title {
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
}
#cp-main .notification_list .topiclist li.row dl dt p.notifications_forum,
#cp-main .notification_list .topiclist li.row dl dt p.notifications_reason {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    margin-top: 3px !important;
}
#cp-main .notification_list .topiclist li.row dl dt p.notifications_time {
    font-size: 0.7rem !important;
    color: #94a3b8 !important;
    margin-top: 4px !important;
}
}

/* Row background / hover / unread accent */
.notification_list ul.topiclist.cplist li.row {
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    transition: background 100ms !important;
}
.notification_list ul.topiclist.cplist li.row:hover { background: #f8fafc !important; }
.notification_list ul.topiclist.cplist li.row.bg3 {
    background: #f0f7ff !important;
    /* Inset shadow, NOT border-left: a 3px border adds to the box and pushed unread
       rows' content to 15px while read rows sat at 12px — a ragged left edge within
       one list (measured 24 rows at 15, 1 at 12). A shadow paints the same accent
       without consuming layout width, so every row stays on the 12px rail. */
    border-left: 0 !important;
    box-shadow: inset 3px 0 0 #096EFF !important;
}

/* Avatar circle: kept, vertically centered against the text block beside it.
   tssfl_avatars.js may replace the no_avatar.gif <img> with a .tssfl-av-letter/-wordmark
   div at runtime — style both the same way so alignment holds either way.
   `ul.topiclist.cplist li.row` is load-bearing: the header's dt also contains a
   .list-inner, and turning THAT into a flex container made `text-align: center`
   inert (the bare text node becomes an anonymous flex item parked at flex-start),
   which is why the NOTIFICATIONS header title would not centre on mobile while every
   other list's did. Rows live in ul.topiclist.cplist, the header in a separate
   ul.topiclist — so scoping to .cplist li.row excludes the header cleanly. */
.notification_list ul.topiclist.cplist li.row .list-inner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-left: 0 !important;
}
.notification_list ul.topiclist.cplist li.row .list-inner > img,
.notification_list ul.topiclist.cplist li.row .list-inner > a > img,
.notification_list ul.topiclist.cplist li.row .list-inner > span.avatar,
.notification_list ul.topiclist.cplist li.row .list-inner > .tssfl-av-letter,
.notification_list ul.topiclist.cplist li.row .list-inner > .tssfl-av-wordmark {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
}
.notification_list ul.topiclist.cplist li.row .list-inner > .notifications {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Notification title — bold, large, dark */
.notification_list p.notifications_title {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
.notification_list p.notifications_title a {
    color: #0f172a !important;
    text-decoration: none !important;
}
.notification_list p.notifications_title a:hover {
    color: #096EFF !important;
    text-decoration: underline !important;
}

/* Forum / post reference */
.notification_list p.notifications_forum {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #096EFF !important;
    line-height: 1.3 !important;
    margin: 1px 0 0 !important;
}

/* Reason — inline body copy, so Inter */
.notification_list p.notifications_reason {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.3 !important;
    margin: 1px 0 0 !important;
}

/* Timestamp */
.notification_list p.notifications_time {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.7rem !important;
    color: #94a3b8 !important;
    margin: 2px 0 0 !important;
}

.notification_list dd.mark input[type="checkbox"] { margin: 0 !important; }

/* ── Manage subscriptions: unwatch button ── */
#cp-main fieldset.submit-buttons input.button2[name*="unwatch"],
#cp-main fieldset.submit-buttons input.button1[name*="unwatch"] {
    border-radius: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    padding: 7px 16px !important;
}

/* ── "Mark all notifications read" link ── */
#cp-main a[href*="mark_all"] {
    color: #10B981 !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    text-decoration: none !important;
}
#cp-main a[href*="mark_all"]:hover { text-decoration: underline !important; }

/* ── UCP list action bar: "Delete marked" / "Unwatch marked" + "Mark all • Unmark all" ──
   Core forms.css only gives the fieldset `text-align: right`, so the links <div> — a
   block element after the submit button — dropped onto its own line and, once the
   surrounding fieldset padding was reset, sat hard against the left edge with the
   bullet unspaced. Lay it out explicitly instead. DOM order is <input> then <div>, so
   row-reverse puts the primary action on the right and the links on the left.
   S_FORM_TOKEN's hidden inputs are display:none per UA stylesheet, so they add no gap. */
#cp-main fieldset.display-actions {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    text-align: left !important;
    white-space: normal !important;
    border: none !important;
    padding: 12px 2px 2px !important;
    margin-top: 4px !important;
}
#cp-main fieldset.display-actions > div {
    font-size: 0.82rem !important;
    color: #cbd5e1 !important;   /* the • separator */
}
#cp-main fieldset.display-actions > div a {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #096EFF !important;
    text-decoration: none !important;
    padding: 0 4px !important;
}
#cp-main fieldset.display-actions > div a:hover { text-decoration: underline !important; }

/* ── MOBILE: list header = centred title only ──
   phpBB's responsive.css already centres `li.header dt`, but our 42px `.list-inner`
   indent (there to clear the row status icon) also applied to the header of any list
   whose header dl carries .row-item — subscriptions/drafts/attachments do, notifications
   doesn't — so the centring was measured inside an indented box and the title sat right
   of true centre, inconsistently between pages. Headers have no icon, so zero the indent
   and let the centring act on the full bar. The MARK / MARK READ label is hidden on
   phones: the column it labels is itself hidden there, and the checkbox is pinned to
   each row instead, so the header label has nothing to point at. */
@media (max-width: 700px) {
    #cp-main ul.topiclist li.header dt,
    #cp-main ul.topiclist li.header dt .list-inner {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #cp-main ul.topiclist li.header dd { display: none !important; }
}

/* Safety net for the `:not(ul.topiclist *)` scoping on the form-field rules further
   down: complex :not() is well supported (and this sheet already relies on :has(),
   which is newer), but if it were ever dropped the form-field `display:block` would
   leak back onto list rows and re-break mobile. These simple-selector rules re-assert
   phpBB's own mobile intent — collapse the data columns, keep the checkbox. */
@media (max-width: 700px) {
    form#ucp ul.topiclist dd,
    form#postform ul.topiclist dd,
form[id^="mcp"] ul.topiclist dd { display: none !important; }
    /* li.row, not any dd.mark: re-showing the header's dd.mark too would put a stray
       "MARK" / "MARK READ" label back in the mobile header bar. */
    form#ucp ul.topiclist li.row dd.mark,
    form#postform ul.topiclist li.row dd.mark,
form[id^="mcp"] ul.topiclist li.row dd.mark { display: block !important; }
}


/* ════════════════════════════════════════════════════════
   UCP Profile Tab — form#ucp beautification
   ════════════════════════════════════════════════════════ */

/* Panel sections */
form#ucp .panel,
form[id^="mcp"] .panel {
    margin-bottom: 14px !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
form#ucp .panel > .inner,
form[id^="mcp"] .panel > .inner { padding: 18px 22px !important; }

/* Collapse fieldset chrome */
form#ucp .panel > .inner > fieldset,
form[id^="mcp"] .panel > .inner > fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Field rows: 2-col grid.
   `:not(ul.topiclist *)` — see the note on `form#ucp dl:not(ul.topiclist *) dd` below.
   Without it this grid also applied to every list row's dl on pages like Manage drafts. */
form#ucp dl:not(ul.topiclist *),
form[id^="mcp"] dl:not(ul.topiclist *) {
    display: grid !important;
    grid-template-columns: 210px 1fr !important;
    gap: 0 20px !important;
    align-items: start !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid #f8fafc !important;
    margin: 0 !important;
}
form#ucp dl:not(ul.topiclist *):last-child,
form[id^="mcp"] dl:not(ul.topiclist *):last-child { border-bottom: none !important; }

/* Label column */
form#ucp dl dt,
form[id^="mcp"] dl dt {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    padding-top: 8px !important;
    line-height: 1.4 !important;
}
/* Help text below label */
form#ucp dl dt span,
form[id^="mcp"] dl dt span {
    display: block !important;
    font-size: 0.71rem !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    margin-top: 3px !important;
    line-height: 1.5 !important;
}
form#ucp dl dt label,
form[id^="mcp"] dl dt label { cursor: pointer !important; }

/* Input column */
form#ucp dl dd,
form[id^="mcp"] dl dd { margin: 0 !important; padding: 4px 0 !important; }

/* All text-type inputs */
form#ucp dl dd input.inputbox,
form#ucp dl dd input[type="text"],
form#ucp dl dd input[type="email"],
form#ucp dl dd input[type="url"],
form#ucp dl dd input[type="password"],
form#ucp dl dd textarea.inputbox,
form[id^="mcp"] dl dd input.inputbox,
form[id^="mcp"] dl dd input[type="text"],
form[id^="mcp"] dl dd input[type="email"],
form[id^="mcp"] dl dd input[type="url"],
form[id^="mcp"] dl dd input[type="password"],
form[id^="mcp"] dl dd textarea.inputbox {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    color: #1e293b !important;
    background: #fafafa !important;
    box-sizing: border-box !important;
    transition: border-color 150ms, box-shadow 150ms !important;
}
form#ucp dl dd input.inputbox:focus,
form#ucp dl dd input[type="text"]:focus,
form#ucp dl dd input[type="email"]:focus,
form#ucp dl dd input[type="password"]:focus,
form#ucp dl dd textarea.inputbox:focus,
form[id^="mcp"] dl dd input.inputbox:focus,
form[id^="mcp"] dl dd input[type="text"]:focus,
form[id^="mcp"] dl dd input[type="email"]:focus,
form[id^="mcp"] dl dd input[type="password"]:focus,
form[id^="mcp"] dl dd textarea.inputbox:focus {
    border-color: #096EFF !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.1) !important;
    outline: none !important;
    background: #ffffff !important;
}

/* Select elements */
form#ucp dl dd select,
form[id^="mcp"] dl dd select {
    padding: 7px 10px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    background: #fafafa !important;
    cursor: pointer !important;
}

/* Non-editable fields (shown as bold text) */
form#ucp dl dd strong,
form[id^="mcp"] dl dd strong {
    display: block !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding-top: 7px !important;
}

/* Radio buttons */
form#ucp input[type="radio"],
form[id^="mcp"] input[type="radio"] {
    accent-color: #096EFF !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    margin-right: 5px !important;
}

/* Error messages */
form#ucp p.error,
form#ucp dl dd.error,
form[id^="mcp"] p.error,
form[id^="mcp"] dl dd.error {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    color: #dc2626 !important;
    background: rgba(220,38,38,0.05) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    border-left: 3px solid #dc2626 !important;
    margin-bottom: 8px !important;
}

/* Profile info notice text */
form#ucp .panel > .inner > p,
form[id^="mcp"] .panel > .inner > p {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;           /* crescent — see note above */
    border-left: 4px solid #096EFF !important;
    margin-bottom: 14px !important;
}

/* Submit button row */
form#ucp fieldset.submit-buttons,
form[id^="mcp"] fieldset.submit-buttons {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 14px 0 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
}
form#ucp fieldset.submit-buttons input.button1,
form[id^="mcp"] fieldset.submit-buttons input.button1 {
    background: linear-gradient(135deg, #064fc8, #096EFF) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 10px 28px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(9,110,255,0.28) !important;
    transition: box-shadow 150ms !important;
}
form#ucp fieldset.submit-buttons input.button1:hover,
form[id^="mcp"] fieldset.submit-buttons input.button1:hover {
    box-shadow: 0 4px 14px rgba(9,110,255,0.4) !important;
}
form#ucp fieldset.submit-buttons input.button2,
form[id^="mcp"] fieldset.submit-buttons input.button2 {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 9px !important;
    padding: 9px 20px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: border-color 150ms !important;
}
form#ucp fieldset.submit-buttons input.button2:hover,
form[id^="mcp"] fieldset.submit-buttons input.button2:hover {
    border-color: #d1d5db !important;
    background: #f8fafc !important;
}

/* "View Profile" link next to h2 */
form#ucp h2 span.small,
form[id^="mcp"] h2 span.small {
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    margin-left: 10px !important;
}
form#ucp h2 span.small a,
form[id^="mcp"] h2 span.small a {
    color: #096EFF !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
form#ucp h2 span.small a:hover,
form[id^="mcp"] h2 span.small a:hover { text-decoration: underline !important; }

/* Avatar preview image */
form#ucp dl dd img.avatar,
form[id^="mcp"] dl dd img.avatar {
    border-radius: 50% !important;
    border: 3px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}


/* ════════════════════════════════════════════════════════
   UCP Profile — OVERHAUL v2 (vertical form layout)
   Overrides earlier form#ucp grid rules via cascade order
   ════════════════════════════════════════════════════════ */

/* Shared panel card look */
form#ucp .panel,
form#postform .panel,
form[id^="mcp"] .panel {
    background: #ffffff !important;
    border: 1px solid #e8ecf0 !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
}
form#ucp .panel > .inner,
form#postform .panel > .inner,
form[id^="mcp"] .panel > .inner { padding: 22px 26px !important; }

/* Strip fieldset chrome inside panels */
form#ucp .panel > .inner > fieldset,
form#postform .panel > .inner > fieldset,
form[id^="mcp"] .panel > .inner > fieldset {
    border: none !important; padding: 0 !important; margin: 0 !important;
}

/* ── Section h3 headings ── */
form#ucp h3,
form#postform h3,
form[id^="mcp"] h3 {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.67rem !important; font-weight: 800 !important;
    color: #94a3b8 !important; text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 9px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ── VERTICAL form layout: label → help text → input ── */
/* `:not(ul.topiclist *)` must stay on BOTH this rule and the grid rule above — they are
   a pair. Scoping only one would let the other's `display` win on list rows (dropping it
   here would re-apply the 210px/1fr grid to every list row on mobile). */
form#ucp dl:not(ul.topiclist *),
form#postform dl:not(ul.topiclist *),
form[id^="mcp"] dl:not(ul.topiclist *) {
    display: block !important;
    grid-template-columns: unset !important;        /* kill earlier grid */
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
}
form#ucp dl:not(ul.topiclist *):last-child,
form#postform dl:not(ul.topiclist *):last-child,
form[id^="mcp"] dl:not(ul.topiclist *):last-child { margin-bottom: 0 !important; }

/* Close the gap between title-colour palette and font-colour palette on all screens.
   The subject/title-colour DL is the last <dl> direct-child of fieldset.fields1;
   its browser-default margin-bottom + padding-bottom from forms.css create the gap. */
form#postform fieldset.fields1 > dl:last-of-type {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
}

/* Label (uppercased micro-text above field).

   `:not(ul.topiclist *)` is load-bearing here for the same reason it is on the dd rule
   below — it was simply missing. Every UCP list page is wrapped in <form id="ucp">, so
   without it this form-field styling also hit each list ROW's dt, and text-transform is
   inherited: group names, descriptions and statuses on the Usergroups tab all rendered
   as bold uppercase micro-text.

   NOTE — do NOT read this guard as retiring the two earlier patches. Checked 2026-08-02:
   both are still load-bearing, for rules other than this one.
     · The topiclist byline patch fights `#cp-main .topiclist li.row dl dt span` and the
       UNGUARDED `form#ucp dl dt span` twin further up — only its two `form#ucp` selectors
       are now redundant, and only because the `#cp-main` ones already cover the same rows.
     · The Auto Drafts count patch opts out of `form#ucp_pcgf_autodrafts_settings dt`,
       a separate deliberate rule. That form is a sibling of #ucp, not a descendant, so
       this selector never reached it in the first place.
   Guard the source anyway — but the source is this rule alone.

   2026-08-02: the `#postform` branch needed the identical guard and had been missed,
   so Manage drafts kept rendering in caps after the `#ucp` branch was fixed. Drafts is
   the one and only template that puts a `ul.topiclist` inside `<form id="postform">`
   (checked across prosilver + Milk_v2), which is why it hid behind the `#ucp` fix —
   every OTHER UCP list page uses `#ucp`. The `dl` and `dd` rules for this form, at
   `form#postform dl:not(ul.topiclist *)` above and below, were already guarded; only
   the two `dt` rules here were left open. Both branches now match. */
form#ucp dl:not(ul.topiclist *) dt,
form#postform dl:not(ul.topiclist *) dt,
form[id^="mcp"] dl:not(ul.topiclist *) dt {
    display: block !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.71rem !important; font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important;
    margin-bottom: 5px !important;
    padding-top: 0 !important; line-height: 1.3 !important;
    /* undo grid alignment */
    padding-right: 0 !important; align-self: auto !important;
}
form#ucp dl dt label,
form#postform dl dt label,
form[id^="mcp"] dl dt label { cursor: pointer !important; }

/* Help text → below label, before input. Same list guard as the dt rule above. */
form#ucp dl:not(ul.topiclist *) dt span,
form#postform dl:not(ul.topiclist *) dt span,
form[id^="mcp"] dl:not(ul.topiclist *) dt span {
    display: block !important;
    font-size: 0.71rem !important; font-weight: 400 !important;
    color: #9ca3af !important;
    text-transform: none !important; letter-spacing: 0 !important;
    margin: 2px 0 7px 0 !important; line-height: 1.5 !important;
}

/* Input wrapper.
   `:not(ul.topiclist *)` is load-bearing, do not drop it. Every UCP list page
   (subscriptions, drafts, attachments, notifications) is wrapped in <form id="ucp">,
   so the unscoped form-field selector also matched every list row's dd — at ID
   specificity with !important, which beat BOTH phpBB rules that collapse those lists
   on mobile: `ul.topiclist dd {display:none}` and `ul.topiclist li.header dd
   {display:none !important}`. Consequences were: stray "MARK"/"DOWNLOADS"/"POST TIME"
   labels in mobile header bars, and every row's data duplicated — once from the desktop
   dd, once from the .responsive-show block that forum_fn.js builds inside dt for
   .responsive-show-columns lists (it copies each dd's html in, prefixed with the header
   label, which is where "Downloads: 318" comes from). List dd display is owned by
   phpBB's responsive.css plus the desktop @media block above — not by this rule. */
form#ucp dl:not(ul.topiclist *) dd,
form#postform dl:not(ul.topiclist *) dd,
form[id^="mcp"] dl:not(ul.topiclist *) dd {
    display: block !important; margin: 0 !important; padding: 0 !important;
    margin-left: 0 !important;          /* kill any old offset */
}

/* ── All text inputs ── */
form#ucp dl dd input.inputbox,
form#ucp dl dd input[type="text"],
form#ucp dl dd input[type="email"],
form#ucp dl dd input[type="url"],
form#ucp dl dd input[type="password"],
form#ucp dl dd textarea.inputbox,
form#postform dl dd input.inputbox,
form#postform dl dd input[type="text"],
form#postform dl dd textarea.inputbox,
form[id^="mcp"] dl dd input.inputbox,
form[id^="mcp"] dl dd input[type="text"],
form[id^="mcp"] dl dd input[type="email"],
form[id^="mcp"] dl dd input[type="url"],
form[id^="mcp"] dl dd input[type="password"],
form[id^="mcp"] dl dd textarea.inputbox {
    width: 100% !important;
    padding: 9px 13px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    color: #111827 !important;
    background: #fafafa !important;
    box-sizing: border-box !important;
    transition: border-color 150ms, box-shadow 150ms !important;
}
form#ucp dl dd input:focus,
form#ucp dl dd textarea:focus,
form#postform dl dd input:focus,
form#postform dl dd textarea:focus,
form[id^="mcp"] dl dd input:focus,
form[id^="mcp"] dl dd textarea:focus {
    border-color: #096EFF !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.1) !important;
    outline: none !important; background: #ffffff !important;
}

/* Select */
form#ucp dl dd select,
form#postform dl dd select,
form[id^="mcp"] dl dd select {
    min-width: 220px !important;
    padding: 9px 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important; color: #374151 !important;
    background: #fafafa !important; cursor: pointer !important;
}

/* Non-editable strong value */
form#ucp dl dd strong,
form#postform dl dd strong,
form[id^="mcp"] dl dd strong {
    display: block !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.9rem !important; font-weight: 600 !important; color: #1e293b !important;
}

/* Info notice box */
form#ucp .panel > .inner > p,
form#postform .panel > .inner > p,
form[id^="mcp"] .panel > .inner > p {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.84rem !important; color: #64748b !important;
    line-height: 1.65 !important;
    background: #f8fafc !important;
    border-left: 4px solid #096EFF !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 10px 14px !important; margin-bottom: 22px !important;
}

/* ── Submit buttons — both form IDs ──
   The top padding is the ONLY thing separating this bar from the last field: the
   preceding <dl> is :last-child, so its margin-bottom is zeroed by the rule above.
   At 8px the button crowded the field above it — visible on the avatar page, where
   the last row ends in a short "px" box so the button sits right under it with no
   full-width element between them. justify-content:center is inherited from the
   generic `fieldset.submit-buttons` rule earlier in this file; don't restate it. */
form#ucp fieldset.submit-buttons,
form#postform fieldset.submit-buttons,
form[id^="mcp"] fieldset.submit-buttons {
    border: none !important;
    padding: 22px 0 6px 0 !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
    background: transparent !important;
}
form#ucp fieldset.submit-buttons input.button1,
form#postform fieldset.submit-buttons input.button1,
form[id^="mcp"] fieldset.submit-buttons input.button1 {
    background: linear-gradient(135deg, #064fc8, #096EFF) !important;
    color: #ffffff !important; border: none !important;
    border-radius: 9px !important; padding: 10px 28px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important; font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(9,110,255,0.28) !important;
    transition: box-shadow 150ms !important;
}
form#ucp fieldset.submit-buttons input.button1:hover,
form#postform fieldset.submit-buttons input.button1:hover,
form[id^="mcp"] fieldset.submit-buttons input.button1:hover {
    box-shadow: 0 4px 14px rgba(9,110,255,0.4) !important;
}
form#ucp fieldset.submit-buttons input.button2,
form#postform fieldset.submit-buttons input.button2,
form[id^="mcp"] fieldset.submit-buttons input.button2 {
    background: #ffffff !important; color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important; border-radius: 9px !important;
    padding: 9px 20px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important; font-weight: 500 !important;
    cursor: pointer !important; transition: border-color 150ms !important;
}
form#ucp fieldset.submit-buttons input.button2:hover,
form#postform fieldset.submit-buttons input.button2:hover,
form[id^="mcp"] fieldset.submit-buttons input.button2:hover {
    border-color: #cbd5e1 !important; background: #f8fafc !important;
}

/* ── Signature page: OPTIONS checkboxes ── */
form#postform fieldset > div {
    display: flex !important; align-items: center !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid #f8fafc !important;
}
form#postform fieldset > div:last-child { border-bottom: none !important; }
form#postform fieldset > div label {
    display: flex !important; align-items: center !important; gap: 9px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important; color: #374151 !important;
    cursor: pointer !important; font-weight: 400 !important;
}
form#postform fieldset > div input[type="checkbox"] {
    accent-color: #096EFF !important; width: 15px !important;
    height: 15px !important; flex-shrink: 0 !important;
}

/* ── Avatar page: image preview ── */
form#ucp dl dd img,
form[id^="mcp"] dl dd img {
    max-width: 140px !important; height: auto !important;
    border-radius: 10px !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.09) !important;
    display: block !important; margin-bottom: 10px !important;
}

/* Delete / checkbox label in avatar dd */
form#ucp dl dd label,
form[id^="mcp"] dl dd label {
    display: flex !important; align-items: center !important; gap: 7px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.84rem !important; color: #6b7280 !important;
    margin-top: 8px !important; cursor: pointer !important;
}
form#ucp input[type="checkbox"],
form[id^="mcp"] input[type="checkbox"] {
    accent-color: #096EFF !important;
    width: 15px !important; height: 15px !important;
}

/* File input styling */
form#ucp dl dd input[type="file"],
form#postform dl dd input[type="file"],
form[id^="mcp"] dl dd input[type="file"] {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.84rem !important; color: #374151 !important;
}

/* "View profile" link in h2 */
form#ucp h2 span.small,
form#postform h2 span.small,
form[id^="mcp"] h2 span.small {
    font-size: 0.72rem !important; color: #94a3b8 !important; margin-left: 10px !important;
}
form#ucp h2 span.small a,
form#postform h2 span.small a,
form[id^="mcp"] h2 span.small a {
    color: #096EFF !important; font-weight: 500 !important; text-decoration: none !important;
}
form#ucp h2 span.small a:hover,
form#postform h2 span.small a:hover,
form[id^="mcp"] h2 span.small a:hover { text-decoration: underline !important; }

/* Signature preview section */
#postform .panel .postbody {
    padding: 8px 0 !important; font-family: "Inter", system-ui, sans-serif !important;
}
#postform .panel .signature.standalone {
    font-size: 0.9rem !important; line-height: 1.6 !important; color: #374151 !important;
}


/* ════════════════════════════════════════════════════════
   Posting editor — BBCode toolbar fix for Milk_v2
   dmzx/postingbuttons CSS (#format-buttons { display:none })
   is prosilver-only so never loads for Milk_v2; add it here.
   ════════════════════════════════════════════════════════ */

/* Standard phpBB toolbar — hidden because dmzx replaces it */
#format-buttons.format-buttons { display: none !important; }

/* Colour palette: hidden by default; re-shown only when phpBB's jQuery
   sets style="display:block" via change_palette() — the attribute selector
   (specificity 1,1,0) beats the hide rule (1,0,0) so toggle works. */
#colour_palette {
    display: none !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
    margin-top: -6px !important;
    padding-top: 0 !important;
}
#colour_palette > dl {
    margin: 0 !important;
    padding: 0 !important;
}
#colour_palette[style*="block"] {
    display: block !important;
}
/* Hide "FONT COLOUR:" heading inside palette — swatches are self-explanatory */
#colour_palette dt { display: none !important; }
#color_palette_placeholder {
    overflow-x: auto !important;
    max-width: 100% !important;
    display: block !important;
}

/* Codeboxplus language selector (also uses id="format-buttons" but
   without class="format-buttons") — style it as a second toolbar row */
#format-buttons:not(.format-buttons) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 10px 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    margin-bottom: 0 !important;
}
/* Override: if it's empty or Codebox not enabled, collapse it */
#format-buttons:not(.format-buttons):empty { display: none !important; }

/* Codeboxplus single-button mode (Milk_v2 template replaces 234-option select) */
#codebox_insert {
    width: auto !important;
    min-width: 38px !important;
    padding: 0 8px !important;
    background-image: none !important;
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    letter-spacing: -0.5px !important;
}


/* Fieldsets: global min-width:0 overrides Chrome UA min-inline-size:min-content
   on ALL screen sizes (mobile block adds overflow-x:hidden on top of this). */
fieldset.fields1,
fieldset.fields2 {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Postingbox: global overflow containment — catch-all so nothing inside leaks
   to page level (native <select> dropdowns render above this, so no clipping). */
#postingbox,
#pmheader-postingbox {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Smiley box: flex container — eliminates whitespace gaps, controls per-row count */
.smiley-box,
#smiley-box {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 2px !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Exactly 11 smiley images per row: each <a><img> takes 1/11 of the container
   (100% - 10 column-gaps × 2px = 20px) / 11 */
.smiley-box a:has(img),
#smiley-box a:has(img) {
    flex: 0 0 calc((100% - 20px) / 11) !important;
    max-width: calc((100% - 20px) / 11) !important;
}
/* Hide the "Smilies" heading inside the smiley panel */
.smiley-box strong, #smiley-box strong { display: none !important; }
/* Non-smiley flex items: text links, hr — span full width */
.smiley-box a:not(:has(img)), #smiley-box a:not(:has(img)),
.smiley-box hr, #smiley-box hr {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    font-size: 0.82rem !important;
}
/* <br> has no role in flex layout */
.smiley-box br, #smiley-box br { display: none !important; }
/* Emoji images: fill their 1/11-width anchor and scale as SVG */
.smiley-box img, #smiley-box img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

/* ════════════════════════════════════════════════════════
   Desktop (≥768px): smiley panel — preserve float: right from
   forms.css, widen from 18% → 22% for 11-per-row flex layout.
   The inner display:flex (global rule) is a flex container for
   the smilies; the outer float: right positions it beside the
   textarea. No grid/flex changes on fieldset.fields1.
   ════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* Widen smiley column from forms.css 18% → 22% for 11-per-row.
       Reduce message-box from 80% → 77% so 77%+22%=99% fits beside the float. */
    .smiley-box, #smiley-box {
        width: 22% !important;
        overflow-y: auto !important;
    }
    #message-box {
        width: 77% !important;
    }
}

/* Topic Title Colour palette: collapsed by default; JS toggle uses setAttribute !important */
#topic_title_color_palette_placeholder {
    display: none !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* title_color swatch: lock to 95px regardless of inputbox class rules */
#title_color {
    width: 95px !important;
    max-width: 95px !important;
    min-width: 0 !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}
/* Title colour and font colour DT labels: hidden — text shown only on button hover */
#colour_palette dt,
dt:has(label[for="title_color"]) {
    display: none !important;
}

/* Subject DL hidden on reply/quote pages via JS classList.add('tssfl-hide') */
.tssfl-hide { display: none !important; }

/* Stick topic for: constrain Days input to a sensible width */
input[name="stick_topic_for"] {
    width: 80px !important;
    max-width: 80px !important;
}

/* Both colour palettes: larger cells on desktop (phpBB default is 13×10px) */
#topic_title_color_palette_placeholder td,
#color_palette_placeholder td {
    width: 18px !important;
    height: 18px !important;
    padding: 1px !important;
}
#topic_title_color_palette_placeholder td a,
#color_palette_placeholder td a {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

/* Mobile: hide alternating columns → 13 cells/row → ~22×22px squares, no wrapping */
@media (max-width: 767px) {
    .colour-palette,
    .colour-palette tbody { display: block !important; }
    .colour-palette tr {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        margin-bottom: 2px !important;
    }
    /* Hide every other cell: 25 → 13 visible per row, cells scale to ~22px */
    .horizontal-palette td:nth-child(2n) { display: none !important; }
    .colour-palette td {
        display: block !important;
        flex: 1 !important;
        width: auto !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    .colour-palette td a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    /* Prevent title colour palette from sliding */
    #topic_title_color_palette_placeholder {
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #colour_palette {
        padding-top: 0 !important;
        margin-top: -6px !important;
    }
    /* Inner DL has browser-default margin-top ~1em; zero it out */
    #colour_palette > dl {
        margin: 0 !important;
        padding: 0 !important;
    }
    #topic_title_color_palette_placeholder td,
    #color_palette_placeholder td {
        height: auto !important;
        aspect-ratio: 1 !important;
    }
    #topic_title_color_palette_placeholder td a,
    #color_palette_placeholder td a {
        width: 100% !important;
        height: 100% !important;
    }
}

/* ════════════════════════════════════════════════════════
   Mobile: posting / UCP — fix overflow (≤767px viewport)
   ════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Safety net: clip any residual overflow at the wrap level */
    .wrap {
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Root overflow containment */
    html, body { overflow-x: hidden !important; max-width: 100vw !important; }
    #inner-wrap { box-sizing: border-box !important; max-width: 100% !important; }
    #cp-main, #page-body { overflow-x: hidden !important; }

    /* Stack layout columns vertically */
    .column1, .column2 {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Fieldset form labels: remove float and fixed width */
    fieldset dt,
    fieldset.fields1 dt,
    fieldset.fields2 dt {
        float: none !important;
        width: auto !important;
    }

    /* Fieldset values: remove left-margin offset that assumes a floated label */
    fieldset dd,
    fieldset.fields1 dd,
    fieldset.fields2 dd {
        margin-left: 0 !important;
    }

    /* Fieldsets: constrain width; min-width:0 overrides Chrome UA min-inline-size:min-content */
    fieldset.fields1,
    fieldset.fields2 {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* DL rows: don't leak, and remove default bottom margin that creates gap between palettes */
    fieldset.fields1 dl,
    fieldset.fields2 dl {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* PM recipients dl — label contains the textarea */
    dl.pmlist dt { width: auto !important; }

    /* Groups multi-select listbox */
    select[multiple] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Single-line selects inside posting form panels */
    #pmheader-postingbox select,
    #postingbox select {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Recipient textarea and subject input */
    #username_list,
    input#subject {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Smilies: reflow below message-box (matches backup approach) */
    .smiley-box, #smiley-box {
        float: none !important;
        width: auto !important;
        margin-top: 5px !important;
    }

    /* Colour palette: handled by the continuous-spectrum block above */

    /* Constrain select elements inside the toolbar so they don't push the container wide */
    #format-postingbuttons select {
        max-width: calc(100% - 20px) !important;
        box-sizing: border-box !important;
    }

    /* Message-box container: kill the 80% float layout */
    .message-box {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Textarea: override hardcoded 450px width from forms.css */
    .message-box textarea,
    textarea#message,
    textarea#signature,
    textarea.inputbox {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* BBCode toolbar */
    #format-postingbuttons {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Posting panels */
    #pmheader-postingbox,
    #postingbox {
        overflow-x: hidden !important;
    }

    /* Codebox language selector row */
    #format-buttons:not(.format-buttons) {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        box-sizing: border-box !important;
    }

}

/* ────────────────────────────────────────────────
   UCP topic-row byline — keep it on ONE line (2026-07-25)

   The senky/relativedates extension renders timestamps as a bare <span>
   ("2 years ago"). Three earlier rules force display:block on dt spans —
   #cp-main .topiclist li.row dl dt span (attachment file info) and
   form#ucp dl dt span (form help text, x2). Manage subscriptions /
   bookmarks / drafts sit inside <form id="ucp">, so the form-help rules
   matched the date span and pushed it onto a third line:

       Topic Title
       by Eli »
       2 years ago

   A block-level child breaks the line no matter what, so the white-space:
   nowrap above cannot help. Put the date back inline instead. Scoped to
   topiclist rows only, so form help text elsewhere is untouched.
   ──────────────────────────────────────────────── */
#cp-main .topiclist li.row dl dt .responsive-hide span,
#cp-main .topiclist li.row dl dt .responsive-show span,
form#ucp .topiclist li.row dl dt .responsive-hide span,
form#ucp .topiclist li.row dl dt .responsive-show span,
form[id^="mcp"] .topiclist li.row dl dt .responsive-hide span,
form[id^="mcp"] .topiclist li.row dl dt .responsive-show span {
    display: inline !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    margin: 0 !important;
    line-height: inherit !important;
    text-transform: none !important;
    letter-spacing: inherit !important;
}


/* ────────────────────────────────────────────────
   UCP LIST LEFT RAIL (2026-07-25)
   Every UCP list put its column header at a different inset from its own row
   content — measured header/content pairs of 42/54 (subscriptions, bookmarks),
   5/17 (drafts, attachments) and 0/15 (notifications). Three different header
   insets, and in none of them did the header line up with anything.

   Rule: ONE rail at 12px — li.row's own padding-left. Header labels start there,
   and each row's LEADING element starts there (the status disc where a list has
   one, otherwise the text). Headers therefore sit above the icon, not above the
   title, which is the usual data-table convention: a header labels the whole cell
   and the cell begins at its icon/avatar.

   Deliberately NOT aligned to the title text instead: that would push the
   Notifications header ~119px right, and leave headers at 54/17/119 across
   sections so the labels jump around as you move between UCP pages.
   ──────────────────────────────────────────────── */

/* 1. Header rows are missing li.row's horizontal padding. Both sides matter: with
      padding-left only, the header stayed 12px wider than the rows, so every right-
      hand column label sat 12px right of the data it names (measured on Attachments:
      header extra@971 vs row extra@959). */
#cp-main .topiclist li.header,
#cp-main .cplist li.header,
.cp-main .topiclist li.header,
.cp-main .cplist li.header {
    /* Same crescent motif as the explain box, in a deeper blue against the bar.
       Rounding the LEFT corners is what curves the 4px border into the moon shape;
       the right end stays square so the bar still spans the list.
       padding-left is 8px, NOT 12px: the 4px border sits outside it, so border +
       padding = 12px and the column label stays exactly on the rail. The gap the
       user wants comes from the crescent being narrow, not from moving the text. */
    border-left: 3px solid #0747A6 !important;
    /* Larger radius than the explain box's 10px on purpose: the header bar is only
       ~35px tall against the box's ~49px, so at radius 10 the curve ate a smaller
       share of the height and the accent read as a chunk rather than a taper.
       14px restores the thin crescent profile at this height. */
    border-radius: 14px 0 0 14px !important;
    padding-left: 9px !important;   /* 3px border + 9px = 12px, label unmoved */
    padding-right: 12px !important;
    /* Height comes from padding here, NOT from the dt/dd margins that used to supply
       it. Those margins were 14px top on the dt only, which both inflated the bar and
       pushed the left label 4px below the right one. Padding on the li keeps the bar
       ~35px tall while leaving the cells free to centre. */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* 2. A header has no icon, so it must not inherit the icon gutter (42px on
      dl.row-item lists) or prosilver's 5px. Puts header text exactly on the rail. */
#cp-main .topiclist li.header dt .list-inner,
#cp-main .cplist li.header dt .list-inner {
    padding-left: 0 !important;
}
/* 3. Rows in icon-less lists (drafts, attachments) start their text on the rail.
      dl.row-item lists are excluded — they keep the 42px gutter that the 30px disc
      sits in, so their titles stay at 54px, which is correct and unavoidable. */
#cp-main .topiclist li.row dl:not(.row-item) dt .list-inner,
#cp-main .cplist li.row dl:not(.row-item) dt .list-inner {
    padding-left: 0 !important;
}

/* 4. Reclaim the float-era column reservation (2026-08-02).
      content.css still carries prosilver's original layout, where dt spans the whole
      row and the dd columns are pulled back over it by negative margins. To stop the
      title running underneath them, `.list-inner` reserves the column strip on its
      right:  490px base, 440px on headers, 395px `.missing-column`, 250px
      `.two-long-columns`, 80px `.two-columns`.

      Milk_v2 lays these dl's out as flex rows, so the dd's are real flex items that
      claim their own track — nothing overlaps any more and the reservation is pure
      dead space. Measured before this rule: on Attachments the title box was 447px
      inside a 937px dt, so a 19-character filename plus "(2.17 MiB)" could not fit on
      one line and every row spent three lines saying what fits in two. On Manage
      subscriptions the 395px version was what pushed each topic's page-number pills
      into the middle of the row instead of flush beside Last post.

      Zeroing it is safe precisely because the dd's are fixed-width flex items: the dt
      absorbs the remainder either way, so no column moves. Header and row are both
      reset — their reservations differ (440 vs 490), and leaving one behind would
      reintroduce the header/row dt mismatch the dd.extra / dd.time widths above exist
      to prevent. */
#cp-main .topiclist li.header dt .list-inner,
#cp-main .topiclist li.row dt .list-inner,
#cp-main .cplist li.header dt .list-inner,
#cp-main .cplist li.row dt .list-inner {
    margin-right: 0 !important;
}

/* Attachments: the filename must not claim the whole line.
   content.css:780 `.attachment-filename { width: 100% }` is the float-era partner of
   the reservation above — it made the anchor fill the reserved strip so the ellipsis
   had something definite to clip against. The markup is
   `<a>filename</a> (SIZE)<br />Topic: <a>…</a>`, so a full-width anchor forces (SIZE)
   onto its own line. The anchor is inline-block, so width:auto already shrinks it to
   the filename; max-width keeps overflow:hidden/text-overflow:ellipsis working for a
   long name. Same correction, same reason, as the profile contact pills. */
#cp-main .topiclist li.row dt .list-inner a.attachment-filename,
#cp-main .cplist li.row dt .list-inner a.attachment-filename {
    width: auto !important;
    max-width: 100% !important;
    /* Once the two sit on one line the misalignment shows: an inline-block with
       overflow other than visible uses its bottom MARGIN edge as its baseline instead
       of its last line's, which is `.ellipsis-text`'s overflow:hidden doing it. That
       hung "(109.13 KiB)" 9px below the filename. `middle` measures ~0.8px out here
       against `bottom`'s 3.8px and `text-bottom`'s 6.0px, and unlike them it stays
       right when the two runs differ in font-size, which they do (0.9rem vs 0.75rem). */
    vertical-align: middle !important;
}

/* ── Notifications: kill the legacy 50px indent ──
   common.css:1189 sets `.notification_list div.notifications { margin-left: 50px }`,
   written for prosilver's floated ~50px avatar. Milk_v2 lays .list-inner out as a
   flex row with gap:12px, so that margin double-counts: the text landed at 114px
   after a 40px avatar ending at 52px — a ~62px gulf, by far the widest in the UCP.
   The flex gap already provides the spacing. */
#cp-main .notification_list div.notifications,
.notification_list dt .list-inner > div.notifications {
    margin-left: 0 !important;
}

/* ── Attachments: match header column widths to row column widths ──
   The header dd's were sized independently of the row dd's, so the labels floated
   left of the data they name: "Downloads" at 841 over data at 969, "Post time" at
   931 (w=300) over data at 1049 (w=170). Because the header dd's were wider overall,
   the header dt was 1339 wide against the row's 1437, which also knocked dd.mark
   12px out. Fixing width AND text-align identically on header and row puts each
   label directly above its column. Same approach already used for dd.mark. */
#cp-main .topiclist li.header dl dd.extra,
#cp-main .topiclist li.row dl dd.extra,
#cp-main .cplist li.header dl dd.extra,
#cp-main .cplist li.row dl dd.extra {
    width: 80px !important;
    text-align: center !important;
}
#cp-main .topiclist li.header dl dd.time,
#cp-main .topiclist li.row dl dd.time,
#cp-main .cplist li.header dl dd.time,
#cp-main .cplist li.row dl dd.time {
    width: 170px !important;
    text-align: right !important;
}

/* ────────────────────────────────────────────────
   NOTIFICATIONS — compact rows (2026-07-26)
   Rows were 124-157px tall because every piece of the message claimed its own line:

       [avatar]  New Reaction from:
                 RealityKing
                 In post:
                 "Re: Lectures on Linear Algebra"
                 1 month ago

   Three causes, all layout rather than content:
   1. <span class="username"> inside the title was display:block — from the SAME three
      over-reaching rules (#cp-main .topiclist li.row dl dt span, form#ucp dl dt span
      x2) that once forced the topic byline onto a third line. The notification list
      lives inside <form id="ucp">, so it was collateral again.
   2. A <br> in the reaction title stacks "In post:" onto its own line.
   3. p.notifications_time is a separate block-level <p>.
   Making all three inline lets the message flow as one wrapped paragraph, so the
   name and the date end up on the same line, and rows drop to 1-2 lines.
   ──────────────────────────────────────────────── */
/* Specificity matters here: the offender is
   `#cp-main .topiclist li.row dl dt span` = (0,1,2,4). A shorter override such as
   `#cp-main .notification_list p.notifications_title span` = (0,1,2,2) LOSES to it
   despite !important, because !important only breaks ties at equal specificity.
   The selectors below spell out the full chain to clear (0,1,2,4) comfortably.
   Note the container carries BOTH id="cp-main" and class="cp-main", so both forms
   are listed — the class form also covers any page where the id is absent.
   Scope is every span inside div.notifications, not just the title: the timestamp
   text sits in its own <span> as well, and while it was block the date still broke
   onto a second line even with the <p> itself made inline. */
#cp-main .notification_list ul.topiclist li.row dl dt div.notifications span,
.cp-main .notification_list ul.topiclist li.row dl dt div.notifications span,
form#ucp .notification_list ul.topiclist li.row dl dt div.notifications span,
form[id^="mcp"] .notification_list ul.topiclist li.row dl dt div.notifications span {
    display: inline !important;
}
.notification_list p.notifications_title br { display: none !important; }
.notification_list div.notifications > a,
.notification_list p.notifications_title {
    display: inline !important;
}
/* Time joins the same line box, separated by a middot rather than a line break. */
.notification_list p.notifications_time {
    display: inline !important;
    margin: 0 0 0 6px !important;
    white-space: nowrap !important;
}
.notification_list p.notifications_time::before {
    content: "\00B7";
    margin-right: 6px;
    color: #cbd5e1;
}
/* Avatar level with the text line. Now that the message is a single line, centring
   the flex row puts the avatar's centre exactly on the text's centre — measured 0.0px
   apart. (Before the message was collapsed, align-items:center was wrong: on a 157px
   row it dropped the 40px avatar 56px down, level with nothing, which is why this was
   briefly flex-start.) If a long message ever wraps to two lines the avatar centres on
   the block, which is the standard notification pattern.
   40px was also oversized against a 17px line — 32px keeps the row compact. */
.notification_list .list-inner {
    align-items: center !important;
}
.notification_list .list-inner > img,
.notification_list .list-inner > a > img,
.notification_list .list-inner > span.avatar,
.notification_list .list-inner > .tssfl-av-letter,
.notification_list .list-inner > .tssfl-av-wordmark {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.74rem !important;   /* sized for two letters, e.g. "NB" */
    letter-spacing: 0.02em !important;
}
/* Tighter rows. Scoped to .notification_list on purpose: li.row's global
   padding:15px 12px is what the topic-disc offsets (top:11px) are derived from, so
   changing it globally would break icon alignment everywhere. Notification rows
   carry no disc, so trimming their vertical padding here is safe. */
.notification_list ul.topiclist li.row {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* Text block nudged 3.5px down; the avatar stays put.
   Done with position:relative/top rather than a margin because .list-inner is a flex
   row with align-items:center — a margin-top there is folded into the centring, so
   3.5px of margin would only move the text ~1.75px and would also shift the
   avatar's alignment. A relative offset is paint-only: exact 3.5px, no effect on the
   flex layout, the avatar, or the row height. */
.notification_list .list-inner > .notifications,
#cp-main .notification_list .list-inner > .notifications {
    padding: 0 !important;
    position: relative !important;
    top: 3.5px !important;
}

/* "Mark read" is two words needing 81.4px on one line in a 50px column, so it
   wrapped and spilled right. Widened for the notification list ONLY — every other
   UCP list's label is the single word "Mark" and fits 50px — and pulled left by
   halving the 48px gutter, so the wider box does not crowd the panel edge.
   NOTE the #cp-main prefix: the competing rule is
   `#cp-main .topiclist li.header dl dd.mark` = (0,1,3,3). A selector without an ID,
   however many classes it carries, loses to it — an earlier attempt at (0,0,4,3)
   silently did nothing despite !important. */
#cp-main .notification_list ul.topiclist li.header dd.mark,
#cp-main .notification_list ul.topiclist li.row dd.mark,
.cp-main .notification_list ul.topiclist li.header dd.mark,
.cp-main .notification_list ul.topiclist li.row dd.mark {
    width: 84px !important;
    margin-left: 24px !important;
    white-space: nowrap !important;
}

/* ── …but the 84px must NOT survive the breakpoint (2026-08-02) ──
   The rule above is a HEADER concern — "Mark read" is two words and needs the room in
   the desktop column. It is written without a media query, so it also hit the mobile
   ROW, and that is what made notification text collide with the checkbox.

   Below 700px `responsive.css:272` takes `dd.mark` out of flow and hugs it to the
   right edge:

       ul.topiclist dd.mark { position:absolute; right:5px; top:0; margin:0;
                              width:auto; min-width:0 }

   — no `!important`, specificity (0,2,1). The rule above is (1,3,3) WITH `!important`,
   so it wins and re-inflates the row's box to 84px wide with a 24px left margin. The
   box is anchored on its right, so the checkbox — which sits at the box's left, ahead
   of the hidden `<dfn>Mark read</dfn>` — gets pushed ~90px inboard of the panel edge,
   while `.list-inner` reserves only the standard 34px gutter. The text therefore runs
   straight under it.

   Do NOT "fix" this by widening the gutter to ~90px: that would carve a wide empty
   strip out of a 360px screen to clear a checkbox that should be at the edge in the
   first place. Let responsive.css's geometry stand instead — the label it was widened
   for is `display:none` here, so the row needs nothing but the checkbox.

   (Checked: the 34px gutter itself was never missing on this list, despite
   `ucp_notifications.html` shipping a bare `<div class="list-inner">` — `forum_fn.js`
   adds `with-mark` at runtime, and there is a `#cp-main …li.row .list-inner
   {padding-right:34px}` rule in the mobile block besides. The gutter was correct; the
   checkbox was in the wrong place.) */
@media (max-width: 700px) {
    #cp-main .notification_list ul.topiclist li.header dd.mark,
    #cp-main .notification_list ul.topiclist li.row dd.mark,
    .cp-main .notification_list ul.topiclist li.header dd.mark,
    .cp-main .notification_list ul.topiclist li.row dd.mark {
        width: auto !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }
}

/* ────────────────────────────────────────────────
   UCP PROFILE — Birthday row (2026-07-26)
   phpBB emits Day/Month/Year as three <label> wrappers inside ONE <dd>. Milk_v2's
   form CSS renders dd labels as display:flex at full width, so each claimed its own
   line. Worse, every form <dt> is float:left w=536px, so the first label ("Day")
   flowed into the gap BESIDE the float and appeared stranded mid-way across the
   label's own line, while Month and Year dropped underneath it — three ragged lines
   where every other field in this form is a tidy label-above-control pair.
   Fix: lay the dd out as a flex row and let the labels size to content. clear:both
   drops the row below the floated dt so it starts at the left edge like the others.
   Scoped by the bday_* ids — this is the only dd in the form with >1 label, so
   nothing else can be caught by it.
   ──────────────────────────────────────────────── */
form#ucp dl dd:has(> label[for="bday_day"]),
form[id^="mcp"] dl dd:has(> label[for="bday_day"]) {
    clear: both !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 22px !important;
}
form#ucp dl dd label[for="bday_day"],
form#ucp dl dd label[for="bday_month"],
form#ucp dl dd label[for="bday_year"],
form[id^="mcp"] dl dd label[for="bday_day"],
form[id^="mcp"] dl dd label[for="bday_month"],
form[id^="mcp"] dl dd label[for="bday_year"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
}
form#ucp dl dd label[for="bday_day"] select,
form#ucp dl dd label[for="bday_month"] select,
form#ucp dl dd label[for="bday_year"] select,
form[id^="mcp"] dl dd label[for="bday_day"] select,
form[id^="mcp"] dl dd label[for="bday_month"] select,
form[id^="mcp"] dl dd label[for="bday_year"] select {
    width: auto !important;
    min-width: 90px !important;
}


/* ════════════════════════════════════════════════════════
   UCP PROFILE — completion pass (2026-07-27)
   Covers the four things the "form#ucp beautification" block above cannot reach,
   because they are not label/input pairs inside a <dl>:
     (a) Autologin keys — a <table class="table1">, phpBB's OTHER responsive
         mechanism, which had no rule anywhere in this stylesheet;
     (b) .autowidth number inputs — our own width:100% was beating phpBB's
         forms.css `.autowidth { width: auto !important }`;
     (c) the width x height label pairs those inputs sit in;
     (d) the avatar gallery / driver chrome, which lives outside any <dl>.
   ════════════════════════════════════════════════════════ */

/* ── (a) table.table1 — Autologin keys ──
   forum_fn.js adds .responsive to every table.table1 (unless .not-responsive) and
   prepends a hidden <dfn>HEADER</dfn> to each <td>; responsive.css then hides the
   thead below 700px and reveals the dfn. So the desktop table and the mobile card
   list are the SAME markup — style both halves, never one with layout the other
   inherits. Scoped to #cp-main so ACP/memberlist tables are untouched. This also
   forward-covers the Usergroups tab, which uses the same table. */
#cp-main table.table1 {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
}

#cp-main table.table1 thead th {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border: none !important;
    border-bottom: 2px solid #e8ecf0 !important;
    padding: 12px 14px !important;
    text-align: left !important;
    white-space: nowrap !important;
}
#cp-main table.table1 thead th.center { text-align: center !important; }
#cp-main table.table1 thead th:first-child { border-top-left-radius: 10px !important; }
#cp-main table.table1 thead th:last-child  { border-top-right-radius: 10px !important; }

#cp-main table.table1 tbody tr {
    background: transparent !important;
    border: none !important;
    transition: background-color 130ms !important;
}
#cp-main table.table1 tbody tr:hover { background: #f8fafc !important; }

#cp-main table.table1 tbody td {
    font-size: 0.85rem !important;
    color: #334155 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 13px 14px !important;
    vertical-align: middle !important;
}
#cp-main table.table1 tbody td.center { text-align: center !important; }

/* The login key and the IP are machine strings — give them a mono face so they
   read as data, and let the key wrap (it is a long hex blob on narrow screens). */
#cp-main table.table1 tbody td:first-child label,
#cp-main table.table1 tbody td.center:nth-child(2) {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
    font-size: 0.8rem !important;
    color: #475569 !important;
    overflow-wrap: anywhere !important;
}
#cp-main table.table1 tbody td:first-child label {
    cursor: pointer !important;
    display: inline !important;   /* not the flex that form#ucp dl dd label uses */
    margin: 0 !important;
}

/* Checkbox columns keep their centring — these are th.mark, not th.center, so the
   blanket `text-align: left` above would otherwise pull the notification-options
   method headers off the checkboxes they label. */
#cp-main table.table1 thead th.mark { text-align: center !important; }
#cp-main table.table1 tbody td.mark { text-align: center !important; }

/* Group/section header rows.
   ucp_notifications (mode=notification_options) shares this table and uses
   `<tr class="bg3"><td colspan>` as a SECTION HEADING — structurally identical to
   the autologin empty-state row below. Style it as the heading it is, and exclude
   it from the empty-state rule, or every section title on that page renders as
   italic grey "nothing here" text (and centres itself on mobile). */
#cp-main table.table1 tbody tr.bg3 > td {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: #64748b !important;
    background: #f8fafc !important;
    padding: 11px 14px !important;
    border-top: 1px solid #e8ecf0 !important;
}
#cp-main table.table1 tbody tr.bg3:hover > td { background: #f8fafc !important; }

/* "You have no autologin keys" empty state */
#cp-main table.table1 tbody tr:not(.bg3) > td[colspan] {
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    font-style: italic !important;
    padding: 22px 14px !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* ── (a2) MOBILE: one card per session key ──
   responsive.css has already turned table/tbody/tr/td into blocks and unhidden the
   dfn labels by this point; we only need to make each row read as a card and each
   cell as a label/value line. The value is a bare text node beside the <dfn>, which
   becomes an anonymous flex item — that is what space-between is pushing right. */
@media (max-width: 700px) {
    #cp-main table.table1 { margin-bottom: 0 !important; }

    #cp-main table.responsive tbody tr {
        background: #ffffff !important;
        border: 1px solid #e8ecf0 !important;
        border-radius: 10px !important;
        padding: 4px 13px !important;
        margin: 0 0 10px 0 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    }
    #cp-main table.responsive tbody tr:last-child { margin-bottom: 0 !important; }
    #cp-main table.responsive tbody tr:hover { background: #ffffff !important; }

    #cp-main table.responsive tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 9px 0 !important;
        border-top: 1px solid #f6f8fa !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }
    #cp-main table.responsive tbody td:first-child { border-top: none !important; }

    #cp-main table.responsive tbody td > dfn {
        display: inline-block !important;
        font-family: "Space Grotesk", "Inter", sans-serif !important;
        font-style: normal !important;      /* UA stylesheet italicises <dfn> */
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.09em !important;
        color: #94a3b8 !important;
        flex-shrink: 0 !important;
        text-align: left !important;
    }
    #cp-main table.responsive tbody td > dfn::after {
        content: '' !important;             /* the colon reads as noise in a card */
        padding-right: 0 !important;
    }

    /* Empty state spans the full card, so no label/value split */
    #cp-main table.responsive tbody td[colspan] {
        display: block !important;
        text-align: center !important;
    }
}

/* ── (b) .autowidth must stay auto ──
   forms.css says `.autowidth { width: auto !important }`, but our
   `form#ucp dl dd input.inputbox { width: 100% }` is both later and more specific,
   so the remote-avatar and Gravatar width/height boxes were stretching to the full
   panel. Restore intent at a specificity that actually wins.

   Scope this to `dd > label > input` ONLY. A blanket `.autowidth { width: auto }`
   is wrong here: phpBB's custom profile fields (profilefields/string.html, url.html,
   int.html) also carry `class="inputbox autowidth"` with a `size` attribute, so the
   blanket form made Website/Location/Facebook/Skype/Twitter/YouTube render as ragged
   size-driven boxes floated beside their labels, while Username/Email/Interests
   stayed full-width — the same form disagreeing with itself row to row. Only the
   inputs wrapped in a <label> are the "N px x N px" dimension pairs that genuinely
   need to hug their content; a bare dd > input stays 100%. */
form#ucp dl dd > label > input.autowidth,
form#postform dl dd > label > input.autowidth,
form[id^="mcp"] dl dd > label > input.autowidth {
    width: auto !important;
}
/* File inputs: full width, like every other field on the page.
   `.autowidth` let the control size to its native widget — button + "No file chosen"
   — which on Android Chrome is wider than the panel, so it overran the card edge.
   `max-width` alone is a weak fix: it clamps the box but the shadow content can still
   push out. Making it 100% removes the intrinsic-width dependency entirely AND matches
   Username/Email/Interests, so the upload row stops being the odd one out. */
form#ucp dl dd input[type="file"],
form#ucp dl dd input[type="file"].autowidth,
form#postform dl dd input[type="file"],
form#postform dl dd input[type="file"].autowidth,
form[id^="mcp"] dl dd input[type="file"],
form[id^="mcp"] dl dd input[type="file"].autowidth {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Containment safety net ──
   Nothing inside a form field may exceed its column. Guards against any control whose
   intrinsic width beats its container: native widgets (file/date/colour pickers), the
   220px min-width select on a narrow phone, long `size=` attributes, pasted URLs.
   Cheaper than discovering each overflow one screenshot at a time. */
form#ucp dl dd input,
form#ucp dl dd select,
form#ucp dl dd textarea,
form#postform dl dd input,
form#postform dl dd select,
form#postform dl dd textarea,
form[id^="mcp"] dl dd input,
form[id^="mcp"] dl dd select,
form[id^="mcp"] dl dd textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* The select carries min-width:220px, which on a ~320px phone can exceed the column
   once panel padding is taken off — min-width beats max-width in the cascade, so it
   has to be relaxed explicitly rather than just capped. */
@media (max-width: 700px) {
    form#ucp dl dd select,
    form#postform dl dd select,
form[id^="mcp"] dl dd select {
        min-width: 0 !important;
        width: 100% !important;
    }
    /* except the inline dimension/birthday pairs, which must stay content-sized */
    form#ucp dl dd > label > select,
    form#postform dl dd > label > select,
form[id^="mcp"] dl dd > label > select {
        width: auto !important;
        min-width: 90px !important;
    }
}
form#ucp dl dd > label > input[type="number"].autowidth,
form#postform dl dd > label > input[type="number"].autowidth,
form[id^="mcp"] dl dd > label > input[type="number"].autowidth {
    min-width: 84px !important;
    max-width: 110px !important;
    text-align: center !important;
}

/* ── (c) "width x height" label pairs ──
   Same shape as the birthday-row fix at the end of this file: phpBB puts two
   <label>-wrapped inputs plus a literal "x" in ONE <dd>, and our
   `form#ucp dl dd label { display: flex }` made each label a full-width block, so
   the two boxes stacked and the "x" was orphaned on its own line. Keyed on the
   .autowidth descendant so only these dimension rows match. */
form#ucp dl dd:has(> label > input.autowidth),
form[id^="mcp"] dl dd:has(> label > input.autowidth) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
    font-size: 0.84rem !important;
    color: #64748b !important;
}
form#ucp dl dd > label:has(> input.autowidth),
form[id^="mcp"] dl dd > label:has(> input.autowidth) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    margin: 0 !important;
}

/* ── (d) Avatar page: driver chrome + gallery ──
   Everything below sits inside <div id="avatar_options">, outside any <dl>, so none
   of the form rules above reach it. */

/* Per-driver explain paragraph (deeper than .panel > .inner > p, so unstyled) */
form#ucp #avatar_options > div > p,
form[id^="mcp"] #avatar_options > div > p {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin: 0 0 14px 0 !important;
}

/* Gallery category picker + Go button (bare, not in a dd) */
form#ucp #avatar_options label[for="category"],
form[id^="mcp"] #avatar_options label[for="category"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #6b7280 !important;
    margin: 0 10px 0 0 !important;
    cursor: pointer !important;
}
form#ucp #avatar_options label[for="category"] select,
form[id^="mcp"] #avatar_options label[for="category"] select {
    min-width: 190px !important;
    padding: 8px 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #374151 !important;
    background: #fafafa !important;
    cursor: pointer !important;
}
/* The category picker lives outside any dl/dd, so the containment net above misses it.
   Its 190px min-width plus the inline label can exceed a narrow phone column. */
@media (max-width: 700px) {
    form#ucp #avatar_options label[for="category"],
form[id^="mcp"] #avatar_options label[for="category"] {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }
    form#ucp #avatar_options label[for="category"] select,
form[id^="mcp"] #avatar_options label[for="category"] select {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

form#ucp #avatar_options input[name="avatar_local_go"],
form[id^="mcp"] #avatar_options input[name="avatar_local_go"] {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: border-color 150ms, background-color 150ms !important;
}
form#ucp #avatar_options input[name="avatar_local_go"]:hover,
form[id^="mcp"] #avatar_options input[name="avatar_local_go"]:hover {
    border-color: #096EFF !important;
    background: #f8fafc !important;
}

/* The gallery itself. cp.css floats each label; a float grid cannot keep tiles on a
   shared baseline once the avatars differ in height, so swap to a real grid. */
form#ucp .gallery,
form[id^="mcp"] .gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)) !important;
    gap: 12px !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
}
form#ucp .gallery label,
form[id^="mcp"] .gallery label {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1.5px solid #e8ecf0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: border-color 150ms, box-shadow 150ms, background-color 150ms !important;
}
form#ucp .gallery label:hover,
form[id^="mcp"] .gallery label:hover {
    border-color: #096EFF !important;
    background: #f8fafc !important;
    box-shadow: 0 2px 10px rgba(9,110,255,0.12) !important;
}
form#ucp .gallery label:has(input:checked),
form[id^="mcp"] .gallery label:has(input:checked) {
    border-color: #096EFF !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.15) !important;
}
/* Kill the framed-preview treatment `form#ucp dl dd img` gives the CURRENT avatar —
   these are gallery thumbnails, the tile is already the frame. */
form#ucp .gallery label img,
form[id^="mcp"] .gallery label img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    display: block !important;
}
form#ucp .gallery label br,
form[id^="mcp"] .gallery label br { display: none !important; }
form#ucp .gallery label input[type="radio"],
form[id^="mcp"] .gallery label input[type="radio"] { margin: 0 !important; }

/* ── Submit bar INSIDE a panel needs its spacing restated ──
   `form#ucp .panel > .inner > fieldset { padding: 0 !important }` (the fieldset-chrome
   reset in the overhaul block) carries two classes to `form#ucp fieldset.submit-buttons`'s
   one, so it outranks the submit-bar padding and flattens it to zero. That only bites
   where the submit fieldset is nested in the panel — ucp_avatar_options.html — which is
   why Edit profile looked correctly spaced while Edit avatar had the button hard against
   the "px" boxes. Three classes here beats the reset. */
form#ucp .panel > .inner > fieldset.submit-buttons,
form#postform .panel > .inner > fieldset.submit-buttons,
form[id^="mcp"] .panel > .inner > fieldset.submit-buttons {
    padding: 26px 0 6px 0 !important;
    margin: 0 !important;
}

/* ── Current-avatar preview at full size ──
   `form#ucp dl dd img` caps every dd image at 140px, which is right for incidental
   images but wrong on the one page whose entire purpose is showing you your avatar.
   Board max is 250x250, so render it at natural size up to that, and let it shrink
   on narrow screens rather than overflow the panel. Higher specificity than the
   140px rule via the .avatar class, so it wins without touching that rule. */
form#ucp dl dd img.avatar,
form[id^="mcp"] dl dd img.avatar {
    max-width: min(100%, 250px) !important;
    width: auto !important;
    height: auto !important;
}

/* "There are no avatars available" */
form#ucp #avatar_options > div > p > strong,
form[id^="mcp"] #avatar_options > div > p > strong {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
}


/* ════════════════════════════════════════════════════════
   UCP BOARD PREFERENCES (2026-07-27)
   Three pages, all plain form#ucp: Edit global settings (ucp_prefs_personal),
   Edit posting defaults (ucp_prefs_post), Edit display options (ucp_prefs_view).
   They inherit the Profile form styling wholesale; only the patterns below are
   specific to this tab.
   ════════════════════════════════════════════════════════ */

/* ── Yes/No radio pairs ──
   Thirteen of these across the three pages. phpBB puts BOTH radios in one <dd>,
   each wrapped in its own <label> — and `form#ucp dl dd label { display: flex }`
   turns each label into a full-width block, so Yes and No stack vertically and the
   answer to a yes/no question occupies two lines. Exactly the same shape as the
   birthday row and the "N px x N px" pairs; same remedy. Keyed on the radio
   descendant so single-control dd's are untouched. */
form#ucp dl dd:has(> label > input[type="radio"]),
form[id^="mcp"] dl dd:has(> label > input[type="radio"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 24px !important;
}
form#ucp dl dd > label:has(> input[type="radio"]),
form[id^="mcp"] dl dd > label:has(> input[type="radio"]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    margin: 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #374151 !important;
    cursor: pointer !important;
}

/* ── Controls phpBB toggles at runtime must stay hideable ──
   FUNCTIONAL, not cosmetic. `phpbb.toggleDisplay` (core.js:1641) does
   `$element.css('display', ...)`, i.e. a plain inline style with no !important —
   and our `form#ucp dl:not(ul.topiclist *) dd { display: block !important }` beats
   an inline declaration, so both dd's below were permanently visible: the custom
   date-format input (only meant to appear when "Custom..." is picked) and the
   timezone "Select current time" row (only meant to appear before a zone is set).
   Matching on the inline value keeps phpBB in charge: while it reads display:none
   this wins and the row stays hidden; the moment the JS writes display:block the
   selector stops matching and the normal rules show it. */
form#ucp dl dd#custom_date[style*="none"],
form#ucp dl dd#tz_select_date[style*="none"],
form[id^="mcp"] dl dd#custom_date[style*="none"],
form[id^="mcp"] dl dd#tz_select_date[style*="none"] {
    display: none !important;
}

/* Timezone "select current time" row: dropdown + suggestion button side by side.
   Lower specificity than the hidden-state rule above, so hiding still wins. */
form#ucp dl dd#tz_select_date,
form[id^="mcp"] dl dd#tz_select_date {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}
form#ucp dl dd#tz_select_date input.button2,
form[id^="mcp"] dl dd#tz_select_date input.button2 {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: border-color 150ms, background-color 150ms !important;
}
form#ucp dl dd#tz_select_date input.button2:hover,
form[id^="mcp"] dl dd#tz_select_date input.button2:hover {
    border-color: #096EFF !important;
    background: #f8fafc !important;
}

/* ── Section rules ──
   ucp_prefs_view uses bare <hr /> to separate the radio block from the topic-sort
   and post-sort select groups. The UA default is a chunky inset 3D border that
   fights the flat card styling. */
form#ucp fieldset > hr,
form#postform fieldset > hr,
form[id^="mcp"] fieldset > hr {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    height: 0 !important;
    margin: 22px 0 !important;
}


/* ════════════════════════════════════════════════════════
   BOARD PREFERENCES — Auto Drafts (pcgf/autodrafts extension)
   The page is styled by NOTHING above because the extension names its form
   `ucp_pcgf_autodrafts_settings`, and every rule in this sheet is scoped to
   `form#ucp` / `form#postform`. Its markup also differs from phpBB's in three ways:
     - the .panel wraps the form instead of sitting inside it, so the card styling
       keyed on `form#ucp .panel` never applied and the page had no card at all;
     - radios are SIBLINGS of their labels (<input><label>), not wrapped
       (<label><input></label>), so the Yes/No rule from the tab above can't match;
     - the submit row is <p class="submit-buttons">, not <fieldset class="submit-buttons">.
   Rather than widen ~200 lines of existing selectors, mirror the house style here.
   ════════════════════════════════════════════════════════ */

/* Card — :has() reaches the panel from the form it contains */
#cp-main .panel:has(form#ucp_pcgf_autodrafts_settings) {
    background: #ffffff !important;
    border: 1px solid #e8ecf0 !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
}
#cp-main .panel:has(form#ucp_pcgf_autodrafts_settings) > .inner {
    padding: 22px 26px !important;
}

/* Intro notice */
#cp-main .panel:has(form#ucp_pcgf_autodrafts_settings) > .inner > p {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.84rem !important;
    color: #64748b !important;
    line-height: 1.65 !important;
    background: #f8fafc !important;
    border-left: 4px solid #096EFF !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 10px 14px !important;
    margin: 0 0 22px 0 !important;
}

form#ucp_pcgf_autodrafts_settings fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

form#ucp_pcgf_autodrafts_settings dl {
    display: block !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
}

form#ucp_pcgf_autodrafts_settings dt {
    display: block !important;
    float: none !important;
    width: auto !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
}
form#ucp_pcgf_autodrafts_settings dt label { cursor: pointer !important; }
form#ucp_pcgf_autodrafts_settings dt span {
    display: block !important;
    font-size: 0.71rem !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 2px 0 7px 0 !important;
    line-height: 1.5 !important;
}

/* Value row — flex so "20" + "s", and Yes/No, sit on one line */
form#ucp_pcgf_autodrafts_settings dd {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
}

form#ucp_pcgf_autodrafts_settings dd input[type="number"] {
    width: auto !important;
    min-width: 110px !important;
    max-width: 170px !important;
    padding: 9px 13px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    color: #111827 !important;
    background: #fafafa !important;
    box-sizing: border-box !important;
    transition: border-color 150ms, box-shadow 150ms !important;
}
form#ucp_pcgf_autodrafts_settings dd input[type="number"]:focus {
    border-color: #096EFF !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.1) !important;
    outline: none !important;
    background: #ffffff !important;
}

/* The unit suffix ("s") and the Yes/No captions */
form#ucp_pcgf_autodrafts_settings dd label {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #374151 !important;
    cursor: pointer !important;
    margin: 0 !important;
}
form#ucp_pcgf_autodrafts_settings dd input.radio {
    accent-color: #096EFF !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    cursor: pointer !important;
}
/* Space the second radio away from the first pair's caption. The input and its
   label are separate flex items here, so the gap alone cannot express the pairing. */
form#ucp_pcgf_autodrafts_settings dd input.radio ~ input.radio {
    margin-left: 18px !important;
}

form#ucp_pcgf_autodrafts_settings hr {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    height: 0 !important;
    margin: 22px 0 !important;
}

/* "Currently saved drafts: 0" row — a count, not a field label, so opt it out of
   the uppercase micro-label treatment the other dt's get. */
form#ucp_pcgf_autodrafts_settings dl:has(#pcgf_autodrafts_username) dt {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-bottom: 9px !important;
}
form#ucp_pcgf_autodrafts_settings dl:has(#pcgf_autodrafts_username) dt span {
    display: inline !important;
    font-size: 0.84rem !important;
    color: #64748b !important;
    margin: 0 !important;
}
form#ucp_pcgf_autodrafts_settings dl:has(#pcgf_autodrafts_username) dt span#autodrafts_saved_drafts {
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* Buttons */
form#ucp_pcgf_autodrafts_settings p.submit-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 22px 0 0 0 !important;
    padding: 0 !important;
}
form#ucp_pcgf_autodrafts_settings input.button1 {
    background: linear-gradient(135deg, #064fc8, #096EFF) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 10px 28px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(9,110,255,0.28) !important;
    transition: box-shadow 150ms !important;
}
form#ucp_pcgf_autodrafts_settings input.button1:hover {
    box-shadow: 0 4px 14px rgba(9,110,255,0.4) !important;
}
form#ucp_pcgf_autodrafts_settings input.button2 {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 9px 20px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: border-color 150ms, background-color 150ms !important;
}
form#ucp_pcgf_autodrafts_settings input.button2:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}


/* ════════════════════════════════════════════════════════
   MOBILE — Edit notification options grid
   Same table.table1 -> dfn card collapse as the autologin keys page, but this grid
   carries a leading "notification type" column and bg3 section headings, so the
   generic label-left/value-right treatment reads poorly: the type name gets squeezed
   into a right-hand value slot under a redundant "NOTIFICATION TYPE" label, and the
   section headings render as their own bordered cards. Scoped by .forumbg-table,
   which wraps only this table — the autologin cards keep the generic layout.
   ════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    /* Section headings: a plain bar between groups, not a card */
    #cp-main .forumbg-table table.responsive tbody tr.bg3 {
        display: block !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 20px 0 9px 0 !important;
    }
    #cp-main .forumbg-table table.responsive tbody tr.bg3 > td {
        display: block !important;
        background: #f1f5f9 !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 9px 13px !important;
        text-align: left !important;
    }

    /* Notification name becomes the card's title, full width, label suppressed */
    #cp-main .forumbg-table table.responsive tbody tr:not(.bg3) > td:first-child {
        display: block !important;
        text-align: left !important;
        font-family: "Inter", system-ui, sans-serif !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        line-height: 1.45 !important;
        padding: 4px 0 10px 0 !important;
        border-top: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    #cp-main .forumbg-table table.responsive tbody tr:not(.bg3) > td:first-child > dfn {
        display: none !important;
    }
}


/* ── Action-bar buttons ──
   fieldset.display-actions is the bottom bar on notifications, drafts, attachments
   and autologin keys. Its layout was styled during the Overview pass but its BUTTONS
   never were: every button rule in this sheet is keyed on `fieldset.submit-buttons`,
   so the submit here fell back to the native grey control — visibly out of place next
   to the styled Mark all / Unmark all links beside it. */
#cp-main fieldset.display-actions input.button1 {
    background: linear-gradient(135deg, #064fc8, #096EFF) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 9px 24px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(9,110,255,0.28) !important;
    transition: box-shadow 150ms !important;
}
#cp-main fieldset.display-actions input.button1:hover {
    box-shadow: 0 4px 14px rgba(9,110,255,0.4) !important;
}
#cp-main fieldset.display-actions input.button2 {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 8px 18px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: border-color 150ms, background-color 150ms !important;
}
#cp-main fieldset.display-actions input.button2:hover {
    border-color: #096EFF !important;
    background: #f8fafc !important;
}


/* ── Larger checkboxes in control-panel tables ──
   The 15px default from `form#ucp input[type="checkbox"]` is a small target for a
   grid whose whole purpose is ticking boxes, and smaller than the surrounding text.
   Applied to both table.table1 grids that use a mark column — Edit notification
   options and Manage "Remember Me" login keys — because they are the same control in
   the same kind of table, and sizing only one would read as a bug.
   Beats the 15px rule on specificity (.table1 + .mark + [type]), so that rule still
   governs checkboxes everywhere else. */
#cp-main table.table1 td.mark input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    accent-color: #096EFF !important;
    cursor: pointer !important;
}

/* Touch targets: bigger again on phones, where these are tapped rather than clicked
   and each sits alone at the right edge of its card row. */
@media (max-width: 700px) {
    #cp-main table.table1 td.mark input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }
}


/* ── PM quick reply: send status ── */
.pm-qr-status {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.pm-qr-status:empty { display: none !important; }
.pm-qr-status.is-ok {
    color: #047857 !important;
    background: rgba(16,185,129,0.08) !important;
    border-left: 3px solid #10B981 !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 7px 11px !important;
}
.pm-qr-status.is-err {
    color: #b91c1c !important;
    background: rgba(220,38,38,0.06) !important;
    border-left: 3px solid #dc2626 !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 7px 11px !important;
}
.pm-qr-send-btn[disabled] {
    opacity: 0.65 !important;
    cursor: progress !important;
}


/* ════════════════════════════════════════════════════════
   PM COMPOSE — recipients row + Add groups
   phpBB lays "Add recipients" and "Add groups" out as floated .column1/.column2
   inside fieldset.fields1, which left the groups box stranded mid-row at its
   size="3" default: a cramped ~4-line list with its own scrollbar, visually
   unrelated to every other control on the page. Scoped by :has(#group_list) so
   only the PM compose header is touched — .column1/.column2 are generic phpBB
   layout classes used on other pages too.
   ════════════════════════════════════════════════════════ */
#cp-main fieldset.fields1:has(#group_list) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 28px !important;
    align-items: start !important;
}
#cp-main fieldset.fields1:has(#group_list) > .column1,
#cp-main fieldset.fields1:has(#group_list) > .column2 {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 700px) {
    #cp-main fieldset.fields1:has(#group_list) {
        grid-template-columns: 1fr !important;
    }
}

/* Label, in the same uppercase micro-style as every other field label */
#cp-main label[for="group_list"] {
    display: block !important;
    margin-bottom: 6px !important;
}
#cp-main label[for="group_list"] strong {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* The list itself: full width, tall enough to show the groups without a scrollbar,
   and styled to match the other form controls. */
#cp-main select#group_list {
    width: 100% !important;
    min-height: 140px !important;
    padding: 6px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}
#cp-main select#group_list:focus {
    border-color: #096EFF !important;
    box-shadow: 0 0 0 3px rgba(9,110,255,0.1) !important;
    outline: none !important;
    background: #ffffff !important;
}
#cp-main select#group_list option {
    padding: 7px 10px !important;
    border-radius: 6px !important;
    margin-bottom: 2px !important;
    line-height: 1.4 !important;
}
/* Selected rows: the UA highlight is a flat system blue that ignores our palette
   and, when the control loses focus, greys out so you cannot tell what is chosen. */
#cp-main select#group_list option:checked {
    background: linear-gradient(#096EFF, #096EFF) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}


/* ── PM compose: recipients BEFORE groups ──
   posting_pm_header.html emits the groups block (.column2) FIRST in the DOM and the
   recipients block (.column1) second, because phpBB floats them right/left. Once the
   fieldset became a grid, DOM order took over and groups led. `order` puts it back
   without touching the template. Explicit values with gaps so the trailing blocks
   (to_recipient list, bcc, the <hr>) keep a defined sequence — several of them share
   the .column1/.column2 class names. */
#cp-main fieldset.fields1:has(#group_list) > .column1 { order: 10 !important; }
#cp-main fieldset.fields1:has(#group_list) > .column2:has(#group_list) { order: 20 !important; }
#cp-main fieldset.fields1:has(#group_list) > hr {
    order: 25 !important;
    grid-column: 1 / -1 !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    height: 0 !important;
    margin: 4px 0 !important;
}
#cp-main fieldset.fields1:has(#group_list) > .column2:not(:has(#group_list)) { order: 30 !important; }

/* ── Labels above their fields, not beside them ──
   The mass-PM recipients control nests the caption and the textarea inside ONE label
   (<dt><label><strong>caption</strong><textarea></label></dt>), so both are inline and
   sit side by side, leaving the textarea squeezed into whatever width is left. Making
   the caption a block puts it on its own line, matching every other field on the page. */
#cp-main dl.pmlist dt label {
    display: block !important;
    width: 100% !important;
}
#cp-main dl.pmlist dt label strong {
    display: block !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 6px !important;
}
#cp-main textarea#username_list,
#cp-main input#username_list {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Add / Add [BCC] / Find a member sit under the field */
#cp-main dl.pmlist dd.recipients {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}

/* ── MOBILE: pagination must wrap, not run off the screen ──
   `#cp-main div.pagination ul` is inline-flex with no wrap, which is right on a wide
   row but overflows the viewport once there are 8 pages of PMs — the first pills were
   pushed off the left edge and unreachable. Also un-float the block: common.css:839
   floats .pagination right, which on a narrow screen strands it beside the text it
   should sit below. */
@media (max-width: 700px) {
    #cp-main div.pagination {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }
    #cp-main div.pagination ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        max-width: 100% !important;
    }
    #cp-main div.pagination ul li {
        flex: 0 0 auto !important;
        margin: 0 !important;
        float: none !important;
    }

    /* Action bars around the list: let their contents wrap instead of overflowing.
       This is what left a stray "s" stranded at the left edge — the tail of a
       "N messages" string being clipped rather than wrapped. */
    #cp-main .action-bar,
    #viewfolder .action-bar {
        flex-wrap: wrap !important;
        gap: 8px 10px !important;
        overflow-wrap: anywhere !important;
    }
    #cp-main .action-bar > div,
    #viewfolder .action-bar > div {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }
}


/* ── Quick reply header: both controls are real links now ──
   The arrow + "Reply" looked clickable but was plain text — a false affordance. It
   now opens the full editor, mirroring Forward on the right, so the header reads as
   "full editor on the left, forward on the right" and the inline box handles the
   quick path. */
.pm-qr-full-link,
.pm-quick-reply-header .pm-qr-forward-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #096EFF !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: background-color 130ms, color 130ms !important;
}
.pm-qr-full-link:hover,
.pm-quick-reply-header .pm-qr-forward-link:hover {
    background: #eff6ff !important;
    color: #0558d4 !important;
    text-decoration: none !important;
}
.pm-qr-full-link.is-static {
    color: #64748b !important;
    cursor: default !important;
}
.pm-qr-full-link.is-static:hover { background: transparent !important; color: #64748b !important; }


/* ── MOBILE: stack the compose recipient controls, label above field ──
   At phone width the two-column grid already collapses to one column, but the group
   list was still being laid out beside its caption and clipped ("Newly registered
   use…", "OA_SOCIAL_LOGIN_R…") because label and select share a line. Force the
   caption onto its own line and let the control take the full width. */
@media (max-width: 700px) {
    #cp-main label[for="group_list"] {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 0 6px 0 !important;
    }
    #cp-main select#group_list {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 150px !important;
        box-sizing: border-box !important;
    }
    /* The caption sits in .column2 next to the select; make the column a plain block
       so nothing can put them side by side. */
    #cp-main fieldset.fields1:has(#group_list) > .column2:has(#group_list) {
        display: block !important;
        width: 100% !important;
    }
    #cp-main fieldset.fields1:has(#group_list) > .column1 {
        display: block !important;
        width: 100% !important;
    }
}


/* ── Compose recipients: identical inset for both blocks ──
   .column1 and .column2 carry different default padding/margins from forms.css (they
   are meant to be a left/right float pair), so once stacked the recipients field and
   the groups list started at slightly different x positions. Zero both and let the
   panel's own padding be the single source of the left margin. */
#cp-main fieldset.fields1:has(#group_list) > .column1,
#cp-main fieldset.fields1:has(#group_list) > .column2 {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
#cp-main fieldset.fields1:has(#group_list) dl,
#cp-main fieldset.fields1:has(#group_list) dt,
#cp-main fieldset.fields1:has(#group_list) dd {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
/* Both controls span the same box */
#cp-main fieldset.fields1:has(#group_list) textarea#username_list,
#cp-main fieldset.fields1:has(#group_list) input#username_list,
#cp-main select#group_list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}


/* ── Equalise the label→field gap in the compose recipients row ──
   posting_pm_header.html:6-7 writes the groups block as
       <label for="group_list"><strong>…</strong></label><br /><select …><br />
   Those <br> elements were phpBB's way of stacking the pair before the label was a
   block. Now that it is, each one adds a full line box on top of the label's 6px
   margin, so ADD GROUPS sat noticeably further from its list than ADD RECIPIENTS did
   from its input. Drop the breaks and both gaps are just the 6px margin. */
#cp-main label[for="group_list"] + br,
#cp-main select#group_list + br {
    display: none !important;
}
#cp-main label[for="group_list"] {
    margin: 0 0 6px 0 !important;
}


/* ════════════════════════════════════════════════════════
   PM INBOX — modernised list (2026-07-28)
   Two-line mail-client rows, compact pagination, no column dividers.
   ════════════════════════════════════════════════════════ */

/* ── Two lines, not three ──
   `#cp-main .topiclist li.row dl dt span { display:block }` (the topic-list byline
   rule) turns EVERY span in the row into a block, so "by Author ·" and the relative
   date each claimed a line, giving 3-line rows. The meta line is one thought — keep it
   on one line and let it ellipsis. The inner span is the relativedates wrapper, which
   carries the exact-date tooltip, so it must stay inline too. */
.topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta,
.topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta span,
.topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta a {
    display: inline !important;
    white-space: nowrap !important;
}
.topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta {
    display: block !important;          /* the line itself is a block, its parts are not */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.76rem !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}
.topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta a {
    color: #64748b !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta a:hover {
    color: #096EFF !important;
}

/* ── Tighter rows ── */
.topiclist.pmlist li.row dl.row-item dt {
    padding: 11px 14px !important;
    gap: 13px !important;
}
.topiclist.pmlist li.row dl.row-item dt::before {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 0.92rem !important;
}
.topiclist.pmlist li.row a.topictitle {
    font-size: 0.875rem !important;
    line-height: 1.35 !important;
}

/* ── Checkbox: no column divider ──
   The mark dd inherited phpBB's column border, drawing a rule down the list and
   implying a table column that no longer exists in this layout. */
.topiclist.pmlist li.row dl.row-item dd.mark {
    border: none !important;
    border-left: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.topiclist.pmlist li.row dl.row-item dd.mark input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    accent-color: #096EFF !important;
    cursor: pointer !important;
    opacity: 0.45 !important;
    transition: opacity 120ms !important;
}
.topiclist.pmlist li.row:hover dl.row-item dd.mark input[type="checkbox"],
.topiclist.pmlist li.row dl.row-item dd.mark input[type="checkbox"]:checked,
.topiclist.pmlist li.row dl.row-item dd.mark input[type="checkbox"]:focus {
    opacity: 1 !important;
}

/* ── Unread: readable at a glance ──
   Previously only the subject went bold. A tinted row plus a left accent bar reads
   from across the list without having to compare font weights row by row. */
.topiclist.pmlist li.row.pm-new {
    background: #f5f9ff !important;
    box-shadow: inset 3px 0 0 #096EFF !important;
}
.topiclist.pmlist li.row.pm-new:hover { background: #eef5ff !important; }
.topiclist.pmlist li.row.pm-new a.topictitle {
    font-weight: 700 !important;
    color: #0d1117 !important;
}
.topiclist.pmlist li.row.pm-new dl.row-item dt .list-inner span.pm-meta {
    color: #64748b !important;
}

/* ── Compact pagination ──
   `#viewfolder .action-bar a.button` was styling page links as 20px-radius filled
   pills — that treatment is meant for New PM / action buttons, not for a run of eight
   page numbers, which ended up as a wall of blue blobs wider than the content. Exclude
   pagination from it and give the pager the small-pill treatment used elsewhere. */
#viewfolder .action-bar .pagination a.button,
#viewfolder .action-bar .pagination li a,
#viewfolder .action-bar .pagination li span {
    background: #eff6ff !important;
    color: #096EFF !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 0 8px !important;
    min-width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
#viewfolder .action-bar .pagination li a:hover {
    background: #096EFF !important;
    color: #ffffff !important;
}
#viewfolder .action-bar .pagination li.active span {
    background: #096EFF !important;
    color: #ffffff !important;
}
#viewfolder .action-bar .pagination li.ellipsis span {
    background: transparent !important;
    color: #94a3b8 !important;
    min-width: auto !important;
    padding: 0 3px !important;
}
#viewfolder .action-bar .pagination > ul {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#viewfolder .action-bar .pagination > ul > li { margin: 0 !important; float: none !important; }


/* ════════════════════════════════════════════════════════
   PM INBOX — corrections to the v236 pass (2026-07-28)
   ════════════════════════════════════════════════════════ */

/* ── 1. Two lines, for real this time ──
   The v236 rules lost on specificity and never applied. The competing declaration is
   `#cp-main .topiclist li.row dl dt span { display:block !important }` = (1 id, 2
   classes, 4 elements). An ID outranks any number of classes, so my (0,6,5) selector
   could never win no matter how specific it looked. Re-declared with #cp-main so the
   ID counts are equal and the class count decides. */
#cp-main .topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta span,
#cp-main .topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta a,
#cp-main .topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta em {
    display: inline !important;
    font-size: inherit !important;
    color: inherit !important;
    white-space: nowrap !important;
}
#cp-main .topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.76rem !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}
#cp-main .topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta a {
    color: #64748b !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#cp-main .topiclist.pmlist li.row dl.row-item dt .list-inner span.pm-meta a:hover {
    color: #096EFF !important;
}

/* ── 2. Unread rows — keyed on something that actually exists ──
   `.pm-new` is not a class phpBB ever emits: PM_CLASS is only ever
   `pm_<indicator>_colour` (replied / marked / friend / foe) — see
   ucp_pm_viewfolder.php:154. The dependable unread signal is the empty overlay link
   `<a class="row-item-link">`, which the template emits ONLY under
   `S_PM_UNREAD and not S_PM_DELETED`. */
#cp-main .topiclist.pmlist li.row:has(a.row-item-link) {
    background: #f4f9ff !important;
    box-shadow: inset 3px 0 0 #096EFF !important;
}
#cp-main .topiclist.pmlist li.row:has(a.row-item-link):hover {
    background: #ecf4ff !important;
}
#cp-main .topiclist.pmlist li.row:has(a.row-item-link) a.topictitle {
    font-weight: 700 !important;
    color: #0d1117 !important;
}
#cp-main .topiclist.pmlist li.row:has(a.row-item-link) dl.row-item dt .list-inner span.pm-meta {
    color: #64748b !important;
}
/* Unread dot, right of the subject */
#cp-main .topiclist.pmlist li.row:has(a.row-item-link) a.topictitle::after {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    margin-left: 8px !important;
    border-radius: 50% !important;
    background: #096EFF !important;
    vertical-align: middle !important;
}
/* Read rows: lighter subject so the contrast with unread is legible */
#cp-main .topiclist.pmlist li.row:not(:has(a.row-item-link)) a.topictitle {
    font-weight: 500 !important;
    color: #334155 !important;
}

/* ── 3. Pagination: bring back the blue bubbles, at a sane size ──
   v236 swapped them for a near-white tint that read as disabled. The filled blue was
   the right look — it was only ever the SIZE that was wrong (they overflowed mobile).
   So: keep the fill, shrink the pill, round it fully. */
#viewfolder .action-bar .pagination li a,
#viewfolder .action-bar .pagination a.button {
    background: #096EFF !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(9,110,255,0.25) !important;
    transition: background-color 130ms, box-shadow 130ms !important;
}
#viewfolder .action-bar .pagination li a:hover,
#viewfolder .action-bar .pagination a.button:hover {
    background: #0558d4 !important;
    box-shadow: 0 2px 7px rgba(9,110,255,0.4) !important;
}
/* Current page: inverted, so it reads as "you are here" rather than another target */
#viewfolder .action-bar .pagination li.active span {
    background: #ffffff !important;
    color: #096EFF !important;
    border: 2px solid #096EFF !important;
    border-radius: 999px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
}
#viewfolder .action-bar .pagination li.ellipsis span {
    background: transparent !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    min-width: auto !important;
    height: auto !important;
    padding: 0 4px !important;
}


/* ════════════════════════════════════════════════════════
   PM INBOX — header bar + footer layout (2026-07-28)
   ucp_pm_message_header.html:3 opens <form id="viewfolder"> and then
   <div class="panel"><div class="inner">, which ucp_pm_viewfolder.html closes at its
   end. So the header <ul>, the message <ul>, fieldset.display-actions, the <hr> and
   .action-bar.bottom are ALL siblings inside that one .inner — which is what makes
   reordering them possible without touching the templates.
   ════════════════════════════════════════════════════════ */

/* ── Restore the "Message / Mark" header bar ──
   It was hidden wholesale by the v129 fix, which had to hide the header <ul> because
   it shares the .two-columns class with the message list. Bring it back as the list
   card's own header strip rather than a detached blue slab like the original. */
#viewfolder ul.topiclist.two-columns:not(.pmlist) {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #f8fafc !important;
    border: 1px solid #e8ecf0 !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dl {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    float: none !important;
    border: none !important;
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt .list-inner {
    padding: 0 !important;
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: #64748b !important;
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dd.mark {
    width: 46px !important;
    min-width: 46px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: center !important;
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #94a3b8 !important;
}
/* The list now joins the header, so only its bottom corners round */
#cp-main .topiclist.pmlist {
    border: 1px solid #e8ecf0 !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
}

/* Kill the leftover column divider on the checkbox cell — the UCP list rule
   (`#cp-main .topiclist li.row dl dd`) carries an ID, so the earlier classes-only
   override never applied. Same trap as the pm-meta rules. */
#cp-main .topiclist.pmlist li.row dl.row-item dd.mark,
#cp-main .topiclist.pmlist li.header dl dd.mark {
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
}

/* ── Footer: pagination up, actions last ──
   Order was: list, bulk-action bar, <hr>, then a nearly empty bar holding the sort
   control, the message count and the pager — so the pager ended up furthest from the
   list it pages, with a rule and a block of whitespace in between. Put the pager
   directly under the list and demote the bulk actions. */
#viewfolder .panel > .inner {
    display: flex !important;
    flex-direction: column !important;
}
#viewfolder .panel > .inner > .action-bar.bar-top { order: 1 !important; }
#viewfolder .panel > .inner > ul.topiclist.two-columns:not(.pmlist) { order: 2 !important; }
#viewfolder .panel > .inner > ul.topiclist.pmlist { order: 3 !important; }
#viewfolder .panel > .inner > .action-bar.bottom { order: 4 !important; }
#viewfolder .panel > .inner > fieldset.display-actions { order: 5 !important; }
#viewfolder .panel > .inner > hr { display: none !important; }

/* Pager bar sits close under the list */
#viewfolder .action-bar.bottom {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
}
#viewfolder .action-bar.bottom .pagination {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    float: none !important;
    margin: 0 !important;
    margin-left: auto !important;      /* count + pager to the right, sort control left */
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    color: #64748b !important;
}

/* Bulk actions: one tidy row, no stray whitespace */
#viewfolder fieldset.display-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px 12px !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    margin: 16px 0 0 0 !important;
    padding: 14px 0 0 0 !important;
    text-align: left !important;
}
#viewfolder fieldset.display-actions > div:last-child {
    margin-left: 0 !important;
    font-size: 0.82rem !important;
    color: #cbd5e1 !important;
}
#viewfolder fieldset.display-actions > div:last-child a {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #096EFF !important;
    text-decoration: none !important;
    padding: 0 4px !important;
}
#viewfolder fieldset.display-actions > div:last-child a:hover { text-decoration: underline !important; }
#viewfolder fieldset.display-actions select {
    min-width: 0 !important;
    padding: 7px 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    background: #fafafa !important;
    color: #374151 !important;
}

@media (max-width: 700px) {
    #viewfolder .action-bar.bottom .pagination { margin-left: 0 !important; }
    #viewfolder fieldset.display-actions { justify-content: flex-start !important; }
}


/* ── Header label aligns with the title column ──
   The MESSAGE label sat hard against the card edge while every message title starts
   past the avatar, so it labelled empty space rather than the column it names. Indent
   it by exactly the row's own geometry: dt padding-left (14) + avatar (38) + gap (13). */
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt {
    padding-left: 65px !important;
}

/* ── Export this view — restored, folded into the bulk-actions bar ──
   It was hidden outright during the Overview pass to de-clutter the footer, which also
   removed the only way to export a folder. It belongs with the other bulk operations,
   so keep it there but make it quiet: a compact control pinned to the LEFT while
   mark/move stay right, rather than the stacked full-width block phpBB ships. */
#viewfolder fieldset.display-actions .left-box {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    float: none !important;
    margin: 0 auto 0 0 !important;   /* auto-right pushes everything else to the far end */
    padding: 0 !important;
    width: auto !important;
}
#viewfolder fieldset.display-actions .left-box br { display: none !important; }
#viewfolder fieldset.display-actions .left-box label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
}

/* Both "Go" buttons in this bar get the same secondary treatment */
#viewfolder fieldset.display-actions input[name="submit_export"],
#viewfolder fieldset.display-actions input[name="submit_mark"] {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 7px 16px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: border-color 130ms, background-color 130ms !important;
}
#viewfolder fieldset.display-actions input[name="submit_export"]:hover,
#viewfolder fieldset.display-actions input[name="submit_mark"]:hover {
    border-color: #096EFF !important;
    background: #f8fafc !important;
}

@media (max-width: 700px) {
    /* Stacked on phones: export first, then mark/move, then the links */
    #viewfolder fieldset.display-actions .left-box {
        margin: 0 0 4px 0 !important;
        width: 100% !important;
    }
    #viewfolder fieldset.display-actions .left-box label { width: 100% !important; }
    #viewfolder fieldset.display-actions .left-box label select { flex: 1 !important; min-width: 0 !important; }
    /* Header label indent tracks the smaller mobile avatar/gap */
    #viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt {
        padding-left: 14px !important;
    }
}


/* ⚠ SUPERSEDED — DEAD AS WRITTEN. Read this before trusting the note below.
   Verified 2026-08-02. The block further down at "Header label: centred" overrides
   every load-bearing declaration here: it sets `display: block` (killing the flex row
   and its gap), `content: none` on the ::before (deleting the avatar spacer), and
   `text-align: center` (so no left offset is being mirrored at all). The mobile
   variants are overridden the same way. The alignment machinery described below is
   therefore switched OFF — the "MESSAGE" header is simply centred over the list.

   Left in place, not deleted, because it is the only record of how the 107px offset
   decomposes, which is what you would need to undo the centring. If you ever restore
   left-alignment, delete the centring block rather than adding a sixth override —
   `#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt` is already declared
   FIVE times in this sheet with contradictory intents, and that is the actual defect
   here. Consolidate rather than append.
   ────────────────────────────────────────────────────────────────────────────────
   ── Header label: mirror the row's geometry instead of guessing an offset ──
   A message title sits at dt padding-left (14) + avatar (38) + gap (13) +
   .list-inner padding-left (42) = 107px. The last 42 comes from
   `ul.topiclist dl.row-item dt .list-inner` (line 835), which the header never gets
   because its <dl> carries no .row-item class. Rather than hardcode 107 — which would
   silently drift the moment the avatar or padding changes — rebuild the header with
   the SAME four parts: same padding, an invisible spacer the width of the avatar, the
   same gap, and the same .list-inner inset. */
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;               /* = row dt gap */
    padding: 9px 14px !important;       /* = row dt horizontal padding */
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt::before {
    content: "" !important;
    display: block !important;
    width: 38px !important;             /* = avatar width */
    min-width: 38px !important;
    height: 0 !important;
    flex-shrink: 0 !important;
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt .list-inner {
    padding-left: 42px !important;      /* = row .list-inner inset */
    padding-right: 0 !important;
}

/* ── Tighten the run-up to the list ──
   Top action bar -> header bar had a double gap: the bar's own vertical padding plus
   the list's top margin. */
#viewfolder .action-bar.bar-top {
    padding: 10px 0 6px 0 !important;
    margin-bottom: 0 !important;
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) {
    margin-top: 6px !important;
}

/* ── Footer: undo the inherited row-reverse ──
   `#cp-main fieldset.display-actions` sets flex-direction: row-reverse (it was written
   for the Overview bars, where DOM order is button-then-links). Inherited here it put
   "Go" BEFORE the select it applies to, and pushed Mark all / Unmark all to the front —
   reading right-to-left against the DOM. Restore normal order so each Go follows its
   own control. */
#viewfolder fieldset.display-actions {
    flex-direction: row !important;
}

@media (max-width: 700px) {
    /* Header spacer/inset shrink with the row on phones */
    #viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt {
        padding: 9px 12px !important;
        gap: 10px !important;
    }
    #viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt::before {
        width: 0 !important;
        min-width: 0 !important;
    }
    #viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt .list-inner {
        padding-left: 0 !important;
    }

    /* The pager wraps to two rows on a phone, so the bar below it needs less air,
       not more. */
    #viewfolder .action-bar.bar-top { padding: 8px 0 2px 0 !important; }
    #viewfolder ul.topiclist.two-columns:not(.pmlist) { margin-top: 2px !important; }

    /* Footer: one compact stack instead of five loosely spaced islands */
    #viewfolder .action-bar.bottom {
        gap: 8px 10px !important;
        margin-top: 10px !important;
    }
    #viewfolder .action-bar.bottom .pagination {
        gap: 6px 8px !important;
        width: 100% !important;
    }
    #viewfolder fieldset.display-actions {
        flex-wrap: wrap !important;
        gap: 8px 8px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
    }
    /* Keep each select glued to its own Go rather than letting them wrap apart */
    #viewfolder fieldset.display-actions select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    #viewfolder fieldset.display-actions input[name="submit_export"],
    #viewfolder fieldset.display-actions input[name="submit_mark"] {
        flex: 0 0 auto !important;
    }
    #viewfolder fieldset.display-actions > div:last-child {
        flex: 1 0 100% !important;
        text-align: right !important;
    }
}


/* ── MESSAGE label: centred, on desktop and mobile ──
   Replaces the mirror-the-row-geometry attempt above. That reconstruction assumed the
   row's flex `gap` contributed to the title's offset; measured against the rendered
   list it does not (title lands at padding 14 + avatar 38 + .list-inner 42 = 94, with
   no gap term), so the label overshot by exactly the gap. Rather than keep chasing an
   offset that has to be re-derived every time the avatar or padding changes, centre it
   — which is stable by construction and matches the mobile treatment used across the
   rest of the UCP. */
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt {
    display: block !important;
    padding: 9px 14px !important;
    text-align: center !important;
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt::before {
    content: none !important;          /* drop the avatar-width spacer entirely */
}
#viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt .list-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

/* ── Breathing room under the last row ──
   The final message sat flush against the card's bottom border. */
#cp-main .topiclist.pmlist {
    padding-bottom: 4px !important;
}
#cp-main .topiclist.pmlist li.row:last-child dl.row-item dt {
    padding-bottom: 13px !important;
}

/* ── Export block: caption on its own line, select + Go together ── */
#viewfolder fieldset.display-actions .left-box {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
}
#viewfolder fieldset.display-actions .left-box .export-caption {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
}
#viewfolder fieldset.display-actions .left-box .export-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

@media (max-width: 700px) {
    /* Caption takes the full first line; select and Go share the second, so Go is
       never orphaned on a line of its own. */
    #viewfolder fieldset.display-actions .left-box .export-caption {
        flex: 1 0 100% !important;
    }
    #viewfolder fieldset.display-actions .left-box .export-controls {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
    #viewfolder fieldset.display-actions .left-box .export-controls select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    #viewfolder fieldset.display-actions .left-box .export-controls input[name="submit_export"] {
        flex: 0 0 auto !important;
    }
    /* Header stays centred on phones too */
    #viewfolder ul.topiclist.two-columns:not(.pmlist) li.header dt {
        padding: 9px 12px !important;
        text-align: center !important;
    }
}


/* ════════════════════════════════════════════════════════
   UCP PM OPTIONS — rules + folder management (2026-07-28)
   ucp_pm_options.html is a form#ucp, so the Profile field styling and the radio-pair
   fix from Board preferences already apply. What it adds: an <ol class="def-rules">
   rules list, a multi-step rule builder whose buttons live inline in <dd>s rather than
   in a submit-buttons fieldset, and <hr class="dashed"> separators.
   ════════════════════════════════════════════════════════ */

/* ── Defined rules list ── */
#cp-main ol.def-rules {
    list-style: none !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    border: 1px solid #e8ecf0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}
#cp-main ol.def-rules li {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
    line-height: 1.5 !important;
    background: #ffffff !important;
    transition: background-color 120ms !important;
}
#cp-main ol.def-rules li:last-child { border-bottom: none !important; }
#cp-main ol.def-rules li:hover { background: #f8fafc !important; }
/* IF / THEN keywords carry the sentence — make them the anchors, not shouty bold text */
#cp-main ol.def-rules li strong {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #096EFF !important;
}
#cp-main ol.def-rules li em {
    font-style: normal !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}
/* The delete button is floated right by phpBB; in a flex row that float does nothing,
   so push it to the end explicitly. */
#cp-main ol.def-rules li .right-box {
    float: none !important;
    margin-left: auto !important;
    order: 99 !important;
}
#cp-main ol.def-rules li > div[style*="clear"] { display: none !important; }
/* "No rules defined" empty state */
#cp-main ol.def-rules li:only-child strong:only-child {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #94a3b8 !important;
    font-style: italic !important;
}

/* ── Inline buttons in the rule builder and folder controls ──
   These sit directly in a <dd> beside their control, not in a submit-buttons fieldset,
   so none of the existing button rules reached them and they rendered as native
   controls. */
#cp-main form#ucp fieldset.fields2 input.button2,
#cp-main form#ucp ol.def-rules input.button2,
#cp-main form[id^="mcp"] fieldset.fields2 input.button2,
#cp-main form[id^="mcp"] ol.def-rules input.button2 {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 7px 16px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: border-color 130ms, background-color 130ms, color 130ms !important;
}
#cp-main form#ucp fieldset.fields2 input.button2:hover,
#cp-main form[id^="mcp"] fieldset.fields2 input.button2:hover {
    border-color: #096EFF !important;
    background: #f8fafc !important;
}
/* Deleting a rule is destructive — make it read that way on hover */
#cp-main form#ucp ol.def-rules input.button2:hover,
#cp-main form[id^="mcp"] ol.def-rules input.button2:hover {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
}
#cp-main form#ucp fieldset.fields2 input.button1,
#cp-main form[id^="mcp"] fieldset.fields2 input.button1 {
    background: linear-gradient(135deg, #064fc8, #096EFF) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(9,110,255,0.28) !important;
    white-space: nowrap !important;
}
#cp-main form#ucp fieldset.fields2 input.button1:hover,
#cp-main form[id^="mcp"] fieldset.fields2 input.button1:hover {
    box-shadow: 0 4px 14px rgba(9,110,255,0.4) !important;
}

/* ── A control and its button share a line ──
   Every step of the rule builder, and Add / Rename folder, is "<control> <button>" in
   one dd. Left alone the control takes width:100% from the Profile rules and shoves
   the button onto its own line. */
#cp-main form#ucp fieldset.fields2 dd:has(> input.button1),
#cp-main form#ucp fieldset.fields2 dd:has(> input.button2),
#cp-main form[id^="mcp"] fieldset.fields2 dd:has(> input.button1),
#cp-main form[id^="mcp"] fieldset.fields2 dd:has(> input.button2) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
}
#cp-main form#ucp fieldset.fields2 dd:has(> input.button1) > input.inputbox,
#cp-main form#ucp fieldset.fields2 dd:has(> input.button2) > input.inputbox,
#cp-main form#ucp fieldset.fields2 dd:has(> input.button1) > select,
#cp-main form#ucp fieldset.fields2 dd:has(> input.button2) > select,
#cp-main form[id^="mcp"] fieldset.fields2 dd:has(> input.button1) > input.inputbox,
#cp-main form[id^="mcp"] fieldset.fields2 dd:has(> input.button2) > input.inputbox,
#cp-main form[id^="mcp"] fieldset.fields2 dd:has(> input.button1) > select,
#cp-main form[id^="mcp"] fieldset.fields2 dd:has(> input.button2) > select {
    flex: 1 1 200px !important;
    width: auto !important;
    min-width: 0 !important;
}
#cp-main form#ucp fieldset.fields2 dd:has(> input.button1) > input.button1,
#cp-main form#ucp fieldset.fields2 dd:has(> input.button2) > input.button2,
#cp-main form[id^="mcp"] fieldset.fields2 dd:has(> input.button1) > input.button1,
#cp-main form[id^="mcp"] fieldset.fields2 dd:has(> input.button2) > input.button2 {
    flex: 0 0 auto !important;
}

/* The "Previous step" button lives in the dt, where the uppercase label styling would
   otherwise swallow it. */
#cp-main form#ucp fieldset.fields2 dt:has(> input.button2),
#cp-main form[id^="mcp"] fieldset.fields2 dt:has(> input.button2) {
    margin-bottom: 8px !important;
}

/* ── Dashed separators ── */
#cp-main form#ucp hr.dashed,
#cp-main form[id^="mcp"] hr.dashed {
    border: none !important;
    border-top: 1px dashed #e2e8f0 !important;
    height: 0 !important;
    margin: 20px 0 !important;
}

/* ── Folder-action radio rows ──
   Each is `<label><radio> caption</label> <select>` in one dd. The Board-preferences
   radio rule already lays these out inline; this just keeps the trailing select from
   stretching to the full row. */
#cp-main form#ucp fieldset.fields2 dd:has(> label > input[type="radio"]) > select,
#cp-main form[id^="mcp"] fieldset.fields2 dd:has(> label > input[type="radio"]) > select {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 160px !important;
}


/* ════════════════════════════════════════════════════════
   PROFILE — "recent posts" list (senky/userrecentactivity, 2026-07-28)
   Rendered by the memberlist_view_content_append event, which fires AFTER </form> but
   still inside .viewtopic_wrapper — the only container unique to the profile page. It
   reuses div.forumbg > ul.topiclist, exactly the board-index forum-list structure, so
   every rule here is scoped to .viewtopic_wrapper to keep the index untouched.
   Quirk: the extension emits ONE <ul class="topiclist"> PER POST, not one list with
   many rows, so the rows have to be stitched into a continuous list by CSS.
   ════════════════════════════════════════════════════════ */

/* Card wrapper — replaces the flat saturated blue slab */
.viewtopic_wrapper .forumbg {
    background: #ffffff !important;
    border: 1px solid #e8ecf0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
    margin: 22px 0 !important;
    padding: 0 !important;
}
.viewtopic_wrapper .forumbg > .inner {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.viewtopic_wrapper .forumbg ul.topiclist {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── Header row ── */
.viewtopic_wrapper .forumbg ul.topiclist li.header {
    background: #f8fafc !important;
    border: none !important;
    border-bottom: 2px solid #e8ecf0 !important;
    padding: 0 !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.header dl {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 11px 16px !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.header dt,
.viewtopic_wrapper .forumbg ul.topiclist li.header dd {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.header dt { flex: 1 !important; min-width: 0 !important; }

/* ── Rows — stitched into one continuous list ──
   Each post is its own <ul>, so a bottom hairline on the row plus zero list margins is
   what makes them read as a single table. */
.viewtopic_wrapper .forumbg ul.topiclist li.row {
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: background-color 120ms !important;
}
.viewtopic_wrapper .forumbg ul.topiclist:last-child li.row { border-bottom: none !important; }
.viewtopic_wrapper .forumbg ul.topiclist li.row:hover { background: #f8fafc !important; }
.viewtopic_wrapper .forumbg ul.topiclist li.row dl {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dt {
    flex: 1 !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dt .list-inner {
    padding: 0 !important;
    min-width: 0 !important;
}

/* Subject */
.viewtopic_wrapper .forumbg ul.topiclist li.row a.topictitle {
    display: block !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #0d1117 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row a.topictitle:hover { color: #096EFF !important; }

/* Excerpt — one quiet line, clipped rather than wrapped */
.viewtopic_wrapper .forumbg ul.topiclist li.row dt em {
    display: block !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-style: normal !important;
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    line-height: 1.45 !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dt br { display: none !important; }

/* ── Counts — same bold, elegant treatment as the topic list ── */
.viewtopic_wrapper .forumbg ul.topiclist dd.posts,
.viewtopic_wrapper .forumbg ul.topiclist dd.views {
    flex: 0 0 72px !important;
    width: 72px !important;
    text-align: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.posts dfn,
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.views dfn,
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost dfn { display: none !important; }

/* ── Date + "view latest" ──
   phpBB puts both in one <span>; the link was running straight into the date. */
.viewtopic_wrapper .forumbg ul.topiclist dd.lastpost {
    flex: 0 0 190px !important;
    width: 190px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    text-align: left !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost a {
    color: #096EFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost a:hover { text-decoration: underline !important; }

/* ── MOBILE: one card per post, counts on a labelled line ──
   responsive.css hides ul.topiclist dd below 700px, which would drop replies/views/date
   entirely. The extension already ships <dfn> labels for exactly this case — bring the
   columns back as a single labelled meta row instead. */
@media (max-width: 700px) {
    .viewtopic_wrapper .forumbg ul.topiclist li.row dl {
        flex-wrap: wrap !important;
        padding: 11px 13px !important;
        gap: 6px 14px !important;
    }
    .viewtopic_wrapper .forumbg ul.topiclist li.row dt { flex: 1 0 100% !important; }
    .viewtopic_wrapper .forumbg ul.topiclist li.row dd.posts,
    .viewtopic_wrapper .forumbg ul.topiclist li.row dd.views,
    .viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex: 0 0 auto !important;
        width: auto !important;
        text-align: left !important;
        font-size: 0.76rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
    }
    .viewtopic_wrapper .forumbg ul.topiclist li.row dd.posts dfn,
    .viewtopic_wrapper .forumbg ul.topiclist li.row dd.views dfn {
        display: inline !important;
        font-style: normal !important;
        font-family: "Space Grotesk", "Inter", sans-serif !important;
        font-size: 0.6rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        color: #94a3b8 !important;
    }
    .viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost { flex: 1 0 100% !important; }
    /* Column headers mean nothing once the row is a card */
    .viewtopic_wrapper .forumbg ul.topiclist li.header dd { display: none !important; }
}


/* ── Recent posts: fix the overflow, colour the counts ──
   Overflow cause: dd.lastpost was `flex: 0 0 190px` (no grow, NO SHRINK) holding
   "2 weeks ago" + "View the latest post" on one nowrap line. The box stayed 190px
   while the text ran straight out past the card edge. {LAST_POST_IMG} resolves to its
   alt text rather than an icon on the memberlist page, so that label is genuinely long
   — stack it under the date instead of fighting for horizontal room. */
.viewtopic_wrapper .forumbg ul.topiclist li.row dl { overflow: hidden !important; }
.viewtopic_wrapper .forumbg ul.topiclist dd.lastpost {
    flex: 0 1 190px !important;
    width: auto !important;
    min-width: 0 !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost span {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost a {
    font-size: 0.75rem !important;
}

/* Counts in the brand tricolour — the same blue / amber / green that runs down the
   h2 accent bar site-wide. Replies green and Views blue match the topic list; the date
   takes the amber so the three columns read as one deliberate set rather than two
   coloured numbers beside grey text. Amber is darkened to #b45309 so it reads as text
   rather than as a warning. */
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.posts {
    color: #059669 !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.views {
    color: #096EFF !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost {
    color: #b45309 !important;
}
/* Header labels pick up a tint of the column they name */
.viewtopic_wrapper .forumbg ul.topiclist li.header dd.posts { color: #059669 !important; }
.viewtopic_wrapper .forumbg ul.topiclist li.header dd.views { color: #096EFF !important; }
.viewtopic_wrapper .forumbg ul.topiclist li.header dd.lastpost span { color: #b45309 !important; }

@media (max-width: 700px) {
    /* Column keeps its colours but returns to a single line on cards */
    .viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost span {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
}


/* ════════════════════════════════════════════════════════
   PROFILE PAGE — MOBILE (2026-07-29)
   ════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

/* ── Detail rows: stack label over value ──
   common.css:762 lays dl.details out as a float pair — dt 30% right-aligned, dd 65%
   left-aligned. On a phone 30% cannot hold "OCCUPATION:", so the label wrapped onto its
   own line ABOVE the value while staying right-aligned: the two halves of one field
   ended up at opposite edges, reading as unrelated. Stack them instead, label first,
   both flush left, which is what every other field on the site already does. */
#viewprofile dl.details {
    display: block !important;
    margin: 0 !important;
}
#viewprofile dl.details dt {
    float: none !important;
    clear: none !important;
    width: auto !important;
    text-align: left !important;
    display: block !important;
    margin: 12px 0 3px 0 !important;
    padding: 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #94a3b8 !important;
}
#viewprofile dl.details dt:first-child { margin-top: 0 !important; }
#viewprofile dl.details dd {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    color: #1e293b !important;
    line-height: 1.5 !important;
}
/* The group picker is a select + Go pair; give it the full width it needs */
#viewprofile dl.details dd select {
    max-width: 100% !important;
    min-width: 0 !important;
}
#viewprofile dl.details dd form,
#viewprofile dl.details dd > * { max-width: 100% !important; }

/* ── Recent posts: bring the column labels back ──
   content.css:95 parks `ul.topiclist dfn` off-screen (position:absolute; left:-999px)
   rather than hiding it, which is why a display change alone had no effect — the label
   was being rendered 999px to the left the whole time. Un-park it so the counts read
   as "REPLIES 0 / VIEWS 20" instead of two bare numbers. */
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.posts dfn,
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.views dfn {
    position: static !important;
    left: auto !important;
    width: auto !important;
    display: inline !important;
    font-style: normal !important;
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #94a3b8 !important;
}
/* "Last post" label adds nothing once the date is on its own line */
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost dfn {
    position: absolute !important;
    left: -999px !important;
}
/* Label before number reads better than after */
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.posts,
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.views {
    flex-direction: row-reverse !important;
    gap: 5px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.posts { color: #059669 !important; }
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.views { color: #096EFF !important; }

/* Meta line: counts and date on one wrapped row, separated from the title */
.viewtopic_wrapper .forumbg ul.topiclist li.row dl {
    gap: 4px 16px !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost {
    flex: 1 0 100% !important;
    margin-top: 2px !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.lastpost span {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Excerpt may use two lines on a phone — one clipped line loses too much */
.viewtopic_wrapper .forumbg ul.topiclist li.row dt em {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row a.topictitle {
    white-space: normal !important;
    overflow: visible !important;
}

}


@media (max-width: 700px) {

/* ── Short detail fields stay on one line ──
   Age is two or three characters; giving it a whole line of its own wastes vertical
   space when the label is longer than the value. Marked in the template with
   .detail-inline so the choice is explicit per field rather than guessed from the
   value's length — other short fields can opt in the same way. */
#viewprofile dl.details dt.detail-inline {
    display: inline-block !important;
    margin: 12px 6px 3px 0 !important;
    vertical-align: baseline !important;
}
#viewprofile dl.details dd.detail-inline {
    display: inline-block !important;
    vertical-align: baseline !important;
    margin: 0 !important;
}
/* The pair still has to start a new line — the preceding dd is a block, so this only
   needs the inline-block pair not to be split by the browser. */
#viewprofile dl.details dt.detail-inline::after { content: "" !important; }

/* ── Room for large reply counts ──
   REPLIES and VIEWS sat in a flex row with only the column gap between them, so a
   seven-figure reply count would run straight into the VIEWS label. Reserve a minimum
   width for the count so the columns keep their rhythm as numbers grow. */
.viewtopic_wrapper .forumbg ul.topiclist li.row dd.posts {
    min-width: 96px !important;
    padding-right: 10px !important;
    box-sizing: content-box !important;
}
.viewtopic_wrapper .forumbg ul.topiclist li.row dl {
    gap: 4px 20px !important;
}

}


/* ── Contact panel: drop the duplicate labels ──
   Every row in this list is a self-describing action link — "Send email to Eli",
   "Send private message", "Visit website" — so EMAIL ADDRESS: / PM: / WEBSITE: above
   them said the same thing twice and doubled the block's height. Hiding them is safe
   for screen readers precisely because the link text already carries the meaning.
   Tagged in the template rather than keyed on .panel.bg2, so adding a panel later
   cannot silently move this rule onto a different list. */
#viewprofile dl.details.contact-details dt {
    display: none !important;
}
/* The dt was providing the vertical rhythm; give it back to the rows. */
#viewprofile dl.details.contact-details dd {
    float: none !important;
    width: auto !important;
    margin: 0 0 8px 0 !important;
    padding-left: 0 !important;
}
#viewprofile dl.details.contact-details dd:last-child { margin-bottom: 0 !important; }


/* ════════════════════════════════════════════════════════
   PROFILE PAGE — uniform block rhythm (2026-07-29)
   Gaps came from three stacked sources: base `.panel { margin-bottom:15px }`
   (common.css) plus a separate `margin-top:16px` on `.bg2` AND on `.bg1 + .bg1` — about
   31px of margin with 30px of facing padding on top of it. Collapse to ONE source so
   every block on the page is the same distance from its neighbour.
   ════════════════════════════════════════════════════════ */
#viewprofile .panel,
#viewprofile .panel.bg1,
#viewprofile .panel.bg2 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
#viewprofile .panel + .panel,
#viewprofile .panel.bg2,
#viewprofile .panel.bg1 + .panel.bg1 {
    margin-top: 12px !important;
}
/* The recent-posts card is outside #viewprofile, so it needs the same figure to keep
   the rhythm unbroken across the form boundary. */
.viewtopic_wrapper .forumbg {
    margin: 12px 0 0 0 !important;
}

/* ── Signature: give it the card the other blocks have ──
   The existing rule targets `.panel.bg1 + .panel.bg1`, but the panels run
   bg1 -> bg2 -> bg1, so that adjacency NEVER matches and the signature block was
   rendering with no background, border or radius — flat on the page while everything
   above and below it sat in a card. */
#viewprofile .panel.bg2 ~ .panel.bg1 {
    background: #ffffff !important;
    border: 1px solid #e8ecf0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}
/* Its heading was likewise unstyled — .column1/.column2 h3 rules don't reach it,
   because the signature h3 sits directly in the panel with no column wrapper. */
#viewprofile .panel.bg2 ~ .panel.bg1 h3 {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 8px !important;
    margin: 0 0 14px 0 !important;
}

@media (max-width: 700px) {
    /* Slightly tighter facing padding on phones, where the panel padding is a larger
       share of the screen than it is on desktop. */
    #viewprofile .panel { padding: 14px !important; }
    #viewprofile .panel + .panel,
    #viewprofile .panel.bg2,
    #viewprofile .panel.bg1 + .panel.bg1 { margin-top: 10px !important; }
    .viewtopic_wrapper .forumbg { margin-top: 10px !important; }
}


/* ── Close the gap between the last detail row and the next panel ──
   Four things were stacking below "Tanzania": the last dd's margin-bottom (5px,
   common.css), the dl's own trailing margin, the panel's bottom padding, and then on
   the next panel a top padding PLUS the UA default margin-top on <h3> — phpBB only
   ever declares `h3 { margin-bottom: 15px }`, never a top margin, so the browser's own
   ~1em survives. Zero the ones that carry no meaning and let the panel gap alone do
   the separating. */
#viewprofile .column1 h3,
#viewprofile .column2 h3,
#viewprofile .panel.bg2 ~ .panel.bg1 h3 {
    margin-top: 0 !important;
}
#viewprofile dl.details {
    margin-bottom: 0 !important;
}
#viewprofile dl.details dd:last-of-type,
#viewprofile dl.details dd:last-child {
    margin-bottom: 0 !important;
}
#viewprofile .panel {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
#viewprofile .panel + .panel,
#viewprofile .panel.bg2,
#viewprofile .panel.bg1 + .panel.bg1 {
    margin-top: 8px !important;
}
.viewtopic_wrapper .forumbg { margin-top: 8px !important; }

@media (max-width: 700px) {
    #viewprofile .panel {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }
    #viewprofile .panel + .panel,
    #viewprofile .panel.bg2,
    #viewprofile .panel.bg1 + .panel.bg1 { margin-top: 8px !important; }
    .viewtopic_wrapper .forumbg { margin-top: 8px !important; }
    /* Last detail row sits flush to the panel's bottom padding */
    #viewprofile dl.details dd:last-of-type { margin-bottom: 0 !important; }

    /* ── USER STATISTICS needs to read as a new section ──
       Contact and User statistics are two columns of ONE panel, side by side on desktop
       where the column break is what separates them. Below 700px they stack, the break
       disappears, and the heading was left sitting directly under the Visit website
       button with only its own 14px bottom margin — closer to the block it follows than
       to the block it introduces, so it read as a caption for the buttons above it.
       Restore the separation the lost column break was providing.
       Mobile only: on desktop this would push the second column's heading out of line
       with the first's. Overrides the `margin-top: 0` h3 reset further up, which exists
       to kill the UA's default top margin between panels — a different problem. */
    #viewprofile .column2 h3 {
        margin-top: 26px !important;
    }
}

/* ════════════════════════════════════════════════════════
   UCP — Usergroups (ucp.php?i=ucp_groups)
   Covers both sub-pages: "Usergroups" (membership) and "Manage groups".

   Scoped through .grouplist, a class added in the Milk_v2 template overrides. It has to
   be: group rows are plain `ul.topiclist.cplist li.row` with an `a.forumtitle` inside,
   exactly like the Watched Forums rows in Subscriptions, so any selector general enough
   to catch groups would restyle those too.

   The generic #cp-main list rules above already give these lists the blue header bar,
   the flex row layout and the 50px dd.mark column. What is added here is everything
   specific to groups: the two kinds of radio, the description/status lines, the
   section rhythm, and the footer action bar.
   ════════════════════════════════════════════════════════ */

/* Intro paragraph ("Your usergroups are listed below…") */
#cp-main form#ucp .panel > .inner > p,
#cp-main form[id^="mcp"] .panel > .inner > p {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    margin: 0 0 16px !important;
}

/* ── Section rhythm ──
   The page stacks up to four caption-bar + list pairs (Leader / Member / Pending /
   Non-member), and the first two share a single panel, so nothing separates the end of
   one list from the next caption bar. Space every bar that is not the first. */
#cp-main .grouplist.two-columns,
#cp-main .grouplist.two-long-columns {
    margin-bottom: 0 !important;
}
#cp-main .cplist.grouplist {
    margin-bottom: 0 !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 0 !important;
}
#cp-main .cplist.grouplist + .grouplist.two-columns,
#cp-main .cplist.grouplist + .grouplist.two-long-columns {
    margin-top: 22px !important;
}
#cp-main .cplist.grouplist li.row:last-child {
    border-bottom: 0 !important;
}

/* ── Group name ──
   Both classes on purpose. The two sub-pages mark up the same object differently —
   Edit memberships uses a.forumtitle, Manage groups uses a.topictitle — so the name
   picked up two different fonts depending on which page you were on: Space Grotesk here,
   and Inter 0.9rem from the generic "topic/draft title link" rule further up. A group
   name is a link, so Space Grotesk on both.

   No `color` here on purpose. phpBB writes the group's own colour as an inline style,
   which would beat a plain declaration and which we want to keep — the colour is the
   group's identity. Only untinted groups fall through to the slate default. */
#cp-main .cplist.grouplist li.row dl dt a.forumtitle,
#cp-main .cplist.grouplist li.row dl dt a.topictitle {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
}
#cp-main .cplist.grouplist li.row dl dt a.forumtitle:not([style]),
#cp-main .cplist.grouplist li.row dl dt a.topictitle:not([style]) {
    color: #1e293b !important;
}
#cp-main .cplist.grouplist li.row dl dt a.forumtitle:hover,
#cp-main .cplist.grouplist li.row dl dt a.topictitle:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* ── Description and status lines ──
   GROUP_STATUS is a full sentence ("This is a closed group, new members can only join
   upon invitation of a group leader."), not a short label, so it is set as quiet helper
   text rather than a pill — a chip 80 characters wide would look like a bug.

   Description and status share one treatment. They are different things in the data
   (the description is written by a group leader, the status is one of the five
   GROUP_IS_* sentences phpBB picks from the group type), but on the page they are the
   same thing: one sentence of grey prose under the group name. Most rows carry only one
   of the two, so styling them apart made the size and colour look arbitrary from row to
   row rather than meaningful — Global moderators' line came out larger and darker than
   Private's purely because of which field happened to be populated. Same size, same
   colour, sentence case; the only distinction kept is that a status following a
   description sits slightly closer to it than to the name. */
#cp-main .cplist.grouplist li.row .group-desc,
#cp-main .cplist.grouplist li.row .group-status {
    display: block !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-style: normal !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #64748b !important;
    margin-top: 3px !important;
}
#cp-main .cplist.grouplist li.row .group-desc + .group-status {
    margin-top: 1px !important;
}
#cp-main .cplist.grouplist li.row .list-inner {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* ── The two radios ──
   prosilver puts two unrelated radio groups in one row: `default` (inline, before the
   name — "this is my default group") and `selected` (in dd.mark — "act on this row").
   Left native they are identical grey circles and there is no way to tell them apart.
   They are given deliberately different shapes: the default one is a rounded square
   marker that sits in front of the name, the select one stays a circle in its column. */
#cp-main .cplist.grouplist li.row .group-default {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-right: 7px !important;
    cursor: pointer !important;
}
#cp-main .cplist.grouplist li.row .group-default input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    /* Same #94a3b8 as the select radio — see the note there. */
    border: 1.5px solid #94a3b8 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: border-color 120ms, background 120ms !important;
    flex-shrink: 0 !important;
}
#cp-main .cplist.grouplist li.row .group-default input[type="radio"]:hover {
    border-color: #096EFF !important;
}
#cp-main .cplist.grouplist li.row .group-default input[type="radio"]:checked {
    background: #096EFF !important;
    border-color: #096EFF !important;
}
#cp-main .cplist.grouplist li.row .group-default input[type="radio"]:checked::after {
    content: '' !important;
    display: block !important;
    width: 4px !important;
    height: 8px !important;
    margin: 1px auto 0 !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
/* Names the state the filled marker stands for. Without it the marker is just a second
   mystery control; `title` only helps a mouse user who happens to hover. */
#cp-main .cplist.grouplist li.row .group-default:has(input:checked)::after {
    content: 'Default' !important;
    margin-left: 6px !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
    background: #e7f1ff !important;
    color: #0b5ed7 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1.5 !important;
}

/* Select-this-row radio, matching the checkbox treatment used by the other CP lists.
   Border is #94a3b8, not the #cbd5e1 used elsewhere in the CP. Most rows on this page are
   special or hidden groups whose radio is disabled, so enabled/disabled is the single most
   important distinction here, and one slate step (300 vs 200) collapsed into "all pale
   circles" at phone size. The pre-redesign site got this right by accident, using native
   radios: the browser's default border is far darker than its disabled one. Widening the
   gap to 400-vs-200 reproduces that contrast without giving up the custom control. */
#cp-main .cplist.grouplist li.row dl dd.mark input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: border-color 120ms, box-shadow 120ms !important;
    flex-shrink: 0 !important;
}
#cp-main .cplist.grouplist li.row dl dd.mark input[type="radio"]:hover:not(:disabled) {
    border-color: #096EFF !important;
}
#cp-main .cplist.grouplist li.row dl dd.mark input[type="radio"]:checked {
    border-color: #096EFF !important;
    border-width: 5px !important;
}
/* Special groups (Administrators, Registered users…) cannot be joined or resigned, so
   their radio is disabled. Make that legible instead of leaving a dead-looking control. */
#cp-main .cplist.grouplist li.row dl dd.mark input[type="radio"]:disabled {
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
    cursor: not-allowed !important;
}

/* ── Manage groups: the Edit / Group list column ──
   Two bare links in adjacent dd.option cells. As pill buttons they read as the actions
   they are, and they stop competing with the group name for attention. */
#cp-main .grouplist-manage li.row dl dd.option {
    width: auto !important;
    text-align: right !important;
}
#cp-main .grouplist-manage li.row dl dd.option a {
    display: inline-block !important;
    padding: 5px 13px !important;
    border: 1px solid #d7e3f4 !important;
    border-radius: 7px !important;
    background: #f5f9ff !important;
    color: #0b5ed7 !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 120ms, border-color 120ms !important;
}
#cp-main .grouplist-manage li.row dl dd.option a:hover {
    background: #096EFF !important;
    border-color: #096EFF !important;
    color: #ffffff !important;
}

/* ── Footer action bar ──
   Upstream is a bare fieldset holding a floated .left-box and .right-box. Floats meant
   the two halves had no shared baseline and the fieldset had no height of its own.
   Flex gives both, and lets the halves stack cleanly on a phone. */
#cp-main form#ucp fieldset.group-actions,
#cp-main form[id^="mcp"] fieldset.group-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding: 14px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    overflow: visible !important;
}
#cp-main form#ucp fieldset.group-actions .left-box,
#cp-main form#ucp fieldset.group-actions .right-box,
#cp-main form[id^="mcp"] fieldset.group-actions .left-box,
#cp-main form[id^="mcp"] fieldset.group-actions .right-box {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
}
#cp-main form#ucp fieldset.group-actions label,
#cp-main form[id^="mcp"] fieldset.group-actions label {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    margin: 0 !important;
}
#cp-main form#ucp fieldset.group-actions select,
#cp-main form[id^="mcp"] fieldset.group-actions select {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    padding: 7px 10px !important;
    border: 1px solid #d5dde8 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    max-width: 100% !important;
}

@media (max-width: 700px) {
    /* dd.mark is absolutely positioned at right:5px on phones; .with-mark (added in the
       override) reserves the gutter so the radio no longer lands on the group name. */
    #cp-main .cplist.grouplist li.row dl dd.mark {
        top: 11px !important;
    }
    #cp-main .cplist.grouplist li.row .list-inner.with-mark {
        padding-right: 34px !important;
    }
    #cp-main .cplist.grouplist + .grouplist.two-columns,
    #cp-main .cplist.grouplist + .grouplist.two-long-columns {
        margin-top: 18px !important;
    }
    /* Footer halves stack, but each half stays a single row — the layout the
       pre-redesign site used, and the reason to go back to it: stretching the select to
       the full width left no room for Submit, which wrapped to a third line on its own
       and made the bar look unfinished. Letting the select be the only flexible item
       (`flex: 1 1 0` + `min-width: 0`, so it may shrink below its content width) keeps
       ACTION / dropdown / Submit together the way the original did.
       At 360px that leaves the select ~180px, comfortably enough for "Join selected". */
    #cp-main form#ucp fieldset.group-actions,
#cp-main form[id^="mcp"] fieldset.group-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 13px !important;
    }
    #cp-main form#ucp fieldset.group-actions .left-box,
    #cp-main form#ucp fieldset.group-actions .right-box,
#cp-main form[id^="mcp"] fieldset.group-actions .left-box,
#cp-main form[id^="mcp"] fieldset.group-actions .right-box {
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    #cp-main form#ucp fieldset.group-actions .left-box input,
#cp-main form[id^="mcp"] fieldset.group-actions .left-box input {
        flex: 1 1 auto !important;
    }
    #cp-main form#ucp fieldset.group-actions .right-box label,
    #cp-main form#ucp fieldset.group-actions .right-box input.button2,
#cp-main form[id^="mcp"] fieldset.group-actions .right-box label,
#cp-main form[id^="mcp"] fieldset.group-actions .right-box input.button2 {
        flex: 0 0 auto !important;
    }
    #cp-main form#ucp fieldset.group-actions .right-box select,
#cp-main form[id^="mcp"] fieldset.group-actions .right-box select {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    /* The primary action reads as primary at either width, so the two buttons no longer
       need to match: Change default group keeps the full-width row it already had. */
    #cp-main form#ucp fieldset.group-actions input.button2[name="submit"],
#cp-main form[id^="mcp"] fieldset.group-actions input.button2[name="submit"] {
        padding: 9px 18px !important;
    }
    /* Manage groups: the option pills sit under the group name rather than beside it */
    #cp-main .grouplist-manage li.row dl dd.option {
        display: inline-block !important;
        text-align: left !important;
        margin: 0 6px 0 0 !important;
        padding: 0 !important;
    }
    #cp-main .grouplist-manage li.row dl dd.option span { display: inline !important; }
}

/* The caption bar and its list are one card, so the bar keeps square bottom corners —
   the generic #cp-main header rule rounds all four, which on its own would leave a
   fully-rounded pill sitting on top of a square-shouldered list. */
#cp-main .grouplist li.header dl {
    border-radius: 8px 8px 0 0 !important;
}
/* Same reason, one level out. li.header carries the navy crescent as a 3px left border
   with `border-radius: 14px 0 0 14px`, so its bottom-left corner curved too. On a phone
   the bar is much taller than the ~35px it was tuned for, and that curve swung wide of
   the inner dl's 8px radius: the navy border reappeared below the blue fill as a large
   dark hook. Squaring the bottom-left both fixes the artefact and matches the card —
   the crescent now tapers into the list instead of curling away from it. */
#cp-main .grouplist li.header {
    border-radius: 14px 0 0 0 !important;
}

/* ── The SELECT column ──
   Two separate faults, both from the header cell and the row cell being sized by
   different rules. The generic pair gives every dd.mark `width: 50px`, but only the ROW
   gets `padding-left: 16px` + a 1px left border. So (a) the header's content box was the
   full 50px while the row's was 33px, putting the label 8px left of the radio it names,
   and (b) 50px is not enough for the word SELECT at 0.72rem/0.07em, which broke as
   "SELEC / T". Widen both cells to 78px, hand the header the row's exact left inset
   (transparent border, so no rule line appears in the blue bar), and take the extra 28px
   back out of the 48px gutter so the group names keep their width. */
@media (min-width: 701px) {
    #cp-main .grouplist li.header dl dd.mark,
    #cp-main .grouplist li.row dl dd.mark {
        width: 78px !important;
        margin-left: 20px !important;
    }
    #cp-main .grouplist li.header dl dd.mark {
        padding-left: 16px !important;
        border-left: 1px solid transparent !important;
        white-space: nowrap !important;
    }
}

/* links.css:73 gives a.forumtitle `margin-bottom: 6px`, written for the forum index where
   the title is followed by a description block. Here the description is its own element
   with its own margin, so the 6px was just dead space in the middle of every row. */
#cp-main .grouplist li.row dl dt a.forumtitle,
#cp-main .grouplist li.row dl dt a.topictitle {
    margin-bottom: 0 !important;
}

/* ── Footer buttons ──
   Neither of these was styled. `submit` fell through to the browser default because the
   generic UCP button rule (form[action*="ucp"] input.button2) explicitly excludes it,
   and `change_default` matched that rule and came out as the small grey secondary chip
   used for "Add"/"Find a member" — too quiet for the only action in its half of the bar.
   Use the same primary/outline pair as fieldset.submit-buttons elsewhere in the UCP. */
#cp-main form#ucp fieldset.group-actions input.button2[name="submit"],
#cp-main form[id^="mcp"] fieldset.group-actions input.button2[name="submit"] {
    background: linear-gradient(135deg, #064fc8, #096EFF) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 9px 24px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(9, 110, 255, 0.28) !important;
    transition: box-shadow 150ms !important;
}
#cp-main form#ucp fieldset.group-actions input.button2[name="submit"]:hover,
#cp-main form[id^="mcp"] fieldset.group-actions input.button2[name="submit"]:hover {
    box-shadow: 0 4px 14px rgba(9, 110, 255, 0.4) !important;
}
#cp-main form#ucp fieldset.group-actions input.button2[name="change_default"],
#cp-main form[id^="mcp"] fieldset.group-actions input.button2[name="change_default"] {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 8px 18px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: border-color 150ms, background 150ms !important;
}
#cp-main form#ucp fieldset.group-actions input.button2[name="change_default"]:hover,
#cp-main form[id^="mcp"] fieldset.group-actions input.button2[name="change_default"]:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

@media (max-width: 700px) {
    /* ── Header bar height ──
       The bar was 72-85px tall on a phone against ~35px on desktop, because three
       sources of vertical space stack up and only one of them is cancelled below 701px:
         * li.header padding      10px + 10px  (ours, both breakpoints)
         * header dt/dd padding   10px + 10px  (ours, both breakpoints)
         * content.css:120        14px + 14px margin on li.header dt/dd — zeroed ONLY
                                  inside the desktop @media block, so it survives here
         * .list-inner            min-height: 28px
       Collapse everything but one padding pair; the bar then matches the desktop rhythm. */
    #cp-main .grouplist li.header {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
    #cp-main .grouplist li.header dl dt,
    #cp-main .grouplist li.header dl dd {
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #cp-main .grouplist li.header dt .list-inner {
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}


/* ════════════════════════════════════════════════════════
   UCP — Topic/Post Reactions (steve/postreactions)  2026-08-03

   `ucp_reactions_body.html` is a `form#ucp`, so the Board-preferences field
   styling (210px label grid, uppercase micro-labels, radio pairs) already
   applies and is left alone. What this block owns is the reaction picker and
   the submit bar, neither of which the shared rules reach.

   The picker markup is, per tile:
       <div style="float: left" class="reaction_enabled|reaction_disabled">
         <img class="reaction_image"> <br> <input type="checkbox" class="radio">
   The float and the <br> are the extension's own layout; both are replaced
   here. `float` is an INLINE style, so `float:none` needs !important — a class
   rule alone silently loses to it.
   ════════════════════════════════════════════════════════ */

/* Picker container. Scoped with :has() to the panel that actually holds tiles,
   so the sibling settings panel and the submit panel are untouched. */
#cp-main .panel:has(> .inner > .reaction_enabled),
#cp-main .panel:has(> .inner > .reaction_disabled) {
    overflow: hidden !important;   /* the tiles no longer float, but the
                                      extension's own CSS may still clear */
}
#cp-main .panel:has(> .inner > .reaction_enabled) > .inner,
#cp-main .panel:has(> .inner > .reaction_disabled) > .inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 16px 18px !important;
}

/* ── The tile ──
   Deliberately NOT green by default. The extension paints every tile
   #d4edda/#28a745 whether or not it is selected, which spends the strongest
   signal on the resting state and leaves nothing to mark the state that
   matters. Resting is quiet; blocked is loud. */
#cp-main .reaction_enabled,
#cp-main .reaction_disabled {
    float: none !important;          /* beats the inline style */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    padding: 10px 12px 9px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: border-color 150ms, background 150ms, opacity 150ms !important;
}
#cp-main .reaction_enabled:hover,
#cp-main .reaction_disabled:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}
#cp-main .reaction_enabled > br,
#cp-main .reaction_disabled > br { display: none !important; }

#cp-main .reaction_enabled img.reaction_image,
#cp-main .reaction_disabled img.reaction_image {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
    transition: filter 150ms, opacity 150ms !important;
}

/* ── Blocked state ──
   Two sources, and both are needed:
     · `.reaction_disabled` is what the SERVER renders after a save.
     · `:has(input:checked)` is what the BROWSER shows the moment you tick a
       box. Without it the tile keeps its resting look until the page reloads,
       so you cannot see what you have selected while selecting it.
   Grey rather than red: this is a preference, not an error. */
#cp-main .reaction_disabled,
#cp-main .reaction_enabled:has(input:checked),
#cp-main .reaction_disabled:has(input:checked) {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
#cp-main .reaction_disabled img.reaction_image,
#cp-main .reaction_enabled:has(input:checked) img.reaction_image,
#cp-main .reaction_disabled:has(input:checked) img.reaction_image {
    filter: grayscale(1) !important;
    opacity: 0.4 !important;
}

/* Checkbox: the extension gives it class="radio" but it is a checkbox, so the
   shared radio styling must not round it. */
#cp-main .reaction_enabled input[type="checkbox"],
#cp-main .reaction_disabled input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    /* 22px, not the 16px used for checkboxes elsewhere in the UCP. This box is
       the ONLY control on the tile — the extension emits a bare <input> with no
       <label> wrapper, so nothing else is clickable and the box carries the
       whole hit target on its own. 16px sat under every touch-target guideline
       and was fiddly even with a mouse. The tick geometry below is derived from
       the box size, so it scales with it; if you change one, change both. */
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 1.5px solid #94a3b8 !important;   /* same contrast as the
                                                 Usergroups radios */
    border-radius: 6px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
#cp-main .reaction_enabled input[type="checkbox"]:checked,
#cp-main .reaction_disabled input[type="checkbox"]:checked {
    background: #64748b !important;
    border-color: #64748b !important;
}
#cp-main .reaction_enabled input[type="checkbox"]:checked::after,
#cp-main .reaction_disabled input[type="checkbox"]:checked::after {
    /* Tick geometry for a 22px box: width = S*0.25, height = S*0.5,
       left = (S - width)/2 - border. `top` is deliberately above centre —
       a rotated tick's visual mass sits low, so centring it geometrically
       makes it look like it has dropped out of the box. */
    content: "" !important;
    position: absolute !important;
    left: 6.75px !important; top: 1.5px !important;
    width: 5.5px !important; height: 11px !important;
    border: solid #ffffff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
}
#cp-main .reaction_enabled input[type="checkbox"]:focus-visible,
#cp-main .reaction_disabled input[type="checkbox"]:focus-visible {
    outline: 2px solid #096EFF !important;
    outline-offset: 2px !important;
}

/* ── Submit bar ──
   The template wraps the buttons in <dl><dt>&nbsp;</dt><dd>…</dd></dl>, so the
   shared 210px label grid pushes them into the right-hand column under an
   empty label. Collapse the grid for this one row and centre them, matching
   every other Board-preferences page. */
#cp-main form#ucp fieldset:has(> dl > dd > #submit) > dl,
#cp-main form[id^="mcp"] fieldset:has(> dl > dd > #submit) > dl {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    border-bottom: none !important;
    padding: 0 !important;
}
#cp-main form#ucp fieldset:has(> dl > dd > #submit) > dl > dt,
#cp-main form[id^="mcp"] fieldset:has(> dl > dd > #submit) > dl > dt { display: none !important; }
#cp-main form#ucp fieldset:has(> dl > dd > #submit) > dl > dd,
#cp-main form[id^="mcp"] fieldset:has(> dl > dd > #submit) > dl > dd {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#cp-main form#ucp dd > input#submit.button1,
#cp-main form[id^="mcp"] dd > input#submit.button1 {
    background: linear-gradient(135deg, #064fc8, #096EFF) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 9px 24px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(9,110,255,0.28) !important;
}
#cp-main form#ucp dd > input#submit.button1:hover,
#cp-main form[id^="mcp"] dd > input#submit.button1:hover { filter: brightness(1.06) !important; }
#cp-main form#ucp dd > input[type="reset"].button2,
#cp-main form[id^="mcp"] dd > input[type="reset"].button2 {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 8px 18px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}
#cp-main form#ucp dd > input[type="reset"].button2:hover,
#cp-main form[id^="mcp"] dd > input[type="reset"].button2:hover { background: #f8fafc !important; }

@media (max-width: 700px) {
    #cp-main .panel:has(> .inner > .reaction_enabled) > .inner,
    #cp-main .panel:has(> .inner > .reaction_disabled) > .inner {
        gap: 8px !important;
        padding: 13px !important;
        justify-content: flex-start !important;
    }
    #cp-main .reaction_enabled,
    #cp-main .reaction_disabled { padding: 8px 10px 9px !important; }
    #cp-main .reaction_enabled img.reaction_image,
    #cp-main .reaction_disabled img.reaction_image { width: 30px !important; height: 30px !important; }

    /* Bigger again on touch: 26px. Nothing else on the tile is tappable, and a
       mis-tap here silently blocks the wrong reaction — there is no undo short
       of finding it again in the grid. */
    #cp-main .reaction_enabled input[type="checkbox"],
    #cp-main .reaction_disabled input[type="checkbox"] {
        width: 26px !important;
        height: 26px !important;
        border-radius: 7px !important;
    }
    #cp-main .reaction_enabled input[type="checkbox"]:checked::after,
    #cp-main .reaction_disabled input[type="checkbox"]:checked::after {
        left: 8.25px !important; top: 2px !important;
        width: 6.5px !important; height: 13px !important;
        border-width: 0 3px 3px 0 !important;
    }
}

/* ============================================================================
   MODERATOR CONTROL PANEL  (2026-09-21)
   ----------------------------------------------------------------------------
   Scoped to `body.section-mcp`, which phpBB sets from the script name, so it
   reaches all 26 MCP pages and nothing else.

   **This section inherits the UCP rather than restating it.** MCP shares the
   `#cp-main` container and uses the same markup vocabulary — fieldset.submit-
   buttons, input.button1, selects inside dd, radios — so every `form#ucp`
   selector in this sheet now carries a `form[id^="mcp"]` twin and the whole form
   system applies unchanged: the 210px label grid, field and select styling,
   radios, buttons. Typography likewise arrives on its own:

       links, titles, headings ....... Space Grotesk
       labels, list and table heads .. Inter (table head Space Grotesk)
       body text, cells .............. Inter

   An earlier pass restated all of that in sentence-case Space Grotesk and
   produced a parallel visual language that did not match the board. **Before
   adding a rule here, check whether a `#cp-main` or `form#ucp` rule already
   does the job.**

   Two surfaces differ, both chosen deliberately: list headers are light cards
   rather than the stock saturated blue band, and tables are zebra-striped.

   Specificity: every pre-existing rule in this sheet carries `#cp-main`, an id.
   A selector without one loses however many classes it has, silently. Write
   `body.section-mcp #cp-main …` and mirror the shape of the rule you override.
   ========================================================================= */

/* --- 1. The ACP | MCP link strip ----------------------------------------
   The template emits literal brackets and pipes as text nodes:
       [ <a>ACP</a> | <a>MCP</a> | <a>Moderate forum</a> ]
   Collapsing the parent to font-size:0 removes them without a template edit;
   the anchors get their size back explicitly. The strip is kept rather than
   hidden because the Moderate forum/topic/post links appear here and nowhere
   else — ACP and MCP alone would duplicate the navbar. These are links, so
   Space Grotesk is correct for them.                                        */
body.section-mcp #page-body p.linkmcp {
    font-size: 0 !important;
    margin: 0 0 14px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    text-align: left !important;
}
body.section-mcp #page-body p.linkmcp a {
    font-size: 0.78rem !important;
    font-family: "Space Grotesk", Inter, system-ui, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #475569 !important;
    background: #f1f3f7 !important;
    border: 1px solid #e2e6ee !important;
    border-radius: 999px !important;
    padding: 6px 13px !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.section-mcp #page-body p.linkmcp a:hover {
    background: #096EFF !important;
    border-color: #096EFF !important;
    color: #fff !important;
}

/* --- 2. List headers — the light card ------------------------------------
   Only the surface changes. The label typography — Inter 0.72rem/700 uppercase
   at 0.07em — is the UCP's and is left exactly as it is; the single override
   is the ink, which has to go dark now the ground is light.                 */
body.section-mcp #cp-main .topiclist li.header {
    background: #f7f8fa !important;
    border: 1px solid #e6e9f0 !important;
    border-bottom: 1px solid #dfe3ec !important;
    border-radius: 10px 10px 0 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
body.section-mcp #cp-main .topiclist li.header::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #096EFF 33.3%, #f59e0b 33.3% 66.6%, #10B981 66.6%);
}
/* The blue is painted on the inner `dl`, not on `li.header` — the row's own
   background was already light while the dl covered it, so getComputedStyle
   reported the new colour while the screen showed the old one. When a
   background refuses to change, walk the children. */
body.section-mcp #cp-main .topiclist li.header dl,
body.section-mcp #cp-main .cplist li.header dl {
    background: transparent !important;
}
body.section-mcp #cp-main .topiclist li.header dl dt,
body.section-mcp #cp-main .topiclist li.header dl dd,
body.section-mcp #cp-main .cplist li.header dl dt,
body.section-mcp #cp-main .cplist li.header dl dd {
    color: #475569 !important;
    text-shadow: none !important;
}
body.section-mcp #cp-main .topiclist li.header dl dt,
body.section-mcp #cp-main .cplist li.header dl dt { padding-left: 14px !important; }

/* --- 3. List rows — borders only, so the header reads as one card --------- */
body.section-mcp #cp-main .topiclist li.row {
    border-left: 1px solid #e6e9f0 !important;
    border-right: 1px solid #e6e9f0 !important;
    border-bottom: 1px solid #eef1f6 !important;
}
body.section-mcp #cp-main .topiclist li.row:last-child {
    border-radius: 0 0 10px 10px !important;
    border-bottom: 1px solid #e6e9f0 !important;
}

/* --- 4. The action bar under a list --------------------------------------
   Stock leaves a wide dead gap above it, then scatters the controls: the mark
   links left, Approve adrift in the centre, Disapprove hard right.          */
body.section-mcp #cp-main fieldset.display-actions {
    margin-top: 10px !important;
    padding: 12px 14px !important;
    background: #f7f8fa !important;
    border: 1px solid #e6e9f0 !important;
    border-radius: 10px !important;
    text-align: left !important;
}
@media (min-width: 701px) {
    body.section-mcp #cp-main fieldset.display-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
    }
    body.section-mcp #cp-main fieldset.display-actions > div { margin: 0 !important; }
}

/* --- 5. Tables — zebra only ----------------------------------------------
   `#cp-main table.table1` already supplies the face, sizes, padding, hover and
   the borderless cells. Two additions, no restatement:                      */
body.section-mcp #cp-main table.table1 tbody tr:nth-child(even) {
    background: #fbfcfe !important;
}
@media (min-width: 701px) {
    /* "2 months ago" wrapped to two lines on all 620 log rows because the
       column is 120px. The log table marks its User IP and Time columns
       `center` and nothing more specific, so both are addressed together —
       they are the two holding figures rather than prose. The UCP rule
       already nowraps the head; only the cells were wrapping. */
    body.section-mcp #cp-main table.table1 tbody td.center {
        white-space: nowrap !important;
        width: 1% !important;
    }
}

/* --- 6. Group C forms — what the UCP has no pattern for -------------------
   Everything else on these pages comes from the UCP form system via the
   `form[id^="mcp"]` twins. Only two things are genuinely new.                      */

/* 6a. Multi-selects. `mcp_ban` renders the ban list as
   `<select multiple size="5">`, which at the stock height showed four names
   out of 160 — unusable. Same defect as the UCP's deferred "Add groups is
   still a bare `<select multiple>`"; when that is picked up, reuse this. */
body.section-mcp #cp-main select[multiple] {
    width: 100% !important;
    max-width: 560px !important;
    min-height: 210px !important;
    padding: 6px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    color: #374151 !important;
    cursor: pointer !important;
}
body.section-mcp #cp-main select[multiple] option {
    padding: 5px 8px !important;
    border-radius: 5px !important;
}

/* 6b. The fields that stay empty until something is selected.
   Under the un-ban list, Length / Reason / Reason shown are
   `<dd><strong id="…"></strong></dd>`, filled by JS when a name is clicked.
   Until then the grid renders a label against nothing at all, which reads as
   a broken page rather than an empty one. `:empty` stops matching the moment
   JS writes into the element, so the placeholder clears itself. */
body.section-mcp #cp-main form[id^="mcp"] dl dd strong:empty::after {
    content: "—";
    color: #cbd5e1 !important;
    font-weight: 400 !important;
}

/* 6c. Stack the label above the field, on desktop too.
   prosilver floats every form `dt` left at 50% width. The sheet only clears
   that inside the ≤700px media query, so on desktop the label keeps its float
   and the field sits in the gap beside it. The UCP escapes this by accident —
   its inputs are width:100%, too wide to fit next to a 50% float, so they drop
   below it and the row *looks* stacked. MCP's fields are narrower, so they fit
   in the gap and the same markup reads as a two-column row with a 500px
   gutter.

   Clearing the float outright is what the UCP appears to do, so MCP does it
   deliberately rather than by luck. Scoped to MCP; the UCP is left alone. */
@media (min-width: 701px) {
    body.section-mcp #cp-main form[id^="mcp"] dl:not(ul.topiclist *) dt {
        float: none !important;
        width: auto !important;
    }
    body.section-mcp #cp-main form[id^="mcp"] dl:not(ul.topiclist *) dd {
        clear: both !important;
        margin-left: 0 !important;
    }
    /* Match the UCP's field width so the two panels look like one system. */
    body.section-mcp #cp-main form[id^="mcp"] dl:not(ul.topiclist *) dd input.inputbox,
    body.section-mcp #cp-main form[id^="mcp"] dl:not(ul.topiclist *) dd textarea,
    body.section-mcp #cp-main form[id^="mcp"] dl:not(ul.topiclist *) dd textarea.inputbox {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- 7. Section headings inside a panel ----------------------------------
   "LATEST 5 LOGGED ACTIONS" and its three siblings were #94a3b8 on white —
   about 2.6:1, below the 4.5:1 AA floor for text this size. They are the only
   thing naming each block, so they have to be legible. #475569 is ~7.5:1 and
   keeps the same weight and tracking.                                        */
body.section-mcp #cp-main .panel h3 {
    color: #475569 !important;
}

/* --- 8. Log entries — the detail line, and the » that used to dangle ------
   `language/en/acp/common.php` now wraps every simple log detail in a span
   rather than prefixing a literal `<br />»`; the comment block there explains
   why. phpBB pads missing log data with empty strings, so on a typical front
   page three rows of five carry an empty span — which is exactly the stray »
   that was showing.

   Two classes, because the span does not always hold the same kind of thing:

     .log-reason  the 7 strings ending "for the following reason" — a
                  moderator's free-text reason, which really can be left blank,
                  so an empty one says so out loud.
     .log-detail  the other 198 — a topic title, a username, a list. Blank here
                  means the action simply has no subject to name, so it is
                  hidden rather than captioned. Writing "Reason not provided"
                  under "Locked topic" would be stating something untrue.

   The bullet lives here rather than in the language string so it can follow
   whichever of the two applies.                                              */
body.section-mcp #cp-main .log-detail {
    display: block !important;
    margin-top: 4px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    color: #64748b !important;
}
body.section-mcp #cp-main .log-detail:empty {
    display: none !important;
}
/* The reason completes the sentence that introduces it, so it runs on from the
   colon rather than starting a line of its own — no guillemet, no second label.
   The other 198 detail lines hold a topic title or a username, follow no colon
   and sit on their own line, where the guillemet reads as "->". */
body.section-mcp #cp-main .log-reason {
    display: inline !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    color: #64748b !important;
}
body.section-mcp #cp-main .log-detail:not(:empty)::before {
    content: "\00bb\00a0";
    color: #cbd5e1 !important;
    font-weight: 400 !important;
}
/* :empty counts DOM children, not generated content, so the element still
   matches once ::after has written into it. */
body.section-mcp #cp-main .log-reason:empty::after {
    content: "Not provided";
    font-style: italic !important;
    color: #94a3b8 !important;
}

/* --- 9. The logged-actions table -----------------------------------------
   Stock gives all six columns equal claim on the width, so Action — the only
   column holding a sentence — ends up no wider than "View logs", and the four
   short columns wrap. Action takes the slack; the rest size to their content
   and stop wrapping.                                                         */
@media (min-width: 701px) {
    body.section-mcp #cp-main table.table1 { table-layout: auto !important; }

    body.section-mcp #cp-main table.table1 thead th:first-child,
    body.section-mcp #cp-main table.table1 tbody td:first-child {
        width: 46% !important;
        padding-right: 28px !important;
    }
    /* The five short columns hold names, figures and two fixed links. None of
       them should ever wrap; letting them shrink-to-fit is what gives Action
       its room. */
    body.section-mcp #cp-main table.table1 thead th:not(:first-child),
    body.section-mcp #cp-main table.table1 tbody td:not(:first-child) {
        width: 1% !important;
        white-space: nowrap !important;
    }
}

/* The action sentence. The language string wraps it in <strong>, which the
   sheet had already flattened to 500; that is right — it is a label, not an
   emphasis — but it needs to sit above the reason, not beside it. */
/* ...except where a .log-reason follows it: there the strong is the first half
   of one sentence and the span is the second, so a block strong would push the
   reason onto its own line — which is exactly what it was doing. */
body.section-mcp #cp-main table.table1 td strong:has(+ .log-reason) {
    display: inline !important;
}
body.section-mcp #cp-main table.table1 td strong {
    display: block !important;
    font-weight: 500 !important;
    color: #334155 !important;
    line-height: 1.5 !important;
}

/* IP addresses are figures: tabular digits stop them jittering column to
   column, and they are not prose, so they get the muted treatment. */
body.section-mcp #cp-main table.table1 tbody td:nth-child(3) span,
body.section-mcp #cp-main table.table1 tbody td:nth-child(6) span {
    font-variant-numeric: tabular-nums !important;
    color: #64748b !important;
}

/* Rows whose action has no topic attached leave two cells holding a single
   &nbsp;, so the row reads as though something failed to load. Same device as
   the empty ban-list fields in 6b: a muted dash says "nothing here" out loud.
   :has() is matched on the cell because the &nbsp; means :empty never fires. */
/* Columns 4 and 5 are "View topic" / "View logs" on the logged-actions table
   only. User notes and Moderator logs (both carry th.center on their IP and
   Time columns) put the note in 4 and the Mark checkbox in 5, so the em dash
   was being printed after every checkbox. Scope it to the one table shape the
   rule was written for — see section 26a. */
body.section-mcp #cp-main table.table1:not(:has(thead th.center)) tbody td:nth-child(4):not(:has(a))::after,
body.section-mcp #cp-main table.table1:not(:has(thead th.center)) tbody td:nth-child(5):not(:has(a))::after {
    content: "—";
    color: #cbd5e1 !important;
}

/* --- 10. Panels read as cards -------------------------------------------
   #cp-main is white and the panels are #f7f9fb with a 15px gap, so the white
   showed through between them as a full-bleed stripe and looked like a
   rendering fault. Giving every panel the same card treatment turns those
   stripes into deliberate spacing. The first panel is already white because it
   sits inside form#mcp_queue; it is included so all four match.             */
body.section-mcp #cp-main .panel {
    background: #ffffff !important;
    border: 1px solid #e6e9f0 !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
}

/* --- 11. The logged-actions table on mobile ------------------------------
   phpBB's responsive JS injects a <dfn> label into every cell and flips the
   table to stacked rows. Stock then right-aligns the value, so a three-line
   action sentence sits ragged-left against the right edge and the » lands on
   its own far from the text it belongs to. Action gets its label above and the
   sentence full width and left-aligned; the five short columns keep the
   label-left/value-right pairing, which suits one-word values.              */
@media (max-width: 700px) {
    body.section-mcp #cp-main table.table1 tbody td {
        text-align: right !important;
    }
    body.section-mcp #cp-main table.table1 tbody td:first-child {
        display: block !important;
        text-align: left !important;
        padding-top: 12px !important;
    }
    body.section-mcp #cp-main table.table1 tbody td:first-child dfn {
        display: block !important;
        position: static !important;
        overflow: visible !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        margin: 0 0 6px 0 !important;
        font-family: "Inter", system-ui, sans-serif !important;
        font-size: 0.66rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.09em !important;
        color: #94a3b8 !important;
        font-style: normal !important;
    }
    body.section-mcp #cp-main table.table1 tbody td:first-child strong {
        text-align: left !important;
    }
    body.section-mcp #cp-main table.table1 tbody td:first-child .log-reason {
        text-align: left !important;
    }
    /* The short columns: nothing in them ever needs two lines on a phone. */
    body.section-mcp #cp-main table.table1 tbody td:not(:first-child) {
        white-space: nowrap !important;
    }
}

/* --- 12. The log table's head band ----------------------------------------
   Same trap as the list headers in section 2: the light face is painted on the
   `th`, but the stock blue band lives on the `tr` behind it. The th carries a
   10px radius on its outer corners, so the blue showed through as two faint
   arcs above the first and last column and read as a rendering fault.        */
body.section-mcp #cp-main table.table1 thead tr {
    background: transparent !important;
}

/* --- 13. Meta lines in report and PM-report rows --------------------------
   The template emits one span per meta line — "by Eli » 2 months ago",
   "To DFB Manager" — and the sheet makes those blocks so they stack. But the
   relative-date filter wraps the timestamp in a span of its own, which
   inherited the same block and broke the line after the », leaving it dangling
   at the end of "by Eli »" with "2 months ago" stranded below. Only the outer
   spans are lines; a span inside a span is part of a sentence.               */
body.section-mcp #cp-main .cplist li.row dl dt .list-inner span span,
body.section-mcp #cp-main .topiclist li.row dl dt .list-inner span span {
    display: inline !important;
}

/* --- 14. The [Moderate] links in the unapproved list ----------------------
   The template writes the brackets as text either side of the anchor, so
   "Topic: <a>Long title</a> [<a>Moderate</a>]" breaks wherever it likes — the
   opening bracket stayed on one line and "Moderate]" dropped to the next.
   Holding the bracketed link together is enough; it reads as a tag again.    */
body.section-mcp #cp-main .cplist li.row dd.moderation span {
    line-height: 1.75 !important;
}
body.section-mcp #cp-main .cplist li.row dd.moderation a[href*="mcp."] {
    white-space: nowrap !important;
}

/* --- 15. The Moderate tag ------------------------------------------------
   mcp_front.html now wraps these links in `.mod-tag` instead of surrounding
   them with literal [ ] text nodes, which broke across lines independently of
   the link they belonged to. A tag says the same thing and holds together.
   These are links, so Space Grotesk, per the house rule.                     */
body.section-mcp #cp-main .mod-tag { white-space: nowrap !important; }
body.section-mcp #cp-main .mod-tag a {
    display: inline-block !important;
    font-family: "Space Grotesk", Inter, system-ui, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    padding: 4px 7px !important;
    margin-left: 2px !important;
    border-radius: 5px !important;
    background: #eef2fb !important;
    border: 1px solid #e2e8f5 !important;
    color: #5468a8 !important;
    text-decoration: none !important;
    vertical-align: 1px !important;
}
body.section-mcp #cp-main .mod-tag a:hover {
    background: #096EFF !important;
    border-color: #096EFF !important;
    color: #fff !important;
}

/* --- 16. Column split in the unapproved list ------------------------------
   The Topic & Forum column held 300px against the title column's 895, so the
   Moderate tag dropped below the topic it belongs to on every row. The two
   columns carry comparable amounts of text; splitting them closer to evenly
   lets each line finish.                                                     */
@media (min-width: 701px) {
    body.section-mcp #cp-main .topiclist.missing-column dd.moderation,
    body.section-mcp #cp-main .cplist.missing-column dd.moderation {
        width: 460px !important;
    }
}

/* --- 17. Moderation queue -------------------------------------------------
   mcp_queue.html emitted a bare `<br />` as the first thing in the Forum cell
   whenever the topics view was showing, purely to push "Forum: x" level with
   the "Posted by" line beneath the title. Every row therefore carried a blank
   line and stood ~20px taller than its content. The <br /> is gone; the
   alignment it was faking is done properly here, and now survives a forum name
   that wraps instead of compounding with it.                                 */
body.section-mcp #cp-main .cplist li.row dd.moderation {
    display: flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
}

/* "Forum:" and "Topic:" sit under a column already headed FORUM, so they are
   labels, not prose — they should name the field quietly and let the link
   carry the row. Inter, per the house rule for labels. */
body.section-mcp #cp-main .cplist li.row dd.moderation span {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
    color: #94a3b8 !important;
}
body.section-mcp #cp-main .cplist li.row dd.moderation span a {
    color: #096EFF !important;
    font-weight: 600 !important;
}

/* --- 18. The bar above and below a moderation list ------------------------
   "6 topics • Page 1 of 1" was browser-default text floating against nothing,
   and the sort control next to it is a button whose label phpBB hides, leaving
   a bare glyph with no indication of what it opens.                          */
body.section-mcp #cp-main .action-bar .pagination {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
}
body.section-mcp #cp-main .action-bar.bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-top: 12px !important;
}
body.section-mcp #cp-main .action-bar .sort-tools .dropdown-trigger {
    border-radius: 8px !important;
    border: 1px solid #e2e6ee !important;
    background: #f7f8fa !important;
    color: #475569 !important;
    padding: 6px 11px !important;
}
body.section-mcp #cp-main .action-bar .sort-tools .dropdown-trigger:hover {
    background: #eef2fb !important;
    border-color: #cfd9ee !important;
}

/* The pagination stopped ~590px short of the bar's right edge despite
   space-between: prosilver floats it and gives it its own right margin, which
   a flex item ignores for the float but not for the margin. Pin it instead of
   relying on the distribution. */
body.section-mcp #cp-main .action-bar.bottom .pagination,
body.section-mcp #cp-main .action-bar.bar-top .pagination {
    float: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}


/* --- 19. Pagination pills — tappable, and one treatment board-wide -------
   The list-level pager rendered 32x22 pills at 12.24px. That is under every
   touch-target guideline and it read as decoration rather than as the primary
   way to move through a 58-post list.

   Sizing is scoped to pagers that sit in an `.action-bar` — the standalone
   list pager on viewforum, viewtopic, search, MCP, UCP and the PM folder. The
   per-row inline pager inside a topic row is a different control at a
   different scale; it is not in an action bar, so it is already outside this
   selector and stays at ~20px.

   The look is the PM folder's, promoted to the whole board: filled blue
   bubbles for the pages you can go to, inverted white-on-blue-border for the
   one you are on. A pale tint was tried once before (v236) and rejected for
   reading as disabled, so this is not a free choice.

   Two specificity notes, both measured rather than assumed:
     - the leading `#page-body` is load-bearing. The pre-existing UCP/MCP rule
       is `#cp-main div.pagination ul li a` (1,1,3); a class-only selector
       loses to it and these sizes would silently not apply on exactly the
       pages the request came from.
     - every pagination link also carries `.button`, and the PM rule
       `#viewfolder .action-bar .pagination a.button` is (1,3,1). A `li > a`
       selector is (1,2,3) and loses on class count, so the `.button` variant
       is listed alongside it.                                               */
#page-body .action-bar .pagination > ul {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}
#page-body .action-bar .pagination > ul > li { display: inline-flex !important; margin: 0 !important; float: none !important; }

/* Geometry */
#page-body .action-bar .pagination > ul > li > a,
#page-body .action-bar .pagination > ul > li > a.button,
#page-body .action-bar .pagination > ul > li > span,
#page-body .action-bar .pagination > ul > li.active > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* A page you can go to */
#page-body .action-bar .pagination > ul > li > a,
#page-body .action-bar .pagination > ul > li > a.button {
    background: #096EFF !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(9,110,255,0.25) !important;
    transition: background-color 130ms ease, box-shadow 130ms ease !important;
}
#page-body .action-bar .pagination > ul > li > a:hover,
#page-body .action-bar .pagination > ul > li > a.button:hover,
#page-body .action-bar .pagination > ul > li > a:focus-visible,
#page-body .action-bar .pagination > ul > li > a.button:focus-visible {
    background: #0558d4 !important;
    box-shadow: 0 2px 7px rgba(9,110,255,0.40) !important;
}

/* The page you are on — inverted, so it reads as a position and not as a
   fifth target. Without this the current page is the same filled blue as its
   neighbours and there is nothing on screen saying where you are. */
#page-body .action-bar .pagination > ul > li.active > span {
    background: #ffffff !important;
    color: #096EFF !important;
    border: 2px solid #096EFF !important;
    box-shadow: none !important;
}

/* The ellipsis is a separator, not a target — same height so the row stays
   level, but no pill. */
#page-body .action-bar .pagination > ul > li.ellipsis > span {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    padding: 0 3px !important;
}

/* The prev/next chevrons and the page-jump trigger are icon-only; they carry
   no text to set their width, so they need the circle explicitly. */
#page-body .action-bar .pagination > ul > li.arrow > a,
#page-body .action-bar .pagination > ul > li.dropdown-page-jump > a {
    min-width: 32px !important;
    padding: 0 !important;
}
#page-body .action-bar .pagination > ul > li.arrow > a .icon,
#page-body .action-bar .pagination > ul > li.dropdown-page-jump > a .icon {
    font-size: 0.85rem !important;
    line-height: 1 !important;
}

/* On a phone the pills are the only practical way to page, so they get the
   44px target the touch guidelines ask for and a larger numeral. The pager
   also un-floats and wraps — three pages fit on one line, eight do not. */
@media (max-width: 700px) {
    #page-body .action-bar .pagination {
        float: none !important;
        clear: both !important;
        text-align: left !important;
    }
    #page-body .action-bar .pagination > ul { gap: 7px !important; }
    #page-body .action-bar .pagination > ul > li > a,
    #page-body .action-bar .pagination > ul > li > a.button,
    #page-body .action-bar .pagination > ul > li > span,
    #page-body .action-bar .pagination > ul > li.active > span {
        min-width: 42px !important;
        height: 42px !important;
        padding: 0 12px !important;
        font-size: 1rem !important;
    }
    #page-body .action-bar .pagination > ul > li.ellipsis > span {
        min-width: 0 !important;
        padding: 0 4px !important;
    }
    #page-body .action-bar .pagination > ul > li.arrow > a,
    #page-body .action-bar .pagination > ul > li.dropdown-page-jump > a {
        min-width: 44px !important;
        padding: 0 !important;
    }
}

/* --- 20. Moderation queue on a phone: every row printed twice -------------
   forum_fn.js walks `.topiclist.responsive-show-all > li > dl`, copies the
   html of every `dd` that is not `.mark` into a `div.responsive-show` it
   appends inside `dt > .list-inner`, and leaves that div display:none.
   responsive.css then swaps the two below 701px: `.responsive-show` becomes
   visible and `ul.topiclist dd` is hidden.

   Section 17 declared `dd.moderation { display: flex !important }` unscoped,
   which beat the hide — so a phone showed the clone *and* the original, and
   every row carried its topic and forum twice. This is trap 5 in CLAUDE.md
   arriving in a new costume: a desktop list rule that was never scoped to
   `min-width: 701px`.

   Hand the column back to phpBB below 701px and style the clone instead. */
@media (max-width: 700px) {
    body.section-mcp #cp-main .cplist li.row dd.moderation,
    body.section-mcp #cp-main .topiclist li.row dd.moderation {
        display: none !important;
    }

    /* The clone is the whole Topic/Forum block on a phone, so it gets the
       treatment the dd has on desktop: quiet Inter labels, blue links, and a
       clear gap from the byline above it rather than the stray indent the
       stock rules left. */
    body.section-mcp #cp-main .cplist li.row dt .responsive-show {
        display: block !important;
        margin: 6px 0 0 0 !important;
        padding: 0 !important;
        text-indent: 0 !important;
        font-family: "Inter", system-ui, sans-serif !important;
        font-size: 0.8rem !important;
        line-height: 1.65 !important;
        color: #94a3b8 !important;
    }
    body.section-mcp #cp-main .cplist li.row dt .responsive-show a {
        color: #096EFF !important;
        font-weight: 600 !important;
    }
}

/* --- 21. The forum filter above a moderation list ------------------------
   `fieldset.forum-selection` is a label, a select and a Go button laid out by
   nothing at all. On a phone the "Forum:" label was clipped against the left
   edge and Go dropped onto its own line as a 28px target. Make it an explicit
   row that wraps as a unit, and give Go the same height as the select so the
   two read as one control.                                                  */
/* It is `float: right` in stock, which is why the label was clipped rather
   than wrapped: once the box grew wider than its 325px parent, the float
   pinned its right edge to the parent's and pushed the whole 36px overflow
   off the left of the screen (measured x: -11 against a parent at 25). A
   flex container that is still floated keeps doing that, so the float has to
   go and the box has to be told to stay inside its parent. */
body.section-mcp #cp-main fieldset.forum-selection,
body.section-mcp fieldset.forum-selection {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    /* A fieldset's UA style is `min-inline-size: min-content`, which outranks
       `width: 100%` — the box stayed 361px inside a 325px parent until this
       was zeroed. It is the reason the label looked clipped rather than
       wrapped, and the second half of the same bug as the float above. */
    min-width: 0 !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 0 10px 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
body.section-mcp fieldset.forum-selection label {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 1 1 220px !important;
    min-width: 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
}
body.section-mcp fieldset.forum-selection label select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f7f8fa !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    color: #334155 !important;
}
body.section-mcp fieldset.forum-selection input.button2 {
    flex: 0 0 auto !important;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
}

/* --- 22. The list header on a phone --------------------------------------
   responsive.css hides every `dd` in `li.header`, leaving the card holding one
   centred word — but it keeps the desktop padding, so a single "TOPIC" stood
   in a ~75px box above the first row. Shrink it to a caption strip.         */
@media (max-width: 700px) {
    /* Width audit at 390px before this block: #cp-main 325 -> .panel 305
       -> .inner 251 (26px of padding a side) -> li.row 225 -> .list-inner 191
       once the 34px reserved for the Mark checkbox is taken off. A topic title
       had 191px to live in, which is what pushed rows to 230-341px. The 26px
       panel gutter is desktop spacing; a phone cannot afford it twice. */
    body.section-mcp #cp-main .panel > .inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    body.section-mcp #cp-main .topiclist li.row dl dt {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.section-mcp #cp-main .topiclist li.header {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* The dl measured 71px against a 42px dt — 29px of its own box above the
       only visible child. Zero it, or the padding below does nothing. */
    body.section-mcp #cp-main .topiclist li.header dl,
    body.section-mcp #cp-main .cplist li.header dl {
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.section-mcp #cp-main .topiclist li.header dl dt,
    body.section-mcp #cp-main .cplist li.header dl dt {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        line-height: 1.25 !important;
        font-size: 0.7rem !important;
        text-align: left !important;
    }
    body.section-mcp #cp-main .topiclist li.header dl dt .list-inner,
    body.section-mcp #cp-main .cplist li.header dl dt .list-inner {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }
}


/* --- 23. Two leftovers the phone screenshots showed ----------------------

   (a) "Topic:" sat alone on its own line above a title that then wrapped to
   two more. The link is `display: inline-block`, so it is one unbreakable box:
   measured 219px wide in a 219px column, which cannot fit after the label and
   gets pushed down whole. As plain inline text it breaks at spaces and flows
   straight after the label, costing one line instead of two.                */
@media (max-width: 700px) {
    body.section-mcp #cp-main .cplist li.row dt .responsive-show a,
    body.section-mcp #cp-main .topiclist li.row dt .responsive-show a {
        display: inline !important;
        white-space: normal !important;
    }
}

/*   (b) Delete and Restore swapped sides between desktop and mobile, which is
   not cosmetic — the destructive control was moving under the thumb that just
   learned where the safe one is.

   Cause: `#cp-main fieldset.display-actions` is `flex-direction: row-reverse`.
   That was written for the UCP bar, whose fieldset holds one <input> then one
   <div>, where reversing correctly puts the primary action on the right. MCP's
   fieldset holds *two* inputs plus the div, so the same reversal flips the
   pair against each other. Section 4 already restores `row` above 701px, which
   is why only mobile was wrong. Same class of mistake as section 20: a rule
   shaped around one page's DOM reaching a page with a different one.         */
@media (max-width: 700px) {
    body.section-mcp #cp-main fieldset.display-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
    }
    body.section-mcp #cp-main fieldset.display-actions input.button1,
    body.section-mcp #cp-main fieldset.display-actions input.button2 {
        float: none !important;
        margin: 0 !important;
        min-height: 44px !important;
        padding: 0 18px !important;
    }
    /* The mark links are a helper, not a third action — give them their own
       line under the buttons rather than a seat between them. */
    body.section-mcp #cp-main fieldset.display-actions > div {
        flex: 1 0 100% !important;
        margin: 0 !important;
        text-align: right !important;
    }
}


/* --- 24. Reported messages, and the detail page it leads to --------------

   (a) The return links at the foot of a post/report detail page were three
   destinations joined by a literal " | ". mcp_post.html now emits one
   `span.return-link` each (markup only — same links, same conditions), so the
   separator can be space rather than punctuation. Two of them are sentences
   ("Return to the queue") and three are bare labels ("View post"), so they are
   laid out as equal chips rather than given button weight that would compete
   with the moderation actions above.

   The selector mirrors `#cp-main .panel > .inner > p:first-of-type` (1,3,1),
   the "welcome intro" rule, because the return links live alone in their own
   panel and are therefore its first p — so they were being painted as an
   intro paragraph, pale blue crescent bar and all. A shorter selector loses
   to it and the chips sat inside a notice box. */
body.section-mcp #cp-main .panel > .inner > p.mcp-return-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
body.section-mcp #cp-main .panel > .inner > p.mcp-return-links .return-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: #f3f6fc !important;
    border: 1px solid #e4eaf6 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.3 !important;
}
body.section-mcp #cp-main .panel > .inner > p.mcp-return-links .return-link a {
    color: #096EFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
body.section-mcp #cp-main .panel > .inner > p.mcp-return-links .return-link:hover {
    background: #e9f0fd !important;
    border-color: #cfdcf6 !important;
}
body.section-mcp #cp-main .panel > .inner > p.mcp-return-links .return-link a:hover {
    text-decoration: underline !important;
}
@media (max-width: 700px) {
    /* Tap targets, and one per line beats three cramped onto two. */
    body.section-mcp #cp-main .panel > .inner > p.mcp-return-links .return-link {
        flex: 1 1 100% !important;
        justify-content: center !important;
        min-height: 42px !important;
    }
}

/* (b) The empty state now carries .notopics, the class the moderation queue
   already uses, so "No reports found" reads as a result instead of as a second
   instruction paragraph. Give that class a state's appearance rather than a
   notice's: centred, quiet, no left accent bar competing with the explain
   paragraph directly above it. */
body.section-mcp #cp-main p.notopics {
    margin: 18px 0 !important;
    padding: 26px 16px !important;
    background: #fbfcfe !important;
    border: 1px dashed #e2e8f0 !important;
    border-radius: 10px !important;
    text-align: center !important;
}
body.section-mcp #cp-main p.notopics strong {
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
}


/* --- 25. MCP > Main > View forum, and the report detail buttons ----------

   (a) "Replies: 22by Eli » 3 months ago" — two elements that must never both
   be visible, printed back to back with no space between them.

   mcp_forum.html emits a desktop line (`div.responsive-hide`, "by Eli » …")
   and a phone-only one (`span.responsive-show.left-box`, "Replies: 22"), the
   latter carrying inline `display: none`. Only `!important` can beat an inline
   style, and `#cp-main .topiclist li.row dl dt span { display: block
   !important }` does exactly that. That rule was written to put the byline
   span on its own line in the UCP/MCP lists; it matches *every* span in a dt,
   so it switched the phone-only cell on for desktop too. There was never a
   missing space — these are two separate blocks, one of which should not have
   been there.

   Restore the responsive contract above 701px rather than widen that rule,
   which other lists depend on. Specificity (1,4,5) against its (1,2,4). */
@media (min-width: 701px) {
    body.section-mcp #cp-main .topiclist li.row dl dt span.responsive-show,
    body.section-mcp #cp-main .topiclist li.row dl dt div.responsive-show,
    body.section-mcp #cp-main .cplist li.row dl dt span.responsive-show {
        display: none !important;
    }
}

/* (b) The reply counts were 13.6px at font-weight 300 — lighter than the
   labels around them, in a column whose entire job is a number. Give them
   weight and tabular figures so the column reads as a column. */
body.section-mcp #cp-main .topiclist li.row dd.posts,
body.section-mcp #cp-main .cplist li.row dd.posts {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    color: #334155 !important;
}
/* (c) `fieldset.submit-buttons` on the report detail page put a 146x42 primary
   next to a 110x30 secondary, with different radius and font size, so the pair
   did not read as a pair. The same two actions on the list page match, because
   `display-actions` is styled and `submit-buttons` is not. Match them. */
body.section-mcp #cp-main fieldset.submit-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 12px !important;
    text-align: left !important;
}
body.section-mcp #cp-main fieldset.submit-buttons input.button1,
body.section-mcp #cp-main fieldset.submit-buttons input.button2 {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 9px !important;
    font-size: 0.93rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* (d) The "Moderator options" form: a bare <select> beside an unstyled grey
   Submit. Same control pair as the forum filter above the queue, so give it
   the same shape. */
body.section-mcp #cp-main form#mcp fieldset dl dd select[name="action"],
body.section-mcp #cp-main form#mcp_chgposter fieldset dl dd select {
    height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f7f8fa !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
}
body.section-mcp #cp-main form#mcp fieldset dl dd input.button2,
body.section-mcp #cp-main form#mcp_chgposter fieldset dl dd input.button2 {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-left: 8px !important;
}


/* --- 26. User notes -------------------------------------------------------

   (a) Section 9 gives the first column 46% because on the logged-actions table
   the first column is the prose one. The user-notes table is shaped the other
   way round: column 1 is a username and column 4 is the note. Measured at
   1339px wide, that handed "Report by" 788px to hold one word while
   "Action/Note" — the only column with sentences in it — got 209.

   MCP has three table shapes and `th.center` tells them apart without guessing
   at text, which CSS cannot match on:

     logged actions (mcp_front)    6 columns, all th.name, prose in column 1
     user notes / moderator logs   th.center on the IP and Time columns,
                                   username in column 1, prose in column 4
     warned users (mcp_warn_list)  4 columns, all th.name, no prose at all

   So: tables carrying th.center move the slack to column 4, and the all-short
   tables stop handing 910px to a username. Only the first shape keeps the 46%
   that section 9 assumes. */
@media (min-width: 701px) {
    /* Shape 2 — username first, prose fourth (user notes, moderator logs) */
    body.section-mcp #cp-main table.table1:has(thead th.center) thead th:first-child,
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:first-child {
        width: 1% !important;
        white-space: nowrap !important;
        padding-right: 24px !important;
    }
    body.section-mcp #cp-main table.table1:has(thead th.center) thead th:nth-child(4),
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) {
        width: auto !important;
        white-space: normal !important;
        text-align: left !important;
    }

    /* Shape 3 — every column short. Nothing here deserves half the table, so
       let each size to its content; the browser shares the slack evenly
       instead of dumping it all behind the username. */
    body.section-mcp #cp-main table.table1:not(:has(thead th.center)):not(:has(thead th:nth-child(5))) thead th,
    body.section-mcp #cp-main table.table1:not(:has(thead th.center)):not(:has(thead th:nth-child(5))) tbody td {
        width: auto !important;
        white-space: nowrap !important;
    }
    body.section-mcp #cp-main table.table1:not(:has(thead th.center)):not(:has(thead th:nth-child(5))) thead th:first-child,
    body.section-mcp #cp-main table.table1:not(:has(thead th.center)):not(:has(thead th:nth-child(5))) tbody td:first-child {
        padding-right: 28px !important;
    }
}

/* (b) The feedback box was a stock textarea — square corners, #edecec hairline,
   1155px inside a 1339px panel. It is the only input on the page; give it the
   width and the shape every other field on the board has. */
body.section-mcp #cp-main fieldset textarea#usernote,
body.section-mcp #cp-main textarea.inputbox {
    width: 100% !important;
    min-height: 110px !important;
    box-sizing: border-box !important;
    padding: 11px 13px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    resize: vertical !important;
}
body.section-mcp #cp-main textarea.inputbox:focus {
    border-color: #96bdfb !important;
    outline: none !important;
}

/* (c) "Search for keywords:" was a bare label, an 18px-tall unstyled box and a
   grey button, sitting in the action bar above the list. Same control pair as
   the forum filter, so give it the same shape. */
body.section-mcp #cp-main .action-bar.bar-top:has(input[name="keywords"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
}
body.section-mcp #cp-main input[name="keywords"] {
    height: 36px !important;
    min-width: 220px !important;
    padding: 0 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f7f8fa !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
}
body.section-mcp #cp-main input[name="filter"] {
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}
/* The pager shares this bar and should still sit at the far right. */
body.section-mcp #cp-main .action-bar.bar-top:has(input[name="keywords"]) .pagination {
    margin-left: auto !important;
}

/* (d) `fieldset.submit-buttons` is a flex row (section 25c) but something else
   was still centring its contents, so Submit sat 660px from the field it
   submits. A submit button belongs under the left edge of its form. */
body.section-mcp #cp-main fieldset.submit-buttons {
    justify-content: flex-start !important;
}

/* (e) The "Select user" form gave a username a 1352px box, then dropped
   "Find a member" onto a line of its own beneath it. They are one control. */
body.section-mcp #cp-main dl:has(> dd > input#username) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}
body.section-mcp #cp-main dl:has(> dd > input#username) > dt {
    flex: 1 0 100% !important;
    margin-bottom: 2px !important;
}
body.section-mcp #cp-main dl:has(> dd > input#username) > dd:has(input#username) {
    flex: 0 1 420px !important;
    min-width: 0 !important;
}
body.section-mcp #cp-main dl:has(> dd > input#username) > dd:has(a) {
    flex: 0 0 auto !important;
}
body.section-mcp #cp-main dl:has(> dd > input#username) > dd:has(a) strong {
    font-weight: 400 !important;
}
body.section-mcp #cp-main dl:has(> dd > input#username) > dd:has(a) a {
    display: inline-flex !important;
    align-items: center !important;
    height: 39px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    background: #f3f6fc !important;
    border: 1px solid #e4eaf6 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #096EFF !important;
    text-decoration: none !important;
}
body.section-mcp #cp-main dl:has(> dd > input#username) > dd:has(a) a:hover {
    background: #e9f0fd !important;
    border-color: #cfdcf6 !important;
}

/* (f) On a phone the table collapses to stacked label/value rows, and section
   11 sets `white-space: nowrap` on every cell but the first — right for an IP
   or a timestamp, wrong for the note, whose "» Eli" detail line was running
   off the right edge instead of wrapping under it. */
@media (max-width: 700px) {
    /* The cell is a flex row (label left, value right), so the note and its
       "» Eli" detail were two flex items sharing one line — 126px and 20px of
       a 251px cell, which is how "Eli" came out as "E / li". Let it wrap and
       give the detail its own full-width line. */
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) {
        white-space: normal !important;
        flex-wrap: wrap !important;
    }
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) strong {
        flex: 1 1 auto !important;
        text-align: right !important;
    }
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) .log-detail {
        flex: 1 0 100% !important;
        display: block !important;
        text-align: right !important;
    }
}


/* --- 27. Warn user / user details: the empty avatar column ----------------
   mcp_warn_user.html and mcp_notes_user.html split the user card into
   `.column1` (avatar) floated left and `.column2` (rank, joined, posts,
   warnings) floated right, each at a hard 50%. Measured on Warn user: the
   avatar column was 656px wide and completely empty — the member has no
   avatar — so half the card was reserved for nothing and the details sat
   marooned on the right.

   Let the avatar take only what it needs and give the details the rest. The
   BFC on .column2 is what makes it fill the space beside the float, and it
   collapses to the full width by itself when there is no avatar at all. */
body.section-mcp #cp-main .column1 {
    width: auto !important;
    max-width: 300px !important;
    margin-right: 24px !important;
}
body.section-mcp #cp-main .column1:empty {
    display: none !important;
    margin: 0 !important;
}
body.section-mcp #cp-main .column2 {
    width: auto !important;
    float: none !important;
    overflow: hidden !important;
}
@media (max-width: 700px) {
    /* Stacked on a phone: the avatar is decoration, the details are the point. */
    body.section-mcp #cp-main .column1 {
        float: none !important;
        max-width: 140px !important;
        margin: 0 0 14px 0 !important;
    }
}


/* --- 28. The message page (trigger_error) --------------------------------
   Every "You cannot warn yourself", "No topics selected", confirmation and
   error page in phpBB renders through message_body.html as
   `<div class="panel" id="message">` — with no `#cp-main` anywhere. Every MCP
   rule in this file is scoped `body.section-mcp #cp-main …`, so none of them
   reach it and it falls back to bare phpBB: a 1790px-wide #f7f9fb slab with no
   border, no radius, a 30.6px heading and 17px body text.

   Styled here rather than under section-mcp, because the page is identical in
   every section and bare in all of them.

   Navigation is fine and needs nothing: the breadcrumb above it is intact
   ("TSSFL > Technology Stack > Moderator Control Panel"), so there is a way
   back — it was only the surface that was missing. */
#page-body .panel#message {
    max-width: 760px !important;
    margin: 28px auto !important;
    padding: 28px 30px !important;
    background: #ffffff !important;
    border: 1px solid #e6e9f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
#page-body .panel#message > .inner {
    padding: 0 !important;
    background: none !important;
}
/* A 30.6px "Information" over one short sentence is a headline for a label.
   Make it a caption and let the message itself carry the weight. */
#page-body .panel#message h2.message-title {
    margin: 0 0 10px 0 !important;
    padding: 0 0 0 13px !important;
    border-left: 4px solid #096EFF !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
}
#page-body .panel#message p {
    margin: 0 0 12px 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: #334155 !important;
}
#page-body .panel#message p:last-child { margin-bottom: 0 !important; }
#page-body .panel#message a {
    color: #096EFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#page-body .panel#message a:hover { text-decoration: underline !important; }
@media (max-width: 700px) {
    #page-body .panel#message {
        margin: 16px 0 !important;
        padding: 20px 18px !important;
    }
}

/* The sr-only header has one side effect worth undoing. On a phone,
   forum_fn.js builds each stacked row's label from `cell.text()` on the
   matching <th> — and .text() reads through sr-only, because that is CSS, not
   markup. The column that had no visible name now prints "VIEW USER NOTES"
   beside a link already reading "View user notes".

   Hide the generated label for exactly the column whose header is sr-only.
   Nothing is lost: the <thead> is still in the DOM and still associated, so
   assistive tech gets the name from there either way — the <dfn> is a purely
   visual stand-in for a header that is, by design, not visible. */
@media (max-width: 700px) {
    body.section-mcp #cp-main table.table1:has(thead th:nth-child(4) .sr-only) tbody td:nth-child(4) dfn {
        display: none !important;
    }
}


/* --- 29. Moderator logs: the destination links ---------------------------
   Each log row ends with up to three links — View post, View topic, View
   forum — which mcp_logs.php joined with a literal " | ". Same objection as
   the return links in section 24: a bare pipe is a text node, so it is not
   selectable, screen readers announce it, and CSS cannot reach it to restyle
   or remove it. The PHP now emits one `span.log-link` per destination inside
   a `span.log-links`, so the separator is space.

   Lighter than the section 24 chips on purpose: there is one of these on
   every row of a 369-entry table, and they are secondary to the log entry
   itself. */
body.section-mcp #cp-main .log-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    margin-top: 5px !important;
}
body.section-mcp #cp-main .log-links .log-link a {
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
    background: #f3f6fc !important;
    border: 1px solid #e8edf7 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #5468a8 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
body.section-mcp #cp-main .log-links .log-link a:hover {
    background: #e9f0fd !important;
    border-color: #cfdcf6 !important;
    color: #096EFF !important;
}
@media (max-width: 700px) {
    /* The cell is a flex row (label left, value right); give the link group
       its own full-width line rather than letting it fight the note for the
       same one. */
    body.section-mcp #cp-main table.table1 tbody td .log-links {
        flex: 1 0 100% !important;
        justify-content: flex-end !important;
    }
}


/* --- 30. Banning ---------------------------------------------------------
   One template serves all three modes (usernames, IPs, emails), so these
   field names cover the whole tab.

   (a) The "until" date box was 1210px wide to hold "2026-10-14", with its
   own "(YYYY-MM-DD)" hint stranded at the far right of the row. Size the
   field to its content and keep the hint next to it, where a hint belongs. */
/* The selector mirrors the generic MCP field rule it has to beat —
   `@media (min-width:701px) body.section-mcp #cp-main form[id^="mcp"]
   dl:not(ul.topiclist *) dd input.inputbox { width: 100% }` at (1,4,5).
   A short `#cp-main input[name=...]` is (1,2,2) and loses, which is why the
   box stayed 1203px on the first attempt. Measured, not assumed. */
body.section-mcp #cp-main form[id^="mcp"] dl:not(ul.topiclist *) dd input.inputbox[name="banlengthother"],
body.section-mcp #cp-main input[name="banlengthother"] {
    width: 190px !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin-right: 10px !important;
    font-variant-numeric: tabular-nums !important;
}
/* The hint "(YYYY-MM-DD)" sits in the same <label> as the field. */
body.section-mcp #cp-main dd label:has(> input[name="banlengthother"]),
body.section-mcp #cp-main dd:has(> input[name="banlengthother"]) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
}

/* (b) "Find a member" is the same control here as on the User notes and Warn
   user forms — it opens the same finder — but it was left a bare link under
   the textarea while those two got a button. Match them. The ban form wraps
   it in <strong>, which is why the section 26e selector missed it. */
body.section-mcp #cp-main dd > strong > a[onclick*="find_username"],
body.section-mcp #cp-main dd > a[onclick*="find_username"] {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    background: #f3f6fc !important;
    border: 1px solid #e4eaf6 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #096EFF !important;
    text-decoration: none !important;
}
body.section-mcp #cp-main dd > strong > a[onclick*="find_username"]:hover,
body.section-mcp #cp-main dd > a[onclick*="find_username"]:hover {
    background: #e9f0fd !important;
    border-color: #cfdcf6 !important;
}
body.section-mcp #cp-main dd > strong:has(> a[onclick*="find_username"]) {
    font-weight: 400 !important;
}


/* --- 31. The reported-post flag on viewtopic -----------------------------
   colours.css paints `.reported` with `background-color: #F7ECEF`, which on
   a topic page means the whole post — measured 1755 x 2657px of pink behind
   someone's writing. At that scale a flag stops reading as a flag and starts
   reading as an error state covering the content.

   The signal is kept, just moved off the body copy: the post gets a red edge
   instead of a wash, and the notice paragraph phpBB already renders inside it
   ("Click to view report") carries the colour, since that is the part that
   says what happened and links to the report.

   Moderator-only either way — phpBB only emits `.reported` to users holding
   m_report, so nothing here changes what members see. */
#page-body .post.reported {
    background-color: #ffffff !important;
    box-shadow: inset 3px 0 0 0 #dc6b7f !important;
}
#page-body .post.reported .post-notice.reported {
    background-color: #fdf4f6 !important;
    border: 1px solid #f3dde2 !important;
    border-left: 3px solid #dc6b7f !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    margin: 0 0 12px 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #9f3449 !important;
    /* phpBB centres .post-notice; left is where everything else in the post
       starts, and a centred one-line flag reads as a banner. */
    text-align: left !important;
}
#page-body .post.reported .post-notice.reported a {
    color: #9f3449 !important;
    text-decoration: underline !important;
}
/* The exclamation already in the notice is the icon; keep it on-tone. */
#page-body .post.reported .post-notice.reported .icon-red,
#page-body .post.reported .post-notice.reported .icon {
    color: #dc6b7f !important;
}


/* The same flag on a forum listing row. A row is one line, so a tint works
   there where a 2657px wash did not — but #F7ECEF against the white rows
   around it is louder than the row deserves, and it clashed with the pale
   blue of the per-topic pager sitting inside it. Same red edge as the post,
   a far lighter tint, and the hover a shade down from stock's #ECD5D8. */
#page-body ul.topiclist li.row.reported,
#page-body ul.topiclist li.row.reported.bg1,
#page-body ul.topiclist li.row.reported.bg2 {
    background-color: #fdf6f7 !important;
    box-shadow: inset 3px 0 0 0 #dc6b7f !important;
}
#page-body ul.topiclist li.row.reported:hover {
    background-color: #fbeef1 !important;
}


/* --- 32. Moderator logs on a phone: the action sentence ------------------
   Section 11 right-aligns every cell but the first, which is right for an IP
   or a timestamp and wrong for a sentence. A three-line log entry came out
   right-aligned with a ragged left edge, floating inward from the card while
   USERNAME and USER IP sat flush left above it — the indentation looked
   deliberate and wasn't.

   The cell is also a flex row, and a flex item is blockified: `display:
   inline` on a child of a flex container is ignored, so the reason could not
   run on from its colon no matter what it was set to. Take the prose column
   out of flex altogether and let it be ordinary text flow — label, then the
   sentence and its reason as one wrapping paragraph, then the link tags. The
   short columns keep their flex label-left / value-right pairing. */
@media (max-width: 700px) {
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) {
        display: block !important;
        text-align: left !important;
    }
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) > dfn {
        display: block !important;
        margin-bottom: 4px !important;
        text-align: left !important;
    }
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) > strong {
        display: inline !important;
        text-align: left !important;
    }
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) > .log-detail,
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) > .log-links {
        text-align: left !important;
    }
    body.section-mcp #cp-main table.table1:has(thead th.center) tbody td:nth-child(4) > .log-links {
        justify-content: flex-start !important;
    }
}

/* ============================================================================
   LOGIN PAGE — vertical rhythm  (.login_container, 2026-10-14)
   ----------------------------------------------------------------------------
   login_body.html builds each field as a bare <div> wrapping a <label> and an
   <input>, with no class to hang spacing on. merlin.css:632 gives the input
   `margin-bottom: 15px` and the label nothing, and a <label> is `display:inline`
   by default — where vertical margin is ignored even if something sets it. So
   the label sat flush on top of its own box while the gap to the NEXT label was
   15px. Two gaps that close read as five loose lines, not three labelled fields:
   "Password" looked about as attached to the username box above it as to its own.

       before:  label →  0px → input → 15px → next label
       after:   label →  6px → input → 22px → next label

   The button needed no rule here. It was already covered by the
   `.login_container input[type="submit"]` gradient near the top of this sheet,
   but lost to the UCP chip rule at ~line 3900 on specificity (0,5,2 beats
   0,2,1 — both !important, so weight decides). Narrowing that rule with
   `:not([name="login"])` hands the button back to the gradient it always had.

   No page scoping needed: .login_container exists only on login_body.html.
   ============================================================================ */

/* Field labels only. `:not(:has(input))` excludes the "Remember me" label,
   which WRAPS its checkbox and must stay a single row — matching it on
   [for="autologin"] instead would break if the credential ids ever change. */
.login_container .login_form label:not(:has(input)) {
    display: block !important;
    margin-bottom: 6px !important;
}

/* The between-group gap. Raised from merlin's 15px so it clearly beats the
   6px within-group gap above. */
.login_container .login_form input.inputbox {
    margin-bottom: 22px !important;
}

/* "Remember me" — flex puts the box and its text on a shared centre line
   instead of leaving the 15px box sitting on the text baseline. */
.login_container .login_form label:has(input[type="checkbox"]) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 4px !important;
}
.login_container .login_form label:has(input[type="checkbox"]) input[type="checkbox"] {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* The captcha variant (fieldset.fields2) reuses the dl/dt/dd pair that
   merlin.css flattens with `margin-left: 0`; give it the same rhythm. */
.login_container .login_form fieldset.fields2 dt {
    margin-bottom: 6px !important;
}
.login_container .login_form fieldset.fields2 dd {
    margin-bottom: 22px !important;
}

/* ============================================================================
   POST TABLES — a visible cell grid  (.tables1, 2026-10-14)
   ----------------------------------------------------------------------------
   Stock gives a post table `border-top: 1px solid #FAFAFA` on tbody cells and
   nothing else: a near-white hairline, no vertical borders at all, so a table
   read as a blue header strip above rows of floating text.

   `.tables1` is emitted only by the [table] BBcode wrapper — verified against
   phpbb_bbcodes, it is the only template containing that class, and it carried
   no CSS rules before this block. That matters because phpBB's own tables
   (memberlist, team, the whole MCP) are also `table.table1` and are styled
   deliberately elsewhere; scoping on `.forumbg-table` alone would have reached
   every one of them.
   ============================================================================ */

.tables1 table.table1 {
    border-collapse: collapse !important;
    width: 100% !important;
}

/* The grid itself. vertical-align:top keeps a tall wrapped cell from
   centring its short neighbours. */
.tables1 table.table1 th,
.tables1 table.table1 td {
    border: 1px solid #d8dee9 !important;
    padding: 8px 10px !important;
    vertical-align: top !important;
}

/* Header cells sit on the blue bar and carry white text (colours.css:179),
   so a grey grid line would cut across it. Use a translucent white instead. */
.tables1 table.table1 thead th {
    border-color: rgba(255, 255, 255, 0.28) !important;
}

/* A wide table should scroll inside the post rather than push the page out.
   This engages only when the table genuinely overflows. */
.tables1 > .inner {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ── Post tables: three corrections found in testing (2026-10-14) ──
   1. A 2px horizontal scrollbar on the whole post.
      common.css:719 gives `.forumbg-table > .inner` a `margin: 0 -1px`, so the
      wrapper sits 2px wider than `.content` — which already carries
      overflow-x:auto. Invisible until now because every table on the board
      specified a width (90%, 20%); a bare [table] defaults to 100% and the
      2px began showing as a scrollbar under the post.
   2. A header row written without [thead] got no header styling: the blue
      comes from `thead tr`, so plain `[tr][th]` rendered white-on-white.
   3. On mobile phpBB hides EVERY th (responsive.css:323) and shows only
      `th:first-child` on .show-header tables, so a table without [thead] lost
      all its headings but the first with no indication. [thead] remains the
      right way to write one — it is what makes forum_fn.js emit the
      "Column: value" labels — but nothing should silently disappear. */

.tables1 {
    /* The wrapper carries `width: {NUMBER}%` inline and a 1px .forumbg border,
       under the stock `content-box`: 100% + 2px, which overflowed `.content`
       (itself overflow-x:auto) and drew a scrollbar across the whole post.
       Same shape as the v=258 left-rail bug. */
    box-sizing: border-box !important;
}

.tables1 > .inner {
    margin: 0 !important;
}

/* A header row is any row of th, in a thead or not. */
.tables1 table.table1 tr:has(> th) {
    background: #096EFF !important;
}
.tables1 table.table1 th {
    /* transparent, not blue: the colour belongs to the row above, and a th
       outside a thead otherwise carries an opaque white background that
       painted over it — white text on white, an empty header bar. */
    background: transparent !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    /* Translucent white divides one header cell from the next. */
    border-color: rgba(255, 255, 255, 0.28) !important;
}

/* ...but only on the INSIDE. The table's outer frame has to stay one colour
   all the way round: with a white border on the header's outer edge and a
   grey one on the body's, the blue read as a pixel wider than the grid below
   it — the edges looked a hair out of true even though the cells measure
   identically (th and td both start at x=288.5). */
.tables1 table.table1 tr:has(> th) > th {
    /* Blue on the header's own outer edges, so the bar runs flush to the
       table edge. Measured: header and body cells share the same 1px border
       and start at the identical x — but in the body that border sits against
       white and reads as the table's edge, while in the header the blue
       visibly stops short of it, so the bar looked a pixel narrow on each
       side. Letting the blue cover its outer border removes the mismatch.
       The bottom stays grey: it is the line between header and body. */
    border-top-color: #096EFF !important;
    border-bottom-color: #d8dee9 !important;
}
.tables1 table.table1 tr:has(> th) > th:first-child {
    border-left-color: #096EFF !important;
}
.tables1 table.table1 tr:has(> th) > th:last-child {
    border-right-color: #096EFF !important;
}

/* Square corners. The wrapper carries `border-radius: 12px; overflow: hidden`
   from .forumbg, which clipped the blue header into a curve while every cell
   under it stayed square — the other half of the "slanted edge". A data grid
   wants a crisp rectangle. */
/* `.viewtopic_wrapper .forumbg` (0,2,0) sets the 12px and also carries
   !important, so a bare `.tables1` (0,1,0) lost — trap 8 again. Mirror the
   shape of the rule being overridden. The second selector covers the places
   a post renders outside .viewtopic_wrapper (preview, PM view). */
.viewtopic_wrapper .forumbg.tables1,
.forumbg.tables1,
.tables1 > .inner {
    border-radius: 0 !important;
}

@media (max-width: 700px) {
    /* Keep every heading visible when the table has no [thead] to label from. */
    .tables1 table.responsive th {
        display: block !important;
        width: auto !important;
        text-align: left !important;
    }
}

/* ============================================================================
   CODEBOX PLUS — full width and even spacing  (plan items 5 and 6, 2026-10-15)
   ----------------------------------------------------------------------------
   The extension's own stylesheet
   (ext/o0johntam0o/codeboxplus/styles/all/theme/style.css) caps every code
   block at `max-width: 75%`. Measured on a real post: 1122px inside a 1493px
   column on desktop, and — the one that matters — **231px inside a 305px
   column at 390px**. A quarter of the width thrown away on a phone, where
   there is least to spare.

   It is not only cosmetic. On that post the longest line is 1046px, so at
   75% a Dropbox URL wrapped onto a second visual line with no line number
   beside it; at full width it fits.

   Overridden here rather than edited in place: the extension's stylesheet is
   third-party and any change to it is lost on update. `#page-body` is carried
   on the second selector so this beats the extension rule on specificity
   whatever the stylesheet load order turns out to be.
   ============================================================================ */

.codebox_plus_wrap,
#page-body .codebox_plus_wrap {
    max-width: 100% !important;
    margin: 20px 0 !important;
}

/* phpBB emits a <br> between the preceding text and a block-level BBcode.
   Stacked on the wrapper's own margin it made the gap above the box differ
   from the gap below it (16px against 14px). Dropping the stray break lets
   the margin alone set the rhythm, so both sides match. */
br:has(+ .codebox_plus_wrap) {
    display: none !important;
}

/* phpBB also leaves a genuinely empty <p> after the block (`:empty` matches,
   zero child nodes, zero height) carrying an 18.9px bottom margin. On desktop
   that margin collapses with the wrapper's own 20px and is invisible; at
   390px it does not collapse, so the two sum and the gap below the box came
   out at 41px against 22px above. Removing a paragraph that renders nothing
   is safer than trying to out-specify a collapsing margin. */
.codebox_plus_wrap + p:empty,
p:empty + .codebox_plus_wrap {
    margin-top: 0 !important;
}
.codebox_plus_wrap + p:empty {
    display: none !important;
}

/* ------------------------------------------------------------------
   Forum rules panel: guidance, not a warning.

   Milk_v2 ships .rules in the error palette (pink #ECD5D8 on red
   #BC2A4D, colours.css:311). That is right for a prohibition and wrong
   for the three-line "Belongs here / Not here / Post well" orientation
   that now sits on every public forum -- across 232 forums a red block
   reads as a telling-off. Recoloured to the brand blue, which says
   "read this" without saying "you are in trouble".

   Overrides rather than edits colours.css: this file loads last, so the
   vendor stylesheet stays untouched and survives a theme update.
   ------------------------------------------------------------------ */
div.rules {
    background-color: #EFF5FF;
    color: #1E3A5F;
    border-left-color: #096EFF;
}
div.rules a {
    /* colours.css sets #AA0000 !important, so this has to match it. */
    color: #0B5BD3 !important;
}

/* Dark mode. dark.css uses `.fd_dark .rules` with !important, so the
   override needs both the extra specificity and !important to land. */
.fd_dark div.rules {
    background-color: rgba(9, 110, 255, 0.14) !important;
    color: #C3D8F7 !important;
    border-left-color: #4C8DFF !important;
}
.fd_dark div.rules a {
    color: #93BDFF !important;
}

/* ------------------------------------------------------------------
   Code blocks: the Copy control.

   Replaces the old "Code: Select all" link (see the enhancer appended to
   codeboxplus/styles/all/template/script.js).

   A deep navy pill -- #0A2540, the same navy as the [dfb] cell's toggle.
   Amber was tried first and read as a foreign object stuck on the green
   bar; this sits quietly on it instead. Hierarchy comes from the fill:
   Copy is solid, [Expand/Collapse] stays outlined.

   #0A2540 is the one fill that works on BOTH surfaces, so there is no
   per-context override to keep in sync:
     white label on it ................ 15.54:1
     against the bar  (#26a269) ........ 4.78:1   (>=3 for a UI boundary)
     against the page (#ffffff) ....... 15.54:1
   States stay in the blue family and lift in brightness, with the label
   itself ("Copied") carrying the meaning.
   ------------------------------------------------------------------ */
.tssfl-copy-btn {
    font: 700 11px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ffffff;
    background: #0A2540;
    border: 1px solid transparent;
    border-radius: 20px;          /* matches the sibling [Expand/Collapse] pill */
    padding: 3px 11px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.tssfl-copy-btn:hover,
.tssfl-copy-btn:focus-visible {
    background: #0A4FA8;          /* 7.79:1 */
}
.tssfl-copy-btn.tssfl-copied {
    background: #0B5BD3;          /* 6.08:1 */
    color: #ffffff;
}

/* Dark mode: the page goes near-black, where #0A2540 would sink into it
   (1.22:1). Lift to the brand blue, which clears the dark surface. */
.fd_dark .tssfl-copy-btn {
    background: #0B5BD3;
    color: #ffffff;
}
.fd_dark .tssfl-copy-btn:hover,
.fd_dark .tssfl-copy-btn:focus-visible {
    background: #096EFF;
}
.fd_dark .tssfl-copy-btn.tssfl-copied {
    background: #096EFF;
    color: #ffffff;
}

/* ------------------------------------------------------------------
   Opinion poll result bars.

   Two things were wrong out of the box.

   1. COLOUR ENCODED THE WRONG THING. phpBB picks the bar class from the
      vote share -- `<!-- IF POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF
      < 40 -->pollbar2 ...` -- and prosilver paints those five classes as
      five shades of one crimson. So colour repeated what the bar length
      already said, options on 19% and 21% came out different colours, and
      every poll was red. Colour now identifies the OPTION, keyed off
      :nth-of-type so no template is touched. The `20n` steps mean a poll
      with more than 20 options wraps around the palette instead of
      dropping back to phpBB's red.

   2. THE ROW WAS TOP-ALIGNED. Label, bar and percentage are three floats
      of different heights (18 / 29 / 17px), so they hung from a common top
      edge and read as offset. The row is a flex line now, centred, so all
      three strike through the bar's middle. Widths are preserved as flex
      bases (30 / 50 / 10%) so the layout is unchanged, and the old 10px
      row padding is cut right down to close the gaps.

   Palette: 20 slots, every one of the 17 Tailwind hue families represented,
   searched (not eyeballed) to maximise the worst ADJACENT pair under
   deuteranopia and protanopia -- that is the pair a reader actually has to
   separate in a vertical list. Validated with the dataviz validator on both
   surfaces: worst adjacent dE 20.0 (deutan), normal-vision floor 21.7,
   lightness band and chroma floor pass, contrast >= 3:1 on light. Dark lifts
   one step; #0369A1 sits at 2.94:1 there, a WARN carrying its own visible
   label, vote count and percentage as relief.
   ------------------------------------------------------------------ */

/* Row: one centred flex line, tight. */
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) {
    display: flex !important;
    align-items: center !important;
    padding: 1px 0 !important;
    margin: 0 0 2px !important;
}
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) > dt {
    flex: 0 0 30%;
    float: none !important;
    line-height: 1.3 !important;
}
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) > dd.resultbar {
    flex: 0 0 50%;
    float: none !important;
    height: auto !important;
    margin: 0 !important;
}
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) > dd.poll_option_percent {
    flex: 0 0 10%;
    float: none !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) > dd.poll_option_select {
    flex: 0 0 auto;
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

/* The fill itself: thick enough for the frequency to sit inside it. */
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) dd.resultbar > div {
    line-height: 28px !important;
    padding: 0 9px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    border-radius: 0 4px 4px 0;
    box-sizing: border-box;
    min-width: 2px;
    transition: width .25s ease;
}

/* Identity by option: one custom property per slot, used by both the fill
   and the vote control, so the colour is defined once. */
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+1) { --poll-c: #0D9488; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+2) { --poll-c: #7E22CE; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+3) { --poll-c: #F43F5E; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+4) { --poll-c: #7C3AED; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+5) { --poll-c: #059669; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+6) { --poll-c: #A855F7; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+7) { --poll-c: #DB2777; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+8) { --poll-c: #3B82F6; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+9) { --poll-c: #EF4444; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+10) { --poll-c: #C026D3; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+11) { --poll-c: #B45309; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+12) { --poll-c: #0891B2; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+13) { --poll-c: #C2410C; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+14) { --poll-c: #0369A1; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+15) { --poll-c: #4D7C0F; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+16) { --poll-c: #6366F1; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+17) { --poll-c: #16A34A; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+18) { --poll-c: #0284C7; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+19) { --poll-c: #A16207; }
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n) { --poll-c: #2563EB; }

/* Dark surface: one step lifted to clear 3:1; the rest unchanged. */
.fd_dark fieldset.polls dl:not(.poll_total_votes):not(.poll_vote):nth-of-type(20n+2) { --poll-c: #9333EA; }

fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) dd.resultbar > div {
    background-color: var(--poll-c) !important;
    border-bottom-color: var(--poll-c) !important;
    border-right-color: var(--poll-c) !important;
}

/* The vote control: bigger hit target, and tinted to its own bar so the
   choice you are about to make is tied to the bar it will grow. */
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) > dd.poll_option_select input[type="radio"],
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) > dd.poll_option_select input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 6px 0 0 !important;
    accent-color: var(--poll-c);
    cursor: pointer;
    vertical-align: middle;
}
fieldset.polls dl:not(.poll_total_votes):not(.poll_vote) > dd.poll_option_select label { cursor: pointer; }