/*
 * eXtreme Club 1.1.0 override layer for SMF 2.1.x
 * Child theme: retain Curve2 layout and functionality, replace visual language.
 */
/* ========================================================================== 
   Palette
   ========================================================================== */
:root,
html[data-extreme-mode="light"] {
    color-scheme: light;
    --ex-bg: #e9eef1;
    --ex-surface: #f8fafb;
    --ex-surface-raised: #f1f4f6;
    --ex-surface-soft: #e8edf0;
    --ex-poster-bg: #edf2f4;
    --ex-post-bg: #fafcfd;
    --ex-post-meta-bg: #f3f6f7;
    --ex-post-separator: #d8e0e5;
    --ex-row: #f4f6f7;
    --ex-row-alt: #eef2f4;
    --ex-hover: #e7ecef;
    --ex-text: #252a2e;
    --ex-text-soft: #505a62;
    --ex-muted: #5d6a73;
    --ex-border: #cfd7dc;
    --ex-border-strong: #bcc7ce;
    --ex-top: #343a40;
    --ex-top-2: #2b3035;
    --ex-head: #20252a;
    --ex-head-2: #292f34;
    --ex-head-text: #f8fafb;
    /* Light mode: restrained warm stone instead of visible orange.
       Brand accents stay warm, while primary controls use a separate soft sand tone. */
    --ex-accent: #c3a07f;
    --ex-accent-hover: #b58f6d;
    --ex-accent-soft: #f4efe9;
    --ex-accent-soft-hover: #ece3da;
    --ex-accent-border: #b8a08a;
    --ex-accent-text: #3f352d;
    --ex-accent-ink: #7c6652;
    --ex-action-bg: #e9ded3;
    --ex-action-hover: #dfcfbf;
    --ex-action-border: #c8b3a0;
    --ex-action-text: #463a31;
    --ex-link: #526979;
    --ex-link-hover: #2e4352;
    --ex-input: #fbfcfd;
    --ex-input-text: #202428;
    --ex-positive-bg: #eaf7ed;
    --ex-positive: #277a39;
    --ex-warning-bg: #fff6df;
    --ex-warning: #9b6500;
    --ex-error-bg: #fff0f0;
    --ex-error: #b42c2c;
    --ex-shadow: 0 4px 14px rgba(29, 36, 42, .09);
    --ex-shadow-small: 0 2px 7px rgba(29, 36, 42, .07);
    --ex-focus: rgba(195, 143, 82, .20);
    --ex-footer: #343a40;
    --ex-footer-text: #dce2e7;
    --ex-footer-link: #a9cfff;
}

html[data-extreme-mode="dark"] {
    color-scheme: dark;
    /* Graphite rather than pure black, and muted text rather than pure white. */
    --ex-bg: #161a1e;
    --ex-surface: #20262b;
    --ex-surface-raised: #262d33;
    --ex-surface-soft: #2c343b;
    --ex-poster-bg: #252e35;
    --ex-post-bg: #1d2429;
    --ex-post-meta-bg: #222b31;
    --ex-post-separator: #34424c;
    --ex-row: #232a30;
    --ex-row-alt: #272f35;
    --ex-hover: #303a42;
    --ex-text: #d8dde1;
    --ex-text-soft: #b6c0c7;
    --ex-muted: #96a2ab;
    --ex-border: #3a454e;
    --ex-border-strong: #4a5660;
    --ex-top: #30363c;
    --ex-top-2: #282e33;
    --ex-head: #252b30;
    --ex-head-2: #2c343a;
    --ex-head-text: #e5e9ec;
    /* Dark mode keeps the caramel accent that already works on graphite. */
    --ex-accent: #c59a67;
    --ex-accent-hover: #d2a875;
    --ex-accent-soft: #3a3129;
    --ex-accent-soft-hover: #44382e;
    --ex-accent-border: #9f7549;
    --ex-accent-text: #1d2023;
    --ex-accent-ink: #d4aa7a;
    --ex-action-bg: #c59a67;
    --ex-action-hover: #d2a875;
    --ex-action-border: #9f7549;
    --ex-action-text: #1d2023;
    --ex-link: #9ab2c1;
    --ex-link-hover: #c0d1dc;
    --ex-input: #1b2126;
    --ex-input-text: #dbe1e5;
    --ex-positive-bg: #1b3021;
    --ex-positive: #7dcb8a;
    --ex-warning-bg: #342c1c;
    --ex-warning: #e1b65c;
    --ex-error-bg: #382326;
    --ex-error: #e78b84;
    --ex-shadow: 0 5px 18px rgba(0, 0, 0, .28);
    --ex-shadow-small: 0 2px 8px rgba(0, 0, 0, .21);
    --ex-focus: rgba(197, 154, 103, .22);
    --ex-footer: #292f34;
    --ex-footer-text: #aeb8c0;
    --ex-footer-link: #84b2e9;
}

/* ========================================================================== 
   Global canvas and typography
   ========================================================================== */
html,
body {
    background: var(--ex-bg) !important;
}
body {
    color: var(--ex-text) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif !important;
}
body, #footer, #top_section, #wrapper,
.windowbg, .roundframe, .information, .cat_bar, .title_bar,
input, textarea, select, button {
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

strong, .strong,
h1, h2, h3, h4, h5, h6,
.poster h4, .poster h4 a,
.keyinfo h5, .subject_title {
    color: var(--ex-text) !important;
}

a, a:visited {
    color: var(--ex-link);
}
a:hover, a:focus {
    color: var(--ex-link-hover);
}
.description, .smalltext, .information .smalltext,
.board_description, .postinfo, .post_details,
.lastpost, .stats, .word_break, .bbc_size {
    color: var(--ex-muted) !important;
}

/* ========================================================================== 
   Top strip + identity header
   ========================================================================== */
#top_section {
    background: var(--ex-top) !important;
    color: var(--ex-head-text) !important;
    border: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .22) !important;
}
#top_section a,
#top_section a:visited,
#top_section .welcome,
#top_info .textmenu {
    color: var(--ex-head-text) !important;
    text-shadow: none !important;
}
#top_info > li > a:hover,
#top_info > li > a.active {
    background: rgba(255, 255, 255, .08) !important;
    text-decoration: none;
}
#top_section input,
#top_section select,
#top_section button:not(.extreme_theme_toggle) {
    background: var(--ex-input) !important;
    color: var(--ex-input-text) !important;
    border-color: var(--ex-border-strong) !important;
    box-shadow: none !important;
}

#header {
    background: transparent !important;
    min-height: 62px;
}
.forumtitle a,
.forumtitle a:visited {
    color: var(--ex-accent) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em;
    text-shadow: none !important;
}
#siteslogan {
    color: var(--ex-text-soft) !important;
    text-shadow: none !important;
}

/* One light/dark switch in the top strip. */
.extreme_theme_toggle {
    width: 30px !important;
    min-width: 30px !important;
    height: 28px !important;
    padding: 0 !important;
    line-height: 26px !important;
    font: 19px/26px "Segoe UI Symbol", "Arial Unicode MS", sans-serif !important;
    text-align: center;
    background: transparent !important;
    color: #f6b21a !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: 0 0 8px rgba(246, 178, 26, .18) !important;
    cursor: pointer;
}
.extreme_theme_toggle:hover,
.extreme_theme_toggle:focus {
    background: rgba(246, 178, 26, .10) !important;
    border-color: rgba(246, 178, 26, .30) !important;
    color: #ffc43d !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ========================================================================== 
   Main shell, navigation and menus
   ========================================================================== */
#wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#upper_section,
#inner_section,
.navigate_section,
.roundframe,
.information,
.generic_list_wrapper,
.popup_window,
#profileview,
#moderationbuttons_strip,
#main_content_section > .windowbg {
    background: var(--ex-surface) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}
#upper_section,
.navigate_section,
.roundframe,
.information,
.generic_list_wrapper {
    box-shadow: var(--ex-shadow-small) !important;
}
#upper_section,
.navigate_section,
.roundframe,
.information {
    border-radius: 7px !important;
}
#upper_section .user,
#upper_section .news,
#inner_section,
#inner_section > div {
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}

.dropmenu li a,
.dropmenu li a:visited {
    color: var(--ex-text) !important;
    text-shadow: none !important;
}
.dropmenu li a:hover,
.dropmenu li:hover > a,
.dropmenu li a:focus {
    background: var(--ex-surface-soft) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}
.dropmenu li a.active,
.dropmenu li a.active:hover {
    background: var(--ex-accent-soft) !important;
    color: var(--ex-accent-ink) !important;
    border-color: var(--ex-accent-border) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.top_menu,
.dropmenu li ul,
.popup_window {
    background: var(--ex-surface) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
    box-shadow: var(--ex-shadow) !important;
}
.top_menu a,
.top_menu a:visited,
.dropmenu li li a,
.dropmenu li li a:visited {
    color: var(--ex-text) !important;
}

/* ========================================================================== 
   Category headings and board/topic rows
   ========================================================================== */
.cat_bar,
.title_bar {
    background: var(--ex-head) !important;
    background-image: none !important;
    border: 1px solid var(--ex-head) !important;
    border-bottom: 2px solid var(--ex-accent) !important;
    border-radius: 7px 7px 0 0 !important;
    box-shadow: none !important;
}
.cat_bar .catbg,
.title_bar .titlebg,
.cat_bar strong,
.title_bar strong,
.catbg,
.titlebg,
.cat_bar a,
.cat_bar a:visited,
.title_bar a,
.title_bar a:visited {
    color: var(--ex-head-text) !important;
    text-shadow: none !important;
}

/* Wipe Curve2's light gradients, including the individual board columns. */
.windowbg,
.windowbg2,
.windowbg3,
.board_row,
.boardindex_table,
.boardindex_table tbody,
.boardindex_table tbody tr,
.boardindex_table tbody tr > td,
.boardindex_table .board_row,
.boardindex_table .board_icon,
.boardindex_table .board_info,
.boardindex_table .board_stats,
.boardindex_table .lastpost,
.boardindex_table .children,
#boardindex_table,
#boardindex_table tbody,
#boardindex_table tbody tr,
#boardindex_table tbody tr > td,
#boardindex_table .board_row,
#boardindex_table .board_icon,
#boardindex_table .board_info,
#boardindex_table .board_stats,
#boardindex_table .lastpost,
.topic_table tbody,
.topic_table tbody tr,
.topic_table tbody tr > td,
.table_grid tbody tr,
.table_grid tbody tr > td,
.table_list tbody tr,
.table_list tbody tr > td {
    background: var(--ex-row) !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}
.windowbg2,
.windowbg3,
.topic_table tbody tr:nth-child(even) > td,
.table_grid tbody tr:nth-child(even) > td,
.table_list tbody tr:nth-child(even) > td {
    background: var(--ex-row-alt) !important;
}
.boardindex_table tbody tr:hover > td,
#boardindex_table tbody tr:hover > td,
.topic_table tbody tr:hover > td,
.table_grid tbody tr:hover > td,
.table_list tbody tr:hover > td,
.windowbg:hover {
    background: var(--ex-hover) !important;
}
.boardindex_table .board_description,
.boardindex_table .board_stats,
.boardindex_table .lastpost,
.boardindex_table .smalltext,
#boardindex_table .board_description,
#boardindex_table .board_stats,
#boardindex_table .lastpost,
#boardindex_table .smalltext {
    color: var(--ex-muted) !important;
}

/* Avoid pale statistics columns in dark mode caused by more specific stock CSS. */
html[data-extreme-mode="dark"] .boardindex_table td,
html[data-extreme-mode="dark"] #boardindex_table td,
html[data-extreme-mode="dark"] .topic_table td,
html[data-extreme-mode="dark"] .table_grid td,
html[data-extreme-mode="dark"] .table_list td {
    background-color: var(--ex-row) !important;
    background-image: none !important;
}
html[data-extreme-mode="dark"] .boardindex_table tr:nth-child(even) td,
html[data-extreme-mode="dark"] #boardindex_table tr:nth-child(even) td {
    background-color: var(--ex-row-alt) !important;
}

/* ========================================================================== 
   Topic view / posts
   ========================================================================== */
.post_wrapper,
.postarea,
.poster,
.post,
.signature,
.attachments,
#quickreplybox,
#quickModForm,
#forumposts .windowbg,
#forumposts .windowbg2,
#forumposts .windowbg3 {
    background: var(--ex-surface) !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}
