/* ==========================================================================
   Rumour Mill + Deal Tracker — the modern page (rumors.php, Oct 2026)
   --------------------------------------------------------------------------
   Linked by rumors.php (inside the page) and by its hero (includes/
   rumor_page_ui.php rumorsHeroHtml(), inside #hero-container). Every selector
   starts at .ru-modern (the page: .benfica-layout.ru-modern, sidebars #ruAside /
   #ttAside), .ruh (the hero) or .ru-toast (the vote error toast).

   Owner rules followed: sections are bnSection(..., 'bare'); every item (card,
   row, form, empty state) is boxed EXACTLY like the sidebar .bn-panel (1px
   rgba(0,0,0,.07), --theme-radius-lg, --theme-shadow, dark variant); 1rem gaps;
   the switches are My Benfica's segmented pill (.mb-seg values); confirm/submit
   buttons green, destructive red, no button shadows; scrollers carry padding so
   card shadows are never clipped. Colours are theme tokens (literals only as
   var() fallbacks and neutral black/white alphas), so light, dark and every
   skin follow.

   Layers: A. tokens  B. hero  C. head switches  D. shared bits (box, pills,
           chips, empty, flash)  E. the card  F. vote bar  G. hot strip
           H. rows  I. board  J. form  K. sidebar  L. filter + motion  M. phones
   ========================================================================== */

/* ==========================================================================
   A. Tokens
   ========================================================================== */
.ru-modern, .ru-toast {
    --ru-card-bg: var(--bs-body-bg);
    --ru-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --ru-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --ru-line: var(--theme-border, var(--bs-border-color));
    --ru-ring: rgba(0, 0, 0, .07);
    --ru-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
    --ru-radius: var(--theme-radius-lg, 1.1rem);
    --ru-radius-sm: .7rem;
    --ru-ink: var(--theme-ink, var(--bs-body-color));
    --ru-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --ru-primary: var(--theme-primary, var(--bs-primary));
    --ru-primary-rgb: var(--theme-primary-rgb, 200, 16, 46);
    --ru-primary-ink: color-mix(in oklab, var(--ru-primary) 80%, var(--ru-ink));
    --ru-accent: var(--theme-accent, var(--bs-warning));
    --ru-accent-ink: color-mix(in oklab, var(--ru-accent) 62%, var(--ru-ink));
    --ru-ok: var(--theme-success, var(--bs-success));
    --ru-ok-rgb: var(--theme-success-rgb, 25, 135, 84);
    --ru-ok-ink: var(--theme-success-strong, var(--bs-success));
    --ru-bad: var(--theme-danger, var(--bs-danger));
    --ru-bad-rgb: var(--theme-danger-rgb, 220, 53, 69);
    --ru-bad-ink: var(--theme-danger-strong, var(--bs-danger));
    --ru-warn: var(--theme-warning, var(--bs-warning));
    --ru-warn-rgb: var(--theme-warning-rgb, 255, 193, 7);
    --ru-info: var(--theme-info, var(--bs-info));
    --ru-info-rgb: var(--theme-info-rgb, 13, 202, 240);
    --ru-on: var(--theme-on-primary, #fff);
    --ru-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
[data-bs-theme="dark"] .ru-modern, [data-bs-theme="dark"] .ru-toast {
    --ru-card-bg: var(--bs-tertiary-bg, #1e1e1e);
    --ru-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--ru-card-bg));
    --ru-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--ru-card-bg));
    --ru-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --ru-ring: rgba(255, 255, 255, .08);
    --ru-primary-ink: var(--theme-link, var(--ru-ink));
    --ru-accent-ink: var(--ru-accent);
    --ru-ok-ink: color-mix(in oklab, var(--ru-ok) 58%, white);
    --ru-bad-ink: color-mix(in oklab, var(--ru-bad) 58%, white);
}

/* ==========================================================================
   B. Hero (hero.php 'rumors' / 'transfertracker' → rumorsHeroHtml()).
      Sizes come from the shared .hero-pv2--page block at the end of style.css.
   ========================================================================== */
.ruh.hero-pv2--ru .ruh-badge { display: grid; place-items: center; }

/* ==========================================================================
   C. Head switches (My Benfica's .mb-seg values; links, no .btn)
   ========================================================================== */
.ru-modern .bn-section-head .bn-head-actions { gap: .4rem; }
.ru-modern .ru-seg {
    display: inline-flex; gap: .15rem; padding: .15rem;
    border-radius: 999px;
    background: var(--ru-soft);
    border: 1px solid color-mix(in oklab, var(--ru-line) 70%, transparent);
}
.ru-modern .ru-seg-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .62rem;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--ru-muted); font-size: .74rem; font-weight: 800; line-height: 1.3; white-space: nowrap;
    text-decoration: none; box-shadow: none; cursor: pointer;
    transition: background-color .22s var(--ru-ease), color .2s ease;
}
.ru-modern .ru-seg-btn i { font-size: .8em; }
.ru-modern .ru-seg-btn:hover { color: var(--ru-ink); }
.ru-modern .ru-seg-btn.is-on { background: var(--ru-primary); color: var(--ru-on); }
.ru-modern .ru-seg-btn:focus-visible { outline: 2px solid var(--ru-primary); outline-offset: 1px; }
.ru-modern .ru-dir-form { display: inline-flex; margin: 0; }
.ru-modern .ru-pick.ru-pick--dir { height: 1.72rem; padding: 0 .65rem 0 .6rem; font-size: .74rem; }
.ru-modern .ru-seg--views .ru-seg-btn { min-height: 1.4rem; }
.ru-modern .ru-h-short { display: none; }
@media (max-width: 575.98px) {
    .ru-modern .ru-h-long { display: none; }
    .ru-modern .ru-h-short { display: inline; }
    /* The direction picker becomes a round icon button (its native list still names each option). */
    .ru-modern .ru-pick.ru-pick--dir { width: 1.9rem; height: 1.9rem; padding: 0; justify-content: center; }
    .ru-modern .ru-pick--dir .ru-pick-chev { display: none; }
}
.ru-modern .ru-pick--dir .ru-pick-ico { color: var(--ru-primary-ink); font-size: .8em; }
.ru-modern .ru-pick--dir .ru-pick-select { font-weight: 800; color: var(--ru-ink); }

