/* ==========================================================================
   Forum to the site standard (owner, 6 Oct 2026: "forum should also match the rest of the
   site"). Every forum page: forum/index, category, topic, recent, search, new_topic,
   post_reply, edit_post, move_topic.

   The page carries `.benfica-layout.mb-modern.fm-std` and links mybenfica-modern.css, so
   the shared classes (.mb-box, .mb-row, .mb-seg, .mb-pill, .mb-chip, .mb-ico, .mb-empty,
   .mb-side-tiles …) and their --mb-* tokens are My Benfica's own. This file holds only what
   the forum needs on top, scoped to .fm-std (page) and .fph (hero):
     A. hero   B. page rhythm + heads   C. rows + chips + faces   D. pagination
     E. head pills   F. topic posts   G. forms   H. sidebar   I. phones   J. reduced motion
   Colours are theme tokens (light, dark and every skin). No box-shadow on buttons.
   ========================================================================== */

/* ==========================================================================
   A. The hero (hero.php forum branch -> fpuHeroHtml()): badge | eyebrow, title,
      subtitle | one stats panel. Sizes come from style.css's shared page-hero block.
   ========================================================================== */
.fph.hero-pv2--page .pv2 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 30rem); }
.fph.hero-pv2--page .fph-crumbs { flex-wrap: wrap; gap: .3rem; }
.fph.hero-pv2--page .fph-crumbs a { color: inherit; text-decoration: none; }
.fph.hero-pv2--page .fph-crumbs a:hover { text-decoration: underline; }
.fph.hero-pv2--page .fph-sep { opacity: .7; }
.fph.hero-pv2--page .fph-sub { max-width: 40rem; color: color-mix(in oklab, var(--theme-on-primary, #fff) 82%, transparent); }
.fph.hero-pv2--page .fph-sub a { color: inherit; }
.fph.hero-pv2--page .fph-side .pv2-stat { flex: 1 1 0; }
.fph.hero-pv2--page .fph-side .pv2-stat-label { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.1; }
@media (max-width: 1199.98px) {
    .fph.hero-pv2--page .pv2 { grid-template-columns: auto minmax(0, 1fr); }
    .fph.hero-pv2--page .fph-side { grid-column: 1 / -1; }
}

/* ==========================================================================
   B. Page rhythm: 1rem between sections, nothing under the last block; heads as
      My Benfica's (title left, controls right on one row).
   ========================================================================== */
.benfica-layout.fm-std .bn-main > .bn-section,
.benfica-layout.fm-std .bn-main > .fm-cols > .bn-section,
.benfica-layout.fm-std #forum-categories, .benfica-layout.fm-std #recent-topics, .benfica-layout.fm-std #recent-posts,
.benfica-layout.fm-std #forum-topics, .benfica-layout.fm-std #forum-subcategories { margin-bottom: 0; }
.benfica-layout.fm-std .bn-main > .bn-section + .bn-section,
.benfica-layout.fm-std .bn-main > .bn-section + .fm-cols,
.benfica-layout.fm-std .bn-main > .fm-cols + .bn-section,
.benfica-layout.fm-std .bn-main > .fm-flash + .bn-section { margin-top: 1rem; }
.benfica-layout.fm-std .bn-main > .bn-section:first-of-type { margin-top: 0; }
.benfica-layout.fm-std .bn-main > :last-child { margin-bottom: 0 !important; }
/* Two columns on wide screens (Recent Topics | Recent Posts), stacked below 992px. */
.benfica-layout.fm-std .fm-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 992px) { .benfica-layout.fm-std .fm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.benfica-layout.fm-std .fm-cols > .bn-section { margin: 0; }
.benfica-layout.fm-std .bn-section-head .bn-head-actions { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: nowrap; }
.benfica-layout.fm-std .bn-section-head .bn-head-actions a.mb-head-link { color: var(--mb-primary-ink); font-weight: 800; font-size: .8rem; text-decoration: none; }
.benfica-layout.fm-std .bn-section-head .bn-head-actions a.mb-head-link:hover { text-decoration: underline; }
.benfica-layout.fm-std .bn-section-head > h2 { flex-shrink: 0; white-space: nowrap; }
/* Flash messages and the player-filter line sit in the column's rhythm. */
.benfica-layout.fm-std .fm-flash:empty { display: none; }
.benfica-layout.fm-std .fm-flash .alert { margin-bottom: 0; border-radius: var(--mb-radius-sm); }

/* ==========================================================================
   C. Rows (THE row: icon | title over ONE meta line | side), chips, faces
   ========================================================================== */
.fm-std .mb-box.fm-box { padding: .3rem .7rem; overflow: visible; }
.fm-std .fm-row:not(a):hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); }
.fm-std .fm-row-title { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.fm-std .fm-row-link { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); text-decoration: none; }
.fm-std .fm-row-link:hover { color: var(--mb-primary-ink); text-decoration: none; }
.fm-std .fm-row-title > .mb-chip, .fm-std .fm-row-title > .fm-flag, .fm-std .fm-row-title > .mb-h-count { flex: 0 0 auto; }
.fm-std .fm-row-title > .mb-h-count { margin-left: 0; }
.fm-std .fm-row-meta { display: block; }
.fm-std .fm-row-meta a { color: inherit; text-decoration: none; }
.fm-std .fm-row-meta a:hover { color: var(--mb-primary-ink); text-decoration: underline; }
.fm-std .fm-row-meta i { margin-right: .2rem; font-size: .85em; color: var(--theme-accent, var(--mb-accent)); }
.fm-std .fm-dot { margin: 0 .3rem; opacity: .7; }
.fm-std .fm-preview { color: var(--mb-muted); }
.fm-std .fm-ico-num strong { font-size: .8rem; letter-spacing: -.02em; }
.fm-std .fm-row.is-sticky { background: linear-gradient(90deg, rgba(var(--mb-accent-rgb), .08), transparent 70%); }
.fm-std .fm-row--sub { padding-left: calc(1.1rem * var(--fm-depth, 1) + .1rem); }
.fm-std .fm-row--sub .mb-ico { width: 1.75rem; height: 1.75rem; font-size: .78rem; }
.fm-std .fm-row--sub .mb-row-title { font-size: .8rem; }
/* Search hits: a reply's matching text under the meta line (two lines, terms marked). */
.fm-std .fm-row--hit { align-items: start; }
.fm-std .fm-row--hit .mb-row-vis { padding-top: .1rem; }
.fm-std .fm-snippet {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: .3rem; padding: .3rem .55rem; border-radius: .55rem;
    background: var(--mb-soft); color: var(--mb-ink); font-size: .74rem; line-height: 1.4;
}
.fm-std .fm-snippet mark { padding: 0 .1rem; border-radius: .2rem; background: rgba(var(--mb-accent-rgb), .35); color: inherit; }
.fm-std .fm-row--hit .mb-row-side:empty { display: none; }
.fm-std .fm-row--hit { grid-template-columns: 2rem minmax(0, 1fr); }
/* Small chips beside a title (Sticky / New / Locked / Solved). */
.fm-std .fm-chip { padding: .06rem .45rem; font-size: .62rem; font-weight: 800; letter-spacing: .02em; line-height: 1.35; }
.fm-std .fm-chip i { font-size: .85em; }
.fm-std .fm-chip--new { background: var(--mb-primary); color: var(--mb-on); }
.fm-std .fm-chip--ok { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); }
.fm-std .fm-chip--ok i { color: var(--mb-ok-ink); }
.fm-std .fm-chip--accent { background: rgba(var(--mb-accent-rgb), .2); color: var(--mb-accent-ink); }
.fm-std .fm-chip--accent i { color: var(--mb-accent-ink); }
.fm-std .fm-chip--muted { background: var(--mb-soft-2); color: var(--mb-muted); }
.fm-std .fm-chip--muted i { color: var(--mb-muted); }
.fm-std .fm-flag { color: var(--mb-muted); font-size: .7rem; }
/* Round face bubbles. */
.fm-std .fm-face, .fph .fm-face {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: var(--fm-face, 28px); height: var(--fm-face, 28px);
    border-radius: 50%; overflow: hidden; background: var(--mb-soft-2);
}
.fm-std .fm-face > img, .fm-std .fm-face > .user-avatar-initials { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; }
.fm-std .fm-face > .user-avatar-initials { display: grid !important; place-items: center; font-size: calc(var(--fm-face, 28px) * .4) !important; line-height: 1; }
.fm-std .fm-last { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; white-space: nowrap; }
a.fm-last:hover .mb-when { color: var(--mb-primary-ink); }
.fm-std .fm-count { cursor: default; }