.signature,
.post_separator,
.postarea .keyinfo,
.poster {
    border-color: var(--ex-border) !important;
}
blockquote,
.bbc_standard_quote,
.bbc_alternate_quote,
.bbc_code,
.phpcode {
    background: var(--ex-surface-raised) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border-strong) !important;
}
blockquote cite,
.codeheader,
.quoteheader {
    color: var(--ex-muted) !important;
}

/* ========================================================================== 
   Tables, profile, moderation/admin content
   ========================================================================== */
table,
.table_grid,
.topic_table,
.boardindex_table,
.table_list {
    color: var(--ex-text) !important;
}
.table_grid th,
.topic_table th,
.table_list th,
.generic_list_wrapper th {
    background: var(--ex-head-2) !important;
    background-image: none !important;
    color: var(--ex-head-text) !important;
    border-color: var(--ex-border) !important;
}
.table_grid td,
.topic_table td,
.table_list td,
.generic_list_wrapper td {
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}
#admin_form_wrapper,
#admin_content,
#admincenter,
#profileview,
.profile_content,
#moderationcenter,
#modcenter {
    color: var(--ex-text) !important;
}

/* ========================================================================== 
   Forms
   ========================================================================== */
input,
textarea,
select {
    background: var(--ex-input) !important;
    color: var(--ex-input-text) !important;
    border: 1px solid var(--ex-border-strong) !important;
    box-shadow: none !important;
}
input:hover,
textarea:hover,
select:hover,
input:focus,
textarea:focus,
select:focus {
    background: var(--ex-input) !important;
    color: var(--ex-input-text) !important;
    border-color: var(--ex-accent) !important;
    box-shadow: 0 0 0 2px var(--ex-focus) !important;
}
fieldset,
fieldset legend {
    background: transparent !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}

/* SCEditor and other editor shells. */
.sceditor-container,
.sceditor-toolbar,
.sceditor-group,
.sceditor-dropdown,
.sceditor-menuitem,
.sceditor-container iframe,
.sceditor-container textarea {
    border-color: var(--ex-border) !important;
}
html[data-extreme-mode="dark"] .sceditor-container,
html[data-extreme-mode="dark"] .sceditor-toolbar,
html[data-extreme-mode="dark"] .sceditor-group,
html[data-extreme-mode="dark"] .sceditor-dropdown {
    background: var(--ex-surface-raised) !important;
    color: var(--ex-text) !important;
}

/* ========================================================================== 
   Buttons and pagination
   ========================================================================== */
.button,
button.button,
input.button,
.buttonlist .button,
.quickbuttons li > a,
.quickbuttons li > span,
.nav_page,
.current_page,
.expand_pages {
    background: var(--ex-surface-raised) !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    border: 1px solid var(--ex-border-strong) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.button:hover,
.button:focus,
.buttonlist .button:hover,
.buttonlist .button:focus,
.quickbuttons li > a:hover,
.nav_page:hover {
    background: var(--ex-surface-soft) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-accent) !important;
    text-decoration: none;
}
.button.active,
.button.active:hover,
.buttonlist .active,
.buttonlist .active:hover,
.current_page {
    background: var(--ex-accent) !important;
    color: var(--ex-accent-text) !important;
    border-color: var(--ex-accent-border) !important;
    font-weight: 700 !important;
}

/* ========================================================================== 
   Notices
   ========================================================================== */
.information,
.infobox {
    background: var(--ex-surface-raised) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}
.noticebox,
.warningbox {
    background: var(--ex-warning-bg) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-warning) !important;
}
.errorbox {
    background: var(--ex-error-bg) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-error) !important;
}
.successbox {
    background: var(--ex-positive-bg) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-positive) !important;
}

/* ========================================================================== 
   eXtreme Home Chat compatibility
   ========================================================================== */
.ext_chat_home,
.ext_chat_home .windowbg,
.ext_chat_panel {
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}
.ext_chat_topline,
#ext_chat_messages,
.ext_chat_row {
    border-color: var(--ex-border) !important;
}
.ext_chat_row:hover {
    background: var(--ex-hover) !important;
}
.ext_chat_avatar {
    background: var(--ex-surface-soft) !important;
    color: var(--ex-text) !important;
}
.ext_chat_time,
.ext_chat_subtitle,
#ext_chat_status,
.ext_chat_loading,
.ext_chat_empty {
    color: var(--ex-muted) !important;
}

/* ========================================================================== 
   Footer
   ========================================================================== */
#footer {
    background: var(--ex-footer) !important;
    color: var(--ex-footer-text) !important;
    border-top: 1px solid var(--ex-border) !important;
    text-shadow: none !important;
}
#footer .inner_wrap,
#footer li,
#footer span,
#footer p,
#footer .smalltext {
    color: var(--ex-footer-text) !important;
    text-shadow: none !important;
}
#footer a,
#footer a:visited {
    color: var(--ex-footer-link) !important;
    text-shadow: none !important;
}
#footer a:hover,
#footer a:focus {
    color: #ffffff !important;
}

/* ========================================================================== 
   Dark-mode catch-all for stock Curve2 pale blocks
   ========================================================================== */
html[data-extreme-mode="dark"] #main_content_section,
html[data-extreme-mode="dark"] .content,
html[data-extreme-mode="dark"] .windowbg,
html[data-extreme-mode="dark"] .windowbg2,
html[data-extreme-mode="dark"] .windowbg3,
html[data-extreme-mode="dark"] .roundframe,
html[data-extreme-mode="dark"] .generic_list_wrapper,
html[data-extreme-mode="dark"] .information,
html[data-extreme-mode="dark"] .settings,
html[data-extreme-mode="dark"] .profile_content,
html[data-extreme-mode="dark"] .popup_window,
html[data-extreme-mode="dark"] .post_wrapper,
html[data-extreme-mode="dark"] .postarea,
html[data-extreme-mode="dark"] .poster {
    background-color: var(--ex-surface) !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}
html[data-extreme-mode="dark"] hr {
    background: var(--ex-border) !important;
    box-shadow: none !important;
}


/* ==========================================================================
   1.0.1 polish: popups, board rows and contrast
   ========================================================================== */

/* Curve2 puts profile/PM/alerts popups inside the dark top strip. The strip's
   white-link rule must not leak into the light popup itself. */
#top_section .top_menu,
#top_section .top_menu li,
#top_section .top_menu div,
#top_section .top_menu span,
#top_section .top_menu p,
#top_section .top_menu time,
#top_section .top_menu strong,
#top_section .top_menu .details,
#top_section .top_menu .popup_heading {
    color: var(--ex-text) !important;
    text-shadow: none !important;
}
#top_section .top_menu a,
#top_section .top_menu a:visited {
    color: var(--ex-link) !important;
    text-shadow: none !important;
}
#top_section .top_menu a:hover,
#top_section .top_menu a:focus {
    color: var(--ex-link-hover) !important;
}
#top_section .top_menu .unread_notify {
    background: transparent !important;
    border-color: var(--ex-border) !important;
}
#top_section .top_menu .unread_notify:hover {
    background: var(--ex-hover) !important;
}
#top_section .top_menu .alert_read {
    opacity: .72 !important;
}

/* Date and secondary header text must remain legible in the light theme. */
#upper_section .user time,
#upper_section .user,
#upper_section .news,
#upper_section .news h2 {
    color: var(--ex-text-soft) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Board index: one coherent row instead of four differently coloured strips. */
.boardindex_table .main_container {
    margin-bottom: 16px !important;
    background: transparent !important;
}
.boardindex_table .up_contain {
    display: grid !important;
    align-items: stretch !important;
    overflow: hidden !important;
    margin: 0 !important;
    min-height: 64px;
    background: var(--ex-row) !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    border: 1px solid var(--ex-border) !important;
    border-top: 0 !important;
}
.boardindex_table .cat_bar + div > .up_contain:first-child,
.boardindex_table [id^="category_"][id$="_boards"] > .up_contain:first-child {
    border-top: 0 !important;
}
.boardindex_table [id^="category_"][id$="_boards"] > .up_contain:nth-child(even) {
    background: var(--ex-row-alt) !important;
}
.boardindex_table .up_contain:hover {
    background: var(--ex-hover) !important;
}
.boardindex_table .up_contain > .board_icon,
.boardindex_table .up_contain > .info,
.boardindex_table .up_contain > .board_stats,
.boardindex_table .up_contain > .lastpost {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    background: transparent !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    border: 0 !important;
}
.boardindex_table .up_contain > .info {
    padding: 10px 14px 10px 4px !important;
}
.boardindex_table .up_contain > .board_stats {
    padding: 10px 12px !important;
    border-left: 1px solid var(--ex-border) !important;
    text-align: center !important;
}
.boardindex_table .up_contain > .lastpost {
    padding: 10px 14px !important;
    border-left: 1px solid var(--ex-border) !important;
}
.boardindex_table .up_contain > .board_stats p,
.boardindex_table .up_contain > .lastpost p {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ex-muted) !important;
}
.boardindex_table .up_contain > .children {
    grid-column: 1 / -1;
    padding: 8px 14px 9px 76px !important;
    background: var(--ex-surface-raised) !important;
    border-top: 1px solid var(--ex-border) !important;
}
.boardindex_table .info .subject,
.boardindex_table .info .subject:visited {
    font-weight: 650 !important;
}
.boardindex_table .board_description {
    margin-top: 1px !important;
    color: var(--ex-muted) !important;
}

/* Remove the old column-specific pale fills with higher specificity. */
.boardindex_table .up_contain > .board_icon,
.boardindex_table .up_contain > .info,
.boardindex_table .up_contain > .board_stats,
.boardindex_table .up_contain > .lastpost,
html[data-extreme-mode="dark"] .boardindex_table .up_contain > .board_icon,
html[data-extreme-mode="dark"] .boardindex_table .up_contain > .info,
html[data-extreme-mode="dark"] .boardindex_table .up_contain > .board_stats,
html[data-extreme-mode="dark"] .boardindex_table .up_contain > .lastpost {
    background-color: transparent !important;
}

/* Chat should be slightly tinted in light mode too, not a large white glare. */
.ext_chat_home,
.ext_chat_home .windowbg,
.ext_chat_panel {
    background: var(--ex-surface) !important;
}
#ext_chat_messages {
    background: var(--ex-surface-raised) !important;
}

/* A few stock separators otherwise remain bright in dark mode. */
html[data-extreme-mode="dark"] .top_menu hr,
html[data-extreme-mode="dark"] .separator,
html[data-extreme-mode="dark"] .post_separator,
html[data-extreme-mode="dark"] .hrcolor {
    border-color: var(--ex-border) !important;
    background: var(--ex-border) !important;
}

@media (max-width: 950px) {
    .boardindex_table .up_contain > .board_stats {
        display: none !important;
    }
}

@media (max-width: 720px) {
    .boardindex_table .up_contain {
        min-height: 58px;
    }
    .boardindex_table .up_contain > .lastpost {
        display: none !important;
    }
    .boardindex_table .up_contain > .info {
        padding-right: 10px !important;
    }
}

@media (max-width: 720px) {
    .extreme_theme_toggle {
        margin-top: 5px !important;
    }

    #header {
        min-height: 54px;
    }
}


/* ==========================================================================
   1.0.2 polish: calmer links, aligned content, chat controls, pagination
   ========================================================================== */

/* Main content uses the same left/right edges as the header shell. Curve2
   normally adds an extra inset here, which made the chat and board list look
   narrower than the block above. */
#main_content_section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#main_content_section > .main_container,
#main_content_section > #boardindex_table,
#main_content_section > .mark_read,
#main_content_section > #info_center,
#main_content_section > .roundframe,
#main_content_section > .information,
#main_content_section > .navigate_section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

/* Ordinary links are deliberately desaturated. They stay recognizable as
   links, but no longer look like browser-default electric blue. */
a,
a:visited {
    color: var(--ex-link) !important;
    text-decoration-color: rgba(82, 105, 121, .42);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
a:hover,
a:focus {
    color: var(--ex-link-hover) !important;
}
html[data-extreme-mode="dark"] a,
html[data-extreme-mode="dark"] a:visited {
    text-decoration-color: rgba(154, 178, 193, .42);
}

/* Text links inside content get a subtle underline; controls, headings and
   board titles remain visually clean. */
.navigate_section a,
.lastpost a,
.topic_table td a,
.table_grid td a,
.table_list td a,
.windowbg p a,
.windowbg .smalltext a,
.roundframe p a,
.information a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.cat_bar a,
.title_bar a,
.dropmenu a,
.top_menu a,
.button,
a.button,
.nav_page,
.current_page,
.boardindex_table .subject,
.boardindex_table .subject:visited,
.forumtitle a,
#top_section a,
#upper_section a {
    text-decoration: none !important;
}

