/* ═══════════════════════════════════════════════════════════
   Admin → theme variable bridge
   The RaxBoard property cache emits --rb-* CSS variables; this
   theme's stylesheet uses unprefixed names from the bundle spec.
   Bridge so changes in /admin/styles/8/properties take effect.
   ═══════════════════════════════════════════════════════════ */
:root {
    /* Concrete default: --rb-postbit-width is declared empty by the framework
       layer, which kills `var(--rb-postbit-width, 215px)` fallbacks (an empty
       declared var does NOT fall back). Theme loads last → this wins → the
       postbit width + .post grid template resolve reliably. */
    --rb-postbit-width:    215px;

    --primary:             var(--rb-primary, oklch(0.66 0.21 37));
    --primary-foreground:  var(--rb-primary-foreground, #ffffff);
    --primary-soft:        var(--rb-primary-soft, oklch(0.66 0.21 37 / 0.12));
    --ring:                var(--rb-ring, oklch(0.66 0.21 37 / 0.35));

    --background:          var(--rb-background, oklch(0.985 0.003 250));
    --background-alt:      var(--rb-background-alt, oklch(0.97 0.004 250));
    --surface:             var(--rb-surface, #ffffff);
    --surface-2:           var(--rb-surface2, oklch(0.98 0.003 250));
    --muted:               var(--rb-muted, oklch(0.96 0.004 250));
    --muted-foreground:    var(--rb-muted-foreground, oklch(0.5 0.01 260));
    --border:              var(--rb-border, oklch(0.9 0.005 250));
    --border-strong:       var(--rb-border-strong, oklch(0.82 0.007 250));

    --foreground:          var(--rb-foreground, oklch(0.22 0.012 260));
    --text-faint:          var(--rb-text-faint, oklch(0.65 0.008 260));

    --success:             var(--rb-success, oklch(0.62 0.15 150));
    --warn:                var(--rb-warn, oklch(0.72 0.15 70));
    --danger:              var(--rb-danger, oklch(0.62 0.2 25));
    --info:                var(--rb-info, oklch(0.62 0.18 220));

    --radius-sm:           var(--rb-radius-sm, 6px);
    --radius:              var(--rb-radius, 10px);
    --radius-lg:           var(--rb-radius-lg, 14px);
    --radius-xl:           var(--rb-radius-xl, 18px);

    --font-sans:           var(--rb-font-sans, "Inter Tight", ui-sans-serif, system-ui, sans-serif);
    --font-mono:           var(--rb-font-mono, "JetBrains Mono", ui-monospace, monospace);

    --shadow-sm:           var(--rb-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    --shadow-md:           var(--rb-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    --shadow-lg:           var(--rb-shadow-lg, 0 16px 40px rgba(0,0,0,0.18));

    --header-h:            var(--rb-header-h, 60px);
    --rail-w:              var(--rb-rail-w, 64px);
    --container:           var(--rb-container, 1280px);

    /* ── Aliases (main.css uses both prefixed forms; keep one source) ── */
    --rb-header-height:        var(--rb-header-h, 60px);
    --rb-border-radius:        var(--rb-radius, 10px);
    --rb-border-radius-small:  var(--rb-radius-sm, 6px);
    --rb-border-radius-medium: var(--rb-radius, 10px);
    --rb-border-radius-large:  var(--rb-radius-lg, 14px);
    --rb-border-radius-full:   9999px;
    /* --rb-sidebar-w now sourced directly from the new `sidebarW`
       property added in migration 293. No alias here — would create
       a self-referential cycle and break the variable. */
    --rb-space-4:              1rem;
}
/* End bridge ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   RaxbOARD — design tokens
   Canonical names are defined in the bridge block above as
   var(--rb-*, default). Dark-mode overrides only need to flip
   the underlying --rb-* values; the bridge resolves them.
   ═══════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
    /* Flip the --rb-* sources; the bridge picks them up. */
    --rb-background: oklch(0.17 0.012 260);
    --rb-background-alt: oklch(0.195 0.013 260);
    --rb-surface: oklch(0.22 0.013 260);
    --rb-surface2: oklch(0.25 0.013 260);
    --rb-muted: oklch(0.255 0.013 260);
    --rb-muted-foreground: oklch(0.72 0.012 260);
    --rb-border: oklch(0.3 0.013 260);
    --rb-border-strong: oklch(0.38 0.015 260);
    --rb-foreground: oklch(0.96 0.005 260);
    --rb-text-faint: oklch(0.55 0.012 260);
    --rb-primary-soft: oklch(0.66 0.21 37 / 0.18);
    --rb-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --rb-shadow-md: 0 4px 12px -2px rgba(0,0,0,0.5);
    --rb-shadow-lg: 0 16px 40px -8px rgba(0,0,0,0.6);
}

/* ═══════════════════════════════════════════════════════════
   Reset / base
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

body {
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; color: inherit; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

.mono { font-family: var(--font-sans); font-feature-settings: "tnum" 1; }
.muted-fg { color: var(--muted-foreground); }
.faint    { color: var(--text-faint); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ═══════════════════════════════════════════════════════════
   App shell — header + rail + main
   ═══════════════════════════════════════════════════════════ */
.app {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas:
        "header header"
        "rail   main";
    min-height: 100vh;
}
.header { grid-area: header; }
.rail   { grid-area: rail; }
.main-region { grid-area: main; }

/* ─── Header (signature element) ─── */
/* Header bar stays full-bleed (background spans viewport), but inner content
   is centered to var(--container) so it lines up with .rb-footer-inner. */
.header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding-block: 0;
    padding-inline: max(20px, calc((100% - var(--container, 1280px)) / 2));
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(14px);
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.01em; font-size: 15px; }
.brand-mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--foreground);
    color: var(--background);
    display: grid; place-items: center;
    font-family: var(--font-sans);
    font-size: 14px; font-weight: 700;
    position: relative; overflow: hidden;
    flex-shrink: 0;
}
.brand-mark::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 50%, var(--primary) 50%);
    opacity: 0.95;
}
.brand-mark span { position: relative; z-index: 1; mix-blend-mode: difference; color: #fff; }
.brand-name { display: flex; align-items: baseline; gap: 2px; color: var(--foreground); }
.brand-name em { font-style: normal; color: var(--primary); font-weight: 800; }
.brand-chip {
    font-family: var(--font-sans);
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--muted-foreground);
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.brand-logo-img { height: var(--rb-logo-height, 28px); width: auto; }
html[data-theme="light"] .brand-logo-dark { display: none; }
html[data-theme="dark"]  .brand-logo-light { display: none; }

.global-search {
    position: relative;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}
.global-search > button {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 38px;
    background: var(--background-alt);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 13px;
    outline: none;
    text-align: left;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    position: relative;
}
.global-search > button:hover { border-color: var(--border-strong); background: var(--surface); }
.global-search > button:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.global-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 13px;
    color: var(--muted-foreground);
    cursor: pointer;
}
.global-search .sicon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-faint); pointer-events: none;
    display: grid; place-items: center;
}
.global-search kbd {
    font-family: var(--font-sans);
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--muted-foreground);
    background: var(--surface);
    flex-shrink: 0;
}

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
    position: relative;
    width: 38px; height: 38px;
    border-radius: 9px;
    display: grid; place-items: center;
    color: var(--muted-foreground);
    transition: background 0.15s, color 0.15s;
    background: transparent;
}
.icon-btn:hover { background: var(--muted); color: var(--foreground); }
.icon-btn.active, .icon-btn[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
.icon-btn .dot {
    position: absolute; top: 6px; right: 6px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--primary); color: var(--primary-foreground);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 9px; font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid var(--surface);
}
.me-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    margin-left: 6px;
    transition: background 0.15s;
    background: transparent;
}
.me-btn:hover { background: var(--muted); }
.me-btn .me-name { font-weight: 600; font-size: 13px; }

/* ─── Rail (left nav) ─── */
.rail {
    position: sticky;
    top: var(--header-h);
    align-self: start;
    height: calc(100vh - var(--header-h));
    border-right: 1px solid var(--border);
    background: var(--background);
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.rail-item {
    position: relative;
    width: 44px; height: 44px;
    border-radius: 10px;
    display: grid; place-items: center;
    color: var(--muted-foreground);
    transition: background 0.15s, color 0.15s;
    background: transparent;
}
.rail-item:hover { background: var(--muted); color: var(--foreground); }
.rail-item.active, .rail-item[aria-current="page"] {
    background: var(--primary-soft); color: var(--primary);
}
.rail-item.active::before {
    content: ""; position: absolute;
    left: -12px; top: 10px; bottom: 10px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--primary);
}
.rail-item .tip {
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--foreground); color: var(--background);
    padding: 4px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500;
    white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.15s;
    z-index: 50;
}
.rail-item:hover .tip { opacity: 1; }
.rail-divider { width: 24px; height: 1px; background: var(--border); margin: 8px 0; }
.rail-spacer  { flex: 1; }

/* ─── Main content region ─── */
.main-region {
    overflow-y: auto;
    height: calc(100vh - var(--header-h));
    background: var(--background);
}
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px 40px 80px;
}
.container.wide { max-width: 100%; padding: 0; }

/* ═══════════════════════════════════════════════════════════
   Common building blocks
   ═══════════════════════════════════════════════════════════ */

.crumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.crumbs .sep { color: var(--text-faint); opacity: 0.5; }
.crumbs a { color: var(--muted-foreground); }
.crumbs a:hover { color: var(--foreground); }

.page-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.page-title {
    font-size: 28px; font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    line-height: 1.15;
}
.page-subtitle { color: var(--muted-foreground); font-size: 14px; margin: 0; }

/* Mobile: stack the title/subtitle block above the action buttons (the row
   layout cramps the chips on narrow screens). DOM order is title-block then
   buttons, so column direction puts the title on top, buttons below. */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .page-header .hstack {
        flex-wrap: wrap;
    }
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    transition: background 0.15s, border-color 0.15s, transform 0.05s, color 0.15s;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.btn:hover { background: var(--muted); color: var(--foreground); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.btn-primary:hover { background: oklch(from var(--primary) calc(l - 0.04) c h); color: var(--primary-foreground); }
.btn-secondary { background: var(--muted); color: var(--foreground); border-color: var(--border); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted-foreground); }
.btn-ghost:hover { background: var(--muted); color: var(--foreground); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-sm { height: 28px; font-size: 12px; padding: 0 10px; }
.btn-lg { height: 44px; font-size: 14px; padding: 0 20px; }

/* ─── Cards / surfaces ─── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.card-pad { padding: 16px; }

/* ─── Pills / tags ─── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--muted);
    color: var(--muted-foreground);
    border: 1px solid var(--border);
    line-height: 1.4;
}
.pill.accent { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.pill.success { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); border-color: transparent; }
.pill.warn    { background: color-mix(in oklab, var(--warn) 15%, transparent); color: var(--warn); border-color: transparent; }
.pill.danger  { background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); border-color: transparent; }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
    border: 1px solid var(--border);
    background: var(--surface);
}

.prefix-badge {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    background: var(--muted);
    color: var(--muted-foreground);
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
}

/* ─── Avatars ─── */
.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    background: var(--muted-foreground);
    font-family: var(--font-sans);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sq { border-radius: 8px; }
.avatar.xs { width: 22px; height: 22px; font-size: 10px; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.md { width: 40px; height: 40px; font-size: 14px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.xl { width: 96px; height: 96px; font-size: 32px; border-radius: 20px; }
.avatar .status {
    position: absolute; bottom: 0; right: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--surface);
}
/* Named gradient variants for placeholder avatars */
.av-1 { background: linear-gradient(135deg, oklch(0.65 0.18 30), oklch(0.55 0.2 10)); }
.av-2 { background: linear-gradient(135deg, oklch(0.65 0.15 150), oklch(0.5 0.18 170)); }
.av-3 { background: linear-gradient(135deg, oklch(0.65 0.15 260), oklch(0.5 0.2 280)); }
.av-4 { background: linear-gradient(135deg, oklch(0.7 0.15 80), oklch(0.55 0.18 50)); }
.av-5 { background: linear-gradient(135deg, oklch(0.65 0.15 200), oklch(0.5 0.18 220)); }
.av-6 { background: linear-gradient(135deg, oklch(0.65 0.15 330), oklch(0.5 0.2 310)); }
.av-7 { background: linear-gradient(135deg, oklch(0.6 0.15 120), oklch(0.45 0.15 100)); }
.av-8 { background: linear-gradient(135deg, oklch(0.7 0.12 50), oklch(0.55 0.15 20)); }

/* ─── Dropdowns (header notifications, conversations) ─── */
.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 90;
    overflow: hidden;
}
.dropdown-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.dropdown-title { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.dropdown-action { font-size: 11px; color: var(--primary); font-weight: 600; }
.dropdown-body { max-height: 360px; overflow-y: auto; }
.dropdown-empty { padding: 32px 14px; text-align: center; font-size: 12px; color: var(--muted-foreground); }
.dropdown-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    text-decoration: none; color: var(--foreground); font-size: 13px;
}
.dropdown-item:last-child { border-bottom: 0; }
.dropdown-item:hover { background: var(--muted); }
.dropdown-item.unread { background: color-mix(in oklab, var(--primary) 4%, transparent); }
.dropdown-foot { padding: 10px 14px; border-top: 1px solid var(--border); text-align: center; }
.dropdown-viewall { font-size: 12px; font-weight: 600; color: var(--primary); }
.notif-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.notif-avatar--init { display: grid; place-items: center; color: #fff; font-weight: 600; }
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: 12px; line-height: 1.5; margin: 0; color: var(--foreground); }
.notif-sender { font-weight: 600; }
.notif-time { font-size: 10px; color: var(--muted-foreground); margin: 2px 0 0; font-family: var(--font-sans); }
.notif-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════
   Home / forum index
   ═══════════════════════════════════════════════════════════ */
.home-hero {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px;
    padding-bottom: 20px; margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.home-hero h1 { font-size: 30px; letter-spacing: -0.02em; margin: 4px 0 6px; font-weight: 700; }
.home-hero .lede { color: var(--muted-foreground); font-size: 14px; margin: 0; }
.home-hero .lede strong { color: var(--primary); font-family: var(--font-sans); font-weight: 700; }
.home-hero .hero-actions { display: flex; gap: 8px; flex-shrink: 0; }

.stats-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 28px;
    overflow: hidden;
}
.stat { padding: 14px 18px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
.stat-label { font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: 6px; }
.stat-val { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.stat-val small { font-size: 11px; color: var(--text-faint); font-weight: 500; }

.categories { display: flex; flex-direction: column; }
.cat-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 4px 12px; border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.cat-head h2 {
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0 0 4px; color: var(--foreground);
}
.cat-head h2 a { color: inherit; }
.cat-head h2 a:hover { color: var(--primary); }
.cat-head p { font-size: 13px; color: var(--muted-foreground); margin: 0; }
.cat-head .cat-meta { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

.nodes {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}
.node-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 150px 240px;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--foreground);
    transition: background 0.1s;
}
.node-row:last-child { border-bottom: 0; }
.node-row:hover { background: var(--background-alt); color: var(--foreground); }
.node-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    display: grid; place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}
.node-main { min-width: 0; }
.node-title-row { display: flex; align-items: center; gap: 8px; line-height: 1.3; margin-bottom: 4px; }
.node-title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--foreground); }
.node-row:hover .node-title { color: var(--primary); }
.node-desc { font-size: 12px; color: var(--muted-foreground); line-height: 1.45; margin: 0; }
.subforum-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 11.5px; color: var(--muted-foreground); }
.subforum-label { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-right: 2px; }
.subforum-label i { margin-right: 3px; opacity: 0.7; }
.subforum-chip { color: var(--muted-foreground); text-decoration: none; font-weight: 500; transition: color 0.1s; }
.subforum-chip:hover { color: var(--primary); text-decoration: underline; }
.subforum-sep { opacity: 0.5; margin-right: 2px; }
.node-stats { display: flex; gap: 20px; color: var(--muted-foreground); }
.node-stats > div { display: flex; flex-direction: column; line-height: 1.2; }
.node-stats .num { font-size: 14px; color: var(--foreground); font-weight: 600; font-family: var(--font-sans); }
.node-stats .lbl { font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-top: 2px; }
.node-last { display: flex; align-items: center; gap: 10px; min-width: 0; }
.node-last-body { min-width: 0; flex: 1; }
.node-last-title { font-size: 13px; font-weight: 500; line-height: 1.3; }
.node-last-meta { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; font-family: var(--font-sans); }
.node-last-meta a { color: var(--muted-foreground); }
.node-last-meta a:hover { color: var(--primary); }

/* Trending block */
.block-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 36px 0 14px;
}
.block-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0; color: var(--foreground);
}
.trending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.trend-card {
    display: flex; gap: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none; color: var(--foreground);
    transition: border-color 0.15s, transform 0.1s;
}
.trend-card:hover { border-color: var(--primary); color: var(--foreground); }
.trend-rank { font-family: var(--font-sans); font-size: 20px; font-weight: 700; color: var(--text-faint); width: 32px; flex-shrink: 0; }
.trend-body { min-width: 0; }
.trend-node { font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-bottom: 4px; }
.trend-title { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.trend-meta { display: flex; gap: 6px; font-family: var(--font-sans); font-size: 10px; color: var(--text-faint); align-items: center; }
.trend-meta .sep { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════
   Forum / thread list
   ═══════════════════════════════════════════════════════════ */
.node-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.filter-tabs {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 3px;
}
.filter-tab {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-foreground);
    transition: background 0.1s, color 0.1s;
    text-decoration: none;
}
.filter-tab:hover { color: var(--foreground); }
.filter-tab.active { background: var(--background-alt); color: var(--foreground); box-shadow: var(--shadow-sm); }

.thread-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.thread-row {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 120px 160px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: var(--foreground);
    transition: background 0.1s;
}
#main-content .thread-title,
#main-content .thread-list .thread-title,
#main-content .thread-row .thread-title { font-size: 14px !important; }
:root { --rb-thread-title-size: 14px; }
.thread-row:last-child { border-bottom: 0; }
.thread-row:hover { background: var(--background-alt); color: var(--foreground); }
.thread-row.pinned { background: color-mix(in oklab, var(--primary) 4%, transparent); }
.thread-row.pinned:hover { background: color-mix(in oklab, var(--primary) 7%, transparent); }
.thread-avatar { position: relative; }
.corner-pin {
    position: absolute; top: -4px; right: -4px;
    width: 18px; height: 18px;
    background: var(--primary); color: var(--primary-foreground);
    border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--surface);
    font-size: 10px;
}
.thread-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thread-title { font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.thread-row:hover .thread-title { color: var(--primary); }
.thread-sub { display: flex; gap: 6px; font-family: var(--font-sans); font-size: 11px; color: var(--muted-foreground); margin-top: 2px; align-items: center; flex-wrap: wrap; }
.thread-sub .sep { opacity: 0.5; }
.thread-stats { display: flex; gap: 16px; color: var(--muted-foreground); }
.thread-stats > div { display: flex; flex-direction: column; line-height: 1.2; }
.thread-stats .num { font-family: var(--font-sans); font-size: 13px; color: var(--foreground); font-weight: 600; }
.thread-stats .lbl { font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-top: 2px; }
.thread-last { display: flex; align-items: center; gap: 10px; min-width: 0; }
.thread-last-name { font-size: 12px; font-weight: 500; }
.thread-last-time { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); }

.pagination {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 20px;
}
.page-nums { display: flex; align-items: center; gap: 4px; font-family: var(--font-sans); }
.page-num {
    padding: 6px 10px; border-radius: 6px; font-size: 12px;
    color: var(--muted-foreground); cursor: pointer; text-decoration: none;
}
.page-num:hover { background: var(--muted); color: var(--foreground); }
.page-num.active { background: var(--primary); color: var(--primary-foreground); }

/* ═══════════════════════════════════════════════════════════
   Thread view
   ═══════════════════════════════════════════════════════════ */
.thread-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; padding: 0 0 24px; margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.thread-head-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 10px; line-height: 1.15; }
.thread-head-meta { font-size: 12px; color: var(--muted-foreground); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.thread-head-meta .sep { opacity: 0.5; }
.thread-head-actions { display: flex; gap: 6px; flex-shrink: 0; }

.thread-body { display: flex; flex-direction: column; gap: 3px; }
/* ═══════════════════════════════════════════════════════════════════════
 * Postbit — compact left rail, square avatar,
 * line-by-line stat list, single banner under user title.
 * ═══════════════════════════════════════════════════════════════════════ */
.post {
    display: grid;
    grid-template-columns: var(--rb-postbit-width, 215px) minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: none;
}
.post + .post { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.post.op { border-color: var(--border); }
.post.op .post-author { background: var(--surface-2); }

.post-author {
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    min-height: 100%;
}

/* Avatar — square with subtle radius */
.post-author > div:first-child { position: relative; }
.post-author .avatar.lg {
    width: 96px !important;
    height: 96px !important;
    font-size: 34px !important;
    border-radius: 4px !important;
    box-shadow: none;
    border: 0;
}
.post-author .avatar.lg img {
    border-radius: 4px;
    width: 100%; height: 100%;
    object-fit: cover;
}
.post-author .status {
    bottom: 2px !important; right: 2px !important;
    width: 12px !important; height: 12px !important;
    border: 2px solid var(--surface-2) !important;
}

/* Username */
.post-author-name {
    font-weight: 700;
    font-size: 15px;
    margin-top: 8px;
    line-height: 1.15;
}
.post-author-name a {
    color: var(--foreground);
    text-decoration: none;
}
.post-author-name a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* User title (e.g. "Administrator", "Member") */
.post-author-title {
    font-size: 11px;
    color: var(--muted-foreground);
    margin-top: -2px;
    font-weight: 400;
    font-family: var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
}

/* Group banner — strip */
.post-author-banner,
.post-author > .post-author-banner {
    display: block !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    background: var(--primary) !important;
    border: 0 !important;
    color: var(--primary-foreground) !important;
    box-shadow: none !important;
    margin: 4px 0 0 !important;
    line-height: 1.4 !important;
}

/* Stats — line by line key/value rows, separator dot pattern, no cards */
.post-author-stats {
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 12px;
}
.post-author-stats > div {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.post-author-stats > div:hover { transform: none; }
.post-author-stats > div span:first-child {
    order: 1;
    font-size: 11.5px;
    color: var(--muted-foreground);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.post-author-stats > div span:last-child {
    order: 2;
    color: var(--foreground);
    font-weight: 600;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Trophy / solution extras — inline icons + numbers, single line */
.post-author-extras {
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.post-author-extras > div {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 600;
    width: 100% !important;
    color: var(--muted-foreground);
}
.post-author-extras > div > span:first-child {
    color: var(--muted-foreground);
    font-weight: 400;
    font-size: 11.5px;
}
.post-author-extras > div i {
    color: var(--warn);
    width: 14px;
    margin-right: 5px;
    font-size: 11px;
}
.post-author-extras > div:last-child i { color: var(--success); }

/* View profile button — text-link, no chrome */
.post-author > a.btn {
    width: auto;
    margin-top: 12px;
    padding: 0;
    background: transparent !important;
    color: var(--primary) !important;
    border: 0 !important;
    font-weight: 500;
    font-size: 12px;
    border-radius: 0;
    text-decoration: none;
    box-shadow: none !important;
}
.post-author > a.btn:hover {
    background: transparent !important;
    color: var(--primary) !important;
    text-decoration: underline;
    border: 0 !important;
}

/* Post body — bigger padding */
.post-body {
    padding: 16px 22px 18px !important;
}

.post-head {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}

/* Signature — subtle */
.post-signature {
    margin-top: 18px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--border) !important;
    font-size: 12.5px !important;
    color: var(--muted-foreground) !important;
    line-height: 1.55 !important;
    opacity: 1;
}
.post-signature p { margin: 0 0 6px; }
.post-signature p:last-child { margin: 0; }

/* Action bar — separator */
.post-actions {
    padding: 8px 22px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    margin: 0 -22px -18px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
}
.post-actions .spacer { flex: 1; }

/* Mobile: collapse postbit to inline row above body */
@media (max-width: 760px) {
    .post {
        grid-template-columns: 1fr !important;
    }
    .post-author {
        flex-direction: row !important;
        flex-wrap: wrap;
        padding: 12px 16px !important;
        gap: 10px !important;
        text-align: left;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        min-height: auto !important;
        align-items: center;
    }
    .post-author .avatar.lg {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }
    .post-author-name { font-size: 14px; margin-top: 0; }
    .post-author-stats { display: none !important; }
    .post-author-extras { display: none !important; }
    .post-author > a.btn { display: none !important; }
}

.post-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.post-head { display: flex; justify-content: space-between; align-items: center; }
.post-meta { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted-foreground); font-family: var(--font-sans); }
.post-meta a { color: var(--muted-foreground); }
.post-num { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-faint); }

.post-prose { color: var(--foreground); font-size: 14px; line-height: 1.65; }
.post-prose p { margin: 0 0 12px; }
.post-prose p:last-child { margin: 0; }
.post-prose a { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--primary) 40%, transparent); text-underline-offset: 2px; }
.post-prose blockquote.post-quote {
    background: var(--background-alt);
    border-left: 3px solid var(--primary);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin: 0 0 12px;
}
.post-quote-head { display: flex; gap: 6px; align-items: center; font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin-bottom: 4px; }
.post-quote-body { font-size: 13px; color: var(--muted-foreground); font-style: italic; }

.react-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.react-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--background-alt);
    font-size: 12px;
    border: 1px solid var(--border);
    transition: border-color 0.1s, background 0.1s;
    cursor: pointer;
}
.react-chip:hover { border-color: var(--primary); }
.react-chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.react-chip .mono { font-weight: 700; }

.post-foot {
    display: flex; gap: 4px;
    padding-top: 8px; border-top: 1px solid var(--border);
    align-items: center;
}
.post-action {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 6px;
    font-size: 12px; color: var(--muted-foreground); font-weight: 500;
    transition: background 0.1s, color 0.1s;
    background: transparent; cursor: pointer;
}
.post-action:hover { background: var(--muted); color: var(--foreground); }

/* Inline reply / composer toolbar */
.inline-reply {
    display: grid; grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 16px;
}
.editor-toolbar { display: flex; gap: 2px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
.editor-toolbar.big { padding: 6px; background: var(--background-alt); border: 1px solid var(--border); border-radius: 8px 8px 0 0; border-bottom: 0; margin-bottom: 0; }
.tbtn {
    width: 30px; height: 30px;
    border-radius: 6px;
    display: grid; place-items: center;
    color: var(--muted-foreground); background: transparent;
}
.tbtn:hover { background: var(--muted); color: var(--foreground); }
.tbtn-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

.editor-area textarea, textarea.editor-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--background-alt);
    resize: vertical;
    outline: none;
    line-height: 1.6;
    font-family: var(--font-sans);
    color: var(--foreground);
}
.editor-area textarea:focus, textarea.editor-textarea:focus {
    border-color: var(--primary); background: var(--surface);
    box-shadow: 0 0 0 3px var(--ring);
}
.editor-toolbar.big + textarea { border-radius: 0 0 8px 8px; border-top: 0; }
.editor-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 12px; flex-wrap: wrap; }
.editor-foot .hint { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); }

/* ═══════════════════════════════════════════════════════════
   Thread create / compose
   ═══════════════════════════════════════════════════════════ */
.compose-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; }
.compose-main { min-width: 0; }
.compose-side { display: flex; flex-direction: column; gap: 14px; }
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.side-card h3 { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin: 0 0 12px; font-weight: 700; }
.side-card ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--muted-foreground); line-height: 1.5; }
.side-thread { padding: 10px 0; border-top: 1px solid var(--border); }
.side-thread:first-of-type { border-top: 0; padding-top: 0; }
.side-thread-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }

