/* Forum sections, discussions and forms. Uses the homepage's authored surfaces. */
#afMain.af-page > .block,
#afMain.af-admin-page .block,
#afMain.af-admin-page .modal-content {
    background-color: var(--af-panel) !important;
    background-image: var(--af-fill) !important;
    border: 1px solid var(--af-border) !important;
    border-radius: 14px !important;
    color: var(--af-text) !important;
    box-shadow: inset 0 1px 0 #ffffff0e, inset 0 -2px 3px var(--af-shadow), 0 5px 10px var(--af-shadow) !important;
    padding: 18px !important;
    margin-bottom: 20px;
}
#afMain.af-page .block_head, #afSidebar > .block > .block_head {
    display: block; padding: 0 0 14px !important; margin: 0 0 16px !important;
    background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--af-border) !important;
    box-shadow: none !important; color: var(--af-text) !important; -webkit-text-fill-color: var(--af-text) !important;
    font: 700 18px/1.4 ui-sans-serif, system-ui, sans-serif !important; letter-spacing: -.2px; overflow-wrap: anywhere;
}
#afMain.af-page .block_head::before, #afSidebar > .block > .block_head::before { content: none !important; }
#afMain.af-page h1.block_head { font-size: 21px !important; }
#afMain.af-page h4, #afMain.af-page label { color: var(--af-text) !important; }
#afMain.af-page label h4 { margin: 0; font-size: 14px; font-weight: 650; }
#afMain.af-page .form-group { margin-bottom: 20px; min-width: 0; }
#afMain.af-page .form-group > label { display: block; margin-bottom: 8px; }
#afMain.af-page .form-control,
#afMain.af-page textarea,
#afMain.af-page select {
    width: 100%; max-width: 100%; min-width: 0; min-height: 42px;
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important;
    color: var(--af-text) !important; -webkit-text-fill-color: var(--af-text) !important;
    border: 1px solid var(--af-border) !important; border-radius: 9px !important;
    box-shadow: inset 0 2px 4px var(--af-shadow) !important; font: inherit; padding: 10px 12px;
}
#afMain.af-page .form-control:focus, #afMain.af-page textarea:focus, #afMain.af-page select:focus {
    outline: 2px solid var(--af-accent); outline-offset: 2px; border-color: var(--af-accent) !important;
}
#afMain.af-page .form-control::placeholder, #afMain.af-page textarea::placeholder { color: var(--af-muted); opacity: 1; }
#afMain.af-page input[type="file"] { display: block; max-width: 100%; width: 100%; color: var(--af-text) !important; background-color: var(--af-panel) !important; background-image: var(--af-fill) !important; border: 1px solid var(--af-border) !important; border-radius: 9px; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
#afMain.af-page input[type="file"]::file-selector-button { padding: 9px 12px; margin-right: 10px; border: 1px solid var(--af-border); border-radius: 8px; background-color: var(--af-panel); color: var(--af-text); cursor: pointer; }
#afMain.af-page .btn, #afSidebar .btn,
#afMain #send_answer .news-composer-actions #send_btn,
#afMain #send_answer .news-composer-actions #news_smile_picker,
#afMain #send_answer .news-composer-actions #news_attach_button,
#afMain.af-page #smile_btn {
    border: 1px solid var(--af-border) !important; border-radius: 9px !important;
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important;
    color: var(--af-text) !important; -webkit-text-fill-color: var(--af-text) !important;
    box-shadow: inset 0 1px 0 #ffffff0d, 0 3px 6px var(--af-shadow) !important;
    min-height: 40px; padding: 9px 14px; font: 600 13px/1.4 ui-sans-serif, system-ui, sans-serif !important;
    text-shadow: none !important; letter-spacing: 0 !important; white-space: normal; height: auto;
    transition: border-color .16s ease, box-shadow .16s ease;
}
#afMain.af-page .btn:focus-visible, #afSidebar .btn:focus-visible { outline: 2px solid var(--af-accent) !important; outline-offset: 3px; }
#afMain.af-page .btn:disabled, #afMain.af-page .btn.disabled { opacity: .5; cursor: not-allowed; }
#afMain.af-page .btn-primary:not(.btn-group-toggle .btn) { border-color: color-mix(in srgb, var(--af-accent) 45%, var(--af-border)) !important; }
#afMain.af-page .btn-group-toggle { display: flex; gap: 7px; flex-wrap: wrap; }
#afMain.af-page .btn-group-toggle .btn { margin: 0; padding: 8px 11px; min-height: 36px; font-size: 12px !important; }
#afMain.af-page .btn-group-toggle .btn.active { border-color: var(--af-accent) !important; box-shadow: inset 0 0 0 1px var(--af-accent) !important; }
#afMain.af-page .btn-group-toggle .btn.active::after { content: " ✓"; font-weight: 700; color: var(--af-accent); }
#afMain.af-forum-page > .block { padding: 16px !important; }
#afMain #forum_topics { margin: 0; width: 100%; min-width: 0; }
#afMain #forum_topics .af-topic-group { padding: 8px 2px 12px; margin: 10px 0 2px; border: 0; border-bottom: 1px solid var(--af-border); background: none !important; font-size: 14px !important; line-height: 1.4; font-weight: 650; }
#afMain #forum_topics .af-topic-group:first-child { margin-top: 0; padding-top: 0; }
#afMain #forum_topics .af-topic-copy { flex: 1; min-width: 0; }
#afMain #forum_topics h3 { display: flex; align-items: center; gap: 5px; margin: 0 0 6px; font-size: 14px !important; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
#afMain #forum_topics h3 a { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; color: var(--af-text) !important; -webkit-text-fill-color: var(--af-text) !important; }
#afMain #forum_topics h3 a > span { min-width: 0; }
#afMain #forum_topics h3 svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--af-muted); opacity: .65; }
#afMain #forum_topics h3 > i { flex: 0 0 auto; color: var(--af-accent); font-size: 12px; }
#afMain #forum_topics .af-topic-meta { display: flex; gap: 4px 14px; flex-wrap: wrap; margin: 0; color: var(--af-muted); font-size: 11px; line-height: 1.5; }
#afMain #forum_topics .af-topic-meta > span { display: inline-flex; align-items: center; gap: 5px; overflow-wrap: anywhere; }
#afMain #forum_topics .af-topic-meta a { color: var(--af-muted); overflow-wrap: anywhere; }
#afMain #forum_topics .af-topic-last { align-items: flex-start; overflow-wrap: anywhere; }
#afMain #forum_topics .af-topic-last > a { color: var(--af-text); font-size: 13px; font-weight: 600; line-height: 1.4; }
#afMain #pagination2 { margin: 16px 0 20px; }
#afMain #pagination2:empty { display: none; }
#afMain #pagination2 .pagination { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
#afMain #pagination2 .pagination a, #afMain #pagination2 .pagination .page-link { border: 1px solid var(--af-border); border-radius: 8px; color: var(--af-text); background-color: var(--af-panel); background-image: var(--af-fill); min-width: 38px; text-align: center; }
#afMain #pagination2 .pagination .active a, #afMain #pagination2 .pagination .active .page-link { border-color: var(--af-accent); box-shadow: inset 0 0 0 1px var(--af-accent); }
/* Preserve existing authors, frames, badges, message IDs and reaction controls. */
#afMain #answers { margin: 0; }
#afMain #answers > div[id^="answer"] {
    display: grid !important; grid-template-columns: 76px minmax(0,1fr) !important; margin: 0 0 16px !important; padding: 0 !important;
    border: 1px solid var(--af-border) !important; border-radius: 12px !important;
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important;
    box-shadow: inset 0 1px 0 #ffffff0a, 0 3px 6px var(--af-shadow); overflow: hidden; min-width: 0;
}
#afMain #answers > div[id^="answer"]:last-child { margin-bottom: 0 !important; }
#afMain #answers .top-area { grid-area: 1 / 2 !important; display: flex; gap: 6px 12px; flex-wrap: wrap; padding: 12px 14px !important; margin: 0 !important; height: auto; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--af-border) !important; white-space: normal; line-height: 1.5; }
#afMain #answers .top-area .left-side, #afMain #answers .top-area .right-side { width: auto !important; float: none; padding: 0; min-width: 0; }
#afMain #answers .top-area .left-side { flex: 1; }
#afMain #answers .top-area .right-side { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#afMain #answers .top-area .right-side a { color: var(--af-muted) !important; font-size: 11px; }
#afMain #answers .ft-author { font-weight: 650; overflow-wrap: anywhere; }
#afMain #answers > div[id^="answer"] > .center-area { display: contents !important; }
#afMain #answers > div[id^="answer"] > .center-area > .left-side { grid-area: 1 / 1 / 3 / 2 !important; width: auto !important; float: none; padding: 14px 0 !important; justify-self: center; }
#afMain #answers > div[id^="answer"] > .center-area > .right-side { grid-area: 2 / 2 !important; min-width: 0; width: auto !important; float: none; padding: 14px !important; }
#afMain #answers .center-area > .left-side > img, #afMain #answers .forum-framed-avatar, #afMain #answers .forum-framed-avatar-image { width: 54px !important; height: 54px !important; }
#afMain #answers .forum-framed-avatar img:not(.forum-framed-avatar-image) { width: 66px !important; height: 66px !important; }
#afMain #answers .with_code { color: var(--af-text); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; min-width: 0; }
#afMain #answers .with_code a:not([style]) { color: var(--af-accent); text-decoration: underline; text-underline-offset: 3px; }
#afMain #answers .with_code img, #afMain #answers .with_code video { max-width: 100%; height: auto; }
#afMain #answers .with_code iframe { max-width: 100%; }
#afMain #answers .with_code pre { max-width: 100%; overflow: auto; white-space: pre-wrap; }
#afMain #answers .with_code table { display: block; max-width: 100%; overflow: auto; }
#afMain #answers blockquote { background-color: var(--af-panel) !important; background-image: var(--af-fill) !important; border-left: 3px solid var(--af-accent) !important; border-radius: 7px; padding: 12px; margin: 12px 0; color: var(--af-text); }
#afMain #answers .edited { margin-top: 12px; color: var(--af-muted) !important; font-size: 11px; }
#afMain #answers .edited a { color: var(--af-text); }
#afMain #answers .signature { padding-top: 12px; margin-top: 14px; border-color: var(--af-border) !important; }
#afMain #answers .bottom-area { grid-area: 3 / 1 / auto / -1 !important; display: flex !important; align-items: center; gap: 12px; padding: 8px 12px !important; border-top: 1px solid var(--af-border) !important; background: transparent !important; }
#afMain #answers .bottom-area > .left-side, #afMain #answers .bottom-area > .right-side { float: none; width: auto; padding: 0 !important; min-width: 0; }
#afMain #answers .bottom-area > .right-side { flex: 1; }
#afMain #answers .bottom-area .btn-group { display: flex; gap: 6px; margin: 0; }
#afMain #answers .bottom-area .btn-group .btn { width: 36px !important; height: 36px !important; min-height: 36px; padding: 0 !important; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; color: var(--af-text) !important; background-color: var(--af-panel) !important; background-image: var(--af-fill) !important; border: 1px solid var(--af-border) !important; border-radius: 8px !important; }
#afMain #answers > div[id^="answer"]::after, #afMain #answers .center-area::after, #afMain #answers .bottom-area::after { display: none !important; }
#afMain #answers .fr-chip { background-color: var(--af-panel) !important; background-image: var(--af-fill) !important; border-color: var(--af-border) !important; color: var(--af-text) !important; }
#afMain #answers .fr-chip.fr-selected { border-color: var(--af-accent) !important; box-shadow: inset 0 0 0 1px var(--af-accent); }
/* The same inner surface is used by fields and both TinyMCE toolbars. */
#afMain .af-upload > .row { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 16px; margin: 0; align-items: center; }
#afMain .af-upload > .row > div { padding: 0; max-width: none; width: auto; }
#afMain .af-upload #pic { width: 88px !important; height: 88px; object-fit: cover; border: 1px solid var(--af-border); border-radius: 12px; }
#afMain.af-page .smile_input_forum { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
#afMain.af-page #smile_btn { float: none; width: 42px; height: 42px; padding: 0; display: inline-flex; justify-content: center; align-items: center; }
#afMain.af-page #smile_btn::after, #afMain.af-page #smile_btn::before { display: none !important; content: none !important; }
#afMain.af-page #smile_btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
#afMain.af-edit-topic-page > .block > hr { border-color: var(--af-border) !important; margin: 20px 0; }
#afMain.af-edit-topic-page .af-topic-setting > .btn { margin-top: 10px; }
#afMain .news-composer, #afMain .tox.tox-tinymce { border: 1px solid var(--af-border) !important; border-radius: 11px !important; background-color: var(--af-panel) !important; background-image: var(--af-fill) !important; box-shadow: inset 0 1px 0 #ffffff0c, 0 2px 5px var(--af-shadow) !important; }
#afMain .news-composer .tox.tox-tinymce { border: 0 !important; border-radius: 11px 11px 0 0 !important; }
/* The full forum toolbar needs room beyond the old 260px reply slot. */
#afMain #send_answer .news-editor-slot { height: auto !important; min-height: 400px !important; }
#afMain #send_answer .news-editor-slot .tox.tox-tinymce { height: auto !important; min-height: 400px; }
#afMain #send_answer .tox .tox-sidebar-wrap { min-height: 240px; }
#afMain #send_answer .news-editor-slot .tox.tox-tinymce.tox-fullscreen { height: 100vh !important; min-height: 0; border-radius: 0 !important; }
#afMain #send_answer .tox.tox-fullscreen .tox-sidebar-wrap { min-height: 0; }
#afMain .tox .tox-editor-header, #afMain .tox .tox-toolbar, #afMain .tox .tox-toolbar__primary, #afMain .tox .tox-toolbar-overlord,
#afMain .tox .tox-menubar, #afMain .tox .tox-statusbar, #afMain .tox .tox-edit-area__iframe {
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important; color: var(--af-text) !important; border-color: var(--af-border) !important; box-shadow: none !important;
}
#afMain .tox .tox-tbtn, #afMain .tox .tox-mbtn, #afMain .tox .tox-statusbar a, #afMain .tox .tox-statusbar__path-item { color: var(--af-text) !important; }
#afMain .tox .tox-tbtn svg { fill: currentColor !important; }
#afMain .tox .tox-tbtn--enabled { background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important; }
#afMain .tox .tox-toolbar__group { border-color: var(--af-border) !important; }
#afMain .news-composer .news-composer-actions { border-color: var(--af-border) !important; }
#afMain #send_answer .news-composer-actions #news_smile_picker svg,
#afMain #send_answer .news-composer-actions #news_attach_button svg { color: var(--af-text) !important; stroke: currentColor !important; }
#afMain #news_upload_status { color: var(--af-muted); }
/* Forum administration, including fragments loaded by the existing AJAX handlers. */
#afMain.af-admin-page #sections { width: 100%; min-width: 0; }
#afMain.af-admin-page .table-responsive { border: 1px solid var(--af-border); border-radius: 10px; }
#afMain.af-admin-page table { margin: 0; min-width: 870px; background: transparent !important; border: 0 !important; color: var(--af-text); }
#afMain.af-admin-page table th, #afMain.af-admin-page table td { background-color: var(--af-panel) !important; background-image: var(--af-fill) !important; border-color: var(--af-border) !important; padding: 12px; color: var(--af-text) !important; vertical-align: middle; }
#afMain.af-admin-page table input.form-control { min-width: 140px; }
#afMain.af-admin-page table tbody[id^="forums"] td:first-child { min-width: 76px; }
#afMain.af-admin-page table tbody[id^="forums"] td:nth-child(2) { width: 180px; }
#afMain.af-admin-page table tbody[id^="forums"] td:nth-child(2) input { width: 100%; }
#afMain.af-admin-page table img { width: 50px; height: 50px; object-fit: cover; border-radius: 10px; }
#afMain.af-admin-page .btn-group-vertical { gap: 6px; }
#afMain.af-admin-page .btn-group-vertical .btn { margin: 0; font-size: 12px !important; }
#afMain.af-admin-page form[id^="section_settings"] > .btn { margin: 0 5px 6px 0; }
#afMain.af-admin-page .af-admin-section > .block_head.mt-4 { margin-top: 20px !important; }
#afMain.af-admin-page .af-forum-modal { z-index: 1000200 !important; }
body.modal-open:has(#afMain .af-forum-modal.show) > .modal-backdrop { z-index: 1000100 !important; }
#afMain.af-admin-page .modal-content { padding: 0 !important; }
#afMain.af-admin-page .modal-header { align-items: center; border-color: var(--af-border) !important; background: transparent !important; padding: 18px; }
#afMain.af-admin-page .modal-title { margin: 0; font-size: 18px; color: var(--af-text) !important; }
#afMain.af-admin-page .modal-header .close { order: 2; margin: 0 0 0 auto; padding: 4px 8px; color: var(--af-text) !important; text-shadow: none; opacity: .9; }
#afMain.af-admin-page .modal-body { padding: 18px; }
#afMain.af-admin-page .modal-body #image { max-width: 80px; border-radius: 10px; margin-bottom: 12px; }
/* Keep all inner surfaces unchanged; highlight interactive edges and links. */
#afMain #forum_topics .af-topic-row:focus-within h3 svg { color: var(--af-accent); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    #afMain #forum_topics .af-topic-row:hover h3 svg { color: var(--af-accent); opacity: 1; }
}
#afMain #forum_topics h3 a:is(:hover, :focus-visible) {
    color: var(--af-accent) !important; -webkit-text-fill-color: var(--af-accent) !important;
}
#afMain #forum_topics a:is(:hover, :focus-visible),
#afMain #answers .top-area a:is(:hover, :focus-visible),
#afMain #answers .edited a:is(:hover, :focus-visible) {
    text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