/* Keep the eXtreme orange only where it is useful as a section accent. */
.boardindex_table .info .subject,
.boardindex_table .info .subject:visited {
    color: #946033 !important;
}
html[data-extreme-mode="dark"] .boardindex_table .info .subject,
html[data-extreme-mode="dark"] .boardindex_table .info .subject:visited {
    color: #d4aa7a !important;
}

/* Shift board icons inward so they no longer cling to the left border. */
.boardindex_table .up_contain {
    grid-template-columns: 88px minmax(260px, 1fr) 124px minmax(245px, 31%) !important;
}
.boardindex_table .up_contain > .board_icon {
    padding: 8px 0 !important;
    align-items: center !important;
    justify-content: center !important;
}
.boardindex_table .up_contain > .info {
    padding-left: 2px !important;
}
.boardindex_table .up_contain > .children {
    padding-left: 92px !important;
}

/* Home Chat: exact geometry and a stable clear button. This is theme-only
   styling; the chat plug-in itself is not modified. */
.ext_chat_home {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
}
.ext_chat_home .ext_chat_panel {
    padding: 0 10px 10px !important;
}
.ext_chat_topline {
    min-height: 38px !important;
    padding: 6px 2px 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}
.ext_chat_subtitle {
    min-width: 0;
    line-height: 1.35 !important;
}
.ext_chat_clear {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    height: 26px !important;
    line-height: 1 !important;
    padding: 0 10px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
#ext_chat_form {
    align-items: center !important;
}
#ext_chat_send {
    align-self: center !important;
}

/* Pagination: replace the orange [1]-style marker with a small neutral pill. */
.nav_page,
.current_page,
.expand_pages {
    font-weight: 600 !important;
    text-align: center !important;
}
.nav_page,
.expand_pages {
    background: var(--ex-surface-raised) !important;
    color: var(--ex-link) !important;
    border: 1px solid var(--ex-border) !important;
}
.nav_page:hover,
.nav_page:focus {
    background: var(--ex-hover) !important;
    color: var(--ex-link-hover) !important;
    border-color: var(--ex-border-strong) !important;
}
.current_page,
.current_page:hover,
.current_page:focus {
    box-shadow: none !important;
}
html[data-extreme-mode="dark"] .current_page,
html[data-extreme-mode="dark"] .current_page:hover,
html[data-extreme-mode="dark"] .current_page:focus {
    background: #77858f !important;
    color: #101417 !important;
    border-color: #77858f !important;
}

/* Admin is a direct navigation item in this theme, so its old submenu must
   never flash on hover before the JavaScript cleanup runs. */
#button_admin > ul,
#button_admin:hover > ul {
    display: none !important;
}
#button_admin > a::after {
    content: none !important;
}

@media (max-width: 950px) {
    .boardindex_table .up_contain {
        grid-template-columns: 76px minmax(220px, 1fr) minmax(220px, 34%) !important;
    }
    .boardindex_table .up_contain > .children {
        padding-left: 80px !important;
    }
}

@media (max-width: 720px) {
    /* Restore a deliberate mobile gutter. Curve2 expands #wrapper to 100% on
       phones; in 1.0.2 that made cards touch the viewport edges. Keep the
       top strip full-bleed, but give the entire forum shell 12px of air on
       both sides so chat, boards, breadcrumbs and admin cards line up. */
    #wrapper {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
    #main_content_section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .boardindex_table .up_contain {
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }
    .boardindex_table .up_contain > .children {
        padding-left: 68px !important;
    }
    .ext_chat_topline {
        gap: 10px !important;
    }
    .ext_chat_clear {
        min-height: 28px !important;
        height: 28px !important;
    }
}


/* Admin dashboard cleanup --------------------------------------------------
   SMF hardcodes the welcome description, Simple Machines live news and the
   support/version card above the actual administration sections. On the
   dashboard only, remove those low-value blocks. Keep #update_section visible
   so important SMF update/security notifications are never hidden. */
html.extreme-admin-home #admin_content > .cat_bar:first-of-type + p.information {
    display: none !important;
}
html.extreme-admin-home #admin_main_section {
    display: none !important;
}
html.extreme-admin-home #update_section:not(:empty) {
    display: block !important;
    margin-bottom: 12px !important;
}


/* ========================================================================== 
   1.0.5 polish: dark breadcrumbs + classic pagination
   ========================================================================== */

/* The breadcrumb list has its own Curve2 white gradient. The container was
   already themed, but the inner <ul> stayed bright in dark mode. */
.navigate_section,
.navigate_section ul,
.navigate_section ul li {
    background: var(--ex-surface) !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}
html[data-extreme-mode="dark"] .navigate_section,
html[data-extreme-mode="dark"] .navigate_section ul,
html[data-extreme-mode="dark"] .navigate_section ul li {
    background-color: var(--ex-surface) !important;
    background-image: none !important;
}

/* Classic forum pagination: plain numbers, no badges/pills and no Curve2
   square brackets around the active page. */
.pages {
    margin-left: 6px !important;
    color: var(--ex-muted) !important;
}
.nav_page,
.current_page,
.expand_pages {
    display: inline !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
    padding: 0 3px !important;
    margin: 0 1px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    text-shadow: none !important;
}
.nav_page,
.nav_page:visited,
.expand_pages {
    color: var(--ex-link) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}
.nav_page:hover,
.nav_page:focus,
.expand_pages:hover {
    background: transparent !important;
    color: var(--ex-link-hover) !important;
    text-decoration: underline !important;
}
.current_page,
.current_page:hover,
.current_page:focus {
    background: transparent !important;
    color: var(--ex-text) !important;
    border: 0 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.current_page::before,
.current_page::after {
    content: none !important;
    display: none !important;
}

/* ========================================================================== 
   1.0.6 polish: breadcrumb typography
   ========================================================================== */

/* Curve2 and browser/mobile inheritance can make the linktree look embossed
   in dark mode. Keep breadcrumbs deliberately plain and quiet. */
.navigate_section,
.navigate_section ul,
.navigate_section li,
.navigate_section a,
.navigate_section a:visited,
.navigate_section span {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-stretch: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 transparent !important;
    filter: none !important;
}
.navigate_section li {
    font-weight: 400 !important;
    color: var(--ex-muted) !important;
}
.navigate_section a,
.navigate_section a:visited {
    color: var(--ex-text-soft) !important;
    text-shadow: none !important;
}
.navigate_section a:hover,
.navigate_section a:focus {
    color: var(--ex-link-hover) !important;
    text-decoration: none !important;
}
.navigate_section li.last,
.navigate_section li.last a,
.navigate_section li.last a:visited {
    color: var(--ex-text) !important;
}

/* ========================================================================== 
   1.0.7 polish: one clean breadcrumb outline
   ========================================================================== */

/* Curve2 already draws the actual breadcrumb box on .navigate_section ul.
   Earlier eXtreme versions also bordered the outer .navigate_section wrapper,
   producing two nested outlines on phones. Keep only the inner box. */
.navigate_section {
    border: 0 !important;
    border-radius: 0 !important;
    background-image: none !important;
}
.navigate_section ul {
    border: 1px solid var(--ex-border) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    background: var(--ex-surface) !important;
    background-image: none !important;
}
html[data-extreme-mode="dark"] .navigate_section {
    background: transparent !important;
}


/* ========================================================================== 
   1.0.8 polish: structured information center
   ========================================================================== */

/* The SMF information center is useful, but Curve2 renders all of its
   sections as one continuous block. Give every logical section its own
   visual card while keeping the native markup and collapse behaviour. */
#info_center.roundframe {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

#info_center > .title_bar {
    margin: 0 0 12px !important;
    border-radius: 8px !important;
    box-shadow: var(--ex-shadow-small) !important;
}

#info_center > .title_bar .titlebg {
    padding: 10px 14px !important;
    line-height: 1.35 !important;
}

#upshrink_stats {
    background: transparent !important;
    padding: 0 !important;
}

/* Every SMF info-center subsection begins with .sub_bar. Treat it as a card
   header instead of a loose horizontal rule. */
#upshrink_stats > .sub_bar {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    background: var(--ex-surface-raised) !important;
    background-image: none !important;
    border: 1px solid var(--ex-border) !important;
    border-bottom: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: none !important;
}

#upshrink_stats > .sub_bar:first-child {
    margin-top: 0 !important;
}

#upshrink_stats > .sub_bar .subbg {
    margin: 0 !important;
    padding: 9px 12px !important;
    color: var(--ex-text) !important;
    font-size: 1.02em !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
}

#upshrink_stats > .sub_bar .subbg a,
#upshrink_stats > .sub_bar .subbg a:visited {
    color: var(--ex-text) !important;
    text-decoration: none !important;
}

/* Native bodies for Recent Posts, Statistics and Who's Online. */
#recent_posts_content,
#upshrink_stats > .sub_bar + p.inline {
    display: block !important;
    margin: 0 0 12px !important;
    padding: 11px 12px !important;
    background: var(--ex-surface) !important;
    color: var(--ex-text-soft) !important;
    border: 1px solid var(--ex-border) !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: var(--ex-shadow-small) !important;
    line-height: 1.55 !important;
}

/* When there is another section immediately after a body, spacing is owned by
   the next header, so the blocks remain visually regular. */
#recent_posts_content + .sub_bar,
#upshrink_stats > p.inline + .sub_bar {
    margin-top: 12px !important;
}

/* Recent-post table: quiet separators and readable hierarchy instead of the
   old dense spreadsheet look. */
#ic_recentposts {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    background: transparent !important;
}

#ic_recentposts tr,
#ic_recentposts tr.windowbg,
#ic_recentposts th,
#ic_recentposts td {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

#ic_recentposts th,
#ic_recentposts td {
    padding: 7px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ex-border) !important;
    color: var(--ex-text-soft) !important;
    vertical-align: top !important;
    text-align: left !important;
}

#ic_recentposts th {
    color: var(--ex-muted) !important;
    font-size: .9em !important;
    font-weight: 700 !important;
}

#ic_recentposts tr:last-child td {
    border-bottom: 0 !important;
}

#ic_recentposts .recentpost { width: 42% !important; }
#ic_recentposts .recentposter { width: 18% !important; }
#ic_recentposts .recentboard { width: 22% !important; }
#ic_recentposts .recenttime { width: 18% !important; }

#ic_recentposts td.recentpost strong,
#ic_recentposts td.recentpost strong a {
    color: var(--ex-text) !important;
    font-weight: 600 !important;
}

#info_center p.inline strong {
    color: var(--ex-text) !important;
}

#info_center p.inline a,
#recent_posts_content a {
    text-decoration-color: color-mix(in srgb, var(--ex-link) 42%, transparent) !important;
}

html[data-extreme-mode="dark"] #info_center > .title_bar,
html[data-extreme-mode="dark"] #upshrink_stats > .sub_bar,
html[data-extreme-mode="dark"] #recent_posts_content,
html[data-extreme-mode="dark"] #upshrink_stats > .sub_bar + p.inline {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important;
}

@media (max-width: 720px) {
    #info_center > .title_bar .titlebg {
        padding: 10px 12px !important;
        font-size: 1em !important;
    }

    #upshrink_stats > .sub_bar .subbg {
        padding: 9px 10px !important;
    }

    #recent_posts_content,
    #upshrink_stats > .sub_bar + p.inline {
        padding: 9px 10px !important;
    }

    /* On phones keep the useful two-column recent-post view. Board and time
       remain available when opening the post and no longer crush the subject. */
    #ic_recentposts .recentboard,
    #ic_recentposts .recenttime {
        display: none !important;
    }
    #ic_recentposts .recentpost {
        width: 68% !important;
    }
    #ic_recentposts .recentposter {
        width: 32% !important;
    }
    #ic_recentposts th,
    #ic_recentposts td {
        padding: 7px 4px !important;
        overflow-wrap: anywhere !important;
    }
}

/* ========================================================================== 
   1.0.12 polish: login / AJAX overlay in dark mode
   ========================================================================== */
/* reqOverlayDiv() wraps the AJAX login form in .popup_content. Curve2 gives
   that wrapper its own pale background, so styling .popup_window alone is not
   enough. Keep every layer of the login modal on the same graphite palette. */
html[data-extreme-mode="dark"] .popup_container .popup_window,
html[data-extreme-mode="dark"] .popup_container .popup_content,
html[data-extreme-mode="dark"] .popup_window .popup_content,
html[data-extreme-mode="dark"] .popup_window .login,
html[data-extreme-mode="dark"] .popup_window .login .roundframe,
html[data-extreme-mode="dark"] .popup_content .login,
html[data-extreme-mode="dark"] .popup_content .login .roundframe {
    background: var(--ex-surface) !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
    box-shadow: none !important;
}