.field { margin-bottom: 20px; }
.field-label { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin-bottom: 8px; }
.field-hint { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.node-pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.node-pick {
    padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
    font-size: 12px; font-weight: 500; color: var(--muted-foreground); background: var(--surface);
    text-decoration: none;
}
.node-pick:hover { border-color: var(--primary); color: var(--foreground); }
.node-pick.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.big-input {
    width: 100%; padding: 12px 14px;
    font-size: 18px; font-weight: 600;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--background-alt); outline: none;
    letter-spacing: -0.01em; color: var(--foreground);
    font-family: var(--font-sans);
}
.big-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--ring); }
.prefix-row { display: flex; gap: 6px; flex-wrap: wrap; }
.prefix-pill {
    padding: 4px 10px; font-family: var(--font-sans); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
    border: 1px solid var(--border); border-radius: 4px;
    color: var(--muted-foreground); background: transparent; cursor: pointer;
}
.prefix-pill.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.big-textarea {
    width: 100%; padding: 14px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    border-top: 0;
    background: var(--background-alt);
    resize: vertical; outline: none; line-height: 1.65;
    font-family: var(--font-sans);
    color: var(--foreground);
    min-height: 240px;
}
.big-textarea:focus { border-color: var(--primary); background: var(--surface); }
.compose-foot { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   Profile
   ═══════════════════════════════════════════════════════════ */
.profile-cover {
    margin: -8px 0 24px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
}
.cover-bg {
    height: 140px;
    background:
        radial-gradient(circle at 20% 30%, var(--primary-soft), transparent 60%),
        radial-gradient(circle at 80% 70%, color-mix(in oklab, var(--primary) 20%, transparent), transparent 50%),
        linear-gradient(135deg, var(--background-alt), var(--surface-2));
    border-bottom: 1px solid var(--border);
    position: relative;
}
.cover-bg::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.4;
    mask: linear-gradient(to bottom, black, transparent);
    -webkit-mask: linear-gradient(to bottom, black, transparent);
}
.cover-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    padding: 0 28px 24px;
    margin-top: -48px;
    align-items: flex-end;
}
.cover-info { padding-bottom: 8px; min-width: 0; }
.cover-name { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.cover-handle { font-family: var(--font-sans); font-size: 13px; color: var(--muted-foreground); margin-top: 2px; }
.cover-bio { font-size: 14px; color: var(--foreground); margin: 12px 0 10px; max-width: 680px; line-height: 1.55; }
.cover-meta { display: flex; gap: 16px; font-family: var(--font-sans); font-size: 12px; color: var(--muted-foreground); flex-wrap: wrap; }
.cover-meta span { display: inline-flex; align-items: center; gap: 6px; }
/* When a cover photo is present, keep the identity block (name, usergroup,
   handle, bio, meta) fully BELOW the image — only the avatar overlaps it
   (Twitter-style). The default -48px row pull + flex-end alignment dragged
   the name + usergroup up onto the banner and "buried" them on busy covers. */
.profile-cover.has-cover .cover-content {
    margin-top: 0;
    align-items: start;
    padding-top: 20px;
}
.profile-cover.has-cover .cover-content > .avatar {
    margin-top: -66px;
    position: relative;
    z-index: 3;
}
/* Profile action buttons — pinned to bottom of viewport */
.cover-actions {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 40;
    display: inline-flex;
    gap: 8px;
    padding: 10px 14px;
    background: var(--card, var(--surface));
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
}
.cover-actions .btn { white-space: nowrap; }
@media (max-width: 640px) {
    .cover-actions {
        left: 12px; right: 12px; bottom: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.profile-stats {
    display: grid; grid-template-columns: repeat(6, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 18px;
    margin-bottom: 20px;
    overflow: hidden;
}
.pstat { padding: 14px 16px; border-right: 1px solid var(--border); }
.pstat:last-child { border-right: 0; }
.pstat-val { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.pstat-lbl { font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-top: 2px; }

.tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tab {
    padding: 10px 14px;
    font-size: 13px; font-weight: 500;
    color: var(--muted-foreground);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.1s;
    text-decoration: none;
    background: transparent;
}
.tab:hover { color: var(--foreground); }
.tab.active, .tab[aria-current="page"] { color: var(--foreground); border-bottom-color: var(--primary); font-weight: 600; }

.profile-grid { display: block; width: 100%; }
.profile-grid > .profile-side { display: none; }
.activity-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.activity-row { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); align-items: center; }
.activity-row:last-child { border-bottom: 0; }
.activity-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--background-alt); color: var(--muted-foreground); display: grid; place-items: center; flex-shrink: 0; }
.activity-title { font-size: 13px; }
.activity-title a { font-weight: 600; color: var(--foreground); }
.activity-title a:hover { color: var(--primary); }
.activity-meta { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); margin-top: 2px; display: flex; gap: 6px; }
.activity-meta .sep { opacity: 0.5; }

.profile-side { display: flex; flex-direction: column; gap: 14px; }
.trophy-row { display: flex; gap: 8px; flex-wrap: wrap; }
.trophy {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--background-alt);
    color: var(--primary);
    display: grid; place-items: center;
    border: 1px solid var(--border);
}
.badges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.badge-card { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.badge-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.badge-name { font-weight: 600; font-size: 13px; }
.badge-desc { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.about-grid { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.about-row { display: grid; grid-template-columns: 140px 1fr; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.about-row:last-child { border-bottom: 0; }
.about-row .lbl { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
/* Section heading + inline mod edit chip — used by Additional Information block */
.about-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 32px 4px 10px;
    padding-top: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.about-section-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.about-section-edit:hover { background: var(--muted); color: var(--foreground); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.about-section-edit i { font-size: 10px; }

/* ═══════════════════════════════════════════════════════════
   Members
   ═══════════════════════════════════════════════════════════ */
.chip {
    padding: 6px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--muted-foreground);
    cursor: pointer; text-decoration: none;
}
.chip:hover { color: var(--foreground); border-color: var(--border-strong); }
.chip.active { background: var(--foreground); color: var(--background); border-color: var(--foreground); }

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
/* Notable leaderboards: cap at 3 wide cards on desktop so they never get cramped. */
.member-grid--boards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .member-grid--boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .member-grid--boards { grid-template-columns: 1fr; } }
.member-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; text-align: center;
    text-decoration: none;
    color: var(--foreground);
    transition: border-color 0.15s, transform 0.1s;
}
.member-card:hover { border-color: var(--primary); transform: translateY(-1px); color: var(--foreground); }
.member-name { font-size: 14px; font-weight: 600; margin-top: 6px; }
.member-handle { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); }
.member-stats { display: flex; gap: 20px; margin-top: 6px; font-family: var(--font-sans); font-size: 12px; }
.member-stats > div { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.member-stats > div span:first-child { font-weight: 700; color: var(--foreground); }
.member-stats > div span:last-child { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   Conversations / DMs
   ═══════════════════════════════════════════════════════════ */
.messages-page { height: calc(100vh - var(--header-h)); overflow: hidden; padding: 0; max-width: none; }
.messages-layout { display: grid; grid-template-columns: 300px 1fr; height: 100%; border-top: 1px solid var(--border); }
.convo-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface); min-height: 0; }
.convo-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.convo-head h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.convo-search {
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    margin: 0 16px 10px;
    background: var(--background-alt);
    border-radius: 8px;
    height: 36px;
    color: var(--text-faint);
    border: 1px solid var(--border);
}
.convo-search input { flex: 1; border: 0; background: transparent; font-size: 13px; outline: none; color: var(--foreground); }
.convo-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.convo-row {
    width: 100%;
    display: flex; gap: 12px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s; position: relative; align-items: center;
    text-decoration: none; color: var(--foreground);
}
.convo-row:hover { background: var(--background-alt); }
.convo-row.active { background: var(--primary-soft); color: var(--foreground); }
.convo-row.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.convo-main { flex: 1; min-width: 0; }
.convo-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.convo-name { font-weight: 600; font-size: 13px; }
.convo-time { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); }
.convo-subject { font-size: 12px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1px; }
.convo-preview { font-size: 12px; color: var(--muted-foreground); display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-dot {
    min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 999px; background: var(--primary); color: var(--primary-foreground);
    font-family: var(--font-sans); font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
}

.convo-view { display: flex; flex-direction: column; min-height: 0; background: var(--background); }
.convo-view-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.convo-body { flex: 1; overflow-y: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; min-height: 0; border-right: 1px solid var(--border); }
.day-sep { text-align: center; margin: 8px 0; color: var(--text-faint); font-family: var(--font-sans); font-size: 11px; display: flex; align-items: center; gap: 12px; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.bubble-row { display: flex; gap: 10px; align-items: flex-end; max-width: 82%; }
.bubble-row.me { margin-left: auto; flex-direction: row-reverse; }
.bubble { background: var(--surface); border: 1px solid var(--border); padding: 10px 14px; border-radius: 14px 14px 14px 4px; max-width: 100%; }
.bubble-row.me .bubble { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); border-radius: 14px 14px 4px 14px; }
.bubble-text { font-size: 13px; line-height: 1.5; }
.bubble-time { font-family: var(--font-sans); font-size: 10px; opacity: 0.6; margin-top: 4px; text-align: right; }
.convo-composer {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
/* The composer holds a single <form> (toolbar + editor + send row). Let it span
   the full width so the BBCode editor fits edge-to-edge instead of sizing to the
   toolbar's content width. Styles the stable .convo-composer class, so it works
   regardless of the rbs7-/rb-s7- atom-class epoch on the live row. */
.convo-composer > form { flex: 1 1 auto; min-width: 0; width: 100%; }
/* Keep the conversation composer compact. It embeds the SHARED BBCode editor
   whose 160px min-height (right for thread replies) is too tall for a chat box,
   squeezing .convo-body down to a sliver. Override only inside .convo-composer
   so the editor everywhere else is untouched; cap growth so a long draft can't
   swallow the message area either. */
.convo-composer .bbcode-wysiwyg,
.convo-composer .bbcode-source-area textarea,
.convo-composer .bbcode-preview-area {
    min-height: 72px !important;
    max-height: 220px !important;
}
.msg-input {
    flex: 1; height: 38px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 13px; background: var(--background-alt);
    outline: none; color: var(--foreground);
}
.msg-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--ring); }

/* ═══════════════════════════════════════════════════════════
   Notifications
   ═══════════════════════════════════════════════════════════ */
.notif-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.notif-row {
    display: flex; gap: 14px; align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: background 0.1s;
    text-decoration: none;
    color: var(--foreground);
}
.notif-row:last-child { border-bottom: 0; }
.notif-row:hover { background: var(--background-alt); color: var(--foreground); }
.notif-row.unread { background: color-mix(in oklab, var(--primary) 3%, transparent); }
.notif-row.unread:hover { background: color-mix(in oklab, var(--primary) 6%, transparent); }
.notif-system {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--background-alt); color: var(--primary);
    display: grid; place-items: center;
}
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: 13px; line-height: 1.5; }
.notif-target { color: var(--foreground); font-weight: 500; }
.notif-meta { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.notif-kind {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--background-alt); color: var(--text-faint);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.unread-pip {
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}

/* ═══════════════════════════════════════════════════════════
   Search
   ═══════════════════════════════════════════════════════════ */
.search-hero { padding: 8px 0 20px; }
.big-search {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    color: var(--text-faint);
}
.big-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.big-search input { flex: 1; border: 0; background: transparent; font-size: 18px; outline: none; color: var(--foreground); }
.big-search kbd { font-family: var(--font-sans); font-size: 10px; padding: 3px 7px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--muted-foreground); }
.search-filters { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.search-results { display: flex; flex-direction: column; }
.search-row {
    display: flex; gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
    align-items: flex-start;
    text-decoration: none; color: var(--foreground);
}
.search-row:hover { background: var(--background-alt); }
.search-kind {
    font-family: var(--font-sans); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-faint);
    padding: 2px 6px;
    border: 1px solid var(--border); border-radius: 3px;
    margin-top: 4px; flex-shrink: 0;
    background: var(--surface);
}
.search-title { font-size: 15px; font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.search-snippet { font-size: 12px; margin-bottom: 4px; color: var(--muted-foreground); }
.search-meta { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); }

/* ═══════════════════════════════════════════════════════════
   Settings
   ═══════════════════════════════════════════════════════════ */
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; }
.snav-item {
    padding: 10px 14px;
    text-align: left;
    border-radius: 8px;
    font-size: 13px;
    color: var(--muted-foreground);
    display: flex; align-items: center; gap: 8px;
    text-decoration: none;
}
.snav-item:hover { background: var(--muted); color: var(--foreground); }
.snav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.snav-item.danger { color: var(--danger); }
.sec-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 20px; }
.setting-field { margin-bottom: 20px; max-width: 480px; }
.setting-field label { display: block; font-size: 12px; font-weight: 600; color: var(--foreground); margin-bottom: 6px; }
.setting-field input[type="text"],
.setting-field input[type="email"],
.setting-field input[type="password"],
.setting-field textarea,
.setting-field select {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px;
    background: var(--background-alt);
    outline: none;
    font-family: var(--font-sans);
    color: var(--foreground);
}
.setting-field input:focus, .setting-field textarea:focus, .setting-field select:focus {
    border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--ring);
}
.seg { display: inline-flex; background: var(--background-alt); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.seg-btn { padding: 7px 14px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.seg-btn.active { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-sm); }

.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.swatch { aspect-ratio: 1; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: transform 0.1s; position: relative; }
.swatch:hover { transform: scale(1.06); }
.swatch.active { border-color: var(--foreground); }
.swatch.active::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; }

.toggle-row, .session-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    max-width: 640px;
}
.toggle-row:last-of-type, .session-row:last-of-type { border-bottom: 0; }
.toggle-title { font-size: 13px; font-weight: 500; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background 0.15s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::before { transform: translateX(16px); }

/* ═══════════════════════════════════════════════════════════
   Flash / toast / utility
   ═══════════════════════════════════════════════════════════ */
.flash-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 13px;
}
.flash-success { border-color: var(--success); background: color-mix(in oklab, var(--success) 8%, var(--surface)); color: var(--success); }
.flash-error   { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 8%, var(--surface)); color: var(--danger); }
.flash-banner button { margin-left: auto; color: inherit; opacity: 0.7; }
.flash-banner button:hover { opacity: 1; }
.flash-banner.fade-out { opacity: 0; transition: opacity 0.3s; }

/* htmx progress bar */
#rb-progress {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 2px; z-index: 100;
    background: transparent; pointer-events: none;
}
#rb-progress.htmx-request { background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 50%, transparent)); animation: rbProg 1.2s ease-in-out infinite; }
@keyframes rbProg { 0% { transform: scaleX(0); transform-origin: left } 50% { transform: scaleX(0.6); transform-origin: left } 100% { transform: scaleX(1); transform-origin: right } }

.skip-to-content {
    /* Hidden above the viewport (direction-safe — no negative horizontal offset
       which would create RTL horizontal overflow). Positioned with the logical
       inset-inline-start so it reveals on the correct side per text direction. */
    position: absolute; inset-inline-start: 8px; top: -100px; z-index: 100;
    background: var(--foreground); color: var(--background);
    padding: 8px 12px; border-radius: 6px; font-size: 13px;
}
.skip-to-content:focus { top: 8px; }

/* Scrollbars */
.main-region::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.main-region::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: 10px; border: 2px solid var(--background);
}
.main-region::-webkit-scrollbar-thumb:hover, .scroll::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* Animations */
.animate-fade-in { animation: rbFadeIn 0.3s ease-out; }
@keyframes rbFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.animate-slide-up { animation: rbSlideUp 0.4s ease-out; }
@keyframes rbSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

[x-cloak] { display: none !important; }

/* Responsive */
@media (max-width: 1024px) {
    .container { padding: 24px 24px 60px; }
    .compose-grid { grid-template-columns: 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .settings-layout { grid-template-columns: 1fr; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .profile-stats { grid-template-columns: repeat(3, 1fr); }
    .stats-strip .stat { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .stats-strip .stat:nth-child(2n) { border-right: 0; }
    .stats-strip .stat:nth-last-child(-n+2):not(:nth-child(odd):last-child) { border-bottom: 0; }
    .stats-strip .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
    .profile-stats .pstat:nth-child(3n) { border-right: 0; }
    .profile-stats .pstat:nth-child(3n+1), .profile-stats .pstat:nth-child(3n+2) { border-right: 1px solid var(--border); }
    .profile-stats .pstat:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 720px) {
    .app { grid-template-columns: 1fr; grid-template-areas: "header" "main"; }
    .rail { display: none; }
    .header { grid-template-columns: auto 1fr auto; gap: 12px; padding: 0 12px; }
    .container { padding: 20px 16px 60px; }
    .node-row {
        grid-template-columns: 40px 1fr;
        grid-template-areas: "icon main" "last last";
        row-gap: 10px;
    }
    .node-row > .node-row-icon { grid-area: icon; }
    .node-row > .node-main { grid-area: main; }
    .node-row > .node-stats { display: none; }
    .node-row > .node-last {
        grid-area: last;
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 10px;
        border-top: 1px dashed var(--border);
        min-width: 0;
    }
    .node-row > .node-last .node-last-body { min-width: 0; flex: 1; }
    .node-row > .node-last .node-last-title { font-size: 13px; }
    .node-row > .node-last .node-last-meta { font-size: 11px; }
    .thread-row { grid-template-columns: 44px 1fr; }
    .thread-row .thread-stats, .thread-row .thread-last { display: none; }
    .post { grid-template-columns: 1fr; }
    .post-author { flex-direction: row; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
    .post-author-stats { display: none; }
    .messages-layout { grid-template-columns: 1fr; height: auto; }
    /* Inbox (no conversation open): keep the list visible & full-width.
       Only hide it when a single conversation thread (#conv-messages) is open,
       so the thread takes the whole screen. (Was unconditionally hidden →
       mobile inbox showed an empty pane with no conversations.) */
    .convo-list { display: flex; }
    .messages-layout:has(#conv-messages) .convo-list { display: none; }
    /* Unlock the messenger split-pane on phones. On desktop .messages-page is
       locked to the viewport height with overflow:hidden (Discord-style), which
       on mobile clips the reply composer below the fold AND blocks scrolling —
       the message input becomes unreachable. Let the view flow so the document
       scrolls and the composer is always reachable. */
    .messages-page { height: auto; overflow: visible; }
    .convo-view { min-height: 0; }
    .convo-body { flex: 1 1 auto; overflow: visible; }
    .header-actions .me-btn .me-name { display: none; }

    /* Conversation thread header: tighten padding, let the left block shrink so
       the title ellipsises instead of pushing the action buttons off-screen. */
    .convo-view-head { padding: 9px 12px; gap: 8px; }
    .convo-view-head > .hstack { min-width: 0; }
    .convo-view-head > .hstack:first-child { flex: 1 1 auto; flex-wrap: nowrap; }
    /* Keep title + participant count to the RIGHT of the avatar on phones:
       the base .hstack is flex-wrap:wrap, which dropped the title block below
       the avatar. nowrap (above) + min-width:0 here lets the title ellipsise
       in place instead of wrapping to a new line. */
    .convo-view-head > .hstack:first-child > div { min-width: 0; }
    .convo-view-head .rb-s7-1254 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
    .convo-view-head > .hstack:last-child { flex: 0 0 auto; gap: 2px; }
    .convo-view-head .icon-btn { width: 34px; height: 34px; }
    /* Declutter the header on phones: the verbose "last seen: <date>" row was
       wrapping to ~3 lines, and the participant count is redundant in a 1:1 DM.
       Drop the count when a last-seen row is present, and clamp that row to a
       single ellipsised line. Group chats (no last-seen row) keep their count. */
    .convo-view-head > .hstack:first-child > div:has(> .mono:not(.faint)) > .rb-s7-0774 { display: none; }
    .convo-view-head > .hstack:first-child > div > .mono:not(.faint) {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw;
    }
    .convo-body { padding: 14px 12px; border-right: 0; }
    .convo-composer { padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════════════════
   Widgets — rb-widget-* containers
   RaxBoard's widget system uses .rb-widget-container with optional
   .widget-no-card. Bundle CSS only styled .side-card; map the runtime
   classes onto the same visual language.
   ═══════════════════════════════════════════════════════════ */
.widget-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.widget-sidebar .rb-widget-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.widget-sidebar .rb-widget-container.widget-no-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}
.rb-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.rb-widget-icon {
    width: 18px;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 0.88rem;
    flex-shrink: 0;
}
.rb-widget-title {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-foreground);
}
.rb-widget-body {
    padding: 14px 16px;
    font-size: 0.82rem;
    color: var(--foreground);
}
.rb-widget-body p {
    margin: 0 0 8px;
    line-height: 1.55;
    color: var(--muted-foreground);
}
.rb-widget-body p:last-child { margin-bottom: 0; }
.rb-widget-body a {
    color: var(--primary);
    text-decoration: none;
}
.rb-widget-body a:hover {
    text-decoration: underline;
}

/* List rows inside a widget (recent posts / online users / new members) */
.rb-widget-body .widget-item,
.rb-widget-body .rb-widget-item,
.rb-widget-body > div[style*="border-top"] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border) !important;
}
.rb-widget-body > div[style*="border-top"]:first-child {
    border-top: 0 !important;
    padding-top: 0;
}
.rb-widget-body .widget-item:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Stat-grid micro-cards inside widgets */
.rb-widget-body > div[style*="display: flex"][style*="gap: 8px"] > div {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

/* Avatar pillar */
.rb-widget-body .rb-avatar,
.rb-widget-body img[class*="avatar"] {
    flex-shrink: 0;
}

/* Dark mode */
html[data-theme="dark"] .widget-sidebar .rb-widget-container {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .rb-widget-header {
    background: var(--surface-2);
}

/* ─── Footer alignment guards ───────────────────────────── */
.app > main, body > main, main.animate-fade-in { min-width: 0; }
.app > .site-footer,
.app footer.site-footer,
.app > footer,
body > footer.site-footer {
    flex-shrink: 0;
    width: 100%;
    clear: both;
    margin-top: auto;
    display: block;
    position: relative;
}
.site-footer-inner {
    max-width: var(--container, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Profile — pro polish: cover, avatar overlay, segmented tab bar
 * ═══════════════════════════════════════════════════════════════════════ */
.profile-cover {
    position: relative;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    margin-bottom: 0;
}
.profile-cover .cover-bg {
    height: 240px;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--primary) 22%, var(--surface)) 0%,
        color-mix(in oklab, var(--primary) 8%, var(--surface)) 60%,
        var(--surface) 100%);
    position: relative;
}
.profile-cover.has-cover .cover-bg { background-size: cover; background-repeat: no-repeat; }

/* Cover reposition (Facebook-style drag) */
.profile-cover .cover-bg.is-repositioning { cursor: grab; touch-action: none; user-select: none; }
.profile-cover .cover-bg.is-repositioning:active { cursor: grabbing; }
.cover-reposition-btn {
    position: absolute; top: 12px; left: 12px; right: auto; z-index: 4;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border: 0; border-radius: 8px;
    background: rgba(0,0,0,0.55); color: #fff; font-size: 13px; font-weight: 600;
    cursor: pointer; backdrop-filter: blur(4px); transition: background .15s ease;
}
.cover-reposition-btn:hover { background: rgba(0,0,0,0.72); }
/* Remove-cover button — top-right, stacked under the "Change cover" control
   (.cover-bg-edit sits at top:0.75rem). Danger tint on hover. */
.cover-remove-btn {
    position: absolute; top: 54px; right: 12px; left: auto; z-index: 4;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border: 0; border-radius: 8px;
    background: rgba(0,0,0,0.55); color: #fff; font-size: 13px; font-weight: 600;
    cursor: pointer; backdrop-filter: blur(4px); transition: background .15s ease;
}
.cover-remove-btn:hover { background: rgba(220,38,38,0.88); }
.cover-reposition-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); color: #fff;
}
.cover-reposition-hint { font-size: 13px; display: inline-flex; align-items: center; gap: 7px; opacity: .92; }
.cover-reposition-actions { display: inline-flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 600px) {
    .cover-reposition-btn span { display: none; }
    .cover-remove-btn span { display: none; }
    .cover-reposition-hint { font-size: 12px; }
    .cover-reposition-bar { padding: 8px 10px; }
}
.profile-cover .cover-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.18) 100%);
}

/* Cover edit chip — visible on hover */
.profile-cover-edit {
    position: absolute;
    top: 14px; right: 14px;
    padding: 7px 13px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff !important;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 200ms ease, transform 200ms ease, background 160ms ease;
    z-index: 5;
}
.profile-cover:hover .profile-cover-edit { opacity: 1; transform: translateY(0); }
.profile-cover-edit:hover { background: rgba(0,0,0,0.78); }

/* Avatar — big rounded square, hover reveals camera overlay */
.profile-cover .cover-content > div:first-child {
    position: relative;
    width: 132px; height: 132px;
}
.profile-cover .avatar.xl {
    width: 132px !important;
    height: 132px !important;
    font-size: 48px !important;
    border-radius: 18px !important;
    border: 4px solid var(--surface);
    box-shadow: var(--shadow-lg);
    transition: transform 200ms ease;
}
.profile-cover .avatar.xl:hover { transform: translateY(-2px); }
.profile-cover .avatar.xl img { border-radius: 14px; width: 100%; height: 100%; object-fit: cover; }

.profile-avatar-edit {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
    color: #fff !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center;
    padding-bottom: 14px;
    opacity: 0;
    transition: opacity 200ms ease;
    text-decoration: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.profile-avatar-edit::before {
    content: '\f030';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 22px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, calc(-50% - 10px));
}
.profile-cover .cover-content > div:first-child:hover .profile-avatar-edit { opacity: 1; }
.profile-avatar-edit i { display: none; }

/* Banner strip under nick */
.profile-banner,
.profile-cover .profile-banner {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px !important;
    border-radius: 4px !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.18);
    line-height: 1.4 !important;
}

/* ═══════════════════════════════════════════════════════════
 * Pro segmented tab bar — icons + counts + active pill
 * ═══════════════════════════════════════════════════════════ */
.profile-tabs {
    display: flex;
    gap: 2px;
    padding: 4px;
    margin: 14px 0 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    position: sticky;
    top: calc(var(--header-h, 60px) + 8px);
    z-index: 4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow-x: auto;
    scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }

.profile-tab,
.profile-tabs a,
.profile-tabs button {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 9px 16px !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-foreground) !important;
    cursor: pointer;
    text-decoration: none;
    border: 0;
    background: transparent;
    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 200ms ease;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: inherit;
}
.profile-tab i,
.profile-tabs a i {
    font-size: 13px;
    width: 14px;
    text-align: center;
    color: currentColor;
    opacity: 0.9;
    transition: transform 200ms ease;
}

.profile-tab:hover,
.profile-tabs a:hover {
    color: var(--foreground) !important;
    background: color-mix(in oklab, var(--primary) 6%, transparent);
}
.profile-tab:hover i { transform: translateY(-1px); }

.profile-tab.is-active,
.profile-tab.active,
.profile-tabs a.is-active,
.profile-tabs a.active {
    color: var(--primary-foreground) !important;
    background: var(--primary) !important;
    box-shadow:
        0 2px 6px color-mix(in oklab, var(--primary) 30%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.18);
}
.profile-tab.is-active i,
.profile-tab.active i,
.profile-tabs a.is-active i,
.profile-tabs a.active i { opacity: 1; }

.profile-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--foreground) 10%, transparent);
    color: var(--muted-foreground);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.profile-tab.is-active .profile-tab-count,
.profile-tab.active .profile-tab-count,
.profile-tabs a.is-active .profile-tab-count,
.profile-tabs a.active .profile-tab-count {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

.profile-tab:focus-visible,
.profile-tabs a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .profile-tabs { border-radius: 10px; gap: 1px; padding: 3px; }
    .profile-tab,
    .profile-tabs a { padding: 8px 12px !important; font-size: 12px; }
    .profile-tab i,
    .profile-tabs a i { display: none; }
}

/* ─── BBCode editor toolbar ─── */
.bbcode-editor-wrapper {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: visible;
    position: relative;
}
.bbcode-toolbar {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 6px 8px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.bbcode-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0; border-radius: 6px;
    color: var(--muted-foreground);
    font-size: 13px; cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.bbcode-btn:hover { background: var(--muted); color: var(--foreground); }
.bbcode-btn:active { background: var(--primary-soft); color: var(--primary); }
.bbcode-sep {
    width: 1px; height: 18px;
    background: var(--border);
    margin: 0 4px;
}
.bbcode-editor-wrapper textarea {
    width: 100%;
    border: 0;
    background: var(--surface);
    color: var(--foreground);
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
    min-height: 120px;
    outline: none;
}
.bbcode-editor-wrapper textarea:focus { background: var(--surface); }

/* ─── Settings preference cards ─── */
.settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 14px 0;
    overflow: hidden;
}
.settings-card-h {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.settings-card-h h3 { margin: 0; font-size: 14px; font-weight: 700; }
.settings-card-h p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted-foreground); }
.settings-form { padding: 14px 18px; }
.settings-toggle { display: flex; flex-direction: column; gap: 4px; }
.settings-toggle-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}
.settings-toggle-row:hover {
    background: color-mix(in oklab, var(--primary) 4%, transparent);
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
}
.settings-toggle-row input[type=checkbox] {
    margin-top: 3px;
    width: 16px; height: 16px;
    accent-color: var(--primary);
}
.settings-toggle-body strong { display: block; font-size: 13px; font-weight: 600; color: var(--foreground); }
.settings-toggle-body em { display: block; margin-top: 2px; font-size: 12px; font-style: normal; color: var(--muted-foreground); line-height: 1.4; }
.settings-row { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.settings-label { font-size: 13px; font-weight: 600; }
.settings-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--foreground);
    font-family: inherit; font-size: 13px;
}
.settings-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }

/* ─── Poll block ─── */
.poll-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
}
.poll-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.poll-head i { color: var(--primary); }
.poll-head h3 { margin: 0; font-size: 14px; font-weight: 700; flex: 1; }
.poll-head .poll-end { font-size: 11.5px; color: var(--muted-foreground); }
.poll-form { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.poll-opt {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr auto 50px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 140ms ease;
}
.poll-opt:hover { border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
.poll-opt.is-mine { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 6%, transparent); }
.poll-opt input[type=radio], .poll-opt input[type=checkbox] { accent-color: var(--primary); }
.poll-opt-label { font-size: 13px; font-weight: 500; z-index: 1; }
.poll-opt-bar {
    position: absolute; inset: 0;
    width: var(--pct, 0%);
    background: color-mix(in oklab, var(--primary) 10%, transparent);
    pointer-events: none;
    transition: width 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.poll-opt-pct { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--foreground); z-index: 1; }
.poll-opt-votes { font-size: 11px; color: var(--muted-foreground); z-index: 1; text-align: right; }
.poll-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.poll-total { font-size: 12px; color: var(--muted-foreground); }

/* ─── Post attachments ─── */
.post-attachments {
    margin-top: 12px;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.post-attach {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 140ms ease, transform 140ms ease;
}
.post-attach:hover { border-color: var(--primary); transform: translateY(-1px); }
.post-attach-img { padding: 0; max-width: 280px; max-height: 180px; }
.post-attach-img img { display: block; max-width: 100%; max-height: 180px; }
.post-attach-file { padding: 8px 12px; gap: 10px; color: var(--foreground); }
.post-attach-file i { color: var(--muted-foreground); font-size: 14px; }
.post-attach-name { font-size: 13px; font-weight: 500; }
.post-attach-size { margin-left: auto; font-size: 11px; color: var(--muted-foreground); font-family: var(--font-sans); }

/* ─── Reaction picker ─── */
.reaction-picker-wrap { position: relative; display: inline-block; }
.reaction-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    min-width: 220px;
}
/* The post card uses overflow:hidden (for its rounded corners), which clips the
   absolutely-positioned reaction picker and traps its z-index. While a picker is
   open, un-clip its card and lift it above sibling posts so the popup is never
   hidden under the next block. */
.post-wrapper:has(.reaction-picker:not([style*="display: none"])) {
    overflow: visible;
    position: relative;
    z-index: 50;
}

/* ── rf-* shared primitives (clubs, events) ─────────────────────────────────
   Clubs/events templates define their page-specific cards in inline <style>
   blocks, but the structural layout + button primitives below are shared and
   were previously undefined — leaving those pages with no container, header,
   search field, empty state, or buttons. Defined globally here so every rf-
   page gets its scaffolding (and so the fix ships in the install package). */
.rf-main-section { max-width: var(--container, 1200px); margin: 0 auto; padding: 20px 16px 56px; }
.rf-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.rf-page-head h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.rf-page-head .desc { margin: 0; font-size: 13.5px; color: var(--muted-foreground); }
.rf-page-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-search-inline { display: flex; }
.rf-search-inline input { padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: inherit; min-width: 200px; }
.rf-search-inline input:focus { outline: none; border-color: var(--primary); }
.rf-empty { text-align: center; padding: 48px 20px; color: var(--muted-foreground); background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; font-size: 14px; }
.rf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--foreground); font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.rf-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.rf-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.rf-btn-primary:hover { filter: brightness(1.06); border-color: var(--primary); }

/* Initial/text avatars render as a <div> (uploaded avatars are an <img>). They
   must always centre their letter; a few layouts force display:block on
   .rb-avatar, dropping the initial into the top-left corner — most visibly the
   mobile post header for members without an uploaded avatar. */