/* ==========================================================================
   D. Pagination: flat pills under the list, the page note on the left
   ========================================================================== */
.fm-std .fm-pager {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .6rem;
    margin-top: .1rem; padding: .45rem .1rem .35rem;
    border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent);
}
.fm-std .fm-pager-note { color: var(--mb-muted); font-size: .7rem; }
.fm-std .fm-pages { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.fm-std .fm-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.85rem; height: 1.85rem; padding: 0 .55rem; box-sizing: border-box;
    border: 1px solid var(--mb-line); border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink);
    font-size: .76rem; font-weight: 800; line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums;
    box-shadow: none; transition: background-color .2s ease;
}
.fm-std .fm-page i { font-size: .72em; }
.fm-std a.fm-page:hover { background: var(--mb-soft-2); color: var(--mb-ink); }
.fm-std .fm-page.is-on { background: var(--mb-primary); border-color: transparent; color: var(--mb-on); }
.fm-std .fm-page.is-off { opacity: .4; }
.fm-std .fm-page.is-gap { border-color: transparent; background: transparent; min-width: 1rem; padding: 0; color: var(--mb-muted); }
/* The topic page shows the pager above the posts too: no line there. */
.fm-std .fm-pager.fm-pager--top { border-top: 0; padding-top: 0; margin: 0 0 .1rem; }

/* ==========================================================================
   E. Head pills (30px via style.css's --bn-ctl-h rule): primary action green,
      others flat; icon-only on phones.
   ========================================================================== */
.fm-std .fm-pill { gap: .35rem; }
.fm-std .mb-pill.fm-pill--go { background: var(--mb-ok); border-color: transparent; color: #fff; }
.fm-std .mb-pill.fm-pill--go:hover { background: color-mix(in oklab, var(--mb-ok) 86%, black); color: #fff; }
.fm-std .mb-pill.fm-pill--go i { color: #fff; }
.fm-std .mb-pill.fm-pill--bad { color: var(--mb-bad-ink); }
.fm-std .bn-section-head .bn-head-actions .dropdown { display: inline-flex; }
.fm-std .bn-section-head .bn-head-actions .mb-pill.dropdown-toggle::after { margin-left: .15rem; vertical-align: .1em; }
.fm-std .bn-section-head .bn-head-actions .mb-pill i { font-size: .85em; }
.fm-std .mb-pill[data-subscribed="1"] { color: var(--mb-primary-ink); }
.fm-std .mb-pill.btn-success { background: var(--mb-ok); border-color: transparent; color: #fff; } /* Copy Link → "Copied" */
.fm-std .mb-pill[disabled] { opacity: .55; cursor: not-allowed; }
/* Removable filter chips in the first head (player / status filter). */
.fm-std .fm-fchip {
    display: inline-flex; align-items: center; gap: .3rem; height: var(--bn-ctl-h, 1.875rem); box-sizing: border-box;
    padding: 0 .65rem; border-radius: 999px;
    background: rgba(var(--mb-primary-rgb), .08); color: var(--mb-ink);
    font-size: var(--bn-ctl-fs, .74rem); font-weight: 800; text-decoration: none; white-space: nowrap;
}
.fm-std .fm-fchip:hover { background: rgba(var(--mb-primary-rgb), .14); color: var(--mb-ink); }
.fm-std .bn-section-head .fm-fchip i { color: var(--mb-primary-ink) !important; font-size: .8em !important; width: auto !important; }
.fm-std .bn-section-head .fm-fchip .fm-fchip-x { color: var(--mb-muted) !important; }

/* ==========================================================================
   F. Topic posts: one clean card each (the .mb-box frame), author face | name +
      rank chip over the time line | flat action pills; text; reactions.
   ========================================================================== */
.fm-std #topic-posts .posts-listing { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.fm-std #topic-posts .posts-listing > .post-item.fm-post {
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius);
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow); color: var(--mb-ink);
    overflow: visible; animation: none;
}
.fm-std #topic-posts .posts-listing > .post-item.fm-post:hover { background: var(--mb-card-bg); }
.fm-std #topic-posts .post-item.fm-post.highlighted { box-shadow: 0 0 0 2px rgba(var(--mb-accent-rgb), .8), var(--mb-shadow); border-color: transparent !important; }
.fm-std #topic-posts .post-item.forum-post-blocked { padding: .2rem .4rem; }
.fm-std .fm-post-solved {
    display: flex; align-items: center; gap: .35rem;
    padding: .3rem .9rem; border-radius: var(--mb-radius) var(--mb-radius) 0 0;
    background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); font-size: .72rem; font-weight: 800;
}
.fm-std .post-item.forum-solved-post { border-color: rgba(var(--mb-ok-rgb), .45) !important; }
.fm-std .fm-post-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .65rem;
    padding: .7rem .9rem .55rem;
}
/* forum-modern.css pads the old post parts with id-level !important rules; the card's own
   spacing wins here (same id specificity, later file). */