/* ==========================================================================
   D. Shared bits
   ========================================================================== */
/* THE frame: the sidebar .bn-panel's border, radius and shadow. */
.ru-modern .ru-box,
.ru-modern .ru-card,
.ru-modern .ru-row,
.ru-modern .ru-hot-card,
.ru-modern .ru-empty,
.ru-modern .ru-flash {
    background: var(--ru-card-bg);
    border: 1px solid var(--ru-ring);
    border-radius: var(--ru-radius);
    box-shadow: var(--ru-shadow);
    color: var(--ru-ink);
}
.ru-modern .bn-section { overflow: visible; }

.ru-modern .ru-kicker {
    display: flex; align-items: center; gap: .4rem;
    margin: 0 0 .6rem; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ru-accent-ink);
}

.ru-modern .ru-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .9rem; border-radius: 999px; border: 0;
    background: var(--ru-primary); color: var(--ru-on);
    font-size: .8rem; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: none;
}
.ru-modern .ru-pill:hover { color: var(--ru-on); filter: brightness(1.06); }
.ru-modern .ru-pill--ok { background: var(--ru-ok); }

.ru-modern .ru-empty {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding: 1rem 1.1rem; color: var(--ru-muted); font-size: .88rem;
}
.ru-modern .ru-empty[hidden] { display: none; }
.ru-modern .ru-empty-ico {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 2.4rem; height: 2.4rem; border-radius: .8rem;
    background: rgba(var(--ru-primary-rgb), .08); color: var(--ru-primary-ink); font-size: 1rem;
}
.ru-modern .ru-empty-txt { flex: 1 1 12rem; min-width: 0; }

.ru-modern .ru-flash {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1rem; margin-bottom: 1rem; font-size: .88rem; font-weight: 700;
}
.ru-modern .ru-flash.is-ok { color: var(--ru-ok-ink); }
.ru-modern .ru-flash.is-ok i { color: var(--ru-ok); }
.ru-modern .ru-flash.is-error { color: var(--ru-bad-ink); }
.ru-modern .ru-flash.is-error i { color: var(--ru-bad); }

/* Chips */
.ru-modern .ru-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ru-modern .ru-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .12rem .5rem; border-radius: 999px;
    background: var(--ru-soft); color: var(--ru-muted);
    font-size: .68rem; font-weight: 800; line-height: 1.5; white-space: nowrap;
}
.ru-modern .ru-chip i { font-size: .85em; }
.ru-modern .ru-chip--in { background: rgba(var(--ru-ok-rgb), .1); color: var(--ru-ok-ink); }
.ru-modern .ru-chip--out { background: rgba(var(--ru-warn-rgb), .16); color: color-mix(in oklab, var(--ru-warn) 45%, var(--ru-ink)); }
.ru-modern .ru-chip--fee { background: rgba(var(--ru-primary-rgb), .08); color: var(--ru-primary-ink); }
.ru-modern .ru-chip--summer i { color: var(--ru-accent); }
.ru-modern .ru-chip--winter i { color: var(--ru-info); }

/* Status chip */
.ru-modern .ru-status {
    display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto;
    padding: .12rem .5rem; border-radius: 999px;
    font-size: .66rem; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
    background: var(--ru-soft); color: var(--ru-muted);
}
.ru-modern .ru-status--open { background: rgba(var(--ru-primary-rgb), .08); color: var(--ru-primary-ink); }
.ru-modern .ru-status--advanced { background: rgba(var(--ru-info-rgb), .14); color: color-mix(in oklab, var(--ru-info) 50%, var(--ru-ink)); }
.ru-modern .ru-status--confirmed { background: rgba(var(--ru-ok-rgb), .12); color: var(--ru-ok-ink); }
.ru-modern .ru-status--debunked { background: rgba(var(--ru-bad-rgb), .1); color: var(--ru-bad-ink); }

/* Crests + faces */
.ru-modern .ru-crest { display: inline-block; flex: 0 0 auto; object-fit: contain; vertical-align: middle; margin: 0 !important; }
.ru-modern .ru-crest--none { display: inline-grid; place-items: center; color: var(--ru-muted); font-size: .7em; }
.ru-modern .ru-face-link { display: inline-flex; flex: 0 0 auto; border-radius: 50%; }
.ru-modern .ru-face { flex: 0 0 auto; box-shadow: 0 0 0 2px var(--ru-card-bg), 0 0 0 3px rgba(var(--ru-primary-rgb), .55); }
.ru-modern .ru-ini {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    border-radius: 50%; font-weight: 900; letter-spacing: .02em;
    background: linear-gradient(135deg, rgba(var(--ru-primary-rgb), .14), rgba(var(--ru-primary-rgb), .05));
    color: var(--ru-primary-ink);
    box-shadow: 0 0 0 2px var(--ru-card-bg), 0 0 0 3px rgba(var(--ru-primary-rgb), .25);
}