div.rb-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.reaction-emoji {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px;
    background: transparent;
    border: 0; border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.reaction-emoji:hover { background: var(--muted); transform: scale(1.08); }
.reaction-emoji-glyph { font-size: 22px; line-height: 1; }
.reaction-emoji-kind { font-size: 9.5px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; }

/* ─── Solution badge ─── */
.post-solution-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: color-mix(in oklab, var(--success) 18%, transparent);
    color: var(--success);
    border: 1px solid color-mix(in oklab, var(--success) 35%, transparent);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mark-solution-btn:hover {
    background: color-mix(in oklab, var(--success) 14%, transparent);
    border-color: var(--success);
    color: var(--success);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Inline moderation bar — sticky floating bar at bottom when items selected
 * Port of Classic's inline_mod_bar (rb-s7-0791) scoped to default theme
 * ═══════════════════════════════════════════════════════════════════════ */
.rb-mod-bar,
body[data-theme-id="raxboard_default"] .inline-mod-floating {
    position: fixed;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    z-index: 90;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px 10px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 92vw;
    flex-wrap: wrap;
}
.rb-mod-bar-count {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: color-mix(in oklab, var(--primary) 14%, transparent);
    color: var(--primary);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}
.rb-mod-bar-count i { font-size: 12px; }
.rb-mod-bar .btn { font-size: 12px; padding: 6px 12px; height: 32px; }
.rb-mod-bar-sep { width: 1px; height: 22px; background: var(--border); }
.rb-mod-bar-close {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0; border-radius: 999px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.rb-mod-bar-close:hover { background: var(--muted); color: var(--foreground); }

/* Inline-mod row checkbox */
.inline-mod-cb {
    width: 16px; height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}
.tmpl-row.tmpl-row-selected,
.thread-row.is-selected,
.post.is-selected {
    background: color-mix(in oklab, var(--primary) 8%, transparent);
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Mobile */
@media (max-width: 760px) {
    .rb-mod-bar { left: 12px; right: 12px; transform: none; bottom: 12px; border-radius: 14px; }
}

/* ─── Profile wall ─── */
.profile-wall {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 14px 0;
}
.profile-wall-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.profile-wall-head h3 { margin: 0; font-size: 14px; font-weight: 700; flex: 1; }
.profile-wall-head i { color: var(--primary); }
.profile-wall-count {
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    color: var(--primary);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.profile-wall-compose {
    display: flex; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.profile-wall-compose .avatar { flex-shrink: 0; }
.profile-wall-list { list-style: none; margin: 0; padding: 0; }
.profile-wall-item {
    display: flex; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.profile-wall-item:last-child { border-bottom: 0; }
.profile-wall-avatar { flex-shrink: 0; }
.profile-wall-body { flex: 1; min-width: 0; }
.profile-wall-meta {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
    font-size: 12.5px;
}
.profile-wall-user { font-weight: 700; color: var(--foreground); text-decoration: none; }
.profile-wall-user:hover { color: var(--primary); }
.profile-wall-date { color: var(--muted-foreground); font-size: 11.5px; }
.profile-wall-actions { margin-left: auto; }
.profile-wall-actions .btn { padding: 4px 10px; }
.profile-wall-content {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--foreground);
    word-break: break-word;
}
.profile-wall-content-sm { font-size: 12.5px; }
.profile-wall-comments {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 8px;
}
.profile-wall-comment {
    display: flex; gap: 8px; align-items: flex-start;
}
.profile-wall-comment > div:last-child { flex: 1; }
.profile-wall-comment .profile-wall-user { font-size: 12px; }
.profile-wall-comment-form {
    display: flex; gap: 6px; margin-top: 10px;
}
.profile-wall-comment-form input[type=text] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--foreground);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}
.profile-wall-comment-form input[type=text]:focus {
    border-color: var(--primary);
    background: var(--surface);
}
.profile-wall-empty {
    padding: 32px 18px;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 13px;
}

/* ─── Compact BBCode editor for inline composers (conversation reply) ─── */
.bbcode-inline-compact .bbcode-toolbar { padding: 4px 6px; gap: 0; }
.bbcode-inline-compact .bbcode-btn { width: 26px; height: 26px; font-size: 11px; }
.bbcode-inline-compact textarea { min-height: 56px; padding: 8px 12px; font-size: 13.5px; }

/* ─── Force profile wall to be block-level above tabs ─── */
.profile-wall {
    display: block !important;
    width: 100% !important;
    clear: both;
    margin: 18px 0 14px !important;
}
.profile-tabs { width: 100%; }
.profile-wall-head { display: flex; }
.profile-wall-compose { display: flex; }
.profile-wall-list { display: block; }
.profile-wall-item { display: flex; }
.profile-wall-empty { display: block; }

/* ─── Thread pagination ─── */
.thread-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 24px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-wrap: wrap;
}
.thread-pagination .pg-btn,
.thread-pagination .pg-num {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 36px; height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--foreground);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 140ms, color 140ms, border-color 140ms;
}
.thread-pagination .pg-btn:hover,
.thread-pagination .pg-num:hover {
    background: var(--muted);
    border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
    color: var(--primary);
}
.thread-pagination .pg-num.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 2px 6px color-mix(in oklab, var(--primary) 28%, transparent);
}
.thread-pagination .pg-btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}
.thread-pagination .pg-list {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.thread-pagination .pg-ellipsis {
    width: 28px;
    text-align: center;
    color: var(--muted-foreground);
    font-weight: 700;
    user-select: none;
}
.thread-pagination .pg-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
    .thread-pagination { padding: 10px; gap: 6px; }
    .thread-pagination .pg-btn span { display: none; }
    .thread-pagination .pg-count { width: 100%; text-align: center; margin: 4px 0 0; }
}

/* ─── Mobile bottom nav — hide on desktop, full styling on mobile ─── */
.mobile-bottom-nav {
    display: none;
}
@media (max-width: 760px) {
    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 50;
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
    }
    .mobile-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        font-size: 10.5px;
        font-weight: 600;
        text-decoration: none;
        color: var(--muted-foreground);
        border-radius: 8px;
        transition: background 120ms ease, color 120ms ease;
    }
    .mobile-bottom-nav__item i {
        font-size: 18px;
        line-height: 1;
    }
    .mobile-bottom-nav__item:hover,
    .mobile-bottom-nav__item--active {
        color: var(--primary);
        background: color-mix(in oklab, var(--primary) 8%, transparent);
    }
    body {
        padding-bottom: 64px; /* avoid overlap with bottom nav */
    }
    /* Hide search trigger + theme dropdown on mobile */
    .header .global-search,
    .header .rb-theme-dd {
        display: none !important;
    }
}

/* ─── Post foot: pin to bottom of post body, even spacing ─── */
.post-body {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
}
.post-body > .post-foot,
.post-body footer.post-foot {
    margin-top: auto !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 2px;
    border-top: 1px solid var(--border);
}
.post-body .post-foot .spacer { flex: 1 1 0; }

.post-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    text-decoration: none;
    white-space: nowrap;
}
.post-action:hover {
    background: var(--muted);
    color: var(--foreground);
}
.post-action.on { color: var(--primary); }
.post-action.rep-neg { color: #ef4444; }
.post-action i { font-size: 13px; }
/* Reputation control + reason popup (vBulletin-style) */
.rb-rep { position: relative; display: inline-block; }
.rb-rep-pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 50; width: 260px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.25); }
.rb-rep-pop__title { font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--foreground); }
.rb-rep-pop__reason { width: 100%; box-sizing: border-box; resize: vertical; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); color: var(--foreground); }
.rb-rep-pop__actions { display: flex; gap: 6px; margin-top: 8px; }
.rb-rep-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--background); color: var(--foreground); }
.rb-rep-btn--pos:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.rb-rep-btn--neg:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.rb-rep-btn:disabled { opacity: .6; cursor: default; }
/* Profile "reputation received" sidebar list */
.rb-rep-list { display: flex; flex-direction: column; gap: 8px; }
.rb-rep-item { font-size: 12px; }
.rb-rep-item__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rb-rep-item__from { font-weight: 600; color: var(--foreground); }
.rb-rep-item__pts { font-weight: 700; font-family: var(--font-sans); }
.rb-rep-item__pts.is-pos { color: #16a34a; }
.rb-rep-item__pts.is-neg { color: #ef4444; }
.rb-rep-item__reason { color: var(--muted-foreground); margin-top: 2px; line-height: 1.4; }

/* ─── Reaction bar + picker ─── */
.react-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.react-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground);
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
    line-height: 1;
}
.react-chip:hover { background: var(--muted); border-color: var(--primary); }
.react-chip.on {
    background: color-mix(in oklab, var(--primary) 14%, transparent);
    border-color: var(--primary);
    color: var(--primary);
}
.react-chip__emoji { font-size: 15px; line-height: 1; }
.react-chip__label { font-size: 12px; }
.react-chip--add {
    background: transparent;
    border-style: dashed;
}

.react-picker-wrap {
    position: relative;
    display: inline-block;
}
.react-picker {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
    z-index: 30;
    white-space: nowrap;
}
.react-picker::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--surface);
}
/* ─── Warning modal (Master's rb-s7-* classes unavailable in Default theme) ─── */
#warnModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 120;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ─── BBCode toolbar core sizing (Master CSS unavailable in Default) ─── */
.bbcode-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    background: var(--surface-2);
}
.bbcode-toolbar .bbcode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--foreground);
    font-size: 13px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.bbcode-toolbar .bbcode-btn:hover {
    background: var(--muted);
    border-color: var(--border);
}
.bbcode-toolbar .bbcode-btn.active,
.bbcode-toolbar .bbcode-btn[aria-pressed="true"] {
    background: color-mix(in oklab, var(--primary) 18%, transparent);
    border-color: var(--primary);
    color: var(--primary);
}
.bbcode-toolbar .bbcode-btn i {
    font-size: 13px;
    line-height: 1;
}
.bbcode-toolbar .bbcode-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.bbcode-toolbar .bbcode-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted-foreground);
    font-size: 12px;
    cursor: pointer;
}
.bbcode-toolbar .bbcode-tab-btn.active {
    background: color-mix(in oklab, var(--primary) 18%, transparent);
    color: var(--primary);
    border-color: var(--primary);
}

/* ─── BBCode toolbar shims (Master rb-s7-* classes unavailable in Default) ─── */
/* Vertical divider between button groups */
.bbcode-toolbar .rb-s7-0438 {
    flex: 0 0 1px !important;
    width: 1px !important;
    height: 18px !important;
    background: var(--border);
    margin: 0 4px;
    align-self: center;
}
/* Trailing button group (undo/redo/fullscreen/source) — must lay inline */
.bbcode-toolbar .rb-s7-0332 {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    height: auto !important;
}
.bbcode-toolbar .rb-s7-0332 .bbcode-tab-btn,
.bbcode-toolbar .rb-s7-0332 .bbcode-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Generic relative dropdown wrappers (color picker, font-size, table picker) */
.bbcode-toolbar > .relative {
    display: inline-flex;
    align-items: center;
}
#warnModal > div:first-child {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: min(520px, 100%);
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
#warnModal h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}
#warnModal form {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#warnModal form label {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    margin: 0;
}
#warnModal form input[type=text],
#warnModal form input[type=number],
#warnModal form input[type=date],
#warnModal form select,
#warnModal form textarea {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--surface-2);
    color: var(--foreground);
    font-size: 14px;
    width: 100%;
}
#warnModal .rb-s7-0630 {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--muted-foreground);
    font-size: 16px;
    padding: 4px;
}
#warnModal > div:first-child > div:first-child {
    position: relative;
}

/* ─── Header search modal (Alpine x-show toggles inline display) ─── */
/* Alpine's x-show sets inline `display: none` to hide; when showing it
   removes the inline display value entirely (leaving the attribute empty).
   Match only the "shown" state via attribute-not-contains-none selector so
   we don't fight Alpine's hide. */
.cmdk-backdrop:not([style*="display: none"]) {
    display: flex;
}

.react-picker__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: transform 100ms ease, background 100ms ease;
}
.react-picker__item:hover {
    background: var(--muted);
    transform: scale(1.15);
}
.react-picker__item.is-active {
    background: color-mix(in oklab, var(--primary) 14%, transparent);
}


/* ───── Editor rules ported from Master CSS ───── */
/* Editor/preview wrapper — unified with toolbar */
.bbcode-editor-area,
.bbcode-preview-area {
  background: var(--surface) !important;
  color: var(--text) !important;}
