<style>[/COLOR]
:root {
--rb-lt-widget-bg: #ffffff;
--rb-lt-widget-border: #e2e8f0;
--rb-lt-widget-primary: var(--primary);
--rb-lt-tab-active-color: var(--primary);
--rb-lt-tab-inactive-color: #64748b;
--rb-lt-tab-bg: transparent;
--rb-lt-header-bg: #f8fafc;
--rb-lt-row-hover-bg: color-mix(in srgb, var(--primary) 8%, transparent);
--rb-lt-title-color: #1e293b;
--rb-lt-title-hover-color: var(--primary);
--rb-lt-meta-color: #64748b;
--rb-lt-stat-color: #1e293b;
--rb-lt-num-bg: #f1f5f9;
--rb-lt-border-line: #f1f5f9;
--rb-lt-widget-border-radius: 12px;
--rb-lt-font-size: 0.8125rem;
--rb-lt-row-padding: 8px 12px;
}
[data-theme="dark"], .dark {
--rb-lt-widget-bg: var(--surface);
--rb-lt-widget-border: var(--border);
--rb-lt-widget-primary: var(--primary);
--rb-lt-tab-active-color: var(--primary);
--rb-lt-tab-inactive-color: var(--muted-foreground);
--rb-lt-tab-bg: transparent;
--rb-lt-header-bg: var(--muted);
--rb-lt-row-hover-bg: var(--muted);
--rb-lt-title-color: var(--foreground);
--rb-lt-title-hover-color: var(--primary);
--rb-lt-meta-color: var(--muted-foreground);
--rb-lt-stat-color: var(--foreground);
--rb-lt-num-bg: var(--muted);
--rb-lt-border-line: var(--border);
}
</style>
<style>
/* ── Frame neutralizer: the generic widget chrome (header bar + card) would
double-frame our own .rb-lt card. Hide it via :has(), with a JS-stamped
.rb-lt-host fallback for engines without :has(). ── */
.rb-widget-container:has(.rb-lt) > .rb-widget-header,
.rb-widget-container.rb-lt-host > .rb-widget-header { display:none; }
.rb-widget-container:has(.rb-lt),
.rb-widget-container.rb-lt-host { border:none; background:transparent; box-shadow:none; padding:0; }
.rb-widget-container:has(.rb-lt) > .rb-widget-body,
.rb-widget-container.rb-lt-host > .rb-widget-body { padding:0; }
.rb-lt {
--lt-primary: var(--rb-lt-widget-primary, var(--primary, #ff5722));
--lt-border: var(--rb-lt-widget-border, var(--border, rgba(0,0,0,.06)));
--lt-bg: var(--rb-lt-widget-bg, var(--surface));
--lt-radius: var(--rb-lt-widget-border-radius, 12px);
--lt-tab-bg: var(--rb-lt-tab-bg, transparent);
--lt-tab-active: var(--rb-lt-tab-active-color, var(--lt-primary));
--lt-tab-inactive: var(--rb-lt-tab-inactive-color, var(--muted-foreground, #64748b));
--lt-row-hover: var(--rb-lt-row-hover-bg, color-mix(in srgb, var(--lt-primary) 5%, transparent));
--lt-head-bg: var(--rb-lt-header-bg, color-mix(in srgb, var(--muted, #f1f5f9) 30%, transparent));
--lt-title: var(--rb-lt-title-color, var(--foreground));
--lt-title-hover: var(--rb-lt-title-hover-color, var(--lt-primary));
--lt-meta: var(--rb-lt-meta-color, var(--muted-foreground, #64748b));
--lt-stat: var(--rb-lt-stat-color, var(--foreground));
--lt-num-bg: var(--rb-lt-num-bg, color-mix(in srgb, var(--muted, #f1f5f9) 60%, transparent));
--lt-divider: var(--rb-lt-border-line, var(--lt-border));
--lt-font-size: var(--rb-lt-font-size, 0.8125rem);
--lt-row-pad: var(--rb-lt-row-padding, 8px 12px);
background: var(--lt-bg);
border-radius: var(--lt-radius);
border: 1px solid var(--lt-border);
overflow: hidden;
container-type: inline-size;
container-name: rblt;
}
.rb-lt.rb-lt-compact { --lt-row-pad: 5px 12px; --lt-font-size: 0.78rem; }
[x-cloak] { display:none !important; }
/* ── Dark mode → ACTIVE THEME tokens ──────────────────────────────────────────
In dark mode the widget pulls its colours from the current theme's semantic
tokens so it matches WHATEVER theme is in use, instead of a fixed dark palette.
NOTE: --surface is a raised panel/card colour, NOT the page background
(--background) — the widget card is a surface. These set the final --lt-* vars
directly at `.rb-lt` scope (specificity 0,2,0) so they win over the compiled
style_<id>.css / inline --rb-lt-* injection, which can lag the DB. Light mode
still honours the admin's per-property colours; dark is theme-driven by design.
Both dark toggles themes use are covered: html[data-theme="dark"] and html.dark. */
[data-theme="dark"] .rb-lt, .dark .rb-lt {
--lt-bg: var(--surface);
--lt-border: var(--border);
--lt-divider: var(--border);
--lt-title: var(--foreground);
--lt-stat: var(--foreground);
--lt-meta: var(--muted-foreground);
--lt-tab-inactive: var(--muted-foreground);
--lt-tab-active: var(--primary);
--lt-title-hover: var(--primary);
--lt-primary: var(--primary);
--lt-head-bg: var(--muted);
--lt-num-bg: var(--muted);
--lt-row-hover: var(--muted);
--lt-tab-bg: transparent;
}
/* Tabs */
.rb-lt .rb-lt-tabs { display:flex; gap:0; border-bottom:2px solid var(--lt-border); background:var(--lt-tab-bg);
overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.rb-lt .rb-lt-tabs::-webkit-scrollbar { display:none; }
.rb-lt .rb-lt-tab {
all:unset; display:inline-flex; align-items:center; gap:6px;
padding:10px 16px; font-size:0.8125rem; font-weight:500;
color:var(--lt-tab-inactive) !important; cursor:pointer;
position:relative; transition:color .2s; white-space:nowrap; user-select:none;
}
.rb-lt .rb-lt-tab:hover { color:var(--foreground) !important; }
.rb-lt .rb-lt-tab:focus-visible { outline:2px solid var(--lt-primary); outline-offset:-2px; border-radius:4px; }
.rb-lt .rb-lt-tab.active { color:var(--lt-tab-active) !important; font-weight:600; }
.rb-lt .rb-lt-tab.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--lt-tab-active); }
.rb-lt .rb-lt-tab i { font-size:0.75rem; }
/* Panels */
.rb-lt .rb-lt-panel { display:block; }
.rb-lt.rb-lt-animated .rb-lt-panel { animation: rbltFade .18s ease; }
@keyframes rbltFade { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .rb-lt.rb-lt-animated .rb-lt-panel { animation:none; } }
/* Table header + rows share the PHP-built grid via --lt-grid */
.rb-lt .rb-lt-thead {
display:grid; grid-template-columns:var(--lt-grid); gap:8px;
padding:6px 12px; font-size:0.6875rem; font-weight:600;
text-transform:uppercase; letter-spacing:0.04em; color:var(--lt-meta);
border-bottom:1px solid var(--lt-border); background:var(--lt-head-bg);
}
.rb-lt .rb-lt-row {
display:grid; grid-template-columns:var(--lt-grid); gap:8px;
align-items:center; padding:var(--lt-row-pad);
text-decoration:none; color:var(--lt-meta);
transition:background .15s; border-bottom:1px solid var(--lt-divider);
}
.rb-lt .rb-lt-row:hover { background:var(--lt-row-hover); }
.rb-lt .rb-lt-row:last-child { border-bottom:none; }
.rb-lt .rb-lt-row--pinned { background:color-mix(in srgb, var(--lt-primary) 6%, transparent); }
.rb-lt a.rb-lt-row, .rb-lt a.rb-lt-row:visited { color:var(--lt-meta); text-decoration:none; }
.rb-lt .rb-lt-num {
width:22px; height:22px; border-radius:6px;
display:flex; align-items:center; justify-content:center;
font-size:0.6875rem; font-weight:700; background:var(--lt-num-bg); color:var(--lt-meta);
}
.rb-lt .rb-lt-pin { color:var(--lt-primary); font-size:0.7rem; }
.rb-lt .rb-lt-cell-thread { display:flex; align-items:center; gap:10px; min-width:0; }
.rb-lt .rb-lt-thread-info { min-width:0; flex:1; }
.rb-lt .rb-lt-titleline { display:flex; align-items:center; gap:6px; min-width:0; }
.rb-lt .rb-lt-prefix {
flex-shrink:0; font-size:0.625rem; font-weight:700; line-height:1;
padding:2px 6px; border-radius:4px; max-width:42%;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
background:color-mix(in srgb, var(--lt-primary) 14%, transparent); color:var(--lt-primary);
}
.rb-lt .rb-lt-title {
font-size:var(--lt-font-size); font-weight:550; line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--lt-title); min-width:0;
}
.rb-lt .rb-lt-row:hover .rb-lt-title { color:var(--lt-title-hover); }
.rb-lt .rb-lt-sub { font-size:0.6875rem; color:var(--lt-meta); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Author username follows the theme text colour (usergroup username_css is
applied inline in rows.php and wins) — not the accent, which forced every
uncoloured author name to --lt-primary. Matches .rb-lt-member-name above. */
.rb-lt .rb-lt-username { color:var(--lt-title); font-weight:600; }
.rb-lt .rb-lt-cell-forum { font-size:0.75rem; color:var(--lt-meta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-lt .rb-lt-cell-stat { font-size:0.8125rem; font-weight:600; text-align:center; color:var(--lt-stat); }
.rb-lt .rb-lt-cell-date { font-size:0.6875rem; color:var(--lt-meta); text-align:right; line-height:1.4; }
.rb-lt .rb-lt-cell-date strong { font-weight:600; color:var(--lt-stat); display:block; }
.rb-lt .rb-lt-head-center { text-align:center; }
.rb-lt .rb-lt-head-right { text-align:right; }
.rb-lt .rb-lt-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px 16px; color:var(--lt-meta); font-size:0.85rem; }
.rb-lt .rb-lt-empty i { font-size:1.5rem; opacity:0.25; }
/* G3/G6/G7 tab bar chrome: arrows + refresh + customize */
.rb-lt .rb-lt-tabbar { display:flex; align-items:stretch; border-bottom:2px solid var(--lt-border); background:var(--lt-tab-bg); }
.rb-lt .rb-lt-tabbar .rb-lt-tabs { flex:1; min-width:0; border-bottom:none; }
.rb-lt .rb-lt-tabnav, .rb-lt .rb-lt-toolbtn { all:unset; display:inline-flex; align-items:center; justify-content:center;
width:34px; min-height:38px; cursor:pointer; color:var(--lt-tab-inactive) !important; flex-shrink:0; }
.rb-lt .rb-lt-tabnav:hover, .rb-lt .rb-lt-toolbtn:hover { color:var(--lt-primary) !important; }
.rb-lt .rb-lt-tabnav:disabled { opacity:.3; cursor:default; }
.rb-lt .rb-lt-toolbtn:disabled { opacity:.5; cursor:default; }
.rb-lt .rb-lt-tabnav:focus-visible, .rb-lt .rb-lt-toolbtn:focus-visible { outline:2px solid var(--lt-primary); outline-offset:-2px; border-radius:6px; }
.rb-lt .rb-lt-prefs-wrap { position:relative; display:flex; }
.rb-lt .rb-lt-prefs { position:absolute; top:100%; right:0; z-index:40; min-width:230px; max-width:calc(100vw - 24px);
background:var(--lt-bg); border:1px solid var(--lt-border); border-radius:10px; padding:10px;
box-shadow:0 8px 24px rgba(0,0,0,.18); }
.rb-lt .rb-lt-prefs-title { font-size:0.75rem; font-weight:700; color:var(--lt-meta); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.rb-lt .rb-lt-prefs-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; }
.rb-lt .rb-lt-prefs-row label { display:flex; align-items:center; gap:8px; font-size:0.8125rem; color:var(--lt-title); cursor:pointer; min-width:0; }
.rb-lt .rb-lt-prefs-row label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-lt .rb-lt-prefs-btns { display:inline-flex; gap:2px; flex-shrink:0; }
.rb-lt .rb-lt-prefs-btns button { all:unset; cursor:pointer; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
border-radius:6px; color:var(--lt-meta); font-size:0.6rem; }
.rb-lt .rb-lt-prefs-btns button:hover { background:color-mix(in srgb, var(--lt-primary) 10%, transparent); color:var(--lt-primary); }
.rb-lt .rb-lt-prefs-btns button:disabled { opacity:.3; cursor:default; }
.rb-lt .rb-lt-prefs-err { margin-top:8px; font-size:0.72rem; line-height:1.35; color:var(--destructive, #dc2626);
background:color-mix(in srgb, var(--destructive, #dc2626) 10%, transparent); border-radius:6px; padding:6px 8px; }
.rb-lt .rb-lt-prefs-save { all:unset; cursor:pointer; display:block; width:100%; box-sizing:border-box; text-align:center; margin-top:8px;
padding:7px 0; border-radius:8px; font-size:0.8rem; font-weight:600; color:#fff !important; background:var(--lt-primary); }
.rb-lt .rb-lt-prefs-save:hover { filter:brightness(1.06); }
/* G4 pin/unpin toggle — 32px touch target, shown on the row's right edge */
.rb-lt .rb-lt-row { position:relative; }
/* Reserve a right gutter (canPin rows only) so the toggle sits in its own space
instead of overlapping the last-reply poster. Shrinking the row's content box
pulls the right-aligned last cell left; the abspos toggle lands in the gutter. */
.rb-lt .rb-lt-row:has(.rb-lt-pin-toggle) { padding-right:38px; }
.rb-lt .rb-lt-pin-toggle { position:absolute; top:50%; right:2px; transform:translateY(-50%);
width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
border-radius:8px; color:var(--lt-meta); cursor:pointer; opacity:0; transition:opacity .15s, color .15s, background .15s; }
.rb-lt .rb-lt-row:hover .rb-lt-pin-toggle, .rb-lt .rb-lt-pin-toggle:focus-visible { opacity:1; }
.rb-lt .rb-lt-pin-toggle:hover { background:color-mix(in srgb, var(--lt-primary) 12%, transparent); color:var(--lt-primary); }
.rb-lt .rb-lt-pin-toggle.is-pinned { opacity:1; color:var(--lt-primary); }
.rb-lt .rb-lt-pin-toggle.is-busy { opacity:.4; pointer-events:none; }
.rb-lt .rb-lt-pin-toggle:focus-visible { outline:2px solid var(--lt-primary); outline-offset:1px; }
@media (hover:none) { .rb-lt .rb-lt-pin-toggle { opacity:1; } } /* touch: always visible */
/* G5 custom sticky rows — full-width flat rows above the pins */
.rb-lt .rb-lt-custom { border-bottom:1px solid var(--lt-divider); }
.rb-lt .rb-lt-row--custom { display:flex; align-items:center; gap:10px; padding:var(--lt-row-pad);
text-decoration:none; color:var(--lt-title); font-size:var(--lt-font-size); font-weight:550;
background:color-mix(in srgb, var(--lt-primary) 5%, transparent); }
.rb-lt .rb-lt-row--custom:hover { background:color-mix(in srgb, var(--lt-primary) 10%, transparent); }
.rb-lt .rb-lt-custom-ic { width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
font-size:0.7rem; background:color-mix(in srgb, var(--lt-primary) 14%, transparent); color:var(--lt-primary); flex-shrink:0; }
.rb-lt .rb-lt-custom-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-lt .rb-lt-custom-ext { font-size:0.65rem; color:var(--lt-meta); flex-shrink:0; }
/* Lazy-load placeholder + G1 show-more footer */
.rb-lt .rb-lt-loading { display:flex; align-items:center; justify-content:center; gap:8px; padding:28px 16px; color:var(--lt-meta); font-size:0.8125rem; }
.rb-lt .rb-lt-footer { display:flex; justify-content:center; padding:8px 12px; border-top:1px solid var(--lt-divider); }
.rb-lt .rb-lt-more { all:unset; display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:0.78rem; font-weight:600; color:var(--lt-primary) !important; padding:6px 14px; border-radius:8px; transition:background .15s; }
.rb-lt .rb-lt-more:hover { background:color-mix(in srgb, var(--lt-primary) 10%, transparent); }
.rb-lt .rb-lt-more:disabled { opacity:.5; cursor:default; }
.rb-lt .rb-lt-more:focus-visible { outline:2px solid var(--lt-primary); outline-offset:2px; }
/* Members grid */
.rb-lt .rb-lt-members { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; padding:12px; }
.rb-lt .rb-lt-member-card { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; text-decoration:none; color:inherit; border:1px solid color-mix(in srgb, var(--lt-border) 50%, transparent); transition:background .15s, border-color .15s; }
.rb-lt .rb-lt-member-card:hover { background:var(--lt-row-hover); border-color:color-mix(in srgb, var(--lt-primary) 30%, transparent); }
.rb-lt .rb-lt-member-info { flex:1; min-width:0; }
.rb-lt .rb-lt-member-name { font-size:0.8125rem; font-weight:600; color:var(--lt-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-lt .rb-lt-member-card:hover .rb-lt-member-name { color:var(--lt-title-hover); }
.rb-lt .rb-lt-member-meta { font-size:0.6875rem; color:var(--lt-meta); margin-top:2px; }
.rb-lt .rb-lt-member-stats { display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.rb-lt .rb-lt-member-stats span { font-size:0.6875rem; color:var(--lt-meta); white-space:nowrap; }
.rb-lt .rb-lt-member-stats i { font-size:0.625rem; margin-right:3px; }
/* ── Narrow container layout: title gets its own row, header hidden ── */
@container rblt (max-width: 680px) {
.rb-lt .rb-lt-thead { display:none; }
/* ModernStats-style stacked list: avatar + prefix + 2-line title + user·date.
Number, forum and last-reply columns are dropped; stats follow the
hide_stats_mobile toggle (hidden by default). */
.rb-lt .rb-lt-row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:2px 12px; padding:11px 12px; }
.rb-lt .rb-lt-cell-num,
.rb-lt .rb-lt-cell-forum,
.rb-lt .rb-lt-cell-date { display:none; }
.rb-lt.rb-lt-hide-stats .rb-lt-cell-stat { display:none; }
.rb-lt .rb-lt-cell-stat { order:2; align-self:center; font-size:0.72rem; }
.rb-lt .rb-lt-cell-thread { order:1; flex:1 1 100%; align-items:flex-start; gap:12px; }
.rb-lt .rb-lt-cell-thread .rb-av { width:44px; height:44px; }
.rb-lt .rb-lt-thread-info { padding-top:1px; }
.rb-lt .rb-lt-titleline { align-items:flex-start; flex-wrap:wrap; gap:4px 6px; }
.rb-lt .rb-lt-title { flex:1 1 auto; min-width:0; white-space:normal;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
line-height:1.35; font-weight:600; }
.rb-lt .rb-lt-prefix { max-width:none; }
.rb-lt .rb-lt-sub { font-size:0.75rem; margin-top:3px; white-space:normal; }
.rb-lt .rb-lt-members { grid-template-columns:1fr; }
.rb-lt .rb-lt-pin-toggle { opacity:1; }
.rb-lt .rb-lt-row:has(.rb-lt-pin-toggle) { padding-right:44px; }
}
/* Fallback for engines without container queries (keys off viewport). */
@supports not (container-type: inline-size) {
@media (max-width: 680px) {
.rb-lt .rb-lt-thead { display:none; }
/* ModernStats-style stacked list: avatar + prefix + 2-line title + user·date.
Number, forum and last-reply columns are dropped; stats follow the
hide_stats_mobile toggle (hidden by default). */
.rb-lt .rb-lt-row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:2px 12px; padding:11px 12px; }
.rb-lt .rb-lt-cell-num,
.rb-lt .rb-lt-cell-forum,
.rb-lt .rb-lt-cell-date { display:none; }
.rb-lt.rb-lt-hide-stats .rb-lt-cell-stat { display:none; }
.rb-lt .rb-lt-cell-stat { order:2; align-self:center; font-size:0.72rem; }
.rb-lt .rb-lt-cell-thread { order:1; flex:1 1 100%; align-items:flex-start; gap:12px; }
.rb-lt .rb-lt-cell-thread .rb-av { width:44px; height:44px; }
.rb-lt .rb-lt-thread-info { padding-top:1px; }
.rb-lt .rb-lt-titleline { align-items:flex-start; flex-wrap:wrap; gap:4px 6px; }
.rb-lt .rb-lt-title { flex:1 1 auto; min-width:0; white-space:normal;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
line-height:1.35; font-weight:600; }
.rb-lt .rb-lt-prefix { max-width:none; }
.rb-lt .rb-lt-sub { font-size:0.75rem; margin-top:3px; white-space:normal; }
.rb-lt .rb-lt-members { grid-template-columns:1fr; }
.rb-lt .rb-lt-pin-toggle { opacity:1; }
.rb-lt .rb-lt-row:has(.rb-lt-pin-toggle) { padding-right:44px; }
}
}
</style>