.fm-std #topic-posts .posts-listing .post-header.fm-post-head { padding: .7rem .9rem .55rem !important; background: transparent; border-bottom: 0; flex-wrap: initial; }
.fm-std #topic-posts .posts-listing .post-content-wrapper.fm-post-body { padding: 0 .9rem .7rem !important; width: auto; }
.fm-std #topic-posts .posts-listing .post-content { margin: 0 0 .5rem !important; }
.fm-std #topic-posts .posts-listing .post-footer.fm-post-foot { margin: 0; padding-top: .45rem !important; color: var(--mb-muted); font-size: .72rem; }
.fm-std .fm-post-who { display: flex; flex-direction: column; min-width: 0; }
.fm-std .fm-post-name { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; min-width: 0; font-size: .86rem; font-weight: 800; line-height: 1.25; }
.fm-std .fm-post-name > a { color: var(--mb-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-std .fm-post-name > a:hover { color: var(--mb-primary-ink); }
.fm-std .fm-rank { display: inline-flex; align-items: center; padding: .08rem .45rem; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .03em; line-height: 1.35; }
.fm-std .fm-post-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .1rem; color: var(--mb-muted); font-size: .7rem; line-height: 1.3; }
.fm-std .fm-post-meta a { color: inherit; text-decoration: none; }
.fm-std .fm-post-meta a:hover { color: var(--mb-primary-ink); }
.fm-std .fm-post-meta b { color: var(--mb-ink); font-weight: 800; }
.fm-std .fm-post-actions { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .25rem; }
/* Post action pills: flat, small; destructive red, confirm green. */
.fm-std .fm-act {
    display: inline-flex; align-items: center; gap: .3rem;
    height: 1.65rem; padding: 0 .6rem; box-sizing: border-box;
    border: 1px solid var(--mb-line); border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink);
    font-size: .68rem; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap;
    box-shadow: none; cursor: pointer; transition: background-color .2s ease;
}
.fm-std .fm-act i { font-size: .9em; color: var(--mb-primary-ink); }
.fm-std .fm-act:hover { background: var(--mb-soft-2); color: var(--mb-ink); }
.fm-std .fm-act--bad, .fm-std .fm-act--bad i { color: var(--mb-bad-ink); }
.fm-std .fm-act--go { background: var(--mb-ok); border-color: transparent; color: #fff; }
.fm-std .fm-act--go i { color: #fff; }
.fm-std .fm-act--go:hover { background: color-mix(in oklab, var(--mb-ok) 86%, black); color: #fff; }
.fm-std .fm-act--okline, .fm-std .fm-act--okline i { color: var(--mb-ok-ink); }
.fm-std .fm-post-body { padding: 0 .9rem .7rem; }
.fm-std .fm-post-body .post-content { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.fm-std .fm-post-body .post-content > :last-child { margin-bottom: 0; }
.fm-std .fm-post-body .post-content blockquote,
.fm-std .fm-post-body .post-content .forum-quote,
.fm-std .fm-post-body .post-content .bbcode-quote {
    margin: .2rem 0 .6rem; padding: .5rem .75rem;
    border: 0; border-left: 3px solid rgba(var(--mb-primary-rgb), .5); border-radius: 0 var(--mb-radius-sm) var(--mb-radius-sm) 0;
    background: var(--mb-soft); color: var(--mb-ink); font-size: .84rem;
}
.fm-std .fm-post-foot {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .6rem;
    padding-top: .45rem; border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent);
}
.fm-std .fm-post-edited { color: var(--mb-muted); font-size: .68rem; }
.fm-std .fm-post-edited i { margin-right: .25rem; }
/* Reactions: a flat Like pill; the chosen reaction is a primary tint. */
.fm-std .forum-react-bar { position: relative; margin-left: auto; }
.fm-std .forum-react-summary { display: inline-flex; align-items: center; }
.fm-std .forum-react-icons .forum-react-chip { font-size: 14px; }
.fm-std .forum-react-count { margin-left: 4px; color: var(--mb-muted); font-size: .74rem; font-weight: 800; }
.fm-std .forum-like-wrapper { position: relative; display: inline-block; }
.fm-std .forum-like-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    height: 1.65rem; padding: 0 .65rem; box-sizing: border-box;
    border: 1px solid var(--mb-line) !important; border-radius: 999px;
    background: var(--mb-soft) !important; color: var(--mb-ink) !important;
    font-size: .7rem; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: none !important;
}
.fm-std .forum-like-btn i { color: var(--mb-primary-ink); margin: 0 !important; }
.fm-std .forum-like-btn:hover { background: var(--mb-soft-2) !important; }
.fm-std .forum-like-btn.active, .fm-std .forum-like-btn.active:hover, .fm-std .forum-like-btn.active:focus {
    background: rgba(var(--mb-primary-rgb), .1) !important; border-color: rgba(var(--mb-primary-rgb), .35) !important; color: var(--mb-primary-ink) !important;
}
.fm-std .forum-reactions-popup, .forum-reactions-popup {
    position: absolute; bottom: 100%; right: 0; margin-bottom: 6px;
    display: none; gap: 4px; padding: 6px 8px;
    background: var(--theme-surface, var(--bs-body-bg)); border: 1px solid var(--mb-ring, rgba(0, 0, 0, .07)); border-radius: 30px;
    box-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .12)); z-index: 1060; white-space: nowrap;
}
.forum-reactions-popup.show { display: flex; }
.forum-reaction-pick { border: 0; background: transparent; cursor: pointer; padding: 0; width: 38px; height: 38px; border-radius: 50%; font-size: 22px; line-height: 1; transition: transform .12s ease; }
.forum-reaction-pick:hover { transform: scale(1.3); }
/* @mentions inside posts. */
.fm-std .forum-mention { padding: 0 3px; border-radius: 3px; background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink); font-weight: 700; text-decoration: none; }
.fm-std .forum-mention:hover { text-decoration: underline; }
/* Topic entity widgets (match / player / club …) and the poll: one frame each, no card in a card. */
.fm-std .fm-widget { padding: .7rem .9rem; }
.fm-std .fm-widget .card { border: 0; box-shadow: none; background: transparent; }
.fm-std .fm-widget .card-body { padding: 0; }
.fm-std .fm-locked { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; color: var(--mb-muted); font-size: .82rem; }
.fm-std .fm-locked i { color: var(--mb-muted); }

/* The topic head's Actions / Share menus (entries are .fm-menu-item, see topic.php; the Share
   menu is moved to <body> by the page script, so this is not scoped). */