html[data-extreme-mode="dark"] .popup_window .popup_heading,
html[data-extreme-mode="dark"] .popup_container .popup_heading {
    background: var(--ex-head) !important;
    background-image: none !important;
    color: var(--ex-head-text) !important;
    border-color: var(--ex-border) !important;
    text-shadow: none !important;
}

html[data-extreme-mode="dark"] .popup_window .login dt,
html[data-extreme-mode="dark"] .popup_window .login dd,
html[data-extreme-mode="dark"] .popup_window .login p,
html[data-extreme-mode="dark"] .popup_window .login label,
html[data-extreme-mode="dark"] .popup_window .login strong,
html[data-extreme-mode="dark"] .popup_content .login dt,
html[data-extreme-mode="dark"] .popup_content .login dd,
html[data-extreme-mode="dark"] .popup_content .login p,
html[data-extreme-mode="dark"] .popup_content .login label,
html[data-extreme-mode="dark"] .popup_content .login strong {
    color: var(--ex-text) !important;
    text-shadow: none !important;
}

html[data-extreme-mode="dark"] .popup_window .login .smalltext,
html[data-extreme-mode="dark"] .popup_content .login .smalltext {
    color: var(--ex-muted) !important;
}

html[data-extreme-mode="dark"] .popup_window .login input,
html[data-extreme-mode="dark"] .popup_window .login select,
html[data-extreme-mode="dark"] .popup_window .login textarea,
html[data-extreme-mode="dark"] .popup_content .login input,
html[data-extreme-mode="dark"] .popup_content .login select,
html[data-extreme-mode="dark"] .popup_content .login textarea {
    background: var(--ex-input) !important;
    background-image: none !important;
    color: var(--ex-input-text) !important;
    border-color: var(--ex-border-strong) !important;
    box-shadow: none !important;
}

html[data-extreme-mode="dark"] .popup_window .login input:focus,
html[data-extreme-mode="dark"] .popup_window .login select:focus,
html[data-extreme-mode="dark"] .popup_content .login input:focus,
html[data-extreme-mode="dark"] .popup_content .login select:focus {
    border-color: var(--ex-accent) !important;
    box-shadow: 0 0 0 3px var(--ex-focus) !important;
}

html[data-extreme-mode="dark"] .popup_window .login hr,
html[data-extreme-mode="dark"] .popup_content .login hr {
    background: var(--ex-border) !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-extreme-mode="dark"] .popup_window .login a,
html[data-extreme-mode="dark"] .popup_window .login a:visited,
html[data-extreme-mode="dark"] .popup_content .login a,
html[data-extreme-mode="dark"] .popup_content .login a:visited {
    color: var(--ex-link) !important;
}
html[data-extreme-mode="dark"] .popup_window .login a:hover,
html[data-extreme-mode="dark"] .popup_content .login a:hover {
    color: var(--ex-link-hover) !important;
}

/* Social-login panel belongs visually to the login form, not to a separate
   bright card. Discord and Steam retain recognisable provider colours. */
html[data-extreme-mode="dark"] .popup_window .ext-social-login,
html[data-extreme-mode="dark"] .popup_content .ext-social-login {
    background: var(--ex-surface-raised) !important;
    color: var(--ex-text) !important;
    border: 1px solid var(--ex-border) !important;
    box-shadow: var(--ex-shadow-small) !important;
}
html[data-extreme-mode="dark"] .ext-social-login a[href*="provider=discord"] {
    background: #5865f2 !important;
    color: #fff !important;
    border-color: #6975f5 !important;
}
html[data-extreme-mode="dark"] .ext-social-login a[href*="provider=steam"] {
    background: #171a21 !important;
    color: #fff !important;
    border-color: #3b4654 !important;
}

/* The submit button should read as the primary action. */
html[data-extreme-mode="dark"] .popup_window .login input[type="submit"],
html[data-extreme-mode="dark"] .popup_content .login input[type="submit"] {
    background: var(--ex-accent) !important;
    color: var(--ex-accent-text) !important;
    border-color: var(--ex-accent-border) !important;
    font-weight: 700 !important;
}


/* ========================================================================== 
   1.0.13: post action buttons — neutralise Curve's LI gradient completely
   ========================================================================== */
/* Curve paints the <li> behind every quick action. If only the <a> is themed,
   the old light gradient remains visible as white/shiny corner fragments.
   Reset the direct item itself, including hover/focus states. */
#forumposts .quickbuttons > li,
#forumposts .quickbuttons > li:hover,
#forumposts .quickbuttons > li:focus-within {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Use one consistent geometry for all direct post actions. Curve normally
   gives first/last/only children special corner radii, which is undesirable
   once the actions are separate modern controls. */
#forumposts .quickbuttons > li:first-child > a,
#forumposts .quickbuttons > li:last-child > a,
#forumposts .quickbuttons > li:only-child > a,
#forumposts .quickbuttons > li > a,
#forumposts .quickbuttons > li > span {
    background: var(--ex-surface-raised) !important;
    background-image: none !important;
    color: var(--ex-text-soft) !important;
    border: 1px solid var(--ex-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    overflow: hidden !important;
}
#forumposts .quickbuttons > li:hover > a,
#forumposts .quickbuttons > li > a:hover,
#forumposts .quickbuttons > li > a:focus {
    background: var(--ex-hover) !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border-strong) !important;
    box-shadow: none !important;
}


/* ========================================================================== 
   1.0.15: restrained light action palette
   ========================================================================== */
/* Primary actions use their own control palette. In light mode this is warm stone/sand,
   deliberately close to a neutral control; on graphite the existing caramel remains. */
.button.active,
.buttonlist .active,
input.button.active,
button.button.active {
    background: var(--ex-action-bg) !important;
    background-image: none !important;
    color: var(--ex-action-text) !important;
    border-color: var(--ex-action-border) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .10) !important;
    text-shadow: none !important;
}
.button.active:hover,
.button.active:focus,
.buttonlist .active:hover,
.buttonlist .active:focus,
input.button.active:hover,
button.button.active:hover {
    background: var(--ex-action-hover) !important;
    color: var(--ex-action-text) !important;
    border-color: var(--ex-action-border) !important;
}

/* Keep selected navigation quieter than a primary CTA. */
.dropmenu li a.active,
.dropmenu li a.active:hover,
.dropmenu li a.active:focus {
    background: var(--ex-accent-soft) !important;
    background-image: none !important;
    color: var(--ex-accent-ink) !important;
    border-color: var(--ex-accent-border) !important;
}

/* Warm hover ring on neutral controls without turning every button orange. */
.button:not(.active):hover,
.button:not(.active):focus,
.quickbuttons > li > a:hover,
.quickbuttons > li > a:focus {
    border-color: color-mix(in srgb, var(--ex-accent-border) 68%, var(--ex-border)) !important;
}


/* Light theme: primary CTAs should read as controls, not warning/orange badges. */
html:not([data-extreme-mode="dark"]) .button.active,
html[data-extreme-mode="light"] .button.active,
html:not([data-extreme-mode="dark"]) .buttonlist .active,
html[data-extreme-mode="light"] .buttonlist .active {
    box-shadow: 0 1px 2px rgba(48, 42, 37, .07) !important;
    letter-spacing: 0 !important;
}
html:not([data-extreme-mode="dark"]) .button.active:hover,
html[data-extreme-mode="light"] .button.active:hover,
html:not([data-extreme-mode="dark"]) .button.active:focus,
html[data-extreme-mode="light"] .button.active:focus {
    box-shadow: 0 2px 5px rgba(48, 42, 37, .10) !important;
}


/* ========================================================================== 
   1.0.16: clearer post anatomy — profile rail + message canvas
   ========================================================================== */
/* Desktop posts should read as two deliberate zones. The author rail is a
   slightly raised panel, while the actual message sits on a quieter canvas.
   This keeps identity/meta separate from content without turning every post
   into a stack of nested boxes. */
@media (min-width: 721px) {
    #forumposts .windowbg,
    #forumposts .windowbg2,
    #forumposts .windowbg3 {
        overflow: hidden !important;
        background: var(--ex-post-bg) !important;
        background-image: none !important;
        border: 1px solid var(--ex-border) !important;
        border-radius: 9px !important;
        box-shadow: var(--ex-shadow-small) !important;
    }

    #forumposts .post_wrapper {
        background: var(--ex-post-bg) !important;
        background-image: none !important;
    }

    #forumposts .poster {
        background: var(--ex-poster-bg) !important;
        background-image: none !important;
        border: 0 !important;
        border-right: 1px solid var(--ex-post-separator) !important;
        box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ex-border) 30%, transparent) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #forumposts .postarea {
        background: var(--ex-post-bg) !important;
        background-image: none !important;
        border: 0 !important;
    }

    /* Replace Curve's hard bright rule below the date with a quiet meta strip. */
    #forumposts .postarea .keyinfo {
        margin: 0 !important;
        padding: 9px 14px 8px !important;
        background: var(--ex-post-meta-bg) !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ex-post-separator) !important;
        box-shadow: none !important;
    }

    #forumposts .postarea .postinfo {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: var(--ex-muted) !important;
    }

    #forumposts .postarea .post {
        background: var(--ex-post-bg) !important;
        background-image: none !important;
        border: 0 !important;
    }

    #forumposts .postarea .post .inner {
        padding: 12px 16px 16px !important;
        color: var(--ex-text) !important;
    }

    #forumposts .under_message {
        padding-left: 14px !important;
        padding-right: 14px !important;
        background: var(--ex-post-bg) !important;
    }

    /* Moderator/signature row should not re-introduce the old single-colour
       slab or bright separators underneath the two-column post. */
    #forumposts .moderatorbar {
        background: var(--ex-post-bg) !important;
        background-image: none !important;
        border-color: var(--ex-post-separator) !important;
    }
    #forumposts .signature {
        border-color: var(--ex-post-separator) !important;
    }
}

/* Curve's default separator is intentionally high-contrast. Across both
   desktop and mobile use the same muted divider as the post anatomy. */
#forumposts .post_separator,
#forumposts .postarea .keyinfo,
#forumposts .postinfo,
#forumposts .signature {
    border-color: var(--ex-post-separator) !important;
}
html[data-extreme-mode="dark"] #forumposts hr,
html[data-extreme-mode="dark"] #forumposts .post_separator,
html[data-extreme-mode="dark"] #forumposts .hrcolor {
    background: var(--ex-post-separator) !important;
    border-color: var(--ex-post-separator) !important;
    box-shadow: none !important;
}

/* Mobile already stacks author above message; use the same two-tone hierarchy
   so the separation remains obvious without adding another nested border. */
@media (max-width: 720px) {
    html.extreme-page-topic #forumposts form > .windowbg,
    html.extreme-page-topic #forumposts form > .windowbg2,
    html.extreme-page-topic #forumposts form > .windowbg3 {
        background: var(--ex-post-bg) !important;
    }
    html.extreme-page-topic #forumposts .poster {
        background: var(--ex-poster-bg) !important;
        border-bottom-color: var(--ex-post-separator) !important;
    }
    html.extreme-page-topic #forumposts .postarea,
    html.extreme-page-topic #forumposts .post,
    html.extreme-page-topic #forumposts .under_message,
    html.extreme-page-topic #forumposts .moderatorbar {
        background: var(--ex-post-bg) !important;
    }
    html.extreme-page-topic #forumposts .keyinfo {
        background: var(--ex-post-meta-bg) !important;
        padding: 8px 14px 0 !important;
    }
    html.extreme-page-topic #forumposts .postinfo {
        border-bottom-color: var(--ex-post-separator) !important;
    }
}

/* ========================================================================== 
   1.0.17: discussion list — clear topic / author / activity hierarchy
   ========================================================================== */
/* On desktop the board index should read like a discussion list, not like a
   compressed data table. Topic title is the primary action, the starter is
   secondary, and statistics / last activity occupy their own quiet columns. */