/* Match the composer/post selectors so their !important base borders cannot win. */
#afMain.af-page :is(.btn, #smile_btn):not(:disabled):not(.disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
#afSidebar .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
#afMain #send_answer .news-composer-actions :is(#send_btn, #news_smile_picker, #news_attach_button):not(:disabled):not(.disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
#afMain #answers .bottom-area .btn-group .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
#afMain #answers .fr-chip:not(:disabled):not(.disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
#afMain #pagination2 li:not(.disabled) a:not([aria-disabled="true"]):is(:hover, :focus-visible) {
    border-color: var(--af-accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--af-accent) 22%, transparent), var(--af-hover-shadow) !important;
}
#afMain .tox :is(.tox-tbtn, .tox-mbtn):not(:disabled):not(.tox-tbtn--disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important;
    box-shadow: inset 0 0 0 1px var(--af-hover-border) !important;
}
#afMain .tox :is(.tox-tbtn, .tox-mbtn):is(:disabled, .tox-tbtn--disabled, [aria-disabled="true"]) {
    background: transparent !important; box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
    #afMain.af-page .btn, #afSidebar .btn,
    #afMain #send_answer .news-composer-actions :is(#send_btn, #news_smile_picker, #news_attach_button),
    #afMain.af-page #smile_btn { transition: none; }
}
@media (max-width: 767px) {
    #afMain.af-admin-page table, #afMain.af-admin-page table tbody { display: block; min-width: 0; width: 100%; }
    #afMain.af-admin-page table thead { display: none; }
    #afMain.af-admin-page table tbody[id^="forums"] > tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-bottom: 1px solid var(--af-border); padding: 10px; gap: 10px; background-color: var(--af-panel) !important; background-image: var(--af-fill) !important; }
    #afMain.af-admin-page table tbody[id^="forums"] > tr:last-child { border-bottom: 0; }
    #afMain.af-admin-page table tbody[id^="forums"] > tr > td { display: block; width: auto !important; min-width: 0 !important; border: 0; padding: 0; background: transparent !important; }
    #afMain.af-admin-page table tbody[id^="forums"] > tr > td:nth-child(-n+4) { grid-column: 1 / -1; }
    #afMain.af-admin-page table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--af-muted); font-size: 11px; }
    #afMain.af-admin-page table .btn .d-none.d-lg-block { display: block !important; }
    #afMain.af-admin-page table .btn .d-block.d-lg-none { display: none !important; }
}
@media (max-width: 575px) {
    #afMain.af-forum-page > .block { padding: 12px !important; border-radius: 13px !important; margin-bottom: 14px; }
    #afMain #forum_topics .af-topic-last > a { font-size: 12px; }
}
@media (max-width: 600px) {
    #afMain.af-page:not(.af-forum-page) > .block, #afMain.af-admin-page .block { padding: 12px !important; margin-bottom: 14px; }
    #afMain.af-page h1.block_head { font-size: 18px !important; }
    #afMain #answers > div[id^="answer"] { grid-template-columns: 54px minmax(0,1fr) !important; }
    #afMain #answers > div[id^="answer"] > .center-area > .left-side { grid-area: 1 / 1 !important; padding: 12px 0 !important; }
    #afMain #answers > div[id^="answer"] > .center-area > .right-side { grid-area: 2 / 1 / auto / -1 !important; padding: 12px !important; }
    #afMain #answers .top-area { padding: 12px 10px !important; }
    #afMain #answers .top-area .right-side { flex-basis: 100%; justify-content: flex-start; }
    #afMain #answers .center-area > .left-side > img, #afMain #answers .forum-framed-avatar, #afMain #answers .forum-framed-avatar-image { width: 36px !important; height: 36px !important; }
    #afMain #answers .forum-framed-avatar img:not(.forum-framed-avatar-image) { width: 48px !important; height: 48px !important; }
    #afMain #answers .with_code { font-size: 14px; }
    #afMain #answers .bottom-area { flex-wrap: wrap; }
    #afMain .af-upload > .row { grid-template-columns: minmax(0,1fr); gap: 12px; }
    #afMain.af-admin-page .modal-dialog { margin: 12px; }
}