.dropdown-menu .fm-menu-item {
    display: block; width: 100%; padding: var(--bs-dropdown-item-padding-y, .25rem) var(--bs-dropdown-item-padding-x, 1rem);
    clear: both; border: 0; background: transparent; color: var(--bs-dropdown-link-color, var(--bs-body-color));
    font-size: .84rem; font-weight: 500; text-align: inherit; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.dropdown-menu .fm-menu-item:hover, .dropdown-menu .fm-menu-item:focus { background: var(--bs-dropdown-link-hover-bg, var(--bs-tertiary-bg)); color: var(--bs-dropdown-link-hover-color, var(--bs-body-color)); }
.dropdown-menu .fm-menu-item.text-danger { color: var(--bs-danger) !important; }

/* ==========================================================================
   G. Forms (new topic, reply, quick reply, edit, move, search): the .mb-box frame,
      fields with the soft surface, buttons as flat pills (post/save green).
   ========================================================================== */
.fm-std .fm-form { padding: .9rem; }
.fm-std .fm-form .form-label { margin-bottom: .3rem; color: var(--mb-ink); font-size: .76rem; font-weight: 800; }
.fm-std .fm-form .form-text, .fm-std .fm-form small.text-muted { font-size: .7rem; }
.fm-std .fm-form :is(.form-control, .form-select) {
    border: 1px solid color-mix(in oklab, var(--mb-line) 80%, transparent); border-radius: var(--mb-radius-sm);
    background-color: var(--mb-soft); color: var(--mb-ink); font-size: .86rem; box-shadow: none;
}
.fm-std .fm-form :is(.form-control, .form-select):focus { border-color: rgba(var(--mb-primary-rgb), .45); box-shadow: none; outline: 0; background-color: var(--mb-card-bg); }
.fm-std .fm-form .forum-editor { border-radius: var(--mb-radius-sm); }
.fm-std .fm-form .card {
    border: 1px solid color-mix(in oklab, var(--mb-line) 80%, transparent) !important; border-radius: var(--mb-radius-sm) !important;
    background: var(--mb-card-bg); box-shadow: none;
}
.fm-std .fm-form .card-header {
    background: var(--mb-soft) !important; color: var(--mb-ink) !important;
    border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent) !important;
    border-radius: var(--mb-radius-sm) var(--mb-radius-sm) 0 0 !important; padding: .45rem .8rem;
}
.fm-std .fm-form .card-header :is(h5, h6) { margin: 0; font-size: .8rem; font-weight: 800; }
.fm-std .fm-form .card-header i { color: var(--mb-primary-ink); }
.fm-std :is(.fm-form, .fm-box, .modal) .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .34rem .9rem; border-radius: 999px; border: 1px solid var(--mb-line);
    background: var(--mb-soft); color: var(--mb-ink);
    font-size: .78rem; font-weight: 800; line-height: 1.25; box-shadow: none !important;
}
.fm-std :is(.fm-form, .fm-box, .modal) .btn i { margin: 0 !important; }
.fm-std :is(.fm-form, .fm-box, .modal) .btn:hover { background: var(--mb-soft-2); color: var(--mb-ink); }
.fm-std :is(.fm-form, .fm-box, .modal) .btn.btn-sm { padding: .24rem .7rem; font-size: .72rem; }
.fm-std :is(.fm-form, .fm-box, .modal) .btn-success { background: var(--mb-ok); border-color: transparent; color: #fff; }
.fm-std :is(.fm-form, .fm-box, .modal) .btn-success:hover { background: color-mix(in oklab, var(--mb-ok) 86%, black); color: #fff; }
.fm-std :is(.fm-form, .fm-box, .modal) .btn-primary { background: var(--mb-primary); border-color: transparent; color: var(--mb-on); }
.fm-std :is(.fm-form, .fm-box, .modal) .btn-primary:hover { background: color-mix(in oklab, var(--mb-primary) 88%, black); color: var(--mb-on); }
.fm-std :is(.fm-form, .fm-box, .modal) .btn-danger { background: var(--mb-bad); border-color: transparent; color: #fff; }
.fm-std :is(.fm-form, .fm-box, .modal) :is(.btn-outline-danger, .btn-outline-danger i) { color: var(--mb-bad-ink); }
.fm-std :is(.fm-form, .fm-box, .modal) .btn-outline-danger:hover { background: rgba(var(--mb-bad-rgb), .1); }
.fm-std :is(.fm-form, .fm-box, .modal) :is(.btn-outline-success, .btn-outline-primary) { color: var(--mb-primary-ink); }
.fm-std .fm-form .form-check-label { font-size: .82rem; font-weight: 700; color: var(--mb-ink); }
.fm-std .fm-form .form-check-label :is(h5, h6) { display: inline; font-size: inherit; font-weight: inherit; }
.fm-std .fm-form .form-check-input:checked { background-color: var(--mb-ok); border-color: var(--mb-ok); }
.fm-std .fm-form .forum-form-actions { margin-top: .8rem !important; gap: .45rem; flex-wrap: wrap; }
.fm-std .fm-form .forum-form-actions > div { display: inline-flex; gap: .45rem; flex-wrap: wrap; }
.fm-std .fm-form > form > :is(h5, h6), .fm-std .fm-form > form .mb-3 > :is(h5, h6) { font-size: .82rem; font-weight: 800; }
.fm-std .fm-current { display: flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: var(--mb-radius-sm); background: var(--mb-soft-2); color: var(--mb-ink); font-size: .86rem; font-weight: 700; }
.fm-std .fm-current i { color: var(--mb-primary-ink); margin: 0 !important; }
.fm-std .fm-form-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.fm-std .fm-form .forum-toolbar { border-radius: var(--mb-radius-sm) var(--mb-radius-sm) 0 0; background: var(--mb-soft); }
.fm-std .fm-form .forum-toolbar + .forum-editor-content { border-top-left-radius: 0; border-top-right-radius: 0; }
.fm-std .fm-guide { margin: 0; padding: .2rem 0 .1rem 1.1rem; color: var(--mb-ink); font-size: .8rem; line-height: 1.55; }
.fm-std .fm-guide li::marker { color: var(--mb-primary-ink); }

/* ==========================================================================
   H. Sidebar: the #mbAside look (panels, 2-column tiles, compact Explore, search pill)
   ========================================================================== */
.benfica-layout.fm-std .bn-aside .bn-panel { padding-bottom: .75rem; }
.benfica-layout.fm-std .bn-aside .mb-side-tiles {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem;
    margin: 0; padding: 0; list-style: none;
}
.benfica-layout.fm-std .bn-aside .mb-side-tiles li { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .35rem .5rem; border-radius: .6rem; background: var(--mb-soft); }
.benfica-layout.fm-std .bn-aside .mb-side-tiles span { color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.benfica-layout.fm-std .bn-aside .mb-side-tiles b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.benfica-layout.fm-std .bn-aside .fm-side-links { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .55rem; }
.benfica-layout.fm-std .bn-aside .fm-side-links a { display: inline-flex; align-items: center; gap: .3rem; color: var(--mb-primary-ink); font-size: .74rem; font-weight: 800; text-decoration: none; }
.benfica-layout.fm-std .bn-aside .fm-side-links a:hover { text-decoration: underline; }
.benfica-layout.fm-std .bn-aside .bn-cta .bn-cta-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.benfica-layout.fm-std .bn-aside .bn-cta .bn-cta-links a {
    margin: 0; padding: .3rem .55rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .72rem; box-shadow: none;
}
/* The search pill: soft fill, one ring, no focus ring or second border. */
.fm-std .fm-search {
    position: relative; display: flex; align-items: center; gap: .45rem;
    height: var(--bn-ctl-h, 1.875rem); box-sizing: border-box; padding: 0 .2rem 0 .75rem; margin: 0;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: 999px;
    background: var(--mb-soft);
}
.fm-std .fm-search > i { color: var(--mb-muted); font-size: .74rem; }
.fm-std .fm-search input {
    flex: 1 1 auto; min-width: 0; height: 100%; padding: 0;
    border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent;
    color: var(--mb-ink); font-size: var(--bn-ctl-fs, .74rem); font-weight: 700;
}
.fm-std .fm-search input::placeholder { color: var(--mb-muted); font-weight: 600; }
.fm-std .fm-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fm-std .fm-search:focus-within { outline: 0; box-shadow: none; }
.fm-std .fm-search-go {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 1.45rem; height: 1.45rem; padding: 0; border: 0; border-radius: 50%;
    background: var(--mb-primary); color: var(--mb-on); font-size: .64rem; box-shadow: none; cursor: pointer;
}
/* Sidebar topic lists: compact rows. */
.fm-std .bn-aside .fm-mini .mb-row { grid-template-columns: 1.75rem minmax(0, 1fr); padding: .38rem .05rem; }
.fm-std .bn-aside .fm-mini .mb-row-side:empty { display: none; }
.fm-std .bn-aside .fm-mini .mb-ico { width: 1.75rem; height: 1.75rem; border-radius: .5rem; font-size: .74rem; }
.fm-std .bn-aside .fm-mini .mb-row-title { font-size: .78rem; font-weight: 700; }
.fm-std .bn-aside .fm-mini .mb-row-meta { font-size: .66rem; }
.fm-std .bn-aside .fm-mini .mb-row-meta i { margin-right: .2rem; color: var(--theme-accent, var(--mb-accent)); font-size: .85em; }
.fm-std .bn-aside .fm-mini .fm-face--row { --fm-face: 1.75rem !important; width: 1.75rem; height: 1.75rem; }
/* Filters panel: first in the sidebar (search page, category status filter). */
.fm-std .bn-aside .fm-filter-panel h3 .fm-reset { margin-left: auto; color: var(--mb-primary-ink); font-size: .74rem; font-weight: 800; text-decoration: none; }
.fm-std .bn-aside .fm-filter-panel h3 .fm-reset:hover { text-decoration: underline; }
.fm-std .fm-filter-list { display: grid; gap: .4rem; }
.fm-std .fm-pick {
    position: relative; display: flex; align-items: center; gap: .45rem; width: 100%; margin: 0;
    height: 2rem; box-sizing: border-box; padding: 0 .8rem;
    border: 1px solid var(--mb-line); border-radius: 999px; background: var(--mb-soft); color: var(--mb-ink);
    font-size: .76rem; font-weight: 800; cursor: pointer;
}
.fm-std .fm-pick:hover { background: var(--mb-soft-2); }
.fm-std .fm-pick > i { color: var(--mb-primary-ink); font-size: .8em; pointer-events: none; }
.fm-std .fm-pick > .fm-pick-chev { margin-left: auto; color: var(--mb-muted); font-size: .55rem; }
.fm-std .fm-pick select, .fm-std .fm-pick input {
    flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important;
    background: transparent; color: var(--mb-ink); font: inherit; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.fm-std .fm-pick input { cursor: text; font-weight: 700; }
.fm-std .fm-pick input::placeholder { color: var(--mb-muted); font-weight: 600; }
.fm-std .fm-pick.is-set { background: rgba(var(--mb-primary-rgb), .08); border-color: rgba(var(--mb-primary-rgb), .3); }
.fm-std .fm-pick-cap { margin: .15rem 0 -.1rem .2rem; color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.fm-std .fm-pick-seg { display: flex; }
.fm-std .fm-pick-seg .mb-seg { width: 100%; }
.fm-std .fm-pick-seg .mb-seg-btn { flex: 1 1 0; justify-content: center; }
/* The search page's query row: a wide search pill + the green Search pill. */
.fm-std .fm-query { display: flex; align-items: center; gap: .45rem; }
.fm-std .fm-query .fm-search { flex: 1 1 auto; height: 2.25rem; }
.fm-std .fm-query .fm-search input { font-size: .86rem; }
.fm-std .fm-query .mb-pill { height: 2.25rem; }

/* ==========================================================================
   I. Phones: icon-only head pills, the selected switch item keeps its label, heads
      never truncate (controls drop to their own row), rows keep one meta line.
   ========================================================================== */
@media (max-width: 767.98px) {
    .fm-std .bn-section-head .bn-head-actions :is(.fbtn-l, .subscribe-text) {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    html body .fm-std .bn-section-head .bn-head-actions .mb-pill:not(.fm-fchip) { width: var(--bn-ctl-h, 1.875rem); padding: 0; justify-content: center; }
    .fm-std .bn-section-head .bn-head-actions .mb-pill.dropdown-toggle::after { display: none; }
    .fm-std .mb-seg-btn.is-on .mb-seg-txt { display: inline; }
    .fm-std .fm-post-actions .fbtn-l { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .fm-std .fm-act { width: 1.65rem; padding: 0; justify-content: center; }
    .fm-std .fm-act.forum-solve-btn { width: auto; padding: 0 .6rem; }
    .fm-std .fm-post-head { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .25rem; }
    .fm-std #topic-posts .posts-listing .post-header.fm-post-head { padding: .6rem .7rem .5rem !important; }
    .fm-std #topic-posts .posts-listing .post-content-wrapper.fm-post-body { padding: 0 .7rem .6rem !important; }
    .fm-std .fm-post-actions { justify-content: flex-end; max-width: 9rem; }
    .fm-std .fm-post-body { padding: 0 .7rem .6rem; }
    .fm-std .fm-pager { justify-content: center; }
    .fm-std .fm-query { min-width: 0; }
    .fm-std .fm-query .fm-search { min-width: 0; }
    .fm-std .fm-query .mb-pill { width: 2.25rem; padding: 0; flex: 0 0 auto; }
    .fm-std .fm-query .mb-pill .fbtn-l { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* The icon tile already shows a pinned / locked topic: the chips give the title the room. */
    .fm-std .fm-row-title > :is(.fm-chip--accent, .fm-chip--muted) { display: none; }
    .fm-std .fm-pager-note { flex: 1 0 100%; text-align: center; }
}
/* Below 440px a head carrying a switch or more than one control puts them on their own
   full-width row under the title (style.css forces heads onto one row with !important, so
   this scoped override is more specific and !important). */
@media (max-width: 379.98px) {
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg),
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .fm-fchip) {
        flex-wrap: wrap !important; row-gap: .5rem !important;
    }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg) > h2,
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .fm-fchip) > h2 {
        flex: 1 1 auto !important; min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important;
    }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg)::after,
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .fm-fchip)::after { display: none !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg) > .bn-head-actions,
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .fm-fchip) > .bn-head-actions {
        flex: 1 0 100% !important; order: 20; display: flex !important; justify-content: flex-end; gap: .35rem; margin-left: 0 !important; min-width: 0;
    }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head > .bn-head-actions > .mb-seg { flex: 1 1 auto !important; min-width: 0; justify-content: space-between; overflow: hidden; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head > .bn-head-actions > .mb-seg > .mb-seg-btn { flex: 1 1 auto !important; justify-content: center; min-width: 0; }
}
@media (min-width: 440px) and (max-width: 767.98px) {
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .fm-fchip),
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg > :nth-child(99)) {
        flex-wrap: wrap !important; row-gap: .5rem !important;
    }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .fm-fchip) > h2,
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg > :nth-child(99)) > h2 {
        flex: 1 1 auto !important; min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important;
    }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .fm-fchip)::after,
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg > :nth-child(99))::after { display: none !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .fm-fchip) > .bn-head-actions,
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg > :nth-child(99)) > .bn-head-actions {
        flex: 1 0 100% !important; order: 20; display: flex !important; justify-content: flex-end; gap: .35rem; margin-left: 0 !important; min-width: 0;
    }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg > :nth-child(99)) > .bn-head-actions > .mb-seg { flex: 1 1 auto !important; justify-content: space-between; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg > :nth-child(99)) .mb-seg-btn { flex: 1 1 auto !important; justify-content: center; }
}
@media (max-width: 379.98px) {
    .fm-std .mb-box.fm-box { padding: .25rem .55rem; }
    .fm-std #topic-posts .posts-listing .post-header.fm-post-head { padding: .55rem .6rem .45rem !important; column-gap: .5rem; }
    .fm-std #topic-posts .posts-listing .post-content-wrapper.fm-post-body { padding: 0 .6rem .55rem !important; }
}