/* Reliability meter: five bars */
.ru-modern .ru-rel { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .7rem; font-weight: 800; color: var(--ru-muted); }
.ru-modern .ru-rel-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: .8rem; }
.ru-modern .ru-rel-bars i { display: block; width: 3px; border-radius: 2px; background: var(--ru-soft-2); }
.ru-modern .ru-rel-bars i:nth-child(1) { height: 30%; }
.ru-modern .ru-rel-bars i:nth-child(2) { height: 45%; }
.ru-modern .ru-rel-bars i:nth-child(3) { height: 62%; }
.ru-modern .ru-rel-bars i:nth-child(4) { height: 80%; }
.ru-modern .ru-rel-bars i:nth-child(5) { height: 100%; }
.ru-modern .ru-rel--hi .ru-rel-bars i.on { background: var(--ru-ok); }
.ru-modern .ru-rel--mid .ru-rel-bars i.on { background: var(--ru-warn); }
.ru-modern .ru-rel--lo .ru-rel-bars i.on { background: var(--ru-bad); }
.ru-modern .ru-rel--hi .ru-rel-txt { color: var(--ru-ok-ink); }
.ru-modern .ru-rel--lo .ru-rel-txt { color: var(--ru-bad-ink); }
.ru-modern .ru-rel--na .ru-rel-bars i { background: transparent; box-shadow: inset 0 0 0 1px var(--ru-line); }

.ru-modern .ru-pctpill {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-width: 2.8rem; padding: .15rem .5rem; border-radius: 999px;
    font-size: .74rem; font-weight: 900; font-variant-numeric: tabular-nums;
    background: var(--ru-soft); color: var(--ru-ink);
}
.ru-modern .ru-pctpill--hi { background: rgba(var(--ru-ok-rgb), .12); color: var(--ru-ok-ink); }
.ru-modern .ru-pctpill--mid { background: rgba(var(--ru-warn-rgb), .18); color: color-mix(in oklab, var(--ru-warn) 45%, var(--ru-ink)); }
.ru-modern .ru-pctpill--lo { background: rgba(var(--ru-bad-rgb), .1); color: var(--ru-bad-ink); }

/* ==========================================================================
   E. The card
   ========================================================================== */