@media (min-width: 721px) {
    html.extreme-page-board #messageindex {
        overflow: hidden !important;
        background: transparent !important;
        border: 1px solid var(--ex-border) !important;
        border-radius: 9px !important;
        box-shadow: var(--ex-shadow-small) !important;
    }

    html.extreme-page-board #topic_header {
        display: grid !important;
        grid-template-columns: 58px minmax(300px, 1fr) 150px 250px !important;
        align-items: center !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--ex-head) !important;
        background-image: none !important;
        color: var(--ex-head-text) !important;
        border: 0 !important;
        border-bottom: 2px solid var(--ex-accent-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    html.extreme-page-board #topic_header > .board_icon,
    html.extreme-page-board #topic_header > .info,
    html.extreme-page-board #topic_header > .board_stats,
    html.extreme-page-board #topic_header > .lastpost {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--ex-head-text) !important;
        font-size: .75rem !important;
        line-height: 1.2 !important;
        font-weight: 650 !important;
    }
    html.extreme-page-board #topic_header > .info {
        padding: 0 16px !important;
        text-align: left !important;
    }
    html.extreme-page-board #topic_header > .board_stats {
        padding: 0 12px !important;
        text-align: center !important;
        border-left: 1px solid rgba(255,255,255,.08) !important;
    }
    html.extreme-page-board #topic_header > .lastpost {
        padding: 0 16px !important;
        text-align: left !important;
        border-left: 1px solid rgba(255,255,255,.08) !important;
    }

    html.extreme-page-board #topic_container {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--ex-surface) !important;
    }
    html.extreme-page-board #topic_container > div {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 58px minmax(300px, 1fr) 150px 250px !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 76px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: var(--ex-row) !important;
        background-image: none !important;
        color: var(--ex-text) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ex-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: background-color .14s ease !important;
    }
    html.extreme-page-board #topic_container > div:nth-child(even) {
        background: var(--ex-row-alt) !important;
    }
    html.extreme-page-board #topic_container > div:last-child {
        border-bottom: 0 !important;
    }
    html.extreme-page-board #topic_container > div:hover,
    html.extreme-page-board #topic_container > div:focus-within {
        background: var(--ex-hover) !important;
    }

    html.extreme-page-board #topic_container .board_icon {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        min-height: 76px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: color-mix(in srgb, var(--ex-surface-soft) 72%, transparent) !important;
        border: 0 !important;
        border-right: 1px solid var(--ex-border) !important;
        border-radius: 0 !important;
    }
    html.extreme-page-board #topic_container .board_icon img {
        width: auto !important;
        max-width: 30px !important;
        height: auto !important;
        max-height: 30px !important;
        margin: 0 !important;
        opacity: .82 !important;
    }
    html.extreme-page-board #topic_container .board_icon .main_icons.profile_sm {
        position: absolute !important;
        right: 3px !important;
        bottom: 8px !important;
        transform: scale(.72) !important;
        transform-origin: center !important;
    }

    html.extreme-page-board #topic_container .info,
    html.extreme-page-board #topic_container .info.info_block {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 11px 16px !important;
        background: transparent !important;
        border: 0 !important;
        text-align: left !important;
    }
    html.extreme-page-board #topic_container .info > div {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 28px !important;
    }
    html.extreme-page-board #topic_container .message_index_title {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1rem !important;
        line-height: 1.3 !important;
        font-weight: 650 !important;
        letter-spacing: -.01em !important;
    }
    html.extreme-page-board #topic_container .message_index_title a,
    html.extreme-page-board #topic_container .message_index_title a:visited {
        color: var(--ex-text) !important;
        text-decoration: none !important;
    }
    html.extreme-page-board #topic_container .message_index_title a:hover,
    html.extreme-page-board #topic_container .message_index_title a:focus {
        color: var(--ex-accent-ink) !important;
        text-decoration: underline !important;
        text-decoration-thickness: 1px !important;
        text-underline-offset: 3px !important;
    }
    html.extreme-page-board #topic_container .info > div > p.floatleft {
        float: none !important;
        display: block !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        color: var(--ex-muted) !important;
        font-size: .76rem !important;
        line-height: 1.35 !important;
    }
    html.extreme-page-board #topic_container .info > div > p.floatleft a,
    html.extreme-page-board #topic_container .info > div > p.floatleft a:visited {
        color: var(--ex-text-soft) !important;
        font-weight: 550 !important;
        text-decoration: none !important;
    }
    html.extreme-page-board #topic_container .info > div > p.floatleft a:hover {
        color: var(--ex-link-hover) !important;
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
    }
    html.extreme-page-board #topic_container .topic_pages {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 5px 0 0 0 !important;
        color: var(--ex-muted) !important;
        font-size: .72rem !important;
    }
    html.extreme-page-board #topic_container .topic_pages a,
    html.extreme-page-board #topic_container .topic_pages a:visited {
        padding: 0 1px !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--ex-link) !important;
        text-decoration: none !important;
    }

    html.extreme-page-board #topic_container .board_stats {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        background: color-mix(in srgb, var(--ex-surface-raised) 50%, transparent) !important;
        border: 0 !important;
        border-left: 1px solid var(--ex-border) !important;
        text-align: center !important;
    }
    html.extreme-page-board #topic_container .board_stats p {
        margin: 0 !important;
        color: var(--ex-muted) !important;
        font-size: .75rem !important;
        line-height: 1.55 !important;
        text-align: center !important;
    }

    html.extreme-page-board #topic_container .lastpost {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 10px 16px !important;
        background: color-mix(in srgb, var(--ex-surface-raised) 28%, transparent) !important;
        border: 0 !important;
        border-left: 1px solid var(--ex-border) !important;
        text-align: left !important;
    }
    html.extreme-page-board #topic_container .lastpost p {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ex-muted) !important;
        font-size: .76rem !important;
        line-height: 1.45 !important;
        text-align: left !important;
    }
    html.extreme-page-board #topic_container .lastpost a,
    html.extreme-page-board #topic_container .lastpost a:visited {
        color: var(--ex-text-soft) !important;
        text-decoration: none !important;
    }
    html.extreme-page-board #topic_container .lastpost a:first-child {
        color: var(--ex-text) !important;
        font-weight: 650 !important;
    }
    html.extreme-page-board #topic_container .lastpost a:last-child {
        color: var(--ex-link) !important;
        font-weight: 550 !important;
    }
    html.extreme-page-board #topic_container .lastpost a:hover,
    html.extreme-page-board #topic_container .lastpost a:focus {
        color: var(--ex-link-hover) !important;
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
    }

    html.extreme-page-board #topic_container .icons.floatright {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        float: none !important;
        display: inline-flex !important;
        gap: 3px !important;
        margin: 0 !important;
        opacity: .78 !important;
    }

    /* Quick moderation remains functional but visually subordinate. */
    html.extreme-page-board #topic_container .moderation {
        align-self: center !important;
    }
}

/* 1.0.17 quick-moderation safety: keep optional controls out of the grid flow. */
@media (min-width: 721px) {
    html.extreme-page-board #topic_container .board_icon {
        position: relative !important;
    }
    html.extreme-page-board #topic_container .lastpost {
        padding-right: 42px !important;
    }
    html.extreme-page-board #topic_container .moderation {
        position: absolute !important;
        top: 50% !important;
        right: 7px !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        min-width: 28px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        z-index: 2 !important;
    }
}

/* ========================================================================== 
   1.0.18 header cleanup: modern search/language/auth strip
   ========================================================================== */
#top_section .welcome {
    display: none !important;
}


#top_section a.extreme-auth-link,
#top_section a.extreme-auth-link:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--ex-border-strong) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
    color: var(--ex-head-text) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
#top_section a.extreme-auth-link:hover,
#top_section a.extreme-auth-link:focus {
    background: rgba(255,255,255,.08) !important;
    border-color: var(--ex-accent-border) !important;
    color: var(--ex-head-text) !important;
}
#top_section a.extreme-auth-register,
#top_section a.extreme-auth-register:visited {
    background: var(--ex-action-bg) !important;
    border-color: var(--ex-action-border) !important;
    color: var(--ex-action-text) !important;
}
#top_section a.extreme-auth-register:hover,
#top_section a.extreme-auth-register:focus {
    background: var(--ex-action-hover) !important;
    color: var(--ex-action-text) !important;
}
#top_section .extreme-search-form input[type="search"],
#top_section .extreme-search-form input[name="search"],
#top_section .extreme-search-form input[type="text"] {
    background: transparent !important;
    color: var(--ex-input-text) !important;
    box-shadow: none !important;
}
#top_section .extreme-search-form input[type="search"]::placeholder,
#top_section .extreme-search-form input[name="search"]::placeholder,
#top_section .extreme-search-form input[type="text"]::placeholder {
    color: var(--ex-muted) !important;
}
#top_section .extreme-search-form select,
#top_section .extreme-language-form select {
    height: 32px !important;
    padding: 0 34px 0 12px !important;
    border: 1px solid var(--ex-border-strong) !important;
    border-radius: 999px !important;
    background: var(--ex-input) !important;
    color: var(--ex-input-text) !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
#top_section .extreme-search-form button,
#top_section .extreme-search-form input[type="submit"],
#top_section .extreme-search-form .button_submit {
    font-weight: 600 !important;
    text-shadow: none !important;
}
#top_section .extreme-search-form button:hover,
#top_section .extreme-search-form input[type="submit"]:hover,
#top_section .extreme-search-form .button_submit:hover,
#top_section .extreme-search-form button:focus,
#top_section .extreme-search-form input[type="submit"]:focus,
#top_section .extreme-search-form .button_submit:focus {
    background: var(--ex-action-hover) !important;
    color: var(--ex-action-text) !important;
}

#top_section .extreme-language-form {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#top_section .extreme-search-form input:focus,
#top_section .extreme-search-form select:focus,
#top_section .extreme-language-form select:focus,
#top_section a.extreme-auth-link:focus {
    outline: none !important;
    border-color: var(--ex-accent-border) !important;
    box-shadow: 0 0 0 3px var(--ex-focus) !important;
}

/* Shorter, calmer main navigation labels in the header. */
#main_menu > li > a,
#main_menu .dropmenu > li > a {
    letter-spacing: 0 !important;
}

/* Breadcrumbs: present the home node as a neutral hierarchy label. */
.navigate_section a,
.navigate_section a:visited {
    text-decoration: none !important;
}

@media (max-width: 900px) {
    #top_section .extreme-search-form input[type="search"],
    #top_section .extreme-search-form input[name="search"],
    #top_section .extreme-search-form input[type="text"] {
        width: 118px !important;
        min-width: 118px !important;
    }
}

@media (max-width: 720px) {
    #top_section .extreme-search-form,
    #top_section .extreme-language-form,
    #top_section a.extreme-auth-link {
        margin-top: 6px !important;
    }

    #top_section .extreme-search-form {
        margin-left: 0 !important;
    }
    #top_section .extreme-search-form select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* ========================================================================== 
   1.0.19 header rescue: compact tools, cleaner crumbs, fix top strip layout
   ========================================================================== */

/* Restore a stable layout in the top strip; the old flex override was causing
   the user bar and dropdown region to stretch and shift. */
#top_section .inner_wrap::after {
    content: '';
    display: block;
    clear: both;
}
#top_info {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
}
#top_info > li {
    float: none !important;
    margin: 0 !important;
}
#top_info > li > a,
#top_info > li > span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
}

/* Guest auth items must stay content-sized. Curve2 can let the login item
   consume the remaining flex space, which makes "Login" look like a full-width bar. */
#top_section #top_info > li.button_login,
#top_section #top_info > li.button_signup {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}
#top_section #top_info > li.button_login > a.extreme-auth-link,
#top_section #top_info > li.button_signup > a.extreme-auth-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Auth buttons: unify the pair, but keep them visually quiet. */
#top_section a.extreme-auth-link,
#top_section a.extreme-auth-link:visited {
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    margin: 3px 0 0 0 !important;
    font-size: 13px !important;
}

/* Search: compact, modern, with an embedded magnifier and placeholder. */
#top_section .extreme-search-form {
    gap: 8px !important;
    max-width: none !important;
}
#top_section .extreme-search-form input[type="search"],
#top_section .extreme-search-form input[name="search"],
#top_section .extreme-search-form input[type="text"] {
    width: 160px !important;
    min-width: 160px !important;
    height: 36px !important;
    padding: 0 14px 0 36px !important;
    border: 1px solid var(--ex-border-strong) !important;
    border-radius: 999px !important;
    background-color: var(--ex-input) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ba0b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 14px 14px !important;
}
#top_section .extreme-search-form select {
    height: 36px !important;
    max-width: 180px !important;
    padding: 0 34px 0 12px !important;
    border-radius: 999px !important;
}
#top_section .extreme-search-form button,
#top_section .extreme-search-form input[type="submit"],
#top_section .extreme-search-form .button_submit {
    min-width: 74px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: var(--ex-action-bg) !important;
    border: 1px solid var(--ex-action-border) !important;
    color: var(--ex-action-text) !important;
    box-shadow: none !important;
}