/* ==========================================================================
   J. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .fm-std .fm-page, .fm-std .fm-act, .fm-std .forum-like-btn, .forum-reaction-pick { transition: none !important; }
}

/* Phones (owner, 7 Oct 2026, topic page "does not look right on mobile"): head buttons are
   icon-only squares on the title row, and so is Copy Link after topic.php's script swaps its
   label for "Copied!" (plain text, no .fbtn-l to hide); post actions sit top-right of the
   author row instead of a row of their own. */
@media (max-width: 767.98px) {
    html body .fm-std .bn-section-head .bn-head-actions .mb-pill:not(.fm-fchip) { font-size: 0 !important; gap: 0; overflow: hidden; flex: 0 0 auto; }
    html body .fm-std .bn-section-head .bn-head-actions .mb-pill:not(.fm-fchip) > i { margin: 0 !important; font-size: .74rem !important; }
    .fm-std .bn-section-head .bn-head-actions { flex: 0 0 auto; }
}
/* A long topic title (owner, 7 Oct: "text too big"): smaller and at most two lines, so a match
   thread's full name does not take over the hero. Short titles keep the page-hero size. */
html body .fph.hero-pv2--page .pv2-name.fph-long {
    font-size: 1.05rem !important; line-height: 1.3 !important;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
@media (max-width: 767.98px) { html body .fph.hero-pv2--page .pv2-name.fph-long { font-size: .9rem !important; } }
/* Under 375px a head with four or more buttons (a member's topic head: Reply, Actions,
   Subscribe, Copy Link, Share) cannot fit beside its title, so the buttons take their own row
   and share it evenly instead of leaving a gap. 375px and up they stay on the title row. */
@media (max-width: 374.98px) {
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > :nth-child(4)) { flex-wrap: wrap !important; row-gap: .5rem !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > :nth-child(4)) > h2 { flex: 1 1 auto !important; min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > :nth-child(4))::after { display: none !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > :nth-child(4)) > .bn-head-actions { flex: 1 0 100% !important; order: 20; display: flex !important; gap: .35rem; margin-left: 0 !important; min-width: 0; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head > .bn-head-actions:has(> :nth-child(4)) > * { flex: 1 1 0 !important; min-width: 0; }
    html body .fm-std .bn-section-head .bn-head-actions:has(> :nth-child(4)) .mb-pill:not(.fm-fchip) { width: 100% !important; }
}
/* Phones: a head with four or more buttons keeps the standard look — dash, icon, title, colour
   line, buttons on the right (owner, 7 Oct 2026: "it should be the same as the others") — on
   tighter gaps, so it fits from 375px; the title never shrinks, the line takes the squeeze. */
@media (min-width: 375px) and (max-width: 767.98px) {
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > :nth-child(4)) { column-gap: .5rem !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > :nth-child(4)) > .bn-head-actions { gap: .25rem !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > :nth-child(4)) > h2 { flex: 0 0 auto !important; }
}
/* Head buttons always sit at the right edge on phones (owner, 7 Oct: "it should be on the
   right side"), however many there are. */