/* Smile and reaction pickers are mounted under body, outside the forum root.
   Scope them to forum pages and inherit the active appearance directly. */
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper),
html body:has(#afMain #answers) .fr-picker,
html body:has(#afMain #text) .tox-tinymce-aux {
    --af-panel: var(--private-final-panel, #182940);
    --af-panel-top: var(--private-final-panel-top, #20344f);
    --af-text: var(--private-final-text, #eef4fb);
    --af-muted: var(--private-final-muted, #b9c8d8);
    --af-border: var(--private-final-border, rgba(167,218,255,.2));
    --af-shadow: var(--private-final-shadow, rgba(3,10,20,.55));
    --af-accent: var(--private-accent, var(--as-ui-accent, #b9c8d8));
    --af-fill: var(--private-panel-fill, linear-gradient(145deg, rgba(255,255,255,.018), transparent 34%), linear-gradient(180deg, var(--af-panel-top), var(--af-panel)));
}
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper),
html body:has(#afMain #answers) .fr-picker {
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important;
    color: var(--af-text) !important; border: 1px solid var(--af-border) !important; border-radius: 12px !important;
    box-shadow: inset 0 1px 0 #ffffff0e, 0 8px 20px var(--af-shadow) !important;
    max-width: calc(100vw - 24px) !important;
}
html[data-private-mode="neutral"][data-private-theme="none"] body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper),
html[data-private-mode="neutral"][data-private-theme="none"] body:has(#afMain #answers) .fr-picker,
html[data-private-mode="neutral"][data-private-theme="none"] body:has(#afMain #text) .tox-tinymce-aux { --af-accent: var(--af-text); }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) :is(.popover-body, .popover-header, .smiles-wrapper, .smiles-display, .smiles-categories) {
    background: transparent !important; color: var(--af-text) !important; border-color: var(--af-border) !important;
    scrollbar-color: var(--af-muted) transparent !important;
}
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) .smiles-wrapper { max-width: calc(100vw - 28px) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) :is(.smiles-display, .smiles-categories)::-webkit-scrollbar-track { background: transparent !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) :is(.smiles-display, .smiles-categories)::-webkit-scrollbar-thumb { background: var(--af-muted) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) .smile-category.active::after { background: var(--af-accent) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) .smile-category:hover { background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) .smiles-display :is(img.smile, img.sticker):hover { background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important; outline-color: var(--af-accent) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) :is(.smiles-buy-heading, .lock-image) { background-color: var(--af-panel) !important; background-image: var(--af-fill) !important; color: var(--af-text) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) :is(.lock-image, .lock-icon, .lock-icon-large) svg path { stroke: var(--af-accent) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) :is(.buy-smile-access, .buy-sticker-pack) {
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important;
    border: 1px solid var(--af-border) !important; color: var(--af-text) !important;
}
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper) :is(.buy-smile-access, .buy-sticker-pack):is(:hover, :focus-visible) { border-color: var(--af-accent) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper).bs-popover-top > .arrow::before { border-top-color: var(--af-border) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper).bs-popover-top > .arrow::after { border-top-color: var(--af-panel) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper).bs-popover-bottom > .arrow::before { border-bottom-color: var(--af-border) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper).bs-popover-bottom > .arrow::after { border-bottom-color: var(--af-panel-top) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper).bs-popover-left > .arrow::before { border-left-color: var(--af-border) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper).bs-popover-left > .arrow::after { border-left-color: var(--af-panel) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper).bs-popover-right > .arrow::before { border-right-color: var(--af-border) !important; }
html body:has(#afMain :is(#smile_btn, #news_smile_picker)) .popover:has(.smiles-wrapper).bs-popover-right > .arrow::after { border-right-color: var(--af-panel) !important; }

/* Preserve the reaction module's grid, positioning and emoji artwork. */
html body:has(#afMain #answers) .fr-picker { scrollbar-color: var(--af-muted) transparent; }
html body:has(#afMain #answers) .fr-picker::-webkit-scrollbar-track { background: transparent !important; }
html body:has(#afMain #answers) .fr-picker::-webkit-scrollbar-thumb { background: var(--af-muted) !important; }
html body:has(#afMain #answers) .fr-picker .fr-picker-heading { color: var(--af-muted) !important; }
html body:has(#afMain #answers) .fr-picker :is(.fr-close, .fr-choice) {
    background: transparent !important; color: var(--af-text) !important;
    box-shadow: none !important; transition: background-color .15s, border-color .15s, color .15s;
}
html body:has(#afMain #answers) .fr-picker .fr-close { border-radius: 8px; }
html body:has(#afMain #answers) .fr-picker .fr-choice { border-color: transparent !important; }
html body:has(#afMain #answers) .fr-picker :is(.fr-close, .fr-choice):is(:hover, :focus-visible),
html body:has(#afMain #answers) .fr-picker .fr-choice[aria-pressed="true"] {
    background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important;
    border-color: var(--af-accent) !important; color: var(--af-text) !important;
}
html body:has(#afMain #answers) .fr-picker :is(.fr-close, .fr-choice):focus-visible {
    outline: 2px solid var(--af-accent) !important; outline-offset: 2px;
}

/* TinyMCE mounts menus and modal dialogs outside the editor root. */
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-menu, .tox-dialog) {
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important;
    color: var(--af-text) !important; border: 1px solid var(--af-border) !important; border-radius: 10px;
    box-shadow: inset 0 1px 0 #ffffff0e, 0 8px 20px var(--af-shadow) !important;
}
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-dialog__header, .tox-dialog__body, .tox-dialog__body-content, .tox-dialog__footer, .tox-dialog__body-nav, .tox-collection__group, .tox-collection__item) {
    background: transparent !important; color: var(--af-text) !important; border-color: var(--af-border) !important;
}
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-label, .tox-dialog__title, .tox-dialog__body-nav-item, .tox-checkbox__label, .tox-collection__item-label) { color: var(--af-text) !important; }
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-collection__item-accessory, .tox-collection__item-caret) { color: var(--af-muted) !important; }
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-icon, .tox-collection__item-icon, .tox-collection__item-caret, .tox-selectfield__icon) svg { fill: currentColor !important; }
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-textfield, .tox-textarea, .tox-selectfield select, .tox-button) {
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important;
    color: var(--af-text) !important; border-color: var(--af-border) !important; border-radius: 7px;
}
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-textfield, .tox-textarea)::placeholder { color: var(--af-muted) !important; }
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-textfield, .tox-textarea, .tox-selectfield select):focus { border-color: var(--af-accent) !important; box-shadow: 0 0 0 1px var(--af-accent) !important; }
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-collection__item--active:not(.tox-swatch), .tox-collection__item--enabled:not(.tox-swatch), .tox-dialog__body-nav-item--active) {
    background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important; color: var(--af-text) !important;
}
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-button, .tox-tbtn):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important;
    border-color: var(--af-accent) !important; color: var(--af-text) !important;
}
:is(#afMain .tox, html body:has(#afMain #text) .tox-tinymce-aux) :is(.tox-button, .tox-tbtn):disabled { opacity: .5; }

/* Same segmented pagination as notifications; retain server links as a fallback. */
#afMain #pagination2.af-pagination-ready {
    --af-pagination-accent: var(--private-accent, var(--private-final-text, #eee));
    display: flex; justify-content: center; width: 100%; margin: 16px 0 28px;
}
html[data-private-theme="none"][data-private-mode="neutral"] #afMain #pagination2.af-pagination-ready {
    --af-pagination-accent: var(--private-final-text, #fff);
}
#afMain #pagination2.af-pagination-ready > .pagination { display: none !important; }
	#afMain #pagination2 .af-pagination {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		max-width: 100%;
		margin: 0;
		overflow-x: auto;
		padding: 3px;
		box-sizing: border-box;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		scrollbar-width: thin;
	}
	#afMain #pagination2 .af-pagination-pages { display: flex; flex: 0 0 auto; align-items: center; margin-left: -1px; }

	#afMain #pagination2 .af-pagination :is(a, button, span) {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
		box-sizing: border-box !important;
		min-width: 38px !important;
		height: 38px !important;
		margin: 0 !important;
		padding: 0 10px !important;
		border: 1px solid var(--private-final-border, rgba(255,255,255,.16)) !important;
		border-radius: 0 !important;
		background-color: var(--private-final-panel, #223a5a) !important;
		background-image: linear-gradient(145deg, rgba(255,255,255,.018), transparent 34%), var(--private-panel-fill, none) !important;
		color: var(--private-final-text, #eee) !important;
		-webkit-text-fill-color: var(--private-final-text, #eee) !important;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.065), inset 0 -2px 3px var(--private-final-shadow, rgba(0,0,0,.24)), 0 3px 7px var(--private-final-shadow, rgba(0,0,0,.24)) !important;
		font: 700 13px/1 ui-sans-serif, system-ui, sans-serif !important;
		text-decoration: none !important;
		cursor: pointer !important;
	}

	#afMain #pagination2 .af-pagination > :is(a, button) + :is(a, button, .af-pagination-pages),
	#afMain #pagination2 .af-pagination-pages > :is(a, span) + :is(a, span),
	#afMain #pagination2 .af-pagination-pages + :is(a, button) { margin-left: -1px !important; }
	#afMain #pagination2 .af-pagination > :first-child { border-radius: 9px 0 0 9px !important; }
	#afMain #pagination2 .af-pagination > :last-child { border-radius: 0 9px 9px 0 !important; }

	#afMain #pagination2 .af-pagination :is(a, button):not(:disabled):is(:hover, :focus-visible),
	#afMain #pagination2 .af-pagination a.active {
		position: relative !important;
		z-index: 2 !important;
		border-color: var(--af-pagination-accent, var(--private-final-text, #eee)) !important;
		background-color: var(--private-final-hover, #292929) !important;
		background-image: var(--private-hover-fill, none) !important;
		color: var(--af-pagination-accent, var(--private-final-text, #eee)) !important;
		-webkit-text-fill-color: var(--af-pagination-accent, var(--private-final-text, #eee)) !important;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 3px var(--private-final-shadow, rgba(0,0,0,.24)), 0 4px 9px var(--private-final-shadow, rgba(0,0,0,.28)) !important;
		outline: none !important;
	}
	#afMain #pagination2 .af-pagination a.active {
		font-weight: 850 !important;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -3px 0 var(--af-pagination-accent, var(--private-final-text, #eee)), 0 4px 9px var(--private-final-shadow, rgba(0,0,0,.28)) !important;
		cursor: default !important;
	}
	#afMain #pagination2 .af-pagination button:disabled { opacity: .42 !important; cursor: default !important; }
	#afMain #pagination2 .af-pagination-ellipsis {
		min-width: 30px !important;
		padding: 0 7px !important;
		border-right: 0 !important;
		border-left: 0 !important;
		box-shadow: none !important;
		cursor: default !important;
	}

@media (max-width: 767px) {
    #afMain #pagination2 .af-pagination :is(a, button, span) {
        min-width: 34px !important; height: 36px !important; padding: 0 8px !important;
    }
}

/* Forum posts and editor controls use the same spoiler presentation as news. */
/* Only actual collapsible blocks get a frame: old articles also contain plain
   text wrappers named .spoiler without a title/content pair. */
#afMain.af-page:not(.af-news-page) .with_code .spoiler:not(:has(> .spoiler-title)):not(:has(> .spoiler-content)) {
    border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; box-shadow: none !important;
}
#afMain.af-page:not(.af-news-page) .with_code .spoiler:has(> .spoiler-title):has(> .spoiler-content) {
    margin: 14px 0; padding: 0; min-width: 0; overflow: hidden;
    border: 1px solid var(--af-border) !important; border-radius: 10px !important;
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important;
    box-shadow: inset 0 1px 0 #ffffff0a, 0 2px 5px var(--af-shadow);
}
#afMain.af-page:not(.af-news-page) .with_code .spoiler > .spoiler-title {
    display: flex; align-items: center; gap: 9px; width: auto; height: auto !important; min-height: 44px;
    padding: 10px 12px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; color: var(--af-text) !important; -webkit-text-fill-color: var(--af-text) !important;
    font: 600 14px/1.5 ui-sans-serif, system-ui, sans-serif; cursor: pointer;
}
#afMain.af-page:not(.af-news-page) .with_code .spoiler > .spoiler-title:hover { color: var(--af-accent) !important; -webkit-text-fill-color: var(--af-accent) !important; }
#afMain.af-page:not(.af-news-page) .with_code .spoiler-title > .title-text { float: none !important; height: auto !important; line-height: inherit !important; margin: 0; padding: 0; flex: 1; min-width: 0; }
#afMain.af-page:not(.af-news-page) .with_code .spoiler-title > .spoiler-toggle {
    display: inline-flex; align-items: center; justify-content: center; float: none !important; flex: 0 0 18px;
    width: 18px !important; height: 18px !important; margin: 0 !important; background: none !important;
    font-size: 0; line-height: 1; color: inherit;
}
#afMain.af-page:not(.af-news-page) .with_code .spoiler-title > .spoiler-toggle::before { content: "+"; font: 500 22px/1 ui-sans-serif, system-ui, sans-serif; }
#afMain.af-page:not(.af-news-page) .with_code .spoiler-title > .spoiler-toggle.hide-icon::before { content: "−"; }
#afMain.af-page:not(.af-news-page) .with_code .spoiler > .spoiler-content {
    margin: 0 !important; padding: 12px !important; min-width: 0; max-width: 100%;
    border: 0 !important; border-top: 1px solid var(--af-border) !important; border-radius: 0 !important;
    background: transparent !important; color: var(--af-text) !important;
    font: inherit; overflow-x: auto;
}
#afMain.af-page:not(.af-news-page) .with_code .spoiler-content table {
    display: table !important; width: 100% !important; height: auto !important; max-width: 100%;
    margin: 0; border-collapse: collapse; border-spacing: 0; overflow: visible;
    background: transparent !important; border: 1px solid var(--af-border) !important;
}
#afMain.af-page:not(.af-news-page) .with_code .spoiler-content table :is(th, td) {
    height: auto !important; padding: 8px 10px; vertical-align: top; overflow-wrap: anywhere;
    border: 1px solid var(--af-border) !important;
}
/* TinyMCE's floating table toolbar is attached to body, outside the news panel. */
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux :is(.tox-pop__dialog, .tox-toolbar, .tox-toolbar__primary) {
    background-color: var(--af-panel) !important; background-image: var(--af-fill) !important;
    border-color: var(--af-border) !important; color: var(--af-text) !important;
}
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-pop__dialog { border-radius: 9px; box-shadow: 0 4px 12px var(--af-shadow); }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-tbtn { color: var(--af-text) !important; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-tbtn svg { fill: currentColor !important; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-tbtn--disabled { opacity: .4; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-pop--bottom::after { border-top-color: var(--af-panel) !important; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-pop--bottom::before { border-top-color: var(--af-border) !important; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-pop--top::after { border-bottom-color: var(--af-panel) !important; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-pop--top::before { border-bottom-color: var(--af-border) !important; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-pop--left::after { border-right-color: var(--af-panel) !important; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-pop--left::before { border-right-color: var(--af-border) !important; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-pop--right::after { border-left-color: var(--af-panel) !important; }
html body:has(#afMain.af-page:not(.af-news-page)) .tox-tinymce-aux .tox-pop--right::before { border-left-color: var(--af-border) !important; }