/* Language switch: add a subtle RU flag without turning it into a loud badge. */
#top_section .extreme-language-form select {
    min-width: 118px !important;
    height: 36px !important;
    padding: 0 34px 0 34px !important;
    border-radius: 999px !important;
    background-color: var(--ex-input) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Crect width='18' height='4' y='0' fill='%23ffffff'/%3E%3Crect width='18' height='4' y='4' fill='%232a5fbd'/%3E%3Crect width='18' height='4' y='8' fill='%23d74a45'/%3E%3Crect width='18' height='12' fill='none' stroke='rgba(0,0,0,.15)'/%3E%3C/svg%3E"),
        linear-gradient(45deg, transparent 50%, var(--ex-muted) 50%),
        linear-gradient(135deg, var(--ex-muted) 50%, transparent 50%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: 12px center, calc(100% - 18px) 15px, calc(100% - 13px) 15px !important;
    background-size: 16px 11px, 5px 5px, 5px 5px !important;
}

/* Header menu label should be only "Форум", not "Начало Форум". Keep it calm. */
#main_menu > li > a,
#main_menu > li > span > a {
    white-space: nowrap !important;
}

/* Breadcrumbs: bigger, cleaner and less cramped on board pages and home. */
.navigate_section {
    font-size: 14px !important;
    line-height: 1.45 !important;
}
.navigate_section a,
.navigate_section a:visited,
.navigate_section span,
.navigate_section strong,
.navigate_section em {
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-shadow: none !important;
}
.navigate_section a,
.navigate_section a:visited {
    font-weight: 500 !important;
}

/* Keep the crumb bar readable when it only contains the home node. */
.navigate_section:empty {
    display: none !important;
}

@media (max-width: 1100px) {
    #top_section .extreme-search-form input[type="search"],
    #top_section .extreme-search-form input[name="search"],
    #top_section .extreme-search-form input[type="text"] {
        width: 132px !important;
        min-width: 132px !important;
    }
    #top_section .extreme-search-form select {
        max-width: 150px !important;
    }
}

@media (max-width: 720px) {
    #top_section .extreme-search-form {
        float: none !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    #top_section .extreme-search-form input[type="search"],
    #top_section .extreme-search-form input[name="search"],
    #top_section .extreme-search-form input[type="text"] {
        flex: 1 1 190px !important;
        min-width: 0 !important;
        width: auto !important;
    }
    #top_section .extreme-search-form select,
    #top_section .extreme-search-form button,
    #top_section .extreme-search-form input[type="submit"] {
        flex: 0 0 auto !important;
    }
    #top_section .extreme-language-form {
        float: none !important;
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   1.0.20: restore native SMF popup visibility
   ========================================================================== */
/* Curve2 intentionally keeps #profile_menu/#pm_menu/#alerts_menu hidden until
   JavaScript opens them. Previous eXtreme rules forced .top_menu to display,
   which rendered an empty horizontal container under the user/PM/alerts row.
   Do not set display here; inherit Curve2's native display:none + JS inline open. */
#top_section #profile_menu.top_menu:empty,
#top_section #pm_menu.top_menu:empty,
#top_section #alerts_menu.top_menu:empty {
    display: none !important;
}

/* ========================================================================== 
   1.0.22: stable header tools, aligned forum menu and real breadcrumb row
   ========================================================================== */

/* Top strip: one stable row. Popup menus remain absolute/hidden by Curve2. */
#top_section .inner_wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
}
#top_info {
    order: 1 !important;
    flex: 0 1 auto !important;
    margin: 0 auto 0 0 !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
}
#top_info > li {
    display: flex !important;
    align-items: center !important;
}
#top_info > li > a {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 3px !important;
}
#top_info .amt {
    margin-left: 2px !important;
}

/* Header search: just "Поиск" + one magnifier. Always searches whole forum. */
#top_section .extreme-search-form {
    order: 20 !important;
    float: none !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 220px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ex-border-strong) !important;
    border-radius: 999px !important;
    background: var(--ex-input) !important;
    box-shadow: none !important;
}
#top_section .extreme-search-form .extreme-search-input,
#top_section .extreme-search-form input[name="search"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 42px 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--ex-input-text) !important;
    box-shadow: none !important;
}
#top_section .extreme-search-form .extreme-search-input::placeholder,
#top_section .extreme-search-form input[name="search"]::placeholder {
    color: var(--ex-muted) !important;
    opacity: 1 !important;
}
#top_section .extreme-search-form .extreme-search-submit,
#top_section .extreme-search-form input[type="submit"] {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396a2ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font-size: 0 !important;
}
#top_section .extreme-search-form .extreme-search-submit:hover,
#top_section .extreme-search-form .extreme-search-submit:focus,
#top_section .extreme-search-form input[type="submit"]:hover,
#top_section .extreme-search-form input[type="submit"]:focus {
    background-color: var(--ex-hover) !important;
    outline: none !important;
}
#top_section .extreme-search-form select[name="search_selection"] {
    display: none !important;
}

/* Language selector: native compact control; flag comes from option text. */
#top_section .extreme-language-form {
    order: 30 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}
#top_section .extreme-language-form select,
#top_section .extreme-language-select {
    min-width: 126px !important;
    height: 38px !important;
    padding: 0 32px 0 12px !important;
    border: 1px solid var(--ex-border-strong) !important;
    border-radius: 999px !important;
    background-color: var(--ex-input) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ex-muted) 50%),
        linear-gradient(135deg, var(--ex-muted) 50%, transparent 50%) !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px !important;
    background-size: 5px 5px, 5px 5px !important;
    color: var(--ex-input-text) !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.extreme_theme_toggle {
    order: 40 !important;
    float: none !important;
    flex: 0 0 32px !important;
    margin: 0 !important;
}

/* Main forum navigation: same height, same icon slot, same baseline. */
#main_menu .dropmenu,
#main_menu ul.dropmenu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#main_menu .dropmenu > li,
#main_menu ul.dropmenu > li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
#main_menu .dropmenu > li > a,
#main_menu ul.dropmenu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    line-height: 1 !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
}
#main_menu .dropmenu > li > a.active,
#main_menu ul.dropmenu > li > a.active {
    border-color: var(--ex-accent-border) !important;
}
#main_menu .dropmenu > li > a .main_icons,
#main_menu ul.dropmenu > li > a .main_icons {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    vertical-align: middle !important;
}
#main_menu .dropmenu > li > a .textmenu,
#main_menu .dropmenu > li > a .text_menu {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
#main_menu .dropmenu > li > a .amt {
    margin-left: 1px !important;
}

/* Breadcrumbs: a single flex row with our own separator. This neutralizes
   Curve2's float/triangle rules that made the first "Форум" jump vertically. */
.navigate_section {
    padding: 7px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.navigate_section.extreme-single-crumb {
    display: none !important;
}
.navigate_section > ul,
.navigate_section ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    overflow: visible !important;
    border: 1px solid var(--ex-border) !important;
    border-radius: 7px !important;
    background: var(--ex-surface) !important;
    box-shadow: none !important;
}
.navigate_section > ul > li,
.navigate_section ul li {
    float: none !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--ex-muted) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.navigate_section > ul > li::before,
.navigate_section ul li::before {
    content: none !important;
    display: none !important;
}
.navigate_section > ul > li::after,
.navigate_section ul li::after {
    content: '›' !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 8px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    color: var(--ex-muted) !important;
    opacity: .75 !important;
    transform: none !important;
}
.navigate_section > ul > li:last-child::after,
.navigate_section ul li.last::after,
.navigate_section ul li:last-child::after {
    content: none !important;
    display: none !important;
}
.navigate_section > ul > li > a,
.navigate_section ul li > a,
.navigate_section > ul > li > span,
.navigate_section ul li > span {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ex-text-soft) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}
.navigate_section ul li.last > a,
.navigate_section ul li:last-child > a,
.navigate_section ul li.last > span,
.navigate_section ul li:last-child > span {
    color: var(--ex-text) !important;
    font-weight: 600 !important;
}

@media (max-width: 900px) {
    #top_section .inner_wrap {
        flex-wrap: wrap !important;
    }
    #top_info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    #top_section .extreme-search-form {
        width: 190px !important;
    }
}

@media (max-width: 720px) {
    #top_section .inner_wrap {
        gap: 7px !important;
    }
    #top_info {
        order: 1 !important;
        margin-right: 0 !important;
        gap: 9px !important;
    }

    .navigate_section > ul,
    .navigate_section ul {
        min-height: 36px !important;
    }
    .navigate_section > ul > li::after,
    .navigate_section ul li::after {
        margin: 0 6px !important;
    }
}

/* ========================================================================== 
   1.0.22: mobile search disclosure, stable alert popup, clean breadcrumbs/actions
   ========================================================================== */

/* Hidden no-JS logout must remain hidden after the top_info flex reset. */
#nojs_logout {
    display: none !important;
}

/* Breadcrumbs: neutralise every old Curve arrow/triangle, including pseudo
   elements attached to the anchor itself, then use only our li separator. */
.navigate_section li > a::before,
.navigate_section li > a::after,
.navigate_section li > span::before,
.navigate_section li > span::after,
.navigate_section li > strong::before,
.navigate_section li > strong::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    transform: none !important;
}
.navigate_section > ul,
.navigate_section ul {
    align-content: center !important;
}
.navigate_section > ul > li,
.navigate_section ul li,
.navigate_section > ul > li > a,
.navigate_section ul li > a,
.navigate_section > ul > li > span,
.navigate_section ul li > span {
    vertical-align: middle !important;
    white-space: normal !important;
}

/* Generic quick-action reset. Curve applies gradients and special corners to
   the li wrapper itself; on alerts this was visible as white corner shards. */
.quickbuttons > li,
.quickbuttons > li:hover,
.quickbuttons > li:focus-within,
.buttonlist > li,
.buttonlist > li:hover,
.buttonlist > li:focus-within {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
.quickbuttons > li::before,
.quickbuttons > li::after,
.buttonlist > li::before,
.buttonlist > li::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.quickbuttons > li > a,
.quickbuttons > li > span,
.buttonlist > li > a,
.buttonlist > li > span {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Alerts page: compact, separated actions with no old joined-button chrome. */
#alerts .alert_buttons .quickbuttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 8px 0 10px !important;
    padding: 0 !important;
}
#alerts .alert_buttons .quickbuttons > li {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#alerts .alert_buttons .quickbuttons > li > a,
#alerts .alert_buttons .quickbuttons > li > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 5px 10px !important;
    border: 1px solid var(--ex-border-strong) !important;
    border-radius: 8px !important;
    background: var(--ex-surface-raised) !important;
    color: var(--ex-text-soft) !important;
}
#alerts .alert_buttons .quickbuttons > li > a:hover,
#alerts .alert_buttons .quickbuttons > li > a:focus {
    background: var(--ex-hover) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-accent-border) !important;
}

/* The alert/profile/PM popups belong to their top-info item. This prevents the
   mobile alert menu from snapping to the very top of the viewport. */
#top_info > li {
    position: relative !important;
    overflow: visible !important;
}
#top_section,
#top_section .inner_wrap,
#top_info {
    overflow: visible !important;
}