@media (max-width: 767.98px) {
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head > .bn-head-actions { margin-left: auto !important; justify-content: flex-end; }
}
/* The post's dashed divider sits under the author row, not at the bottom of the post
   (owner, 7 Oct 2026: "this line should be on top under the user info"). */
.fm-std #topic-posts .posts-listing .post-header.fm-post-head { border-bottom: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent) !important; }
.fm-std #topic-posts .posts-listing .post-content-wrapper.fm-post-body { padding-top: .65rem !important; }
.fm-std #topic-posts .posts-listing .post-footer.fm-post-foot { border-top: 0 !important; padding-top: .15rem !important; }

/* ==========================================================================
   K. The match board on a match thread (owner, 7 Oct 2026: "make this more modern and
   dynamic"). Dressed like the match hero: a left-club → right-club colour blend (theme
   gradient until forum-std.js has the colours), faint real-crest watermarks, white text.
   ========================================================================== */
.fm-std .fmx {
    --fmx-l: var(--theme-gradient-start, var(--mb-primary));
    --fmx-r: var(--theme-gradient-end, var(--mb-primary));
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: .9rem;
    padding: .9rem 1rem; border-radius: var(--mb-radius);
    background:
        radial-gradient(120% 140% at 50% 120%, rgba(0, 0, 0, .28), transparent 60%),
        linear-gradient(100deg, var(--fmx-l) 0%, color-mix(in oklab, var(--fmx-l) 50%, var(--fmx-r)) 50%, var(--fmx-r) 100%);
    box-shadow: var(--mb-shadow); color: #fff;
    transition: background .6s ease;
}
.fm-std .fmx::after {   /* one light sweep on arrival */
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
    transform: translateX(-100%); animation: fmxSweep 1.6s .35s ease-out forwards;
}
@keyframes fmxSweep { to { transform: translateX(100%); } }
.fm-std .fmx-wm {
    position: absolute; top: -12%; bottom: -12%; width: 38%; z-index: -1; pointer-events: none;
    background: var(--fmx-wm, none) center / contain no-repeat;
    filter: grayscale(1) contrast(1.1); mix-blend-mode: soft-light; opacity: .55;
}
.fm-std .fmx-wm--l { left: -6%; --fmx-wm: var(--fmx-l-crest); transform: rotate(-12deg); }
.fm-std .fmx-wm--r { right: -6%; --fmx-wm: var(--fmx-r-crest); transform: rotate(12deg); }
.fm-std .fmx > :not(.fmx-wm) { position: relative; z-index: 1; }