html[data-theme="dark"] .bbcode-editor-area,
html[data-theme="dark"] .bbcode-preview-area {
  background: var(--surface, #1a1a24) !important;
  color: var(--text, #e6e6f0) !important;}
/* >>> RAXBOARD_AUTO_INLINE_STYLE_CLASSES >>> */
/* ============================================================= */
/* Auto-generated: inline style -> classes for style_id=7 */
/* Generated 2026-04-24T14:24:04+00:00 by bin/style7_inline_to_css.php */
/* Count: 1467 unique rules */
/* ============================================================= */
.rb-s7-1304{--rb-grid-min:200px;}
.rb-s7-0991{--rb-grid-min:280px;}
.rb-s7-1003{--rb-stack-gap:8px;}
.rb-s7-0042{--tw-divide-opacity:1;border-color:var(--border);}
.rb-s7-0889{-webkit-line-clamp:2;font-size:0.72rem;}
.rb-s7-1331{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;}
.rb-s7-0044{accent-color:var(--primary);}
.rb-s7-0245{accent-color:var(--primary);width:15px;height:15px;}
.rb-s7-0198{accent-color:var(--primary);width:15px;height:15px;cursor:pointer;}
.rb-s7-1000{align-items:flex-start;}
.rb-s7-0379{animation:fadeOut 0.5s ease 3s forwards;}
.rb-s7-1129{animation:spin .6s linear infinite;margin-right:6px;}
.rb-s7-0129{appearance:none;width:15px;height:15px;border:1.5px solid var(--color-border);border-radius:3px;background:var(--color-input,#0d0c0b);cursor:pointer;position:relative;flex-shrink:0;}
.rb-s7-0833{background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0);background-size:24px 24px;}
.rb-s7-0590{background:#0f1120;color:#e2e8f0;border-radius:8px;padding:1rem 1.25rem;font-family:'JetBrains Mono', ui-monospace, monospace;font-size:12.5px;line-height:1.6;overflow:auto;max-height:70vh;border:1px solid rgba(255,87,34,0.12);}
.rb-s7-0477{background:#171923;border-top:1px solid rgba(255,255,255,0.05);}
.rb-s7-0633{background:#1e2030;border-top:1px solid rgba(255,255,255,0.06);margin-top:3rem;}
.rb-s7-0121{background:#ef4444;color:#fff;font-size:0.6rem;padding:1px 6px;border-radius:99px;font-weight:700;min-width:18px;text-align:center;}
.rb-s7-0827{background:#ef4444;color:#fff;font-size:0.6rem;padding:1px 6px;border-radius:var(--rb-border-radius-full, 9999px);font-weight:700;min-width:18px;text-align:center;}
.rb-s7-0062{background:#ef4444;color:white;}
.rb-s7-0555{background:color-mix(in srgb, #22c55e 15%, transparent);color:#22c55e;padding:3px 10px;border-radius:99px;font-size:0.65rem;font-weight:600;}
.rb-s7-0561{background:color-mix(in srgb, #22c55e 15%, transparent);color:#22c55e;padding:3px 10px;border-radius:var(--rb-border-radius-full, 9999px);font-size:0.65rem;font-weight:600;}
.rb-s7-0758{background:color-mix(in srgb, #6366f1 15%, transparent);color:#6366f1;font-size:0.75rem;}
.rb-s7-0478{background:color-mix(in srgb, #ef4444 15%, transparent);}
.rb-s7-0754{background:color-mix(in srgb, #ef4444 15%, transparent);color:#ef4444;padding:3px 10px;border-radius:99px;font-size:0.7rem;font-weight:700;}
.rb-s7-1180{background:color-mix(in srgb, #ef4444 15%, transparent);color:#ef4444;padding:3px 10px;border-radius:var(--rb-border-radius-full, 9999px);font-size:0.7rem;font-weight:700;}
.rb-s7-0213{background:color-mix(in srgb, #f59e0b 15%, transparent);color:#f59e0b;padding:3px 10px;border-radius:99px;font-size:0.65rem;font-weight:600;}
.rb-s7-0851{background:color-mix(in srgb, #f59e0b 15%, transparent);color:#f59e0b;padding:3px 10px;border-radius:var(--rb-border-radius-full, 9999px);font-size:0.65rem;font-weight:600;}
.rb-s7-0981{background:color-mix(in srgb, var(--color-primary-500) 10%, transparent);}
.rb-s7-0836{background:color-mix(in srgb, var(--color-primary-500) 12%, transparent);border:1px solid color-mix(in srgb, var(--color-primary-500) 25%, transparent);color:var(--color-text);}
.rb-s7-0712{background:color-mix(in srgb, var(--danger) 10%, transparent);}
.rb-s7-1346{background:color-mix(in srgb, var(--danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--danger) 25%, transparent);}
.rb-s7-0502{background:color-mix(in srgb, var(--danger) 10%, transparent);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 20%, transparent);}
.rb-s7-1372{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);}
.rb-s7-0269{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);font-size:0.75rem;cursor:default;}
.rb-s7-0469{background:color-mix(in srgb, var(--danger) 4%, transparent);border-bottom:1px solid color-mix(in srgb, var(--danger) 15%, transparent);}
.rb-s7-0787{background:color-mix(in srgb, var(--danger) 4%, transparent);border:1px solid color-mix(in srgb, var(--danger) 15%, transparent);}
.rb-s7-0932{background:color-mix(in srgb, var(--danger) 5%, transparent);border:1px solid color-mix(in srgb, var(--danger) 20%, transparent);}
.rb-s7-0241{background:color-mix(in srgb, var(--danger) 8%, transparent);border:1px solid color-mix(in srgb, var(--danger) 20%, transparent);}
.rb-s7-0479{background:color-mix(in srgb, var(--danger) 8%, transparent);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 15%, transparent);}
.rb-s7-1301{background:color-mix(in srgb, var(--destructive) 10%, transparent);border:1px solid var(--destructive);border-radius:8px;padding:8px 12px;margin-bottom:12px;}
.rb-s7-0154{background:color-mix(in srgb, var(--destructive) 15%, transparent);color:var(--destructive);font-size:0.75rem;}
.rb-s7-0318{background:color-mix(in srgb, var(--destructive) 15%, transparent);color:var(--destructive);font-size:0.7rem;}
.rb-s7-0615{background:color-mix(in srgb, var(--destructive) 8%, transparent);border:1px solid color-mix(in srgb, var(--destructive) 25%, transparent);}
.rb-s7-0010{background:color-mix(in srgb, var(--foreground) 2%, transparent);}
.rb-s7-0396{background:color-mix(in srgb, var(--foreground) 3%, transparent);}
.rb-s7-0530{background:color-mix(in srgb, var(--foreground) 3%, transparent);border:1px solid var(--border);}
.rb-s7-0132{background:color-mix(in srgb, var(--foreground) 3%, transparent);color:var(--foreground);}
.rb-s7-0715{background:color-mix(in srgb, var(--foreground) 5%, transparent);color:var(--muted-foreground);border:none;cursor:pointer;}
.rb-s7-1277{background:color-mix(in srgb, var(--muted) 50%, transparent);}
.rb-s7-0165{background:color-mix(in srgb, var(--primary) 10%, transparent);}
.rb-s7-0281{background:color-mix(in srgb, var(--primary) 10%, transparent);color:var(--primary);}
.rb-s7-0366{background:color-mix(in srgb, var(--primary) 15%, transparent);color:var(--primary);}
.rb-s7-0482{background:color-mix(in srgb, var(--primary) 4%, transparent);border:1px solid color-mix(in srgb, var(--primary) 12%, transparent);}
.rb-s7-0867{background:color-mix(in srgb, var(--primary) 8%, transparent);}
.rb-s7-0022{background:color-mix(in srgb, var(--primary) 8%, transparent);border:1px solid color-mix(in srgb, var(--primary) 15%, transparent);}
.rb-s7-0036{background:color-mix(in srgb, var(--primary) 8%, transparent);border:1px solid color-mix(in srgb, var(--primary) 25%, transparent);}
.rb-s7-0084{background:color-mix(in srgb, var(--primary) 8%, transparent);color:var(--primary);}
.rb-s7-0916{background:color-mix(in srgb, var(--primary) 8%, transparent);color:var(--primary);border:1px dashed color-mix(in srgb, var(--primary) 30%, transparent);cursor:pointer;}
.rb-s7-0602{background:color-mix(in srgb, var(--rb-forum-node-icon-color, var(--primary)) 10%, transparent);}
.rb-s7-0182{background:color-mix(in srgb, var(--success) 10%, transparent);}
.rb-s7-0846{background:color-mix(in srgb, var(--success) 10%, transparent);border:1px solid color-mix(in srgb, var(--success) 25%, transparent);}
.rb-s7-0337{background:color-mix(in srgb, var(--success) 12%, transparent);}
.rb-s7-0334{background:color-mix(in srgb, var(--success) 12%, transparent);color:var(--success);}
.rb-s7-0995{background:color-mix(in srgb, var(--success) 4%, transparent);border:1px solid color-mix(in srgb, var(--success) 15%, transparent);}
.rb-s7-0850{background:color-mix(in srgb, var(--success) 8%, transparent);border:1px solid color-mix(in srgb, var(--success) 20%, transparent);}
.rb-s7-0069{background:color-mix(in srgb, var(--success) 8%, transparent);border:1px solid color-mix(in srgb, var(--success) 25%, transparent);}
.rb-s7-0718{background:color-mix(in srgb, var(--success, #16a34a) 8%, transparent);color:var(--success, #16a34a);border-bottom:1px solid color-mix(in srgb, var(--success, #16a34a) 20%, transparent);}
.rb-s7-0131{background:color-mix(in srgb, var(--success, #22c55e) 15%, transparent);color:var(--success, #22c55e);font-size:0.75rem;}
.rb-s7-0040{background:color-mix(in srgb, var(--success, #22c55e) 15%, transparent);color:var(--success, #22c55e);font-size:0.7rem;}
.rb-s7-1028{background:color-mix(in srgb, var(--warning) 10%, transparent);}
.rb-s7-1084{background:color-mix(in srgb, var(--warning) 10%, transparent);border:1px solid color-mix(in srgb, var(--warning) 20%, transparent);}
.rb-s7-0578{background:color-mix(in srgb, var(--warning) 12%, transparent);color:var(--warning);}
.rb-s7-1014{background:color-mix(in srgb, var(--warning) 12%, transparent);color:var(--warning);border:none;cursor:pointer;}
.rb-s7-0892{background:color-mix(in srgb, var(--warning) 12%, transparent);color:var(--warning);font-size:0.75rem;}
.rb-s7-0706{background:color-mix(in srgb, var(--warning) 12%, transparent);color:var(--warning);font-size:0.75rem;cursor:default;}
.rb-s7-0693{background:color-mix(in srgb, var(--warning) 15%, transparent);}
.rb-s7-0222{background:color-mix(in srgb, var(--warning) 15%, transparent);color:var(--warning);}
.rb-s7-0464{background:color-mix(in srgb, var(--warning) 15%, transparent);color:var(--warning);font-size:0.75rem;}
.rb-s7-0607{background:color-mix(in srgb, var(--warning) 6%, transparent);border:1px solid color-mix(in srgb, var(--warning) 30%, transparent);}
.rb-s7-0270{background:color-mix(in srgb, var(--warning) 8%, transparent);border:1px solid color-mix(in srgb, var(--warning) 25%, transparent);}
.rb-s7-0893{background:color-mix(in srgb,var(--destructive) 10%,transparent);border:1px solid var(--destructive);border-radius:8px;padding:12px;margin-bottom:12px;}
.rb-s7-0649{background:color-mix(in srgb,var(--primary) 10%,transparent);border:1px solid var(--primary);border-radius:8px;padding:10px 12px;margin-bottom:12px;}
.rb-s7-0746{background:linear-gradient(135deg, #6366f1, #8b5cf6);border:3px solid var(--border);}
.rb-s7-0567{background:linear-gradient(135deg, #dc2626, #991b1b);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:0.75rem;}
.rb-s7-0769{background:linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 30%, #94a3b8 70%, #64748b 100%);}
.rb-s7-0162{background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));border:1px solid var(--border);}
.rb-s7-1238{background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));border:1px solid var(--border);overflow:hidden;}
/* ─── Guest welcome banner (redesigned: badge + intro + latest members + actions) ─── */
.rb-wb{display:flex;align-items:center;gap:24px;flex-wrap:wrap;position:relative;z-index:1;}
.rb-wb-main{flex:1 1 320px;min-width:0;}
.rb-wb-head{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.rb-wb-badge{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--primary) 16%, transparent);color:var(--primary);font-size:20px;flex-shrink:0;}
.rb-wb-title{font-size:1.5rem;font-weight:700;color:var(--foreground);line-height:1.2;margin:0;}
.rb-wb-desc{color:var(--muted-foreground);font-size:.9rem;line-height:1.5;margin:0;max-width:560px;}
.rb-wb-latest{margin-top:16px;}
.rb-wb-latest-label{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:8px;}
/* Single-row face-pile: never wrap (wrapping + negative margins slid rows below
   and overlapped them); avatars are capped in the template with a +N chip. */
.rb-wb-members{display:flex;flex-wrap:nowrap;align-items:center;min-width:0;}
/* Overlapping avatar stack (forum-standard). The 2px ring (border in surface
   colour) separates each circle as they overlap; hover lifts + pulls forward. */
.rb-wb-mem{display:inline-flex;text-decoration:none;transition:transform 120ms ease;margin-left:-10px;position:relative;z-index:1;flex:0 0 auto;}
.rb-wb-mem:first-child{margin-left:0;}
.rb-wb-mem:hover{transform:translateY(-3px);z-index:3;}
.rb-wb-mem-img,.rb-wb-mem-letter{width:38px;height:38px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.2);object-fit:cover;}
.rb-wb-mem-letter{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;}
/* "+N more" chip closing the pile; links to the members list. */
.rb-wb-mem-more{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;margin-left:-10px;border:2px solid var(--surface);background:color-mix(in srgb, var(--primary) 16%, transparent);color:var(--primary);font-weight:700;font-size:.8rem;text-decoration:none;position:relative;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.rb-wb-mem-more:hover{transform:translateY(-3px);z-index:4;}
.rb-wb-actions{display:flex;flex-direction:column;gap:10px;flex-shrink:0;min-width:170px;}
.rb-wb-actions .btn{justify-content:center;width:100%;}
@media (max-width:680px){
    .rb-wb{flex-direction:column;align-items:stretch;gap:18px;}
    .rb-wb-main{flex:0 1 auto;}  /* column flex: 320px basis would become a min-height → empty gap */
    .rb-wb-actions{flex-direction:row;min-width:0;}
    .rb-wb-actions .btn{flex:1;}
    /* Shrink the face-pile so the capped row + chip fit the narrow column. */
    .rb-wb-mem-img,.rb-wb-mem-letter,.rb-wb-mem-more{width:32px;height:32px;}
    .rb-wb-mem,.rb-wb-mem-more{margin-left:-12px;}
    .rb-wb-mem:first-child{margin-left:0;}
}
.rb-s7-0542{background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--primary) 6%, transparent));}
.rb-s7-0558{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;}
.rb-s7-1299{background:linear-gradient(135deg,#ff5722,#e34a1a);color:#fff;}
.rb-s7-0703{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 50%,#1a1a2e));}
.rb-s7-0717{background:none;border:none;}
.rb-s7-0311{background:none;border:none;color:inherit;cursor:pointer;margin-left:auto;font-size:1.1rem;}
.rb-s7-0630{background:none;border:none;color:var(--muted-foreground);cursor:pointer;font-size:1.2rem;}
.rb-s7-0006{background:none;border:none;color:var(--muted-foreground);cursor:pointer;padding:2px 4px;font-size:0.9rem;}
.rb-s7-1128{background:none;border:none;cursor:pointer;padding:0;}
.rb-s7-0825{background:none;border:none;cursor:pointer;padding:2px;}
.rb-s7-1056{background:rgba(0,0,0,0.2);border:1px solid var(--color-border);border-radius:7px;padding:1rem;display:flex;flex-direction:column;gap:0.5rem;min-height:220px;}
.rb-s7-0881{background:rgba(0,0,0,0.2);border:1px solid var(--color-border);border-radius:7px;padding:1rem;font-size:0.75rem;color:var(--color-text-dim);line-height:1.55;}
.rb-s7-1010{background:rgba(0,0,0,0.5);}
.rb-s7-0883{background:rgba(0,0,0,0.5);border-radius:var(--rb-avatar-border-radius, 9999px);}
.rb-s7-0082{background:rgba(148,163,184,0.10);color:#94a3b8;}
.rb-s7-1063{background:rgba(148,163,184,0.15);color:#94a3b8;border-color:#475569;}
.rb-s7-0666{background:rgba(168,85,247,0.12);color:#a855f7;}
.rb-s7-0285{background:rgba(168,85,247,0.15);color:#a855f7;}
.rb-s7-0173{background:rgba(239, 68, 68, 0.1);}
.rb-s7-1101{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);border-radius:8px;padding:12px 14px;margin-bottom:16px;}
.rb-s7-0911{background:rgba(239,68,68,0.12);color:#ef4444;}
.rb-s7-0579{background:rgba(239,68,68,0.15);color:#ef4444;}
.rb-s7-0474{background:rgba(245,158,11,0.12);color:#fcd34d;}
.rb-s7-1113{background:rgba(248,113,113,0.15);color:#f87171;}
.rb-s7-0537{background:rgba(249,115,22,0.12);color:#f97316;}
.rb-s7-0656{background:rgba(251,146,60,0.15);color:#fb923c;}
.rb-s7-0033{background:rgba(251,191,36,0.12);color:#fbbf24;}
.rb-s7-0513{background:rgba(251,191,36,0.15);color:#fbbf24;}
.rb-s7-1371{background:rgba(255,255,255,0.04);padding:8px;border-radius:4px;}
.rb-s7-0409{background:rgba(255,255,255,0.06);padding:1px 4px;border-radius:3px;}
.rb-s7-0745{background:rgba(255,87,34,.06);}
.rb-s7-0125{background:rgba(255,87,34,0.08);padding:2px 6px;border-radius:4px;font-size:11px;}
.rb-s7-0682{background:rgba(255,87,34,0.08);padding:2px 8px;border-radius:4px;font-size:0.9em;}
.rb-s7-1108{background:rgba(255,87,34,0.08);padding:2px 8px;border-radius:4px;font-size:11px;}
.rb-s7-0969{background:rgba(255,87,34,0.1);color:var(--color-primary-300);}
.rb-s7-1293{background:rgba(255,87,34,0.1);color:var(--color-primary-300);border-color:rgba(255,87,34,0.2);}
.rb-s7-1008{background:rgba(255,87,34,0.10);color:var(--color-primary-400);}
.rb-s7-0858{background:rgba(255,87,34,0.12);}
.rb-s7-1276{background:rgba(255,87,34,0.12);color:var(--color-primary-300);}
.rb-s7-0662{background:rgba(255,87,34,0.12);color:var(--color-primary-400);}
.rb-s7-1076{background:rgba(255,87,34,0.18);color:var(--color-primary-300);}
.rb-s7-1184{background:rgba(255,87,34,0.2);color:var(--color-primary-300);}
.rb-s7-0953{background:rgba(34,197,94,0.12);color:#22c55e;}
.rb-s7-0011{background:rgba(34,197,94,0.2);color:#22c55e;border:none;cursor:pointer;}
.rb-s7-1118{background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.2);border-radius:10px;padding:14px 16px;margin-bottom:16px;}
.rb-s7-0128{background:rgba(59,130,246,0.03);}
.rb-s7-0735{background:rgba(59,130,246,0.12);}
.rb-s7-0665{background:rgba(59,130,246,0.12);color:#3b82f6;}
.rb-s7-0171{background:rgba(74,222,128,0.15);color:#4ade80;}
.rb-s7-0906{background:rgba(99,102,241,0.1);color:#6366f1;}
.rb-s7-0816{background:rgba(99,102,241,0.12);color:#6366f1;}
.rb-s7-0435{background:rgba(99,102,241,0.12);color:#6366f1;margin-right:2px;}
.rb-s7-1309{background:rgba(99,102,241,0.15);color:#6366f1;}
.rb-s7-0102{background:rgba(99,102,241,0.15);color:#a5b4fc;border:1px solid #6366f1;}
.rb-s7-0809{background:transparent;border:1px solid var(--border);color:var(--foreground);}
.rb-s7-0571{background:transparent;border:1px solid var(--border);color:var(--muted-foreground);cursor:pointer;}
.rb-s7-0539{background:transparent;color:var(--muted-foreground);}
.rb-s7-0031{background:var(--background);}
.rb-s7-0848{background:var(--background);border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);color:var(--foreground);}
.rb-s7-1087{background:var(--background);border:1px solid var(--border);color:var(--foreground);}
.rb-s7-1341{background:var(--background);border:1px solid var(--border);color:var(--foreground);letter-spacing:0.5em;}
.rb-s7-0296{background:var(--background);border:1px solid var(--border);color:var(--foreground);line-height:1.6;}
.rb-s7-0298{background:var(--background);border:1px solid var(--border);color:var(--foreground);min-height:100px;}
.rb-s7-1031{background:var(--background);border:1px solid var(--border);color:var(--foreground);min-width:140px;}
.rb-s7-1263{background:var(--background);border:1px solid var(--border);color:var(--foreground);padding-right:36px;}
.rb-s7-0107{background:var(--background);border:1px solid var(--border);color:var(--foreground);resize:vertical;min-height:72px;}
.rb-s7-0659{background:var(--bg-header, rgba(30,41,59,.6));}
.rb-s7-0744{background:var(--border);}
.rb-s7-0484{background:var(--card);border:1px solid var(--border);}
.rb-s7-1221{background:var(--color-card-bg, #1e2030);border:1px solid var(--color-border, rgba(255,255,255,0.08));border-radius:12px;padding:1.5rem;min-width:320px;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.rb-s7-1200{background:var(--color-danger);color:#fff;}
.rb-s7-1145{background:var(--color-danger-500);}
.rb-s7-1326{background:var(--color-dark-bg, #0d0d0d);}
.rb-s7-0641{background:var(--color-dark-bg,#121212);color:var(--color-text-dark-primary,#f0f2f5);max-height:200px;}
.rb-s7-0144{background:var(--color-dark-elevated, #1e1f2e);}
.rb-s7-0236{background:var(--color-dark-input, transparent);border-color:var(--color-border-dark, rgba(0,0,0,.1));}
.rb-s7-0589{background:var(--color-dark-surface);border:1px solid var(--color-border-dark);border-radius:10px;width:100%;max-width:1100px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}
.rb-s7-0495{background:var(--color-dark-surface);border:1px solid var(--color-border-dark);border-radius:10px;width:100%;max-width:1200px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}
.rb-s7-0710{background:var(--color-dark-surface);border:1px solid var(--color-border-dark);border-radius:10px;width:100%;max-width:1600px;height:92vh;display:flex;flex-direction:column;overflow:hidden;}
.rb-s7-0702{background:var(--color-dark-surface);border:1px solid var(--color-border-dark);border-radius:10px;width:100%;max-width:520px;}
.rb-s7-0248{background:var(--color-dark-surface);border:1px solid var(--color-border-dark);border-radius:10px;width:100%;max-width:720px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
.rb-s7-1149{background:var(--color-dark-surface);border:1px solid var(--color-border-dark);border-radius:10px;width:100%;max-width:760px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
.rb-s7-0688{background:var(--color-dark-surface);border:1px solid var(--color-border-dark);border-radius:10px;width:100%;max-width:880px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
.rb-s7-0463{background:var(--color-dark-surface);border:1px solid var(--color-border-dark);border-radius:6px;padding:8px 10px;}
.rb-s7-0184{background:var(--color-primary-500);color:#fff;}
.rb-s7-0209{background:var(--color-primary-500);color:#fff;font-weight:600;}
.rb-s7-0613{background:var(--color-surface);border:1px solid var(--color-border);}
.rb-s7-0610{background:var(--color-surface-raised);}
.rb-s7-0771{background:var(--danger);}
.rb-s7-1127{background:var(--danger);border-color:var(--danger);}
.rb-s7-1314{background:var(--danger);color:#fff;}
.rb-s7-0252{background:var(--danger);font-size:0.6rem;}
.rb-s7-0369{background:var(--danger, #ef4444);color:#fff;font-weight:600;}
.rb-s7-0443{background:var(--input-background);border:1px solid var(--input);color:var(--foreground);}
.rb-s7-0359{background:var(--muted);}
.rb-s7-0612{background:var(--muted);border-bottom:1px solid var(--border);}
.rb-s7-0728{background:var(--muted);border:1px solid var(--border);}
.rb-s7-0658{background:var(--muted);border:1px solid var(--border);color:var(--foreground);}
.rb-s7-0354{background:var(--muted);border:1px solid var(--border);color:var(--foreground);min-height:60px;max-height:120px;}
.rb-s7-1164{background:var(--muted);border:1px solid var(--border);color:var(--muted-foreground);opacity:0.7;}
.rb-s7-0393{background:var(--muted);color:var(--foreground);}
.rb-s7-0421{background:var(--muted);color:var(--foreground);border:1px solid var(--border);}
.rb-s7-1009{background:var(--muted);color:var(--foreground);font-size:0.8rem;}
.rb-s7-0652{background:var(--muted);color:var(--muted-foreground);}
.rb-s7-0902{background:var(--muted);display:inline-flex;}
.rb-s7-0140{background:var(--popover);border:1px solid var(--border);}
.rb-s7-1054{background:var(--popover, #fff);border:1px solid var(--border, #e2e8f0);}
.rb-s7-0465{background:var(--popover, #fff);border:1px solid var(--border, #e2e8f0);overflow:hidden;}
.rb-s7-0908{background:var(--primary);}
.rb-s7-1237{background:var(--primary);border:2px solid var(--surface);}
.rb-s7-1189{background:var(--primary);color:#fff;}
.rb-s7-0820{background:var(--primary);color:#fff;border-radius:0.5rem;padding:0.5rem 1rem;}
.rb-s7-1071{background:var(--primary);color:#fff;border-radius:6px;}
.rb-s7-0760{background:var(--primary);color:white;min-width:2rem;pointer-events:none;}
.rb-s7-1132{background:var(--danger);color:#fff!important;font-weight:800!important;font-size:0.6rem;animation:rb-badge-pulse 1.25s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){.rb-s7-1132{animation:none;}}
.rb-s7-0303{background:var(--rb-auth-form-bg, var(--surface));border:1px solid var(--rb-auth-form-border, var(--border));box-shadow:0 1px 3px rgba(0,0,0,.06);}
.rb-s7-0412{background:var(--rb-footer-bg, var(--surface));border-top:1px solid var(--border);margin-top:3rem;}
.rb-s7-0224{background:var(--rb-forum-node-bg, var(--surface));border:1px solid var(--rb-forum-node-border, var(--border));}
.rb-s7-0675{background:var(--rb-header-bg, var(--surface));border-bottom:1px solid var(--rb-header-border-color, var(--border));}
.rb-s7-1220{background:var(--secondary);color:var(--secondary-foreground);}
.rb-s7-0147{background:var(--success);}
.rb-s7-1116{background:var(--success);color:#fff;}
.rb-s7-0869{background:var(--surface);}
.rb-s7-0655{background:var(--surface);border:1px dashed var(--border);box-shadow:0 1px 2px rgba(0,0,0,0.05);}
.rb-s7-0990{background:var(--surface);border:1px solid var(--border);}
.rb-s7-0458{background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(16px);}
.rb-s7-1376{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:420px;overflow:hidden;}
.rb-s7-1093{background:var(--surface);border:1px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,0.05);}
.rb-s7-0287{background:var(--surface);border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.06);}
.rb-s7-0015{background:var(--surface);border:1px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,.06);}
.rb-s7-1278{background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,0.2);width:280px;}
.rb-s7-0076{background:var(--surface);border:1px solid var(--border);max-width:640px;}
.rb-s7-0428{background:var(--surface);border:1px solid var(--border);min-height:calc(100vh - 200px);}
.rb-s7-1291{background:var(--surface);border:2px solid var(--surface);}
.rb-s7-0640{background:var(--surface);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.05);}
.rb-s7-0842{background:var(--surface);color:var(--muted-foreground);}
.rb-s7-1214{background:var(--surface-2,#18181b);padding:1rem;border-radius:8px;font-family:ui-monospace,monospace;font-size:.9rem;user-select:all;}
.rb-s7-0973{background:var(--surface-raised);border:1px solid var(--border);}
.rb-s7-1297{background:var(--surface-raised);border:1px solid var(--border);border-radius:10px;padding:1.5rem;}
.rb-s7-0075{background:var(--surface-raised);font-size:0.75rem;text-transform:uppercase;color:var(--text-secondary);}
.rb-s7-0272{background:var(--warning);color:#000;font-weight:600;}
.rb-s7-0432{background:var(--warning);color:white;font-size:0.8rem;}
.rb-s7-0355{background:white;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.rb-s7-1378{border-bottom:1px solid var(--border);}
.rb-s7-0794{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--muted) 20%, transparent);}
.rb-s7-0503{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--muted) 30%, transparent);}
.rb-s7-0338{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--primary) 4%, transparent);}
.rb-s7-0651{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--primary) 5%, transparent);}
.rb-s7-0588{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--warning) 5%, transparent);}
.rb-s7-1143{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--warning) 6%, transparent);}
.rb-s7-0127{border-bottom:1px solid var(--border);background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent);}
.rb-s7-0441{border-bottom:1px solid var(--border);background:var(--secondary);}
.rb-s7-1281{border-bottom:1px solid var(--border);color:var(--foreground);}
.rb-s7-0229{border-bottom:1px solid var(--border);color:var(--muted-foreground);background:color-mix(in srgb, var(--muted) 30%, transparent);}
.rb-s7-0949{border-bottom:1px solid var(--border);transition:background .15s;}
.rb-s7-0316{border-bottom:1px solid var(--border, #e2e8f0);}
.rb-s7-0292{border-bottom:1px solid var(--rb-forum-node-border, var(--border));background:var(--rb-category-header-bg, color-mix(in srgb, var(--muted) 30%, transparent));border-radius:var(--rb-category-header-radius, 0);}
.rb-s7-0600{border-bottom:2px solid var(--border);}
.rb-s7-1033{border-collapse:collapse;}
.rb-s7-0253{border-color:inherit;}
.rb-s7-0133{border-color:var(--border);}
.rb-s7-0013{border-color:var(--border);background:var(--muted);}
.rb-s7-0356{border-color:var(--border);background:var(--surface-raised);}
.rb-s7-0929{border-color:var(--border, #e2e8f0);}
.rb-s7-1216{border-color:var(--danger, #ef4444);margin-bottom:16px;}
.rb-s7-0423{border-left:1px solid var(--border);background:var(--surface);}
.rb-s7-0611{border-radius:0 0 var(--radius-lg) var(--radius-lg);}
.rb-s7-0865{border-radius:12px;}
.rb-s7-0622{border-radius:var(--rb-avatar-border-radius,9999px);}
.rb-s7-0609{border-radius:var(--rb-border-radius-large, 6px);background:var(--muted);color:var(--foreground);font-weight:600;border:1px solid var(--border);cursor:pointer;}
.rb-s7-0343{border-radius:var(--rb-border-radius-large, 6px);cursor:pointer;}
.rb-s7-0983{border-right:1px solid var(--border);background:color-mix(in srgb, var(--muted) 15%, transparent);min-width:56px;}
.rb-s7-0554{border-top:1px dashed var(--border);color:var(--muted-foreground);padding-top:8px;}
.rb-s7-0562{border-top:1px solid color-mix(in srgb, var(--border) 50%, transparent);}
.rb-s7-1048{border-top:1px solid rgba(255,255,255,0.1);padding-top:1rem;}
.rb-s7-0957{border-top:1px solid var(--border);}
.rb-s7-0406{border-top:1px solid var(--border);background:color-mix(in srgb, var(--muted) 30%, transparent);}
.rb-s7-0067{border-top:1px solid var(--border);background:var(--rb-mobile-nav-bg, var(--surface));color:var(--rb-mobile-nav-text-color, var(--foreground));}
.rb-s7-0982{border-top:1px solid var(--border);background:var(--surface);}
.rb-s7-0008{border-top:1px solid var(--border);font-size:0.875rem;}
.rb-s7-0645{border-top:1px solid var(--border);margin:4px 0;}
.rb-s7-0740{border-top:1px solid var(--border);padding-top:1rem;}
.rb-s7-0309{border-top:1px solid var(--color-border, rgba(255,255,255,0.06));}
.rb-s7-1050{border:0;cursor:pointer;}
.rb-s7-0576{border:1px solid color-mix(in srgb, var(--danger) 20%, transparent);}
.rb-s7-1004{border:1px solid var(--border);}
.rb-s7-0701{border:1px solid var(--color-border);}
.rb-s7-0839{border:1px solid var(--color-border);border-radius:8px;overflow:hidden;background:var(--color-card-bg);}
.rb-s7-0446{border:1px solid var(--color-border);border-radius:8px;overflow:hidden;margin-bottom:1.5rem;background:var(--color-card-bg);}
.rb-s7-0653{border:2px solid var(--color-border-dark);padding:2px;}
.rb-s7-0234{border:3px solid var(--border);}
.rb-s7-0556{border:none;background:transparent;color:rgba(255,255,255,0.5);padding:5px 8px;cursor:pointer;font-size:0.7rem;line-height:1;transition:all .12s;}
.rb-s7-0077{border:none;background:transparent;color:var(--muted-foreground);padding:5px 8px;cursor:pointer;font-size:0.7rem;line-height:1;transition:all .12s;}
.rb-s7-0351{border:none;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(255,255,255,0.1);background:transparent;color:rgba(255,255,255,0.5);padding:5px 8px;cursor:pointer;font-size:0.7rem;line-height:1;transition:all .12s;}
.rb-s7-1367{border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);background:transparent;color:var(--muted-foreground);padding:5px 8px;cursor:pointer;font-size:0.7rem;line-height:1;transition:all .12s;}
.rb-s7-0238{color:#10b981;}
.rb-s7-1190{color:#10b981;font-size:14px;}
.rb-s7-1285{color:#22c55e;}
.rb-s7-1142{color:#22c55e;background:transparent;border:none;cursor:pointer;}
.rb-s7-0783{color:#22c55e;font-weight:500;}
.rb-s7-1328{color:#3b82f6;font-size:14px;}
.rb-s7-0654{color:#4ade80;}
.rb-s7-1026{color:#6366f1;}
.rb-s7-0910{color:#6366f1;font-weight:600;}
.rb-s7-1133{color:#64748b;}
.rb-s7-0789{color:#94a3b8;}
.rb-s7-1092{color:#ef4444;}
.rb-s7-1192{color:#ef4444;background:transparent;border:none;cursor:pointer;}
.rb-s7-0876{color:#ef4444;font-size:11px;}
.rb-s7-0242{color:#f59e0b;}
.rb-s7-0377{color:#f59e0b;font-size:11px;}
.rb-s7-0532{color:#f59e0b;margin-right:2px;}
.rb-s7-0112{color:#f87171;}
.rb-s7-0322{color:#fbbf24;}
.rb-s7-0305{color:#fbbf24;font-weight:600;}
.rb-s7-0490{color:#fca5a5;}
.rb-s7-0425{color:#fcd34d;}
.rb-s7-0550{color:#fff;font-size:1rem;font-weight:600;margin:0;}
.rb-s7-1002{color:inherit;}
.rb-s7-0391{color:rgba(255,255,255,0.45);text-decoration:none;}
.rb-s7-0934{color:rgba(255,255,255,0.5);}
.rb-s7-0153{color:rgba(255,255,255,0.9);font-size:1.25rem;}
.rb-s7-1018{color:var(--accent);}
.rb-s7-0522{color:var(--accent-primary, #6366f1);}
.rb-s7-0342{color:var(--border);}
.rb-s7-1243{color:var(--color-border-dark);font-size:14px;}
.rb-s7-0624{color:var(--color-danger);}
.rb-s7-0201{color:var(--color-info);}
.rb-s7-1066{color:var(--color-primary-300);}
.rb-s7-1160{color:var(--color-primary-300);background:rgba(255,87,34,0.1);}
.rb-s7-0638{color:var(--color-primary-400);}
.rb-s7-0237{color:var(--color-primary-400);font-size:0.8rem;}
.rb-s7-0345{color:var(--color-primary-400);width:12px;font-size:0.7rem;}
.rb-s7-1112{color:var(--color-primary-500);}
.rb-s7-0667{color:var(--color-primary-500);font-size:0.8rem;}
.rb-s7-0978{color:var(--color-success);}
.rb-s7-0297{color:var(--color-text);}
.rb-s7-1172{color:var(--color-text-dim);}
.rb-s7-0083{color:var(--color-text-dim);font-size:11px;}
.rb-s7-1206{color:var(--color-text-dim);transition:transform 200ms;}
.rb-s7-1274{color:var(--color-text-dim, #5a6178);}
.rb-s7-0284{color:var(--color-text-tertiary);font-size:0.75rem;}
.rb-s7-0866{color:var(--color-text-tertiary);font-size:0.7rem;opacity:0.5;flex-shrink:0;}
.rb-s7-0927{color:var(--danger);}
.rb-s7-0815{color:var(--danger);background:none;border:none;cursor:pointer;}
.rb-s7-0511{color:var(--danger);border-color:var(--danger);}
.rb-s7-1330{color:var(--danger);border:1px solid var(--border);}
.rb-s7-0247{color:var(--danger);font-size:0.85rem;}
.rb-s7-0115{color:var(--danger);font-size:0.8rem;}
.rb-s7-0874{color:var(--danger);font-size:0.8rem;margin:0;}
.rb-s7-0167{color:var(--danger);font-size:1.1rem;}
.rb-s7-1122{color:var(--danger);font-size:13px;margin-bottom:8px;}
.rb-s7-0773{color:var(--danger);font-weight:600;margin-bottom:8px;}
.rb-s7-1166{color:var(--danger);margin-bottom:4px;}
.rb-s7-0323{color:var(--danger);opacity:0.7;}
.rb-s7-0483{color:var(--danger, #ef4444);}
.rb-s7-1141{color:var(--destructive);}
.rb-s7-0695{color:var(--foreground);}
.rb-s7-1234{color:var(--foreground);border-bottom:1px solid var(--border);}
.rb-s7-0885{color:var(--foreground);flex:1;}
.rb-s7-0448{color:var(--foreground);font-size:0.95rem;line-height:1.8;}
.rb-s7-0348{color:var(--foreground);line-height:1.7;max-width:none;}
.rb-s7-0657{color:var(--foreground);opacity:0.2;}
.rb-s7-0500{color:var(--foreground, #0f172a);}
.rb-s7-0142{color:var(--foreground, #e0e0e0);}
.rb-s7-0782{color:var(--muted-foreground);}
.rb-s7-0935{color:var(--muted-foreground);background:none;border:none;cursor:pointer;}
.rb-s7-1284{color:var(--muted-foreground);background:none;border:none;cursor:pointer;text-decoration:underline;}
.rb-s7-0104{color:var(--muted-foreground);background:transparent;border:none;cursor:pointer;}
.rb-s7-0812{color:var(--muted-foreground);background:var(--muted);}
.rb-s7-1167{color:var(--muted-foreground);font-size:0.75rem;}
.rb-s7-0826{color:var(--muted-foreground);font-size:0.8rem;text-align:center;padding:12px 0;}
.rb-s7-0743{color:var(--muted-foreground);font-weight:400;}
.rb-s7-0955{color:var(--muted-foreground);font-weight:500;}
.rb-s7-0089{color:var(--muted-foreground);line-height:1.5;}
.rb-s7-0912{color:var(--muted-foreground);max-width:500px;margin:0 auto;}
.rb-s7-1286{color:var(--muted-foreground);min-width:100px;}
.rb-s7-0711{color:var(--muted-foreground);opacity:0.3;}
.rb-s7-0752{color:var(--muted-foreground);opacity:0.7;}
.rb-s7-0080{color:var(--muted-foreground);padding:2rem;}
.rb-s7-0108{color:var(--muted-foreground);text-decoration:none;}
.rb-s7-0385{color:var(--muted-foreground);text-decoration:none;cursor:pointer;}
.rb-s7-1109{color:var(--muted-foreground);text-decoration:none;cursor:pointer;position:relative;}
.rb-s7-1023{color:var(--muted-foreground);text-transform:uppercase;}
.rb-s7-0149{color:var(--muted-foreground);text-transform:uppercase;letter-spacing:0.05em;}
.rb-s7-0003{color:var(--muted-foreground, #64748b);}
.rb-s7-0202{color:var(--muted-foreground, #94a3b8);}
.rb-s7-0019{color:var(--primary);}
.rb-s7-1199{color:var(--primary);background:color-mix(in srgb, var(--primary) 10%, transparent);}
.rb-s7-1265{color:var(--primary);background:none;border:none;cursor:pointer;text-decoration:underline;}
.rb-s7-0838{color:var(--primary);font-size:0.75rem;}
.rb-s7-0233{color:var(--primary);font-size:0.7rem;}
.rb-s7-0243{color:var(--primary);font-size:0.875rem;}
.rb-s7-0231{color:var(--primary);font-size:0.8rem;}
.rb-s7-1294{color:var(--primary);font-size:0.9rem;}
.rb-s7-0919{color:var(--primary);font-size:1.1rem;}
.rb-s7-0989{color:var(--primary);font-size:1.1rem;width:24px;text-align:center;}
.rb-s7-1334{color:var(--primary);font-weight:500;}
.rb-s7-0032{color:var(--primary);max-width:60%;}
.rb-s7-1097{color:var(--primary);opacity:0.5;}
.rb-s7-0109{color:var(--primary);opacity:0.7;}
.rb-s7-0535{color:var(--primary);text-decoration:none;}
.rb-s7-1079{color:var(--primary);text-decoration:none;font-weight:600;}
.rb-s7-0721{color:var(--rb-category-header-color, var(--foreground));}
.rb-s7-1155{color:var(--rb-category-header-desc-color, var(--muted-foreground));}
.rb-s7-0755{color:var(--rb-footer-text-color, var(--muted-foreground));text-decoration:none;}
.rb-s7-0972{color:var(--rb-forum-node-icon-color, var(--primary));font-size:0.875rem;}
.rb-s7-0950{color:var(--rb-header-text-color, var(--foreground));}
.rb-s7-0623{color:var(--success);}
.rb-s7-0762{color:var(--success);font-size:0.85rem;}
.rb-s7-0319{color:var(--success);font-size:0.8rem;}
.rb-s7-0724{color:var(--success);font-size:0.8rem;margin:0;}
.rb-s7-0772{color:var(--success);font-size:1.1rem;}
.rb-s7-0669{color:var(--success);opacity:0.4;}
.rb-s7-0387{color:var(--success, #22c55e);}
.rb-s7-0663{color:var(--success, #22c55e);opacity:0.4;}
.rb-s7-0966{color:var(--text);}
.rb-s7-0875{color:var(--text);text-decoration:none;}
.rb-s7-0508{color:var(--text-muted);}
.rb-s7-0964{color:var(--text-secondary);}
.rb-s7-0437{color:var(--text-secondary);font-size:0.8em;font-weight:normal;}
.rb-s7-1350{color:var(--warn);}
.rb-s7-0572{color:var(--warning);}
.rb-s7-0868{color:var(--warning);background:transparent;border:none;cursor:pointer;}
.rb-s7-0748{color:var(--warning);font-size:0.75rem;}
.rb-s7-0778{color:var(--warning);font-size:1.1rem;}
.rb-s7-0373{color:var(--warning);opacity:0.7;}
.rb-s7-0030{color:white;font-size:1.1rem;}
.rb-s7-1212{cursor:help;opacity:0.6;}
.rb-s7-0986{cursor:pointer;}
.rb-s7-0274{display:block;font-family:'JetBrains Mono',monospace;font-size:0.65rem;padding:0.5rem 0.6rem;background:rgba(0,0,0,0.3);border-radius:5px;color:var(--color-primary-400);line-height:1.7;}
.rb-s7-1230{display:block;font-size:0.75rem;font-weight:600;color:var(--muted-foreground);margin-bottom:4px;}
.rb-s7-0375{display:block;font-size:0.8rem;font-weight:500;margin-bottom:4px;color:var(--muted-foreground);}
.rb-s7-1037{display:block;font-size:0.8rem;font-weight:600;color:var(--foreground);margin-bottom:0.35rem;}
.rb-s7-1305{display:block;font-size:0.8rem;font-weight:600;color:var(--muted-foreground);margin-bottom:0.35rem;}
.rb-s7-1259{display:block;font-size:11px;margin-bottom:4px;}
.rb-s7-0276{display:block;padding:8px 12px;}
.rb-s7-1322{display:block;padding:14px 16px;text-decoration:none;}
.rb-s7-0314{display:block;width:100%;text-align:left;padding:8px 12px;border:none;background:none;cursor:pointer;font-size:0.85rem;color:var(--foreground);border-bottom:1px solid var(--border);}
.rb-s7-1036{display:contents;}
.rb-s7-0519{display:flex;align-items:center;gap:0.4rem;}
.rb-s7-1165{display:flex;align-items:center;gap:0.55rem;cursor:pointer;user-select:none;}
.rb-s7-0122{display:flex;align-items:center;gap:0.5rem;}
.rb-s7-0947{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.rb-s7-0943{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;font-size:0.75rem;text-decoration:none;color:inherit;transition:all 0.15s;border-left:3px solid transparent;}
.rb-s7-0845{display:flex;align-items:center;gap:0.6rem;}
.rb-s7-0256{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;}
.rb-s7-0548{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;}
.rb-s7-0410{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;}
.rb-s7-0047{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;background:rgba(255,87,34,0.06);border-bottom:1px solid rgba(255,87,34,0.15);font-size:0.8125rem;}
.rb-s7-0254{display:flex;align-items:center;gap:0.75rem;padding:0.75rem;border-radius:8px;border:1px solid var(--border);text-decoration:none;transition:all .15s;}
.rb-s7-0471{display:flex;align-items:center;gap:0.7rem;padding:0.7rem 0.85rem;border-radius:10px;text-decoration:none;background:rgba(99,102,241,0.07);color:#4338ca;font-weight:500;}
.rb-s7-0271{display:flex;align-items:center;gap:0.7rem;text-decoration:none;width:100%;}
.rb-s7-1057{display:flex;align-items:center;gap:10px;}
.rb-s7-0863{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.rb-s7-1296{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:8px 10px;background:var(--muted);border-radius:8px;}
.rb-s7-0890{display:flex;align-items:center;gap:10px;margin-top:5px;}
.rb-s7-0012{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:0;border:0;border-bottom:1px solid color-mix(in srgb, var(--primary) 25%, var(--border));border-radius:var(--radius, 10px) var(--radius, 10px) 0 0;font-size:0.82rem;background:color-mix(in srgb, var(--primary) 10%, transparent);position:relative;z-index:1;flex-wrap:wrap;}
.rb-s7-0012 .btn{touch-action:manipulation;}
@media (max-width:760px){.rb-s7-0012 .btn{min-height:34px;}}
.rb-thread-viewers{margin:14px 0 4px;border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:.82rem;}
.rb-thread-viewers__head{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:9px 14px;background:color-mix(in srgb, var(--primary) 8%, var(--surface));border-bottom:1px solid var(--border);color:var(--foreground);}
.rb-thread-viewers__eye{color:var(--primary);}
.rb-thread-viewers__title{font-weight:600;color:var(--foreground);}
.rb-thread-viewers__counts{color:var(--muted-foreground);font-weight:500;}
.rb-thread-viewers__body{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:10px 14px;background:var(--surface);}
.rb-thread-viewers__user{color:var(--primary);text-decoration:none;font-weight:500;}
.rb-thread-viewers__user:hover{text-decoration:underline;}
.rb-thread-viewers__foot{padding:7px 14px;background:var(--surface-2, var(--muted));border-top:1px solid var(--border);color:var(--muted-foreground);font-size:.76rem;}
.rb-edit-attachments{margin-top:12px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface-2, var(--surface));}
.rb-edit-attachments__head{font-size:.78rem;font-weight:600;color:var(--muted-foreground);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.rb-edit-attachments__list{display:flex;flex-direction:column;gap:6px;}
.rb-edit-attachments__item{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
.rb-edit-attachments__thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0;}
.rb-edit-attachments__icon{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--muted);color:var(--muted-foreground);flex-shrink:0;}
.rb-edit-attachments__name{flex:1;min-width:0;font-size:.82rem;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rb-edit-attachments__size{font-size:.72rem;color:var(--muted-foreground);flex-shrink:0;}
.rb-edit-attachments__rm{flex-shrink:0;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--muted-foreground);cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation;transition:background .12s,color .12s;}
.rb-edit-attachments__rm:hover{background:color-mix(in srgb, var(--danger, #ef4444) 14%, transparent);color:var(--danger, #ef4444);}
.rb-s7-1170{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;}
.rb-s7-0878{display:flex;align-items:center;gap:12px;}
.rb-s7-1272{display:flex;align-items:center;gap:12px;padding:10px 16px;margin-bottom:4px;border-radius:8px;cursor:grab;background:var(--color-dark-surface);border:1px solid var(--color-border-dark);transition:border-color 0.2s;}
.rb-s7-0310{display:flex;align-items:center;gap:12px;padding:12px 16px;}
.rb-s7-0331{display:flex;align-items:center;gap:14px;margin-top:14px;}
.rb-s7-0764{display:flex;align-items:center;gap:1rem;padding:.85rem 0;border-top:1px solid var(--border);}
.rb-s7-1119{display:flex;align-items:center;gap:1rem;padding:1rem;}
.rb-s7-0126{display:flex;align-items:center;gap:4px;}
.rb-s7-0960{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.rb-s7-0574{display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;border:1px solid var(--border);text-decoration:none;font-size:0.72rem;color:var(--foreground);transition:all .12s;}
.rb-s7-1074{display:flex;align-items:center;gap:6px;}
.rb-s7-0005{display:flex;align-items:center;gap:6px;cursor:pointer;}
.rb-s7-1120{display:flex;align-items:center;gap:6px;font-size:11px;margin-bottom:6px;cursor:pointer;}
.rb-s7-1088{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#ef4444;}
.rb-s7-0534{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#3b82f6;}
.rb-s7-0770{display:flex;align-items:center;gap:6px;margin-top:1px;}
.rb-s7-1335{display:flex;align-items:center;gap:6px;margin-top:4px;}
.rb-s7-0524{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;margin-bottom:4px;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.18);color:var(--color-text);text-decoration:none;font-size:11px;}
.rb-s7-0246{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;margin-bottom:4px;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.18);font-size:11px;}
.rb-s7-0244{display:flex;align-items:center;gap:8px;}
.rb-s7-0660{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.rb-s7-0686{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:10px;}
.rb-s7-0302{display:flex;align-items:center;gap:8px;margin-bottom:14px;cursor:pointer;}
.rb-s7-1250{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;transition:background .15s;}
.rb-s7-1310{display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid rgba(255,87,34,0.05);cursor:pointer;}
.rb-s7-0644{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;transition:background .15s;}
.rb-s7-0430{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;text-decoration:none;color:inherit;}
.rb-s7-0313{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;color:var(--foreground);font-size:0.82rem;text-align:left;}
.rb-s7-1187{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;color:var(--foreground);font-size:0.82rem;text-align:left;border-top:1px solid var(--border);}
.rb-s7-0255{display:flex;align-items:center;justify-content:center;}
.rb-s7-0046{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;}
.rb-s7-1359{display:flex;align-items:center;justify-content:space-between;}
.rb-s7-1242{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px;}
.rb-s7-0497{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;}
.rb-s7-0123{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;}
.rb-s7-1246{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.rb-s7-0416{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.rb-s7-0050{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.rb-s7-0684{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border-radius:6px;text-decoration:none;font-size:0.75rem;color:var(--foreground);transition:all .12s;}
.rb-s7-0268{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:8px;transition:background .15s;}
.rb-s7-0975{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:0.72rem;color:var(--muted-foreground);border:1px solid var(--border);border-top:none;border-radius:0 0 4px 4px;background:color-mix(in srgb, var(--surface) 80%, transparent);}
.rb-s7-0945{display:flex;align-items:flex-end;gap:12px;}
.rb-s7-0335{display:flex;align-items:flex-end;gap:20px;margin-bottom:20px;}
.rb-s7-0025{display:flex;align-items:flex-start;gap:0.5rem;}
.rb-s7-0064{display:flex;align-items:flex-start;gap:12px;}
.rb-s7-1043{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;}
.rb-s7-0930{display:flex;align-items:flex-start;gap:6px;cursor:pointer;line-height:1.5;}
.rb-s7-0320{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.rb-s7-0753{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;}
.rb-s7-0573{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted-foreground);font-size:0.6rem;padding:4px 12px;}
.rb-s7-1168{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted-foreground);font-size:0.6rem;padding:4px 12px;position:relative;}
.rb-s7-0939{display:flex;flex-direction:column;align-items:center;gap:4px;}
.rb-s7-1222{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-faint);gap:0.75rem;}
.rb-s7-1380{display:flex;flex-direction:column;border-right:1px solid var(--color-border-dark);overflow:hidden;}
.rb-s7-0673{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.rb-s7-0150{display:flex;flex-direction:column;gap:0.35rem;}
.rb-s7-1264{display:flex;flex-direction:column;gap:0.4rem;}
.rb-s7-0781{display:flex;flex-direction:column;gap:0.85rem;}
.rb-s7-0798{display:flex;flex-direction:column;gap:0.85rem;position:sticky;top:70px;}
.rb-s7-0299{display:flex;flex-direction:column;gap:6px;}
.rb-s7-0059{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.rb-s7-0585{display:flex;flex-direction:column;gap:8px;}
.rb-s7-0617{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.rb-s7-0118{display:flex;flex-direction:column;overflow:hidden;}
.rb-s7-1090{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:4px 4px 0 0;}
.rb-s7-1012{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;}
.rb-s7-1162{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;}
.rb-s7-0384{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:1rem;}
.rb-s7-0818{display:flex;flex-wrap:wrap;gap:0.25rem 1.25rem;align-items:center;}
.rb-s7-1152{display:flex;flex-wrap:wrap;gap:0.35rem;}
.rb-s7-0476{display:flex;flex-wrap:wrap;gap:0.5rem;}
.rb-s7-0823{display:flex;flex-wrap:wrap;gap:1.5rem;padding:0.85rem;background:rgba(0,0,0,0.12);border-radius:6px;margin-bottom:1.25rem;}
.rb-s7-1070{display:flex;flex-wrap:wrap;gap:2rem 3rem;margin-bottom:1.5rem;justify-content:space-between;align-items:center;}
.rb-s7-0525{display:flex;flex-wrap:wrap;gap:4px;}
.rb-s7-0190{display:flex;flex-wrap:wrap;gap:6px;}
.rb-s7-0729{display:flex;gap:0.5rem;flex-wrap:wrap;}
.rb-s7-0779{display:flex;gap:0.5rem;justify-content:flex-end;}
.rb-s7-1336{display:flex;gap:0.75rem;}
.rb-s7-0023{display:flex;gap:12px;align-items:center;font-size:11px;}
.rb-s7-0531{display:flex;gap:12px;margin-bottom:12px;}
.rb-s7-1077{display:flex;gap:4px;align-items:center;}
.rb-s7-0808{display:flex;gap:6px;}
.rb-s7-0504{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.rb-s7-0400{display:flex;gap:8px;align-items:center;flex:1;flex-wrap:wrap;}
.rb-s7-1052{display:flex;justify-content:flex-end;gap:.5rem;}
.rb-s7-0120{display:flex;justify-content:flex-end;gap:8px;}
.rb-s7-0146{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}
.rb-s7-0007{display:flex;justify-content:flex-end;margin-top:8px;}
.rb-s7-1176{display:flex;justify-content:space-around;align-items:center;max-width:500px;margin:0 auto;}
.rb-s7-0151{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem;}
.rb-s7-0407{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.35rem;}
.rb-s7-1313{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}
.rb-s7-0681{display:flex;justify-content:space-between;font-size:0.75rem;color:var(--muted-foreground);margin-top:4px;}
.rb-s7-1252{display:flex;margin-bottom:0.5rem;}
.rb-s7-0996{display:grid;gap:.75rem;max-width:640px;}
.rb-s7-1139{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem;}
.rb-s7-0546{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;}
.rb-s7-0395{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.rb-s7-0317{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.rb-s7-0189{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem;}
.rb-s7-0085{display:grid;grid-template-columns:1fr 300px;gap:1.25rem;align-items:start;}
.rb-s7-0215{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;}
.rb-s7-0587{display:grid;grid-template-columns:210px 1fr;gap:1rem;align-items:start;}
.rb-s7-1083{display:grid;grid-template-columns:220px 1fr;gap:1rem;align-items:start;}
.rb-s7-1106{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:11px;padding:8px 10px;background:rgba(239,68,68,.04);border-radius:6px;}
.rb-s7-0493{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.5rem;}
.rb-s7-0097{display:grid;grid-template-columns:repeat(5,1fr);}
.rb-s7-0439{display:grid;grid-template-columns:repeat(6, 1fr);gap:4px;margin-bottom:14px;}
.rb-s7-0552{display:grid;grid-template-columns:repeat(7, 1fr);gap:6px;}
.rb-s7-1325{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-height:200px;overflow-y:auto;padding:3px;}
.rb-s7-1287{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:0.75rem;margin-bottom:2rem;}
.rb-s7-0414{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0.5rem;}
.rb-s7-0880{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.75rem;}
.rb-s7-1005{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.rb-s7-0581{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:10px;font-size:11px;}
.rb-s7-0560{display:grid;place-items:center;font-weight:700;color:#fff;font-size:0.75rem;}
.rb-s7-0485{display:inline;}
.rb-s7-1248{display:inline-flex;align-items:center;gap:0.35rem;padding:0.25rem 0.6rem;border-radius:5px;border:1px dashed var(--color-border-dark);font-size:0.6rem;color:var(--color-text-dim);cursor:pointer;transition:all 0.15s;background:var(--color-dark-bg);}
.rb-s7-0214{display:inline-flex;align-items:center;gap:0.4rem;cursor:pointer;}
.rb-s7-1068{display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;}
.rb-s7-1058{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--color-text-dim, #64748b);text-decoration:none;}
.rb-s7-1081{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;background:#ef4444;color:#fff;}
.rb-s7-0264{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;background:color-mix(in srgb, #ef4444 14%, transparent);color:#ef4444;text-decoration:none;letter-spacing:.06em;}
.rb-s7-0564{display:inline-flex;align-items:center;justify-content:center;width:72px;height:40px;background:rgba(255,87,34,0.06);border-radius:4px;}
.rb-s7-0024{display:inline-flex;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,0.15);}
.rb-s7-0698{display:inline-flex;border-radius:6px;overflow:hidden;border:1px solid var(--border);}
.rb-s7-1115{display:inline-flex;gap:.4rem;margin-left:.4rem;}
.rb-s7-0440{display:inline-flex;gap:0.5rem;font-size:0.8125rem;}
.rb-s7-0671{display:inline-grid;grid-template-columns:repeat(10, 1fr);gap:3px;}
.rb-s7-1099{display:none;}
.rb-s7-0326{display:none;background:rgba(239,68,68,0.10);color:#fca5a5;padding:12px;margin:0;font-size:12px;white-space:pre-wrap;font-family:'JetBrains Mono',monospace;}
.rb-s7-0668{display:none;flex-direction:column;gap:0.1rem;}
.rb-s7-0048{display:none;font-size:0.6rem;color:var(--color-warning);font-weight:600;}
.rb-s7-0461{display:none;font-size:10.5px;color:var(--color-text-dim, #64748b);white-space:pre-wrap;margin-top:8px;background:rgba(0,0,0,.35);padding:10px;border-radius:6px;max-height:320px;overflow:auto;}
.rb-s7-0925{display:none;margin-bottom:12px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb, var(--warning) 8%, transparent);border:1px solid color-mix(in srgb, var(--warning) 20%, transparent);}
.rb-s7-1124{display:none;margin-top:0.5rem;}
.rb-s7-1114{display:none;min-height:160px;padding:12px 14px;border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;background:var(--surface);}
.rb-s7-0145{display:none;min-height:160px;padding:12px 14px;border:1px solid var(--border);border-top:none;border-radius:0;background:var(--surface);}
.rb-s7-0541{display:none;padding:6px 16px 0;font-size:.62rem;color:var(--muted-foreground);text-align:center;}
.rb-s7-0141{display:none;position:absolute;top:100%;left:0;z-index:100000;width:360px;max-width:380px;max-height:60vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);margin-top:4px;}
.rb-s7-0141.is-open{display:block !important;}
.rb-s7-0141.smilie-picker-pop{position:fixed !important;top:auto !important;right:auto !important;z-index:2147483000 !important;}
.rb-s7-0095{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:50;background:var(--color-dark-surface);border:1px solid var(--color-border-dark);border-radius:6px;padding:10px;min-width:220px;box-shadow:0 8px 24px rgba(0,0,0,0.35);}
.rb-s7-0801{display:none;position:absolute;top:100%;left:0;z-index:100000;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 28px rgba(0,0,0,.35);min-width:160px;max-height:min(380px,60vh);overflow-y:auto;margin-top:4px;}
.rb-s7-0801.is-open{display:block !important;}
.rb-s7-0680{display:none;position:fixed;bottom:0;left:0;right:0;z-index:8000;background:var(--card);border-top:1px solid var(--border);padding:6px 0;padding-bottom:max(6px, env(safe-area-inset-bottom));}
.rb-s7-0971{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.9);backdrop-filter:blur(8px);cursor:zoom-out;justify-content:center;align-items:center;}
.rb-s7-0467{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);}
.rb-s7-0854{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;}
.rb-s7-0621{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);}
.rb-s7-0544{display:none;width:800px;height:400px;}
.rb-s7-1195{flex-direction:row-reverse;}
.rb-s7-0517{flex-shrink:0;}
.rb-s7-1169{flex-shrink:0;margin-top:0.1rem;}
.rb-s7-1241{flex-shrink:0;min-width:100px;}
.rb-s7-0052{flex-shrink:0;min-width:120px;font-weight:600;font-size:13px;}
.rb-s7-0811{flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.rb-s7-0565{flex:0 0 38px;padding:0;}
.rb-s7-0397{flex:0 0 auto;font-size:0.7rem;font-weight:600;}
.rb-s7-1236{flex:0 0 auto;padding:0 12px;}
.rb-s7-1181{flex:1;}
.rb-s7-1324{flex:1;accent-color:var(--color-primary-500);}
.rb-s7-0676{flex:1;background:#141525;color:#86efac;font-family:'JetBrains Mono',monospace;font-size:11px;padding:10px;border:0;resize:none;}
.rb-s7-1249{flex:1;background:#141525;color:#94a3b8;font-family:'JetBrains Mono',monospace;font-size:11px;padding:10px;border:0;resize:none;}
.rb-s7-1282{flex:1;background:#1a1b2e;color:#d4d4d8;font-family:'JetBrains Mono',monospace;font-size:11px;padding:10px;border:0;resize:none;}
.rb-s7-1344{flex:1;background:#1a1b2e;color:#d4d4d8;font-family:'JetBrains Mono',monospace;font-size:12px;padding:12px;border:0;resize:none;}
.rb-s7-1300{flex:1;background:#fff;border:0;}
.rb-s7-0180{flex:1;color:var(--color-primary-500);font-size:11px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rb-s7-1369{flex:1;color:var(--color-text);text-decoration:none;}
.rb-s7-0339{flex:1;color:var(--color-text-dim, #64748b);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rb-s7-0501{flex:1;color:var(--foreground);}
.rb-s7-0312{flex:1;color:var(--foreground);font-weight:500;}
.rb-s7-0510{flex:1;display:flex;}
.rb-s7-0871{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;opacity:0.35;}
.rb-s7-1319{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;overflow:hidden;}
.rb-s7-0604{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;}
.rb-s7-1280{flex:1;font-size:11px;color:var(--color-text, #1e293b);}
.rb-s7-0422{flex:1;height:1px;background:var(--border);}
.rb-s7-0768{flex:1;min-width:0;}
.rb-s7-1154{flex:1;min-width:0;font-size:13px;color:var(--text-muted);}
.rb-s7-0138{flex:1;min-width:0;padding-right:2rem;}
.rb-s7-0491{flex:1;min-width:260px;}
.rb-s7-0642{flex:1;overflow:auto;padding:6px 0;}
.rb-s7-0278{flex:1;overflow:auto;padding:8px 0;}
.rb-s7-0072{flex:1;overflow:auto;padding:8px 0;font-family:'JetBrains Mono',monospace;font-size:12px;}
.rb-s7-0099{font-family:'Fira Code', Consolas, Monaco, monospace;font-size:0.82rem;line-height:1.5;resize:vertical;}
.rb-s7-0648{font-family:'JetBrains Mono',monospace;font-size:0.65rem;background:rgba(0,0,0,0.3);padding:0.6rem;border-radius:4px;color:var(--color-text-dim);overflow-x:auto;margin:0;}
.rb-s7-1231{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--color-danger);}
.rb-s7-0877{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--color-text-dim);}
.rb-s7-1360{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--color-text-tertiary);}
.rb-s7-0577{font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:600;color:var(--color-text);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:0.75rem;}
.rb-s7-1352{font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:600;color:var(--color-text-dim);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:0.25rem;}
.rb-s7-0913{font-family:'JetBrains Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-dim);display:block;margin-bottom:0.4rem;}
.rb-s7-1117{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--color-text-dim);}
.rb-s7-0329{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--color-text-tertiary);}
.rb-s7-0895{font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--color-primary-500);letter-spacing:0.06em;text-transform:uppercase;}
.rb-s7-0185{font-family:'JetBrains Mono',monospace;font-size:12px;}
.rb-s7-0289{font-family:var(--font-sans);font-size:0.65rem;background:var(--color-dark-bg);color:#e2e8f0;padding:0.4rem 0.6rem;}
.rb-s7-0731{font-family:var(--font-sans);font-size:0.75rem;background:var(--color-dark-bg);color:#e2e8f0;padding:0.75rem;border-radius:8px;resize:vertical;line-height:1.6;tab-size:4;}
.rb-s7-0821{font-family:var(--font-sans);font-size:10px;padding:2px 6px;border:1px solid var(--border-strong);border-radius:4px;color:var(--text-muted);}
.rb-s7-0750{font-family:var(--font-sans);font-size:120px;color:var(--text-faint);font-weight:700;line-height:1;letter-spacing:-0.04em;}
.rb-s7-0977{font-family:var(--font-sans);font-size:18px;height:48px;text-align:center;letter-spacing:0.4em;}
.rb-s7-0976{font-size:.55rem;font-weight:700;padding:1px 5px;border-radius:999px;background:color-mix(in srgb, var(--muted) 80%, transparent);color:var(--muted-foreground);}
.rb-s7-0240{font-size:.55rem;padding:1px 7px;border-radius:4px;color:#fff;font-weight:600;display:inline-block;}
.rb-s7-0788{font-size:.65rem;}
.rb-s7-0475{font-size:.68rem;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rb-s7-0321{font-size:.6rem;color:var(--muted-foreground);}
.rb-s7-0882{font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb, #06b6d4 12%, transparent);color:#06b6d4;}
.rb-s7-0696{font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb, var(--primary) 12%, transparent);color:var(--primary);}
.rb-s7-0566{font-size:.75rem;}
.rb-s7-0741{font-size:.75rem;font-weight:600;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rb-s7-1283{font-size:.78rem;color:var(--muted-foreground);}
.rb-s7-0260{font-size:.78rem;font-weight:500;color:var(--muted-foreground);}
.rb-s7-0603{font-size:.78rem;font-weight:700;color:var(--foreground);display:flex;align-items:center;gap:6px;margin:0;}
.rb-s7-1239{font-size:.78rem;font-weight:700;color:var(--foreground);display:flex;align-items:center;gap:6px;margin:0 0 12px;}
.rb-s7-1204{font-size:.7em;}
.rb-s7-1025{font-size:.7rem;}
.rb-s7-0295{font-size:.7rem;color:#06b6d4;}
.rb-s7-0259{font-size:.7rem;color:#f59e0b;}
.rb-s7-0308{font-size:.7rem;color:var(--muted-foreground);margin-top:4px;}
.rb-s7-0134{font-size:.7rem;color:var(--primary);}
.rb-s7-1348{font-size:.85em;margin-right:4px;}
.rb-s7-0177{font-size:.85rem;}
.rb-s7-0344{font-size:.85rem;font-weight:700;color:var(--foreground);}
.rb-s7-1361{font-size:.8em;}
.rb-s7-0591{font-size:.8rem;color:var(--muted-foreground);}
.rb-s7-0124{font-size:0.45rem;color:var(--color-text-dim);opacity:0.4;font-family:var(--font-sans);}
.rb-s7-0897{font-size:0.4rem;}
.rb-s7-0776{font-size:0.4rem;opacity:0.4;}
.rb-s7-0549{font-size:0.55em;opacity:0.7;}
.rb-s7-0904{font-size:0.55rem;}
.rb-s7-1130{font-size:0.55rem;color:#818cf8;width:14px;text-align:center;}
.rb-s7-1177{font-size:0.55rem;color:#f59e0b;width:14px;text-align:center;}
.rb-s7-0646{font-size:0.55rem;color:var(--color-primary-400);width:14px;text-align:center;}
.rb-s7-1182{font-size:0.55rem;color:var(--color-text-dim);background:var(--color-dark-elevated);border-radius:9999px;padding:0.1rem 0.4rem;}
.rb-s7-0157{font-size:0.55rem;margin-left:2px;}
.rb-s7-1203{font-size:0.5rem;}
.rb-s7-0802{font-size:0.5rem;color:var(--color-primary-400);margin:0.1rem 0 0;opacity:0.7;}
.rb-s7-0091{font-size:0.5rem;color:var(--color-text-dim);}
.rb-s7-1362{font-size:0.5rem;color:var(--color-text-dim);opacity:0.5;font-family:var(--font-sans);}
.rb-s7-1148{font-size:0.5rem;color:var(--muted-foreground);}
.rb-s7-1321{font-size:0.5rem;opacity:0.5;}
.rb-s7-0155{font-size:0.65em;}
.rb-s7-0699{font-size:0.65rem;}
.rb-s7-1024{font-size:0.65rem;color:var(--muted-foreground);}
.rb-s7-0533{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-dim);}
.rb-s7-1159{font-size:0.65rem;padding:3px 8px;}
.rb-s7-0852{font-size:0.6em;}
.rb-s7-0027{font-size:0.6rem;}
.rb-s7-0761{font-size:0.6rem;color:var(--color-text-dim);flex:1;min-width:160px;}
.rb-s7-0282{font-size:0.6rem;color:var(--color-text-dim);margin:0.15rem 0 0;}
.rb-s7-0594{font-size:0.6rem;color:var(--color-text-dim);margin:0.15rem 0 0;line-height:1.4;}
.rb-s7-1019{font-size:0.6rem;color:var(--muted-foreground);}
.rb-s7-0018{font-size:0.6rem;color:var(--primary);}
.rb-s7-0486{font-size:0.6rem;color:var(--primary);opacity:0.6;}
.rb-s7-0275{font-size:0.6rem;font-weight:500;}
.rb-s7-1034{font-size:0.72rem;}
.rb-s7-1381{font-size:0.72rem;color:var(--color-text-dim);line-height:1.55;margin:0;}
.rb-s7-0009{font-size:0.72rem;color:var(--color-text-dim);line-height:1.5;margin:0 0 0.5rem;}
.rb-s7-0408{font-size:0.72rem;color:var(--muted-foreground);margin-top:4px;}
.rb-s7-0526{font-size:0.72rem;color:var(--muted-foreground);margin:0;}
.rb-s7-1292{font-size:0.72rem;font-weight:600;color:var(--muted-foreground);display:block;margin-bottom:3px;}
.rb-s7-0056{font-size:0.72rem;padding:3px 6px;border-radius:5px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);cursor:pointer;}
.rb-s7-1104{font-size:0.72rem;padding:3px 6px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--muted-foreground);cursor:pointer;}
.rb-s7-0451{font-size:0.75rem;}
.rb-s7-0199{font-size:0.75rem;color:rgba(255,255,255,0.45);}
.rb-s7-0797{font-size:0.75rem;color:var(--color-text-dim);margin:0;}
.rb-s7-0886{font-size:0.75rem;color:var(--muted-foreground);}
.rb-s7-0444{font-size:0.75rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:0.05em;}
.rb-s7-0398{font-size:0.75rem;color:var(--primary);}
.rb-s7-0294{font-size:0.75rem;color:var(--rb-footer-text-color, var(--muted-foreground));}
.rb-s7-1342{font-size:0.75rem;color:var(--text-secondary);}
.rb-s7-0301{font-size:0.75rem;color:var(--warning);font-weight:600;}
.rb-s7-0643{font-size:0.75rem;font-weight:400;color:var(--muted-foreground);}
.rb-s7-0210{font-size:0.75rem;font-weight:500;display:block;cursor:pointer;}
.rb-s7-0569{font-size:0.75rem;font-weight:700;}
.rb-s7-0426{font-size:0.75rem;padding:0.35rem 0.6rem;}
.rb-s7-1247{font-size:0.75rem;padding:0.35rem 0.6rem;border-radius:6px;border:1px solid var(--color-border-dark);background:var(--color-dark-bg);color:#e2e8f0;cursor:pointer;min-width:120px;}
.rb-s7-0988{font-size:0.75rem;padding:0.35rem 0.6rem;border-radius:6px;border:1px solid var(--color-border-dark);background:var(--color-dark-bg);color:#e2e8f0;cursor:pointer;min-width:80px;}
.rb-s7-1030{font-size:0.75rem;padding:5px 8px 5px 26px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--foreground);width:180px;outline:none;}
.rb-s7-0119{font-size:0.75rem;padding:5px 8px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--foreground);cursor:pointer;}
.rb-s7-0070{font-size:0.78rem;color:var(--foreground);line-height:1.5;}
.rb-s7-0968{font-size:0.78rem;font-weight:600;color:var(--muted-foreground);}
.rb-s7-0152{font-size:0.78rem;font-weight:600;color:var(--muted-foreground);display:block;margin-bottom:4px;}
.rb-s7-0862{font-size:0.78rem;font-weight:600;color:var(--muted-foreground);display:block;margin-bottom:6px;}
.rb-s7-1064{font-size:0.7em;}
.rb-s7-0195{font-size:0.7rem;}
.rb-s7-0277{font-size:0.7rem;background:rgba(255,87,34,0.12);padding:2px 8px;border-radius:4px;color:var(--color-primary-400);}
.rb-s7-1085{font-size:0.7rem;color:#6366f1;}
.rb-s7-0614{font-size:0.7rem;color:var(--color-primary-400);}
.rb-s7-1158{font-size:0.7rem;color:var(--muted-foreground);}
.rb-s7-0399{font-size:0.7rem;color:var(--muted-foreground);margin-top:0.25rem;}
.rb-s7-0636{font-size:0.7rem;color:var(--primary);text-decoration:none;}
.rb-s7-1194{font-size:0.7rem;color:var(--text-secondary);}
.rb-s7-1107{font-size:0.7rem;padding:0.35rem 0.6rem 0.35rem 2rem;}
.rb-s7-0515{font-size:0.7rem;padding:0.35rem 0.6rem;max-width:220px;}
.rb-s7-0586{font-size:0.82rem;}
.rb-s7-0817{font-size:0.82rem;font-weight:500;color:var(--foreground);}
.rb-s7-1228{font-size:0.82rem;font-weight:700;color:var(--primary);min-width:40px;text-align:right;}
.rb-s7-0043{font-size:0.85rem;}
.rb-s7-0041{font-size:0.85rem;color:var(--muted-foreground);margin:0.25rem 0 0;}
.rb-s7-0857{font-size:0.85rem;font-family:'Fira Code', Consolas, monospace;flex:1;}
.rb-s7-0257{font-size:0.85rem;font-weight:600;color:var(--foreground);margin:0 0 4px;}
.rb-s7-0462{font-size:0.85rem;resize:vertical;}
.rb-s7-0597{font-size:0.875rem;}
.rb-s7-0707{font-size:0.875rem;font-weight:500;flex:1;}
.rb-s7-0187{font-size:0.875rem;width:16px;text-align:center;}
.rb-s7-0775{font-size:0.8rem;}
.rb-s7-1382{font-size:0.8rem;color:rgba(255,255,255,0.65);text-decoration:none;}
.rb-s7-1270{font-size:0.8rem;color:var(--color-text-dim);}
.rb-s7-0700{font-size:0.8rem;color:var(--destructive);}
.rb-s7-1353{font-size:0.8rem;color:var(--destructive);margin:0;}
.rb-s7-0196{font-size:0.8rem;color:var(--foreground);}
.rb-s7-1016{font-size:0.8rem;color:var(--muted-foreground);}
.rb-s7-1279{font-size:0.8rem;color:var(--muted-foreground);margin:0;}
.rb-s7-0364{font-size:0.8rem;color:var(--muted-foreground);text-decoration:none;}
.rb-s7-0677{font-size:0.8rem;color:var(--primary);}
.rb-s7-0454{font-size:0.8rem;color:var(--primary);font-weight:500;}
.rb-s7-0487{font-size:0.8rem;color:var(--rb-footer-text-color, var(--muted-foreground));text-decoration:none;}
.rb-s7-0181{font-size:0.8rem;font-weight:600;color:var(--foreground);}
.rb-s7-1038{font-size:0.8rem;font-weight:600;color:var(--foreground);margin-bottom:0.75rem;display:flex;align-items:center;gap:0.4rem;}
.rb-s7-0378{font-size:0.8rem;font-weight:600;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rb-s7-0847{font-size:0.8rem;font-weight:600;margin:0;}
.rb-s7-0111{font-size:0.8rem;margin-top:0.5rem;}
.rb-s7-0160{font-size:0.8rem;padding:7px 12px 7px 30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--foreground);width:200px;outline:none;}
.rb-s7-0557{font-size:0.9rem;color:var(--muted-foreground);}
.rb-s7-0098{font-size:0.9rem;font-weight:700;color:var(--foreground);margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem;}
.rb-s7-0909{font-size:1.05rem;font-weight:700;margin-bottom:16px;color:var(--foreground);display:flex;align-items:center;gap:8px;}
.rb-s7-0506{font-size:1.1rem;}
.rb-s7-0903{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;color:var(--foreground);margin:0;}
.rb-s7-0751{font-size:1.1rem;line-height:1;}
.rb-s7-0961{font-size:1.25rem;font-weight:700;color:var(--foreground);}
.rb-s7-0079{font-size:1.25rem;font-weight:700;margin:0;color:var(--foreground);}
.rb-s7-0333{font-size:1.25rem;padding:4px 6px;border-radius:var(--rb-avatar-border-radius, 9999px);border:none;background:transparent;cursor:pointer;transition:transform 0.15s ease, background 0.15s ease;line-height:1;}
.rb-s7-1198{font-size:1.2rem;color:var(--muted-foreground);opacity:.4;}
.rb-s7-1202{font-size:1.2rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--primary);}
.rb-s7-0946{font-size:1.4rem;}
.rb-s7-0620{font-size:1.4rem;opacity:0.35;margin-bottom:0.5rem;display:block;}
.rb-s7-1312{font-size:1.5rem;color:var(--color-danger);display:block;margin-bottom:0.5rem;}
.rb-s7-1260{font-size:1.5rem;color:var(--primary);}
.rb-s7-0639{font-size:1.5rem;opacity:0.4;display:block;margin-bottom:6px;}
.rb-s7-0094{font-size:1.5rem;text-align:center;}
.rb-s7-1027{font-size:10px;}
.rb-s7-0674{font-size:10px;background:rgba(239,68,68,.12);color:#ef4444;border:0;padding:3px 8px;border-radius:4px;cursor:pointer;}
.rb-s7-0470{font-size:10px;background:var(--color-dark-hover, rgba(0,0,0,.04));padding:0 5px;border-radius:3px;color:var(--color-text, #1e293b);}
.rb-s7-1015{font-size:10px;background:var(--color-dark-hover, rgba(0,0,0,.04));padding:0 5px;border-radius:3px;color:var(--color-text-dim, #64748b);}
.rb-s7-1197{font-size:10px;color:#f59e0b;}
.rb-s7-0403{font-size:10px;color:var(--color-primary-400);margin-right:4px;}
.rb-s7-0997{font-size:10px;color:var(--color-text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:380px;}
.rb-s7-0081{font-size:10px;color:var(--color-text-dim, #64748b);}
.rb-s7-0205{font-size:10px;color:var(--color-text-dim, #94a3b8);opacity:.5;}
.rb-s7-0223{font-size:10px;margin-right:4px;}
.rb-s7-0884{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-dim);margin-bottom:4px;}
.rb-s7-1022{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-dim);margin-bottom:6px;}
.rb-s7-0853{font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.rb-s7-0774{font-size:11px;}
.rb-s7-0523{font-size:11px;background:rgba(59,130,246,.12);padding:2px 6px;border-radius:4px;}
.rb-s7-1209{font-size:11px;background:rgba(59,130,246,.25);padding:2px 6px;border-radius:4px;}
.rb-s7-1240{font-size:11px;color:#ef4444;}
.rb-s7-0719{font-size:11px;color:#f59e0b;}
.rb-s7-0325{font-size:11px;color:var(--color-text, #1e293b);}
.rb-s7-0206{font-size:11px;color:var(--color-text-dark-secondary,#94a3b8);margin-bottom:8px;font-weight:600;}
.rb-s7-0004{font-size:11px;color:var(--color-text-dim);}
.rb-s7-0093{font-size:11px;color:var(--color-text-dim);font-style:italic;}
.rb-s7-0965{font-size:11px;color:var(--color-text-dim, #64748b);white-space:pre-wrap;margin:0 0 8px 0;}
.rb-s7-0221{font-size:11px;color:var(--text-faint);}
.rb-s7-1273{font-size:11px;color:var(--text-muted);text-transform:uppercase;margin-bottom:4px;}
.rb-s7-0887{font-size:11px;font-style:italic;}
.rb-s7-0035{font-size:11px;font-weight:700;color:var(--color-text, #1e293b);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:6px;}
.rb-s7-0480{font-size:11px;margin-bottom:6px;}
.rb-s7-0358{font-size:11px;margin-top:12px;text-align:center;}
.rb-s7-1311{font-size:11px;margin-top:8px;}
.rb-s7-0843{font-size:11px;padding:4px 8px;border-radius:5px;border:1px solid var(--color-border, rgba(0,0,0,.08));background:var(--color-dark-input, transparent);color:var(--color-text);}
.rb-s7-0014{font-size:11px;padding:5px 12px;}
.rb-s7-0835{font-size:11px;text-decoration:underline;}
.rb-s7-0608{font-size:12px;}
.rb-s7-1095{font-size:12px;color:var(--color-text-dim, #94a3b8);}
.rb-s7-0580{font-size:12px;color:var(--text-muted);}
.rb-s7-0159{font-size:12px;color:var(--text-muted);margin-top:4px;}
.rb-s7-0805{font-size:12px;flex-shrink:0;}
.rb-s7-0163{font-size:12px;font-weight:500;color:var(--color-text-dim, #64748b);}
.rb-s7-0626{font-size:12px;font-weight:600;color:var(--color-text, #1e293b);}
.rb-s7-0661{font-size:12px;margin-top:2px;}
.rb-s7-0191{font-size:12px;margin-top:4px;}
.rb-s7-1136{font-size:12px;margin:16px 0;}
.rb-s7-0942{font-size:12px;text-decoration:none;}
.rb-s7-0279{font-size:13px;}
.rb-s7-0777{font-size:13px;background:var(--bg-elev);padding:8px 10px;border-radius:6px;margin-bottom:6px;}
.rb-s7-0136{font-size:13px;color:var(--text-muted);}
.rb-s7-1368{font-size:13px;color:var(--text-muted);margin-top:6px;}
.rb-s7-1357{font-size:13px;margin-bottom:12px;}
.rb-s7-0829{font-size:13px;margin-bottom:24px;}
.rb-s7-1173{font-size:13px;margin-bottom:24px;text-align:center;}
.rb-s7-1013{font-size:13px;margin-top:4px;}
.rb-s7-0419{font-size:13px;padding:6px 12px;}
.rb-s7-0071{font-size:14px;}
.rb-s7-1151{font-size:14px;color:var(--color-text-dim, #94a3b8);}
.rb-s7-0901{font-size:14px;height:40px;}
.rb-s7-0466{font-size:14px;line-height:1.7;}
.rb-s7-0498{font-size:14px;margin-bottom:24px;}
.rb-s7-0172{font-size:14px;margin:0 0 12px;}
.rb-s7-0922{font-size:14px;min-height:300px;padding:12px;line-height:1.6;}
.rb-s7-0143{font-size:14px;min-height:80px;padding:8px 12px;}
.rb-s7-0357{font-size:15px;}
.rb-s7-0218{font-size:16px;}
.rb-s7-1363{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--color-text, #1e293b);}
.rb-s7-1035{font-size:18px;}
.rb-s7-1364{font-size:18px;color:var(--color-text-dim, #94a3b8);opacity:.25;display:block;margin-bottom:6px;}
.rb-s7-0057{font-size:18px;color:var(--color-text-dim, #94a3b8);opacity:.2;display:block;margin-bottom:6px;}
.rb-s7-0730{font-size:18px;padding:4px 10px;vertical-align:middle;}
.rb-s7-0507{font-size:1rem;font-weight:700;color:var(--foreground);display:flex;align-items:center;gap:8px;}
.rb-s7-0401{font-size:1rem;font-weight:700;margin-bottom:12px;color:var(--foreground);}
.rb-s7-0958{font-size:1rem;font-weight:700;margin-bottom:14px;color:var(--foreground);}
.rb-s7-0632{font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--foreground);}
.rb-s7-0763{font-size:1rem;opacity:0.5;}
.rb-s7-0756{font-size:2.5rem;color:var(--success);margin-bottom:12px;display:block;}
.rb-s7-1201{font-size:2.5rem;display:block;margin-bottom:0.75rem;opacity:0.3;}
.rb-s7-1255{font-size:2.5rem;opacity:0.4;}
.rb-s7-1251{font-size:20px;}
.rb-s7-1320{font-size:22px;margin-bottom:4px;}
.rb-s7-1045{font-size:22px;margin-bottom:4px;text-align:center;}
.rb-s7-0381{font-size:22px;margin:0;}
.rb-s7-1256{font-size:22px;margin:0;text-decoration:none;color:inherit;}
.rb-s7-0088{font-size:24px;color:var(--color-text-dim, #94a3b8);opacity:.25;display:block;margin-bottom:8px;}
.rb-s7-0258{font-size:28px;}
.rb-s7-0757{font-size:28px;margin-bottom:8px;}
.rb-s7-0512{font-size:2rem;}
.rb-s7-0726{font-size:2rem;color:var(--color-primary-400);}
.rb-s7-0239{font-size:2rem;color:var(--muted-foreground);margin-bottom:.75rem;}
.rb-s7-0859{font-size:2rem;color:var(--primary);margin-bottom:8px;display:block;}
.rb-s7-0714{font-size:2rem;display:block;margin-bottom:0.75rem;color:var(--color-primary-400);opacity:0.4;}
.rb-s7-0625{font-size:2rem;opacity:0.3;}
.rb-s7-1089{font-size:2rem;width:80px;text-align:center;}
.rb-s7-0505{font-size:32px;color:var(--success);opacity:0.5;margin-bottom:12px;}
.rb-s7-0992{font-size:32px;opacity:.3;}
.rb-s7-0800{font-size:32px;opacity:0.3;margin-bottom:12px;}
.rb-s7-1349{font-size:32px;opacity:0.4;margin-bottom:12px;}
.rb-s7-0266{font-size:48px;color:var(--danger);margin-bottom:16px;}
.rb-s7-0449{font-size:48px;color:var(--success);margin-bottom:16px;}
.rb-s7-0697{font-size:48px;opacity:0.3;}
.rb-s7-0516{font-size:5px;}
.rb-s7-0204{font-size:64px;color:var(--danger);margin-bottom:16px;}
.rb-s7-0455{font-size:64px;color:var(--warning);margin-bottom:16px;}
.rb-s7-0806{font-size:8px;}
.rb-s7-1001{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.3);}
.rb-s7-1174{font-size:9px;}
.rb-s7-1046{font-size:9px;color:#10b981;}
.rb-s7-1086{font-size:9px;color:#3b82f6;}
.rb-s7-0250{font-size:9px;margin-right:3px;}
.rb-s7-0635{font-size:9px;margin-right:4px;}
.rb-s7-0336{font-size:9px;opacity:.6;}
.rb-s7-1339{font-variant-numeric:tabular-nums;}
.rb-s7-0178{font-weight:500;}
.rb-s7-1254{font-weight:600;}
.rb-s7-0970{font-weight:600;color:var(--foreground);}
.rb-s7-1266{font-weight:600;color:var(--foreground);font-size:0.9rem;}
.rb-s7-0291{font-weight:600;color:var(--text);text-decoration:none;display:block;}
.rb-s7-0570{font-weight:600;font-size:0.875rem;}
.rb-s7-0959{font-weight:600;font-size:0.875rem;display:block;margin-bottom:0.4rem;}
.rb-s7-0952{font-weight:600;font-size:0.95rem;}
.rb-s7-0148{font-weight:600;margin-bottom:2px;}
.rb-s7-0527{font-weight:600;margin-bottom:4px;}
.rb-s7-1094{font-weight:700;font-size:13px;margin-bottom:10px;color:var(--text);}
.rb-s7-0110{font-weight:700;font-size:1rem;color:#ffffff;text-decoration:none;}
.rb-s7-1379{font-weight:700;font-size:1rem;color:var(--primary);text-decoration:none;}
.rb-s7-1191{font-weight:700;font-size:1rem;color:var(--rb-footer-link-color, var(--primary));text-decoration:none;}
.rb-s7-0168{font-weight:800;font-size:1rem;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;display:block;line-height:1.3;transition:color .15s;}
.rb-s7-0103{gap:10px;}
.rb-s7-0944{gap:10px;align-items:center;}
.rb-s7-1049{gap:10px;flex-wrap:wrap;}
.rb-s7-0824{gap:10px;padding:6px;border-radius:8px;text-decoration:none;color:inherit;}
.rb-s7-0907{gap:12px;}
.rb-s7-0709{gap:16px;}
.rb-s7-0424{gap:32px;}
.rb-s7-1298{gap:4px;flex-shrink:0;margin-left:auto;}
.rb-s7-0280{gap:8px;}
.rb-s7-0545{gap:8px;justify-content:center;margin-top:16px;}
.rb-s7-0383{gap:8px;margin-bottom:6px;}
.rb-s7-0683{grid-template-columns:1fr 260px;}
.rb-s7-0905{grid-template-columns:1fr 60px 60px 60px;border-bottom:1px solid var(--border);}
.rb-s7-0606{grid-template-columns:1fr 60px 60px 60px;border-bottom:1px solid var(--border);background:var(--muted);}
.rb-s7-0605{height:1px;background:var(--border);margin:2px 0;}
.rb-s7-0563{height:1px;background:var(--border);margin:2px 12px;}
.rb-s7-1163{height:1px;margin:4px 12px;background:var(--border);}
.rb-s7-1232{height:28px;width:auto;}
.rb-s7-1075{height:34px;}
.rb-s7-1343{height:36px;}
.rb-s7-1103{height:38px;}
.rb-s7-0226{height:42px;}
.rb-s7-0708{height:44px;}
.rb-s7-0980{height:56px;background:var(--surface);border:1px solid var(--border);color:var(--foreground);}
.rb-s7-0488{height:60px;padding:0 1.5rem;}
.rb-s7-0629{height:64px;border-bottom:1px solid var(--border);background:var(--surface);}
.rb-s7-0936{height:var(--rb-header-height, 4rem);}
.rb-s7-0593{height:var(--rb-profile-banner-height, 220px);}
.rb-s7-0855{justify-content:center;}
.rb-s7-0330{justify-content:center;margin-top:16px;}
.rb-s7-0931{justify-content:center;margin-top:24px;}
.rb-s7-0386{justify-content:flex-end;gap:0.5rem;}
.rb-s7-0353{justify-content:flex-start;gap:0.5rem;}
.rb-s7-1183{justify-content:space-between;}
.rb-s7-0216{justify-content:space-between;margin-top:16px;}
.rb-s7-0390{line-height:var(--rb-content-line-height, 1.7);}
.rb-s7-0736{list-style:none;padding:0;margin:0;}
.rb-s7-1261{margin-bottom:0;}
.rb-s7-0290{margin-bottom:0.5rem;overflow:hidden;}
.rb-s7-1138{margin-bottom:1.25rem;}
.rb-s7-1338{margin-bottom:1.5rem;}
.rb-s7-0923{margin-bottom:10px;}
.rb-s7-1355{margin-bottom:12px;}
.rb-s7-0540{margin-bottom:12px;padding:14px 16px;}
.rb-s7-1161{margin-bottom:12px;position:relative;}
.rb-s7-0793{margin-bottom:14px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
.rb-s7-0767{margin-bottom:14px;padding:12px;background:var(--muted);border-radius:10px;}
.rb-s7-0799{margin-bottom:16px;}
.rb-s7-0822{margin-bottom:1rem;}
.rb-s7-0450{margin-bottom:1rem;padding:.75rem 1rem;}
.rb-s7-1073{margin-bottom:1rem;padding:.75rem 1rem;border-radius:8px;background:color-mix(in srgb, var(--danger) 10%, transparent);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 25%, transparent);}
.rb-s7-0130{margin-bottom:1rem;padding:.75rem 1rem;border-radius:8px;background:color-mix(in srgb, var(--success) 10%, transparent);color:var(--success);border:1px solid color-mix(in srgb, var(--success) 25%, transparent);}
.rb-s7-0704{margin-bottom:1rem;padding:.75rem 1rem;border-radius:8px;background:color-mix(in srgb, var(--warning) 10%, transparent);border:1px solid color-mix(in srgb, var(--warning) 25%, transparent);}
.rb-s7-1210{margin-bottom:2rem;}
.rb-s7-0915{margin-bottom:4px;}
.rb-s7-1144{margin-bottom:8px;}
.rb-s7-1262{margin-left:.5rem;background:color-mix(in srgb, var(--success) 15%, transparent);color:var(--success);}
.rb-s7-1374{margin-left:0.5rem;}
.rb-s7-0021{margin-left:24px;}
.rb-s7-1179{margin-left:6px;}
.rb-s7-0739{margin-left:auto;}
.rb-s7-0332{margin-left:auto;display:flex;align-items:center;gap:2px;}
.rb-s7-1186{margin-left:auto;display:flex;gap:2px;}
.rb-s7-0286{margin-left:auto;font-size:0.55rem;color:var(--color-text-dim);}
.rb-s7-0371{margin-left:auto;font-size:0.5rem;opacity:0.5;}
.rb-s7-0723{margin-left:auto;font-size:0.6rem;color:var(--color-text-dim);}
.rb-s7-0860{margin-right:0.35rem;}
.rb-s7-0306{margin-right:2px;}
.rb-s7-0429{margin-right:3px;}
.rb-s7-0738{margin-right:4px;}
.rb-s7-0413{margin-right:6px;}
.rb-s7-0747{margin-top:0.4rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.rb-s7-0891{margin-top:0.5rem;color:var(--text-muted, #64748b);font-size:0.875rem;}
.rb-s7-1307{margin-top:0.5rem;font-size:0.65rem;padding:0.4rem 0.6rem;}
.rb-s7-0164{margin-top:0.75rem;}
.rb-s7-1347{margin-top:0.75rem;overflow:hidden;}
.rb-s7-0619{margin-top:1.5rem;display:flex;gap:0.75rem;}
.rb-s7-0304{margin-top:1.5rem;display:flex;gap:0.75rem;align-items:center;}
.rb-s7-0472{margin-top:10px;}
.rb-s7-0001{margin-top:12px;}
.rb-s7-1267{margin-top:12px;display:inline-flex;}
.rb-s7-0974{margin-top:16px;}
.rb-s7-0225{margin-top:16px;font-size:12px;color:var(--text-muted);text-align:center;}
.rb-s7-0114{margin-top:16px;font-size:12px;text-align:center;}
.rb-s7-1123{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);text-align:center;}
.rb-s7-0870{margin-top:1rem;}
.rb-s7-0921{margin-top:1rem;border-top:1px solid var(--border);padding-top:1rem;}
.rb-s7-0037{margin-top:24px;}
.rb-s7-1011{margin-top:24px;color:var(--danger);}
.rb-s7-1302{margin-top:2px;}
.rb-s7-0737{margin-top:2rem;}
.rb-s7-0170{margin-top:3px;}
.rb-s7-0894{margin-top:4px;}
.rb-s7-1235{margin-top:4px;font-size:13px;}
.rb-s7-1140{margin-top:8px;}
.rb-s7-1365{margin-top:8px;color:var(--danger);}
.rb-s7-0716{margin-top:var(--rb-space-4);}
.rb-s7-0117{margin:0;}
.rb-s7-0039{margin:0 0 .75rem;font-size:.9rem;line-height:1.5;color:var(--color-text, #e2e4ea);}
.rb-s7-0388{margin:0 0 1.25rem;font-size:.9rem;line-height:1.5;color:var(--color-text, #e2e4ea);}
.rb-s7-0261{margin:0 0 1rem;color:var(--text-secondary);font-size:0.875rem;}
.rb-s7-1295{margin:0 0 6px 0;}
.rb-s7-0553{margin:0.25rem 0 0;color:var(--text-secondary);font-size:0.875rem;}
.rb-s7-0616{margin:0.2rem 0 0;font-size:0.7rem;color:var(--text-secondary);}
.rb-s7-0394{margin:0.3rem 0 0;font-size:0.75rem;color:var(--text-secondary);}
.rb-s7-0086{margin:0.4rem 0 0;font-size:0.75rem;color:var(--text-secondary);}
.rb-s7-0188{margin:0.4rem 0 0;font-size:0.7rem;}
.rb-s7-1208{margin:0.6rem 0 0;}
.rb-s7-0664{margin:0;font-size:1.3rem;font-weight:700;flex:1;}
.rb-s7-0026{margin:0;font-size:1.5rem;}
.rb-s7-0521{margin:0;font-size:1.5rem;font-weight:700;}
.rb-s7-0705{margin:1.5rem 0 0.75rem;font-size:1rem;}
.rb-s7-0492{margin:10px 0 6px;font-weight:700;color:#fbbf24;font-size:1.1em;}
.rb-s7-0489{margin:1rem 2rem 0;padding:0.75rem 1rem;border-radius:10px;background:color-mix(in srgb, var(--danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--danger) 25%, transparent);}
.rb-s7-0732{margin:1rem 2rem 0;padding:0.75rem 1rem;border-radius:10px;background:color-mix(in srgb, var(--success) 10%, transparent);border:1px solid color-mix(in srgb, var(--success) 25%, transparent);}
.rb-s7-0350{margin:4px 0 0 18px;padding:0;}
.rb-s7-0691{margin:4px 0;padding-left:18px;}
.rb-s7-0999{margin:6px 0;}
.rb-s7-0392{margin:6px 0 4px;font-weight:700;color:var(--color-primary-400);}
.rb-s7-0200{margin:8px 0 4px;font-weight:700;color:#fbbf24;}
.rb-s7-0596{max-height:120px;max-width:100%;border-radius:8px;margin:0 auto;display:block;border:1px solid var(--border);}
.rb-s7-0361{max-height:600px;overflow-y:auto;}
.rb-s7-0785{max-width:120px;}
.rb-s7-1223{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rb-s7-0834{max-width:1280px;margin:0 auto;padding:2rem 1.5rem;}
.rb-s7-1323{max-width:200px;font-family:var(--font-sans);font-size:0.7rem;padding:0.35rem 0.5rem;}
.rb-s7-1059{max-width:260px;}
.rb-s7-1332{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rb-s7-1157{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rb-s7-0447{max-width:300px;}
.rb-s7-0208{max-width:300px;font-size:0.7rem;}
.rb-s7-0924{max-width:360px;overflow:hidden;text-overflow:ellipsis;}
.rb-s7-0193{max-width:420px;margin:80px auto 0;}
.rb-s7-0592{max-width:460px;margin:80px auto 0;}
.rb-s7-1377{max-width:560px;margin:60px auto 0;}
.rb-s7-0362{max-width:600px;}
.rb-s7-0940{max-width:70%;}
.rb-s7-0568{max-width:840px;}
.rb-s7-0186{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:var(--rb-border-radius-large, 6px);box-shadow:0 8px 40px rgba(0,0,0,0.5);}
.rb-s7-0832{min-height:100px;color:var(--foreground);border:1px solid var(--border);border-top:0;padding:12px;border-radius:0 0 8px 8px;}
.rb-s7-0389{min-height:160px;max-height:500px;overflow-y:auto;border-radius:0 0 8px 8px;padding:12px 14px;font-size:0.9rem;line-height:1.7;outline:none;white-space:pre-wrap;word-break:break-word;}
.rb-s7-0063{min-height:160px;max-height:500px;overflow-y:auto;border-radius:0;padding:12px 14px;font-size:0.9rem;line-height:1.7;outline:none;white-space:pre-wrap;word-break:break-word;}
.rb-s7-0692{min-height:180px;}
.rb-s7-0898{min-height:48px;}
.rb-s7-1185{min-height:60px;color:var(--color-text-dark-primary,#e2e8f0);font-size:13px;line-height:1.6;}
.rb-s7-0786{min-height:60vh;}
.rb-s7-0370{min-width:0;}
.rb-s7-0926{min-width:0;flex:1;}
.rb-s7-0049{min-width:0;flex:1;padding-bottom:2px;}
.rb-s7-0061{min-width:100px;}
.rb-s7-1053{min-width:240px;}
.rb-s7-0445{min-width:2rem;}
.rb-s7-1171{min-width:50px;}
.rb-s7-0900{object-fit:cover;}
.rb-s7-0251{opacity:.3;margin:0 auto .5rem;display:block;}
.rb-s7-0417{opacity:.6;}
.rb-s7-1289{opacity:.7;}
.rb-s7-1366{opacity:.7;font-weight:400;}
.rb-s7-0066{opacity:0.45;}
.rb-s7-0780{opacity:0.5;}
.rb-s7-0985{opacity:0.5;transition:opacity 0.2s;}
.rb-s7-0694{opacity:0.6;}
.rb-s7-1351{overflow-x:auto;border:1px solid var(--border-color, rgba(148,163,184,.15));border-radius:0.75rem;}
.rb-s7-0360{overflow:hidden;}
.rb-s7-1358{overflow:hidden;margin-bottom:12px;}
.rb-s7-0368{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60ch;}
.rb-s7-0293{padding-bottom:20px;border-bottom:1px solid var(--border);}
.rb-s7-0016{padding-bottom:4px;}
.rb-s7-0376{padding-left:18px;color:#22c55e;font-size:11px;}
.rb-s7-0347{padding-left:18px;color:#6366f1;font-size:11px;}
.rb-s7-0861{padding-left:18px;color:#f59e0b;font-size:11px;}
.rb-s7-0169{padding:.75rem;}
.rb-s7-0598{padding:0 0 10px 0;border-bottom:1px solid var(--color-border-dark);margin-bottom:10px;}
.rb-s7-0054{padding:0 0 10px 0;border-bottom:1px solid var(--color-border-dark);margin-bottom:12px;}
.rb-s7-1051{padding:0.25rem 0;}
.rb-s7-0139{padding:0.25rem 0.5rem;border-radius:0.375rem;border:1px solid var(--border-color, rgba(148,163,184,.25));background:var(--bg-input, #1e293b);color:var(--text-primary, #e2e8f0);font-size:0.75rem;cursor:pointer;}
.rb-s7-0559{padding:0.3rem 0.7rem;font-size:0.75rem;border-radius:4px;border:1px solid rgba(255,87,34,0.30);background:transparent;color:var(--color-primary-400);cursor:pointer;display:none;}
.rb-s7-1253{padding:0.4rem 0.75rem;border-radius:6px;font-size:0.8rem;font-weight:500;border:1px solid var(--border);background:var(--muted);color:var(--foreground);cursor:pointer;transition:all 0.2s;}
.rb-s7-1245{padding:0.5rem 0;}
.rb-s7-0273{padding:0.5rem 0.5rem;text-align:center;border-bottom:1px solid var(--border-color, rgba(148,163,184,.08));}
.rb-s7-0002{padding:0.5rem 1.5rem;border-radius:0.5rem;background:var(--accent-primary, #6366f1);color:#fff;border:none;font-weight:600;cursor:pointer;}
.rb-s7-0211{padding:0.5rem 1.5rem;border-radius:0.5rem;background:var(--bg-secondary, #334155);color:var(--text-primary, #e2e8f0);text-decoration:none;font-weight:500;}
.rb-s7-0431{padding:0.5rem 1.5rem;border-radius:0.5rem;background:var(--color-primary-500);color:#fff;border:none;font-weight:600;cursor:pointer;}
.rb-s7-0283{padding:0.5rem 1rem;border-radius:8px;font-size:0.85rem;font-weight:500;background:transparent;border:1px solid var(--border);color:var(--foreground);cursor:pointer;}
.rb-s7-0219{padding:0.5rem 1rem;border-radius:8px;font-size:0.85rem;font-weight:600;background:#dc2626;border:none;color:#fff;cursor:pointer;transition:opacity 0.2s;}
.rb-s7-1072{padding:0.5rem 1rem;border-radius:var(--rb-border-radius-large, 6px);font-size:0.85rem;font-weight:600;background:#dc2626;border:none;color:#fff;cursor:pointer;transition:opacity 0.2s;}
.rb-s7-0135{padding:0.5rem 1rem;font-family:monospace;font-size:0.75rem;border-bottom:1px solid var(--border-color, rgba(148,163,184,.08));}
.rb-s7-1375{padding:0.65rem 0.75rem;}
.rb-s7-0457{padding:0.65rem 0.75rem;text-align:center;}
.rb-s7-1317{padding:0.65rem 0.75rem;text-align:center;color:var(--text-secondary);}
.rb-s7-0161{padding:0.65rem 0.75rem;text-align:left;}
.rb-s7-0427{padding:0.65rem 0.75rem;text-align:right;}
.rb-s7-0727{padding:0.65rem 0.75rem;text-align:right;white-space:nowrap;}
.rb-s7-0262{padding:0.65rem 1.25rem;border-bottom:1px solid var(--color-border-dark);background:rgba(255,87,34,0.03);display:flex;align-items:center;justify-content:space-between;}
.rb-s7-0514{padding:0.65rem 1rem;border-bottom:1px solid var(--color-border-dark);}
.rb-s7-0803{padding:0.75rem 0.5rem;text-align:center;font-weight:600;border-bottom:1px solid var(--border-color, rgba(148,163,184,.15));min-width:100px;}
.rb-s7-1215{padding:0.75rem 1.25rem;border-bottom:1px solid var(--color-border-dark);background:linear-gradient(135deg, #6366f108, transparent);}
.rb-s7-1062{padding:0.75rem 1.25rem;border-bottom:1px solid var(--color-border-dark);background:linear-gradient(135deg, #ff572208, transparent);}
.rb-s7-1055{padding:0.75rem 1.25rem;border-bottom:1px solid var(--color-border-dark);background:rgba(99,102,241,0.05);}
.rb-s7-0106{padding:0.75rem 1rem;border-bottom:1px solid var(--color-border-dark);}
.rb-s7-0951{padding:0.75rem 1rem;margin-bottom:1rem;border-color:var(--danger);color:var(--danger);}
.rb-s7-1146{padding:0.75rem 1rem;margin-bottom:1rem;border-radius:0.5rem;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#22c55e;font-size:0.875rem;}
.rb-s7-1229{padding:0.75rem 1rem;text-align:left;font-weight:600;border-bottom:1px solid var(--border-color, rgba(148,163,184,.15));min-width:200px;}
.rb-s7-0742{padding:0.85rem 1rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);}
.rb-s7-0017{padding:1.25rem;}
.rb-s7-0920{padding:1.25rem;margin-bottom:1.5rem;}
.rb-s7-0415{padding:1.5rem;}
.rb-s7-0984{padding:1.5rem 0;}
.rb-s7-0346{padding:1.5rem 2rem 2rem;display:flex;flex-direction:column;gap:1.15rem;}
.rb-s7-0956{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;width:100%;max-width:none;}
.rb-s7-0197{padding:1.5rem;max-width:1200px;}
.rb-s7-0864{padding:1.5rem;max-width:1400px;}
.rb-s7-1196{padding:1.5rem;max-width:800px;}
.rb-s7-0690{padding:10px 12px;margin-bottom:16px;border-color:var(--danger);color:var(--danger);font-size:13px;}
.rb-s7-0442{padding:10px 12px;margin-bottom:16px;border-color:var(--success);color:var(--success);font-size:13px;}
.rb-s7-0137{padding:10px 14px;}
.rb-s7-0230{padding:10px 14px;margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.rb-s7-1306{padding:10px 14px;text-align:center;}
.rb-s7-0051{padding:10px 14px;text-align:center;color:var(--muted-foreground);font-size:0.75rem;}
.rb-s7-1047{padding:10px 14px;text-align:center;font-weight:600;color:var(--muted-foreground);}
.rb-s7-0249{padding:10px 14px;text-align:left;font-weight:600;color:var(--muted-foreground);}
.rb-s7-0547{padding:10px 14px;text-align:right;color:var(--muted-foreground);font-size:0.75rem;}
.rb-s7-0536{padding:10px 14px;text-align:right;font-weight:600;color:var(--muted-foreground);}
.rb-s7-0073{padding:10px 16px;border-bottom:1px solid var(--color-border-dark);}
.rb-s7-0529{padding:10px 16px;border-bottom:1px solid var(--color-border-dark);display:flex;align-items:center;justify-content:space-between;}
.rb-s7-0113{padding:10px 16px;border-top:1px solid var(--color-border-dark);display:flex;gap:8px;align-items:center;justify-content:space-between;}
.rb-s7-0528{padding:10px 16px;border-top:1px solid var(--color-border-dark);display:flex;gap:8px;justify-content:space-between;align-items:center;}
.rb-s7-1308{padding:10px 16px;border-top:1px solid var(--color-border-dark);display:flex;justify-content:flex-end;gap:8px;}
.rb-s7-0060{padding:12px 16px;border-bottom:1px solid var(--color-border, rgba(0,0,0,.06));display:flex;align-items:center;justify-content:space-between;}
.rb-s7-1219{padding:12px 16px;border-bottom:1px solid var(--color-border-dark);}
.rb-s7-0766{padding:12px 16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--color-border-dark);}
.rb-s7-0228{padding:12px 16px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--color-border-dark);}
.rb-s7-0994{padding:12px;border:1px solid var(--danger);border-radius:8px;margin-top:8px;}
.rb-s7-1029{padding:14px 16px;}
.rb-s7-0896{padding:14px 16px 10px;}
.rb-s7-1100{padding:14px 16px;background:rgba(251,191,36,0.10);color:#fbbf24;border-bottom:1px solid var(--color-border-dark);}
.rb-s7-0856{padding:16px;}
.rb-s7-0873{padding:16px;color:#fca5a5;}
.rb-s7-1244{padding:16px;color:#fca5a5;font-size:12px;}
.rb-s7-0819{padding:16px;text-align:center;color:#94a3b8;font-size:12px;}
.rb-s7-1224{padding:1rem;}
.rb-s7-0156{padding:1rem 1.25rem;}
.rb-s7-0687{padding:1rem;display:flex;flex-direction:column;gap:0.5rem;}
.rb-s7-0914{padding:1rem;text-align:center;}
.rb-s7-0722{padding:20px;}
.rb-s7-0029{padding:20px;text-align:center;color:#94a3b8;}
.rb-s7-0092{padding:24px;}
.rb-s7-0987{padding:24px;color:#94a3b8;font-size:13px;}
.rb-s7-0918{padding:24px;color:#fca5a5;}
.rb-s7-1069{padding:24px;color:#fca5a5;font-size:13px;}
.rb-s7-1337{padding:24px;text-align:center;color:#94a3b8;}
.rb-s7-0790{padding:24px;text-align:center;color:#94a3b8;font-size:13px;}
.rb-s7-0058{padding:24px;text-align:center;color:#fca5a5;}
.rb-s7-0993{padding:28px;text-align:center;}
.rb-s7-0436{padding:2px 4px;}
.rb-s7-0670{padding:2rem 2rem 0;text-align:center;position:relative;}
.rb-s7-1125{padding:2rem;text-align:center;}
.rb-s7-0647{padding:2rem;text-align:center;border:1px dashed var(--border);border-radius:8px;color:var(--text-secondary);}
.rb-s7-0263{padding:2rem;text-align:center;color:var(--text-faint);}
.rb-s7-0481{padding:32px;}
.rb-s7-0020{padding:32px;text-align:center;}
.rb-s7-1188{padding:3px 8px;font-size:10px;}
.rb-s7-0053{padding:3rem;text-align:center;color:var(--color-text-dim);}
.rb-s7-1110{padding:40px;}
.rb-s7-1137{padding:48px 32px;text-align:center;}
.rb-s7-0324{padding:48px;text-align:center;}
.rb-s7-1105{padding:48px;text-align:center;color:var(--text-muted);}
.rb-s7-0837{padding:4px;border:none;background:none;cursor:pointer;border-radius:4px;transition:background .15s;}
.rb-s7-0872{padding:4px;border:none;background:none;cursor:pointer;border-radius:var(--rb-border-radius, 4px);transition:background .15s;}
.rb-s7-0038{padding:4rem 2rem;text-align:center;color:var(--muted-foreground);}
.rb-s7-1111{padding:60px 0;text-align:center;color:var(--text-faint);}
.rb-s7-0840{padding:6px 10px;border-radius:8px;background:linear-gradient(180deg, rgba(255,87,34,.15), rgba(255,87,34,.05));border:1px solid rgba(255,87,34,.4);font-size:11px;font-weight:600;text-align:center;min-width:120px;}
.rb-s7-0841{padding:6px 12px 10px;}
.rb-s7-0601{padding:6px 12px;font-size:11px;color:#94a3b8;background:rgba(148,163,184,0.05);}
.rb-s7-0962{padding:6px 12px;font-size:11px;color:#94a3b8;border-bottom:1px solid var(--color-border-dark);}
.rb-s7-0584{padding:6px 12px;font-size:11px;color:var(--color-primary-400);background:rgba(255,87,34,0.06);}
.rb-s7-0937{padding:6px 16px;border-bottom:1px solid rgba(255,87,34,0.06);}
.rb-s7-0509{padding:6px 8px;border-bottom:1px solid var(--color-border-dark);display:flex;gap:8px;}
.rb-s7-0582{padding:8px 12px;}
.rb-s7-1080{padding:8px 12px;display:flex;gap:6px;border-top:1px solid var(--color-border-dark);}
.rb-s7-0288{padding:8px 12px;font-size:11px;color:#94a3b8;background:rgba(148,163,184,0.08);border-bottom:1px solid var(--color-border-dark);}
.rb-s7-1007{padding:8px 12px;font-size:11px;color:#94a3b8;background:rgba(255,87,34,0.04);border-bottom:1px solid var(--color-border-dark);}
.rb-s7-1091{padding:8px 12px;font-size:11px;color:#94a3b8;background:rgba(255,87,34,0.04);border-bottom:1px solid var(--color-border-dark);display:flex;justify-content:space-between;}
.rb-s7-1225{padding:8px 12px;font-size:11px;color:#94a3b8;background:rgba(34,197,94,0.08);border-bottom:1px solid var(--color-border-dark);}
.rb-s7-0315{padding:8px 12px;font-size:11px;color:var(--color-primary-400);background:rgba(255,87,34,0.06);border-bottom:1px solid var(--color-border-dark);}
.rb-s7-1078{padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg-alt);}
.rb-s7-0473{padding:8px 16px;border-top:1px solid var(--color-border-dark);font-size:11px;color:var(--color-text-dark-secondary,#94a3b8);display:flex;gap:12px;}
.rb-s7-0933{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;min-width:260px;max-width:400px;background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.2);font-size:0.85rem;}
.rb-s7-0183{pointer-events:none;}
.rb-s7-0917{pointer-events:none;opacity:0.7;}
.rb-s7-0948{position:absolute;bottom:calc(100% + 6px);left:0;z-index:100;background:var(--surface);border:1px solid var(--border);border-radius:var(--rb-border-radius-full, 9999px);padding:4px 6px;display:flex;gap:2px;box-shadow:0 4px 20px rgba(0,0,0,.18);white-space:nowrap;}
.rb-s7-1175{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.rb-s7-0496{position:absolute;inset:0;border-radius:var(--rb-avatar-border-radius, 9999px);background:rgba(0,0,0,0.45);pointer-events:none;}
.rb-s7-1131{position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:var(--color-text-dim);font-size:0.6rem;pointer-events:none;z-index:1;}
.rb-s7-1333{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:0.7rem;color:var(--muted-foreground);}
.rb-s7-0713{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:0.65rem;color:var(--muted-foreground);}
.rb-s7-0179{position:absolute;right:0.5rem;top:50%;transform:translateY(-50%);color:var(--color-text-dim);font-size:0.6rem;background:none;border:none;cursor:pointer;z-index:1;}
.rb-s7-0166{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted-foreground);padding:0.125rem;}
.rb-s7-0411{position:absolute;top:100%;left:0;right:0;z-index:10;background:var(--surface);border:1px solid var(--border);border-radius:8px;max-height:200px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.2);margin-top:4px;}
.rb-s7-1258{position:absolute;top:16px;right:16px;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;z-index:10001;opacity:0.7;}
.rb-s7-0520{position:absolute;top:1rem;right:1rem;z-index:10;background:none;border:none;cursor:pointer;padding:0.25rem;color:var(--muted-foreground);transition:color 0.15s;}
.rb-s7-1150{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;width:440px;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.3);}
.rb-s7-0650{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:400px;max-width:90vw;box-shadow:0 16px 48px rgba(0,0,0,.35);}
.rb-s7-1268{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:440px;max-width:90vw;box-shadow:0 16px 48px rgba(0,0,0,.35);}
.rb-s7-0365{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);padding:24px;}
.rb-s7-1040{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);padding:0;overflow:hidden;}
.rb-s7-0941{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;color:#ef4444;font-size:0.7rem;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));pointer-events:none;}
.rb-s7-0791{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 24px rgba(0,0,0,.25);padding:10px 20px;}
.rb-s7-0265{position:fixed;bottom:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.rb-s7-1370{position:fixed;bottom:24px;left:24px;z-index:900;}
.rb-s7-1121{position:fixed;bottom:80px;right:20px;z-index:1000;width:44px;height:44px;border-radius:var(--rb-border-radius-medium, 0.75rem);border:none;background:var(--primary);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,0.25);transition:all 0.3s ease;font-size:1rem;}
.rb-s7-0804{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9998;align-items:center;justify-content:center;padding:24px;}
.rb-s7-1205{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9999;align-items:center;justify-content:center;padding:16px;}
.rb-s7-1126{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9999;align-items:center;justify-content:center;padding:24px;}
.rb-s7-1327{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.55);}
.rb-s7-1193{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);}
.rb-s7-0158{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;}
.rb-s7-1135{position:fixed;top:0;left:0;height:3px;width:0;z-index:99998;background:linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #fff));box-shadow:0 0 8px color-mix(in srgb, var(--primary) 50%, transparent);transition:width 0.1s ease-out;pointer-events:none;}
.rb-s7-0433{position:fixed;top:0;left:0;height:3px;z-index:9999;background:linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #fff));width:0;transition:width 0.1s linear;pointer-events:none;}
.rb-s7-1067{position:relative;}
.rb-s7-1217{position:relative;flex-shrink:0;}
.rb-s7-0340{position:relative;width:36px;height:36px;border-radius:6px;border:1px solid var(--color-border-dark);overflow:hidden;flex-shrink:0;background:var(--color-dark-bg);}
.rb-s7-1316{position:relative;z-index:1;background:color-mix(in srgb, var(--danger, #ef4444) 10%, transparent);color:var(--danger, #ef4444);border-bottom:1px solid color-mix(in srgb, var(--danger, #ef4444) 20%, transparent);}
.rb-s7-0792{position:relative;z-index:1;background:color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);color:var(--warning, #f59e0b);border-bottom:1px solid color-mix(in srgb, var(--warning, #f59e0b) 20%, transparent);}
.rb-s7-1044{position:relative;z-index:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:420px;max-width:90vw;box-shadow:0 16px 48px rgba(0,0,0,.3);}
.rb-s7-0468{position:sticky;bottom:0;padding:0.75rem 1.25rem;display:flex;align-items:center;gap:0.75rem;border-top:2px solid var(--color-primary-500);border-radius:0 0 var(--radius-lg) var(--radius-lg);z-index:10;backdrop-filter:blur(8px);}
.rb-s7-0402{position:sticky;top:70px;}
.rb-s7-0434{position:sticky;top:70px;overflow:hidden;}
.rb-s7-0116{text-align:center;}
.rb-s7-0349{text-align:center;margin-bottom:0.75rem;}
.rb-s7-0672{text-align:center;margin-top:16px;font-size:12px;}
.rb-s7-0372{text-align:center;margin-top:16px;font-size:12px;color:var(--text-muted);}
.rb-s7-0725{text-align:center;margin-top:20px;}
.rb-s7-1102{text-align:center;padding-top:0.25rem;}
.rb-s7-0634{text-align:center;padding:.75rem;}
.rb-s7-1315{text-align:center;padding:0 20px 24px;}
.rb-s7-0459{text-align:center;padding:0.75rem 0;font-size:0.75rem;}
.rb-s7-0453{text-align:center;padding:12px 0;}
.rb-s7-0207{text-align:center;padding:1rem;}
.rb-s7-0765{text-align:center;padding:24px 0;}
.rb-s7-1257{text-align:center;padding:2rem 1rem;font-size:0.75rem;}
.rb-s7-0460{text-align:center;padding:2rem;color:var(--text-faint);}
.rb-s7-0720{text-align:center;padding:32px;color:var(--text-muted);}
.rb-s7-0418{text-align:center;padding:48px 16px;}
.rb-s7-1039{text-align:center;padding:80px 20px;}
.rb-s7-0938{text-align:left;padding:.75rem;}
.rb-s7-1271{text-align:left;padding:0.75rem;}
.rb-s7-0404{text-align:right;padding:.75rem;}
.rb-s7-0105{text-decoration:none;}
.rb-s7-1060{text-decoration:none;color:inherit;}
.rb-s7-0784{text-decoration:none;color:inherit;display:block;}
.rb-s7-0828{text-decoration:none;color:var(--muted-foreground);}
.rb-s7-0637{text-transform:none;letter-spacing:0;}
.rb-s7-0494{text-transform:none;letter-spacing:0;font-size:11px;}
.rb-s7-1275{top:5rem;background:var(--surface);border:1px solid var(--border);}
.rb-s7-0830{transition:transform .15s;}
.rb-s7-0074{transition:transform 0.2s ease;}
.rb-s7-0452{white-space:nowrap;}
.rb-s7-0499{width:1.75rem;}
.rb-s7-0618{width:100%;}
.rb-s7-0352{width:100%;background:var(--muted);border:1px solid var(--border);border-radius:8px;padding:0.5rem 0.75rem;font-size:0.85rem;color:var(--foreground);}
.rb-s7-0232{width:100%;background:var(--muted);border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.75rem;font-size:0.85rem;color:var(--foreground);resize:vertical;font-family:inherit;}
.rb-s7-0678{width:100%;border-collapse:collapse;}
.rb-s7-0538{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.rb-s7-0599{width:100%;border-collapse:collapse;font-size:0.8125rem;}
.rb-s7-0631{width:100%;color:var(--danger);border-color:var(--danger);}
.rb-s7-0101{width:100%;font-family:'JetBrains Mono',monospace;font-size:0.8125rem;}
.rb-s7-1373{width:100%;font-size:0.8rem;border-collapse:collapse;}
.rb-s7-0979{width:100%;height:100%;object-fit:contain;}
.rb-s7-0192{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.rb-s7-1318{width:100%;height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;outline:none;}
.rb-s7-0759{width:100%;height:42px;padding:0 0.85rem;border-radius:10px;font-size:0.85rem;outline:none;background:var(--background);border:1px solid var(--border);color:var(--foreground);transition:border-color 0.15s, box-shadow 0.15s;}
.rb-s7-0967{width:100%;height:42px;padding:0 2.5rem 0 0.85rem;border-radius:10px;font-size:0.85rem;outline:none;background:var(--background);border:1px solid var(--border);color:var(--foreground);transition:border-color 0.15s, box-shadow 0.15s;}
.rb-s7-0685{width:100%;height:44px;border-radius:10px;font-weight:600;font-size:0.9rem;transition:opacity 0.15s;}
.rb-s7-0575{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.rb-s7-0380{width:100%;margin-bottom:10px;}
.rb-s7-0814{width:100%;margin-bottom:12px;}
.rb-s7-0090{width:100%;margin-bottom:1rem;padding:.5rem .75rem;border-radius:8px;border:1px solid var(--color-border, rgba(255,255,255,0.1));background:var(--color-dark-bg, #161825);color:var(--color-text, #e2e4ea);font-size:.875rem;}
.rb-s7-0551{width:100%;margin-top:4px;font-size:11px;}
.rb-s7-0307{width:100%;max-width:420px;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:0 25px 60px rgba(0,0,0,0.3);}
.rb-s7-0096{width:100%;max-width:440px;max-height:90vh;overflow-y:auto;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:0 25px 60px rgba(0,0,0,0.3);}
.rb-s7-0327{width:100%;max-width:var(--rb-auth-form-max-width, 420px);}
.rb-s7-0954{width:100%;padding:0.55rem 0.75rem;background:var(--color-input,#0d0c0b);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);font-family:'Inter',sans-serif;font-size:0.8125rem;}
.rb-s7-1032{width:100%;padding:0.55rem 0.75rem;background:var(--color-input,#0d0c0b);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);font-family:'Inter',sans-serif;font-size:0.8125rem;transition:border-color 120ms;}
.rb-s7-0100{width:100%;resize:none;}
.rb-s7-1383{width:100px;font-family:var(--font-sans);font-size:0.7rem;padding:0.35rem 0.5rem;}
.rb-s7-0733{width:120px;font-family:var(--font-sans);font-size:0.65rem;padding:0.3rem 0.4rem;}
.rb-s7-0795{width:120px;font-family:var(--font-sans);font-size:0.65rem;padding:0.3rem 0.4rem;border-color:rgba(129,140,248,0.3);}
.rb-s7-1269{width:120px;font-family:var(--font-sans);font-size:0.7rem;padding:0.35rem 0.5rem;}
.rb-s7-1020{width:14px;text-align:center;font-size:0.6rem;}
.rb-s7-1213{width:160px;}
.rb-s7-0363{width:16px;}
.rb-s7-0749{width:16px;color:var(--muted-foreground);}
.rb-s7-0807{width:16px;color:var(--warning);}
.rb-s7-0194{width:16px;font-size:.75rem;}
.rb-s7-0055{width:16px;font-size:.75rem;color:var(--muted-foreground);}
.rb-s7-1218{width:16px;font-size:0.75rem;}
.rb-s7-0628{width:16px;font-size:0.75rem;color:var(--muted-foreground);}
.rb-s7-0220{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;border-radius:4px;}
.rb-s7-1082{width:16px;height:16px;margin-top:2px;accent-color:var(--primary);cursor:pointer;}
.rb-s7-1156{width:16px;height:16px;padding:0;border:none;border-radius:4px;cursor:pointer;}
.rb-s7-0888{width:16px;text-align:center;}
.rb-s7-0928{width:16px;text-align:center;font-size:0.3rem;opacity:0.4;}
.rb-s7-0367{width:16px;text-align:center;opacity:0.8;}
.rb-s7-0734{width:16rem;}
.rb-s7-0175{width:180px;}
.rb-s7-1153{width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.55rem;font-weight:700;}
.rb-s7-0235{width:18px;height:18px;border-radius:50%;object-fit:cover;}
.rb-s7-0267{width:18px;height:18px;border-radius:var(--rb-avatar-border-radius, 9999px);object-fit:cover;}
.rb-s7-1227{width:1px;height:14px;background:rgba(255,255,255,0.1);margin:0 4px;}
.rb-s7-0438{width:1px;height:20px;background:var(--border);margin:0 4px;}
.rb-s7-0963{width:1px;height:24px;background:var(--border);margin:0 4px;}
.rb-s7-0899{width:20px;}
.rb-s7-1354{width:20px;font-size:0.85rem;text-align:center;}
.rb-s7-1303{width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.55rem;font-weight:700;}
.rb-s7-1345{width:20px;height:20px;border-radius:50%;object-fit:cover;}
.rb-s7-0328{width:20px;height:20px;border-radius:var(--rb-avatar-border-radius, 9999px);object-fit:cover;}
.rb-s7-0583{width:20px;height:20px;object-fit:cover;border-radius:4px;}
.rb-s7-0543{width:20px;text-align:center;font-weight:700;}
.rb-s7-0595{width:220px;}
.rb-s7-0813{width:22rem;}
.rb-s7-0034{width:240px;}
.rb-s7-0374{width:24px;height:24px;display:block;}
.rb-s7-0679{width:24px;height:24px;object-fit:cover;border-radius:4px;}
.rb-s7-0810{width:24px;height:24px;object-fit:cover;border-radius:var(--rb-border-radius, 4px);}
.rb-s7-0212{width:256px;}
.rb-s7-0879{width:300px;border-left:1px solid var(--border);padding:16px;overflow-y:auto;position:fixed;top:var(--header-h,60px);right:0;bottom:0;background:var(--bg, var(--surface, #fff));z-index:50;box-shadow:-4px 0 16px -8px rgba(0,0,0,.12);}
.rb-s7-0879.hidden{display:none;}
/* Conversation bubble actions + reaction picker + aggregate chips */
.bubble-row .bubble{position:relative;}
.bubble-actions{position:absolute;top:-22px;right:4px;display:none;gap:4px;background:var(--surface,#fff);border:1px solid var(--border);border-radius:999px;padding:2px 6px;box-shadow:0 2px 6px -2px rgba(0,0,0,.15);z-index:2;}
.bubble-row.me .bubble-actions{right:auto;left:4px;}
.bubble-row:hover .bubble-actions{display:flex;}
.bubble-action{background:transparent;border:0;cursor:pointer;font-size:11px;color:var(--text-muted,var(--text-faint));padding:2px 4px;border-radius:4px;}
.bubble-action:hover{background:var(--bg-alt,transparent);color:var(--text);}
.bubble-action.is-active{color:var(--accent);}
.bubble-edited{margin-left:4px;opacity:.6;font-size:10px;}
/* Read receipt ticks — shown only on your own outgoing bubbles. Faded = */
/* delivered (recipient hasn't opened past it); emerald = read/seen.       */
.bubble-time .convo-read{margin-left:5px;font-size:11px;vertical-align:-1px;}
.bubble-time .convo-read.is-read{color:#34d399;}
.conv-react-picker{position:absolute;z-index:60;display:flex;gap:6px;padding:6px 8px;background:var(--surface,#fff);border:1px solid var(--border);border-radius:999px;box-shadow:0 6px 18px -6px rgba(0,0,0,.18);}
.conv-react-picker.hidden{display:none;}
.conv-react-emoji{background:transparent;border:0;cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;border-radius:6px;transition:transform .12s ease, background .12s ease;}
.conv-react-emoji:hover{background:var(--bg-alt,color-mix(in oklab,var(--accent) 8%,transparent));transform:scale(1.18);}
.bubble-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.bubble-reactions:empty{display:none;}
.bubble-react-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--bg-alt,color-mix(in oklab,var(--accent) 6%,transparent));border:1px solid var(--border);cursor:pointer;font-size:12px;line-height:1.4;}
.bubble-react-chip:hover{background:color-mix(in oklab,var(--accent) 14%,transparent);}
.bubble-react-chip.is-mine{background:color-mix(in oklab,var(--accent) 22%,transparent);border-color:var(--accent);}
.bubble-react-chip .emoji{font-size:13px;}
.bubble-react-chip .cnt{font-size:11px;opacity:.85;}
.rb-s7-1147{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--border);}
.rb-s7-1178{width:28px;height:28px;border-radius:5px;cursor:pointer;border:2px solid rgba(129,140,248,0.3);background:transparent;padding:0;}
.rb-s7-1233{width:28px;height:28px;border-radius:5px;cursor:pointer;border:2px solid var(--color-border-dark);background:transparent;padding:0;}
.rb-s7-1290{width:28px;height:28px;border-radius:6px;background:rgba(255,87,34,0.12);display:flex;align-items:center;justify-content:center;}
.rb-s7-1061{width:28px;height:28px;border-radius:6px;background:rgba(99,102,241,0.15);display:flex;align-items:center;justify-content:center;}
.rb-s7-1098{width:28px;height:28px;border-radius:6px;background:var(--color-dark-hover, rgba(0,0,0,.04));display:flex;align-items:center;justify-content:center;color:var(--color-text-dim, #64748b);text-decoration:none;margin-top:2px;font-size:12px;}
.rb-s7-0627{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0;}
.rb-s7-1340{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, #f59e0b 12%, transparent);font-size:.9rem;flex-shrink:0;}
.rb-s7-1356{width:32px;height:32px;border-radius:8px;object-fit:cover;flex-shrink:0;}
.rb-s7-0045{width:32px;height:32px;border-radius:var(--rb-avatar-border-radius, 9999px);display:flex;align-items:center;justify-content:center;background:var(--muted);font-size:.6rem;font-weight:700;color:var(--muted-foreground);}
.rb-s7-0227{width:32px;height:32px;border:none;cursor:pointer;border-radius:6px;padding:0;}
.rb-s7-0405{width:36px;height:36px;}
.rb-s7-0203{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent);}
.rb-s7-0217{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.rb-s7-0831{width:36px;height:36px;border:none;border-radius:8px;cursor:pointer;padding:0;}
.rb-s7-0068{width:36px;height:36px;object-fit:cover;}
.rb-s7-1021{width:38%;min-width:0;}
.rb-s7-1211{width:3px;align-self:stretch;flex-shrink:0;border-radius:2px;transition:background 0.15s;}
.rb-s7-0341{width:3px;min-height:28px;align-self:stretch;flex-shrink:0;border-radius:2px;transition:background 0.15s;}
.rb-s7-1041{width:3rem;}
.rb-s7-1207{width:40%;min-width:0;}
.rb-s7-0087{width:40px;height:36px;border:none;background:transparent;cursor:pointer;border-radius:4px;}
.rb-s7-0518{width:40px;height:40px;background:color-mix(in srgb, var(--primary) 12%, transparent);}
.rb-s7-1006{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted-foreground);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .2s;}
.rb-s7-1226{width:40px;height:40px;border-radius:50%;object-fit:cover;}
.rb-s7-0689{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.rb-s7-0382{width:40px;height:40px;border-radius:var(--rb-avatar-border-radius, 9999px);object-fit:cover;flex-shrink:0;}
.rb-s7-0844{width:40px;height:40px;object-fit:cover;}
.rb-s7-1134{width:48px;height:48px;border-radius:12px;background:var(--primary);display:inline-flex;align-items:center;justify-content:center;margin-bottom:0.75rem;}
.rb-s7-1042{width:50%;}
.rb-s7-0849{width:50px;}
.rb-s7-0065{width:50px;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:rgba(248,113,113,0.5);text-align:center;}
.rb-s7-0028{width:50px;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.2);text-align:center;}
.rb-s7-1096{width:50px;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:rgba(74,222,128,0.5);text-align:center;}
.rb-s7-0998{width:5rem;}
.rb-s7-0300{width:60%;min-width:0;}
.rb-s7-0174{width:62%;min-width:0;}
.rb-s7-0796{width:80px;}
.rb-s7-1288{width:8px;height:8px;border-radius:50%;background:var(--primary);margin-top:16px;}
.rb-s7-0176{width:8px;height:8px;border-radius:var(--rb-border-radius-full, 9999px);display:inline-block;background:#22c55e;box-shadow:0 0 6px #22c55e;}
.rb-s7-0456{width:auto;}
.rb-s7-1017{word-break:break-all;}
.rb-s7-1329{z-index:100;}
.rb-s7-1065{z-index:2;}
.rb-s7-0078{z-index:3;}
.rb-s7-0420{z-index:9999;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);}

/* ───── Master BBCode CSS variable aliases ───── */
:root {
    --color-primary-500: var(--primary);
    --color-primary-400: var(--primary);
    --color-primary-600: var(--primary);
    --color-surface-raised: color-mix(in oklab, var(--primary) 8%, transparent);
    --color-dark-elevated: color-mix(in oklab, var(--primary) 10%, transparent);
    --color-border: var(--border);
    --color-border-dark: var(--border);
    --color-success: var(--success);
    --color-warning: var(--warn);
    --color-on-surface-muted: var(--muted-foreground);
    --color-on-surface: var(--foreground);
    --color-surface-variant: var(--surface-2);
}

/* ───── BBCode rendered content styles (ported from Master css/public/bbcode) ───── */
/* ???????????????????????????????????????
   BBCode Rendered Content Styles
   Used in post bodies, profile about/signature
   ??????????????????????????????????????? */

/* Quote */
/* ── Quote block — with header + collapse ── */
.bbcode-quote {
    border: 1px solid var(--border, #2a2a2e);
    border-left: 3px solid var(--primary, #f24b18);
    background: var(--surface-2, rgba(0,0,0,0.03));
    padding: 0;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.55;
    overflow: hidden;
    position: relative;
}
.bbcode-quote__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border, #2a2a2e);
    background: color-mix(in srgb, var(--primary, #f24b18) 6%, var(--surface, #18181b));
}
.bbcode-quote__author {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary, #f24b18);
    display: flex;
    align-items: center;
    gap: 6px;
}
.bbcode-quote__icon { opacity: 0.7; font-size: 0.65rem; }
.bbcode-quote__post-link {
    font-size: 0.7rem;
    color: var(--muted-foreground, #888);
    text-decoration: none;
    opacity: 0.8;
}
.bbcode-quote__post-link:hover { opacity: 1; color: var(--primary, #f24b18); }
.bbcode-quote-content { padding: 8px 12px; }
.bbcode-quote[data-collapsible] .bbcode-quote-content {
    max-height: 130px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
}
.bbcode-quote[data-collapsible].is-expanded .bbcode-quote-content { max-height: none; }
.bbcode-quote[data-collapsible]:not(.is-expanded) .bbcode-quote-content::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 48px;
    background: linear-gradient(transparent, var(--surface-2, #18181b));
    pointer-events: none;
}
.bbcode-quote__expand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted-foreground, #888);
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    border-top: 1px solid var(--border, #2a2a2e);
    transition: color 0.15s, background 0.15s;
}
.bbcode-quote__expand:hover { color: var(--foreground, #fff); background: color-mix(in srgb, var(--primary, #f24b18) 6%, transparent); }
.bbcode-quote__expand i { font-size: 0.65rem; }
.bbcode-quote+br { display: none; }
.bbcode-quote+br+br { display: none; }
.bbcode-quote cite { display: none; }

/* Code Block Wrapper */
.bbcode-code-wrap {
    margin: 0.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--color-border-dark, rgba(255, 255, 255, 0.08));
    background: #0d1117;
}

/* Code Header (language + copy) */
.bbcode-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bbcode-code-lang {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-primary-400, #818cf8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bbcode-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.bbcode-code-copy:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
}

.bbcode-code-copy.copied {
    color: #22c55e;
}

/* Code Block */
.bbcode-code {
    background: #0d1117;
    color: #e0e0e0;
    padding: 0.75rem;
    margin: 0;
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.6;
    display: flex;
    gap: 0.75rem;
}

.bbcode-code code {
    background: transparent;
    color: inherit;
    font-size: inherit;
    padding: 0;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* Line Numbers */
.bbcode-code-lines {
    display: flex;
    flex-direction: column;
    text-align: right;
    user-select: none;
    min-width: 2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding-right: 0.75rem;
}

.bbcode-code-ln {
    font-size: 0.7rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.2);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ?? Light Mode: Code Blocks ?? */
[data-theme="light"] .bbcode-code-wrap {
    background: #f8f9fc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .bbcode-code-header {
    background: #f1f5f9 !important;
    border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .bbcode-code-lang {
    color: var(--color-primary-600, #4f46e5) !important;
}

[data-theme="light"] .bbcode-code-copy {
    color: #64748b !important;
}

[data-theme="light"] .bbcode-code-copy:hover {
    color: #1e293b !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .bbcode-code {
    background: #f8f9fc !important;
    color: #334155 !important;
}

[data-theme="light"] .bbcode-code code {
    color: #334155 !important;
    background: transparent !important;
}

[data-theme="light"] .bbcode-code-lines {
    border-right-color: #e2e8f0 !important;
}

[data-theme="light"] .bbcode-code-ln {
    color: #94a3b8 !important;
}

/* Inline code */
.bbcode-icode {
    background: var(--color-surface-raised, rgba(99, 102, 241, 0.08));
    color: var(--color-primary-600, #6366f1);
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.85em;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.dark .bbcode-icode {
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary-400);
}

/* Spoiler */
.bbcode-spoiler {
    margin: 0.5rem 0;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: 0.5rem;
    overflow: hidden;
}

.dark .bbcode-spoiler {
    border-color: var(--color-border-dark, rgba(255, 255, 255, 0.08));
}

.bbcode-spoiler>summary {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--color-surface-raised, rgba(0, 0, 0, 0.02));
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dark .bbcode-spoiler>summary {
    background: var(--color-dark-elevated, rgba(255, 255, 255, 0.03));
}

.bbcode-spoiler>summary::before {
    content: '?';
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.bbcode-spoiler[open]>summary::before {
    transform: rotate(90deg);
}

.bbcode-spoiler> :not(summary) {
    padding: 0.75rem;
}

/* Inline spoiler */
.bbcode-ispoiler:hover,
.bbcode-ispoiler:focus,
.bbcode-ispoiler.revealed {
    color: inherit;
    background: var(--color-surface-raised, rgba(0, 0, 0, 0.06));
}

.dark .bbcode-ispoiler {
    background: rgba(255, 255, 255, 0.15);
}

.dark .bbcode-ispoiler:hover,
.dark .bbcode-ispoiler.revealed {
    background: rgba(255, 255, 255, 0.06);
}

/* List */
.bbcode-list {
    padding-left: 1.5rem;
    margin: 0.25rem 0;
    list-style-type: disc;
}

/* WYSIWYG editor list styles � !important to override CSS resets */
.wysiwyg-editor ul,
.wysiwyg-editor ol {
    padding-left: 1.5rem !important;
    margin: 0.25rem 0 !important;
    display: block !important;
}

.wysiwyg-editor ul {
    list-style-type: disc !important;
}

.wysiwyg-editor ol {
    list-style-type: decimal !important;
}

.wysiwyg-editor li {
    margin: 0.15rem 0;
    display: list-item !important;
}

/* Table */
.bbcode-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}

.bbcode-th,
.bbcode-td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    text-align: left;
}

.dark .bbcode-th,
.dark .bbcode-td {
    border-color: var(--color-border-dark, rgba(255, 255, 255, 0.08));
}

.bbcode-th {
    font-weight: 600;
    background: var(--color-surface-raised, rgba(0, 0, 0, 0.03));
}

.dark .bbcode-th {
    background: var(--color-dark-elevated, rgba(255, 255, 255, 0.04));
}

/* Indent */
.bbcode-indent {
    margin: 0.25rem 0;
}

/* Heading */
.bbcode-heading {
    margin: 0.5rem 0 0.25rem;
    font-weight: 700;
}

/* Horizontal Rule */
.bbcode-hr {
    border: none;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    margin: 0.75rem 0;
}

.dark .bbcode-hr {
    border-color: var(--color-border-dark, rgba(255, 255, 255, 0.08));
}

/* PHP/HTML code blocks */
.bbcode-php,
.bbcode-html {
    background: #0d1117;
    color: #e0e0e0;
    padding: 1rem;
    margin: 0.5rem 0;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.8rem;
    border: 1px solid var(--color-border-dark, rgba(255, 255, 255, 0.08));
}

/* ?? Light Mode: PHP/HTML blocks ?? */
[data-theme="light"] .bbcode-php,
[data-theme="light"] .bbcode-html {
    background: #f8f9fc;
    color: #334155;
    border-color: #e2e8f0;
}

/* Mention */
.bbcode-mention {
    font-weight: 600;
    color: var(--color-primary-500);
    cursor: pointer;
}

.bbcode-mention:hover {
    text-decoration: underline;
}

/* Embed */
.bbcode-embed {
    max-width: 100%;
    margin: 0.5rem 0;
}

.bbcode-embed iframe {
    max-width: 100%;
    border-radius: 0.5rem;
}

/* Attachment placeholder */
.bbcode-attach {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-surface-raised, rgba(99, 102, 241, 0.06));
    border-radius: 0.25rem;
    font-size: 0.8rem;
    color: var(--color-primary-500);
    text-decoration: none;
}

.bbcode-attach:hover {
    text-decoration: underline;
}

/* [hide] family � conditional visibility blocks. */
.bbcode-hide {
  margin: 0.5rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-primary-500, #4a90e2);
  border-radius: 0.25rem;
  background: var(--color-surface-variant, rgba(0, 0, 0, 0.03));
}

.bbcode-hide-visible {
  border-left-color: var(--color-success, #2e7d32);
}

.bbcode-hide-locked {
  border-left-color: var(--color-warning, #f59e0b);
  color: var(--color-on-surface-muted, #b45309);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bbcode-hide-icon {
  flex-shrink: 0;
  opacity: 0.75;
}

.bbcode-hide-message {
  font-size: 0.9em;
}

.bbcode-hide-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
}

/* Inline spoiler click handler */
.bbcode-ispoiler {
  background: var(--color-on-surface, #333);
  color: transparent;
  padding: 0.1em 0.3em;
  border-radius: 0.2rem;
  cursor: pointer;
  transition: color 0.2s;
  user-select: none;
}

/* Smilie picker — category tabs */
.smilie-picker-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.smilie-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted-foreground);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.smilie-tab:hover {
  background: var(--muted);
  color: var(--foreground);
}
.smilie-tab.is-active {
  background: var(--primary);
  color: var(--primary-foreground, #fff);
  border-color: var(--primary);
}


/* ═══════════════════════════════════════════════════════════════════════
 * Widget zones — admin-managed positions (sidebar, above_content,
 * below_content, footer). Renders a responsive 2-col grid on desktop
 * and collapses to a single column on mobile so widgets push below
 * the main content instead of squeezing it.
 * Position keys map 1:1 to widget_position.position_key.
 * ═══════════════════════════════════════════════════════════════════════ */
.sidebar-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr var(--rb-sidebar-w, 280px);
}
.sidebar-grid--left {
    grid-template-columns: var(--rb-sidebar-w, 280px) 1fr;
}
.sidebar-grid .content-region {
    min-width: 0;
}
.sidebar-grid .widget-sidebar {
    align-self: start;
}

/* Above / below content zones — full width inside content region */
.widget-zone {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}
.widget-zone-below {
    margin-top: 18px;
    margin-bottom: 0;
}
.widget-zone .rb-widget-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Footer widget zone — grid auto-fits */
.footer-widget-zone {
    margin-top: 24px;
    margin-bottom: 24px;
}
.footer-widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.footer-widget-grid .rb-widget-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Mobile: collapse 2-col sidebar grid; sidebar drops below content */
@media (max-width: 960px) {
    .sidebar-grid,
    .sidebar-grid--left {
        grid-template-columns: 1fr;
    }
    .sidebar-grid--left .widget-sidebar {
        order: 1;
    }
}
@media (max-width: 720px) {
    .footer-widget-grid {
        grid-template-columns: 1fr;
    }
    .widget-zone {
        gap: 10px;
        margin-bottom: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   POSTBIT — modern card layout for Master-inherited postbit macro.
   raxboard_default themes the .post grid 200px|1fr — Master's
   .rb-postbit-modern fills first column as the author sidebar.
   ══════════════════════════════════════════════════════════════════ */
.rb-postbit-modern {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: var(--surface-2, var(--surface));
    border: 0;
    border-right: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 0 !important;
    width: 100%;
    text-align: left;
    flex-shrink: 0;
    overflow: hidden;
}
.rb-postbit-modern.rb-postbit--compact { width: var(--rb-postbit-width, 215px); }

/* Higher specificity than theme-tokens.css "100% !important" override */
body .rb-postbit.rb-postbit-modern .rb-pb-avatar-link {
    position: relative;
    display: block;
    width: 120px !important;
    height: 120px !important;
    aspect-ratio: auto !important;
    margin: 0 auto 10px !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: var(--muted, rgba(255,255,255,0.04));
    flex: 0 0 auto;
}
body .rb-postbit.rb-postbit-modern .rb-pb-avatar-link .rb-avatar,
body .rb-postbit.rb-postbit-modern .rb-pb-avatar-link .rb-pb-avatar,
body .rb-postbit.rb-postbit-modern .rb-pb-avatar-link img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    font-size: 3.25rem !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}
.rb-postbit-modern .rb-pb-avatar,
.rb-postbit-modern .rb-pb-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    font-size: 2.25rem !important;
}
.rb-postbit-modern .rb-pb-online-dot {
    position: absolute;
    bottom: 4px; right: 4px;
    left: auto; transform: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--muted-foreground);
    border: 2px solid var(--surface-2, var(--surface));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0;
}
.rb-postbit-modern .rb-pb-online-dot[data-online="1"] { background: #22c55e; }
.rb-postbit-modern .rb-pb-online-dot i { font-size: 0; }

.rb-postbit-modern .rb-pb-username {
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    display: block;
    margin: 2px 0 2px;
    color: var(--foreground);
    text-decoration: none;
    word-break: break-word;
}
.rb-postbit-modern .rb-pb-title {
    text-align: center;
    font-size: 0.7rem;
    color: var(--muted-foreground);
    margin-bottom: 6px;
    font-weight: 500;
}
.rb-postbit-modern .rb-pb-badges {
    margin: 0 0 10px;
    display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.rb-postbit-modern .rb-pb-trophies {
    display: flex; gap: 4px; justify-content: center; margin-bottom: 8px;
}
.rb-postbit-modern .rb-pb-trophy {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    background: color-mix(in srgb, var(--muted) 60%, transparent);
    color: var(--muted-foreground);
    font-size: 0.7rem;
}

/* Reputation block (signed total + colored rep-bar) */
.rb-postbit-modern .rb-pb-rep { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 6px 0; }
.rb-pb-rep__label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); }
.rb-pb-rep__val { font-size: 15px; font-weight: 700; color: var(--foreground); }
.rb-pb-rep__val.is-pos { color: #16a34a; }
.rb-pb-rep__val.is-neg { color: #ef4444; }
.rb-pb-rep__bar { display: inline-flex; gap: 2px; margin-top: 1px; }
.rb-pb-rep__pip { width: 7px; height: 7px; border-radius: 2px; background: var(--border); display: inline-block; }
.rb-pb-rep__pip.on-pos { background: #16a34a; }
.rb-pb-rep__pip.on-neg { background: #ef4444; }
.rb-postbit-modern .rb-pb-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 4px;
    margin: 6px 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.rb-postbit-modern .rb-pb-hero-cell {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 6px;
    text-align: center;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.rb-postbit-modern .rb-pb-hero-cell__label {
    font-size: 0.6rem;
    color: var(--muted-foreground);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rb-postbit-modern .rb-pb-hero-cell__value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary);
    margin-top: 1px;
    line-height: 1;
}

.rb-postbit-modern .rb-pb-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.rb-postbit-modern .rb-pb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: color-mix(in srgb, var(--muted, rgba(255,255,255,0.04)) 40%, transparent);
    font-size: 0.78rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.rb-postbit-modern .rb-pb-row:hover {
    background: color-mix(in srgb, var(--muted, rgba(255,255,255,0.04)) 70%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border, rgba(255,255,255,0.08)));
    transform: translateX(2px);
}
.rb-postbit-modern .rb-pb-row__icon {
    color: var(--muted-foreground);
    width: 14px;
    text-align: center;
    font-size: 0.8rem;
}
.rb-postbit-modern .rb-pb-row__label {
    flex: 1;
    color: var(--muted-foreground);
}
.rb-postbit-modern .rb-pb-row__value {
    color: var(--foreground);
    font-weight: 700;
}
.rb-postbit-modern .rb-pb-row__value--link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-postbit-modern .rb-pb-custom {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.7rem;
}
.rb-postbit-modern .rb-pb-custom > div { display: flex; flex-direction: column; gap: 2px; }

.rb-postbit-modern .rb-pb-profile-btn {
    display: block;
    text-align: center;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--foreground);
    background: var(--surface);
    text-decoration: none;
}
.rb-postbit-modern .rb-pb-profile-btn:hover {
    background: var(--muted);
}

/* Minimal fix: theme-tokens.css remaps `--border` etc. for dark mode
   via empty `--color-border-dark` chain. Only patch the empty vars
   so canonical token values come through; do NOT touch already-set
   tokens like --primary / --surface / --foreground. */
html[data-theme="dark"] {
    --color-border-dark: oklch(0.3 0.013 260);
    --color-dark-card:   oklch(0.22 0.013 260);
}

/* Master thread/show wraps each post in <div class="post flex gap-0">
   but raxboard_default styles .post as a 2-col grid. Force grid back
   when both classes coexist. */
.post.flex { display: grid !important; }

/* Post body fills 2nd grid column flush against the postbit */
.post > .post-body,
.post > div.post-body,
.post .post-body.flex-1 {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Compact post head meta line */
.post-wrapper .post-head,
.post .post-head {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}
.post-head .rb-thread-starter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    line-height: 1;
}
.post-head .rb-thread-starter i { font-size: 9px; }
.post-head__right { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 768px) {
    .post.flex { grid-template-columns: 1fr !important; }
    .rb-postbit-modern { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ══════════════════════════════════════════════════════════════════
   THREAD HEADER — redesigned card (.rb-th)
   ══════════════════════════════════════════════════════════════════ */
.rb-th--card {
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent 60%),
        var(--surface);
    padding: 18px 20px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* Top band: author + actions */
.rb-th__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.rb-th__author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 50%, transparent);
    border: 1px solid var(--border);
    color: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.rb-th__author:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--muted));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
.rb-th__author-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    flex: 0 0 auto;
}
.rb-th__author-meta {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}
.rb-th__author-line {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.78rem;
}
.rb-th__author-label { color: var(--muted-foreground); }
.rb-th__author-name { color: var(--foreground); font-weight: 700; }
.rb-th__author-time {
    font-size: 0.7rem;
    color: var(--muted-foreground);
    margin-top: 1px;
}
.rb-th__author-time i { margin-right: 3px; }

.rb-th__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rb-th__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted-foreground);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rb-th__action:hover {
    background: var(--muted);
    color: var(--foreground);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
.rb-th__action.is-active {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.rb-th__action--danger:hover { color: #ef4444; border-color: color-mix(in srgb, #ef4444 40%, var(--border)); }
.rb-th__action-label { display: inline; }
@media (max-width: 640px) {
    .rb-th__action-label { display: none; }
    .rb-th__action { padding: 6px 8px; }
}

/* Badges row */
.rb-th__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    align-items: center;
}
.rb-th__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 50%, transparent);
    color: var(--foreground);
}
.rb-th__pill i { font-size: 0.7rem; }
.rb-th__pill--primary {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    color: var(--primary);
}
.rb-th__pill--warn {
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    border-color: color-mix(in srgb, #f59e0b 40%, transparent);
    color: #d97706;
}
.rb-th__pill--hot {
    background: color-mix(in srgb, #ef4444 14%, transparent);
    border-color: color-mix(in srgb, #ef4444 45%, transparent);
    color: #ef4444;
    animation: rb-th-pulse 2.4s ease-in-out infinite;
}
@keyframes rb-th-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
    50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.18); }
}
.rb-th__pill--status {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    background: color-mix(in srgb, var(--info, var(--primary)) 10%, transparent);
    border-color: color-mix(in srgb, var(--info, var(--primary)) 30%, var(--border));
}
.rb-th__pill-label { color: var(--muted-foreground); font-weight: 500; }
.rb-th__pill-value { color: var(--foreground); font-weight: 700; }

/* Title */
.rb-th__title {
    margin: 6px 0 14px;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--foreground);
    word-break: break-word;
}

/* Stats + badges combined row */
.rb-th__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0 4px;
    border-top: 1px dashed var(--border);
}
.rb-th__stats-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 2px;
}
.rb-th__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 40%, transparent);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--muted-foreground);
}
.rb-th__stat i {
    color: var(--primary);
    font-size: 0.75rem;
    align-self: center;
}
.rb-th__stat-value { color: var(--foreground); font-weight: 700; font-size: 0.85rem; }
.rb-th__stat-label { color: var(--muted-foreground); }
.rb-th__rating {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rb-th__rating-stars { display: inline-flex; gap: 1px; font-size: 0.85rem; }
.rb-th__rating-count { font-size: 0.72rem; color: var(--muted-foreground); white-space: nowrap; }

/* Participants */
.rb-th__participants {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.rb-th__participants-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
    font-weight: 700;
}
.rb-th__participants-stack {
    display: flex;
    align-items: center;
}
.rb-th__participant + .rb-th__participant { margin-left: -8px; }
.rb-th__participant-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 2px solid var(--surface);
    transition: transform 0.15s;
}
.rb-th__participant:hover .rb-th__participant-avatar {
    transform: translateY(-2px);
    z-index: 2;
}
.rb-th__participants-more-wrap { display: inline-flex; margin-left: 6px; }
.rb-th__participants-more {
    font-size: 0.72rem;
    color: var(--muted-foreground);
    font-weight: 600;
    background: none;
    border: 0;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.rb-th__participants-more:hover { color: var(--foreground); background: var(--muted); }
/* Full-roster popover. The header card is overflow:hidden, so this is
   position:fixed (anchored via Alpine place() on desktop) to escape the clip;
   ≤600px it becomes a centered fixed sheet so it never spills off a phone. */
.rb-th__participants-pop {
    position: fixed;
    z-index: 60;
    width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.35);
    padding: 6px;
}
.rb-th__participants-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--muted-foreground);
    padding: 6px 8px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.rb-th__participants-pop-count {
    background: var(--muted);
    color: var(--foreground);
    border-radius: 999px;
    padding: 0 7px;
    font-size: .7rem;
    line-height: 18px;
}
.rb-th__participants-pop-list { display: flex; flex-direction: column; gap: 2px; }
.rb-th__participants-pop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--foreground);
    text-decoration: none;
    font-size: .85rem;
}
.rb-th__participants-pop-row:hover { background: var(--muted); }
.rb-th__participants-pop-avatar { width: 24px !important; height: 24px !important; border-radius: 50% !important; flex-shrink: 0; }
.rb-th__participants-pop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Backdrop only exists on mobile, where the popover becomes a centered sheet. */
.rb-th__participants-backdrop { display: none; }
@media (max-width: 600px) {
    .rb-th__participants-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 99999;
    }
    /* Center as a fixed sheet; !important overrides the inline top/left that
       Alpine place() sets for the desktop anchored position. */
    .rb-th__participants-pop {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(320px, calc(100vw - 24px));
        max-height: 70vh;
        z-index: 100000;
        box-shadow: 0 12px 40px rgba(0,0,0,.5);
    }
}

/* Hide legacy floating Save/Share that sit outside the new card */
.thread-header + .floating-actions,
body .post-actions-floating { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   Page shell, layout primitives & utility shims
   Added to support /trending, /feed, /clubs and any template using
   Tailwind-style utility classes. Matches site container width so the
   footer (.site-footer-inner uses var(--container)) stays aligned.
   ═══════════════════════════════════════════════════════════════════ */

/* Constrain primary <main> to container width and match footer padding
   so .rb-footer-inner (40px L/R padding) lines up with the page edges. */
#main-content,
.main-region > main {
    max-width: var(--container, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 24px;
    padding-bottom: 60px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    #main-content,
    .main-region > main { padding-left: 18px; padding-right: 18px; }
}

/* Page wrapper used by /trending, /feed, /clubs */
.page { display: block; }
.page > .crumbs { margin-bottom: 14px; }

/* Crumbs — newer template uses .crumb / .crumb-sep tokens */
.crumb { color: var(--muted-foreground); text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.crumb:hover { color: var(--foreground); }
.crumb-sep { color: var(--text-faint); opacity: .5; padding: 0 2px; }

/* hstack — horizontal flex row */
.hstack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ─── Trending / Feed list ─────────────────────────────────────── */
.trend-list { display: flex; flex-direction: column; gap: 8px; }
.trend-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--foreground);
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.trend-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: var(--foreground); }
.trend-rank-lg {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-faint);
    text-align: center;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.trend-row > div.rb-s7-0768 { min-width: 0; }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.spark > span { width: 4px; border-radius: 2px; display: block; }

/* ─── Pagination ──────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; margin-top: 24px; }
.page-nums { display: inline-flex; gap: 6px; }
.page-num {
    min-width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--muted-foreground);
    text-decoration: none; font-size: 13px;
}
.page-num:hover { border-color: var(--border-strong); color: var(--foreground); }
.page-num.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--surface); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; line-height: 1.2;
    cursor: pointer; text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--muted); border-color: var(--border-strong); color: var(--foreground); }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--lg { padding: 11px 18px; font-size: 14px; }
.btn-primary, .btn--primary {
    background: var(--primary); color: var(--primary-foreground);
    border-color: var(--primary);
}
.btn-primary:hover, .btn--primary:hover { filter: brightness(1.08); background: var(--primary); color: var(--primary-foreground); }

/* ─── Form controls ───────────────────────────────────────────── */
.form-control {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: var(--background-alt); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    box-sizing: border-box;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.form-control[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ─── Cards & pills (clubs/index, feed empty-state) ───────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.card-pad { padding: 16px; }
.pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    background: var(--muted); color: var(--muted-foreground);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.4;
}

/* ─── Club grid ───────────────────────────────────────────────── */
.club-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.club-card { transition: border-color .12s, box-shadow .12s, transform .12s; }
.club-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

/* ─── Breadcrumb (legacy non-Style7 branch fallback) ──────────── */
.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--muted-foreground);
    margin-bottom: 14px;
}
.breadcrumb a { color: var(--muted-foreground); text-decoration: none; }
.breadcrumb a:hover { color: var(--foreground); }

/* ═══════════════════════════════════════════════════════════════════
   Utility shims — minimum subset of Tailwind-style classes referenced
   by core templates. Not a full Tailwind reimplementation.
   ═══════════════════════════════════════════════════════════════════ */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.block { display: block; }
.grid { display: grid; }

.flex-1 { flex: 1 1 0%; min-width: 0; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.items-baseline{ align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-start   { justify-content: flex-start; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

.w-full  { width: 100%; }
.w-4   { width: 16px; }  .h-4  { height: 16px; }
.w-5   { width: 20px; }  .h-5  { height: 20px; }
.w-6   { width: 24px; }  .h-6  { height: 24px; }
.w-9   { width: 36px; }  .h-9  { height: 36px; }
.w-10  { width: 40px; }  .h-10 { height: 40px; }
.w-12  { width: 48px; }  .h-12 { height: 48px; }
.w-64  { width: 256px; }
.min-w-0 { min-width: 0; }
.max-w-screen-2xl { max-width: var(--container, 1280px); }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0  { padding: 0; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.p-6  { padding: 24px; }
.p-8  { padding: 32px; }
.p-12 { padding: 48px; }
.px-2 { padding-left: 8px;  padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-1 { padding-top: 4px;  padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.py-2 { padding-top: 8px;  padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }

.m-0  { margin: 0; }
.mt-0\.5 { margin-top: 2px; }
.mt-1 { margin-top: 4px; }
.mt-1\.5 { margin-top: 6px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mr-0\.5 { margin-right: 2px; }
.mr-1 { margin-right: 4px; }
.mr-1\.5 { margin-right: 6px; }
.mr-2 { margin-right: 8px; }
.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.text-2xl { font-size: 22px; }
.text-4xl { font-size: 32px; }
.text-dim { color: var(--muted-foreground); }
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.no-underline { text-decoration: none; }
.text-white { color: #fff; }
.object-cover { object-fit: cover; }

.relative { position: relative; }
.absolute { position: absolute; }
.-bottom-1 { bottom: -4px; }
.-right-1  { right: -4px; }

.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-6 > * + * { margin-top: 24px; }

.transition-all     { transition: all .15s ease; }
.transition-colors  { transition: color .12s, background-color .12s, border-color .12s; }
.hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
.hover\:underline:hover { text-decoration: underline; }
.opacity-20 { opacity: .2; }
.opacity-40 { opacity: .4; }

@media (min-width: 1024px) {
    .lg\:block   { display: block; }
    .lg\:hidden  { display: none; }
}
@media (max-width: 1023.98px) {
    .lg\:block   { display: none; }
}
@media (min-width: 768px) {
    .md\:px-6 { padding-left: 24px; padding-right: 24px; }
    .md\:py-6 { padding-top: 24px; padding-bottom: 24px; }
}

/* Empty-state inline-style classes (rb-s7-*) used by /trending, /feed. */
.rb-s7-1111 {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 48px 20px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--muted-foreground);
    gap: 8px;
}
.rb-s7-0697 { font-size: 32px; opacity: .4; color: var(--text-faint); }
.rb-s7-0001 { font-weight: 600; font-size: 14px; color: var(--foreground); margin: 0; }
.rb-s7-0894 { margin: 0; font-size: 12.5px; }
.rb-s7-0768 { min-width: 0; }
.rb-s7-0218, .rb-s7-0357 { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; color: var(--foreground); }
.rb-s7-0235, .rb-s7-0217 { border-radius: 50%; object-fit: cover; }
.rb-s7-0255 { display: inline-flex; align-items: center; justify-content: center; }
.rb-s7-0242 { color: var(--primary); }
.rb-s7-1092 { color: var(--danger); }
.rb-s7-0413 { color: var(--primary); }
.rb-s7-0368 { color: var(--muted-foreground); }

/* ══════════════════════════════════════════════════════════════════
   raxboard_default UI tweaks
   ══════════════════════════════════════════════════════════════════ */

/* Hide left navigation rail (.rbt-rail) — raxboard_default uses topbar */
.rbt-rail,
aside.rbt-rail { display: none !important; }
.rbt-rail + main,
body { padding-left: 0 !important; }

/* Reserve scrollbar gutter so opening the cmd-K palette (or any modal that
   toggles body overflow) doesn't shift page width and jump scroll. */
html { scrollbar-gutter: stable; }

/* Header Sign in / Sign up buttons — bigger tap target */
.rb-auth__ghost,
.rb-auth__primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 88px;
    padding: 0 18px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 10px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
}
.rb-auth__ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
}
.rb-auth__ghost:hover {
    background: var(--muted);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.rb-auth__primary {
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    border: 1px solid var(--primary);
}
.rb-auth__primary:hover {
    filter: brightness(1.08);
}
.rb-auth__ghost:active,
.rb-auth__primary:active { transform: translateY(1px); }
.rb-auth__ghost:active,
.rb-auth__primary:active { transform: translateY(1px); }

/* ═══ Discuss Style (Flarum-like compact list) ═══════════════════
 * Triggered by body[data-forum-view="flat"] from user style tweaks.
 * Transforms forum tree into single-line discussion rows.
 */
body[data-forum-view="flat"] .categories { gap: 12px; }
body[data-forum-view="flat"] .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 4px 8px;
    border-bottom: 0;
    margin: 0;
}
body[data-forum-view="flat"] .cat-head h2 {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted-foreground);
    margin: 0;
}
body[data-forum-view="flat"] .cat-head p { display: none; }
body[data-forum-view="flat"] .cat-head .cat-meta {
    font-size: 10px;
    color: var(--text-faint);
}
body[data-forum-view="flat"] .nodes {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
body[data-forum-view="flat"] .node-row {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    min-height: 52px;
}
body[data-forum-view="flat"] .node-row:last-child { border-bottom: 0; }
body[data-forum-view="flat"] .node-row:hover {
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
body[data-forum-view="flat"] .node-row-icon { width: 32px; height: 32px; }
body[data-forum-view="flat"] .node-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 13px;
}
body[data-forum-view="flat"] .node-main { min-width: 0; }
body[data-forum-view="flat"] .node-title-row { margin: 0; }
body[data-forum-view="flat"] .node-title {
    font-size: 14px; font-weight: 600;
    color: var(--foreground);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-forum-view="flat"] .node-desc {
    font-size: 11px;
    margin: 2px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0.85;
}
body[data-forum-view="flat"] .node-stats {
    gap: 16px;
    font-size: 12px;
}
body[data-forum-view="flat"] .node-stats > div {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}
body[data-forum-view="flat"] .node-stats .num {
    font-size: 13px;
    color: var(--foreground);
}
body[data-forum-view="flat"] .node-stats .lbl {
    font-size: 10px;
    margin: 0;
    text-transform: lowercase;
    letter-spacing: 0;
}
body[data-forum-view="flat"] .node-last {
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
    min-width: 0;
    max-width: 220px;
}
body[data-forum-view="flat"] .node-last-avatar .avatar.sm {
    width: 28px; height: 28px;
}
body[data-forum-view="flat"] .node-last-body { min-width: 0; }
body[data-forum-view="flat"] .node-last-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
}
body[data-forum-view="flat"] .node-last-meta {
    font-size: 10px;
    color: var(--text-faint);
}
/* mobile: collapse Discuss Style to two-line: title row + meta row */
@media (max-width: 720px) {
    body[data-forum-view="flat"] .node-row {
        grid-template-columns: 32px 1fr;
        grid-template-areas: "icon main" "last last";
        row-gap: 6px;
    }
    body[data-forum-view="flat"] .node-row > .node-row-icon { grid-area: icon; }
    body[data-forum-view="flat"] .node-row > .node-main { grid-area: main; }
    body[data-forum-view="flat"] .node-row > .node-stats { display: none; }
    body[data-forum-view="flat"] .node-row > .node-last {
        grid-area: last;
        max-width: 100%;
        flex-direction: row;
        padding-top: 6px;
        border-top: 1px dashed var(--border);
    }
}
body[data-forum-view="flat"] .rbt-widget-sidebar { display: none !important; }
body[data-forum-view="flat"] .rbt-content-shell.rb-with-sidebar { gap: 0 !important; }
body[data-forum-view="flat"] .rbt-content { flex: 1 1 100% !important; max-width: 100% !important; }

/* ═══ Discuss "Start Discuss" button — cleaner hover ═══ */
body[data-forum-view="flat"] .fl-start-btn {
    background: var(--primary);
    color: var(--primary-foreground, #fff) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    transform: translateY(0);
}
body[data-forum-view="flat"] .fl-start-btn:hover {
    background: color-mix(in srgb, var(--primary) 88%, #000);
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
body[data-forum-view="flat"] .fl-start-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Discuss sidebar — hide inline widget HTML block (My Account, Stats, etc.) */
body[data-forum-view="flat"] .fl-sidebar .rb-s7-0921 { display: none !important; }

/* ── Postbit IS the author block at every width (single element) ──
   The compact mobile head (.rb-pbm) now lives INSIDE the postbit <aside> (see
   macros/post/postbit.php) — there is no separate post-head author block.
   Desktop ≥640: full vertical sidebar, .rb-pbm hidden. Mobile <640: collapse
   the aside to a full-width horizontal bar showing only .rb-pbm (every other
   postbit child hidden) and stack it above the post body.
   main.css loads after the core bundle + carries a filemtime ?v= cache-bust,
   so this is the reliable, cascade-winning home for the rule. */
.rb-pbm { display: none; }
.rb-pbm__id { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.rb-pbm__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rb-pbm__name { font-weight: 700; color: var(--foreground); text-decoration: none; }
.rb-pbm__title { font-size: .72rem; color: var(--muted-foreground); }
@media (max-width: 639px) {
    .post.flex { flex-direction: column; }
    .rb-postbit.rb-postbit-modern {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center;
        padding: 12px 14px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
        border-radius: 0 !important;
        overflow: visible;
    }
    .rb-postbit.rb-postbit-modern > *:not(.rb-pbm) { display: none !important; }
    .rb-pbm {
        display: flex !important;
        align-items: center;
        gap: 10px;
        min-width: 0;
        width: 100%;
    }
    .rb-pbm .rb-avatar,
    .rb-pbm .avatar { width: 40px !important; height: 40px !important; font-size: .95rem !important; }
    .rb-pbm__name { font-size: .9rem; }
    .rb-pbm__top [class*="banner"],
    .rb-pbm__top [class*="badge"],
    .rb-pbm__top .pill { font-size: .56rem !important; padding: 1px 6px !important; line-height: 1.3 !important; }
}

/* ════════════════════════════════════════════════════════════════
   Attach files — panel below the editor + rendered output
   ════════════════════════════════════════════════════════════════ */
.rb-attach { position: relative; border: 1px solid var(--border);  }
.rb-attach--drag { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.rb-attach__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
.rb-attach__hint { color: var(--muted-foreground, #6b7280); font-size: .82rem; }
.rb-attach__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border: 2px dashed var(--primary); color: var(--primary); font-weight: 600; pointer-events: none; z-index: 2; }
.rb-attach__list { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.rb-attach__item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted, rgba(0,0,0,.02)); }
.rb-attach__item--error { border-color: #ef4444; }
.rb-attach__thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--muted-foreground, #6b7280); }
.rb-attach__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rb-attach__thumb i { font-size: 1.1rem; }
.rb-attach__meta { flex: 1 1 auto; min-width: 0; }
.rb-attach__name { display: block; font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-attach__sub { display: block; font-size: .75rem; color: var(--muted-foreground, #6b7280); }
.rb-attach__err { color: #ef4444; }
.rb-attach__progress { margin-top: 4px; height: 4px; border-radius: 3px; background: var(--border); overflow: hidden; }
.rb-attach__progress span { display: block; height: 100%; background: var(--primary); transition: width .2s ease; }
.rb-attach__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.rb-attach__rm { color: #ef4444; }
.rb-attach__max { color: #ef4444; font-size: .78rem; margin: 0; padding: 2px 4px 8px; }
@media (max-width: 600px) {
    .rb-attach__hint { display: none; }
    .rb-attach__name { max-width: 46vw; }
}

/* Rendered attachments inside a posted message */
.bbcode-attachment { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; }
.bbcode-attachment--image { display: inline-block; }
.bbcode-attachment--image img { max-width: 320px; max-height: 320px; border-radius: 8px; border: 1px solid var(--border); }
.bbcode-attachment--file { display: inline-flex; align-items: center; gap: 10px; max-width: 360px; margin: 3px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--foreground, inherit); vertical-align: middle; transition: border-color .15s ease, box-shadow .15s ease; }
.bbcode-attachment--file, .bbcode-attachment--file:hover { text-decoration: none; }
.bbcode-attachment--file:hover { border-color: var(--primary); box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.bbcode-attachment__icon { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1.15rem; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.bbcode-attachment__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bbcode-attachment__name { font-weight: 600; font-size: .85rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.bbcode-attachment__meta { font-size: .72rem; color: var(--muted-foreground, #6b7280); text-decoration: none; }
.bbcode-attachment__size { color: var(--muted-foreground, #6b7280); }
.bbcode-attachment__dl { flex: 0 0 auto; margin-left: 2px; color: var(--muted-foreground, #6b7280); transition: color .15s ease; }
.bbcode-attachment--file:hover .bbcode-attachment__dl { color: var(--primary); }
/* Editor chip (WYSIWYG, non-image attachment) */
.bbcode-attachment-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; margin: 0 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--muted, rgba(0,0,0,.04)); font-size: .85rem; user-select: none; cursor: default; }

/* Post attachments block — files attached to a post but not embedded inline (Stage 2b) */
.rb-post-attachments { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.rb-post-attachments__head { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--muted-foreground, #6b7280); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.rb-post-attachments__count { font-weight: 500; opacity: .8; }
.rb-post-attachments__grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.rb-post-attachments__grid .bbcode-attachment--image img { max-width: 160px; max-height: 160px; }

/* Responsive toolbar tiers (Stage 3) — per-button wrapper is layout-invisible
   (display:contents) so JS can show/hide buttons by viewport without altering
   the flex layout. JS toggles inline display:none on .bbcode-tbi to hide. */
.bbcode-tbi { display: contents; }

/* ════════════════════════════════════════════════════════════════
   Mobile editor fixes (≤768px)
   - <main> runs an entrance animation whose transform sticks, creating a
     containing block that re-anchored the editor's position:fixed dropdowns
     to <main> (rendered off-screen). Neutralize the transform on mobile so
     fixed dropdowns/modals anchor to the viewport again.
   - Alpine x-transition can leave the dropdown panels stuck at opacity:0 on
     mobile (the panel is display:block via .is-open but invisible). Force
     opacity:1 so the bottom-sheet dropdowns are actually visible.
   - Toolbar stays a single row; undo/redo/fullscreen are dropped (view-mode
     tabs kept) — overflow tools remain reachable via the "More" dropdown.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    main { animation: none !important; transform: none !important; }

    .bbcode-editor-wrapper .rb-s7-0801,
    .bbcode-editor-wrapper .rb-s7-0141,
    .bbcode-editor-wrapper .smilie-picker-pop { opacity: 1 !important; transform: none !important; }

    .bbcode-toolbar { flex-wrap: nowrap !important; overflow-x: auto; }
    .bbcode-toolbar::-webkit-scrollbar { height: 0; }

    /* Right-side group: hide undo/redo/fullscreen (.bbcode-btn) + their
       separators; keep the view-mode tabs (.bbcode-tab-btn). */
    .bbcode-toolbar .rb-s7-0332 .bbcode-btn,
    .bbcode-toolbar .rb-s7-0332 .rb-s7-0438 { display: none !important; }

    /* Status bar: declutter on touch — drop the keyboard-shortcut hint, keep
       the char/word counters + draft status compact on one wrapping line. */
    .bbcode-status-bar { flex-wrap: wrap; row-gap: 2px; column-gap: 8px; font-size: .7rem; padding: 4px 8px; }
    .bbcode-status-bar .rb-s7-0694 { display: none; }

    /* Attach panel hint already hidden ≤600px; keep it hidden through 768. */
    .rb-attach__hint { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile responsiveness — post-action popovers, action footer & edit-history
   modal.  (Bug pass 2026-06-13)
   ════════════════════════════════════════════════════════════════════════ */

/* Edit-history modal (.rb-modal-panel in thread/show) — VIEWPORT-AGNOSTIC.
   The panel markup leans on the Tailwind utilities `max-h-[80vh]` and a
   `min-h-0` scroll body, but those arbitrary/utility classes are purged from
   the built bundle, so the panel had NO height cap: a long history grew past
   the screen, pushed the header (with the close button) out of view, and the
   body never scrolled. Restore both so it behaves at every width. */
.rb-modal-panel { max-height: 80vh; min-height: 0; }
.rb-modal-panel > .overflow-y-auto { min-height: 0; }

@media (max-width: 600px) {
    /* The reputation reason popup and the reaction picker are absolutely
       positioned off their trigger button; when the trigger sits near a screen
       edge the fixed-width popup spilled outside the viewport ("half shown").
       Re-anchor each as a centered fixed popover that is always fully visible
       and stacks above the mobile reply FAB (.rb-s7-1327, z-index 99999). */
    .rb-rep-pop {
        position: fixed;
        top: 50%; left: 50%; right: auto; bottom: auto;
        transform: translate(-50%, -50%);
        width: min(360px, calc(100vw - 24px));
        max-height: 70vh;
        overflow-y: auto;
        z-index: 100000;
        box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    }
    .react-picker {
        position: fixed;
        top: 50%; left: 50%; right: auto; bottom: auto;
        transform: translate(-50%, -50%);
        width: max-content;
        max-width: calc(100vw - 24px);
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
        z-index: 100000;
        box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    }
    /* The little caret pointed at the trigger; meaningless once centered. */
    .react-picker::after { display: none; }

    /* Action footer: even, left-flowing rows instead of a stretched gap, so the
       buttons line up tidily as they wrap. */
    .post-body footer.post-foot { gap: 4px; row-gap: 6px; padding: 8px 2px 2px; }
    .post-body footer.post-foot .post-action { padding: 6px 8px; font-size: 12px; }
    .post-body footer.post-foot .spacer { flex: 0 0 auto; width: 0; min-width: 0; }
}