@media (max-width: 720px) {
    /* Modern mobile search pattern: normally only the magnifier is shown.
       Tapping it expands the field into the free space to its left. */
    #top_section .inner_wrap {
        row-gap: 9px !important;
    }
    #top_info {
        width: 100% !important;
    }

    #top_section .extreme-search-form {
        order: 20 !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        margin: 0 0 0 auto !important;
        border: 1px solid transparent !important;
        border-radius: 999px !important;
        background: transparent !important;
        overflow: hidden !important;
        transition: flex-basis .18s ease, width .18s ease, background-color .18s ease, border-color .18s ease !important;
    }
    #top_section .extreme-search-form .extreme-search-input,
    #top_section .extreme-search-form input[name="search"] {
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .12s ease !important;
    }
    #top_section .extreme-search-form .extreme-search-submit,
    #top_section .extreme-search-form input[type="submit"] {
        top: 3px !important;
        right: 3px !important;
        width: 34px !important;
        height: 34px !important;
        border: 1px solid var(--ex-border-strong) !important;
        background-color: var(--ex-surface-raised) !important;
    }
    #top_section .extreme-search-form.extreme-search-open {
        flex: 1 1 190px !important;
        width: auto !important;
        min-width: 150px !important;
        border-color: var(--ex-border-strong) !important;
        background: var(--ex-input) !important;
    }
    #top_section .extreme-search-form.extreme-search-open .extreme-search-input,
    #top_section .extreme-search-form.extreme-search-open input[name="search"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 42px 0 14px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Language + theme switch remain compact while search expands left. */
    #top_section .extreme-language-form {
        order: 30 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    #top_section .extreme-language-form select,
    #top_section .extreme-language-select {
        min-width: 128px !important;
        max-width: 138px !important;
        height: 42px !important;
    }
    .extreme_theme_toggle {
        order: 40 !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 42px !important;
        line-height: 40px !important;
    }

    /* Popup menus open below their toolbar item instead of at viewport top. */
    #top_info .top_menu {
        position: absolute !important;
        top: calc(100% + 58px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: auto !important;
        width: min(390px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        max-height: min(70vh, 520px) !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid var(--ex-border-strong) !important;
        border-radius: 12px !important;
        background: var(--ex-surface-raised) !important;
        box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
        z-index: 120 !important;
    }
    #top_info #pm_menu {
        left: -54px !important;
    }
    #top_info #alerts_menu {
        left: -116px !important;
    }

    /* Keep the important alert-popup actions visible and easy to tap. */
    #alerts_menu .alert_bar {
        display: block !important;
        padding: 0 0 8px !important;
        margin: 0 !important;
    }
    #alerts_menu .alerts_opts {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }
    #alerts_menu .alerts_opts a,
    #alerts_menu .alerts_opts a:visited {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        color: var(--ex-link) !important;
        font-size: 13px !important;
        text-decoration: none !important;
    }
    #alerts_menu .alerts_box {
        margin: 0 0 8px !important;
        padding: 0 !important;
        text-align: left !important;
    }
    #alerts_menu .alerts_box .button {
        min-height: 34px !important;
        border-radius: 8px !important;
        background: var(--ex-surface-soft) !important;
        color: var(--ex-text) !important;
        border-color: var(--ex-border-strong) !important;
    }
    #alerts_menu .unread_notify {
        border-radius: 8px !important;
    }

    /* Mobile breadcrumbs: one calm baseline, no double/legacy arrows. */
    .navigate_section > ul,
    .navigate_section ul {
        align-items: center !important;
        padding: 9px 12px !important;
        row-gap: 5px !important;
    }
    .navigate_section > ul > li,
    .navigate_section ul li,
    .navigate_section > ul > li > a,
    .navigate_section ul li > a,
    .navigate_section > ul > li > span,
    .navigate_section ul li > span {
        min-height: 20px !important;
        font-size: 13px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
    }
    .navigate_section ul li:last-child > a,
    .navigate_section ul li.last > a,
    .navigate_section ul li:last-child > span,
    .navigate_section ul li.last > span {
        font-weight: 600 !important;
    }
}

/* 1.0.23: final generic cleanup for quickbutton corner artifacts. */
.quickbuttons > li > a::before,
.quickbuttons > li > a::after,
.quickbuttons > li > span::before,
.quickbuttons > li > span::after {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ========================================================================== 
   1.0.28: restore a compact mobile breadcrumb trail under the main menu
   ========================================================================== */
@media (max-width: 720px) {
    /* Curve2 hides linktrees inside #main_content_section on phones. Restore
       only the primary trail below the main menu; bottom duplicates stay hidden. */
    #upper_section .navigate_section.extreme-primary-crumbs:not(.extreme-single-crumb) {
        display: block !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #upper_section .navigate_section.extreme-primary-crumbs > ul,
    #upper_section .navigate_section.extreme-primary-crumbs ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        min-height: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        border: 1px solid var(--ex-border) !important;
        border-radius: 9px !important;
        background: var(--ex-surface) !important;
        box-shadow: none !important;
    }
    #upper_section .navigate_section.extreme-primary-crumbs > ul::-webkit-scrollbar,
    #upper_section .navigate_section.extreme-primary-crumbs ul::-webkit-scrollbar {
        display: none !important;
    }

    #upper_section .navigate_section.extreme-primary-crumbs li,
    #upper_section .navigate_section.extreme-primary-crumbs li > a,
    #upper_section .navigate_section.extreme-primary-crumbs li > span,
    #upper_section .navigate_section.extreme-primary-crumbs li > strong {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
        text-shadow: none !important;
    }
    #upper_section .navigate_section.extreme-primary-crumbs li:last-child > a,
    #upper_section .navigate_section.extreme-primary-crumbs li.last > a,
    #upper_section .navigate_section.extreme-primary-crumbs li:last-child > span,
    #upper_section .navigate_section.extreme-primary-crumbs li.last > span {
        font-weight: 650 !important;
        color: var(--ex-text) !important;
    }
    #upper_section .navigate_section.extreme-primary-crumbs li::after {
        content: '›' !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 7px !important;
        color: var(--ex-muted) !important;
        opacity: .65 !important;
    }
    #upper_section .navigate_section.extreme-primary-crumbs li:last-child::after,
    #upper_section .navigate_section.extreme-primary-crumbs li.last::after {
        content: none !important;
        display: none !important;
    }

    /* The single "Форум" crumb on the board index adds no information. */
    #upper_section .navigate_section.extreme-primary-crumbs.extreme-single-crumb {
        display: none !important;
    }
}

/* ========================================================================== 
   1.0.28: mobile post footer actions + reliable three-dot overflow menu
   ========================================================================== */