.ru-modern .ru-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    align-items: stretch;
}
.ru-modern .ru-card {
    position: relative;
    display: flex; flex-direction: column; gap: .6rem;
    padding: .95rem 1rem .9rem;
    min-width: 0;
    scroll-margin: 6rem;
    transition: transform .2s var(--ru-ease), box-shadow .2s ease;
}
/* The direction edge: green for arrivals, amber for departures. */
.ru-modern .ru-card::before {
    content: ""; position: absolute; left: 1rem; right: 1rem; top: 0; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--ru-ok);
    opacity: .75;
}
.ru-modern .ru-card--out::before { background: var(--ru-warn); }
.ru-modern .ru-card.is-advanced::before { background: linear-gradient(90deg, var(--ru-info), var(--ru-ok)); opacity: 1; }
.ru-modern .ru-card.is-debunked::before { background: var(--ru-bad); opacity: .55; }
@media (hover: hover) {
    .ru-modern .ru-card:hover { transform: translateY(-2px); }
}
.ru-modern .ru-card-top { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ru-modern .ru-card-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.ru-modern .ru-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; min-width: 0; }
.ru-modern .ru-name {
    margin: 0; min-width: 0; font-size: 1rem; font-weight: 900; line-height: 1.2; color: var(--ru-ink);
    overflow-wrap: anywhere;
}
.ru-modern .ru-name a { color: inherit; text-decoration: none; }
.ru-modern .ru-name a:hover { color: var(--ru-primary-ink); }
.ru-modern .ru-move { display: flex; align-items: center; min-width: 0; }
.ru-modern .ru-move-in { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; font-size: .82rem; font-weight: 700; color: var(--ru-ink); }
.ru-modern .ru-club { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ru-modern .ru-club--tbc { color: var(--ru-muted); font-weight: 600; }
.ru-modern .ru-own { display: inline-flex; flex: 0 0 auto; }
.ru-modern .ru-arrow { flex: 0 0 auto; font-size: .7rem; color: var(--ru-muted); }

.ru-modern .ru-src {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem .6rem;
    font-size: .78rem; color: var(--ru-muted);
}
.ru-modern .ru-src-name { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; font-weight: 700; color: var(--ru-ink); }
.ru-modern .ru-src-name > i { color: var(--ru-muted); }
.ru-modern .ru-src a { color: inherit; text-decoration: none; }
.ru-modern .ru-src a:hover { color: var(--ru-primary-ink); text-decoration: underline; }
.ru-modern .ru-meta { margin-top: -.35rem; font-size: .72rem; color: var(--ru-muted); }

/* Admin row (Mill only) */
.ru-modern .ru-admin {
    display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
    padding-top: .55rem; border-top: 1px dashed var(--ru-line);
}
.ru-modern .ru-admin-lab { color: var(--ru-muted); font-size: .75rem; margin-right: auto; }
.ru-modern .ru-adm-f { margin: 0; display: inline-flex; }
.ru-modern .ru-adm {
    display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem;
    border-radius: 50%; border: 1px solid var(--ru-line); background: var(--ru-card-bg);
    color: var(--ru-muted); font-size: .72rem; box-shadow: none; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ru-modern .ru-adm--adv:hover { background: var(--ru-info); border-color: var(--ru-info); color: #fff; }
.ru-modern .ru-adm--ok { color: var(--ru-ok-ink); }
.ru-modern .ru-adm--ok:hover { background: var(--ru-ok); border-color: var(--ru-ok); color: #fff; }
.ru-modern .ru-adm--deb:hover { background: var(--ru-soft-2); color: var(--ru-ink); }
.ru-modern .ru-adm--del { color: var(--ru-bad-ink); }
.ru-modern .ru-adm--del:hover { background: var(--ru-bad); border-color: var(--ru-bad); color: #fff; }

/* Compact (the board) */
.ru-modern .ru-card--compact { gap: .5rem; padding: .8rem .8rem .75rem; }
.ru-modern .ru-card--compact::before { left: .8rem; right: .8rem; }
.ru-modern .ru-card--compact .ru-card-top { gap: .6rem; }
.ru-modern .ru-card--compact .ru-name { font-size: .88rem; }
.ru-modern .ru-card--compact .ru-move-in { font-size: .74rem; gap: .3rem; }
.ru-modern .ru-card--compact .ru-chip { font-size: .64rem; padding: .08rem .42rem; }
.ru-modern .ru-card--compact .ru-chip--in,
.ru-modern .ru-card--compact .ru-chip--out { display: none; }
.ru-modern .ru-card--compact .ru-src { font-size: .72rem; }

/* ==========================================================================
   F. The vote bar
   ========================================================================== */
.ru-modern .ru-vote { display: flex; flex-direction: column; gap: .4rem; margin-top: auto; }
.ru-modern .ru-vote-head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    font-size: .74rem; font-weight: 800; color: var(--ru-muted);
}
.ru-modern .ru-vb, .ru-modern .ru-vn { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ru-modern .ru-vb { color: var(--ru-ok-ink); }
.ru-modern .ru-vn { color: var(--ru-bad-ink); }
.ru-modern .ru-vb b, .ru-modern .ru-vn b { font-size: .9rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ru-modern .ru-vlab { font-weight: 700; color: var(--ru-muted); }
.ru-modern .ru-vtotal { font-variant-numeric: tabular-nums; }
.ru-modern .ru-vnone { display: none; flex: 1 1 auto; text-align: center; font-weight: 700; }
.ru-modern .ru-vote:not(.has-votes) .ru-vb,
.ru-modern .ru-vote:not(.has-votes) .ru-vn,
.ru-modern .ru-vote:not(.has-votes) .ru-vtotal { display: none; }
.ru-modern .ru-vote:not(.has-votes) .ru-vnone { display: block; }

.ru-modern .ru-bar {
    position: relative; display: flex; justify-content: space-between; gap: 3px;
    height: .6rem; border-radius: 999px; overflow: hidden;
    background: var(--ru-soft);
}
.ru-modern .ru-bar-b, .ru-modern .ru-bar-n {
    display: block; height: 100%;
    transition: width .55s var(--ru-ease), opacity .25s ease, filter .25s ease;
}
.ru-modern .ru-bar-b {
    border-radius: 999px 0 0 999px;
    background: linear-gradient(90deg, color-mix(in oklab, var(--ru-ok) 75%, white), var(--ru-ok));
    transform-origin: left center; animation: ruGrow .8s var(--ru-ease) both;
}
.ru-modern .ru-bar-n {
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, var(--ru-bad), color-mix(in oklab, var(--ru-bad) 75%, white));
    transform-origin: right center; animation: ruGrow .8s var(--ru-ease) both;
}
.ru-modern .ru-bar-b[style*="width:100%"], .ru-modern .ru-bar-b[style*="width: 100%"] { border-radius: 999px; }
.ru-modern .ru-bar-n[style*="width:100%"], .ru-modern .ru-bar-n[style*="width: 100%"] { border-radius: 999px; }
@keyframes ruGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The member's own call: their side glows, the other dims. */
.ru-modern .ru-vote.mine-b .ru-bar-n, .ru-modern .ru-vote.mine-n .ru-bar-b { opacity: .38; }
.ru-modern .ru-vote.mine-b .ru-bar-b, .ru-modern .ru-vote.mine-n .ru-bar-n { filter: saturate(1.25); }
.ru-modern .ru-vote.ru-pop .ru-vb b, .ru-modern .ru-vote.ru-pop .ru-vn b { animation: ruPop .35s var(--ru-ease); }
@keyframes ruPop { 40% { transform: scale(1.18); } }

.ru-modern .ru-vbtns { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ru-modern .ru-vbtn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .32rem .75rem; border-radius: 999px;
    border: 1px solid var(--ru-line); background: var(--ru-card-bg);
    font-size: .78rem; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap;
    box-shadow: none; cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.ru-modern .ru-vbtn:active { transform: scale(.96); }
.ru-modern .ru-vbtn--b { color: var(--ru-ok-ink); }
.ru-modern .ru-vbtn--n { color: var(--ru-bad-ink); }
.ru-modern .ru-vbtn--b:hover { border-color: var(--ru-ok); background: rgba(var(--ru-ok-rgb), .08); color: var(--ru-ok-ink); }
.ru-modern .ru-vbtn--n:hover { border-color: var(--ru-bad); background: rgba(var(--ru-bad-rgb), .07); color: var(--ru-bad-ink); }
.ru-modern .ru-vbtn--b[aria-pressed="true"] { background: var(--ru-ok); border-color: var(--ru-ok); color: #fff; }
.ru-modern .ru-vbtn--n[aria-pressed="true"] { background: var(--ru-bad); border-color: var(--ru-bad); color: #fff; }
.ru-modern .ru-vbtn-n {
    min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px;
    background: var(--ru-soft); color: var(--ru-ink);
    font-size: .7rem; font-weight: 900; line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums;
}
.ru-modern .ru-vbtn[aria-pressed="true"] .ru-vbtn-n { background: rgba(255, 255, 255, .25); color: #fff; }
.ru-modern .ru-card.is-busy .ru-vbtn { pointer-events: none; opacity: .75; }
.ru-modern .ru-mine { margin-left: auto; font-size: .72rem; font-weight: 800; color: var(--ru-muted); }
.ru-modern .ru-vote.mine-b .ru-mine { color: var(--ru-ok-ink); }
.ru-modern .ru-vote.mine-n .ru-mine { color: var(--ru-bad-ink); }
.ru-modern .ru-card--compact .ru-vbtns { gap: .3rem; }
.ru-modern .ru-card--compact .ru-vbtn { padding: .24rem .55rem; gap: .3rem; font-size: .72rem; }
.ru-modern .ru-verdict { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 800; }
.ru-modern .ru-verdict.is-right { color: var(--ru-ok-ink); }
.ru-modern .ru-verdict.is-wrong { color: var(--ru-bad-ink); }

/* ==========================================================================
   G. Hot right now
   ========================================================================== */
.ru-modern .ru-hot { margin-bottom: 1.1rem; }
.ru-modern .ru-hot[hidden] { display: none; }
.ru-modern .ru-hot-strip {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.ru-modern .ru-hot-card {
    position: relative; display: flex; align-items: center; gap: .65rem;
    padding: .7rem .8rem .7rem .75rem; min-width: 0;
    text-decoration: none;
    transition: transform .2s var(--ru-ease);
}
.ru-modern .ru-hot-card:hover { transform: translateY(-2px); color: var(--ru-ink); }
.ru-modern .ru-hot-rank {
    position: absolute; top: -.45rem; left: -.35rem;
    display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: var(--ru-primary); color: var(--ru-on); font-size: .68rem; font-weight: 900;
}
.ru-modern .ru-hot-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; flex: 1 1 auto; }
.ru-modern .ru-hot-name { font-size: .86rem; font-weight: 900; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ru-modern .ru-hot-move { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; font-size: .72rem; font-weight: 700; color: var(--ru-muted); }
.ru-modern .ru-hot-move .ru-club { max-width: 9rem; }
.ru-modern .ru-hot-meta { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 800; color: var(--ru-accent-ink); white-space: nowrap; }
.ru-modern .ru-hot-ring {
    --p: 0;
    flex: 0 0 auto; display: grid; place-items: center;
    width: 2.3rem; height: 2.3rem; border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--ru-card-bg) 76%, transparent 78%),
        conic-gradient(var(--ru-ok) calc(var(--p) * 1%), rgba(var(--ru-bad-rgb), .55) 0);
}
.ru-modern .ru-hot-ring b { font-size: .7rem; font-weight: 900; color: var(--ru-ink); font-variant-numeric: tabular-nums; }
.ru-modern .ru-hot-ring b::after { content: "%"; font-size: .55rem; }

/* ==========================================================================
   H. Rows (recently resolved, source rankings)
   ========================================================================== */
.ru-modern .ru-rows { display: grid; gap: 1rem; }
.ru-modern .ru-rows--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); align-items: stretch; }
.ru-modern .ru-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; min-width: 0; }
.ru-modern .ru-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ru-modern .ru-row-title { font-size: .9rem; font-weight: 900; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ONE meta line per row, ellipsis instead of wrapping (owner rule). */
.ru-modern .ru-row-sub {
    display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: .72rem; color: var(--ru-muted);
}
.ru-modern .ru-row-sub .ru-crest { margin: 0 .25rem 0 .35rem !important; vertical-align: -2px; }
.ru-modern .ru-row-sub b { font-weight: 700; color: var(--ru-ink); }
.ru-modern .ru-row-sub .ru-in { color: var(--ru-ok); }
.ru-modern .ru-row-sub .ru-out { color: color-mix(in oklab, var(--ru-warn) 70%, var(--ru-ink)); }
.ru-modern .ru-row-sub--src { display: flex; gap: .55rem; }
.ru-modern .ru-row-sub i { margin-right: .2rem; }
.ru-modern .ru-row-dot { opacity: .6; }
.ru-modern .ru-row-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.ru-modern .ru-crowd { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.ru-modern .ru-crowd.is-right { color: var(--ru-ok-ink); }
.ru-modern .ru-crowd.is-wrong { color: var(--ru-bad-ink); }
.ru-modern .ru-rank {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 2rem; height: 2rem; border-radius: .65rem;
    background: var(--ru-soft); color: var(--ru-ink); font-size: .8rem; font-weight: 900;
}
.ru-modern .ru-rows .ru-row:nth-child(1) .ru-rank { background: rgba(var(--ru-primary-rgb), .1); color: var(--ru-primary-ink); }
.ru-modern .ru-srcbar { height: .35rem; border-radius: 999px; background: var(--ru-soft); overflow: hidden; margin: .1rem 0; }
.ru-modern .ru-srcbar span { display: block; height: 100%; border-radius: 999px; transform-origin: left; animation: ruGrow .8s var(--ru-ease) both; }
.ru-modern .ru-srcbar--hi span { background: var(--ru-ok); }
.ru-modern .ru-srcbar--mid span { background: var(--ru-warn); }
.ru-modern .ru-srcbar--lo span { background: var(--ru-bad); }
.ru-modern .ru-ok i { color: var(--ru-ok); }
.ru-modern .ru-bad i { color: var(--ru-bad); }
.ru-modern .ru-unrated { margin-top: 1rem; font-size: .8rem; color: var(--ru-muted); }
.ru-modern .ru-unrated summary { cursor: pointer; font-weight: 700; }
.ru-modern .ru-unrated ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.ru-modern .ru-note { margin: .8rem 0 0; font-size: .74rem; color: var(--ru-muted); }

/* ==========================================================================
   I. The Deal Tracker board
   ========================================================================== */
/* The scroller carries padding (and pulls it back with a negative margin) so the
   cards' shadows are never clipped by its overflow. */
.ru-modern .ru-board-wrap {
    margin: -.5rem -1rem -1.5rem;
    padding: .5rem 1rem 1.5rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding: 0 1rem;
    scrollbar-width: thin;
}
.ru-modern .ru-board {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(4, minmax(13.5rem, 1fr));
    align-items: start;
}
.ru-modern .ru-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; scroll-snap-align: start; }
.ru-modern .ru-col-head {
    display: flex; align-items: center; gap: .55rem;
    padding: 0 .1rem .55rem;
    border-bottom: 3px solid var(--ru-line);
}
.ru-modern .ru-col-ico {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 1.9rem; height: 1.9rem; border-radius: .6rem; font-size: .8rem;
    background: var(--ru-soft); color: var(--ru-muted);
}
.ru-modern .ru-col-titles { display: flex; flex-direction: column; min-width: 0; }
.ru-modern .ru-col-t { font-size: .86rem; font-weight: 900; line-height: 1.2; color: var(--ru-ink); }
.ru-modern .ru-col-note { font-size: .68rem; color: var(--ru-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ru-modern .ru-col--open .ru-col-head { border-color: rgba(var(--ru-primary-rgb), .55); }
.ru-modern .ru-col--open .ru-col-ico { background: rgba(var(--ru-primary-rgb), .1); color: var(--ru-primary-ink); }
.ru-modern .ru-col--advanced .ru-col-head { border-color: var(--ru-info); }
.ru-modern .ru-col--advanced .ru-col-ico { background: rgba(var(--ru-info-rgb), .14); color: color-mix(in oklab, var(--ru-info) 50%, var(--ru-ink)); }
.ru-modern .ru-col--confirmed .ru-col-head { border-color: var(--ru-ok); }
.ru-modern .ru-col--confirmed .ru-col-ico { background: rgba(var(--ru-ok-rgb), .12); color: var(--ru-ok-ink); }
.ru-modern .ru-col--debunked .ru-col-head { border-color: rgba(var(--ru-bad-rgb), .6); }
.ru-modern .ru-col--debunked .ru-col-ico { background: rgba(var(--ru-bad-rgb), .1); color: var(--ru-bad-ink); }
.ru-modern .ru-col-body { display: flex; flex-direction: column; gap: 1rem; }
.ru-modern .ru-col-empty {
    display: flex; align-items: center; gap: .5rem;
    padding: .9rem .9rem; border-radius: var(--ru-radius);
    border: 1px dashed var(--ru-line); color: var(--ru-muted); font-size: .78rem;
}
.ru-modern .ru-col-empty[hidden] { display: none; }
.ru-modern .ru-more {
    align-self: stretch;
    padding: .4rem .8rem; border-radius: 999px;
    border: 1px solid var(--ru-line); background: var(--ru-soft); color: var(--ru-ink);
    font-size: .76rem; font-weight: 800; box-shadow: none; cursor: pointer;
}
.ru-modern .ru-more:hover { background: var(--ru-soft-2); }
.ru-modern .ru-more[hidden] { display: none; }
.ru-modern .ru-capped { display: none !important; }

/* ==========================================================================
   J. The submit form
   ========================================================================== */
.ru-modern .ru-compose { padding: 1rem 1.1rem; overflow: visible; }
.ru-modern .ru-compose-intro { margin: 0 0 .8rem; font-size: .84rem; color: var(--ru-muted); }
.ru-modern .ru-form-top { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.ru-modern .ru-seg--form .btn-check { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }
.ru-modern .ru-seg--form .ru-seg-btn { padding: .3rem .8rem; font-size: .78rem; }
.ru-modern .ru-seg--form .btn-check:checked + .ru-seg-btn { background: var(--ru-primary); color: var(--ru-on); }
.ru-modern .ru-seg--form .btn-check:focus-visible + .ru-seg-btn { outline: 2px solid var(--ru-primary); outline-offset: 1px; }
/* The side picker: a rounded pill like the season picker. */
.ru-modern .ru-pick {
    position: relative; display: inline-flex; align-items: center; gap: .35rem; margin: 0;
    padding: 0 .7rem; height: 2rem; border-radius: 999px;
    background: var(--ru-soft); border: 1px solid color-mix(in oklab, var(--ru-line) 70%, transparent);
    color: var(--ru-muted); font-size: .78rem; font-weight: 800;
}
.ru-modern .ru-pick-select {
    appearance: none; -webkit-appearance: none; border: 0; background: transparent;
    padding: 0 1.1rem 0 0; color: var(--ru-ink); font: inherit; max-width: 14rem; cursor: pointer;
}
.ru-modern .ru-pick-select:focus { outline: none; }
.ru-modern .ru-pick:focus-within { outline: 2px solid var(--ru-primary); outline-offset: 1px; }
.ru-modern .ru-pick-chev { position: absolute; right: .7rem; font-size: .6rem; pointer-events: none; }
.ru-modern .ru-form-grid {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.ru-modern .ru-field { min-width: 0; }
.ru-modern .ru-form .input-group { flex-wrap: nowrap; }
.ru-modern .ru-form .input-group-text { background: var(--ru-soft); color: var(--ru-muted); border-color: var(--ru-line); border-radius: .7rem 0 0 .7rem; }
.ru-modern .ru-form .form-control,
.ru-modern .ru-form .form-select { border-color: var(--ru-line); }
.ru-modern .ru-form .input-group > :last-child:not(.dropdown-menu) { border-radius: 0 .7rem .7rem 0; }
.ru-modern .ru-form .ru-field--fee .input-group > .dropdown-toggle { border-radius: 0 .7rem .7rem 0; box-shadow: none; }
.ru-modern .ru-form #rumor-club-text { border-radius: .7rem; }
.ru-modern .ru-form .form-control:focus,
.ru-modern .ru-form .form-select:focus { border-color: rgba(var(--ru-primary-rgb), .5); box-shadow: 0 0 0 .2rem rgba(var(--ru-primary-rgb), .12); }
.ru-modern .ru-form .dropdown-menu { z-index: 1080; }
.ru-modern .ru-form-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.ru-modern .ru-form-hint { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--ru-muted); }
/* Submit = green, no shadow. */
.ru-modern .ru-submit {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem 1.1rem; border-radius: 999px; border: 0;
    background: var(--ru-ok); color: #fff;
    font-size: .84rem; font-weight: 800; box-shadow: none; cursor: pointer;
}
.ru-modern .ru-submit:hover { filter: brightness(1.07); }
.ru-modern .ru-submit:focus-visible { outline: 2px solid var(--ru-ok); outline-offset: 2px; }
.ru-modern .ru-guest { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .9rem 1rem; font-size: .88rem; }
.ru-modern .ru-guest-ico {
    display: grid; place-items: center; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .8rem;
    background: rgba(var(--ru-primary-rgb), .08); color: var(--ru-primary-ink);
}
.ru-modern .ru-guest-txt { flex: 1 1 12rem; min-width: 0; color: var(--ru-muted); }

/* ==========================================================================
   K. Sidebar
   ========================================================================== */
.ru-modern .ru-side p { margin: 0; font-size: .84rem; color: var(--ru-muted); line-height: 1.5; }
.ru-modern .ru-clock-state { display: flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 800; color: var(--ru-ink); }
.ru-modern .ru-clock-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ru-muted); flex: 0 0 auto; }
.ru-modern .ru-clock.is-open .ru-clock-dot { background: var(--ru-ok); box-shadow: 0 0 0 0 rgba(var(--ru-ok-rgb), .6); animation: ruPulse 1.8s ease-out infinite; }
.ru-modern .ru-clock.is-deadline .ru-clock-dot { background: var(--ru-bad); }
@keyframes ruPulse { 70% { box-shadow: 0 0 0 .5rem rgba(var(--ru-ok-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--ru-ok-rgb), 0); } }
.ru-modern .ru-clock-lab { margin-top: .7rem; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ru-muted); }
.ru-modern .ru-clock-digits { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .35rem; }
.ru-modern .ru-clock-digits > span {
    display: flex; flex-direction: column; align-items: center; gap: .05rem;
    padding: .5rem .3rem .4rem; border-radius: .8rem; background: var(--ru-soft);
}
.ru-modern .ru-clock-digits b { font-size: 1.35rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ru-ink); }
.ru-modern .ru-clock.is-deadline .ru-clock-digits b { color: var(--ru-bad-ink); }
.ru-modern .ru-clock-digits small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ru-muted); }
.ru-modern .ru-clock-when { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .76rem; color: var(--ru-muted); }
.ru-modern .ru-side-link {
    display: flex; align-items: center; gap: .5rem; margin-top: .8rem; padding-top: .7rem;
    border-top: 1px solid var(--ru-line);
    font-size: .82rem; font-weight: 800; color: var(--ru-primary-ink); text-decoration: none;
}
.ru-modern .ru-side-link:hover { text-decoration: underline; }
.ru-modern .ru-side-chev { margin-left: auto; font-size: .65rem; }
.ru-modern .ru-crowd-sub {
    display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem;
    font-size: .7rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--ru-ok-ink);
}
.ru-modern .ru-crowd-sub.is-doubt { margin-top: .9rem; color: var(--ru-bad-ink); }
.ru-modern .ru-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ru-modern .ru-crowd-list a {
    display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem; border-radius: .7rem;
    color: var(--ru-ink); text-decoration: none;
}
.ru-modern .ru-crowd-list a:hover { background: var(--ru-soft); }
.ru-modern .ru-cl-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ru-modern .ru-cl-main b { font-size: .84rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ru-modern .ru-cl-main small { font-size: .7rem; color: var(--ru-muted); }

/* ==========================================================================
   L. Filter, jump flash, toast, motion
   ========================================================================== */
.ru-modern[data-ru-dir-active="in"] [data-ru-dir="out"],
.ru-modern[data-ru-dir-active="out"] [data-ru-dir="in"] { display: none !important; }
.ru-modern .ru-card.ru-flash-card { animation: ruFlash 1.6s var(--ru-ease); }
@keyframes ruFlash {
    0%, 40% { box-shadow: 0 0 0 3px rgba(var(--ru-primary-rgb), .55), var(--ru-shadow); }
    100% { box-shadow: var(--ru-shadow); }
}
.ru-toast {
    position: fixed; left: 50%; bottom: 1.2rem; z-index: 1090;
    transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
    max-width: min(92vw, 26rem); padding: .6rem 1rem; border-radius: 999px;
    background: var(--ru-bad); color: #fff; font-size: .84rem; font-weight: 700; text-align: center;
    transition: opacity .2s ease, transform .2s var(--ru-ease);
}
.ru-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
    .ru-modern .ru-bar-b, .ru-modern .ru-bar-n, .ru-modern .ru-srcbar span { animation: none; transition: none; }
    .ru-modern .ru-card, .ru-modern .ru-hot-card { transition: none; }
    .ru-modern .ru-card:hover, .ru-modern .ru-hot-card:hover { transform: none; }
    .ru-modern .ru-clock-dot { animation: none !important; }
    .ru-modern .ru-vote.ru-pop .ru-vb b, .ru-modern .ru-vote.ru-pop .ru-vn b { animation: none; }
}

/* ==========================================================================
   M. Narrow screens
   ========================================================================== */
/* The board scrolls sideways below desktop; each column is most of the screen. */
@media (max-width: 1199.98px) {
    .ru-modern .ru-board { grid-template-columns: repeat(4, minmax(15rem, 1fr)); }
}
@media (max-width: 767.98px) {
    .ru-modern .ru-seg-txt { display: none; }
    /* The direction picker shows its icon only; the native list still names each option. */
    .ru-modern .ru-pick.ru-pick--dir { padding: 0 .55rem; gap: 0; }
    .ru-modern .ru-pick--dir .ru-pick-select { position: absolute; inset: 0; width: 100%; max-width: none; padding: 0; opacity: 0; }
    .ru-modern .ru-pick--dir .ru-pick-chev { position: static; margin-left: .3rem; }
    .ru-modern .ru-seg-btn { padding: .22rem .55rem; }
    .ru-modern .ru-seg--form .ru-seg-txt, .ru-modern .ru-seg--form span { display: inline; }
    .ru-modern .ru-board { grid-template-columns: repeat(4, minmax(16rem, 82vw)); }
    /* Hot strip: one swipeable row. Padding keeps the shadows and the rank badge inside. */
    .ru-modern .ru-hot-strip {
        display: grid; grid-auto-flow: column; grid-template-columns: none;
        grid-auto-columns: minmax(15rem, 80%);
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
        margin: -.6rem -1rem -1.4rem; padding: .6rem 1rem 1.4rem; scroll-padding: 0 1rem;
        scrollbar-width: none;
    }
    .ru-modern .ru-hot-strip::-webkit-scrollbar { display: none; }
    .ru-modern .ru-hot-card { scroll-snap-align: start; }
    .ru-modern .ru-card { padding: .85rem .85rem .8rem; }
    .ru-modern .ru-vbtn { padding: .32rem .65rem; }
    .ru-modern .ru-row { padding: .65rem .75rem; gap: .6rem; }
}
/* Narrow phones: a row's status chip keeps only its icon, so the name keeps its room. */
@media (max-width: 440px) {
    .ru-modern .ru-row-side .ru-status { font-size: 0; gap: 0; padding: .3rem; }
    .ru-modern .ru-row-side .ru-status i { font-size: .72rem; }
}
@media (max-width: 380px) {
    .ru-modern .ru-vbtn-t { display: none; }
    .ru-modern .ru-vlab { display: none; }
}
.ru-modern .ru-form .ru-field--fee .input-group > .dropdown-toggle { border-color: var(--ru-line); background: var(--ru-soft); color: var(--ru-muted); }

/* ==========================================================================
   N. The My Benfica standard (owner, 5 Oct 2026). Values copied from
      mybenfica-modern.css (.mb-seg, .mb-pill) and measured against my-benfica.php.
   ========================================================================== */
/* Switches = .mb-seg: .2rem .62rem; phones icons only at .26rem .55rem (.45rem < 380px). */
.ru-modern .ru-seg--form .ru-seg-btn { padding: .2rem .62rem; font-size: .74rem; }
@media (max-width: 767.98px) {
    .ru-modern .ru-seg-btn { padding: .26rem .55rem; }
}
@media (max-width: 379.98px) {
    .ru-modern .ru-seg-btn { padding: .26rem .45rem; }
}
/* Buttons = .mb-pill (.28rem .8rem, .76rem / 800, line 1.25, flat); Add / Submit stay green. */
.ru-modern .ru-pill,
.ru-modern .ru-submit,
.ru-modern .ru-vbtn { padding: .28rem .8rem; font-size: .76rem; font-weight: 800; line-height: 1.25; box-shadow: none; }
.ru-modern .ru-pill, .ru-modern .ru-submit { border: 1px solid transparent; }
@media (max-width: 767.98px) {
    .ru-modern .ru-vbtn { padding: .28rem .65rem; }
}