/* Glass chips: competition, status, details. */
.fm-std .fmx-top, .fm-std .fmx-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.fm-std .fmx-top { justify-content: space-between; }
.fm-std .fmx-chip {
    display: inline-flex; align-items: center; gap: .35rem; min-width: 0; max-width: 100%;
    height: 1.65rem; padding: 0 .65rem; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
    background: rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap;
}
.fm-std a.fmx-chip:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.fm-std .fmx-chip > i { font-size: .9em; opacity: .9; }
.fm-std .fmx-comp { overflow: hidden; }
.fm-std .fmx-comp-ic { display: inline-flex; flex: 0 0 auto; }
.fm-std .fmx-comp-ic img { width: 16px; height: 16px; object-fit: contain; }
.fm-std .fmx-comp-txt { overflow: hidden; text-overflow: ellipsis; }
.fm-std .fmx-round { opacity: .8; font-weight: 700; }
.fm-std .fmx-status.is-ft { background: rgba(0, 0, 0, .22); }
.fm-std .fmx-status.is-next { color: var(--theme-accent, #F4B223); }

/* The board. */
.fm-std .fmx-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; }
.fm-std .fmx-team { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #fff; text-decoration: none; }
.fm-std .fmx-team--away { flex-direction: row-reverse; text-align: right; }
.fm-std .fmx-team:hover { color: #fff; }
.fm-std .fmx-team:hover .fmx-name { text-decoration: underline; text-underline-offset: 3px; }
.fm-std .fmx-crest { display: inline-flex; flex: 0 0 auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.fm-std .fmx-crest img { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.fm-std .fmx-name { min-width: 0; font-size: 1.05rem; font-weight: 900; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, .3); overflow-wrap: anywhere; }
.fm-std .fmx-team--home { animation: fmxInL .7s cubic-bezier(.2, .8, .2, 1) both; }
.fm-std .fmx-team--away { animation: fmxInR .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fmxInL { from { opacity: 0; transform: translateX(-18px); } }
@keyframes fmxInR { from { opacity: 0; transform: translateX(18px); } }

.fm-std .fmx-mid {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 5.5rem;
    color: #fff; text-decoration: none; animation: fmxPop .6s .15s cubic-bezier(.2, .9, .3, 1.3) both;
}
.fm-std .fmx-mid:hover { color: #fff; }
@keyframes fmxPop { from { opacity: 0; transform: scale(.82); } }
.fm-std .fmx-score {
    display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .85rem;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px;
    background: rgba(0, 0, 0, .26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-size: 2.1rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.fm-std .fmx-dash { opacity: .6; font-weight: 700; }
.fm-std .fmx-score.fmx-goal { animation: fmxGoal .8s ease; }
@keyframes fmxGoal { 30% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); } }
.fm-std .fmx-res {
    display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 4px;
    font-size: .7rem; font-weight: 900; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.fm-std .fmx-res--w { background: var(--mb-ok, #198754); }
.fm-std .fmx-res--d { background: #6c757d; }
.fm-std .fmx-res--l { background: var(--mb-bad, #dc3545); }
.fm-std .fmx-vs {
    display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
    border: 2px solid var(--theme-accent, #F4B223); background: rgba(0, 0, 0, .22);
    font-size: .95rem; font-weight: 900; letter-spacing: .04em;
}
.fm-std .fmx-kick { font-size: 1rem; font-weight: 900; }
.fm-std .fmx-count { font-size: .72rem; font-weight: 800; color: var(--theme-accent, #F4B223); font-variant-numeric: tabular-nums; }
.fm-std .fmx-count:empty { display: none; }
.fm-std .fmx.is-live .fmx-score { box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), 0 0 18px rgba(255, 255, 255, .18); }

.fm-std .fmx-foot { padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.fm-std .fmx-cta {
    display: inline-flex; align-items: center; gap: .4rem; margin-left: auto;
    height: 1.65rem; padding: 0 .8rem; border-radius: 999px;
    background: #fff; color: var(--fmx-l, var(--mb-primary)); font-size: .72rem; font-weight: 900; text-decoration: none;
    transition: transform .2s ease;
}
.fm-std .fmx-cta:hover { color: var(--fmx-l, var(--mb-primary)); transform: translateX(2px); }
.fm-std .fmx-cta i { font-size: .85em; }
/* The live pill on glass. */
.fm-std .fmx-status .bn-live-pill, .fm-std .fmx-status [class*="live"] { box-shadow: none; }

@media (max-width: 575.98px) {
    .fm-std .fmx { padding: .8rem .75rem; gap: .75rem; }
    .fm-std .fmx-board { gap: .4rem; }
    .fm-std .fmx-team, .fm-std .fmx-team--away { flex-direction: column; text-align: center; gap: .4rem; }
    .fm-std .fmx-crest img { width: 3.4rem; height: 3.4rem; }
    .fm-std .fmx-name { font-size: .82rem; }
    .fm-std .fmx-score { font-size: 1.6rem; padding: .2rem .6rem; }
    .fm-std .fmx-mid { min-width: 4.5rem; }
    .fm-std .fmx-wm { width: 55%; opacity: .4; }
    .fm-std .fmx-top .fmx-comp { flex: 1 1 100%; justify-content: center; }
    .fm-std .fmx-top { justify-content: center; }
    .fm-std .fmx-foot { justify-content: center; }
    .fm-std .fmx-cta { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .fm-std .fmx::after, .fm-std .fmx-team--home, .fm-std .fmx-team--away, .fm-std .fmx-mid, .fm-std .fmx-score.fmx-goal { animation: none; }
    .fm-std .fmx::after { display: none; }
}

/* List rows reach the card's edges (owner, 7 Oct 2026: "there should not be any gap on the
   left or right or top or bottom"): a sticky row's tint and the hover fill run from edge to
   edge and from the card's top to its bottom; the text keeps its inset. */
.fm-std .mb-box.fm-box { --fm-px: .7rem; --fm-py: .3rem; }
@media (max-width: 379.98px) { .fm-std .mb-box.fm-box { --fm-px: .55rem; --fm-py: .25rem; } }
.fm-std .mb-box.fm-box > .fm-rows > .fm-row {
    margin-left: calc(-1 * var(--fm-px)); margin-right: calc(-1 * var(--fm-px));
    padding-left: calc(var(--fm-px) + .1rem); padding-right: calc(var(--fm-px) + .1rem);
}
.fm-std .mb-box.fm-box > .fm-rows > .fm-row--sub { padding-left: calc(var(--fm-px) + 1.1rem * var(--fm-depth, 1) + .1rem); }
.fm-std .mb-box.fm-box > .fm-rows:first-child > .fm-row:first-child {
    margin-top: calc(-1 * var(--fm-py)); padding-top: calc(.45rem + var(--fm-py));
    border-top-left-radius: var(--mb-radius); border-top-right-radius: var(--mb-radius);
}
.fm-std .mb-box.fm-box > .fm-rows:last-child > .fm-row:last-child {
    margin-bottom: calc(-1 * var(--fm-py)); padding-bottom: calc(.45rem + var(--fm-py));
    border-bottom-left-radius: var(--mb-radius); border-bottom-right-radius: var(--mb-radius);
}

/* A head with a switch keeps it on the title row, on the right, from 380px (owner, 7 Oct 2026:
   "it should be on the right"): icons only except the selected item, tight gaps, the title
   never shrinks and the colour line gives way first. Under 380px it takes its own row. */
@media (min-width: 380px) and (max-width: 767.98px) {
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg) { column-gap: .5rem !important; flex-wrap: nowrap !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg) > h2 { flex: 0 0 auto !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg)::after { min-width: 0 !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions .mb-seg) > .bn-head-actions { flex: 0 0 auto !important; width: auto !important; margin-left: auto !important; gap: .25rem !important; order: 10 !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head > .bn-head-actions > .mb-seg { flex: 0 0 auto !important; }
    body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head > .bn-head-actions > .mb-seg > .mb-seg-btn { flex: 0 0 auto !important; }
}

/* Phones: a list row is two lines, never three (owner, 7 Oct 2026: "on mobile it should be 2
   lines no more") — title, then the meta line (which already carries the time); the
   last-post face and time, a reply's #n and a category's last post are left out. */
@media (max-width: 767.98px) {
    .fm-std .fm-rows > .fm-row { grid-template-columns: 2rem minmax(0, 1fr) !important; }
    .fm-std .fm-rows > .fm-row > .mb-row-side { display: none !important; }
    .fm-std .fm-rows > .fm-row .fm-row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* The match board in the forum's own clothes (owner, 7 Oct 2026: "make it more like the forum
   style so it looks like it belongs"): the card frame, ink text, the standard soft chips and a
   primary pill; the two clubs' colours stay as a light wash in from each edge and the crests
   as faint watermarks. */
.fm-std .fmx {
    border: 1px solid var(--mb-ring); color: var(--mb-ink); box-shadow: var(--mb-shadow);
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--fmx-l) 14%, transparent) 0%,
            color-mix(in srgb, var(--fmx-l) 4%, transparent) 30%,
            transparent 45%, transparent 55%,
            color-mix(in srgb, var(--fmx-r) 4%, transparent) 70%,
            color-mix(in srgb, var(--fmx-r) 14%, transparent) 100%),
        var(--mb-card-bg);
}
.fm-std .fmx::after { background: linear-gradient(105deg, transparent 35%, rgba(var(--mb-primary-rgb), .07) 50%, transparent 65%); }
.fm-std .fmx-wm { mix-blend-mode: normal; filter: grayscale(1); opacity: .07; }
[data-bs-theme="dark"] .fm-std .fmx-wm { opacity: .1; filter: grayscale(1) invert(1); }
.fm-std .fmx-chip {
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent);
    background: var(--mb-soft); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--mb-ink);
}
.fm-std a.fmx-chip:hover { background: var(--mb-soft-2); color: var(--mb-primary-ink); }
.fm-std .fmx-chip > i { color: var(--theme-accent, var(--mb-accent)); opacity: 1; }
.fm-std .fmx-round { color: var(--mb-muted); opacity: 1; }
.fm-std .fmx-status.is-ft { background: var(--mb-soft); }
.fm-std .fmx-status.is-next { background: rgba(var(--mb-accent-rgb), .16); border-color: rgba(var(--mb-accent-rgb), .35); color: var(--mb-ink); }
.fm-std .fmx-team, .fm-std .fmx-team:hover, .fm-std .fmx-mid, .fm-std .fmx-mid:hover { color: var(--mb-ink); }
.fm-std .fmx-team:hover .fmx-name { color: var(--mb-primary-ink); }
.fm-std .fmx-name { text-shadow: none; }
.fm-std .fmx-crest { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .14)); }
.fm-std .fmx-score { border-color: color-mix(in oklab, var(--mb-line) 70%, transparent); background: var(--mb-soft); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--mb-ink); }
.fm-std .fmx-score.fmx-goal { animation: fmxGoalInk .8s ease; }
@keyframes fmxGoalInk { 30% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(var(--mb-primary-rgb), .18); } }
.fm-std .fmx.is-live .fmx-score { box-shadow: 0 0 0 2px rgba(var(--mb-primary-rgb), .25); }
.fm-std .fmx-vs { background: var(--mb-soft); color: var(--mb-ink); }
.fm-std .fmx-count { color: var(--mb-primary-ink); }
.fm-std .fmx-foot { border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent); }
.fm-std .fmx-cta, .fm-std .fmx-cta:hover { background: var(--mb-primary); color: var(--mb-on); }

/* Sidebar lists reach their panel's edges too (owner, 7 Oct 2026: "do the same no gap"): the
   dividers and the hover fill run edge to edge and the last row sits on the panel's bottom
   edge; the text keeps its inset (the panel pads 1rem 1rem .75rem). */
.benfica-layout.fm-std .bn-aside .bn-panel > .fm-mini:last-child > .fm-row {
    margin-left: -1rem; margin-right: -1rem; padding-left: calc(1rem + .05rem); padding-right: calc(1rem + .05rem);
}
.benfica-layout.fm-std .bn-aside .bn-panel > .fm-mini:last-child > .fm-row:last-child {
    margin-bottom: -.75rem; padding-bottom: calc(.38rem + .75rem); border-bottom: 0;
    border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
}
.benfica-layout.fm-std .bn-aside .bn-panel:has(> .fm-mini:last-child) { overflow: hidden; }

/* Phones: the last post comes back, on the right of the meta line (owner, 7 Oct 2026: "why
   last post does not show on the right by post info") — still two lines: the title across
   the row, then the meta on the left and the last poster's face + time on the right. */
@media (max-width: 767.98px) {
    .fm-std .fm-rows > .fm-row { grid-template-columns: 2rem minmax(0, 1fr) auto !important; grid-template-rows: auto auto; column-gap: .6rem; }
    .fm-std .fm-rows > .fm-row > .mb-row-vis { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
    .fm-std .fm-rows > .fm-row > .mb-row-main { display: contents; }
    .fm-std .fm-rows > .fm-row > .mb-row-main > .mb-row-title { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
    .fm-std .fm-rows > .fm-row > .mb-row-main > .mb-row-meta { grid-column: 2; grid-row: 2; min-width: 0; }
    .fm-std .fm-rows > .fm-row > .mb-row-side { display: inline-flex !important; grid-column: 3; grid-row: 2; justify-content: flex-end; margin: 0; min-width: 0; }
    .fm-std .fm-rows > .fm-row > .mb-row-side:empty { display: none !important; }
    .fm-std .fm-rows > .fm-row > .mb-row-side .fm-last { gap: .3rem; }
    .fm-std .fm-rows > .fm-row > .mb-row-side :is(img, .fm-face) { width: 1.1rem !important; height: 1.1rem !important; font-size: .55rem; }
    .fm-std .fm-rows > .fm-row > .mb-row-side .mb-when { font-size: .68rem; }
}
/* Phones: where the last post's time sits on the right, the meta line drops the start time so
   the reply and view counts stay in view (author · replies · views). */
@media (max-width: 767.98px) {
    .fm-std .fm-rows > .fm-row:has(.fm-last) .fm-row-meta > :is(.fm-meta-when, .fm-dot:has(+ .fm-meta-when)) { display: none; }
}

/* The composer is ONE frame (owner, 7 Oct 2026, quick reply: "does not look right"): the
   wrapper's border only, a hairline under the toolbar, the textarea borderless on the card
   colour — no frame-in-a-frame, no tinted strip down the sides — and the actions close under it. */
.fm-std .fm-form .forum-editor {
    margin-bottom: 0 !important; overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--mb-line) 80%, transparent); border-radius: var(--mb-radius-sm);
    background: var(--mb-card-bg);
}
.fm-std .fm-form .forum-editor:focus-within { border-color: rgba(var(--mb-primary-rgb), .45); }
.fm-std .fm-form .forum-editor > .forum-toolbar {
    border: 0; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: 0;
}
.fm-std .fm-form .forum-editor > .forum-editor-content,
.fm-std .fm-form .forum-editor > .forum-editor-content:focus {
    display: block; width: 100%; margin: 0; border: 0 !important; border-radius: 0 !important;
    background: var(--mb-card-bg); box-shadow: none; outline: 0;
}
.fm-std .fm-form .forum-editor + .alert.d-none + .fm-form-actions,
.fm-std .fm-form .forum-editor + .fm-form-actions { margin-top: .6rem; }

/* New Topic's entity search (owner, 7 Oct 2026: "not working right"): the result list was cut
   off by the form card's overflow and drawn as a plain Bootstrap list. The form card lets it
   out, and it is a site drop-down: card colour, one ring, shadow, compact one-line rows. */
.fm-std .mb-box.fm-form, .fm-std .fm-form .card, .fm-std .fm-form .card-body { overflow: visible !important; }
.fm-std #entity_search_results {
    margin-top: .3rem; padding: .25rem 0; max-height: 18rem;
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius-sm);
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
}
.fm-std #entity_search_results .list-group-item {
    display: block; padding: .5rem .8rem; margin: 0;
    border: 0; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); border-radius: 0;
    background: transparent; color: var(--mb-ink); font-size: .82rem; font-weight: 700; line-height: 1.3; text-decoration: none;
}
.fm-std #entity_search_results .list-group-item:last-child { border-bottom: 0; }
.fm-std #entity_search_results .list-group-item-action:hover,
.fm-std #entity_search_results .list-group-item-action:focus { background: color-mix(in oklab, var(--mb-soft) 80%, transparent); color: var(--mb-primary-ink); }
.fm-std #entity_search_results .list-group-item > .d-flex { gap: .55rem; min-width: 0; }
.fm-std #entity_search_results .list-group-item > .d-flex > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-std #entity_search_results .list-group-item i { flex: 0 0 auto; margin: 0 !important; color: var(--theme-accent, var(--mb-accent)) !important; }
.fm-std #entity_search_results .list-group-item.text-muted,
.fm-std #entity_search_results .list-group-item.text-danger { font-weight: 600; }

/* Phones (owner, 7 Oct 2026): a forum head's sort switch is icons only, the picked one
   included (its name stays as the tooltip), so the switch + New Topic share the title row
   with the colour line down to 375px instead of dropping to their own row. */
@media (max-width: 767.98px) {
    html body .fm-std .bn-section-head .bn-head-actions .fm-seg .mb-seg-btn .mb-seg-txt { display: none !important; }
    html body .fm-std .bn-section-head .bn-head-actions .fm-seg .mb-seg-btn { gap: 0 !important; padding-left: .55rem !important; padding-right: .55rem !important; }
}
/* With the icon-only sort switch a forum list head fits its title row from 360px: the
   own-row drop (max-width 379.98px above) now starts below 360px for these heads. */
@media (min-width: 360px) and (max-width: 379.98px) {
    html body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > .fm-seg):not(:has(.fm-fchip)) { flex-wrap: nowrap !important; row-gap: 0 !important; column-gap: .5rem !important; }
    html body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > .fm-seg):not(:has(.fm-fchip)) > h2 { flex: 0 0 auto !important; white-space: nowrap !important; }
    html body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > .fm-seg):not(:has(.fm-fchip))::after { display: block !important; flex: 1 1 0 !important; min-width: .75rem !important; order: 9 !important; }
    html body .benfica-layout.mb-modern.fm-std .bn-section > .bn-section-head:has(> .bn-head-actions > .fm-seg):not(:has(.fm-fchip)) > .bn-head-actions { flex: 0 0 auto !important; order: 10 !important; display: inline-flex !important; }
}

/* Topic Subscribe (owner, 7 Oct 2026: "it should be green and then red"): solid green while
   not subscribed, solid red once subscribed (Unsubscribe). topic.php's script flips
   data-subscribed, so the colour follows each click. */
html body .fm-std .mb-pill#subscribeBtn { border-color: transparent !important; color: #fff !important; transition: none !important; }
html body .fm-std .mb-pill#subscribeBtn i { color: #fff !important; }
html body .fm-std .mb-pill#subscribeBtn[data-subscribed="0"] { background: var(--mb-ok) !important; }
html body .fm-std .mb-pill#subscribeBtn[data-subscribed="0"]:hover { background: color-mix(in oklab, var(--mb-ok) 86%, black) !important; }
html body .fm-std .mb-pill#subscribeBtn[data-subscribed="1"] { background: var(--mb-primary, var(--theme-primary)) !important; }
html body .fm-std .mb-pill#subscribeBtn[data-subscribed="1"]:hover { background: color-mix(in oklab, var(--mb-primary, var(--theme-primary)) 86%, black) !important; }