@media (max-width: 720px) {
    /* Curve gives every message body an 85px minimum height. On phones that
       leaves a large dead zone between short text and the actions. */
    html.extreme-page-topic #forumposts .post .inner {
        min-height: 0 !important;
        padding: 12px 14px 10px !important;
    }

    /* The action bar is a real footer below the message, not a floating group
       in the middle of the content. */
    html.extreme-page-topic #forumposts .under_message {
        margin: 0 !important;
    }
    html.extreme-page-topic #forumposts .postarea,
    html.extreme-page-topic #forumposts .post_wrapper,
    html.extreme-page-topic #forumposts .quickbuttons,
    html.extreme-page-topic #forumposts .post_options {
        overflow: visible !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post {
        float: none !important;
        clear: both !important;
        text-align: left !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li > a,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--ex-surface-raised) !important;
        border: 1px solid var(--ex-border-strong) !important;
        color: var(--ex-text-soft) !important;
        text-decoration: none !important;
    }

    /* The main per-message action gets the same restrained warm emphasis as
       the topic-level Reply button. */
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-reply-action > a {
        font-weight: 700 !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-reply-action > a:hover,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-reply-action > a:focus {
        background: var(--ex-action-hover) !important;
        color: var(--ex-action-text) !important;
    }

    /* Edit stays clearly visible but secondary. Old Curve glyphs are removed
       from the two primary actions; the labels are enough on mobile. */
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-reply-action .main_icons,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-edit-action .main_icons {
        display: none !important;
    }

    /* Selection quote remains contextual instead of permanently consuming a
       full button slot. */
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-selected-quote-action:not(.extreme-selection-active) {
        display: none !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-selected-quote-action.extreme-selection-active {
        display: block !important;
    }

    /* More is intentionally a compact square control at the far right. */
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-more-action > a {
        letter-spacing: 1px !important;
    }

    /* SMF's default submenu is hover-driven, and responsive.css disables that
       hover dropdown on touch screens. JS toggles .extreme-open explicitly. */
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.post_options > ul,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.post_options:hover > ul {
        display: none !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.post_options.extreme-open > ul {
        position: absolute !important;
        top: calc(100% + 7px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        width: min(230px, calc(100vw - 42px)) !important;
        min-width: 190px !important;
        margin: 0 !important;
        padding: 6px !important;
        overflow: visible !important;
        background: var(--ex-surface-raised) !important;
        background-image: none !important;
        border: 1px solid var(--ex-border-strong) !important;
        border-radius: 10px !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .28) !important;
        z-index: 500 !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.post_options > ul > li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.post_options > ul > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: transparent !important;
        background-image: none !important;
        color: var(--ex-text) !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        text-align: left !important;
        box-shadow: none !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.post_options > ul > li > a:hover,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.post_options > ul > li > a:focus {
        background: var(--ex-hover) !important;
        color: var(--ex-text) !important;
    }
}

@media (max-width: 390px) {
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-reply-action,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-edit-action {
        min-width: 104px !important;
    }
}

/* ========================================================================== 
   1.0.29: compact post actions + mobile bottom-sheet overflow menu
   ========================================================================== */
@media (max-width: 720px) {
    html.extreme-page-topic #forumposts .under_message {
        padding: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--ex-post-separator) 72%, transparent) !important;
        background: transparent !important;
        overflow: visible !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 10px 9px !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-reply-action,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-edit-action {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li > a,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li > span {
        width: auto !important;
        min-width: 0 !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 13px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 650 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-reply-action > a {
        padding-left: 15px !important;
        padding-right: 15px !important;
        background: color-mix(in srgb, var(--ex-action-bg) 88%, var(--ex-surface-raised)) !important;
        border-color: color-mix(in srgb, var(--ex-action-border) 74%, var(--ex-border-strong)) !important;
        color: var(--ex-action-text) !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-edit-action > a {
        background: transparent !important;
        border-color: var(--ex-border-strong) !important;
        color: var(--ex-text-soft) !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-edit-action > a:hover,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-edit-action > a:focus {
        background: var(--ex-hover) !important;
        color: var(--ex-text) !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-more-action {
        flex: 0 0 36px !important;
        width: 36px !important;
        margin-left: 0 !important;
        position: relative !important;
        z-index: auto !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-more-action > a {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        border-color: var(--ex-border-strong) !important;
        color: var(--ex-muted) !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-more-action > a:hover,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-more-action > a:focus {
        background: var(--ex-hover) !important;
        color: var(--ex-text) !important;
    }

    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-selected-quote-action.extreme-selection-active {
        order: -1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-selected-quote-action.extreme-selection-active > a {
        width: 100% !important;
        background: transparent !important;
        color: var(--ex-text-soft) !important;
    }

    /* The native nested dropdown is not used on phones anymore. JS portals it
       to <body> as a viewport-level action sheet so it can never be clipped by
       a post card or appear behind the quick-reply editor. */
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.post_options.extreme-open > ul {
        display: none !important;
    }
}

/* Mobile overflow menu is a viewport-level sheet. It deliberately lives
   outside #forumposts while open, therefore selectors must not depend on the
   original quickbuttons hierarchy. */
ul.extreme-post-action-sheet {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    z-index: 10002 !important;
    display: block !important;
    width: auto !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 7px !important;
    list-style: none !important;
    background: var(--ex-surface-raised) !important;
    background-image: none !important;
    border: 1px solid var(--ex-border-strong) !important;
    border-radius: 16px !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.42) !important;
    overflow: hidden !important;
}
ul.extreme-post-action-sheet > li,
ul.extreme-post-action-sheet > li:hover,
ul.extreme-post-action-sheet > li:focus-within {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
ul.extreme-post-action-sheet > li + li {
    border-top: 1px solid color-mix(in srgb, var(--ex-border) 70%, transparent) !important;
}
ul.extreme-post-action-sheet > li::before,
ul.extreme-post-action-sheet > li::after,
ul.extreme-post-action-sheet > li > a::before,
ul.extreme-post-action-sheet > li > a::after {
    content: none !important;
    display: none !important;
}
ul.extreme-post-action-sheet > li > a,
ul.extreme-post-action-sheet > li > span {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--ex-text) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 550 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
}
ul.extreme-post-action-sheet > li > a:hover,
ul.extreme-post-action-sheet > li > a:focus {
    background: var(--ex-hover) !important;
    color: var(--ex-text) !important;
}
button.extreme-post-sheet-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10001 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(5, 9, 13, .48) !important;
    box-shadow: none !important;
    cursor: default !important;
}
html.extreme-post-sheet-open,
html.extreme-post-sheet-open body {
    overflow: hidden !important;
}

@media (min-width: 721px) {
    ul.extreme-post-action-sheet,
    button.extreme-post-sheet-backdrop {
        display: none !important;
    }
}

@media (max-width: 390px) {
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post {
        gap: 6px !important;
        padding: 7px 8px 8px !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li > a,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li > span {
        min-height: 34px !important;
        height: 34px !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
        font-size: 12.5px !important;
    }
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-more-action,
    html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.extreme-post-more-action > a {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }
}


/* ========================================================================== 
   1.0.31: mobile popup/modal stabilization — preserve SMF open/close state
   ========================================================================== */
/* IMPORTANT: never force display on .popup_container. SMF itself toggles the
   container between hidden/visible. v1.0.30 used display:flex!important, which
   made a popup impossible to close because the theme overrode SMF's hide state.
   We only control geometry/presentation here. */
@media (max-width: 720px) {
    .popup_container:not(#mobile_user_menu) {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 10040 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: rgba(4, 8, 12, .58) !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
    .popup_container:not(#mobile_user_menu)::before,
    .popup_container:not(#mobile_user_menu)::after {
        content: none !important;
        display: none !important;
    }
    .popup_container:not(#mobile_user_menu) .popup_window {
        position: absolute !important;
        top: auto !important;
        right: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        left: 50% !important;
        display: block !important;
        width: calc(100% - 24px) !important;
        max-width: 620px !important;
        min-width: 0 !important;
        max-height: min(78vh, 720px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden auto !important;
        overscroll-behavior: contain !important;
        transform: translateX(-50%) !important;
        border: 1px solid var(--ex-border-strong) !important;
        border-radius: 18px !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .46) !important;
        background: var(--ex-surface-raised) !important;
    }
    .popup_container:not(#mobile_user_menu) .popup_heading {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 13px 54px 13px 16px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ex-border) !important;
        background: var(--ex-head) !important;
        color: var(--ex-head-text) !important;
        font-size: 18px !important;
        line-height: 26px !important;
        font-weight: 650 !important;
        box-sizing: border-box !important;
    }
    .popup_container:not(#mobile_user_menu) .popup_heading .hide_popup {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        background-color: transparent !important;
        opacity: .78 !important;
    }
    .popup_container:not(#mobile_user_menu) .popup_heading .hide_popup:hover,
    .popup_container:not(#mobile_user_menu) .popup_heading .hide_popup:focus {
        background-color: var(--ex-hover) !important;
        opacity: 1 !important;
    }
    .popup_container:not(#mobile_user_menu) .popup_content,
    .popup_container:not(#mobile_user_menu) .dropmenu,
    .popup_container:not(#mobile_user_menu) .buttonlist,
    .popup_container:not(#mobile_user_menu) .options {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .popup_container:not(#mobile_user_menu) .dropmenu {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px !important;
        background: transparent !important;
    }
    .popup_container:not(#mobile_user_menu) .dropmenu > li,
    .popup_container:not(#mobile_user_menu) .dropmenu li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    .popup_container:not(#mobile_user_menu) .dropmenu > li + li {
        border-top: 1px solid color-mix(in srgb, var(--ex-border) 72%, transparent) !important;
    }
    .popup_container:not(#mobile_user_menu) .dropmenu > li > a,
    .popup_container:not(#mobile_user_menu) .dropmenu li a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: var(--ex-text) !important;
        text-indent: 0 !important;
        white-space: normal !important;
        box-shadow: none !important;
    }
    .popup_container:not(#mobile_user_menu) .dropmenu > li > a:hover,
    .popup_container:not(#mobile_user_menu) .dropmenu > li > a:focus {
        background: var(--ex-hover) !important;
    }
    .popup_container:not(#mobile_user_menu) .buttonlist,
    .popup_container:not(#mobile_user_menu) .options {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 16px 16px !important;
        margin: 0 !important;
    }
}


/* 1.1.0: state and accessibility layer ----------------------------------- */
.extreme-hidden-action { display: none !important; }
html.extreme-page-topic #forumposts .quickbuttons.quickbuttons_post > li.post_options.extreme-open > ul { display: block !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ex-accent) !important; outline-offset: 2px !important; box-shadow: 0 0 0 3px var(--ex-focus) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }


/* ==========================================================================
   1.1.6 desktop fix: guest auth buttons must never stretch
   ========================================================================== */
@media (min-width: 721px) {
    #top_section #top_info > li.button_login,
    #top_section #top_info > li.button_signup {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        align-self: center !important;
    }

    #top_section #top_info > li.button_login > a,
    #top_section #top_info > li.button_signup > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
    }
}


/* ========================================================================== 
   1.1.7: desktop dropdown stacking, placement and hover stabilization
   ========================================================================== */
@media (min-width: 721px) {
    /* A post card normally clips its children to preserve rounded corners.
       While its ••• menu is open, temporarily lift only that card above its
       siblings and allow the dropdown to escape the card bounds. */
    html.extreme-page-topic #forumposts .windowbg.extreme-post-menu-owner,
    html.extreme-page-topic #forumposts .windowbg2.extreme-post-menu-owner,
    html.extreme-page-topic #forumposts .windowbg3.extreme-post-menu-owner {
        position: relative !important;
        overflow: visible !important;
        z-index: 650 !important;
    }
    html.extreme-page-topic #forumposts .extreme-post-menu-owner .post_wrapper,
    html.extreme-page-topic #forumposts .extreme-post-menu-owner .postarea,
    html.extreme-page-topic #forumposts .extreme-post-menu-owner .under_message,
    html.extreme-page-topic #forumposts .extreme-post-menu-owner .quickbuttons,
    html.extreme-page-topic #forumposts .extreme-post-menu-owner .post_options {
        overflow: visible !important;
    }
    html.extreme-page-topic #forumposts .extreme-post-menu-owner .post_options.extreme-open {
        position: relative !important;
        z-index: 660 !important;
    }
    html.extreme-page-topic #forumposts .extreme-post-menu-owner .post_options.extreme-open > ul {
        z-index: 670 !important;
    }

    /* Curve2 leaves .top_menu at its static absolute position. In our flex
       toolbar that can overlap the trigger. Anchor all top popups below the
       toolbar item; the profile menu starts directly below the nickname. */
    #top_info #profile_menu,
    #top_info #pm_menu,
    #top_info #alerts_menu {
        top: calc(100% + 8px) !important;
        bottom: auto !important;
        margin-top: 0 !important;
        z-index: 1000 !important;
    }
    #top_info #profile_menu {
        inset-inline: 0 auto !important;
    }

    /* Remove Curve's legacy image/gradient repaint from dropdown rows and use
       a short colour-only transition. This avoids the one-frame pale flash
       seen while moving the pointer through profile/generic menus. */
    .dropmenu li ul > li > a,
    .dropmenu li ul > li > a:visited,
    .top_menu a,
    .top_menu a:visited {
        background-color: transparent !important;
        background-image: none !important;
        text-shadow: none !important;
        transition: background-color .12s ease-out, color .12s ease-out, border-color .12s ease-out !important;
    }
    .dropmenu li ul > li:hover > a,
    .dropmenu li ul > li > a:hover,
    .dropmenu li ul > li > a:focus-visible,
    .top_menu li:hover > a,
    .top_menu a:hover,
    .top_menu a:focus-visible {
        background-color: var(--ex-surface-soft) !important;
        background-image: none !important;
        text-shadow: none !important;
    }
}


/* ========================================================================== 
   1.1.10: deterministic RU / ENG segmented language switch
   ========================================================================== */
#top_section .extreme-language-form.extreme-language-toggle-ready {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Keep SMF's real select in the form for submission/fallback semantics, but
   remove the unreliable native rendering (Windows often drops flag emoji). */
#top_section .extreme-language-form.extreme-language-toggle-ready > .extreme-language-select {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

#top_section .extreme-language-toggle {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 136px !important;
    height: 38px !important;
    padding: 3px !important;
    border: 1px solid var(--ex-border-strong) !important;
    border-radius: 999px !important;
    background: var(--ex-input) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* One sliding surface, like a phone segmented control. */
#top_section .extreme-language-toggle::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 3px !important;
    bottom: 3px !important;
    left: 3px !important;
    width: calc(50% - 3px) !important;
    border: 1px solid var(--ex-accent-border) !important;
    border-radius: 999px !important;
    background: var(--ex-hover) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12) !important;
    transform: translateX(0) !important;
    transition: transform 150ms cubic-bezier(.2,.8,.2,1) !important;
}
#top_section .extreme-language-toggle.is-en::before {
    transform: translateX(100%) !important;
}

#top_section .extreme-language-choice {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--ex-muted) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: .72rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: .015em !important;
    white-space: nowrap !important;
    transition: color 120ms ease !important;
}
#top_section .extreme-language-choice:hover,
#top_section .extreme-language-choice:focus-visible,
#top_section .extreme-language-choice[aria-pressed="true"] {
    color: var(--ex-head-text) !important;
    background: transparent !important;
}
#top_section .extreme-language-choice:focus-visible {
    outline: 2px solid var(--ex-focus) !important;
    outline-offset: -2px !important;
}

#top_section .extreme-language-choice::before {
    content: "" !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 11px !important;
    border-radius: 1px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 11px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.18) inset !important;
}
#top_section .extreme-language-choice[data-lang="ru"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Crect width='18' height='4' fill='%23fff'/%3E%3Crect y='4' width='18' height='4' fill='%230039a6'/%3E%3Crect y='8' width='18' height='4' fill='%23d52b1e'/%3E%3C/svg%3E") !important;
}
#top_section .extreme-language-choice[data-lang="en"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Crect width='18' height='12' fill='%23012169'/%3E%3Cpath d='M0 0l18 12M18 0L0 12' stroke='%23fff' stroke-width='3'/%3E%3Cpath d='M0 0l18 12M18 0L0 12' stroke='%23C8102E' stroke-width='1.2'/%3E%3Cpath d='M9 0v12M0 6h18' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M9 0v12M0 6h18' stroke='%23C8102E' stroke-width='2'/%3E%3C/svg%3E") !important;
}

@media (max-width: 720px) {
    #top_section .extreme-language-toggle {
        width: 124px !important;
        height: 40px !important;
    }
    #top_section .extreme-language-choice {
        height: 32px !important;
        gap: 5px !important;
        padding: 0 5px !important;
        font-size: .68rem !important;
    }
    #top_section .extreme-language-choice::before {
        flex-basis: 15px !important;
        width: 15px !important;
        height: 10px !important;
        background-size: 15px 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #top_section .extreme-language-toggle::before,
    #top_section .extreme-language-choice {
        transition: none !important;
    }
}


/* ========================================================================== 
   1.1.11: desktop post overflow menu is a body-level portal
   ========================================================================== */
@media (min-width: 721px) {
    /* The desktop menu no longer participates in the post card's stacking
       context at all. JS moves it to <body> while open and anchors it to the
       three-dot trigger with getBoundingClientRect(). */
    ul.extreme-post-desktop-menu {
        position: fixed !important;
        display: block !important;
        z-index: 10020 !important;
        width: max-content !important;
        min-width: 190px !important;
        max-width: min(260px, calc(100vw - 20px)) !important;
        margin: 0 !important;
        padding: 6px !important;
        list-style: none !important;
        overflow: visible !important;
        background: var(--ex-surface-raised) !important;
        background-image: none !important;
        border: 1px solid var(--ex-border-strong) !important;
        border-radius: 9px !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .34) !important;
        box-sizing: border-box !important;
        animation: extreme-dropdown-in .105s cubic-bezier(.2,.7,.25,1) both !important;
        transform-origin: top right !important;
    }

    ul.extreme-post-desktop-menu > li,
    ul.extreme-post-desktop-menu > li:hover,
    ul.extreme-post-desktop-menu > li:focus-within {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 6px !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    ul.extreme-post-desktop-menu > li > a,
    ul.extreme-post-desktop-menu > li > a:visited {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 6px 9px !important;
        border: 0 !important;
        border-radius: 6px !important;
        background: transparent !important;
        background-image: none !important;
        color: var(--ex-text-soft) !important;
        text-decoration: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        transition: none !important;
    }

    ul.extreme-post-desktop-menu > li:hover > a,
    ul.extreme-post-desktop-menu > li > a:hover,
    ul.extreme-post-desktop-menu > li > a:focus-visible {
        background: var(--ex-hover) !important;
        color: var(--ex-text) !important;
    }

    /* v1.1.7's card-lifting workaround is intentionally obsolete. */
    html.extreme-page-topic #forumposts .windowbg.extreme-post-menu-owner,
    html.extreme-page-topic #forumposts .windowbg2.extreme-post-menu-owner,
    html.extreme-page-topic #forumposts .windowbg3.extreme-post-menu-owner {
        z-index: auto !important;
    }
}


/* ========================================================================== 
   1.1.18: keep post IP logging out of the author card
   ========================================================================== */
/*
 * SMF still records the poster IP normally. We only suppress the presentation
 * layer inside topic author cards, including the generic "Logged" notice and
 * moderator/admin IP/tracking links. No database, permission or logging logic
 * is changed here.
 */
#forumposts .poster .poster_ip {
    display: none !important;
}

/* ========================================================================== 
   1.1.19: cleaner desktop author card
   ========================================================================== */
/* Keep this deliberately desktop-only. On <=720px the author block is the
   horizontal mobile header and has its own geometry in extreme-responsive.css. */
@media (min-width: 721px) {
    html.extreme-page-topic #forumposts .poster {
        border-radius: 8px !important;
        padding-bottom: 16px !important;
    }
}